2 6 XHTML font size " + counter "ex

" ); counter; // increment } // --> 26 whileCounter.html The while loop will continue until the value of counter is greater than 7. Increment the counter."> 2 6 XHTML font size " + counter "ex

" ); counter; // increment } // --> 26 whileCounter.html 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.

Chapter 9 - JavaScript: Control Structures II

Published byΝάρκισσα Αλεξόπουλος Modified over 5 years ago

Similar presentations

Presentation on theme: "Chapter 9 - JavaScript: Control Structures II"— Presentation transcript:

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 Summary of Structured Programming

2 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 9.1: WhileCounter.html --> 6 <!-- Counter-Controlled Repetition --> 7 8 <html xmlns = " <head> <title>Counter-Controlled Repetition</title> 11 <script type = "text/javascript"> <!-- var counter = 1; // initialization 15 while ( counter <= 7 ) { // repetition condition document.writeln( "<p style = \"font-size: " + counter + "ex\">XHTML font size " + counter + "ex</p>" ); counter; // increment } // --> </script> 24 </head><body></body> 26 </html> whileCounter.html The while loop will continue until the value of counter is greater than 7. Increment the counter.

3 Program Output

4 ForCounter.html Initialization Repetition condition Incrementing
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 9.2: ForCounter.html > 6 <!-- Counter-Controlled Repetition with for structure --> 7 8 <html xmlns = " <head> <title>Counter-Controlled Repetition</title> 11 <script type = "text/javascript"> <!-- // Initialization, repetition condition and // incrementing are all included in the for // structure header. for ( var counter = 1; counter <= 7; ++counter ) document.writeln( "<p style = \"font-size: " + counter + "ex\">XHTML font size " + counter + "ex</p>" ); // --> </script> 23 </head><body></body> 25 </html> ForCounter.html Initialization Repetition condition Incrementing

5 Program Output

6 9.3 For Repetition Structure
keyword Control variable name Final value of control variable for which the condition is true for ( var counter = 1 ; counter <= 7 ; ++counter ) Initial value of control variable Increment of control variable Loop-continuation condition Fig. 9.3 Components of a typical for structure header.

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

8 Sum.html Program Output
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 9.5: Sum.html > 6 <!-- Using the for repetition structure --> 7 8 <html xmlns = " <head> <title>Sum the Even Integers from 2 to 100</title> 11 <script type = "text/javascript"> <!-- var sum = 0; 15 for ( var number = 2; number <= 100; number += 2 ) sum += number; 18 document.writeln( "The sum of the even integers " + "from 2 to 100 is " + sum ); // --> </script> 23 </head><body></body> 25 </html> Sum.html Program Output The for loop will continue until the value of number is greater than 100. Initialization. Repetition condition. Incrementing.

9 Interest.html Opening table element.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 9.6: interest.html > 6 <!-- Using the for repetition structure --> 7 8 <html xmlns = " <head> <title>Calculating Compound Interest</title> 11 <script type = "text/javascript"> <!-- var amount, principal = , rate = .05; 15 document.writeln( "<table border = \"1\" width = \"100%\">" ); document.writeln( "<caption>Calculating Compound Interest</caption>" ); document.writeln( "<thead><tr><th align = \"left\">Year</th>" ); document.writeln( "<th align = \"left\">Amount on deposit</th>" ); document.writeln( "</tr></thead>" ); 25 for ( var year = 1; year <= 10; ++year ) { amount = principal * Math.pow( rate, year ); document.writeln( "<tbody><tr><td>" + year + "</td><td>" + Math.round( amount * 100 ) / 100 + "</td></tr>" ); } 32 document.writeln( "</tbody></table>" ); // --> </script> Interest.html Opening table element. Each iteration of the for loop creates a table row listing the year of the loan and the amount.

10 Interest.html Program Output
36 </head><body></body> 38 </html> Interest.html Program Output

