Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

54
Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory

Transcript of Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Page 1: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Chapter 4: Decision Making with Control Structures and Statements

JavaScript - Introductory

Page 2: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Previewing CartoonQuiz.html File

Page 3: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Section A:

Decision Making

Page 4: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Objectives

In this section, students will learn about:

• if statements

• if …else statements

• Nested if statements

• Switch statements

Page 5: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

If Statements

• The process of determining the order in which statements execute in a program is called decision making or flow control

• The if statement is used to execute specific programming code if the evaluation of a conditional expression returns a value of true

• Syntax for the if statement is:if (conditional expression) {

statement(s);}

Page 6: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

If Statements

• The if statement contains three parts: key word if, a conditional expression enclosed within parentheses, and executable statements

• The statement immediately following the if statement in Figure 4-2 can be written on the same line as the if statement itself

Page 7: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

If Statements

• Command block refers to multiple statements contained within a set of braces

• When an if statement contains a command block, the statements in the block execute when the if statement’s condition evaluates to true

• Now, if the condition evaluates to false, both statements will be bypassed, since they are contained within a command block

Page 8: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

If Statements

Page 9: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Comparison and Logical Operators with the If Statement

Page 10: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Output of CartoonQuiz1.html

Page 11: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

If … Else Statements

• When using an if statement, include an else clause to run an alternate set of code if the conditional expression evaluated by the if statement returns a value of false

• An if statement that includes an else clause is called an if … else statement

• Consider the else clause a backup plan

• An if statement can be constructed without the else clause. However, the else clause can only be used with an if statement

Page 12: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Nested If and If…Else Statements

• An if statement contained within an if or if… else statement is called a nested if statement

• Similarly, an if…else statement contained within an if or if… else statement is called a nested if … else statement

