Virtual University

Introduction to Computing

Lecture 23
Flow Control & Loops
(Web Development Lecture 8)
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

JavaScript Data Types

JavaScript recognizes & distinguishes among the following types of values:

Numbers
Booleans
Strings
Undefined

Variables give us the ability to manipulate data through reference instead of actual
valueVariables are containers that hold values

Variables

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!)

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

FLOW CONTROL
Select between alternate courses of action depending upon the
evaluation of a condition

condition

True

False
statement
block 2

statement
block 1

JavaScript Flow Control Structures

if else
switch

Page 1 of 9
Copyright Virtual University of Pakistan

Virtual University

Introduction to Computing

if: Example 1
if ( day == Sunday )
bhola = Cool ;
semicolon

The condition
enclosed in

Set the value of the variable bhola to Cool

if the day is equal to Sunday
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
if: Example 2

if ( day == Sunday )
{
bhola = Cool ;
mood = Great ;
clothing = Casual ;
}
Set the value of the variable
bhola to Cool, mood to Great,
and clothing to casual if the

These curly braces group the

multiple statements into a single
compound statement

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

Compound Statements

2.

At times, we need to put multiple statements at places where

JavaScript expects only oneFor those situations, JavaScript
This is done simply by enclosing any number of statements within
curly braces, { }NOTE: Although the statements within the
block end in semicolons, the block itself doesnt
if: Example 3

if ( (day == Sunday) || (day == Saturday) ) {

bhola = Cool ;
mood = Great ;
clothing = Casual ;
}

Page 2 of 9
Copyright Virtual University of Pakistan

Virtual University

Introduction to Computing

if: Example 4
weekend = ( day == Sunday ) || ( day ==
if ( weekend ) {
bhola = Cool ;
mood = Great ;
clothing = Casual ;
}

Saturday ) ;

What is the data

type of the variable
weekend?

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
if else: Example 1
if ( GPA >= 1.0 )
bhola = Pass ;
else
bhola = Fail ;
if else: Example 2
if ( GPA >= 1.0 ) {
bhola = Pass ;
}
Else
bhola = Fail ;

if else: Example 3
if ( GPA >= 1.0 ) {
bhola = Pass ;
mood = Great
;
} else
if else: Example 4
if ( GPA >= 1.0 ) {
bhola = Pass ;
mood = Great ;
} else {
bhola = Fail ;
mood = Terrible ; }
if else: Example 5

if ( grade == A )
points = 4.0 ;

This piece of
code is correct,
but not very
efficient!

if ( grade == B )
points = 3.0 ;
if ( grade == C )
points = 2.0 ;

What can we do
to improve it?

if ( grade == D )
points = 1.0 ;
if ( grade == F )
points = 0.0 ;

Page 3 of 9
Copyright Virtual University of Pakistan

Virtual University

Introduction to Computing

if else: Example 5
if ( grade == A )

This piece of
code is correct,
but not very
efficient!

points = 4.0 ;
if ( grade == B )
points = 3.0 ;
if ( grade == C )

What can we do to
improve it?

points = 2.0 ;
if ( grade == D )
points = 1.0 ;
if ( grade == F )
points = 0.0 ;

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 )
points = 1.0 ;
else
points = 0.0 ;
}
}
}

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 ;
break ;
default :
points = 0.0 ;
}

A colon
following the
case label is
required

switch:
Example 1

The expression
enclosed in
parentheses is
evaluated and matched
with case labels
This is a case
label

This break statement

is the exit point

The default statement acts like the

else clause in the ifelse
structure

Page 4 of 9
Copyright Virtual University of Pakistan

Virtual University

Introduction to Computing

Switch Example 2
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 :
document.write( inquiry + ? Please retry! ) ;
}

ifelse --?-- 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
if else: Example 7
if ( ( GPA >= 1.0 ) && ( attendance >= 40 ) )
bhola = Pass ;
else {
if ( ( GPA >= 2.0 ) && ( attendance >= 36 ) )
Probation ;

bhola =

else
bhola = Fail ;
}

LOOPS
Loop through a set of statements as long as a condition
is true

True

statement
block

condition

False

JavaScripts Looping Structures

while
for

Copyright Virtual University of Pakistan

Page 5 of 9

Virtual University

Introduction to Computing

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 ) ;

The condition
enclosed in
parentheses

while: Example 2
while ( tankIsFull == false ) {
tank = tank + bucket ;
}
document.write ( Tank is full now ) ;

while: Example 3

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

for: Example 1
Operation
Initial count

Condition

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

document.write ( x ) ;
}

for: Description (1)

The for loop starts by initializing the counter variable (which in this case
is x)

The initial value in this case is 1, but can be any other positive or
negative
as well
number
Copyright
Virtual University of Pakistan

Next the for loop checks the condition. If the condition evaluates to a
true value, the for loop goes through the loop once

Page 6 of 9

Virtual University

Introduction to Computing

for: Description (2)

After reaching the end of that iteration, the for loop goes to the top once
again, performs the operation, checks the condition

If the condition evaluates to a false value, the for loop finishes looping
Otherwise, the for loop goes through the loop once again
Repeat from step 4

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 iterations would

this for loop run for?

6000?

Page 7 of 9
Copyright Virtual University of Pakistan

Virtual University

Introduction to Computing

for: Example 3
How many iterations
would this for loop run
for?

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

document.write ( x ) ;
}
for: Example 4
for ( x = 6000 ; x < 0 ; x = x - 1 ) {
document.write ( x ) ;
}

6000?

How many iterations

would this for loop run
for?

for --?-- while

None?

When the exact number of iterations is known, use the for

loop

for loops become especially useful when used in conjunction with

arrays
Well find out about arrays next time, and well probe their
usefulness as part of for loop structures

During Todays 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
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

During Todays 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

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

Page 8 of 9
Copyright Virtual University of Pakistan

Virtual University

Introduction to Computing

Page 9 of 9
Copyright Virtual University of Pakistan