9

JavaScript: Functions

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
9.1 Introduction
 To develop and maintain a large program
 construct it from small, simple pieces
 divide and conquer

 You’ll combine new functions that you write

with prepackaged functions and objects
available in JavaScript

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
 9.2 Program Modules in
JavaScript
 The prepackaged functions that belong to JavaScript objects
(such as Math.pow, introduced previously) are called
methods.
 JavaScript provides several objects that have a rich
collection of methods for performing common
 mathematical calculations,
 string manipulations,
 date and time manipulations,

 and manipulations of collections of data called arrays.

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
9.2 Program Modules in JavaScript
(Cont.)
 You can define programmer-defined functions that
perform specific tasks and use them at many points
in a script
 The actual statements defining the function are written only once
and are hidden from other functions

 Functions are invoked by writing the name of the

function, followed by a left parenthesis, followed by
a comma-separated list of zero or more arguments,
followed by a right parenthesis
©1992-2012 by Pearson Education, Inc.
All Rights Reserved.
9.2 Program Modules in JavaScript
(Cont.)
 Methods are called in the same way as
functions, but require the name of the
object to which the method belongs and a
Math.pow(2, 3)
dot preceding the method name.
 Function (and method) arguments may be
constants, variables or expressions
square(5) square(x) square(3 + 2)

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
9.3.1 Programmer-Defined
Function square
 return statement
 passes information from inside a function back to the point in the
program where it was called

 A function must be called explicitly for the code in

its body to execute
 The format of a function definition is
function function-name( parameter-list )
{
declarations and statements
}
©1992-2012 by Pearson Education, Inc.
All Rights Reserved.
 9.3.1 Programmer-Defined
Function square (cont.)
 Three ways to return control to the point at
which a function was invoked
 Reaching the function-ending right brace
 Executing the statement return;
 Executing the statement “return expression;” to
return the value of expression to the caller
 When a return statement executes, control
returns immediately to the point at which the
function was invoked

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
9.3.2 Programmer-Defined
Function maximum (cont.)
 The script in our next example (Fig. 9.3)
uses a programmer-defined function called
maximum to determine and return the largest
of three floating-point values.

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
9.4 Notes on Programmer-
Defined Functions
 All variables declared with the keyword var in
function definitions are local variables—this means
that they can be accessed only in the function in
which they’re defined.
 A function’s parameters are also considered to be
local variables.
 There are several reasons for modularizing a
program with functions.
 Divide-and-conquer approach makes program
development more manageable.
 Software reusability.
 Avoid repeating code in a program.

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
 9.5 Random Number
Generation
 random method generates a floating-point value
from 0.0 up to, but not including, 1.0
Math.random()
 Random integers in a certain range can be
