Post on 17-Dec-2015
Conditional Statements and Loops
Today’s 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
• It’s 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?
• Let’s 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/Else Statement Block Structure
if (boat==3)
If/Else Statement Block Structure
if (boat==3)
{
JavaScript Statements Here
}
If/Else Statement Block Structure
if (boat==3){JavaScript Statements Here}else{JavaScript Statements Here}
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>
Let’s declare a variable and assign it a value …
<script language="JavaScript">
<!--
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.");
}
//-->
</script>
Now change the value of the variable …
<script language="JavaScript">
<!--
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.");
}
//-->
</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’.
<script language="JavaScript"><!--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 …
<script language="JavaScript"><!--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>
Let’s declare some variables and assign them values …
<script language="JavaScript"><!--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.");}//--></script>
Now change the values of the variables …
<script language="JavaScript"><!--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.");}//--></script>
and changing the values of the variables again …
<script language="JavaScript"><!--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.");}//--></script>
Another example …
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{window.alert("You need a car.");}
}
Let’s declare some variables and assign them values …
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.");}else{window.alert("You need a car.");}
}
Switch Statements
• Allows us to take a single variable value and execute a different line of code based on the value of the variable.
Examplevar 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.”);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.”);
We can write this in a more efficient manner using loops …
Do this block 10 times{document.write(“Hello. Welcome to the world.”);}
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){document.write(“Hello. Welcome to the world.”);}
Oops, I made a mistake …
for (count = 1; count < 11; count += 1){document.write(“Hello. Welcome to the world.<br>”);}
Nesting For Loops
• We can have nested loops just like If/Else blocks
for (count = 1; count < 5; count += 1){document.write(count+“Hello. Welcome to the world.<br>”);
for (nestcount=1, nestcount<3; nestcount+=1){document.write(“Stop!”);}
}
for (count = 1; count < 11; count += 1){
if (count = 5){document.write(“I’m halfway through.”);}
else{document.write(“I’m 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(“I’m 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