Functions and Methods Function Block of instructions called
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 get. Element. By. Id are methods in the browser’s document object • User-defined functions: you can write your own
Syntax for user-defined functions function your. Name(param, …, param) { /*** Java. Script instructions go here *****/ } Notes • function is a reserved word that must be present • your. Name is an identifier that you choose as the name of the function • param, … , param is a list of parameters (variables) that the function uses in its instructions separated by commas • Put the block of Java. Script instructions between the braces • To call the function: your. Name(arg, … , arg); where arg, … , arg are arguments (which are expressions) passed to the function so it can do its thing.
Green Box Diagram We pass (give) the function (or method) information (expressions) as arguments to use A Function or Method contains a block of instructions Processing is done in the green box Variables can be set and HTML pages can change as side effects Out can come a value that is returned
Parameters and Arguments triple(10); • Parameter: name a function gives an expression passed to it triple(20); • 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. First Call function triple(x) { return x*3; } x (parameter) 30 Second Call function triple(x) { return x*3; } x (parameter) 60 Third Call var z = 20; triple(z) triple(10)); function triple(x) { return x*3; } x (parameter) 60 Fourth Call function triple(x) { return x*3; } x (parameter) 90
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> Question: <script type="text/javascript" > What Displays? function sample. Function(a, b, c, d, e) { alert(a); alert(b); alert(c); alert(d); alert(e); } and Why? </script> </head> <script type="text/javascript" > var x = 10 * 2 / 4; sample. Function("Bill", 10, x, 20+10, "10"+"20"); </script> </body></html>
Returning Values <script type="text/javascript"> var the. Name; the. Name = prompt ("Name Entry", "Default is Bob"); if (the. Name==null) the. Name = "Bob"; alert(the. Name); </script> Questions How many arguments? What is returned? What is the 'if'? What is 'null'? What variables are there? How are they named?
Returning Values Return false case tells the browser not to try to submit the form to a server <script type="text/javascript"> function area() { var width=parse. Float(document. get. Element. By. Id("w"). value); var height = parse. Float(document. get. Element. By. Id("h"). value); document. Get. Element. By. Id("area"). value = length*height; return false; To return a value simply the keyword return } </script> by the value to return followed Reminder: the star means multiply <form onsubmit="return area(); "> Enter width <input type="text" id="w" size="6" /> Enter height<input type="text" id="h" size= "6" /> <input type="submit" value="Submit Query" /> Area = <input type="text" id="area" size="6" /> </form>
Image Rollover (No Arguments) Question: Do you understand how this works? <html><head> <!– Define the function --> <script type="text/javascript"> function roll() { document. get. Element. By. Id("my. Image"). src = "rabbit 2. gif"; } </script> <!– Call the function --> </head><body> <img id="my. Image" 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 roll. Over(id. Name, src. Name) { document. get. Element. By. Id(id. Name). src = src. Name; } </script> </head><body> <img id="my. Image" src="rabbit. gif" /> <form><input type="button" value="change image" onmousedown= "roll. Over('my. Image', 'rabbit 2. gif'); " onmouseup = "roll. Over('my. Image', '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. w 3 schools. com/jsref/default. asp http: //www. wowarea. com/english/help/jsmeth. htm http: //www. cpoint. com/javascript_tutorial/objects. htm • http: //jennifermadden. com/javascript/objects. Proper ties. Methods. 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 get. Element. By. Id 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.
- Slides: 13