chapter 3 functions, events, and control structures javascript, third edition
TRANSCRIPT
![Page 1: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/1.jpg)
Chapter 3
Functions, Events, and
Control Structures
JavaScript, Third Edition
![Page 2: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/2.jpg)
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
![Page 3: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/3.jpg)
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
![Page 4: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/4.jpg)
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
![Page 5: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/5.jpg)
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
![Page 6: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/6.jpg)
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
![Page 7: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/7.jpg)
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
![Page 8: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/8.jpg)
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
![Page 9: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/9.jpg)
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
![Page 10: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/10.jpg)
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
![Page 11: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/11.jpg)
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
![Page 12: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/12.jpg)
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
![Page 13: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/13.jpg)
JavaScript, Third Edition 13
Built-in JavaScript Functions
• In addition to custom functions, JavaScript includes the built-in functions
![Page 14: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/14.jpg)
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
![Page 15: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/15.jpg)
JavaScript, Third Edition 15
Understanding Events (Cont.)
![Page 16: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/16.jpg)
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
![Page 17: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/17.jpg)
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
![Page 18: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/18.jpg)
JavaScript, Third Edition 18
Event Handlers (Cont.)
![Page 19: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/19.jpg)
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
![Page 20: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/20.jpg)
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;
![Page 21: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/21.jpg)
JavaScript, Third Edition 21
If Statements (Cont.)
• The if statement contains three parts:
– Keyword if
– Conditional expression enclosed within parentheses
– Executable statements
![Page 22: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/22.jpg)
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
![Page 23: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/23.jpg)
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;
![Page 24: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/24.jpg)
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;
}
![Page 25: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/25.jpg)
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
![Page 26: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/26.jpg)
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
![Page 27: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/27.jpg)
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
![Page 28: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/28.jpg)
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
![Page 29: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/29.jpg)
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
![Page 30: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/30.jpg)
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);
}
![Page 31: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/31.jpg)
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
![Page 32: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/32.jpg)
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
![Page 33: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/33.jpg)
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);
![Page 34: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/34.jpg)
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
![Page 35: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/35.jpg)
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);
}
![Page 36: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/36.jpg)
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
![Page 37: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/37.jpg)
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
![Page 38: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/38.jpg)
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
![Page 39: Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649f205503460f94c38517/html5/thumbnails/39.jpg)
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