javascript, fourth edition chapter 3 functions, events, and control structures

JavaScript, Fourth Edition

Chapter 3Functions, Events, and Control

Structures

JavaScript, Fourth Edition 2JavaScript, Fourth Edition 22

Objectives

• Learn how to use functions to organize your JavaScript code

• Learn how to work with events• Use if statements, if...else statements, and switch statements to make decisions

JavaScript, Fourth Edition 3JavaScript, Fourth Edition 33

Objectives (continued)

• Nest one if statement in another

• Use while statements, do...while statements, and for statements to execute code repeatedly

• Use continue statements to restart a looping statement

JavaScript, Fourth Edition 4

Working with Functions

• Functions– Procedures similar to the methods associated

with an object

– Make it possible to treat a related group of JavaScript statements as a single unit

– Must be contained within a <script> element

JavaScript, Fourth Edition 5

Defining Functions

• Function definition– Lines that make up a function

• Syntaxfunction nameOfFunction(parameters) {

statements;

}

• Parameter– Variable that is used within a function

– Placed in parentheses following a function name

JavaScript, Fourth Edition 6

Calling Functions

• To execute a function, you must invoke, or call, it• Function call

– Code that calls a function

– Consists of function name followed by parentheses

• Contains any variables or values to be assigned to the function parameters

• Arguments or actual parameters– Variables or values that you place in the

parentheses of the function call statement

JavaScript, Fourth Edition 7

Calling Functions (continued)

• Passing arguments– Sending arguments to the parameters of a called

function

• Always put functions within the document head– And place calls to a function within the body

section

• If your program attempts to call a function before it has been created, you will receive an error

• A JavaScript program is composed of all the <script> sections within a document

JavaScript, Fourth Edition 8

Calling Functions (continued)

• return statement– Returns a value to the statement that called the

function

• Examplefunction averageNumbers(a, b, c) {

var sum_of_numbers = a + b + c;

var result = sum_of_numbers / 3;

return result;

}

JavaScript, Fourth Edition 9

Understanding Variable Scope

• Variable’s scope– Can be either global or local

• Global variable– One that is declared outside a function and is available to

all parts of your program

• Local variable– Declared inside a function and is only available within the

function in which it is declared

• You must use the var keyword when you declare a local variable– Optional for global variables

JavaScript, Fourth Edition 10

Understanding Variable Scope (continued)

• If you declare a variable within a function and do not include the var keyword– The variable automatically becomes a global

variable

• When a program contains a global variable and a local variable with the same name– The local variable takes precedence when its

function is called

JavaScript, Fourth Edition 11

Using Built-in JavaScript Functions

JavaScript, Fourth Edition 12

Understanding Events

• Event– Specific circumstance that is monitored by

JavaScript• And that your script can respond to in some way

• You can use JavaScript events to allow users to interact with your Web pages

• Most common events are user actions

JavaScript, Fourth Edition 13

Understanding Events (continued)

JavaScript, Fourth Edition 14

Working with Elements and Events

• Events are associated with XHTML elements– Events that are available to an element vary

• Event handler– Code that executes in response to a specific event

– Included as an attribute of the element that initiates the event

• Syntax<element event_handler ="JavaScript code">

• Event handler names are the same as the name of the event itself, plus a prefix of “on”

JavaScript, Fourth Edition 15

Working with Elements and Events (continued)

JavaScript, Fourth Edition 16

Working with Elements and Events (continued)

• Example<input type="button"

onclick="window.alert('You clicked a button!')">

• window.alert() method– Displays a pop-up dialog box with an OK button

• You can include multiple JavaScript statements in an event handler– As long as semicolons separate the statements

JavaScript, Fourth Edition 17

Working with Elements and Events (continued)

JavaScript, Fourth Edition 18

Referencing Web Page Elements

• Reference any element on a Web page– By appending the element’s name to the name of

any elements in which it is nested• Starting with the Document object

– Specific properties of an element can then be appended to the element name

• Example: calculator program– Use push buttons and onclick event handlers

– Use a variable named inputString to contain the operands and operators of a calculation

– Calculation is performed using the eval() function

JavaScript, Fourth Edition 19

Referencing Web Page Elements (continued)

JavaScript, Fourth Edition 20

Making Decisions

• Decision making or flow control– Process of determining the order in which

statements execute in a program

• Decision-making statements or decision-making structures– Special types of JavaScript statements used for

making decisions

• if statement– Most common type of decision-making

statement

JavaScript, Fourth Edition 21

if Statements

• if statement– Used to execute specific programming code

• If the evaluation of a conditional expression returns a value of true

• Syntaxif (conditional expression)

statement;

• After the if statement executes, any subsequent code executes normally

• Use a command block to construct a decision-making structure containing multiple statements

JavaScript, Fourth Edition 22

if Statements (continued)

• Command block– A set of statements contained within a set of braces

• Example: pilot quiz– Script contains several questions

– Program will be set up so that users select answer alternatives by means of radio buttons

• Created with the <input> tag

JavaScript, Fourth Edition 23

if Statements (continued)

JavaScript, Fourth Edition 24

if...else Statements• if...else statement

– Executes one action if the condition is true• And a different action if the condition is false

