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 [Link], 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
[Link](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
[Link]()
Random integers in a certain range can be
generated by scaling and shifting the values
returned by random, then using [Link] to
convert them to integers
The scaling factor determines the size of the range (i.e. a scaling
[Link]([Link]() * 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
[Link]([Link]()
range begins (i.e. shifting the* 4) + 3; // gives
numbers byone integergive
3 would eithernumbers
3, 4, 5, or 6
[Link]([Link]()
between 3 and 7) * (max - min)) + min
Method [Link] 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 [Link] 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.
[Link](event, function, useCapture);
[Link]("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 [Link] (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
[Link](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.