Chapter 8 JavaScript: Control Statements I
Download
Report
Transcript Chapter 8 JavaScript: Control Statements I
JavaScript: Control Statements I
Internet & World Wide Web:
1
Fall 2008
Yanjun Li
CSRU2350
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
add grade to total
add 1 to counter
2
Fall 2008
total = total + grade;
counter = counter + 1 ;
Yanjun Li
CSRU2350
Boolean Expression
Using Equality Operators
–
–
Using Relational Operators
–
–
–
–
3
x = = y
x != y
x
x
x
x
> y
< y
>= y
<= y
The value of the expression is either true or false
Fall 2008
Yanjun Li
CSRU2350
if Selection Statement (1)
Indicate action only when the condition
evaluates to true
JavaScript Format:
if ( boolean expression )
grade >= 60
statement;
Example:
true
print “Passed”
false
if (grade>= 60)
document.writeln(“Passed”);
4
Fall 2008
Yanjun Li
CSRU2350
if Selection Statement (2)
Multiple actions are performed when the condition is true
JavaScript Format:
if ( boolean expression )
{
statementOne;
statementTwo;
:
}
5
Example:
if (grade>= 60)
{
document.writeln("<h1 style=\"color:red\">" +
"Congratulations!</h1>");
document.writeln("<h2> You Passed!</h2>");
}
Fall 2008
Yanjun Li
CSRU2350
if…else Selection Statement (1)
Indicate different actions to be perform when
condition is true or false
false
grade >= 60
print “Failed”
6
true
print “Passed”
Fall 2008
Yanjun Li
CSRU2350
if…else Selection Statement (2)
JavaScript Format:
if ( boolean expression )
statement;
else
statement;
JavaScript Example :
if ( grade >= 60 )
document.writeln(“Passed”);
else
document.writeln(“Failed”);
7
Fall 2008
Yanjun Li
CSRU2350
if…else Selection Statement (3)
Multiple actions
JavaScript Format :
if ( boolean expression )
{
statementOne;
statementTwo;
:
}else
{
statementThree;
statementFour;
:
}
8
Fall 2008
Yanjun Li
CSRU2350
while Repetition Statement (1)
Repetition structure (loop)
–
Repeat action while some condition remains
true.
product <= 1000
true
product =
2 * product
false
9
Fall 2008
Yanjun Li
CSRU2350
while Repetition Statement (2)
JavaScript Format :
initialization;
while ( boolean expression )
{
statement;
update;
}
10
Fall 2008
JavaScript Example :
var product=2;
while ( product <= 1000 )
{
document.writeln(product);
product = 2 * product;
}
Yanjun Li
CSRU2350
Counter-Controlled Repetition
Counter-controlled repetition
–
Counter
–
11
Control the number of times a set of statements
executes
Definite repetition
Fall 2008
Yanjun Li
CSRU2350
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
<!-- Fig. 8.7: average.html -->
6
<!-- Class Average Program
-->
7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
11
12
average.html
(1 of 3)
<title>Class Average Program</title>
<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
12
Fall 2008
Yanjun Li
CSRU2350
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
average.html
(2 of 3)
// add gradeValue to total
33
total = total + gradeValue;
34
35
// add 1 to gradeCounter
36
gradeCounter = gradeCounter + 1;
37
38
}
39
40
// Termination Phase
41
average = total / 10;
// calculate the average
42
43
// display average of exam grades
44
document.writeln(
45
13
"<h1>Class average is " + average + "</h1>" );
46
// -->
47
</script>
Fall 2008
Yanjun Li
CSRU2350
48
49
</head>
50
<body>
51
52
<p>Click Refresh (or Reload) to run the script again<p>
</body>
53 </html>
14
Fall 2008
Yanjun Li
CSRU2350
Sentinel-Controlled Repetition
Indefinite repetition
–
15
Sentinel value
Fall 2008
Yanjun Li
CSRU2350
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
<!-- Fig. 8.9: average2.html
-->
6
<!-- Sentinel-controlled Repetition -->
7
8
9
10
11
12
13
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
average2.html
(1 of 3)
<title>Class Average Program:
Sentinel-controlled Repetition</title>
<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
22
total = 0;
// clear total
23
gradeCounter = 0;
// prepare to loop
24
16
Fall 2008
Yanjun Li
CSRU2350
25
// Processing phase
26
// prompt for input and read grade from user
27
grade = window.prompt(
"Enter Integer Grade, -1 to Quit:", "0" );
28
29
30
// convert grade from a string to an integer
31
gradeValue = parseInt( grade );
32
33
while ( gradeValue != -1 ) {
average2.html
(2 of 3)
34
// add gradeValue to total
35
total = total + gradeValue;
36
37
// add 1 to gradeCounter
38
gradeCounter = gradeCounter + 1;
39
40
// prompt for input and read grade from user
41
grade = window.prompt(
"Enter Integer Grade, -1 to Quit:", "0" );
42
43
44
// convert grade from a string to an integer
45
gradeValue = parseInt( grade );
46
}
47
17
Fall 2008
Yanjun Li
CSRU2350
48
// Termination phase
49
if ( gradeCounter != 0 ) {
average = total / gradeCounter;
50
51
52
// display average of exam grades
53
document.writeln(
"<h1>Class average is " + average + "</h1>" );
54
55
}
56
else
document.writeln( "<p>No grades were entered</p>" );
57
58
// -->
59
</script>
60
average2.html
(3 of 3)
</head>
61
62
63
64
<body>
<p>Click Refresh (or Reload) to run the script again</p>
</body>
65 </html>
18
Fall 2008
Yanjun Li
CSRU2350
19
Fall 2008
Yanjun Li
CSRU2350
Note on Data Types
Loosely typed
–
20
Automatically converts between values of
different types
Fall 2008
Yanjun Li
CSRU2350
8.14 Web Resources
21
www.javascriptmall.com
developer.netscape.com/tech/javascript
www.mozilla.org/js/language
Fall 2008
Yanjun Li
CSRU2350
Reference
22
Reproduced from the PowerPoints for
Internet & World Wide Web How to
Program, 3e by Deitel, Deitel and
Goldberg © 2004.
Reproduced by permission of Pearson
Education, Inc.
Fall 2008
Yanjun Li
CSRU2350