• Syntaxif (conditional expression)

statement;

else

statement;

• window.confirm() method– Displays a confirm dialog box that contains an OK

button and a Cancel button

JavaScript, Fourth Edition 25

if...else Statements (continued)

• You can use command blocks to construct an if...else statement

• Example: pilot quiz– Redesign the pilot quiz from previous example to

use if…else statements

JavaScript, Fourth Edition 26

Nested if and if...else Statements

• Nested decision-making structures– When one decision-making statement is

contained within another decision-making statement

• Nested if statement– An if statement contained within an if statement

or within an if...else statement

• Nested if...else statement– An if...else statement contained within an if

statement or within an if...else statement

JavaScript, Fourth Edition 27

Nested if and if...else Statements (continued)

• Nested statements– Perform conditional evaluations that must be executed

after the original conditional evaluation

• window.prompt() method– Displays a prompt dialog box with a message, a text

box, an OK button, and a Cancel button– Any text that is entered into a prompt dialog box by a

user can be assigned to a variable

• Example: pilot quiz– Modify the pilot quiz program to use nested if...else statements

JavaScript, Fourth Edition 28

Nested if and if...else Statements (continued)

JavaScript, Fourth Edition 29

switch Statements

• switch statement– Controls program flow by executing a specific set

of statements• Depending on the value of an expression

– Compares the value of an expression to a value contained within a case label

• case label– Represents a specific value and contains one or

more statements that execute• If the value of the case label matches the value of

the switch statement’s expression

JavaScript, Fourth Edition 30

switch Statements (continued)

• Syntaxcase exampleVar: // variable name

statement(s)

case "text string": // string literal

statement(s)

case 75: // integer literal

statement(s)

case -273.4: // floating-point literal

statement(s)

• default label– Executes when the value returned by the switch

statement expression does not match a case label

JavaScript, Fourth Edition 31

switch Statements (continued)

• When a switch statement executes– The value returned by the expression is

compared to each case label• In the order in which it is encountered

• break statement– Used to exit a control structure

• Example: pilot quiz– scoreAnswers() function contains a switch

statement instead of nested if...else statements

JavaScript, Fourth Edition 32

Repeating Code

• Loop statement– Control structure that repeatedly executes a

statement or a series of statements• While a specific condition is true or until a specific

condition becomes true

• Three types of loop statements– while statements– do...while statements– for statements

JavaScript, Fourth Edition 33

while Statements

• while statement– Repeats a statement or series of statements as

long as a given conditional expression evaluates to true

• Syntaxwhile (conditional expression) {

statement(s);

}

• Iteration– Each repetition of a looping statement

JavaScript, Fourth Edition 34

while Statements (continued)

• Counter– Variable that increments or decrements with

each iteration of a loop statement

• Examplevar count = 10;

while (count > 0) {

document.write(count + "<br />");

--count;

}

document.write("<p>We have liftoff.</p>");

JavaScript, Fourth Edition 35

while Statements (continued)

JavaScript, Fourth Edition 36

while Statements (continued)

• Infinite loop– Loop statement never ends because its

conditional expression is never false

• Example: pilot quiz– Scored by a single while statement containing

a nested if statement

JavaScript, Fourth Edition 37

do…while Statements

• do...while statement – Executes a statement or statements once

– Then repeats the execution as long as a given conditional expression evaluates to true

• Syntaxdo {

statement(s);

} while (conditional expression);

JavaScript, Fourth Edition 38

do…while Statements (continued)

• Examplevar count = 2;

do {

document.write("<p>The count is equal to " + count + "</p>");

++count;

} while (count < 2);

• Example: pilot quiz– Replace the while statement with a do...while

statement

JavaScript, Fourth Edition 39

for Statements

• for statement– Repeats a statement or series of statements

• As long as a given conditional expression evaluates to true

– Can also include code that initializes a counter and changes its value with each iteration

• Syntaxfor (counter declaration and initialization; condition; update statement) {

statement(s);

}

JavaScript, Fourth Edition 40

for Statements (continued)

• Sometimes using a while statement is preferable to using a for statement– Especially for looping statements that do need to

declare, initialize, or update a counter variable

• Example: pilot quiz– Scored with a for statement instead of a do...while statement

JavaScript, Fourth Edition 41

Using continue Statements to Restart Execution

• continue statement– Halts a looping statement and restarts the loop

with a new iteration

– When you want to stop a loop for the current iteration

• But want the loop to continue with a new iteration

JavaScript, Fourth Edition 42

Summary

• Functions are similar to the methods associated with an object

• Variable scope refers to where a declared variable can be used

• An event is a specific circumstance that is monitored by JavaScript and that your script can respond to in some way

• Code that executes in response to a specific event is called an event handler

JavaScript, Fourth Edition 43

Summary (continued)

• Determining the order in which statements execute in a program is called decision making

• if statement and if…else statement• Command block is a set of statements

contained within a set of braces• Nested decision-making structures• switch statement

JavaScript, Fourth Edition 44

Summary (continued)

• Loop statement is a control structure that repeatedly executes a series of statements– while statements– do...while statements– for statements

• Each repetition is called an iteration• An infinite loop never ends• The continue statement halts a looping

statement and restarts the loop with a new iteration