(Web Development Lesson 8)
During the last Lesson we had a discussion on Data Types, Variables &
Operators
We found out about JavaScript data
types
About variables and literals
We also discussed several operators supported by JavaScript
JavaScript Data Types
JavaScript recognizes & distinguishes among the following types of
values:
Numbers
Booleans
Strings
Undefined
Variables
Variables give us the ability to manipulate data through reference
instead of actual valueVariables are
containers that hold values
Declaring Variables
Although JavaScript allows variable declaration, it does not require it
- except in the case when we want
to declare a variable being local (more on local variables later in the
course!)
JavaScript Variables are Dynamically Typed
Any variable in JavaScript can
hold any type of value, and the that type can change midway through the
program
FLOW CONTROL
Select between alternate courses of action depending upon
the evaluation of a condition
statement
block 1
condition
True False
statement
block 2
JavaScript Flow Control Structures
•
if … else
•
switch
if: Example 1
if ( day == “Sunday” )
kim = “Cool” ;
Set the value of the variable ‘kim
to ‘Cool’
if the ‘day’ is equal to ‘Sunday’
This was the case if we want to execute a single statement
given that the condition is true
What if we want to execute multiple statements in case the
if ( day == “Sunday” ) {
kim = “Cool” ;
mood = “Great” ;
clothing = “Casual” ;
}
if: Example 2
These curly braces group the
multiple statements into a single
compound statement
Set the value of the variable
‘kim to ‘Cool’, ‘mood’ to ‘Great’,
and ‘clothing’ to ‘casual’ if the
if: Example 2
if ( day == “Sunday” ) {
kim = “Cool” ;
mood = “Great” ;
clothing = “Casual” ;
}
Set the value of the variable ‘status’ to ‘Cool’,
‘mood’ to ‘Great’, and ‘clothing’ to ‘casual’ if the
‘day’ is equal to ‘Sunday’
Note: No
semicolon after
the closing curly
brace
Compound Statements
•
At times, we need to put multiple statements
at
places where JavaScript expects only oneFor
those situations, JavaScript provides a way of
grouping a number of statements into a
2. This is done simply by enclosing any number
of statements within curly braces, {
}NOTE: Although the statements
within the block end in semicolons,
the block itself doesn’t
if: Example 3
if ( (day == “Sunday”) || (day == “Saturday”) ) {
kim = “Cool” ;
mood = “Great” ;
clothing = “Casual” ;
}
if: Example 4
weekend = ( day == “Sunday” ) || ( day == “Saturday” ) ;
if ( weekend ) {
kim = “Cool” ;
mood = “Great” ;
clothing = “Casual” ;
}
We now know how to execute a
statement or a block of statements given
that the condition is true
What if we want to include an alternate action as well, i.e. a statement
or
a block of statements to be executed in case the condition in not true
if … else: Example 1
if ( GPA >= 1.0 )
kim = “Pass” ;
else
kim = “Fail” ;
if … else: Example 2
if ( GPA >= 1.0 ) {
kim = “Pass” ;
}
Else
kim = “Fail” ;
if … else: Example 3
if ( GPA >= 1.0 ) {
kim = “Pass” ;
mood = “Great”
;
} else
if … else: Example 4
if ( GPA >= 1.0 ) {
kim = “Pass” ;
mood = “Great” ;
} else {
kim = “Fail” ;
mood = “Terrible” ; }
if … else: Example 5
if ( 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 ;
if … else: Example 5
if ( grade == “A” )
points =
4.0 ;
if ( grade == “B” )
points =
3.0 ;
if ( grade == “C” )
points =
2.0 ;
if ( grade == “D” )
points =
1 0 ;
if … else:
Example 6
if ( grade == “A” )
points = 4.0 ;
else {
if ( grade == “B” )
points = 3.0 ;
else {
if ( grade == “C” )
points = 2.0 ;
else {
if ( grade == “D” )
points = 1.0 ;
else
points = 0.0 ;
}
}
}
switch:
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 ;
}
switch: Example 2
switch ( inquiry ) {
case “apple” :
document.write( “Apples are Rs 50/kg” ) ;
break ;
case “mangos” :
document.write( “Mangos are Rs 90/kg” ) ;
break ;
case “grapes” :
document.write( “Grapes are Rs 60/kg” ) ;
break ;
default :
document.write( inquiry + “? Please retry!” ) ;
}
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
if … else: Example 7
if ( ( GPA >= 1.0 ) && ( attendance >= 40 ) )
kim = “Pass” ;
else {
if ( ( GPA >= 2.0 ) && ( attendance >= 36 ) ) kim
= “Probation” ;
else
kim = “Fail” ;
}
Switch Example 2
LOOPS
Loop through a set of statements as long as
a condition
is true
condition
True
False
statement
block
JavaScript’s Looping Structures
while
for
…
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 ) ;
Decimal to Binary Conversion in JavaScript
The condition
enclosed in
parentheses
while: Example 2
while ( tankIsFull == false ) {
tank = tank + bucket ;
}
document.write ( “Tank is full now” ) ;
while: Example 3
x = 1 ;
while ( x < 6000 ) {
document.write ( x ) ;
x = x + 1 ;
}
for: Example 1
for ( x = 1 ; x < 6000 ; x = x + 1 ) {
document.write ( x ) ;
}
Initial count
Condition
Operation
for: Description (1)
•
The ‘for’ loop starts by initializing the
counter variable (which in this case is
x)
•
The initial value in this case is ‘1’, but
can be any other positive or negative
number as well
•
Next the ‘for’ loop checks the condition. If
the condition evaluates to a ‘true’
value, the ‘for’ loop goes through the loop once
for: Description (2)
•
After reaching the end of that iteration,
the ‘for’ loop goes to the top once
again, performs the operation, checks the condition
•
If the condition evaluates to a ‘false’
value, the ‘for’ loop finishes looping
•
Otherwise, the ‘for’ loop goes through the
loop once again
•
Repeat from step 4
for: Example 2
for ( x = 99 ; x < 6000 ; x = x + 1 ) {
document.write ( x ) ;
}
for: Example 3
for ( x = 6000 ; x > 0 ; x = x - 1 ) {
document.write ( x ) ;
}
How many iterations
would
this ‘for’ loop run for?
6000?
for: Example 3
for ( x = 6000 ; x > 0 ; x = x - 1 ) {
document.write ( x ) ;
}
How many iterations
would this ‘for’ loop run
for?
6000?
for: Example 4
for ( x = 6000 ; x < 0 ; x = x - 1 ) {
document.write ( x ) ;
}
How many iterations
would this ‘for’ loop run
for?
for --?-- while
None?
•
When the exact number of iterations is
known, use the
‘for’ loop
‘for’ loops become especially useful when used in conjunction with
arrays
We’ll find out about arrays next time, and we’ll probe their
usefulness as part of ‘for’ loop structures
During Today’s
Lesson …
We discussed the concept of flow
control using the “if” and “switch” structures
And also the concept behind the “while” and “for” looping structures
We also solved simple problems using flow control and loop structures
Next (the 9th)
Web Dev Lecture:
Arrays
We will find out why we need arrays
We will become able to use arrays for solving simple problems
|