CS101 Introduction to Computing

Lecture 23
Flow Control & Loops
(Web Development Lecture 8)

1
During the last lecture we had a discussion
on Data Types, Variables & Operators
• We found out about JavaScript data types

• About variables and literals

• We also discussed several operators

supported by JavaScript

2
 JavaScript Data Types
• JavaScript recognizes & distinguishes among
the following types of values:

– Numbers

– Booleans

– Strings

– Undefined

3
 Variables
• Variables give us the ability to manipulate data
through reference instead of actual value

• Variables are containers that hold values

4
 Declaring Variables
Although JavaScript allows variable
declaration, it does not require it - except in
the case when we want to declare a variable
being local (more on local variables later in
the course!)

5
JavaScript Variables are Dynamically Typed

Any variable in JavaScript can hold any

type of value, and the that type can change
midway through the program

6
 JavaScript Operators
JavaScript has numerous operators, classified
in many categories. We will look at only a few
of them belonging to the following categories:
– Assignment operators
– Arithmetic operators
– Comparison operators
– Logical operators
– String operators

7
 comments let
the code speak
for itself!
8
Decimal to Binary Conversion in JavaScript
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 ;
}
document.write( “y = ” + y ) ; 9
 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

control and loop structures
10
 Flow
Control
11
 Select between alternate courses of action
depending upon the evaluation of a condition

True False
condition

statement statement
block 1 block 2

12
JavaScript Flow Control Structures

if … else

switch

13
 if: Example 1

if ( day == “Sunday” )
bhola = “Cool” ;

The condition
enclosed in
parentheses semicolon
Set the value of the variable
‘bhola to ‘Cool’ if the ‘day’ is
equal to ‘Sunday’
14
This was the case if we want to
execute a single statement given that
the condition is true

What if we want to execute multiple

statements in case the condition is
true?

15
 if: Example 2
if ( day == “Sunday” ) {
bhola = “Cool” ;
mood = “Great” ;
clothing = “Casual” ;
} These curly braces
group the multiple
statements into a
single compound
Set the value of the variable ‘bhola to ‘Cool’, ‘mood’
statement
to ‘Great’, and ‘clothing’ to ‘casual’ if the ‘day’ is
equal to ‘Sunday’
16
 if: Example 2
if ( day == “Sunday” ) {
bhola = “Cool” ;
mood = “Great” ;
clothing = “Casual” ;
}
Note: No semicolon
after the closing
curly brace
Set the value of the variable ‘status’ to ‘Cool’, ‘mood’
to ‘Great’, and ‘clothing’ to ‘casual’ if the ‘day’ is
equal to ‘Sunday’
17
 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

way of grouping a number of statements into a
single statement, called a “statement block”

18
 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
doesn’t

19
 if: Example 3
if ( (day == “Sunday”) || (day == “Saturday”) ) {
bhola = “Cool” ;
mood = “Great” ;
clothing = “Casual” ;
}

20
 if: Example 4

weekend = ( day == “Sunday” ) || ( day ==

“Saturday” ) ;
What is the
data type of
if ( weekend ) { the variable
bhola = “Cool” ; “weekend”?
mood = “Great” ;
clothing = “Casual” ;
}
21
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
block of statements to be executed in
case the condition in not true

22
if … else: Example 1

if ( GPA >= 1.0 )

bhola = “Pass” ;
else
bhola = “Fail” ;

23
if … else: Example 2

if ( GPA >= 1.0 ) {

bhola = “Pass” ;
}
else
bhola = “Fail” ;

24
if … else: Example 3

if ( GPA >= 1.0 ) {

bhola = “Pass” ;
mood = “Great” ;
}
else
bhola = “Fail” ;

25
if … else: Example 4

if ( GPA >= 1.0 ) {

bhola = “Pass” ;
mood = “Great” ;
}
else {
bhola = “Fail” ;
mood = “Terrible” ;
}

