Conditional Statements and Loops

Conditional Statements
and Loops
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
Defining Conditional Statements

What is a conditional statement?
Why conditionals are useful?
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.
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!
Why are Conditionals Useful?

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

If/Else Statement Blocks
Switch Statement Blocks
If/Else Statement Blocks

Structure
Block Nesting
Complex Comparisons
If/Else Statement Block Structure
if (comparison here)
We want to see if a variable named boats is
equal to 3.

if (boat==3)

if (boat==3)
{
JavaScript Statements Here
}

if (boat==3)
{
}
else
{
}
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.
<script language="JavaScript">
<!-if (boats == 3)
{
window.alert("You have the right number of boats.");
}
else
{
window.alert("You do not have the right number of boats.");
}
//-->
</script>
Lets declare a variable and assign it a value
<!-var boats = 3;
if (boats == 3)
{
}
else
{
}
//-->
</script>
Now change the value of the variable
<!-var boats = 0;
if (boats == 3)
{
}
else
{
}
//-->
</script>
If/Else Statement Block Nesting

During nesting, we put one structure
inside another structure of a similar nature
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.
<!-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.");
}
//-->
</script>
Oops, I made a mistake
<!-if (car == "yes")
{
{
}
else
{
}
}
else
{
}
//-->
</script>
Lets declare some variables and assign

them values
<!-var car = "yes";
var licence = "yes";
if (car == "yes")
{
{
}
else
{
}
}
else
{
}
//-->
</script>
Now change the values of the variables
<!-var car = "yes";
var licence = no";
if (car == "yes")
{
{
}
else
{
}
}
else
{
}
//-->
</script>
and changing the values of the variables

again
<!-var car = "no";
var licence = "no";
if (car == "yes")
{
{
}
else
{
}
}
else
{
}
//-->
</script>
Another example
if (car == "yes")
{
{
}
else
{
}
}
else
{
if (helicopter == "yes")
{
window.alert("Use the helicopter.");
}
else
{
}
}
Lets declare some variables and assign

them values
var car = "no";

var licence = "no";
var helicopter = "yes";
if (car == "yes")
{
{
}
else
{
}
}
else
{
if (helicopter == "yes")
{
window.alert("Use the helicopter.");
}
else
{
}
}
Switch Statements
Allows us to take a single variable value
and execute a different line of code based
on the value of the variable.
Example
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.");
}
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.
document.write(Hello. Welcome to the world.);

We can write this in a more efficient manner

using loops
Do this block 10 times

{
}
Types of Loops
For loops
While loops
For Loops
Structure
Block Nesting
Structure of a For Loop

for (statement)
{
JavaScript goes here
}
Structure of a For Loop

for (varname = 1; varname <11; varname +=1)
{
JavaScript code goes here
}
for (count = 1; count < 11; count += 1)

{
}
Oops, I made a mistake

{
document.write(Hello. Welcome to the world.<br>);
}
Nesting For Loops

We can have nested loops just like If/Else
blocks

{
document.write(count+Hello. Welcome to the world.<br>);
for (nestcount=1, nestcount<3; nestcount+=1)
{
document.write(Stop!);
}
}

{
if (count = 5)
{
document.write(Im halfway through.);
}
else
{
document.write(Im part of a loop.);
}
}
While Loops
Looks at short comparison and repeats
until comparison is no longer true
var count = 1;
while (count < 11)
{
document.write(Im part of a loop.<br>);
count +=1;
}
Do While Loops
Loop executed at least once , even if
comparison used return false the first time.
var count = 1;
do
{
document.write(Hi!);
count +=1;
} while (count < 6);
var count = 11;

do
{
document.write(Hi!);
count +=1;
} while (count < 10);
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

Conditional Statements and Loops

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Conditional Statements and Loops

Uploaded by

Copyright:

Available Formats

Conditional Statements

Todays Learning Goals

Defining Conditional Statements

What is a Conditional Statement?

What is a Conditional Statement?

Why are Conditionals Useful?

Types of Conditional Statements

If/Else Statement Blocks

If/Else Statement Block Structure

If/Else Statement Block Structure

If/Else Statement Block Structure

If/Else Statement Block Structure

Lets declare a variable and assign it a value

Now change the value of the variable

If/Else Statement Block Nesting

Oops, I made a mistake

Lets declare some variables and assign

Now change the values of the variables

and changing the values of the variables

Lets declare some variables and assign

var car = "no";

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

We can write this in a more efficient manner

Do this block 10 times

Structure of a For Loop

Structure of a For Loop

for (count = 1; count < 11; count += 1)

Oops, I made a mistake

for (count = 1; count < 11; count += 1)

Nesting For Loops

for (count = 1; count < 5; count += 1)

for (count = 1; count < 11; count += 1)

var count = 11;

What We Learnt Today

You might also like