Control Statements

Control Structure

Control structure actually controls the flow of execution of a program. Following are the several control structure supported by javascript.

• if … else
• switch case
• do while loop
• while loop
• for loop

If … else

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 ){
   document.write("<b>Qualifies for driving</b>");
}
//-->
</script>

Switch case

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.

Syntax

switch (expression)
{
  case condition 1: statement(s)
                    break;
  case condition 2: statement(s)
                    break;
   ...
  case condition n: statement(s)
                    break;
  default: statement(s)
}

Example

<script type="text/javascript">
<!--
var grade='A';
document.write("Entering switch block<br/>");
switch (grade)
{
  case 'A': document.write("Good job<br/>");
            break;
  case 'B': document.write("Pretty good<br/>");
            break;
  case 'C': document.write("Passed<br/>");
            break;
  case 'D': document.write("Not so good<br/>");
            break;
  case 'F': document.write("Failed<br/>");
            break;
  default:  document.write("Unknown grade<br/>")
}
document.write("Exiting switch block");
//-->
</script>

Do while Loop

The do...while loop is similar to the while loop except that the condition check happens at the end of the loop. This means that the loop will always be executed at least once, even if the condition is false.

Syntax

do{
   Statement(s) to be executed;
} while (expression);

Example

<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br/>");
do{
  document.write("Current Count : " + count + "<br/>");
  count++;
}while (count < 0);
document.write("Loop stopped!");
//-->
</script>

This will produce following result −

Starting Loop
Current Count : 0
Loop stopped! 

While Loop

The purpose of a while loop is to execute a statement or code block repeatedly as long as expression is true. Once expression becomes false, the loop will be exited.

Syntax

while (expression){
   Statement(s) to be executed if expression is true
}

Example

<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br/>");
while (count < 10){
  document.write("Current Count : " + count + "<br/>");
  count++;
}
document.write("Loop stopped!");
//-->
</script>

This will produce following result −

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped! 

For Loop

The for loop is the most compact form of looping and includes the following three important parts −

• The loop initialization where we initialize our counter to a starting value. The initialization statement is executed before the loop begins.
• The test statement which will test if the given condition is true or not. If condition is true then code given inside the loop will be executed otherwise loop will come out.
• The iteration statement where you can increase or decrease your counter.

Syntax

for (initialization; test condition; iteration statement){
   Statement(s) to be executed if test condition is true
}

Example

<script type="text/javascript">
<!--
var count;
document.write("Starting Loop" + "<br/>");
for(count = 0; count < 10; count++){
  document.write("Current Count : " + count );
  document.write("<br/>");
}
document.write("Loop stopped!");
//-->
</script>

This will produce following result which is similar to while loop −

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped! 

Creating Sample Program

Following is the sample program that shows time, when we click in button.

<html>
<body>
<button onclick="this.innerHTML=Date()">The time is?</button>
<p>Click to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}</script>

<p id="demo"></p>

</body>
</html>

Output