26
if … else: Example 5
if ( grade == “A” )
points = 4.0 ; This piece of
if ( grade == “B” ) code is
points = 3.0 ; correct, but
if ( grade == “C” ) not very
points = 2.0 ; efficient!
if ( grade == “D” )
What can we
points = 1.0 ;
do to
if ( grade == “F” )
improve it?
points = 0.0 ;
27
Nested
if … else
Structures

28
if ( grade == “A” )
points = 4.0 ;
if … else:
else { Example 6
if ( grade == “B” )
points = 3.0 ;
else {
if ( grade == “C” )
points = 2.0 ;
else {
if ( grade == “D” )
points = 1.0 ;
else
points = 0.0 ;
}
}
29
}
JavaScript Flow Control Structures

if … else

switch

30
switch ( grade ) {
A colon switch:
case “A” :
points = 4.0 ; following Example 1
break ; the case
case “B” : label is
The expression
points = 3.0 ; required
enclosed in
break ; parentheses is
case “C” : evaluated and
points = 2.0 ; This is a
case label matched with
break ; case labels
case “D” :
points = 1.0 ; This ‘break’
break ; statement is the
default : exit The
point‘default’ statement
points = 0.0 ; acts like the ‘else’31clause
} in the ‘if…else’ structure
switch ( inquiry ) {
switch: Example 2
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 :
document.write( inquiry + “? Please retry!” ) ;
} 32
 ?
if … else

switch
33
 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

of multiple variables (or expressions),
use the ‘if...else’ structure

34
 if … else: Example 7

if ( ( GPA >= 1.0 ) && ( attendance >= 40 ) )

bhola = “Pass” ;
else {
if ( ( GPA >= 2.0 ) && ( attendance >= 36 ) ) bhola =
“Probation” ;
else
bhola = “Fail” ;
}

35
Loops
36
Loop through a set of statements
as long as a condition is true

statement True
condition
block
False

37
JavaScript’s Looping Structures

while

for

38
Decimal to Binary Conversion in JavaScript
The condition
x = 75 ; // x is the decimal number
enclosed in
y = “” ; // y is the binary equivalent
parentheses
while ( x > 0 ) {
remainder = x % 2 ;
quotient = Math.floor( x / 2 ) ;
y = remainder + y ;
x = quotient ;
}
document.write( “y = ” + y ) ; 39
 while: Example 2

while ( tankIsFull == false ) {

tank = tank + bucket ;
}

document.write ( “Tank is full now” ) ;

40
 while: Example 3

x=1;
while ( x < 6000 ) {
document.write ( x ) ;
x=x+1;
}

41
JavaScript’s Looping Structures

while

for

42
 for: Example 1

x=1;
Initial count
while ( x < 6000 ) {Condition Operation
document.write ( x ) ;
x=x+1;
} for ( x = 1 ; x < 6000 ; x = x + 1 ) {
document.write ( x ) ;
}
43
 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

3. Next the ‘for’ loop checks the condition. If the

condition evaluates to a ‘true’ value, the ‘for’
loop goes through the loop once

44
 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

6. Otherwise, the ‘for’ loop goes through the loop

once again

7. Repeat from step 4 45

 for: Example 2

for ( x = 99 ; x < 6000 ; x = x + 1 ) {

document.write ( x ) ;
}

46
 for: Example 3

for ( x = 6000 ; x > 0 ; x = x - 1 ) {

document.write ( x ) ;
}
How many
iterations would
this ‘for’ loop
run for?

6000? 47
 for: Example 4

for ( x = 6000 ; x < 0 ; x = x - 1 ) {

document.write ( x ) ;
}
How many
iterations would
this ‘for’ loop
run for?

None? 48
?
for

while
49
 for --?-- while
• When the exact number of iterations is
known, use the ‘for’ loop

• When the number of iterations depend

upon a condition being met, use the
‘while’ loop

50
‘for’ loops become especially useful
when used in conjunction with arrays

We’ll find out about arrays next time,

and we’ll probe their usefulness as
part of ‘for’ loop structures

51
 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

control and loop structures

52
 Next (the 9th) Web Dev Lecture:
Arrays

• We will find out why we need arrays

• We will become able to use arrays for solving

simple problems

53