Download presentation
Presentation is loading. Please wait.
1
JavaScript: Control Structures I
2
Control Structures Flowcharting JavaScript’s sequence structure.
3
Control Structures
4
if/else Selection Structure
Flowcharting the single-selection if structure.
5
if/else Selection Structure
false true grade >= 60 print “Failed” print “Passed” Flowcharting the double-selection if/else structure.
6
Formulating Algorithms: Case Study 1 (Counter-Controlled Repetition)
true product <= 1000 false Flowcharting the while repetition structure.
7
Prompt for the user input a grade.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 8.7: average.html --> 6 <!-- Class Average Program --> 7 8 <html xmlns = " <head> <title>Class Average Program</title> 11 <script type = "text/javascript"> <!-- var total, // sum of grades gradeCounter, // number of grades entered gradeValue, // grade value average, // average of all grades grade; // grade typed by user 19 // Initialization Phase total = 0; // clear total gradeCounter = 1; // prepare to loop 23 // Processing Phase while ( gradeCounter <= 10 ) { // loop 10 times 26 // prompt for input and read grade from user grade = window.prompt( "Enter integer grade:", "0" ); 29 // convert grade from a string to an integer gradeValue = parseInt( grade ); 32 // add gradeValue to total total = total + gradeValue; 35 Average.html The while loop will execute the statements in the body of the loop until the value of gradeCounter equals 10. Prompt for the user input a grade. Convert input to an integer. Add new grade to total.
8
Average.html Program Output
// add 1 to gradeCounter gradeCounter = gradeCounter + 1; } 39 // Termination Phase average = total / 10; // calculate the average 42 // display average of exam grades document.writeln( "<h1>Class average is " + average + "</h1>" ); // --> </script> 48 </head> <body> <p>Click Refresh (or Reload) to run the script again<p> </body> 53 </html> Increment the counter. Average.html Program Output Calculate the average of the grades input by the user. Write the result to the XHTML document.
9
Prompt for the user to enter a grade, -1 to end.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 8.9: Average2.html > 6 <!-- Sentinel-controlled Repetition --> 7 8 <html xmlns = " <head> <title>Class Average Program: Sentinel-controlled Repetition</title> 12 <script type = "text/javascript"> <!-- var gradeCounter, // number of grades entered gradeValue, // grade value total, // sum of grades average, // average of all grades grade; // grade typed by user 20 // Initialization phase total = 0; // clear total gradeCounter = 0; // prepare to loop 24 // Processing phase // prompt for input and read grade from user grade = window.prompt( "Enter Integer Grade, -1 to Quit:", "0" ); 29 // convert grade from a string to an integer gradeValue = parseInt( grade ); 32 while ( gradeValue != -1 ) { // add gradeValue to total total = total + gradeValue; Average2.html Prompt for the user to enter a grade, -1 to end. The while loop will continue until the user input equals –1.
10
36 // add 1 to gradeCounter gradeCounter = gradeCounter + 1; 39 // prompt for input and read grade from user grade = window.prompt( "Enter Integer Grade, -1 to Quit:", "0" ); 43 // convert grade from a string to an integer gradeValue = parseInt( grade ); } 47 // Termination phase if ( gradeCounter != 0 ) { average = total / gradeCounter; 51 // display average of exam grades document.writeln( "<h1>Class average is " + average + "</h1>" ); } else document.writeln( "<p>No grades were entered</p>" ); // --> </script> </head> 61 <body> <p>Click Refresh (or Reload) to run the script again</p> </body> 65 </html> Average2.html Each iteration of the loop will open a prompt dialog allowing the user to input another grade.
11
Program Output
12
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 8.11: analysis.html --> 6 <!-- Analyzing Exam Results --> 7 8 <html xmlns = " <head> <title>Analysis of Examination Results</title> 11 <script type = "text/javascript"> <!-- // initializing variables in declarations var passes = 0, // number of passes failures = 0, // number of failures student = 1, // student counter result; // one exam result 19 // process 10 students; counter-controlled loop while ( student <= 10 ) { result = window.prompt( "Enter result (1=pass,2=fail)", "0" ); 24 if ( result == "1" ) passes = passes + 1; else failures = failures + 1; 29 student = student + 1; } 32 Analysis.html The while loop will continue until the value of student is 10 meaning 10 results were entered. Entering a 1 into the prompt dialog means the student passed the exam. A value of 2 means the student failed. If a value of 1 was entered, the value of passes is incremented by one, otherwise, failures is incremented.
13
// termination phase document.writeln( "<h1>Examination Results</h1>" ); document.writeln( "Passed: " + passes + "<br />Failed: " + failures ); 37 if ( passes > 8 ) document.writeln( "<br />Raise Tuition" ); // --> </script> 42 </head> <body> <p>Click Refresh (or Reload) to run the script again</p> </body> 47 </html> Analysis.html If more than 8 students passed the exam, the program says to “Raise Tuition”.
14
Program Output
15
Increment and Decrement Operators
16
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 8.14: increment.html > 6 <!-- Preincrementing and Postincrementing --> 7 8 <html xmlns = " <head> <title>Preincrementing and Postincrementing</title> 11 <script type = "text/javascript"> <!-- var c; 15 c = 5; document.writeln( "<h3>Postincrementing</h3>" ); document.writeln( c ); // print 5 // print 5 then increment document.writeln( "<br />" + c++ ); document.writeln( "<br />" + c ); // print 6 22 c = 5; document.writeln( "<h3>Preincrementing</h3>" ); document.writeln( c ); // print 5 // increment then print 6 document.writeln( "<br />" + ++c ); document.writeln( "<br />" + c ); // print 6 // --> </script> 31 </head><body></body> 33 </html> Increment.html Postincrementing the variable will print the variable and then increment the value by one. Preincrementing the variable will increment the value by one and then print the value.
17
Program Output
18
Note on Data Types
19
JavaScript: Control Structures II
20
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.
21
Program Output
22
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
23
Program Output
24
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 Components of a typical for structure header.
25
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. Flowcharting a typical for repetition structure.
26
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.
27
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.
28
Interest.html Program Output
36 </head><body></body> 38 </html> Interest.html Program Output
29
Program Output
Similar presentations
