Functions and Methods Function : Block of instructions called (executed) by name Method: A function...

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 functionsfunction 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

AFunction

orMethodcontains

ablock

ofinstructions

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 canbe set and HTMLpages can change

asside effects

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.

30function triple(x){ return x*3; }x (parameter)

triple(10);

First Call


triple(20);

Second Call


var z = 20;triple(z)

Third Call


triple(triple(10));

Fourth Call

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>

QuestionsHow many arguments? What is returned? What is the 'if'?What is 'null'? What variables are there? How are they named?

Returning Values

<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>

Return false case tells the browser notto 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)

<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?

Question: Do you understand how this works?

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 Function : Block of instructions called (executed) by name Method: A function...

Documents

Transcript of Functions and Methods Function : Block of instructions called (executed) by name Method: A function...