JavaScript Control Statements I

IPA
1st
Semester, 2007-2008
Internet 1
Ch. 9
JavaScript:
Control Statements I
attasr@ipa.edu.sa

09/30/15 © Reem Al-Attas 2
Introduction
Writing a script
 Thorough understanding of problem
 Carefully planned approach
 Understand the types of building blocks that are
available
 Employ proven program-construction principles

Algorithms
Actions to be executed
Order in which the actions are to be
executed

Pseudocode
Artificial
Informal
Helps programmers develop algorithms

Flowchart
 Graphical representation of algorithm or portion
of algorithm
 Flowlines
 Indicate the order the actions of the algorithm execute
 Parallelogram
 Input / Output
 Rectangle symbol
 Process
 Oval symbol
 Start / End
 Diamond symbol
 Indicates a decision is to be made
 Small circle symbol
 A portion of algorithm

Flowchart
add grade to total total = total + grade;
add 1 to counter counter = counter + 1;

Control Structures
 Sequential execution
 Statements execute in the order they are written
 Transfer of control
 Next statement to execute may not be the next one in sequence
 Three control structures
 Sequence structure
 Selection structure
 if
 if…else
 switch
 Repetition structure
 while
 do…while
 for
 for…in

if Selection Statement
Indicate action only when the condition
evaluates to true

if Selection Statement
grade >= 60
true
false
print “Passed”
Fig. 8.3 Flowcharting the single-selection if statement.

if…else Selection Statement
Indicate different actions to be perform
when condition is true or false
Conditional operator (?:)
 JavaScript’s only ternary operator
 Three operands
 Forms a conditional expression

if…else Selection Statement
grade >= 60 true
print “Failed”
false
print “Passed”
Fig. 8.4 Flowcharting the double-selection if…else statement.

while Repetition Statement
Repetition structure (loop)
 Repeat action while some condition remains
true

while Repetition Statement
product <= 1000 product = 2 * product
true
false
Fig. 8.5 Flowcharting the while repetition statement.

Formulating Algorithms:
Case Study 1 (Counter-
Controlled Repetition)
Counter-controlled repetition
 Counter
 Control the number of times a set of statements
executes
 Definite repetition

average.html
(1 of 3)
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 
6 
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Class Average Program</title>
11
12 <script type = "text/javascript">
13 <!--
14 var total, // sum of grades
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
21 total = 0; // clear total
22 gradeCounter = 1; // prepare to loop
23

average.html
(2 of 3)
24 // Processing Phase
25 while ( gradeCounter <= 10 ) { // loop 10 times
26
27 // prompt for input and read grade from user
28 grade = window.prompt( "Enter integer grade:", "0" );
29
30 // convert grade from a string to an integer
31 gradeValue = parseInt( grade );
32
33 // add gradeValue to total
34 total = total + gradeValue;
35
36 // add 1 to gradeCounter
37 gradeCounter = gradeCounter + 1;
38 }
39
40 // Termination Phase
41 average = total / 10; // calculate the average
42
43 // display average of exam grades
44 document.writeln(
45 "<h1>Class average is " + average + "</h1>" );
46 // -->
47 </script>

48
49 </head>
50 <body>
51 <p>Click Refresh (or Reload) to run the script again<p>
52 </body>
53 </html>

Formulating Algorithms with
Top-Down, Stepwise
Refinement: Case Study 2
(Sentinel-Controlled Repetition)
Indefinite repetition
 Sentinel value

average2.html
(1 of 3)
4
5 
6 
7
9 <head>
10 <title>Class Average Program:
11 Sentinel-controlled Repetition</title>
12
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
22 total = 0; // clear total
23 gradeCounter = 0; // prepare to loop
24

average2.html
(2 of 3)
25 // Processing phase
27 grade = window.prompt(
28 "Enter Integer Grade, -1 to Quit:", "0" );
29
32
33 while ( gradeValue != -1 ) {
34 // add gradeValue to total
35 total = total + gradeValue;
36
37 // add 1 to gradeCounter
38 gradeCounter = gradeCounter + 1;
39
41 grade = window.prompt(
42 "Enter Integer Grade, -1 to Quit:", "0" );
43
46 }
47

average2.html
(3 of 3)
48 // Termination phase
49 if ( gradeCounter != 0 ) {
50 average = total / gradeCounter;
51
52 // display average of exam grades
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>

Formulating Algorithms with
Top-Down, Stepwise
Refinement: Case Study 3
(Nested Control Structures)
Consider problem
Make observations
Top-down, stepwise refinement

analysis.html
(1 of 2)
4
5 
6 
7
9 <head>
10 <title>Analysis of Examination Results</title>
11
13 <!--
14 // initializing variables in declarations
15 var passes = 0, // 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(
23 "Enter result (1=pass,2=fail)", "0" );
24

analysis.html
(2 of 2)
25 if ( result == "1" )
26 passes = passes + 1;
27 else
28 failures = failures + 1;
29
30 student = student + 1;
31 }
32
33 // termination phase
34 document.writeln( "<h1>Examination Results</h1>" );
36 "Passed: " + passes + "<br />Failed: " + failures );
37
38 if ( passes > 8 )
39 document.writeln( "<br />Raise Tuition" );
40 // -->
41 </script>
42
43 </head>
44 <body>
45 <p>Click Refresh (or Reload) to run the script again</p>
46 </body>
47 </html>

Assignment Operators
Compound assignment operators
 Abbreviate assignment expressions

Assignment Operators
Assignment
operator
Initial
value of
variable
Sample
expression
Explanation Assigns
+= 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 Arithmetic assignment operators.

Increment and Decrement
Operators
Preincrement or predecrement operator
 Increment or decrement operator placed before
a variable
Postincrement or postdecrement operator
 Increment or decrement operator placed after a
variable

Operators
Operator Called Sample
expression
Explanation
++ 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 increment and decrement operators.

increment.html
(1 of 2)
4
5 
6 
7
9 <head>
10 <title>Preincrementing and Postincrementing</title>
11
13 <!--
14 var c;
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;
24 document.writeln( "<h3>Preincrementing</h3>" );
25 document.writeln( c ); // print 5

increment.html
(2 of 2)
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>

Operators
Operator Associativity Type
++ -- right to left unary
* / % left to right multiplicative
+ - left to right additive
< <= > >= left to right relational
== != left to right equality
?: right to left conditional
= += -= *= /= %= right to left assignment
Fig. 8.15 Precedence and associativity of the operators
discussed so far.

Note on Data Types
Loosely typed
 Automatically converts between values of
different types

Assignment 6
 1) Repeat Ex # 7.26
-solved before- using
Loops.
 2) Exercise # 8.13 in
the text book.
Due Date for A# 5&6:
 Monday before your
lecture.

JavaScript Control Statements I

In this document