Transcript JavaScript Flow Control & Loops
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 condition False
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 true?
in case the condition is 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 the ‘day’ is equal to ‘Sunday’
16
if: Example 2
} if ( day == “ Sunday ” ) { bhola = “ Cool ” ; mood = “ Great ” ; clothing = “ Casual ” ; Note: No semicolon after the closing curly brace
Set the value of the variable ‘status’ to ‘Cool’, ‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if the ‘day’ is equal to ‘Sunday’
17
Compound Statements
1. At times, we need to put multiple statements at places where JavaScript expects only one 2. For those situations, JavaScript provides a way of grouping a number of statements into a single statement, called a “ statement block ” 18
Compound Statements
3. This is done simply by enclosing any number of statements within curly braces , { } 4. NOTE: Although the statements within the block end in semicolons , the block itself doesn’t 19
if: Example 3
} if ( ( day == “ Sunday ”) || ( day == “ Saturday ”) ) { bhola = “ Cool ” ; mood = “ Great ” ; clothing = “ Casual ” ; 20
if: Example 4
} weekend = ( day == “ Sunday ” ) || ( day == “ Saturday ” ) ; What is the data type of if ( weekend bhola = “ ) { Cool ” ; the variable “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 ; if ( grade == “ B ” ) points = 3.0 ; if ( grade == “ C ” ) This piece of code is correct, but not very efficient!
points = 2.0 ; if ( grade == “ D ” ) points = 1.0 ; if ( grade == “ F ” ) points = 0.0 ; What can we do to improve it?
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 break ; case “ B ” : = 4.0
points = 3.0
; ; break ; case “ C ” : points = break ; case “ D ” : 2.0
; points = break ; default : 1.0
; 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 point acts like the ‘else’ clause 31 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 use ‘switch’ (or a single expression), • 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 bhola = “ Probation ” ; >= 36 ) ) 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 x = 75 ; // x is the decimal number y = “” ; // enclosed in 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 ) ; 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 ; while ( x < 6000 ) { document.write ( x ) ; x = x + 1 ; } for ( x = 1 ; x < 6000 ; Operation x = x + 1 ) { document.write ( x ) ; } 43
for: Description (1)
1.
The ‘for’ loop starts by initializing
variable
(which in this case is x) the
counter
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 known, use the ‘for’ loop is • 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 9
th
) Web Dev Lecture:
Arrays • We will find out why we need arrays • We will become able to use arrays for solving simple problems 53