CS1113 Web Programming
Lecture 13
Flow Control & Loops
2
Today’s Lecture:
Flow Control & Loops
• We’ll try to understand the concept of flow
control using the “if” and “switch” structures
• And also the concept behind the “while” and
“for” looping structures
• We will solve simple problems using flow
Flow
4
Select between alternate courses of action
depending upon the evaluation of a condition
statement block 1
condition
True False
JavaScript Flow Control Structures
if … else
6
if: Example 1
if ( day == “Sunday” ) mood = “Cool” ;
Set the value of the variable ‘mood to ‘Cool’ if the ‘day’ is equal to ‘Sunday’
The condition enclosed in
This was the case if we want to
execute a
single statement
given that
the condition is true
8
if: Example 2
if ( day == “Sunday” ) { mood = “Cool” ;
emotion = “Great” ; clothing = “Casual” ; }
Set the value of the variable ‘mood to ‘Cool’, ‘emotion’ to ‘Great’, and ‘clothing’ to ‘casual’ if the ‘day’ is equal to ‘Sunday’
if: Example 2
if ( day == “Sunday” ) { mood = “Cool” ;
emotion = “Great” ; clothing = “Casual” ;
} Note: No semicolon
10
Compound Statements
1. At times, we need to put multiple statements at places where JavaScript expects only one
2. For those situations, JavaScript provides a
Compound Statements
3. This is done simply by enclosing any number of statements within curly braces, { }
4. NOTE: Although the statements within the block end in semicolons, the block itself
12
if: Example 3
if ( (day == “Sunday”) || (day == “Saturday”) ) { mood = “Cool” ;
if: Example 4
weekend = ( day == “Sunday” ) || ( day == “Saturday” ) ;
if ( weekend ) { mood = “Cool” ;
emotion = “Great” ; clothing = “Casual” ;
14
We now know how to execute a
statement or a
block of statements
given that the condition is true
What if we want to include an
alternate
action as well,
i.e. a statement or a
if … else: Example 1
if ( GPA >= 2.5 ) akash = “Pass” ; else
16
if … else: Example 2
if ( GPA >= 2.5 ) { akash = “Pass” ; }
else
if … else: Example 3
if ( GPA >= 2.5 ) { akash = “Pass” ; mood = “Great” ; }
else
18
if … else: Example 4
if ( GPA >= 2.5 ) { akash = “Pass” ; mood = “Great” ; }
else {
akash = “Fail” ;
if … else: Example 5
if ( grade == “A” ) points = 4.0 ; if ( grade == “B” )
points = 3.0 ; if ( grade == “C” )
points = 2.0 ;
if ( grade == “D” ) What can we do to
This piece of code is
correct, but not very
20
Nested
if … else
if … else:
Example 6
if ( grade == “A” )
points = 4.0 ; else {
if ( grade == “B” )
points = 3.0 ; else {
if ( grade == “C” )
points = 2.0 ; else {
if ( grade == “D” )
22
JavaScript Flow Control Structures
if … else
switch:
Example 1
switch ( grade ) { case “A” :
points = 4.0 ; break ;
case “B” :
points = 3.0 ; break ;
case “C” :
points = 2.0 ; break ;
case “D” :
points = 1.0 ;
The expression enclosed in parentheses is evaluated and matched with case labels This is a
24
switch: Example 2
switch ( inquiry ) { case “apple” :
document.write( “Apples are Rs 50/kg” ) ;
break ;
case “mangos” :
document.write( “Mangos are Rs 90/kg” ) ;
break ;
case “grapes” :
document.write( “Grapes are Rs 60/kg” ) ;
break ;
default :
?
if … else
26
if…else --?-- switch
• If the action to be taken of the value of a
single variable (or a single expression), use ‘switch’
• When the action depends on the values
if … else: Example 7
if ( ( GPA >= 2.5 ) && ( attendance >= 75 ) ) akash = “Pass” ;
else {
if ( ( GPA >= 2.0 ) && ( attendance >= 36 ) ) akash = “Probation” ;
28
Loop through a set of statements
as long as a condition is true
condition True
30
JavaScript’s Looping Structures
while
for
…
x =
75
; //
x is the decimal number
y = “” ; //
y is the binary equivalent
while (
x
>
0
) {
remainder
=
x
%
2
;
quotient
= Math.floor(
x
/
2
) ;
y
=
remainder
+
y
;
x
=
quotient
;
Decimal to Binary Conversion in JavaScript
32
while: Example 2
while (
tankIsFull
==
false
) {
tank
=
tank
+
bucket
;
}
while: Example 3
x
=
1
;
while (
x
<
6000
) {
document.write (
x
) ;
34
JavaScript’s Looping Structures
while
for
…
for: Example 1
x
=
1
;
while (
x
<
6000
)
{
document.write (
x
) ;
x
=
x
+
1
;
}
for (
x
=
1
;
x
<
6000
;
x
=
x
+
1
) {
document.write (
x
) ;
36
for: Description (1)
1. The ‘for’ loop starts by initializing the counter variable (which in this case is x)
2. The initial value in this case is ‘1’, but can be any other positive or negative number as well
for: Description (2)
4. After reaching the end of that iteration, the ‘for’ loop goes to the top once again, performs the operation, checks the condition
5. If the condition evaluates to a ‘false’ value, the ‘for’ loop finishes looping
38
for: Example 2
for (
x
=
99
;
x
<
6000
;
x
=
x
+
1
) {
document.write (
x
) ;
for: Example 3
for (
x
=
6000
;
x
>
0
;
x
=
x
-
1
) {
document.write (
x
) ;
}
How many
40
for: Example 4
for (
x
=
6000
;
x
<
0
;
x
=
x
-
1
) {
document.write (
x
) ;
}
How many
iterations would this ‘for’ loop
42
for --?-- while
• When the exact number of iterations is
known, use the ‘for’ loop
• When the number of iterations depend
‘for’ loops become
especially useful
when used
in conjunction with arrays
44
During Today’s Lecture …
• We discussed the concept of flow control using
the “if” and “switch” structures
• And also the concept behind the “while” and
“for” looping structures
• We also solved simple problems using flow
