Conditional Statements and Loops

1
Conditional Statements and Loops

• CS101 Introduction to Computing

2
Todays Learning Goals

• Learn about conditional statements and their
  structure
• Learn about loops and their structure
• Identify various types of conditional statements
  and loops
• Know how conditional statements and loops are
  used in scripts

3
Defining Conditional Statements

• What is a conditional statement?
• Why conditionals are useful?

4
What is a Conditional Statement?

• A statement that is used to execute a bit of code
  based on a condition or to do something else when
  the condition is not met
• Its a bit like cause and effect
• If you study hard, you will pass the course.
  Otherwise, you will fail.

5
What is a Conditional Statement?

• Example
• If a variable named my money is greater than
  1000, send an alert that says my finances are ok.
  Otherwise, send an alert saying I need more money!

6
Why are Conditionals Useful?

• Lets us execute only certain parts of the script
  instead of executing every single line of code in
  the script

7
Types of Conditional Statements

• If/Else Statement Blocks
• Switch Statement Blocks

8
If/Else Statement Blocks

• Structure
• Block Nesting
• Complex Comparisons

9
If/Else Statement Block Structure

• if (comparison here)
• We want to see if a variable named boats is
  equal to 3.

10
If/Else Statement Block Structure

• if (boat3)

11
If/Else Statement Block Structure

• if (boat3)
• JavaScript Statements Here

12
If/Else Statement Block Structure

• if (boat3)
• JavaScript Statements Here
• else
• JavaScript Statements Here

13
Problem 1

• Send an alert that says You have the right
  number of boats if the variable boats is equal
  to three. If it is not, we want to send an alert
  that says You do not have the right number of
  boats instead.

14

