JavaScript: Functions

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
} To develop and maintain a large program
§ construct it from small, simple pieces
§ divide and conquer

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
} You’ll combine new functions that you write
with prepackaged functions and objects
available 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.
} 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
} Methods are called in the same way as functions,
but require the name of the object to which the
method belongs and a dot preceding the method
name
} Function (and method) arguments may be
constants, variables or expressions

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
} 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.
©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.
} 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.
} 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.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
} 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.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
} random method generates a floating-point value
from 0.0 up to, but not including, 1.0
} 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
factor of 4 means four possible integers)
§ The shift number is added to the result to determine where the
range begins (i.e. shifting the numbers by 3 would give numbers
between 3 and 7)
} 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.
} 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.
User Interactions Via Event Handling
} Until now, all user interactions with scripts have been through
§ a prompt dialog or
§ 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.
} 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.

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
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.
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.
} 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.
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.
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 is beyond
this book’s scope

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
} To show that the random values representing the dice
occur with approximately equal likelihood, let’s allow
the user to roll 12 dice at a time and keep statistics
showing the number of times each face occurs and the
percentage of the time each face is rolled (Fig. 9.6).

©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.
©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.
Generalized Scaling and Shifting of Random Values
} The values returned by random are always in the range
0.0 £ Math.random() < 1.0

} Previously, we demonstrated the statement

face = Math.floor( 1 + Math.random() * 6 );

} which simulates the rolling of a six-sided die. This statement

always assigns an integer (at random) to variable face, in the
range 1 £ face £ 6.
} Referring to the preceding statement, we see that the width
of the range is determined by the number used to scale
random with the multiplication operator (6 in the preceding
statement) and that the starting number of the range is equal
to the number (1 in the preceding statement) added to
Math.random() * 6.

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
} We can generalize this result as
face = Math.floor( a + Math.random() * b );

} where a is the shifting value (which is equal to the first

number in the desired range of consecutive integers)
and b is the scaling factor (which is equal to the width
of the desired range of consecutive integers).

©1992-2012 by Pearson Education, Inc.

All Rights Reserved.
©1992-2012 by Pearson Education, Inc. All
Rights Reserved.
} 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.
} 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.
©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.