200 likes | 310 Views
Wed/Fri Week 2. Functions! What are they? What do they look like in JavaScript? What are they good for? How do I use them? Some examples… Mini-Lab 1!!!. What is a function?. A ‘machine’ that does something:. Function. What is a function?. It has a place for input…. Input. Function.
E N D
Wed/Fri Week 2 • Functions! • What are they? • What do they look like in JavaScript? • What are they good for? • How do I use them? • Some examples… • Mini-Lab 1!!!
What is a function? • A ‘machine’ that does something: Function
What is a function? • It has a place for input… Input Function
What is a function? • …and a place for output… Input Function Output
What is a function? • …and a ‘crank’ to ‘do the work’. Input Function Output
What is a function? • So, to use our function machine, we put something in…. Input Function Output
What is a function? • …turn the crank… Input Function Output
What is a function? • …and something will come out! Input Function Output
A Quick Example… • Let’s say we had a function machine that would square a number… SquareNum
A Quick Example… • To use it, we would put a number in… 4 SquareNum
A Quick Example… • …turn the crank… SquareNum
A Quick Example… • …and the right answer will pop out! SquareNum 16
Functions in JavaScript • Every function must have a name. • Inputs are called parameters or arguments • Some functions might not take any parameters. • Outputs are called return values • Some functions might not have a return value.
Functions in JavaScript function SquareNum ( x ) { return (x * x); } Function name Parameter Return value
Functions in JavaScript • A generic function definition: //comments go here – describe what it does function functionName(param1, param2, …) { …body of function… return (value); //more comments }
Functions in JavaScript • Defining a function is not enough – we must call it to make it do something! • Defining a function is analogous to building a function machine. • Calling the function is analogous to turning the crank on the already-built machine. • To call a function, we just use its name! • Must also pass appropriate parameters.
Functions in JavaScript • Example function call: …do something… SquareNum(5); …do some more stuff…
Important Notes • Function calls must have the same number of parameters as the definition expects. • Parentheses are required, even if there are no parameters (this goes for definitions and calls!) • Function definitions don’t do anything. You have to call the function to make it do something. • Definitions go in the <HEAD> of your page, calls can be in the <HEAD> or in the <BODY>
Why Use Functions? • Group statements together into a single logical unit: • Example: No built in sort in JavaScript. We are able write a Sort function, though! • Event handlers: • Call a function every time user clicks a button.
Why Use Functions? • Dividing job into smaller pieces: • Makes it easier to write and test. • For jobs that we’ll do repeatedly: • Define the function once, then we can call it as much as we want! • Some examples • Mini-Lab 1!!!