Scribd
Upload
10 views

Lecture 9

The document discusses JavaScript control structures including if/else statements, while loops, and counter-controlled repetition. It provides examples of using these structures to calculate a class average based on student grades and analyze exam results by tracking the number of passes and failures.

Uploaded by

myturtle game01
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Lecture 9

The document discusses JavaScript control structures including if/else statements, while loops, and counter-controlled repetition. It provides examples of using these structures to calculate a class average based on student grades and analyze exam results by tracking the number of passes and failures.

Uploaded by

myturtle game01
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

JavaScript: Control Structures

1
Control Structures

a dd grade to total total = total + grade;

add 1 to c ounter counter = counter + 1;

Flowcharting JavaScript’s sequence structure.

2
if/else Selection Structure

true
g rad e >= 60 print “ Passed”

false

Flowcharting the single-selection if structure.

3
if/else Selection Structure

false grade >= 60 true

print “Failed” print “Passed”

Flowcharting the double-selection if/else structure.

4
Counter-Controlled Repetition

true
product <= 1000 product = 2 * product

false

Flowcharting the while repetition structure.

5
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- average.html --> Average.html
6 <!-- Class Average Program -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Class Average Program</title>
11 The while loop will execute the statements in
12 <script type = "text/javascript">
the body of the loop until the value of
13 <!--
14 var total, gradeCounter
// sum of grades equals 10.
15 gradeCounter, // number of grades entered
16 gradeValue, // grade value
17 average, // average of all grades
18 grade; // grade typed by user
19
20 // Initialization Phase Prompt for the user input a grade.
21 total = 0; // clear total
22 gradeCounter = 1; // prepare to loop
23
24 // Processing Phase
25 while ( gradeCounter <= 10 ) { // loop 10 times
26
27 Convert
// prompt for input and read gradeinput
fromtouser
an integer.
28 grade = window.prompt( "Enter integer grade:", "0" );
29
30 // convert grade from a string to an integer
31 gradeValue = parseInt( grade );
32 Add new grade to total.
33 // add gradeValue to total
34 total = total + gradeValue;
35 6
36 // add 1 to gradeCounter
37 gradeCounter = gradeCounter + 1;
38 }
39 Increment the counter.
40 // Termination Phase Average.html
41 average = total / 10; // calculate the average
42
43 // display average of examCalculate
grades the average of the grades
44 document.writeln(
input by the user.
45 "<h1>Class average is " + average + "</h1>" );
46 // -->
47 </script>
48 Write the result to the XHTML
49 </head> document.
50 <body>
51 <p>Click Refresh (or Reload) to run the script again<p>
52 </body>
53 </html>

This d ialog is d isp layed 10 times. Program Output


User input is 100, 88, 93, 55, 68, 77,
83, 95, 73 and 62.

7
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Average2.html --> Average2.html
6 <!-- Sentinel-controlled Repetition -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Class Average Program:
11 Sentinel-controlled Repetition</title>
12
13 <script type = "text/javascript">
14 <!--
15 var gradeCounter, // number of grades entered
16 gradeValue, // grade value
17 total, // sum of grades
18 average, // average of all grades
19 grade; // grade typed by user
20
21 // Initialization phase
Prompt for the user to enter a grade, -1 to end.
22 total = 0; // clear total
23 gradeCounter = 0; // prepare to loop
24
25 // Processing phaseThe while loop will continue until the user input
26 // prompt for inputequals
and read
–1. grade from user
27 grade = window.prompt(
28 "Enter Integer Grade, -1 to Quit:", "0" );
29
30 // convert grade from a string to an integer
31 gradeValue = parseInt( grade );
32
33 while ( gradeValue != -1 ) {
34 // add gradeValue to total
35 total = total + gradeValue; 8
36
37 // add 1 to gradeCounter
38 gradeCounter = gradeCounter + 1;
39
40 // prompt for input and read grade from user Average2.html
41 grade = window.prompt(
42 "Enter Integer Grade, -1 to Quit:", "0" );
43
44 // convert grade fromEach
a string to of
iteration anthe
integer
loop willopen a prompt dialog
45 gradeValue = parseInt( grade );
46 } allowing the user to input another grade.
47
48 // Termination phase
49 if ( gradeCounter != 0 ) {
50 average = total / gradeCounter;
51
52 // display average of exam grades
53 document.writeln(
54 "<h1>Class average is " + average + "</h1>" );
55 }
56 else
57 document.writeln( "<p>No grades were entered</p>" );
58 // -->
59 </script>
60 </head>
61
62 <body>
63 <p>Click Refresh (or Reload) to run the script again</p>
64 </body>
65 </html>

