CS101 Introduction to Computing Lecture 23 Flow Control

1
CS101 Introduction to ComputingLecture 23Flow
Control Loops (Web Development Lecture 8)
2
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

3
JavaScript Data Types

• JavaScript recognizes distinguishes among the
  following types of values
• Numbers
• Booleans
• Strings
• Undefined

4
Variables

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

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

6
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

7
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

8
comments let the code speak for itself!
9
Decimal to Binary Conversion in JavaScript

• x 75 // x is the decimal number
• y // y is the binary equivalent
• while ( x gt 0 )
• remainder x 2
• quotient Math.floor( x / 2 )
• y remainder y
• x quotient
• document.write( y y )

10
Todays LectureFlow Control Loops

• Well 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

11
Flow Control
12

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

condition
True
False
statement block 1
statement block 2
13
JavaScript Flow Control Structures

• if else
• switch

14
if Example 1

• if ( day Sunday )
• bhola Cool
• Set the value of the variable bhola to Cool if
  the day is equal to Sunday

The condition enclosed in parentheses
semicolon
15
This was the case if we want to execute a single
statement given that the condition is trueWhat
if we want to execute multiple statements in case
the condition is true?
16
if Example 2

• if ( day Sunday )
• bhola Cool
• mood Great
• clothing Casual
• Set the value of the variable bhola to Cool,
  mood to Great, and clothing to casual if
  the day is equal to Sunday

These curly braces group the multiple statements
into a single compound statement
17
if Example 2

• if ( day Sunday )
• bhola 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
18
Compound Statements

• At times, we need to put multiple statements at
  places where JavaScript expects only one
• For those situations, JavaScript provides a way
  of grouping a number of statements into a single
  statement, called a statement block

19
Compound Statements

• This is done simply by enclosing any number of
  statements within curly braces,
• NOTE Although the statements within the block
  end in semicolons, the block itself doesnt

20
if Example 3

• if ( (day Sunday) (day Saturday) )
  
• bhola Cool
• mood Great
• clothing Casual

21
if Example 4

• weekend ( day Sunday ) ( day
  Saturday )
• if ( weekend )
• bhola Cool
• mood Great
• clothing Casual

What is the data type of the variable weekend?
22
We now know how to execute a statement or a block
of statements given that the condition is
trueWhat 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
23
if else Example 1
if ( GPA gt 1.0 ) bhola Pass else bhola
Fail
24
if else Example 2
if ( GPA gt 1.0 ) bhola Pass
else bhola Fail
25
if else Example 3
if ( GPA gt 1.0 ) bhola Pass mood
Great else bhola Fail
26
if else Example 4
if ( GPA gt 1.0 ) bhola Pass mood
Great else bhola Fail mood
Terrible
27
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
This piece of code is correct, but not very
efficient!
What can we do to improve it?
28
Nested if else Structures
29
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
30
JavaScript Flow Control Structures

• if else
• switch

31
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
A colon following the case label is required
The expression enclosed in parentheses is
evaluated and matched with case labels
This is a case label
This break statement is the exit point
The default statement acts like the else
clause in the ifelse structure
32
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! )
33
if elseswitch
?
34
ifelse --?-- switch

• If the action to be taken of the value of a
  single variable (or a single expression), use
  switch
• When the action depends on the values of multiple
  variables (or expressions), use the if...else
  structure

35
if else Example 7
if ( ( GPA gt 1.0 ) ( attendance gt 40 ) )
bhola Pass else if ( ( GPA gt 2.0 )
( attendance gt 36 ) ) bhola Probation
else bhola Fail
36
Loops
37

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

condition
True
statement block
False
38
JavaScripts Looping Structures

• while
• for

39
Decimal to Binary Conversion in JavaScript
The condition enclosed in parentheses

• x 75 // x is the decimal number
• y // y is the binary equivalent
• while ( x gt 0 )
• remainder x 2
• quotient Math.floor( x / 2 )
• y remainder y
• x quotient
• document.write( y y )

40
while Example 2

• while ( tankIsFull false )
• tank tank bucket
• document.write ( Tank is full now )

41
while Example 3

• x 1
• while ( x lt 6000 )
• document.write ( x )
• x x 1

42
JavaScripts Looping Structures

• while
• for

43
for Example 1

• x 1
• while ( x lt 6000 )
• document.write ( x )
• x x 1

Initial count
Condition
Operation
for ( x 1 x lt 6000 x x 1 )
document.write ( x )
44
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

45
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

46
for Example 2

• for ( x 99 x lt 6000 x x 1 )
• document.write ( x )

47
for Example 3

• for ( x 6000 x gt 0 x x - 1 )
• document.write ( x )

How many iterations would this for loop run for?
6000?
48
for Example 4

• for ( x 6000 x lt 0 x x - 1 )
• document.write ( x )

How many iterations would this for loop run for?
None?
49
for while
?
50
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

51
for loops become especially useful when used in
conjunction with arraysWell find out about
arrays next time, and well probe their
usefulness as part of for loop structures
52
During Todays Lecture

• We discussed the concept of flow control using
  the if and switch structures
• And also the concept behind the while and for
  looping structures
• We also solved simple problems using flow control
  and loop structures

53
Next (the 9th) Web Dev LectureArrays

• We will find out why we need arrays
• We will become able to use arrays for solving
  simple problems