JavaScript Control Structures

Transcript JavaScript Control Structures

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
g rad e >= 60
true
print “ Passed”
false
Flowcharting the single-selection if structure.
3
if/else Selection Structure
false
print “Failed”
grade >= 60
true
print “Passed”
Flowcharting the double-selection if/else structure.
4
Counter-Controlled Repetition
product <= 1000
true
product = 2 * product
false
Flowcharting the while repetition structure.
5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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


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

-->
The while loop will continue until the value of
"http://www.w3.org/1999/xhtml">
student is 10 meaning 10 results were entered.
<html xmlns =
<head>
<title>Analysis of Examination Results</title>
Entering a 1 into the prompt dialog means the
<script type = "text/javascript">
<!-student passed the exam. A value of 2 means the
// initializing variables in declarations
student failed.
var passes = 0,
// number of passes
failures = 0,
// number of failures
student = 1,
// student counter
result;
// one exam result
// process 10 students; counter-controlled loop
while ( student <= 10 ) {
result = window.prompt(
If a value of 1 was
"Enter result (1=pass,2=fail)", "0" );
if ( result == "1" )
passes = passes + 1;
else
failures = failures + 1;
entered, the value of passes
is incremented by one, otherwise, failures is
incremented.
student = student + 1;
}
11
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// termination phase
document.writeln( "<h1>Examination Results</h1>" );
document.writeln(
"Passed: " + passes + "<br />Failed: " + failures );
Analysis.html
if ( passes > 8 )
document.writeln( "<br />Raise Tuition" );
// -->
</script>
If more than 8 students passed the
</head>
<body>
says to “Raise Tuition”.
<p>Click Refresh (or Reload) to run the script again</p>
</body>
</html>
exam, the program
12
Program Output
13
Increment and Decrement Operators
Assig nm e nt
o p e ra to r
Initia l va lue o f va ria b le
Sa m p le
e xp re ssio n
Exp la na tio n
Assig ns
+=
c = 3
c += 7
c = c + 7
10 to c
-=
*=
/=
%=
Fig. 8.12 Arithm e tic
d = 5
d
e
f
g
d
e
f
g
1 to d
e = 4
f = 6
g = 12
-=
*=
/=
%=
4
5
3
9
=
=
=
=
d
e
f
g
*
/
%
4
5
3
9
20 to e
2 to f
3 to g
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Increment.html
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Preincrementing and Postincrementing</title>
<script type = "text/javascript">
<!-var c;
Postincrementing the variable will print the
variable and then increment the value by one.
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
c = 5;
document.writeln(
document.writeln(
// increment then
document.writeln(
document.writeln(
// -->
</script>
Preincrementing the variable will increment the
value by);
one and then print the value.
"<h3>Preincrementing</h3>"
c );
// print 5
print 6
"<br />" + ++c );
"<br />" + c );
// print 6
</head><body></body>
</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

JavaScript Control Structures

Transcript JavaScript Control Structures

Directory