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


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


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


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


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;

}


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


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


Using Built-in JavaScript Functions


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


Understanding Events (continued)


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”


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


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


Referencing Web Page Elements (continued)


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


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


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


if Statements (continued)


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


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


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


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


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


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


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


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


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


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


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>");



• 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


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);


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


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);

}


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


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


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


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


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

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

Documents

edition javascript

javascript codelearn

looping statement javascript

errora javascript program

function namejavascript

functionconsists of

function parametersarguments

switch statements