Functions and Methods

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

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.

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

First Call function triple(x) { return x*3; } x (parameter) 30 triple(10); Third Call Second Call function triple(x) { return x*3; } x (parameter) function triple(x) { return x*3; } x (parameter) 60 60 triple(20); var z = 20; triple(z) 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 thefunction more than once. • We might want to call a function in different ways. Fourth Call function triple(x) { return x*3; } x (parameter) 90 triple(triple(10));

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 <input type="button" onclick="alert(sum(3,5,7));" /> • 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.

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)

Example with Parameters <html><head> <script type="text/javascript" > function sampleFunction(a,b,c,d, e) { alert(a); alert(b); alert(c); alert(d); alert(e);} </script> </head> <script type="text/javascript" > var x = 10 * 2 / 4; sampleFunction("Bill", 10, x, 20+10, "10"+"20"); </script> </body></html> Question: What Displays? and Why?

Returning Values <script type="text/javascript"> var theName; theName = prompt ("Name Entry", "Default is Bob"); if (theName==null) theName = "Bob"; alert(theName); </script> • Questions • How many arguments? What is returned? What is the 'if'? • What is 'null'? What variables are there? How are they named?

<script type="text/javascript"> function area() { var width=parseFloat(document.getElementById("w").value); var height = parseFloat(document.getElementById("h").value); document.GetElementById("area").value = length*height; return false; } </script> <form onsubmit="return area();"> Enter width <input type="text" id="w" size="6" /><br /> Enter height<input type="text" id="h" size= "6" /><br /> <input type="submit" value="Submit Query" /><br /> Area = <input type="text" id="area" size="6" /> </form> Returning Values 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

Image Rollover (No Arguments) Question: Do you understand how this works? <html><head> <!– Define the function --> <script type="text/javascript"> function roll() { document.getElementById("myImage").src = "rabbit2.gif"; } </script> <!– Call the function --> </head><body> <img id="myImage" src="rabbit.gif" /></body></html> <form><input type="button" value="change it" onclick="roll();" /> </form></body></html> Question: How could you change the size or alt attributes?

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

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.htm • http://jennifermadden.com/javascript/objectsPropertiesMethods.html

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.

Functions and Methods