11 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 9.7: SwitchTest.html --> 6 <!-- Using the switch structure --> 7 8 <html xmlns = " <head> <title>Switching between XHTML List Formats</title> 11 <script type = "text/javascript"> <!-- var choice, // user’s choice startTag, // starting list item tag endTag, // ending list item tag validInput = true, // indicates if input is valid listType; // list type as a string 19 choice = window.prompt( "Select a list style:\n" + "1 (bullet), 2 (numbered), 3 (lettered)", "1" ); 22 switch ( choice ) { case "1": startTag = "<ul>"; endTag = "</ul>"; listType = "<h1>Bullet List</h1>"; break; case "2": startTag = "<ol>"; endTag = "</ol>"; listType = "<h1>Ordered List: Numbered</h1>"; break; SwitchTest.html Variable choice is given the value input by the user in the prompt dialog. The value of choice is evaluated against each of the values of the case labels. The break statement causes program control to proceed with the first statement after the switch structure.

12 If none of the cases match, variable validInput is set to false.
startTag = "<ol type = \"A\">"; endTag = "</ol>"; listType = "<h1>Ordered List: Lettered</h1>"; break; default: validInput = false; } 42 if ( validInput == true ) { document.writeln( listType + startTag ); 45 for ( var i = 1; i <= 3; ++i ) document.writeln( "<li>List item " + i + "</li>" ); 48 document.writeln( endTag ); } else document.writeln( "Invalid choice: " + choice ); // --> </script> 55 </head> <body> <p>Click Refresh (or Reload) to run the script again</p> </body> 60 </html> SwitchTest.html If none of the cases 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.

13 Program Output

14 Program Output

15 9.5 switch Multiple-Selection Structure
Fig. 9.8 switch multiple-selection structure.

16 The loop stops when the value of counter is greater than 6.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 9.9: DoWhileTest.html --> 6 <!-- Using the do/while structure --> 7 8 <html xmlns = " <head> <title>Using the do/while Repetition Structure</title> 11 <script type = "text/javascript"> <!-- var counter = 1; 15 do { document.writeln( "<h" + counter + ">This is " + "an h" + counter + " level head" + "</h" + counter + ">" ); 20 counter; } while ( counter <= 6 ); // --> </script> 25 </head><body></body> 27 </html> DoWhileTest.html 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.

17 Program Output

18 9.6 do/while Repetition Structure
action(s) true condition false Fig Flowcharting the do/while repetition structure.

19 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 9.11: BreakTest.html --> 6 <!-- Using the break statement --> 7 8 <html xmlns = " <head> <title> Using the break Statement in a for Structure </title> 13 <script type = "text/javascript"> <!-- for ( var count = 1; count <= 10; ++count ) { if ( count == 5 ) break; // break loop only if count == 5 19 document.writeln( "Count is: " + count + "<br />" ); } 22 document.writeln( "Broke out of loop at count = " + count ); // --> </script> 27 </head><body></body> 29 </html> BreakTest.html When the value of variable count equals 5, the break statement causes program control to proceed to the first line outside the for loop.

20 Program Output

21 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 9.12: ContinueTest.html --> 6 <!-- Using the break statement > 7 8 <html xmlns = " <head> <title> Using the continue Statement in a for Structure </title> 13 <script type = "text/javascript"> <!-- for ( var count = 1; count <= 10; ++count ) { if ( count == 5 ) continue; // skip remaining code in loop // only if count == 5 20 document.writeln( "Count is: " + count + "<br />" ); } 23 document.writeln( "Used continue to skip printing 5" ); // --> </script> 27 </head><body></body> 29 </html> ContinueTest.html When the value of variable count equals 5, the continue statement causes program control to proceed to the next iteration of the for loop.

22 Program Output

