1. Functions and Methods Function : Block of instructions called (executed) by name Method: A function operating within an object –World Example: start car – object is car, method is start –World Example: turn on light - object is light, method is turn on Built-in methods provided by browsers: –alert is a method in the Window object (the default, so dot notation not required) –write and getElementById are methods in the browser’s document object User-defined functions : you can write your own

2. Syntax for user-defined functions function yourName(param, param, …, param) { /*** JavaScript instructions go here *****/ } Notes function is a reserved word that must be present yourName is an identifier that you choose as the name of the function param, param, …, param is a list of parameters (variables) that the function uses in its instructions separated by commas Put the block of JavaScript instructions between the braces To call the function: yourName(arg, arg, …,arg); where arg, arg, …, arg are arguments (which are expressions) passed to the function so it can do its thing.

3. Green Box Diagram A Function or Method contains a block of instructions We pass (give) the function (or method) information (expressions) as arguments to use Processing is done in the green box Out can come a value that is returned Variables can be set and HTML pages can change as side effects

4. Parameters and Arguments Parameter: name a function gives an expression passed to it Argument: expression passed to a function Why the difference? –We might want to use the function more than once. –We might want to call a function in different ways. 30 function triple(x) { return x*3; } x (parameter) triple(10); First Call 60 function triple(x) { return x*3; } x (parameter) triple(20); Second Call 60 function triple(x) { return x*3; } x (parameter) var z = 20; triple(z) Third Call 90 function triple(x) { return x*3; } x (parameter) triple(triple(10)); Fourth Call

5. Creating and Calling Functions Create a summing function: function sum( x, y, z) { return x+y+z; } Call the sum function when the user clicks on a button Result: 15 displays in an alert box when you click the button Notes –Arguments: 3, 5, and 7 (expressions passed to the function). –Parameters: x, y, z. Inside the function, x=3, y=5, and z = 7. –Parentheses enclose parameters and arguments and they are separated with commas –Braces enclose the function's block of instructions –We call the function by using its name.

6. Browser Built-in Methods alert("hello"); –Object: window –Method Name: alert –Argument: "hello" –Returned: nothing in this case –Side affect: dialog box created document.write("hello"); –Object: Document –Method Name: write –Argument: "hello" –Returned: nothing in this case –Side affect: data written into the web-page Note: We can use dot notation and write window.alert (but don’t have to because window is the default object)

7. Example with Parameters function sampleFunction(a,b,c,d, e) { alert(a); alert(b); alert(c); alert(d); alert(e);} var x = 10 * 2 / 4; sampleFunction("Bill", 10, x, 20+10, "10"+"20"); Question: What Displays? and Why?

8. Returning Values var theName; theName = prompt ("Name Entry", "Default is Bob"); if (theName==null) theName = "Bob"; alert(theName); Questions How many arguments? What is returned? What is the 'if'? What is 'null'? What variables are there? How are they named?

9. Returning Values function area() { var width=parseFloat(document.getElementById("w").value); var height = parseFloat(document.getElementById("h").value); document.GetElementById("area").value = length*height; return false; } Enter width Enter height Area = Return false case tells the browser not to try to submit the form to a server To return a value simply the keyword return followed by the value to return Reminder: the star means multiply

10. Image Rollover (No Arguments) function roll() { document.getElementById("myImage").src = "rabbit2.gif"; } Question: How could you change the size or alt attributes? Question: Do you understand how this works?

11. More General Rollover with Parameters function rollOver(idName, srcName) { document.getElementById(idName).src = srcName; } <input type="button" value="change image" onmousedown= "rollOver('myImage', 'rabbit2.gif');" onmouseup = "rollOver('myImage', 'rabbit.gif');" /> Question: How could you change the size of the imag? Question: Why the single quotes in the function call?

12. More Information Check the appendix in the text book The text also has lots of examples http://www.w3schools.com/jsref/default.asp http://www.wowarea.com/english/help/jsmeth.htm http://www.c- point.com/javascript_tutorial/objects.htmhttp://www.c- point.com/javascript_tutorial/objects.htm http://jennifermadden.com/javascript/objectsProper tiesMethods.htmlhttp://jennifermadden.com/javascript/objectsProper tiesMethods.html

13. Review Questions What is a variable? What is a type? What is the difference between ++x and x++? What gets done first, multiplication or addition? What is an object? What is the difference between a method and a property? When would you use the getElementById method? Give an example of when a function might return a value. What is the difference between a function and a method? Why do parameters often have different names than arguments? What is the '{' character used for? Give three examples of attributes connected with mouse operations.