generated by scaling and shifting the values
returned by random, then using Math.floor to
convert them to integers
 The scaling factor determines the size of the range (i.e. a scaling
Math.floor(Math.random() * 4; // gives one integer either 0, 1, 2 or 3
factor of 4 means four possible integers)

 The shift number is added to the result to determine where the

Math.floor(Math.random()
range begins (i.e. shifting the* 4) + 3; // gives
numbers byone integergive
3 would eithernumbers
3, 4, 5, or 6
Math.floor(Math.random()
between 3 and 7) * (max - min)) + min

 Method Math.floor rounds its

argument down to the closest integer
©1992-2012 by Pearson Education, Inc.
All Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
 9.5.2 Displaying Random
Images
 In the next example, we build a random image
generator—a script that displays four randomly
selected die images every time the user clicks a
Roll Dice button on the page.
 For the script in Fig. 9.5 to function properly, the
directory containing the file RollDice.html must
also contain the six die images—these are
included with this chapter’s examples.
©1992-2012 by Pearson Education, Inc.
All Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
 9.5.2 Displaying Random
Images
User Interactions Via Event Handling
 Until now, all user interactions with scripts have been via
 a prompt dialog
 an alert dialog.

 These dialogs are valid ways to receive input from a user and
to display messages, but they’re fairly limited in their
capabilities.
 A prompt dialog can obtain only one value at a time from
the user, and a message dialog can display only one
message.
©1992-2012 by Pearson Education, Inc.
All Rights Reserved.
 9.5.2 Displaying Random
Images
User Interactions Via Event Handling
 Inputs are typically received from the user via an HTML5 form
 Outputs are typically displayed to the user in the web page.
 This program uses an HTML5 form and a new graphical user
interface concept—GUI event handling.
 The JavaScript executes in response to the user’s interaction
with an element in a form. This interaction causes an event.
 Scripts are often used to respond to user initiated events.
element.addEventListener(event, function, useCapture);

window.addEventListener("load", loadFunction);
function loadFunction() { alert("All page’s elements loaded"); }
©1992-2012 by Pearson Education, Inc.
All Rights Reserved.
9.5.2 Displaying Random
Images
The body Element
 The elements in the body are used extensively in the script.

The form Element

 The HTML5 standard requires that every form
contain an action attribute, but because this form
does not post its information to a web server, the
string "#" is used simply to allow this document to
validate.
 The # symbol by itself represents the current page.
©1992-2012 by Pearson Education, Inc.
All Rights Reserved.
9.5.2 Displaying Random
Images
The button input Element and Event-Driven
Programming
 Event-driven programming
 the user interacts with an element in the web page, the
script is notified of the event and the script processes
the event.
 The user’s interaction with the GUI “drives” the
program.
 The button click is known as the event.
©1992-2012 by Pearson Education, Inc.
All Rights Reserved.
 9.5.2 Displaying Random
Images
The button input Element and Event-Driven
Programming
 The function that’s called when an event occurs is
known as an event handler.
 When a GUI event occurs in a form, the browser
calls the specified event-handling function.
 Before any event can be processed, each element
must know which event-handling function will be
called when a particular event occurs.
©1992-2012 by Pearson Education, Inc.
All Rights Reserved.
 9.5.2 Displaying Random
Images
The img Elements
 The four img elements will display the four randomly
selected dice.
 Their id attributes (die1, die2, die3 and die4,
respectively) can be used to apply CSS styles and to
enable script code to refer to these element in the
HTML5 document.
 Because the id attribute, if specified, must have a
unique value among all id attributes in the page, Java-
Script can reliably refer to any single element via its
id attribute.
 Each img element displays the image blank.png (an
empty white image) when the page first renders.
©1992-2012 by Pearson Education, Inc.
All Rights Reserved.
 9.5.2 Displaying Random
Images
Specifying a Function to Call When the Browser Finishes

Loading a Document
 Many examples will execute a JavaScript function when the

document finishes loading.

 This is accomplished by handling the window object’s load

event.
 To specify the function to call when an event occurs, you

registering an event handler for that event.

 Method addEventListener is available for every DOM node.

The method takes three arguments:

 the first is the name of the event for which we’re registering a handler
 the second is the function that will be called to handle the event
 the last argument is typically false—the true value
element.addEventListener(event, is beyond
function, this
useCapture);
book’s scope
©1992-2012 by Pearson Education, Inc.
All Rights Reserved.
 9.7 Scope Rules
 Each identifier in a program has a scope
 The scope of an identifier for a variable or
function is the portion of the program in which
the identifier can be referenced
 Global variables or script-level variables are
accessible in any part of a script and are said to
have global scope
 Thus every function in the script can potentially use
the variables
©1992-2012 by Pearson Education, Inc.
All Rights Reserved.
 9.7 Scope Rules (Cont.)
 Identifiers declared inside a function have function
(or local) scope and can be used only in that
function
 Function scope begins with the opening left brace
({) of the function in which the identifier is
declared and ends at the terminating right brace
(})
 Local variables of a function and function
parameters have function scope
 If a local variable in a function has the same name
as a global variable, the global variable is “hidden”
from the body of the function.

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.