Chapter: 11th Computer Applications : Chapter 15 : Control Structure in JavaScript
Branching or Selection Statements in JavaScript
Branching
Statements:
JavaScript
supports branching statements which are used to perform different actions based
on different conditions. Branching is a transfer of control from the current
statement to another statement or construct in the program unit. A branch
alters the execution sequence. There are different branching statements. They
are,
•
if statement
•
if … else statement
•
else if statement
•
switch statement
1. if and if..else Statement:
The
if statement is the fundamental
control statement that allows JavaScript to make decisions to execute
statements conditionally. This statement has two forms. The form is for only
true condition. The syntax is
if (condition)
{
True block;
}
In the if form,
condition contains relational/logical expression is evaluated. If the resulting
value is true the true block is executed. True block may contain one or more
than one statement. For example
Illustration 15.1 Demo to Test if command
<Html>
<Head>
<Title>Demo
Program - To test if command in JavaScript </Title>
</Head>
<Body>
<script
language="javascript" type="text/javascript">
var age =
prompt("Please enter your Age :", "0");
if(age>=16)
{
alert("You Are
Eligible to Vote ....");
}
</script>
</Body>
</Html>
The
output will be
The
second form of the if statement is
an else clause that is the program
to follow either of two branches depending on the condition. In the simple if
construction, no special processing is performed when the condition evaluates
to false. But if processing must follow one of two paths, hence need to use if...else format. Its syntax is:
if (expression)
{
statements if true
}
else
{
statements if false
}
This
form is similar to if statement but the only difference is the else keyword, which provides an
alternate path for execution to follow if the condition evaluates to false.
Illustration 15.2 Using if.. else statement
<Html>
<Head>
<Title>Demo
Program - To test if..else command in JavaScript </Title>
</Head>
<Body>
<script language="javascript"
type="text/javascript">
var age =
prompt("Please enter your Age :", "0");
if(age>=18)
{
alert("You Are Eligible to get
Driving Licence..");
}
else
{
alert("You Are Not Eligible to get
Driving Licence..");
}
</script>
</Body>
</Html>
The
output will be
2. else if Statement:
The
if ... else statement evaluates an
expression and executes one of two pieces of code, depending on the outcome.
The else if statement to specify a
new condition if the first condition is false.
if (n == 10)
{
// Execute code
block #1
}
else if (n == 20)
{
// Execute code
block #2
}
else if (n == 30)
{
// Execute code
block #3
}
else
{
// If all else
fails, execute block #4
}
Illustration 15.3 Using Logical Operators and else if Statement
<Html>
<Head>
<Title>Program
- To test else ..if command in JavaScript </Title>
</Head>
<Body>
<script language="javascript"
type="text/javascript">
var marks = prompt("Please enter your Marks/100 :",
"0");
if(marks>90)
{
document.write("Your
Grade is Outstanding..");
}
else if((marks>70)
&& (marks<=90))
{
document.write("Your
Grade is Excellent..");
}
else if((marks>50)
&& (marks<=70))
{
document.write("Your
Grade is Good..");
}
else if((marks>40)
&& (marks<=50))
{
document.write("Your
Grade is Satisfectory..");
}
else
{
document.write("Your
Grade Poor and have to re-appear Exam..");
}
</script>
</Body>
</Html>
The
output will be
There
is nothing special about this code. It is just a series of if statements, where each following if is a part of the else clause
of the previous statement. Using the else if idiom is preferable to, and more legible than, writing
these statements out in their syntactically equivalent, fully nested form:
if (n == 10)
{
/Execute code block #1
}
else
{
if (n == 20)
{
// Execute code
block #2
}
else
{
if (n == 30)
{
// Execute code
block #3
}
else
{
// If all else
fails, execute block #4
}
}
}
3. switch case Statement:
JavaScripts offers the switch statement as an alternate to using if...else structure. The switch statement is especially useful when testing all the possible results of an expression. The syntax of a switch structure as the following:
switch(expression)
{
case label1:
statements1;
break;
case label2:
statements2;
break;
case labeln;
statements - N;
break;
default:
statements;
}
4. Break and Default Statement
The
switch statement begins by evaluating an expression placed between parenthesis,
much like the if statement. The result compared to labels associated with case
structure that follow the switch statement. If the result is equal to a label,
the statements in the corresponding case structure are executed. The default structure is can be at the end
of a switch structure if the result of the expression that do not match any of
the case labels. The break statement
is also used commonly within switch to exit the statement once the appropriate
choice is found.
Illustration 15.4 Using Switch Statement
<Html>
<Head>
<Title>Program
- To test witch command in JavaScript </Title>
</Head>
<Body>
<script language="javascript"
type="text/javascript">
var grade=0;
var marks=prompt(“Please enter your marks/100:”,”0”);
if(marks>90)
{grade=1;}
else if(marks>70)&&(marks<=90)
{grade=2;}
else if(marks>50)&&(marks<=70)
{grade=3;}
else if(marks>40)&&(marks<=50)
{grade=4;}
else
{grade=5;}
switch(grade)
{
case 1:
document.write("Your Grade is Outstanding.."); break;
case 2:
document.write("Your Grade is Excellent.."); break;
case 3:
document.write("Your Grade is Good..");
break;
case 4:
document.write("Your Grade is Satisfectory.."); break;
default:
document.write("Your Grade Poor and have to re-appear
Exam..");
}
</script>
</Body>
</Html>
The output will be
Related Topics