Programming

Markup

Style & Layout

Browser scripting

Server scripting

Making money online

Javascript conditional logic

You can implement Javascript code which makes decisions based on certain things using conditional logic.

This lesson focuses on:

• The if statement
• The else statement
• The else-if statement
• Using if, else, and else if together
• The switch statement
• The ternary operator

The if statement

The if statement tests if a certain condition is true or false and acts upon it accordingly.

Syntax:

if(condition){
perform this action;
}

If the condition in the parenthesis is true, then the code following the condition will be executed, otherwise it will not.

Example:

<script type="text/javascript">
var aNumber = 5;

if (aNumber == 5){
document.write("aNumber is equal to 5");
}
</script>

Output:

NOTE: Use two equal signs (==) in the condition when comparing values. One equal sign (=) is used to assign values, while two equal signs (==) are used to compare values.

The else statement

If the condition in the parenthesis in an if statement is true, then the code following the condition will be executed. But what if you wanted something to happen if it is false? What if you wanted one thing to happen if the condition is true, and something else to happen if the condition is false? This is where the else statement comes in. The else statement works in conjunction with the if statement and executes certain code if the condition in the if statement is false.

Syntax:

if(condition){
perform this action;
}

else{
perform this action if the above condition is false;
}

If the condition in the if statement is false, then the action dictated by the else statement will be performed.

Example 1:

<script type="text/javascript">
var plant = "cactus";

if (plant == "cactus"){
document.write("Great choice!");
}

else{
document.write("Still a good choice, though cactuses 
are better.");
}
</script>

Output:

Example 2:

<script type="text/javascript">
var plant = "birch";

if (plant == "cactus"){
document.write("Great choice!");
}

else{
document.write("Still a good choice, though cactuses 
are better.");
}
</script>

Output:

The else-if statement

The if statement tests a single condition and performs an action if that condition is true and the else statement performs an action if the condition in the if statement is false, but what if there are more than two possibilities? Surely, any condition can be only true or false, but what if you needed to test a variable for more than one value? This is where the else if statement comes in. The else if statement is used in conjunction with the if statement. Unlike the else statement, it does not specifically perform a certain action if the condition in the if statement is false, but rather it performs an action if the condition in the if statement is another specific value specified in the else if statement itself.

Syntax:

if(condition is one value){
perform this action;
}

else if(condition equals another value){
perform this action; 
}

Example:

<script type="text/javascript">
var X = 7;

if(X == 5){
document.write("X is equal to 5");
}

else if(X == 7) {
document.write("X is equal to 7");
{
</script>

In the above example, we are testing if the variable X is equal to 5, and if it is, print the message "X is equal to 5". We then use the else if statement to test if the variable X is equal to 7, and if it is, print the message "X is equal to 7".

The output of the above example:

Using if, else, and else if together

You can use the if, else, and else if statements together when you want to check a variable for a certain value many times. If it is not any of the checked values then the code specified by the else statement will be executed.

Syntax:

if(condition){
perform this action;
}

else if(condition equals another value){
perform this action;
}

else if(condition equals another value){
perform this action;
}

else if(condition equals another value){
perform this action;
}

else{
if the condition was not equal to any of the values tested in 
the if statement and all the else if statements, then perform 
this action;
}

Example:

<script type="text/javascript">
var X = 5;

if(X == 9){
document.write("X is equal to 9");
}

else if(X == 7){
document.write("$X is equal to 7");
}

else if(X == 3){
document.write("X is equal to 3");
}

else if(X == 15){
document.write("X is equal to 15");
}

else{
document.write("X is not equal to 9, 7, 3, or 15. X is equal 
to " + X);
}
</script>

Output:

NOTE: When using if, else if, and else statements - if the action dictated by these statements contains more than one line of code, it should be sorrounded by curly braces, otherwise the curly braces are optional. Although, curly braces should always be used with conditional statements. Doing so is good convention.

Example:

<script type="text/javascript">
var X = 5;
var Y = 7;

if(X == 9){
document.write("X is equal to 9");
document.write("Y is equal to 7");
}

else if(X == 7) document.write("X is equal to 7");

else if(X == 3){
document.write("X is equal to 3");
document.write("Y is equal to 7");
}

else if(X == 15){
document.write("X is equal to 15");
document.write("Y is equal to 7");
}

else document.write("X is not equal to 9, 7, 3, or 15,
it is equal to 5");
</script>

In the above example, some of the conditional statements dictate actions with one line of code - not sorrounded by curly braces, and some conditional statements dictate actions with more than one line of code - sorrounded by curly braces.

The switch statement

The switch statement is specifically designed for comparing one variable to a number of possible values. It can be thought of as a substitute for the if, else if, else structure. There is an important keyword used within the switch structure, and that keyword is the break keyword. The break keyword is used to make sure that the switch structure will not fall through to the next possible value, even if that value is incorrect within the switch structure.

Syntax:

switch(variable){
case possible value:
perform this action;
break;
case possible value:
perform this action;
break;
case possible value:
perform this action;
break;
default:
perform this action if none of the values match;
}

Example:

<script type="text/javascript">
X = 7;

switch(X){
case 1:
document.write("X is equal to 1");
break;
case 2:
document.write("X is equal to 2");
break;
case 3:
document.write("X is equal to 3");
break;
case 7:
document.write("X is equal to 7");
break;
default:
document.write("X is not equal to 
any of the values specified");
}
</script>

In the above example, the variable X is initialized to 7, and is tested for a number of values. If X is equal to 1, the message "X is equal to 1" will be printed. If X is equal to 2, the message "X is equal to 2" will be printed. If X is equal to 3, the message "X is equal to 3" will be printed. If X is equal to 7, the message "X is equal to 7" will be printed. If X is equal to neither 1, 2, 3, or 7, the message "X is not equal to any of the values specified" will be printed.

Output of the above example:

The ternary operator

The ternary operator is the question mark symbol (?), it works the same way as the if-else structure.

Syntax:

variable = (condition) ? value the variable will take if 
condition is true: value the variable will take if condition 
is false;

Example:

<script type="text/javascript">
var x;
var y = 9;

x = (y==4) ? 5: 15;

document.write("x = " + x);
</script>

Output:

In the above example, there are two variables - x and y. The variable x is not initialized with any value and the variable y is initialized with the value 9. The ternary operator specifies that if y is equal to 4, set x to 5, otherwise set x to 15. The value of x is then printed.

Practice

Reference

Rate this site