Download
1 / 13
130 likes | 222 Views
Functions. Function is a standalone block of statements that performs some tasks and returns a value. Functions must be declared before they can be used. They are usually placed in the <head> tag of the HTML to ensure that they are defined before they are used. Format. Function Definition:
E N D
Functions Function is a standalone block of statements that performs some tasks and returns a value. Functions must be declared before they can be used. They are usually placed in the <head> tag of the HTML to ensure that they are defined before they are used.
Format Function Definition: function function_name () {statement; statement;} function function_name (parameter, parameter) {statement; statement;} Function Call: function_name(); function_name(argument1, argument2)
Example 1 <html> <head> <title>A Simple Function</title> <script language=JavaScript> function welcome(){ // function definition within HTML head tags var place="San Francisco"; alert("Welcome to "+ place + "!"); alert("welcome() is of type: " + typeof(welcome)); } </script> </head> <body bgcolor="lightblue"> <font face="arial" size-"+1"> <center> <b>San Francisco</b><br> welcome(); <img src="sf.jpg" width=400 height=300 border=1> </center> </body> </html>
Example 2 <html> <head> <title>Passing Arguments</title> <script language=JavaScript> function greetings(name){ // "Birdman!" is stored in name alert("Greetings to you, " + name); } </script> </head> <body background="birdman.jpg"> <script> greetings("Birdman!"); </script> </body> </html>
Example 3: Calling functions from JavaScript <html> <head> <title>Calling Functions From JavaScript</title> <script language=javascript> function greetings(name){ // function definition within HTML head tags alert("Greetings to you, " + name); document.bgColor="lightblue"; } </script> </head> <body> <center> <h2>In the body of the document.</h2> </center> <script language=javascript> var yourname=prompt("What is your name? ", ""); greetings(yourname); </script> </body> </html>
Example 4: Calling a function from a link <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script> function greetings(){// function definition within HTML head tags document.bgColor="lightblue"; alert("Greetings to you! "); } </script> </HEAD> <BODY BGCOLOR="#FFFFFF"> <a href="javascript:greetings()"> <h2> Click here for salutations! </h2> </a> <br> </BODY> </HTML>
Example 5:Calling a function from an event <html> <head> <title>calling a function from an event</title> <script language=javascript> function greetings(){ document.bgColor="lightblue"; alert("Greetings to you!"); } </script> </head> <body><center> <form> <input type="button" value="Welcome button" onClick="greetings();" > <form> </body> </html>
Example 6: Scope of Variables in Functions <html> <head><title>Function Scope</title> <script language=javascript> var name="William"; var hometown="Chico"; function greetme(){ // var name="Daniel"; // local variable document.bgColor="lightblue"; document.write("<h2>In function, <em>name</em> is " + name); document.write(" and <em>hometown</em> is "+ hometown); } </script> </head> <body> <script> greetme(); document.write("<br>Out of function, <em>name</em> is " + name); document.write(" and <em>hometown</em> is " + hometown); </script> </body> </html>
Return Values • Functions may return values with a return statement. • The “return” keyword is optional and can only exist within a function. • If the call to the function is made part of an expression, the returned value can be assigned to a variable • Format: return; return expression;
Example 7 <html> <head> <title>Return Value</title> <script language=JavaScript> function mileage(miles, gas) { return miles/gas; // return the result of the division } </script> </head> <body bgcolor="lightgreen"><font face="arial" size="+1"> <center><img src="car-wave.gif"></center> <script language="JavaScript"> var distance=eval(prompt("How many miles did you drive? ", "")); var amount=eval(prompt("How much gas did you use?", "")); var rate = mileage(distance, amount); // return value assigned to rate alert("You're mileage "+ rate +" miles per gallon.\n"); </script> </body> </html>
Recursion • A recursive function is a function that calls itself. • When a function calls itself, execution starts at the beginning of the function, and when the function ends, the program backs up to where it was when it called the function and starts executing from that point. • There must be a way to stop the recursion, or it will be infinite, and probably cause the program to crash.
Example 8 <html> <head> <title>Recursion</title> <script language=JavaScript> function upDown(num){ document.write("<b><font size='+1'>Level " + num + "</b><br>"); if(num < 4){ upDown(num + 1); // Function calls itself document.write("<em>Level "+ num + "<em><br>"); } } </script> </head> <body bgcolor="lightblue"> <h2>Recursion</h2> <script language="JavaScript"> upDown(1); </script> </body> </html>
Debugging tips 1- Did you use parentheses after the function name? 2- Did you use opening and closing curly braces to hold the function definition? 3- Did you define the function before calling it? Try using the “typeof” operator to see if a function has been defined. 4- Did you give the function a unique name? 5- When you called the function is your argument list separated by commas? If you don’t have an argument list, did you forget to include the parentheses? 6- Do the number of arguments equal the number of parameters? 7- Is the function suppose to return a value? Did you remember to provide a variable or a place in the expression to hold the returned value? 8- Did you define and call the function from within a JavaScript program?
