Functions Comp 205 Fall ‘17
JavaScript, Third Edition Objectives Study how to use functions to organize your JavaScript code Learn how to create and call functions Study how to access HTML forms from within functions JavaScript, Third Edition
JavaScript, Third Edition Introduction Custom Functions: Groups of statements that you can execute as a single unit JavaScript, Third Edition
Working With Functions Similar to the methods associated with an object Functions are useful Make it possible to treat a related group of JavaScript statements as a single unit Like all JavaScript code, functions must be contained within a <script> element JavaScript, Third Edition
JavaScript, Third Edition Defining Functions The syntax for defining a function is: Function name_of_function(parameters) { statements; } Parameters are placed within the parentheses that follow a function name Function statements, delimited by curly braces { } JavaScript, Third Edition
Defining Functions (Cont.) Parameter: Variable used within a function Placing a parameter name within the parentheses of a function definition is the same as declaring a new variable Functions do not have to contain parameters In this case use empty parentheses JavaScript, Third Edition
JavaScript, Third Edition Opening and closing brackets Keyword function User-defined function name 0 or more parameters JavaScript, Third Edition
JavaScript, Third Edition Calling Functions To execute a function: Invoke, or call, it from elsewhere in your program Function call: Code that calls a function Arguments: The variables or values that you place in the parentheses of the function call statement JavaScript, Third Edition
Calling Functions (Cont.) Passing arguments: Sending arguments to the parameters of a called function When you pass arguments to a function: the value of each argument is then assigned to the value of the corresponding parameter in the function definition JavaScript, Third Edition
JavaScript, Third Edition Calling Functions <head> … <script language=“javascript”> function print_company_name(company1,company2,company3){ document.writeln(company1); document.writeln(company2); document.writeln(company3); } print_company_name(“IBM”, “Microsoft”, “Intel”); print_company_name(“Apple”, “HP”, “Dell”); </script> Pass in 3 values or arguments to match the 3 parameters Call the function by using its name. JavaScript, Third Edition
JavaScript, Third Edition Calling Functions <head> … <script language=“javascript”> function print_company_name(company1,company2,company3){ document.writeln(company1); document.writeln(company2); document.writeln(company3); } </script> </head> <body> <script> print_company_name(“IBM”, “Microsoft”, “Intel”); print_company_name(“Apple”, “HP”, “Dell”); </body> May call the function from anywhere in the page. JavaScript, Third Edition
Working with Variables, Functions, and Objects Calling Functions Code placement Functions must be created (defined) before they are called <head> rendered by browser before <body> Function definition Place in <head> section Function call Place in <head> or <body> section JavaScript, Third Edition
Working with Variables, Functions, and Objects Variable Scope Defines where in the program a declared variable can be used Global variable Declared outside a function and is available to all parts of the program var keyword optional Local variable Declared inside a function and is only available within the function it is declared Global and local variables can use same identifier JavaScript, Third Edition
Working with Variables, Functions, and Objects This is the function definition. The code that will be executed when the function is called is given here. This is normally in the <head> section. <head> <script language=“JavaScript”> function putStuff(myName, myNum){ document.writeln(“Hello “ + myName + “, how are you?”); var rslt = myNum * 2; document.writeln (myNum + “ * 2 = “ + rslt); } </script> </head> <body> <script> putStuff(“John”, 5); </body> These are the function parameters. When the function is called these variables will be given the values of the arguments. These are two arguments to the function The value “John”will be passed to the first parameter, the value 5 will be passed to the second parameter This is the function call JavaScript, Third Edition
Working with Variables, Functions, and Objects When the call putStuff is executed, javaScript will jump to where putStuff is defined. Finally, the body of the function will be executed. <head> <script language=“JavaScript”> function putStuff(myName, myNum){ document.writeln(“Hello “ + myName + “, how are you?”); var rslt = myNum * 2; document.writeln (myNum + “ * 2 = “ + rslt); } </script> </head> <body> <script> putStuff(“John”, 5); </body> The value “John” will be put in the variable myName and the value 5 will be put into the variable myNum JavaScript, Third Edition
Working with Variables, Functions, and Objects Returning a value from a Function A function can return nothing Just performing some task A function can return a value Perform a calculation and return the result var returnValue = functionCall(opOne, opTwo); A return statement must be added to function definition JavaScript, Third Edition
Working with Variables, Functions, and Objects <HTML> <HEAD> <TITLE>Two Functions Program</TITLE> <SCRIPT LANGUAGE="JavaScript"> function print_message(first_message) { document.writeln(first_message); } function return_message( ) { return "This message was returned from a function" </SCRIPT> </HEAD> <BODY> <PRE> print_message("This text was printed from a function"); var return_value = return_message(); document.writeln(return_value); </PRE> </BODY> </HTML> The function body is executed and returns a value. Call the function; no values are passed. The returned value is stored in the variable “return_value” JavaScript, Third Edition
JavaScript, Third Edition Using numbers in forms <HTML><HEAD> <SCRIPT LANGUAGE="JavaScript"> function calculate() { var squareFeet, totalCost; squareFeet = parseInt(document.Estimator.width.value) * parseInt( document.Estimator.length.value); totalCost = squareFeet * parseInt( document.Estimator.cost_per_foot.value); totalCost *= 1.25; alert("The total cost to carpet this room is $" + totalCost); } </SCRIPT> </HEAD> <BODY> <H1>Carpet Cost</H1> <FORM NAME="Estimator"> <P><B>Enter the width of the room in linear feet </B><INPUT TYPE="text” NAME="width”> <B>Enter the length of the room in linear feet </B><INPUT TYPE="text" NAME="length"> <B>Enter the cost per square foot of carpeting </B><INPUT TYPE="text" NAME="cost_per_foot"> </P> <INPUT TYPE="button" VALUE=" Calculate " onClick="calculate();” > </FORM> </BODY></HTML> Note that the name of the function and the name of the form must be different Name of form so that JavaScript can access the fields of the form. Event: allows us to execute javascript when clicked. JavaScript, Third Edition
JavaScript, Third Edition Variable Scope Variable’s scope: Either global or local Global variable: Declared outside a function Available to all parts of your program Local variable: Declared inside a function Only available within the function in which it is declared JavaScript, Third Edition
JavaScript, Third Edition Variable Scope (Cont.) Local variables cease to exist when the function ends Using a local variable outside the function in which it is declared will cause an error message Parameters within the parentheses of a function declaration are local variables JavaScript, Third Edition
Built-in JavaScript Functions In addition to custom functions, JavaScript includes the built-in functions JavaScript, Third Edition