1. JavaScript, Fourth Edition
Chapter 3
Functions, Events, and Control Structures

2. 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
JavaScript, Fourth Edition 2 2

3. 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
JavaScript, Fourth Edition 3 3 3 3

4. Working with 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 Syntax Parameter
Lines that make up a function
Syntax
function 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 7

8. Calling Functions (continued)
return statement
Returns a value to the statement that called the function
Example
function averageNumbers(a, b, c) {
var sum_of_numbers = a + b + c;
var result = sum_of_numbers / 3;
return result; }
JavaScript, Fourth Edition 8

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 13

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 15

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 16

17. Working with Elements and Events (continued)
JavaScript, Fourth Edition 17

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 19

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 Syntax
Used to execute specific programming code
If the evaluation of a conditional expression returns a value of true
Syntax
if (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 22

23. if Statements (continued)
JavaScript, Fourth Edition 23

24. if...else Statements if...else statement Syntax
Executes one action if the condition is true
And a different action if the condition is false
Syntax
if (conditional expression)
statement;
else
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 25

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 27

28. Nested if and if...else Statements (continued)
JavaScript, Fourth Edition 28

29. switch Statements switch statement case label
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)
Syntax
case exampleVar: // variable name
statement(s)
case "text string": // string literal
case 75: // integer literal
case : // floating-point literal
default label
Executes when the value returned by the switch statement expression does not match a case label
JavaScript, Fourth Edition 30

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 31

32. Repeating Code Loop statement Three types of loop statements
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 Syntax Iteration
Repeats a statement or series of statements as long as a given conditional expression evaluates to true
Syntax
while (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
Example
var count = 10;
while (count > 0) {
document.write(count + "<br />");
--count; }
document.write("<p>We have liftoff.</p>");
JavaScript, Fourth Edition 34

35. while Statements (continued)
JavaScript, Fourth Edition 35

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 36

37. do…while Statements do...while statement Syntax
Executes a statement or statements once
Then repeats the execution as long as a given conditional expression evaluates to true
Syntax
do {
statement(s);
} while (conditional expression);
JavaScript, Fourth Edition

38. do…while Statements (continued)
Example
var 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 38

39. for Statements for statement Syntax
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
Syntax
for (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 40

41. Using continue Statements to Restart Execution
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
JavaScript, Fourth Edition 44