Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition

Chapter 3

Functions, Events, and

Control Structures

JavaScript, Third Edition

JavaScript, Third Edition 2

Objectives

• Study 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


Objectives (Cont.)

• Nest one if statement in another

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

• Learn how to use continue statements to restart a looping statement


Introduction

• Functions:

– Groups of statements that you can execute as a single unit

• Decision-making and flow-control statements:

– Allow you to determine the order in which statements execute in a program


Working With Functions

• Similar to the methods associated with an object

• Functions are useful

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

• Like all JavaScript code, functions must be contained within a <script> element


Defining Functions

• The syntax for defining a function is:

Function name_of_function(parameters) {

statements;

}• Parameters are placed within the parentheses

that follow a function name


Defining Functions (Cont.)

• Parameter:

– Variable used within a function

• Placing a parameter name within the parentheses of a function definition = declaring a new variable

• Functions do not have to contain parameters


Calling Functions

• To execute a function:

– Invoke, or call, it from elsewhere in your program

• Function call:

– Code that calls a function

• Arguments:

– The variables or values that you place in the parentheses of the function call statement


Calling Functions (Cont.)

• Passing arguments:

– Sending arguments to the parameters of a called function

• When you pass arguments to a function:

– the value of each argument is then assigned to the value of the corresponding parameter in the function definition


Calling Functions (Cont.)

• To return a value from a function to a calling statement:

– Assign the calling statement to a variable

• A return statement:

– Returns a value to the statement that called the function


Variable Scope• Variable’s scope:

– Either global or local

• Global variable: – Declared outside a function

– Available to all parts of your program

• Local variable:

– Declared inside a function

– Only available within the function in which it is declared


Variable Scope (Cont.)

• Local variables cease to exist when the function ends

• Using a local variable outside the function in which it is declared will cause an error message

• Parameters within the parentheses of a function declaration are local variables


Built-in JavaScript Functions

• In addition to custom functions, JavaScript includes the built-in functions


Understanding Events

• Event:

– Specific circumstance monitored by JavaScript and that your script can respond to in some way

• Most common events:

– Actions that users perform


Understanding Events (Cont.)


Elements and Events

• Events:

– Associated with XHTML elements

• Events available to an element vary:

– Click event available for the <a> element and form controls created with the <input> element

– In comparison, the <body> element does not have a click event, but does have a load event


Event Handlers

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

– Code is included as an attribute of the element that initiates the event

• Syntax of an event handler within an element is:– <element event_handler ="JavaScript code">

• Event handler names are case sensitive:– Must be written using all lowercase letters in order for

a document to be well formed


Event Handlers (Cont.)


Decision making

• Decision making:

– Process of determining the order in which statements execute in a program

– The JavaScript statements used for making decisions are called decision-making statements

– Most common type of decision-making statement is the if statement


If Statements

– More common way to control program flow

– Used to execute specific programming code if the evaluation of a conditional expression returns a value of true

– The syntax for a simple if statement is:

• if (conditional expression) statement;


If Statements (Cont.)

• The if statement contains three parts:

– Keyword if

– Conditional expression enclosed within parentheses

– Executable statements


If Statements (Cont.)• Command block

– Used to construct a decision-making structure using multiple if statements

– Is a set of statements contained within a set of braces

– Each must have an opening brace ( { ) and a closing brace ( } )

– If a command block is missing either the opening or closing brace

• An error occurs


If…else Statements

• if...else statement:– An if statement that includes an else clause

– Like a backup plan that is implemented when the condition returns a value of false

– The syntax for an if...else statement is as follows:

If (conditional expression)

statement;

else

statement;


If…else Statements (Cont.)

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

if (conditional expression) {

statements;

}

else {

statements;

}


Nested if and if...else Statements

• 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 or if...else statement

• nested if and if...else statements used to

– Perform conditional evaluations that must be executed after the original conditional evaluation


Switch statements

– Control program flow by executing a specific set of statements, depending on the value of an expression

– Compare value of an expression to a value contained a case label


Switch statements (Cont.)

• Case label:

– In a switch statement, represents a specific value

– Contains one or more statements that execute if

• the value of the case label matches the value of the switch statement’s expression

– Consists of the keyword case, followed by a literal value or variable name, followed by a colon


Switch Statement (Cont.)• Default label:

– Label used within switch statements

– Contains statements that execute when the value returned by the switch statement expression does not match a case label

– Consists of the keyword default followed by a colon

• Break statement:

– Used to exit other types of control statements, such as the while, do...while, and for looping statements


Repetition

• 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


While Statements

• Repeats a statement or series of statements as long as a given conditional expression evaluates to true

• The syntax for the while statement is as follows:

While (conditional expression) {

statement(s);

}


While Statements (Cont.)

• Iteration:

– Each repetition of a looping statement

• When the conditional expression evaluates to false,

– the loop ends and the next statement following the while statement executes

• A while statement keeps repeating until its conditional expression evaluates to false


While Statements (Cont.)

• To ensure that the while statement ends after the desired tasks have been performed:– Include code that tracks the progress of the loop AND

changes the value produced by the conditional expression

– Track the progress of a while statement, or any other loop, with a counter

• Counter:– Variable that increments or decrements with each

iteration of a loop statement


Do...While Statements

• Executes a statement or statements once, then repeats the execution as long as a given conditional expression evaluates to true

• The syntax for the do...while statement is as follows:

do {

statement(s);

}while(conditional expression);


For Statements

• Used for repeating a statement or series of statements as long as a given conditional expression evaluates to true

• Perform essentially the same function as while statements


For Statements (Cont.)

• Difference between the while statement and the for statement is:– for statement can also include code that initializes a

counter and changes its value with each iteration

• The syntax of the for statement is as follows:

For (counter declaration and initialization; condition;

Update statement) {

statement(s);

}


Continue Statements

• Halt a looping statement and restart the loop with a new iteration

• Used when you want to stop the loop for the current iteration, but want the loop to continue with a new iteration


Chapter Summary• Functions:

– Similar to the methods associated with an object

• Variable scope:

– Refers to where in your program a declared variable can be used

• Event:

– Specific circumstance that is monitored by JavaScript and that your script can respond to in some way


Chapter Summary (cont.)

• Decision making:

– Process of determining the order in which statements execute in a program

• 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


Chapter Summary (cont.)

• While statement

– Used for repeating a statement or series of statements as long as a given conditional expression evaluates to true

• Continue statement

– Halts a looping statement and restarts the loop with a new iteration

Documents

Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition