XHTML font size " + counter + 19 "ex " ); 20 ++counter; // increment 21 } 22 // --> The while loop will continue until the value of counter is greater than 7. Increment the counter."> XHTML font size " + counter + 19 "ex " ); 20 ++counter; // increment 21 } 22 // --> The while loop will continue until the value of counter is greater than 7. Increment the counter.">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 9 - JavaScript: Control Structures II Outline 9.1 Introduction 9.2 Essentials of Counter-Controlled.

Similar presentations


Presentation on theme: " 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 9 - JavaScript: Control Structures II Outline 9.1 Introduction 9.2 Essentials of Counter-Controlled."— Presentation transcript:

1  2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 9 - JavaScript: Control Structures II Outline 9.1 Introduction 9.2 Essentials of Counter-Controlled Repetition 9.3 for Repetition Structure 9.4 Examples Using the for Structure 9.5 switch Multiple-Selection Structure 9.6 do/while Repetition Structure 9.7 break and continue Statements 9.8 Labeled break and continue Statements 9.9 Logical Operators 9.10 Summary of Structured Programming

2  2001 Prentice Hall, Inc. All rights reserved. 2 Essentials of Counter-Controlled Repetition Counter-controlled repetition requires: 1. Name of control variable (or loop counter) 2. Initial Value of control variable 3. Condition that tests for final value of control variable 4. Increment (or decrement) of control variable per loop

3  2001 Prentice Hall, Inc. All rights reserved. Outline 3 whileCounter.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Counter-Controlled Repetition 11 12 13 <!-- 14 var counter = 1; // initialization 15 16 while ( counter <= 7 ) { // repetition condition 17 document.writeln( "<p style = \"font-size: " + 18 counter + "ex\">XHTML font size " + counter + 19 "ex " ); 20 ++counter; // increment 21 } 22 // --> 23 24 25 26 The while loop will continue until the value of counter is greater than 7. Increment the counter.

4  2001 Prentice Hall, Inc. All rights reserved. Outline 4 Program Output

5  2001 Prentice Hall, Inc. All rights reserved. 5 for repetition structure: –Handles all details of counter-controlled repetition JavaScript statement: for ( var num = 1 ; i <= 7 ; i++ ) document.writeln( “ HTML Font size ” + num + “ ” ); for repetition structure

6  2001 Prentice Hall, Inc. All rights reserved. 6 Equivalent Structures for structure: for ( initialization; loopContinuationTest ; increment ) statement; while structure: initialization; while ( loopContinuationTest ) { statement; increment; } for Repetition Structure

7  2001 Prentice Hall, Inc. All rights reserved. 7 Three expressions in for structure are optional –If loopContinuationTest omitted JavaScript assumes condition is true Leads to infinite loop –Can omit initialization expression if variable initialized elsewhere in program –Can omit increment statement if incrementation occurs inside structure If loop-continuation condition initially false, body of for structure not executed Delay loop –for structure empty except for semi-colon –Loop still runs specified number of times –Useful for slowing down programs, but more efficient techniques exist (Chapter 15) for Repetition Structure

8  2001 Prentice Hall, Inc. All rights reserved. Outline 8 ForCounter.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Counter-Controlled Repetition 11 12 13 <!-- 14 // Initialization, repetition condition and 15 // incrementing are all included in the for 16 // structure header. 17 for ( var counter = 1; counter <= 7; ++counter ) 18 document.writeln( "<p style = \"font-size: " + 19 counter + "ex\">XHTML font size " + counter + 20 "ex " ); 21 // --> 22 23 24 25 InitializationRepetition conditionIncrementing

9  2001 Prentice Hall, Inc. All rights reserved. Outline 9 Program Output

10  2001 Prentice Hall, Inc. All rights reserved. 10 9.3 For Repetition Structure for (var counter = 1 ; counter <= 7 ; ++counter ) Initial value of control variableIncrement of control variable Control variable nameFinal value of control variable for which the condition is true for keyword Loop-continuation condition Fig. 9.3Components of a typical for structure header.

11  2001 Prentice Hall, Inc. All rights reserved. 11 9.4 Examples Using the for Structure counter <= 7 document.writeln( "<p style=\"font-size: " + counter + "ex\">XHTML font size "+ counter + "ex " ); true false var counter = 1 ++counter Establish initial value of control variable. Determine if final value of control variable has been reached. Body of loop (this may be many statements) Increment the control variable. Fig. 9.4Flowcharting a typical for repetition structure.

12  2001 Prentice Hall, Inc. All rights reserved. Outline 12 Sum.html Program Output 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Sum the Even Integers from 2 to 100 11 12 13 <!-- 14 var sum = 0; 15 16 for ( var number = 2; number <= 100; number += 2 ) 17 sum += number; 18 19 document.writeln( "The sum of the even integers " + 20 "from 2 to 100 is " + sum ); 21 // --> 22 23 24 25 The for loop will continue until the value of number is greater than 100. Initialization.Repetition condition.Incrementing.

13  2001 Prentice Hall, Inc. All rights reserved. 13 Math Object Math.pow( x, y ); –Calculates x raised to the y th power Math.round(); –Rounds the inputted value to the nearest integer –To output a number with to the second decimal place, use formula: Math.round( amount * 100 ) / 100 Example: Math.round( 3.1415 * 100 ) / 100 = 314/100 = 3.14 JavaScript represents all numbers as floating-point numbers –When floating-point numbers rounded, result may not be totally correct (especially when used in equations with other rounded values) Examples Using the for Structure

14  2001 Prentice Hall, Inc. All rights reserved. Outline 14 Interest.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Calculating Compound Interest 11 12 13 <!-- 14 var amount, principal = 1000.0, rate =.05; 15 16 document.writeln( 17 " " ); 18 document.writeln( 19 " Calculating Compound Interest " ); 20 document.writeln( 21 " Year " ); 22 document.writeln( 23 " Amount on deposit " ); 24 document.writeln( " " ); 25 26 for ( var year = 1; year <= 10; ++year ) { 27 amount = principal * Math.pow( 1.0 + rate, year ); 28 document.writeln( " " + year + 29 " " + Math.round( amount * 100 ) / 100 + 30 " " ); 31 } 32 33 document.writeln( " " ); 34 // --> 35 Opening table element.Each iteration of the for loop creates a table row listing the year of the loan and the amount.

15  2001 Prentice Hall, Inc. All rights reserved. Outline 15 Interest.html Program Output 36 37 38

16  2001 Prentice Hall, Inc. All rights reserved. 16 switch control structure –Contains multiple substructures –Actions executed depend on variable value –Works well classifying user inputs break statement –Skips to end of switch structure –Should be at the end of every case sub-structure –If left out, JavaScript will continue to test user input against cases switch Multiple-Selection Structure

17  2001 Prentice Hall, Inc. All rights reserved. 17 default case –Is executed if variable did not match any of the cases Good practices: –Test if user entered valid value –Indent all lines of structure switch Multiple-Selection Structure

18  2001 Prentice Hall, Inc. All rights reserved. 18 JavaScript statement: var choice; choice = window.prompt(); switch ( choice ) { case “a”: actions case “b”: actions case “z”: actions default: actions } switch Multiple-Selection Structure

19  2001 Prentice Hall, Inc. All rights reserved. 19 9.5 switch Multiple-Selection Structure...... Fig. 9.8switch multiple-selection structure.

20  2001 Prentice Hall, Inc. All rights reserved. Outline 20 SwitchTest.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Switching between XHTML List Formats 11 12 13 <!-- 14 var choice, // user’s choice 15 startTag, // starting list item tag 16 endTag, // ending list item tag 17 validInput = true, // indicates if input is valid 18 listType; // list type as a string 19 20 choice = window.prompt( "Select a list style:\n" + 21 "1 (bullet), 2 (numbered), 3 (lettered)", "1" ); 22 23 switch ( choice ) { 24 case "1": 25 startTag = " "; 26 endTag = " "; 27 listType = " Bullet List "; 28 break; 29 case "2": 30 startTag = " "; 31 endTag = " "; 32 listType = " Ordered List: Numbered "; 33 break; The value of choice is evaluated against each of the values of the case labels. Variable choice is given the value input by the user in the prompt dialog. The break statement causes program control to proceed with the first statement after the switch structure.

21  2001 Prentice Hall, Inc. All rights reserved. Outline 21 SwitchTest.html 34 case "3": 35 startTag = " "; 36 endTag = " "; 37 listType = " Ordered List: Lettered "; 38 break; 39 default: 40 validInput = false; 41 } 42 43 if ( validInput == true ) { 44 document.writeln( listType + startTag ); 45 46 for ( var i = 1; i <= 3; ++i ) 47 document.writeln( " List item " + i + " " ); 48 49 document.writeln( endTag ); 50 } 51 else 52 document.writeln( "Invalid choice: " + choice ); 53 // --> 54 55 56 57 58 Click Refresh (or Reload) to run the script again 59 60 If none of the case s match, variable validInput is set to false. If the user input a valid value, the list is created. Otherwise, the message “Invalid choice” is displayed in the browser.

22  2001 Prentice Hall, Inc. All rights reserved. Outline 22 Program Output

23  2001 Prentice Hall, Inc. All rights reserved. Outline 23 Program Output

24  2001 Prentice Hall, Inc. All rights reserved. 24 Similar to while control structure Difference –while : structure only executes if condition is initially true JavaScript statement: while ( condition ) { statement } –do/while : structure always executes at least once JavaScript statement: do { statement } while ( condition ); do/while Repetition Structure

25  2001 Prentice Hall, Inc. All rights reserved. 25 9.6 do/while Repetition Structure condition true action(s) false Fig. 9.10Flowcharting the do/while repetition structure.

26  2001 Prentice Hall, Inc. All rights reserved. Outline 26 DoWhileTest.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Using the do/while Repetition Structure 11 12 13 <!-- 14 var counter = 1; 15 16 do { 17 document.writeln( " This is " + 18 "an h" + counter + " level head" + "</h" + 19 counter + ">" ); 20 21 ++counter; 22 } while ( counter <= 6 ); 23 // --> 24 25 26 27 Each iteration of the do / while loop writes a line of text with a header element to the XHTML document. The loop stops when the value of counter is greater than 6.

27  2001 Prentice Hall, Inc. All rights reserved. Outline 27 Program Output

28  2001 Prentice Hall, Inc. All rights reserved. 28 Alter flow of control break; –Exits structure continue; –Skips remaining statements in structure; continues with next loop iteration break and continue Statements

29  2001 Prentice Hall, Inc. All rights reserved. Outline 29 BreakTest.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 11 Using the break Statement in a for Structure 12 13 14 15 <!-- 16 for ( var count = 1; count <= 10; ++count ) { 17 if ( count == 5 ) 18 break; // break loop only if count == 5 19 20 document.writeln( "Count is: " + count + " " ); 21 } 22 23 document.writeln( 24 "Broke out of loop at count = " + count ); 25 // --> 26 27 28 29 When the value of variable count equals 5, the break statement causes program control to proceed to the first line outside the for loop.

30  2001 Prentice Hall, Inc. All rights reserved. Outline 30 Program Output

31  2001 Prentice Hall, Inc. All rights reserved. Outline 31 ContinueTest.htm l 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 11 Using the continue Statement in a for Structure 12 13 14 15 <!-- 16 for ( var count = 1; count <= 10; ++count ) { 17 if ( count == 5 ) 18 continue; // skip remaining code in loop 19 // only if count == 5 20 21 document.writeln( "Count is: " + count + " " ); 22 } 23 24 document.writeln( "Used continue to skip printing 5" ); 25 // --> 26 27 28 29 When the value of variable count equals 5, the continue statement causes program control to proceed to the next iteration of the for loop.

32  2001 Prentice Hall, Inc. All rights reserved. Outline 32 Program Output

33  2001 Prentice Hall, Inc. All rights reserved. 33 break statement –Breaks out of immediately enclosing repetition control structure To break out of nested structures –Use labeled break statements –Begins with a label (identifier followed by colon) –Enclose structures to be broken out of within braces ({}) Called labeled compound statement –When executing break statement, follow format: break label; Labeled break and continue Statements

34  2001 Prentice Hall, Inc. All rights reserved. 34 Use of labeled continue statement –Follows same syntax and rules –After execution, continues with next iteration of enclosing labeled repetition structure Good practice to enter output statement to test if labeled statement executed properly Labeled break and continue Statements

35  2001 Prentice Hall, Inc. All rights reserved. Outline 35 BreakLabelTest.h tml 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Using the break Statement with a Label 11 12 13 <!-- 14 stop: { // labeled compound statement 15 for ( var row = 1; row <= 10; ++row ) { 16 for ( var column = 1; column <= 5 ; ++column ) { 17 18 if ( row == 5 ) 19 break stop; // jump to end of stop block 20 21 document.write( "* " ); 22 } 23 24 document.writeln( " " ); 25 } 26 27 // the following line is skipped 28 document.writeln( "This line should not print" ); 29 } 30 When the break statement is encountered, program control proceeds to the first line outside the stop block and not just the for loop where the statement is found. stop is the label for the break statement.

36  2001 Prentice Hall, Inc. All rights reserved. Outline 36 BreakLabelTest.h tml Program Output 31 document.writeln( "End of script" ); 32 // --> 33 34 35 36

37  2001 Prentice Hall, Inc. All rights reserved. Outline 37 ContinueLabelTes t.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Using the continue Statement with a Label 11 12 13 <!-- 14 nextRow: // target label of continue statement 15 for ( var row = 1; row <= 5; ++row ) { 16 document.writeln( " " ); 17 18 for ( var column = 1; column <= 10; ++column ) { 19 20 if ( column > row ) 21 continue nextRow; // next iteration of 22 // labeled loop 23 24 document.write( "* " ); 25 } 26 } 27 // --> 28 29 30 31 nextRow is the label for the continue statement.If the value of variable column is greater than the value of variable row, the continue statement causes the next interation of the loop. If the continue statement is performed, method write does not print the string “* “ in the XHTML document.

38  2001 Prentice Hall, Inc. All rights reserved. Outline 38 Program Output

39  2001 Prentice Hall, Inc. All rights reserved. 39 Logical operators –Used to form more complex conditions by combining simple conditions Logical operators are –&& (logical AND) –|| (logical OR) –! (logical NOT or logical negation) Logical Operators

40  2001 Prentice Hall, Inc. All rights reserved. 40 && (logical AND) All statements connected by && operators in a condition must be true for the overall condition to be true Logical Operators

41  2001 Prentice Hall, Inc. All rights reserved. 41 || (logical OR) Any statement connected by || operators in a condition must be true for overall condition to be true Logical Operators

42  2001 Prentice Hall, Inc. All rights reserved. 42 ! (logical NOT or logical negation) ! operator in front of a condition reverses the meaning of the condition. –A true value becomes false –A false value becomes true Logical Operators

43  2001 Prentice Hall, Inc. All rights reserved. 43 9.9 Logical Operators

44  2001 Prentice Hall, Inc. All rights reserved. Outline 44 LogicalOperators.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Demonstrating the Logical Operators 11 12 13 <!-- 14 document.writeln( 15 " " ); 16 17 document.writeln( 18 " Demonstrating Logical " + 19 "Operators</caption" ); 20 21 document.writeln( 22 " Logical AND (&&) " + 23 " false && false: " + ( false && false ) + 24 " false && true: " + ( false && true ) + 25 " true && false: " + ( true && false ) + 26 " true && true: " + ( true && true ) + 27 " " ); 28 29 document.writeln( 30 " Logical OR (||) " + 31 " false || false: " + ( false || false ) + 32 " false || true: " + ( false || true ) + 33 " true || false: " + ( true || false ) + 34 " true || true: " + ( true || true ) + 35 " " ); Each expression will evaluate to true or false using the rules of logical AND. Each expression will evaluate to true or false using the rules of logical OR.

45  2001 Prentice Hall, Inc. All rights reserved. Outline 45 LogicalOperators.html Program Output 36 37 document.writeln( 38 " Logical NOT (!) " + 39 " !false: " + ( !false ) + 40 " !true: " + ( !true ) + " " ); 41 42 document.writeln( " " ); 43 // --> 44 45 46 47 These expressions demonstrate the use of logical NOT.

46  2001 Prentice Hall, Inc. All rights reserved. 46 9.10 Summary of Structured Programming

47  2001 Prentice Hall, Inc. All rights reserved. 47 Rules for Forming Structured Programs 1.Begin with the “simplest flowchart” 2.Any rectangle (action) can be replaced by two rectangles (actions) in sequence 3.Any rectangle (action) can be replaced by any control structure (sequence, if, if/else, switch, do/while or for ) 4.Rules 2 and 3 may be applied as often as you like and in any order Structured Programming Summary

48  2001 Prentice Hall, Inc. All rights reserved. 48 9.10 Summary of Structured Programming Fig. 9.20JavaScript’s single-entry/single-exit sequence, selection and repetition structures.

49  2001 Prentice Hall, Inc. All rights reserved. 49 9.10 Summary of Structured Programming Fig. 9.22Simplest flowchart.

50  2001 Prentice Hall, Inc. All rights reserved. 50 9.10 Summary of Structured Programming... Rule 2 Fig. 9.23Repeatedly applying rule 2 of Fig. 9.21 to the simplest flowchart.

51  2001 Prentice Hall, Inc. All rights reserved. 51 Fig. 9.24Applying rule 3 of Fig. 9.21 to the simplest flowchart Rule 3

52  2001 Prentice Hall, Inc. All rights reserved. 52 9.10 Summary of Structured Programming Fig. 9.25Stacked, nested and overlapped building blocks.

53  2001 Prentice Hall, Inc. All rights reserved. 53 9.10 Summary of Structured Programming Fig. 9.26Unstructured flowchart.

54  2001 Prentice Hall, Inc. All rights reserved. 54 Structured approach: 7 single-entry/single-exit pieces –Selection control structures if structure (single selection) if/else structure (double selection) switch structure (multiple selection) –Repetition control structures while structure do/while structure for structure for/in structure (Chap 11, Page-374) (for each element in an array) Structured Programming Summary

55  2001 Prentice Hall, Inc. All rights reserved. 55 Any form of control in JavaScript can be expressed through –if structure (selection) –while structure (repetition) Control structures combined in two ways –Stacking –Nesting Structured Programming Summary


Download ppt " 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 9 - JavaScript: Control Structures II Outline 9.1 Introduction 9.2 Essentials of Counter-Controlled."

Similar presentations


Ads by Google