23 stop is the label for the break statement.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 9.13: BreakLabelTest.html > 6 <!-- Using the break statement with a Label --> 7 8 <html xmlns = " <head> <title>Using the break Statement with a Label</title> 11 <script type = "text/javascript"> <!-- stop: { // labeled compound statement for ( var row = 1; row <= 10; ++row ) { for ( var column = 1; column <= 5 ; ++column ) { 17 if ( row == 5 ) break stop; // jump to end of stop block 20 document.write( "* " ); } 23 document.writeln( "<br />" ); } 26 // the following line is skipped document.writeln( "This line should not print" ); } 30 BreakLabelTest.html stop is the label for the break statement. 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.

24 BreakLabelTest.html Program Output
document.writeln( "End of script" ); // --> </script> 34 </head><body></body> 36 </html> BreakLabelTest.html Program Output

25 nextRow is the label for the continue statement.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 9.14: ContinueLabelTest.html --> 6 <!-- Using the continue statement > 7 8 <html xmlns = " <head> <title>Using the continue Statement with a Label</title> 11 <script type = "text/javascript"> <!-- nextRow: // target label of continue statement for ( var row = 1; row <= 5; ++row ) { document.writeln( "<br />" ); 17 for ( var column = 1; column <= 10; ++column ) { 19 if ( column > row ) continue nextRow; // next iteration of // labeled loop 23 document.write( "* " ); } } // --> </script> 29 </head><body></body> 31 </html> ContinueLabelTest.html 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.

26 Program Output

27 9.9 Logical Operators

28 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 9.18: LogicalOperators.html --> 6 <!-- Demonstrating Logical Operators --> 7 8 <html xmlns = " <head> <title>Demonstrating the Logical Operators</title> 11 <script type = "text/javascript"> <!-- document.writeln( "<table border = \"1\" width = \"100%\">" ); 16 document.writeln( "<caption>Demonstrating Logical " + "Operators</caption" ); 20 document.writeln( "<tr><td width = \"25%\">Logical AND (&&)</td>" + "<td>false && false: " + ( false && false ) + "<br />false && true: " + ( false && true ) + "<br />true && false: " + ( true && false ) + "<br />true && true: " + ( true && true ) + "</td>" ); 28 document.writeln( "<tr><td width = \"25%\">Logical OR (||)</td>" + "<td>false || false: " + ( false || false ) + "<br />false || true: " + ( false || true ) + "<br />true || false: " + ( true || false ) + "<br />true || true: " + ( true || true ) + "</td>" ); LogicalOperators.html 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.

29 LogicalOperators.html Program Output
36 document.writeln( "<tr><td width = \"25%\">Logical NOT (!)</td>" + "<td>!false: " + ( !false ) + "<br />!true: " + ( !true ) + "</td>" ); 41 document.writeln( "</table>" ); // --> </script> 45 </head><body></body> 47 </html> LogicalOperators.html Program Output These expressions demonstrate the use of logical NOT.

30 9.10 Summary of Structured Programming

31 9.10 Summary of Structured Programming
Fig JavaScript’s single-entry/single-exit sequence, selection and repetition structures.

32 9.10 Summary of Structured Programming

33 9.10 Summary of Structured Programming
Fig Simplest flowchart.

34 9.10 Summary of Structured Programming
Rule 2 Rule 2 Rule 2 . . . Fig Repeatedly applying rule 2 of Fig to the simplest flowchart.

35 Rule 3 Rule 3 Rule 3 Fig Applying rule 3 of Fig to the simplest flowchart

36 9.10 Summary of Structured Programming
Fig Stacked, nested and overlapped building blocks.

37 9.10 Summary of Structured Programming
Fig Unstructured flowchart.

Download ppt "Chapter 9 - JavaScript: Control Structures II"

Similar presentations

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
1 JavaScript: Control Structures II. 2 whileCounter.html 1 2

1 JavaScript: Control Structures II. 2 whileCounter.html 1 2
Session 5 JavaScript/JScript: Control Structures II Matakuliah: M0114/Web Based Programming Tahun: 2005 Versi: 5.

