Chapter 19 Programming Functions Learning Objectives Apply JavaScript rules for functions declarations return values function calls scope of reference and local global variable reference Write JavaScript functions with the proper structure Build a GUI that contains functions analogous to the Memory Bank Web page Explain how computers generate random numbers Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Anatomy of a Function Functions are packages for algorithms They have three parts 1 Name 2 Parameters 3 Definition These three arts form the function declaration Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Pick a Name name is the identifier for the function It is common to use it to describe what the function does Try to pick a name that is meaningful function name parameter list statement list Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Pick a Name In JavaScript function names follow the rules for identifiers They begin with a letter use any mix of letters numbers and underscores avoid reserved words function name parameter list statement list Programming languages have a standard form for writing function declarations Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Pick a Name Look at the punctuation function name parameter list statement list Parentheses always follow a function name Curly braces should be positioned should be placed where they are obvious Programmers place them as shown so that everyone knows where to find them Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Parameters The parameters are the values that the function will compute on They are the input to the function In order for the statements of the algorithm to refer to the input values the inputs are given names The parameter list is simply a list of names for the inputs separated by commas Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Parameters Parameter names follow the usual rules for identifiers in all programming languages When writing our algorithm statements the parameters are like normal variables Unlike normal variables parameters begin with a defined value and they don t have to be declared Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Function Definition The function definition is the algorithm written in a programming language A function definition follows the language s general rules for program statements In the function definition there must be a way to say what the result is JavaScript uses the statement return expression Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Function Definition How do you get an answer from the function It must be called Calling a function is asking the computer to run or execute the statements of the function to produce the answers Simply write the function s name and put the input values in parentheses after it Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Function Definition To test the function a little Web page needs to be created to host the JavaScript The Web page Begins with the standard HTML Gives the definition of the function aka declaring the function Computes the result using an alert call Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Declaration Versus Call A function s declaration is different from its call Functions are declared only once It is unnecessary to tell the computer more than once how the function works For built in functions we don t even have to do that much Some programmer declared alert while writing the JavaScript interpreter Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Declaration Versus Call Functions are typically called many times The answers they give are needed many times One declaration many calls Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Forms and Functions Let s create a Web page for testing our Java Script Use forms to test the script Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Forms and Functions Recall the following from Chapter 18 Forms must be enclosed in form tags Text boxes are specified by an input type text tag Text boxes have a name size and other attributes To refer to the value or contents of a text box named tb in the first form of a page write document form 0 tb value The main event handler of interest is onchange Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Forms and Functions The onchange event handler recognizes when a value is entered into the Celsius window the cursor moved out of the window and handles it as we direct Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Forms and Functions The tempIn window is where the Celsius temperature is entered The tempOut window shows the result Remember that JavaScript uses the input tag for both input and output Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Forms and Functions handle the onchange event with this function call This line says that when the input window tempIn is changed use the value in that window document forms 0 tempIn value as an argument to convertC2F and assign the result to display as the value document forms 0 Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Calling to Customize a Page There are three ways to get the result of a function call to print on the monitor 1 Before the page is created 2 Interactively after the page is displayed 3 While the page is being created Calling functions while the browser is creating the page means pages can be customized on the fly Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley How a Browser Builds a Page The browser begins by reading through the HTML file figuring out all of the tags and preparing to build the page It finds our JavaScript tags The browser removes those tags and all of the text between them aka JavaScript Then it does what the JavaScript tells it to do Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Copyright 2013 Pearson Education Inc Publishing as Pearson Addison Wesley Build the Page on the Fly In the HTML file place