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

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

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

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

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

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

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

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

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

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

Using Built-in JavaScript Functions JavaScript, Fourth Edition

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

Understanding Events (continued) JavaScript, Fourth Edition 13

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

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

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

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

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

Referencing Web Page Elements (continued) JavaScript, Fourth Edition 19

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

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

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

if Statements (continued) JavaScript, Fourth Edition 23

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

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

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

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

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

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

switch Statements (continued) Syntax case exampleVar: // variable name statement(s) case "text string": // string literal case 75: // integer literal case -273.4: // 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

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

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

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

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

while Statements (continued) JavaScript, Fourth Edition 35

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

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

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

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

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

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

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

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

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