Session 5 JavaScript/JScript: Control Structures II Matakuliah: M0114/Web Based Programming Tahun: 2005 Versi: 5.
Page 1 of 26 Javascript/Jscript Ch 7,8,9,10 Vadim Parizher Computer Science Department California State University, Northridge Spring 2003 Slides from.

Page 1 of 26 Javascript/Jscript Ch 7,8,9,10 Vadim Parizher Computer Science Department California State University, Northridge Spring 2003 Slides from.
© Copyright 1992–2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Chapter 4 – C Program Control Outline 4.1Introduction.

© Copyright 1992–2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Chapter 4 – C Program Control Outline 4.1Introduction.
Switch structure Switch structure selects one from several alternatives depending on the value of the controlling expression. The controlling expression.

Switch structure Switch structure selects one from several alternatives depending on the value of the controlling expression. The controlling expression.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic JavaScript: Control Structures: continued.

Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic JavaScript: Control Structures: continued.
Control Structures Control structures control the flow of program execution. 3 types of control structures: sequence, selection.

Control Structures Control structures control the flow of program execution. 3 types of control structures: sequence, selection.
 2008 Pearson Education, Inc. All rights reserved. 1 8 8 JavaScript: Control Statements II.

 2008 Pearson Education, Inc. All rights reserved JavaScript: Control Statements II.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 8 - JavaScript: Control Structures I Outline 8.1 Introduction 8.2 Algorithms 8.3 Pseudocode 8.4.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 8 - JavaScript: Control Structures I Outline 8.1 Introduction 8.2 Algorithms 8.3 Pseudocode 8.4.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 10 - JavaScript: Functions Outline 10.1 Introduction 10.2 Program Modules in JavaScript 10.3.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 10 - JavaScript: Functions Outline 10.1 Introduction 10.2 Program Modules in JavaScript 10.3.
Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.

Chapter 4: Decision Making with Control Structures and Statements JavaScript - Introductory.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 9 - JavaScript: Control Statements II Outline 9.1 Introduction 9.2 Essentials of Counter-Controlled.

 2004 Prentice Hall, Inc. All rights reserved. Chapter 9 - JavaScript: Control Statements II Outline 9.1 Introduction 9.2 Essentials of Counter-Controlled.
 2003 Prentice Hall, Inc. All rights reserved. 1 Chapter 5 – Control Structures: Part 2 Outline 5.1 Introduction 5.2 Essentials of Counter-Controlled.

 2003 Prentice Hall, Inc. All rights reserved. 1 Chapter 5 – Control Structures: Part 2 Outline 5.1 Introduction 5.2 Essentials of Counter-Controlled.
 2002 Prentice Hall. All rights reserved. 1 Chapter 5 – Control Structures: Part 2 Outline 5.1Introduction 5.2 Essentials of Counter-Controlled Repetition.

 2002 Prentice Hall. All rights reserved. 1 Chapter 5 – Control Structures: Part 2 Outline 5.1Introduction 5.2 Essentials of Counter-Controlled Repetition.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 18 - WMLScript: Control Structures II Outline 18.1 Introduction 18.2 Essentials of Counter-Controlled.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 18 - WMLScript: Control Structures II Outline 18.1 Introduction 18.2 Essentials of Counter-Controlled.
JavaScript: Control Structures September 27, 2005 Slides modified from Internet & World Wide Web: How to Program. 2004 (3rd) edition. By Deitel, Deitel,

JavaScript: Control Structures September 27, 2005 Slides modified from Internet & World Wide Web: How to Program (3rd) edition. By Deitel, Deitel,
Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition.

Chapter 3 Functions, Events, and Control Structures JavaScript, Third Edition.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 8 - JavaScript: Control Structures I Outline 8.1 Introduction 8.2 Algorithms 8.3 Pseudocode 8.4.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 8 - JavaScript: Control Structures I Outline 8.1 Introduction 8.2 Algorithms 8.3 Pseudocode 8.4.

Similar presentations

Ads by Google