JavaScript If...
Else Statements
Conditional Statements
Very often when you write code, you want to perform different actions for different
decisions.
You can use conditional statements in your code to do this.
1. In JavaScript we have the following conditional statements:
2. Use if to specify a block of code to be executed, if a specified condition is true
3. Use else to specify a block of code to be executed, if the same condition is false
4. Use else if to specify a new condition to test, if the first condition is false
5. Use switch to specify many alternative blocks of code to be executed
if statement:
The if statement is the fundamental control statement that allows
JavaScript to make decisions and execute statements conditionally.
Syntax:
if (expression){
Statement(s) to be executed if expression is true
}
Example:
<script type="text/javascript">
<!--
var age = 20;
if( age > 18 ){
[Link]("<b>Qualifies for driving</b>");
}
//-->
</script>
if...else statement:
The if...else statement is the next form of control statement that allows
JavaScript to execute statements in more controlled way.
Syntax:
if (expression){
Statement(s) to be executed if expression is true
}else{
Statement(s) to be executed if expression is false
}
Example:
<script type="text/javascript">
<!--
var age = 15;
if( age > 18 ){
[Link]("<b>Qualifies for driving</b>");
}else{
[Link]("<b>Does not qualify for driving</b>");
}
//-->
</script>
if...else if... statement:
The if...else if... statement is the one level advance form of control
statement that allows JavaScript to make correct decision out of several
conditions.
Syntax:
if (expression 1){
Statement(s) to be executed if expression 1 is true
}else if (expression 2){
Statement(s) to be executed if expression 2 is true
}else if (expression 3){
Statement(s) to be executed if expression 3 is true
}else{
Statement(s) to be executed if no expression is true
}
Example:
<script type="text/javascript">
<!--
var book = "maths";
if( book == "history" ){
[Link]("<b>History Book</b>");
}else if( book == "maths" ){
[Link]("<b>Maths Book</b>");
}else if( book == "economics" ){
[Link]("<b>Economics Book</b>");
}else{
[Link]("<b>Unknown Book</b>");
}
//-->
</script>
JavaScript Switch Case
You can use multiple if...else if statements, as in the previous chapter,
to perform a multiway branch. However, this is not always the best
solution, especially when all of the branches depend on the value of a
single variable.
Starting with JavaScript 1.2, you can use a switch statement which
handles exactly this situation, and it does so more efficiently than
repeated if...else if statements.
Syntax:
• The basic syntax of the switch statement is to give an expression to
evaluate and several different statements to execute based on the
value of the expression. The interpreter checks each case against the
value of the expression until a match is found. If nothing matches, a
default condition will be used.
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
• The break statements indicate to the interpreter the end of that
particular case. If they were omitted, the interpreter would continue
executing each statement in each of the following cases.
• We will explain break statement in Loop Control chapter.
<script type="text/javascript">
var grade='A';
[Link]("Entering switch block<br />");
switch (grade)
{
case 'A': [Link]("Good job<br />");
break;
case 'B': [Link]("Pretty good<br />");
break;
case 'C': [Link]("Passed<br />");
break;
case 'D': [Link]("Not so good<br />");
break;
case 'F': [Link]("Failed<br />");
break;
default: [Link]("Unknown grade<br />")
}
[Link]("Exiting switch block");
</script>
• consider a case if you do not use break statement:
<script type="text/javascript">
var grade='A';
[Link]("Entering switch block<br />");
switch (grade)
{
case 'A': [Link]("Good job<br />");
case 'B': [Link]("Pretty good<br />");
case 'C': [Link]("Passed<br />");
case 'D': [Link]("Not so good<br />");
case 'F': [Link]("Failed<br />");
default: [Link]("Unknown grade<br />")
}
[Link]("Exiting switch block");
</script>
