Information Processing Fundamentals [Session12]JavaScript 2 (Basic syntax, control structure (if, for, etc.))

Conditional Branch Control Statement (if ... else)

[The purpose of this section]
A conditional branch control statement is also called a selection control statement, and in JavaScript, there are an if ... else statement and a switch...case statement, to be used depending on the conditional branch statement. In this section, the if statement is explained.

Basics of if...else Statement

The simplest form of if statement is shown below.

if(evaluation expression value)
   statement 1;

if(evaluation expression value) {
   statement 1;statement 2;...
}

If the value of evaluation expression of an if statement is TRUE, statement 1; or {statement 1;statement 2;...} will be executed. (Note that {statement 1;statement 2;...} is sometimes called a compound control statement.) If the value of the evaluation expression of an if statement is FALSE, the control of JavaScript will move to the next statement of the if statement; that is, the statement designated by the if statement will not be executed.

The if statement also has the form of if...else if...else... statement. This latter may be more general. The exact form will be like the following.

if(evaluation expression1 value) {
   statement 1;
}
else if(evaluation expression2 value) {
   statement 2;statement 3;...
}
else {
   statement 4;statement 5;...
}

If the value of evaluation expression 1 is TRUE, then statement 1; will be executed. Thereafter the JavaScript control will move to the next line of else {...}. This means that neither else if (){...} nor else {...} will be executed.
If the value of evaluation expression 1 is FALSE but the value of evaluation expression 2 is TRUE, then else if (){...} will be executed. This means {statement 2; statement 3;...} will be executed. The statement 1; of the first if statement will be ignored. Upon the execution of {statement 2:statement 3;...}, the control of JavaScript will move to else {...} statement and thereafter.
Furthermore, if both evaluation expression 1 and evaluation expression 2 are FALSE, {statement 4; statement 5;...} after else statement will be executed, and neither statement 1 nor {statement 2; statement 3;...} will be executed; the control will move to the next line of else statement.

Following shows a sample program using an if statement.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="Content-Script-Type" content="text/javascript
 charset=utf-8">
 <title>Experiment of if else statement</title>
</head>
<body>
<h3>Experiment of if else statement</h3>
 <script type="text/javascript">
 <!--
   document.write('<br>');
   k=1;
   if(k==1) {
     document.write(‘k=‘,k,’ This line is displayed if k is 1.’);
     document.write('<br>');
     document.write('<br>');
   }
   i=2;
   if(i==1) {
     document.write(‘i=‘,i,’ This line is displayed if i is 1.’);
     document.write('<br>');
     document.write('<br>');
   }
   else if(i==2) {
     document.write(‘i=‘,i,’ This line is displayed if i is 2.’);
     document.write('<br>');
     document.write('<br>');
   }
   else {
     document.write(‘i=‘,i,’ This line is displayed if i is neither 1 nor 2.’);
     document.write('<br>');
     document.write('<br>');
   }
   j=3;
   if(j>0) {
     document.write(‘j=‘,j,’ This line is displayed if j is larger than 0.’);
     document.write('<br>');
     document.write('<br>');
   }
   else {
     document.write(‘j=‘,j,’ This line is displayed if j is 0 or less.’);
     document.write('<br>');
     document.write('<br>');
  }
 //-->
 </script>
</body>
</html>

→[Check the result by the browser.]

The next section deals with switch...case control statement.