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
JavaScript, Third Edition 3
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
JavaScript, Third Edition 4
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
JavaScript, Third Edition 5
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
JavaScript, Third Edition 6
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
JavaScript, Third Edition 7
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
JavaScript, Third Edition 8
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
JavaScript, Third Edition 9
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
JavaScript, Third Edition 10
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
JavaScript, Third Edition 11
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
JavaScript, Third Edition 12
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
JavaScript, Third Edition 13
Built-in JavaScript Functions
• In addition to custom functions, JavaScript includes the built-in functions
JavaScript, Third Edition 14
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
JavaScript, Third Edition 15
Understanding Events (Cont.)
JavaScript, Third Edition 16
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
JavaScript, Third Edition 17
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
JavaScript, Third Edition 18
Event Handlers (Cont.)
JavaScript, Third Edition 19
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
JavaScript, Third Edition 20
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;
JavaScript, Third Edition 21
If Statements (Cont.)
• The if statement contains three parts:
– Keyword if
– Conditional expression enclosed within parentheses
– Executable statements
JavaScript, Third Edition 22
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
JavaScript, Third Edition 23
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;
JavaScript, Third Edition 24
If…else Statements (Cont.)
• You can use command blocks to construct an if...else statement as follows:
if (conditional expression) {
statements;
}
else {
statements;
}
JavaScript, Third Edition 25
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
JavaScript, Third Edition 26
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
JavaScript, Third Edition 27
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
JavaScript, Third Edition 28
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
JavaScript, Third Edition 29
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
JavaScript, Third Edition 30
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);
}
JavaScript, Third Edition 31
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
JavaScript, Third Edition 32
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
JavaScript, Third Edition 33
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);
JavaScript, Third Edition 34
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
JavaScript, Third Edition 35
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);
}
JavaScript, Third Edition 36
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
JavaScript, Third Edition 37
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
JavaScript, Third Edition 38
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
JavaScript, Third Edition 39
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