![Page 1: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/1.jpg)
JavaScript, Fourth Edition
Chapter 3Functions, Events, and Control
Structures
![Page 2: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/2.jpg)
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
![Page 3: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/3.jpg)
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
![Page 4: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/4.jpg)
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
![Page 5: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/5.jpg)
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
![Page 6: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/6.jpg)
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
![Page 7: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/7.jpg)
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
![Page 8: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/8.jpg)
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;
}
![Page 9: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/9.jpg)
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
![Page 10: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/10.jpg)
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
![Page 11: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/11.jpg)
JavaScript, Fourth Edition 11
Using Built-in JavaScript Functions
![Page 12: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/12.jpg)
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
![Page 13: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/13.jpg)
JavaScript, Fourth Edition 13
Understanding Events (continued)
![Page 14: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/14.jpg)
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”
![Page 15: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/15.jpg)
JavaScript, Fourth Edition 15
Working with Elements and Events (continued)
![Page 16: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/16.jpg)
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
![Page 17: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/17.jpg)
JavaScript, Fourth Edition 17
Working with Elements and Events (continued)
![Page 18: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/18.jpg)
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
![Page 19: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/19.jpg)
JavaScript, Fourth Edition 19
Referencing Web Page Elements (continued)
![Page 20: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/20.jpg)
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
![Page 21: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/21.jpg)
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
![Page 22: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/22.jpg)
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
![Page 23: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/23.jpg)
JavaScript, Fourth Edition 23
if Statements (continued)
![Page 24: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/24.jpg)
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
![Page 25: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/25.jpg)
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
![Page 26: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/26.jpg)
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
![Page 27: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/27.jpg)
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
![Page 28: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/28.jpg)
JavaScript, Fourth Edition 28
Nested if and if...else Statements (continued)
![Page 29: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/29.jpg)
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
![Page 30: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/30.jpg)
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
![Page 31: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/31.jpg)
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
![Page 32: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/32.jpg)
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
![Page 33: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/33.jpg)
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
![Page 34: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/34.jpg)
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>");
![Page 35: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/35.jpg)
JavaScript, Fourth Edition 35
while Statements (continued)
![Page 36: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/36.jpg)
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
![Page 37: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/37.jpg)
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);
![Page 38: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/38.jpg)
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
![Page 39: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/39.jpg)
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);
}
![Page 40: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/40.jpg)
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
![Page 41: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/41.jpg)
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
![Page 42: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/42.jpg)
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
![Page 43: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/43.jpg)
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
![Page 44: JavaScript, Fourth Edition Chapter 3 Functions, Events, and Control Structures](https://reader036.vdocuments.us/reader036/viewer/2022062423/56649f575503460f94c7c7dc/html5/thumbnails/44.jpg)
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