Scribd
Upload
12 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 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
We take content rights seriously. If you suspect this is your content, claim it here.
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