• ltscript language"JavaScript"gt
• lt!--
• if (boats 3)
• window.alert("You have the right number of
  boats.")
• else
• window.alert("You do not have the right number of
  boats.")
• //--gt
• lt/scriptgt

15

• Lets declare a variable and assign it a value

16

• ltscript language"JavaScript"gt
• lt!--
• var boats 3
• if (boats 3)
• window.alert("You have the right number of
  boats.")
• else
• window.alert("You do not have the right number of
  boats.")
• //--gt
• lt/scriptgt

17
(No Transcript)
18

• Now change the value of the variable

19

• ltscript language"JavaScript"gt
• lt!--
• var boats 0
• if (boats 3)
• window.alert("You have the right number of
  boats.")
• else
• window.alert("You do not have the right number of
  boats.")
• //--gt
• lt/scriptgt

20
(No Transcript)
21
If/Else Statement Block Nesting

• During nesting, we put one structure inside
  another structure of a similar nature

22
Problem 2

• If variable named car is equal to yes, and if a
  variable named licence is equal to yes, send an
  alert that says You can drive to the browser.
• If variable named car is equal to yes, but if a
  variable named licence is not equal to yes,
  send an alert that says You cannot drive to the
  browser otherwise send an alert that says You
  need a car.

23

• ltscript language"JavaScript"gt
• lt!--
• if (car "yes")
• if (licence "yes")
• window.alert("You can drive.")
• else
• window.alert("You need a licence to drive.")
• else
• window.alert("You need a car.")
• //--gt
• lt/scriptgt

24

• Oops, I made a mistake

25

• ltscript language"JavaScript"gt
• lt!--
• if (car "yes")
• if (licence "yes")
• window.alert("You can drive.")
• else
• window.alert("You need a licence to drive.")
• else
• window.alert("You need a car.")
• //--gt
• lt/scriptgt

26

• Lets declare some variables and assign them
  values

27

• ltscript language"JavaScript"gt
• lt!--
• var car "yes"
• var licence "yes"
• if (car "yes")
• if (licence "yes")
• window.alert("You can drive.")
• else
• window.alert("You need a licence to drive.")
• else
• window.alert("You need a car.")

28
(No Transcript)
29

• Now change the values of the variables

30

• ltscript language"JavaScript"gt
• lt!--
• var car "yes"
• var licence no"
• if (car "yes")
• if (licence "yes")
• window.alert("You can drive.")
• else
• window.alert("You need a licence to drive.")
• else
• window.alert("You need a car.")

31
(No Transcript)
32

• and changing the values of the variables again

33

• ltscript language"JavaScript"gt
• lt!--
• var car "no"
• var licence "no"
• if (car "yes")
• if (licence "yes")
• window.alert("You can drive.")
• else
• window.alert("You need a licence to drive.")
• else
• window.alert("You need a car.")

34
(No Transcript)
35

• Another example

36

• if (car "yes")
• if (licence "yes")
• window.alert("You can drive.")
• else
• window.alert("You need a licence to drive.")
• else
• if (helicopter "yes")
• window.alert("Use the helicopter.")
• else

37

• Lets declare some variables and assign them
  values

38

• var car "no"
• var licence "no"
• var helicopter "yes"
• if (car "yes")
• if (licence "yes")
• window.alert("You can drive.")
• else
• window.alert("You need a licence to drive.")
• else
• if (helicopter "yes")
• window.alert("Use the helicopter.")

39
(No Transcript)
40
Switch Statements

• Allows us to take a single variable value and
  execute a different line of code based on the
  value of the variable.

41
Problem 3
42

• var thename "Salman"
• switch (thename)
• case Naveed
• window.alert("Naveed is an OK name.")
• break
• case Salman
• window.alert(Salman is a great name!")
• window.alert("Hi Salman!")
• break
• default
• window.alert("You have a unique name.")

43
What is a Loop?

• A block of code that allows us to repeat a
  section of code a certain number of times,
  perhaps changing certain variable values each
  time the code is executed.

44

• document.write(Hello. Welcome to the world.)
• document.write(Hello. Welcome to the world.)
• document.write(Hello. Welcome to the world.)
• document.write(Hello. Welcome to the world.)
• document.write(Hello. Welcome to the world.)
• document.write(Hello. Welcome to the world.)
• document.write(Hello. Welcome to the world.)
• document.write(Hello. Welcome to the world.)
• document.write(Hello. Welcome to the world.)
• document.write(Hello. Welcome to the world.)

45

• We can write this in a more efficient manner
  using loops

46

• Do this block 10 times
• document.write(Hello. Welcome to the world.)

47
Types of Loops

• For loops
• While loops

48
For Loops

• Structure
• Block Nesting

49
Structure of a For Loop

• for (statement)
• JavaScript goes here

50
Structure of a For Loop

• for (varname 1 varname lt11 varname 1)
• JavaScript code goes here

51

• for (count 1 count lt 11 count 1)
• document.write(Hello. Welcome to the world.)

52

• Oops, I made a mistake

53

• for (count 1 count lt 11 count 1)
• document.write(Hello. Welcome to the
  world.ltbrgt)

54

• Oops, I made another mistake

55

• for (count 1 count lt 11 count 1)
• document.write(Hello. Welcome to the
  world.ltbrgt)

56
(No Transcript)
57
Nesting For Loops

• We can have nested loops just like If/Else blocks

58

• for (count 1 count lt 11 count 1)
• document.write(countHello. Welcome to the
  world.ltbrgt)
• for (nestcount1, nestcountlt3 nestcount1)
• document.write(Stop!)

59

• for (count 1 count lt 11 count 1)
• if (count 5)
• document.write(Im halfway through.)
• else
• document.write(Im part of a loop.)

60
While Loops

• Looks at short comparison and repeats until
  comparison is no longer true

61

• var count 1
• while (count lt 11)
• document.write(Im part of a loop.ltbrgt)
• count 1

62
Do While Loops

• Loop executed at least once , even if comparison
  used return false the first time.

63

• var count 1
• do
• document.write(Hi!)
• count 1
• while (count lt 6)

64

• var count 11
• do
• document.write(Hi!)
• count 1
• while (count lt 10)

65
What We Learnt Today

• Learnt about conditional statements and their
  structure
• Learnt about loops and their structure
• Identified various types of conditional
  statements and loops
• Found out how conditional statements and loops
  are used in scripts