• Use nested if and if…else statements to perform conditional evaluations in addition to the original conditional evaluation (for example:var numbr = 7; if (number >5)

if (number < 10) documnt.writeIn (

“The number is between t and 10.”);

Page 13: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Greeting Program with Nested If Statements

Page 14: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Modified Greeting Program with Nested If Statements

Page 15: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Switch Statements

• A switch statement controls program flow by executing a specific set of statements, depending on value of an expression

• The switch statement compares the value of an expression to a label contained within a switch statement

• If the value matches a particular label, then the statements associated with the label execute

• The labels within a switch statement are called case labels and mark specific code segments

Page 16: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Examples of Case Labels

Page 17: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Switch Statements

• A Case label consists of keyword case, followed by a literal value or variable name, followed by a colon

• A case label can be followed by a single statement or multiple statements

• Default label contains statements that execute when the value returned by a switch statement’s conditional expression does not match a case label; keyword is default followed by a colon

• Break statement is used to exit switch statements and other program control statements

Page 18: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Function Containing a Switch Statement

Page 19: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Greeting Program Using a Switch Statement

Page 20: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Section A: Chapter Summary

• Flow control is the process of determining the order in which statements are executed in a program

• The if statement is used to execute specific programming code if the evaluation of a conditional expression returns true

• A command block refers to multiple statements contained within a set of braces

• After an if statement’s condition evaluates true, either first statement following condition or command block following condition executes

Page 21: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Section A: Chapter Summary

• Statements following an if statement’s command or command block execute regardless of whether if statement’s conditional expression evaluates true or false

• The else clause runs an alternate set of code if the conditional expression evaluated by an if statement returns a value of false

• In an if…else construct, only one set of statements executes: either statement following if statement or statements following the else clause

Page 22: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Section A: Chapter Summary

• An if statement contained within another if statement is called a nested if statement

• The switch statement controls program flow by executing a specific set of statements; depending on the value returned by an expression

• Case labels within a switch statement mark specific code segments

Page 23: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Section A: Chapter Summary

• A Default label contains statements that execute when the value returned by switch statement’s conditional expression does not match a case label

• When a switch statement executes, the value returned by the conditional expression is compared to each case label in the order in which it is encountered

• A break statement is used to exit a switch statement

Page 24: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Section B:

Repetition

Page 25: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Objectives

In this section, students will learn about:

• while Statements

• do … while Statements

• for Statements

• for … in Statements

• with Statements

• continue Statements

Page 26: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

While Statements

• Loop statement repeatedly executes a statement or a series of statements while a specific condition is true or until a specific condition becomes true

• The simplest type of loop statement is the while statement used for repeating a statement or series of statements as long as a given conditional expression evaluates true

• Each repetition of a looping statement is called an iteration

Page 27: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

While Statements

• A Counter is a variable that increments or decrements with each iteration of a loop statement

• Often name counter variables count, counter, or something similar

• The following code is an example of a while statement: var count = 1; while (count <= 5) { document.writeIn(count);

++count; }

Page 28: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Output of a While Statement Using an Increment Operator

Page 29: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Output of a While Statement Using a Decrement Operator

Page 30: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

While Statements

• while loop using decrementing counter variables var count = 10; while (count > 0) {

document.writeIn (count);--count; }

• Infinite loop is a situation in which a loop statement never ends because its conditional expression is never updated or false

var count = 1;while (count <= 10) {

alert (“The number is “ + count);}

Page 31: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

While Statements

• The user must force a web browser that is caught in an infinite loop to close by pressing Ctrl+Alt+Delete to access Task List or Manager

Page 32: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Output of SpeedLimit.html

Page 33: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Do… While Statements

• Do … while statement executes a statement or statements once, then repeats execution as long as given conditional expression evaluates to true

• The syntax for do…while statement is as follows:do {

statement(s);} while (conditional expression);

• As with the while statement, include code that changes some part of conditional expression in order to prevent an infinite loop from occurring

Page 34: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Examples of a Do … While Statement

Page 35: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Days of Week Program in a Web Browser

Page 36: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

For Statements

• Use the for statement to loop through code

• A for statement is used for repeating a statement or series of statements as long as a given conditional expression evaluates true

• The for statement performs essentially the same function as the while statement: if a conditional expression in for statement evaluates true, the for statement executes repeatedly until it evaluates false

Page 37: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

For Statements

• When the JavaScript interpreter encounters a for loop, the following steps occur:– The initialization expression is started– The for loop’s condition is evaluated– If the condition evaluation in Step 2 returns a value of

true, then the for loop’s statements execute, Step 4 occurs

– The update statement in the for statement’s constructor is executed

• You can omit any of the three parts of for statement constructor, but must include semicolons to separate each section

Page 38: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

A For Statement that Displays the Contents of an Array

Page 39: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Output of Fast Foods Program

Page 40: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Examples of a For Statement

Page 41: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Output of CartoonQuizFinal.html

Page 42: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

For …In Statements

• for … in statement is a looping statement that executes the same statement or command block for all the properties within an object

• The syntax for the for… in statement is:for (variable in object) {

statement (s);}

• Unlike other loop statements, the for…in does not require a counter or any other type of code to control how the loop functions

Page 43: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

A For … In Statement Printing the Names of Properties Within an Object

Page 44: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

For …In Statements

• There is no set order or way to control how the properties in an object are assigned to a for…in statement’s variable

• One benefit of for…in statement is that it enumerates, or assigns an index to, each property in an object

Page 45: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Output of SportsCar.html

Page 46: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

With Statements

• The with statement eliminates need to retype the name of an object when properties of same object are being referenced in a series

• The syntax for the with statement is as follows:with (object) {

statement(s);}

• The name of object you want to reference is placed within parentheses following the with keyword

Page 47: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Example of a With Statement Assigning Values to Object Properties

Page 48: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Continue Statements

• A Continue statement halts looping statement and restarts the loop with a new iteration

• Use the continue statement when you want to stop loop for current iteration, but want loop to continue with a new iteration

Page 49: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

A For Loop with a Continue Statement

Page 50: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Output of SportsCar3.html

Page 51: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Section B: Chapter Summary

• A loop statement repeatedly executes statement as long as a specific condition is true or until a specific condition becomes true

• The while statement is used for repeating a statement or series of statements as long as given conditional expression evaluates true

• Each repetition of a looping statement is called an iteration

• A counter is a variable that increments with each iteration of a loop statement

Page 52: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Section B: Chapter Summary

• You must include code that tracks the progress of the while statement and changes the value produced by conditional expression once desired tasks done

• If a counter variable is beyond range of a while statement’s conditional expression, the while statement is bypassed completely

• In an infinite loop, a loop statement never ends because its conditional expression is never updated

Page 53: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Section B: Chapter Summary

• The do…while statement executes a statement or statements once, then repeats execution as long as given conditional expression is true The for statement is used for repeating a statement or series as long as a given conditional expression is true

• You can omit any of the three parts of the for statement constructor, but you must include the semicolon that separates each section

• The variable name in the for…in statement constructor holds an individual object property

Page 54: Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Section B: Chapter Summary

• The for…in statement executes the same statement or command block for all the properties within an object

• The for…in statement enumerates, or assigns an index to, each property in an object

• The with statement eliminates the need to retype the name of an object when properties of same object are being referenced in a series

• The continue statement halts a looping statement and restarts the loop with a new iteration