A conditional statement is a statement that you can use to execute a bit of code based on a condition or to do something else if that condition is not met. You can think of a conditional statement as being a little like cause and effect.
In your scripts, you may want to create a similar statement. Perhaps something more like the following line: "If a variable named mymoney is greater than 1000, send an alert that says my finances are OK. Otherwise, send an alert saying I need more money!"
In this case, the first cause would be a variable having a value greater than 1000, which would have the effect of an alert that says things are OK. The second cause is the variable being 1000 or less. If this happens, you get an alert saying you need more money.
While using conditional statements, you will see that they are similar to functions in some ways. Most notable are the curly brackets ({}) that surround the sections of code that will be executed given a condition.
Suppose you want to see if a variable named boats is equal to 3. The following is how you write the first line of the if/else block:
if (boats==3)
Remember that a comparison will return a value of true or false. This is where the return value becomes useful. If the comparison of boats==3 returns true, the browser can go on to the next line. If it returns false, the browser begins looking for the else
keyword, or the first line of script after the block following the if line is completed. If the comparison returns true, you need to make a block of statements after the if line that will be executed. To do this, you use the curly brackets similarly to the
way you enclose commands for a function. The following code shows how to add the brackets to enclose the code that will execute if the comparison returns true:
if (boats==3) {
JavaScript Statements Here
}
If the comparison of boats==3 returns true, the code you place within the brackets will be executed. If it returns false, the code inside the brackets is ignored and the line of code after the closing curly bracket is executed.
If you wish to use an else block to execute a certain bit of code when the comparison
returns false, you place the else keyword on the next line and then follow it with its own set of curly brackets, as in the following code:
if (boats==3) {
JavaScript Statements Here
}
else {
JavaScript Statements Here
}
Now you can see the entire if/else block and how it works to execute one of the two blocks of code within curly brackets. If the comparison returns true, the block of code following the if statement is executed. If the comparison returns false, the block of
code following the else keyword is executed.
if (have_cookbook=="yes") {
if (meatloaf_recipe=="yes") {
window.alert("Recipe found");
}
else {
window.alert("Have the book but no recipe");
}
}
else {
window.alert("You need a cookbook");
}
The first thing you get is the main (first, or outermost) if block. You use it to find out whether the variable have_cookbook is equal to yes or not. If this comparison returns true, you move along into the if block; however, the next thing you find is another
if block! This is thenested if block, which means it is inside the outside if block. In the nested block, you check whether the variable meatloaf_recipe is equal to yes or not. If this returns true, you finally are able to do something, which is to send the
“Recipe found” alert
When the nested if block is finished, you see that it has an else block to go with it in case the comparison meatloaf_recipe==“yes” returned false. If it had returned false, the browser would then go to this else block and execute the code within it. In the preceding code example, the comparison on the outside block (have_cookbook==“yes”) returned true, but the comparison on the nested block (meatloaf recipe==“yes”) returned false. So, the nested else block is executed, sending the “Have the book but no recipe” alert. After this nested else block, you see what looks like an extra closing curly bracket; however, this closing bracket is actually used to close the outside if block that contains all of this nested code. Looking at how the code is indented will help you see which brackets are closing which blocks. This is where using indentions or tabs can be helpful in your code, because—as opposed to the code being all in a straight line up and down—indentions can make the code easier to read. Finally, you get to the outside else block. This is the block that is executed only if the first comparison (have_cookbook==“yes”) returns false. If that comparison returns false, all the code within that outside if block is ignored (you never get to the nested if/else block) and the browser moves on to this outside else block. In this case, you get the “You need a cookbook” alert sent to the viewer.
Using the switch Statement
The switch statement allows you to take a single variable value and execute a different block of code based on the value of the variable.
If you wish to check for a number of different values, this can be an easier method than the use of a set of nested if/else statements. The first line of a switch statement would have the following syntax:
switch (varname)
You replace varname with the name of the variable you are testing. You could also replace it with some other sort of expression, such as the addition of two variables or some similar calculation, and have it evaluate.