1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)
-
Upload
joan-watkins -
Category
Documents
-
view
214 -
download
0
description
Transcript of 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)
![Page 1: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/1.jpg)
CS428 Web EngineeringLecture 13
Flow Control & Loops (JavaScript - III)
![Page 2: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/2.jpg)
2
if: Example 1if ( day == “Sunday” )
Weather = “Cool” ;
Set the value of the variable ‘weather to ‘Cool’ if the ‘day’ is equal to ‘Sunday’
The condition enclosed in parentheses semicolon
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?
![Page 3: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/3.jpg)
if: Example 2if ( day == “Sunday” ) {
person = “Cool” ;mood = “Great” ;clothing = “Casual” ;
}
Set the value of the variable ‘person to ‘Cool’, ‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if the ‘day’ is equal to ‘Sunday’
These curly braces group the multiple statements into a single compound statement
![Page 4: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/4.jpg)
Compound Statements1. 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”
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
![Page 5: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/5.jpg)
if: Example 3if ( (day == “Sunday”) || (day == “Saturday”) ) {
person = “Cool” ;mood = “Great” ;clothing = “Casual” ;
}=====================weekend = ( day == “Sunday” ) || ( day ==“Saturday” ) ;if ( weekend ) {
person = “Cool” ;mood = “Great” ;clothing = “Casual” ;
}
![Page 6: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/6.jpg)
We now know how to execute a statement or a block of statements given that the condition is true….What if we want to include an alternate action as well, i.e. a statement or a block of statements to be executed in case the condition in not true….if ( GPA >= 2.5 )
student = “Pass” ;else
student = “Fail” ;
![Page 7: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/7.jpg)
if … else: Example
if ( GPA >= 2.5 ) {student = “Pass” ;mood = “Great” ;
}else
student = “Fail” ;
![Page 8: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/8.jpg)
if … else: Example 5if ( grade == “A” )
points = 4.0 ;if ( grade == “B” )
points = 3.0 ;if ( grade == “C” )
points = 2.0 ;if ( grade == “D” )
points = 1.0 ;if ( grade == “F” )
points = 0.0 ;
What can we do to improve it?
This piece of code is correct, but not very efficient!
![Page 9: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/9.jpg)
if … else: Example 6
if ( grade == “A” )points = 4.0 ;
else {if ( grade == “B” )
points = 3.0 ;else {
if ( grade == “C” )points = 2.0 ;
else {if ( grade == “D” )
points = 1.0 ;else
points = 0.0 ;}
}}
![Page 10: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/10.jpg)
switch: Example 1
switch ( grade ) {case “A” :
points = 4.0 ;break ;
case “B” :points = 3.0 ;break ;
case “C” :points = 2.0 ;break ;
case “D” :points = 1.0 ;break ;
default :points = 0.0 ;
}
The expression enclosed in parentheses is evaluated and matched with case labels
This is a case label
A colon following the case label is required
This ‘break’ statement is the exit point The ‘default’ statement
acts like the ‘else’ clause in the ‘if…else’ structure
![Page 11: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/11.jpg)
switch: Example 2switch ( inquiry ) {case “apple” :
document.write( “Apples are Rs 50/kg” ) ;break ;
case “mangos” :document.write( “Mangos are Rs 90/kg” ) ;break ;
case “grapes” :document.write( “Grapes are Rs 60/kg” ) ;break ;
default :document.write( inquiry + “? Please
retry!” ) ;}
![Page 12: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/12.jpg)
if … else: Example
if ( ( GPA >= 2.5 ) && ( attendance >= 40 ) ) bhola = “Pass” ;
else {if ( ( GPA >= 2.0 ) && ( attendance >= 36 ) ) bhola = “Probation” ;else
bhola = “Fail” ;}
![Page 13: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/13.jpg)
Loop through a set of statements as long as a condition is true
conditionTrue
False
statementblock
![Page 14: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/14.jpg)
x = 75 ; // x is the decimal numbery = “” ; // y is the binary equivalentwhile ( x > 0 ) {
remainder = x % 2 ;quotient = Math.floor( x / 2 ) ;y = remainder + y ;x = quotient ;
}document.write( “y = ” + y ) ;
Decimal to Binary Conversion in JavaScriptThe condition enclosed in parentheses
![Page 15: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/15.jpg)
while: Example 2
while ( tankIsFull == false ) {tank = tank + bucket ;
}document.write ( “Tank is full now” ) ;========x = 1 ;while ( x < 6000 ) {
document.write ( x ) ;x = x + 1 ;
}
![Page 16: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/16.jpg)
for: Example 1
x = 1 ;while ( x < 6000 ) {
document.write ( x ) ;x = x + 1 ;
}for ( x = 1 ; x < 6000 ; x = x + 1 ) {
document.write ( x ) ;}
Initial count Condition Operation
![Page 17: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/17.jpg)
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
![Page 18: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/18.jpg)
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
![Page 19: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/19.jpg)
for: Example
for ( x = 99 ; x < 6000 ; x = x + 1 ) {document.write ( x ) ;
}=============for ( x = 6000 ; x > 0 ; x = x - 1 ) {
document.write ( x ) ;}
How many iterations would this ‘for’ loop run for?
![Page 20: 1 CS428 Web Engineering Lecture 13 Flow Control Loops (JavaScript - III)](https://reader036.fdocuments.in/reader036/viewer/2022082800/5a4d1b7f7f8b9ab0599ba66c/html5/thumbnails/20.jpg)
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
• ‘for’ loops become especially useful when used in conjunction with arraysWe’ll find out about arrays next time, and we’ll probe their usefulness as part of ‘for’ loop structures