Chapter 3 Functions, Events, and Control Structures 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 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 element and form controls created with the element –In comparison, the 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: – 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