CS101 Introduction to Computing Lecture 23 Flow Control & Loops (Web Development Lecture 8) During the last lecture we had a discussion on Data Types,
Download ReportTranscript CS101 Introduction to Computing Lecture 23 Flow Control & Loops (Web Development Lecture 8) During the last lecture we had a discussion on Data Types,
Slide 1
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 2
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 3
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 4
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 5
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 6
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 7
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 8
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 9
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 10
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 11
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 12
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 13
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 14
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 15
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 16
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 17
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 18
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 19
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 20
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 21
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 22
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 23
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 24
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 25
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 26
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 27
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 28
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 29
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 30
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 31
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 32
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 33
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 34
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 35
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 36
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 37
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 38
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 39
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 40
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 41
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 42
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 43
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 44
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 45
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 46
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 47
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 48
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 49
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 50
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 51
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 52
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 53
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 2
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 3
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 4
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 5
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 6
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 7
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 8
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 9
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 10
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 11
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 12
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 13
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 14
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 15
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 16
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 17
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 18
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 19
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 20
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 21
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 22
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 23
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 24
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 25
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 26
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 27
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 28
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 29
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 30
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 31
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 32
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 33
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 34
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 35
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 36
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 37
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 38
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 39
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 40
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 41
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 42
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 43
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 44
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 45
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 46
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 47
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 48
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 49
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 50
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 51
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 52
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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
Slide 53
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
block 1
statement
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
statement
Set the value of the variable ‘bhola to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if
16
the ‘day’ is equal to ‘Sunday’
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’ to17
‘casual’ if the ‘day’ is equal to ‘Sunday’
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 code is
if ( grade == “B” ) correct, but
points = 3.0 ; not very
if ( grade == “C” ) efficient!
points = 2.0 ;
What can we
if ( grade == “D” ) do to
points = 1.0 ; improve it?
if ( grade == “F” )
points = 0.0 ;
27
Nested
if … else
Structures
28
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 ;
}
}
}
if … else:
Example 6
29
JavaScript Flow Control Structures
if … else
switch
30
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
This is a
case label
switch:
Example 1
The expression
enclosed in
parentheses is
evaluated and
matched with
case labels
This ‘break’
statement is the
exit The
point‘default’ statement
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
block
True
condition
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
Condition
Operation
while ( x < 6000 ) {
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