Javascript
  1. Javascript intro
  2. Javascript basics
  3. Javascript variables
  4. Javascript functions
  5. Javascript popup boxes
  6. Javascript conditions
  7. Javascript loops
  8. Javascript arrays
  9. Javascript objects
  10. Javascript strings
  11. Javascript events
  12. Javascript errors
  13. Javascript DOM
  14. Javascript elements
  15. Javascript new windows
  16. Javascript date & time
  17. Javascript cookies
  18. Javascript print
  19. Javascript redirect
  20. Javascript void
  21. Javascript summary

Javascript conditional logic

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

This tutorial focuses on:

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:
aNumber is equal to 5

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:
Great Choice!
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:
Still a good choice, though cactuses are better.

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>
Output:
X is equal to 7

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:
X is not equal to 9, 7, 3, or 15. X is equal to 5

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.

Some if statements with braces, some without:
<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, X is equal to " + X); </script>

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>
Output:
X is equal to 7

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:
x = 15

In the above example, 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.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information