9
Program Output
This d ia lo g is disp la yed four tim es.
User input is 97, 88, 72 and –1.

10
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- analysis.html --> Analysis.html
6 <!-- Analyzing Exam Results -->
7 The while loop will continue until the value of
8 <html xmlns = student is 10 meaning 10 results were entered.
"http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Analysis of Examination Results</title>
11
12 <script type = "text/javascript"> Entering a 1 into the prompt dialog means the
13 <!-- student passed the exam. A value of 2 means the
14 // initializing variables in declarations
15 var passes = 0, student failed.
// number of passes
16 failures = 0, // number of failures
17 student = 1, // student counter
18 result; // one exam result
19
20 // process 10 students; counter-controlled loop
21 while ( student <= 10 ) {
22 result = window.prompt( If a value of 1 was entered, the value of passes
23 "Enter result (1=pass,2=fail)", "0" );
24 is incremented by one, otherwise, failures is
25 if ( result == "1" ) incremented.
26 passes = passes + 1;
27 else
28 failures = failures + 1;
29
30 student = student + 1;
31 }
32

11
33 // termination phase
34 document.writeln( "<h1>Examination Results</h1>" );
35 document.writeln(
36 "Passed: " + passes + "<br />Failed: " + failures );
37 Analysis.html
38 if ( passes > 8 )
39 document.writeln( "<br />Raise Tuition" );
40 // -->
41 </script>
42
43 </head> If more than 8 students passed the exam, the program
44 <body> says to “Raise Tuition”.
45 <p>Click Refresh (or Reload) to run the script again</p>
46 </body>
47 </html>

12
Program Output

13
Increment and Decrement Operators

Assig nm e nt Initia l va lue o f va ria b le Sa m p le Exp la na tio n Assig ns


o p e ra to r e xp re ssio n
+= c = 3 c += 7 c = c + 7 10 to c

-= d = 5 d -= 4 d = d - 4 1 to d
*= e = 4 e *= 5 e = e * 5 20 to e
/= f = 6 f /= 3 f = f / 3 2 to f
%= g = 12 g %= 9 g = g % 9 3 to g
Fig. 8.12 Arithm e tic a ssig nm e nt o p e ra to rs.

Op e ra to r C a lle d Sa m p le e xp re ssio n Exp la na tio n


++ preincrement ++a Increment a by 1, then use the new value of a in the
expression in which a resides.

++ postincrement a++ Use the current value of a in the expression in which a


resides, then increment a by 1.
-- predecrement --b Decrement b by 1, then use the new value of b in the
expression in which b resides.
-- postdecrement b-- Use the current value of b in the expression in which b
resides, then decrement b by 1.
Fig. 8.13 inc re m e nt a nd d e c re m e nt o p e ra to rs.

14
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- increment.html --> Increment.html
6 <!-- Preincrementing and Postincrementing -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Preincrementing and Postincrementing</title>
11
12 <script type = "text/javascript">
13 <!-- Postincrementing the variable will print the
14 var c; variable and then increment the value by one.
15
16 c = 5;
17 document.writeln( "<h3>Postincrementing</h3>" );
18 document.writeln( c ); // print 5
19 // print 5 then increment
20 document.writeln( "<br />" + c++ );
21 document.writeln( "<br />" + c ); // print 6
22
23 c = 5; Preincrementing the variable will increment the
24 document.writeln( value by);
"<h3>Preincrementing</h3>" one and then print the value.
25 document.writeln( c ); // print 5
26 // increment then print 6
27 document.writeln( "<br />" + ++c );
28 document.writeln( "<br />" + c ); // print 6
29 // -->
30 </script>
31
32 </head><body></body>
33 </html>

15
Program Output

16
Split()

The split method is a handy way to


"split" a string into two or more
parts based on a character that
divides the parts.

The character that divides the parts


could be many things -- a comma,
a slash, a symbol ( | ), or another
of your choice.
17
Split() example

<SCRIPT language=“JavaScript”>
function divide_string() {
var where_is_mytool="home/mytool/mytool.cgi";
var mytool_array=where_is_mytool.split(“/”);
alert(mytool_array[0]+” “+mytool_array[1]+” “+mytool_array[2]);
}
</SCRIPT>
<FORM>
<INPUT TYPE=“button”
onClick=“divide_string()” value=“Go!”>
</FORM>

Split.html 18
End of Lecture

• Next time, more JavaScript!

19

You might also like