Learn Advanced JavaScript Programming

Here is another example using multiple statements associated with a true condition:

<HTML>
<HEAD>
<TITLE>An if statement with a command block</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

var name = prompt("Enter your name:", "John Doe")

// draw a horizontal rule of the specified width
function drawRule(width) {
 document.write("<HR WIDTH=" + width + "%>")
}

var message = "Click OK if you are using Netscape 3.0 or above"

if (!confirm(message)) {
   document.write("<CENTER><B>")
   document.write("Hello " + name + "!<BR>")
   drawRule(50)
   document.write("Please download the latest ",
  "version of Netscape Navigator")
   document.write("</B></CENTER>")
}

// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Example 8-2 (ex8-2.htm). A conditional statement associated with a command block.

Example 8-2 features an if statement with a set of statements, grouped together in a command block. Notice the function that prints a horizontal rule of a specified width. In this example, the user must reply to two dialog boxes. If the user responds by clicking Cancel to the prompt dialog box, the page looks like this

else Statement

if (condition)
  statement1
else
  statement2

You probably felt limited with the structure of the if statement, because it only lets you execute a statement when the condition is true. The additional else statement specifies a statement that is executed when the condition is false. This construction covers all possibilities, because a condition can be either true or false. Here is a script segment extracted from Example 8-1, improved with an else statement:

var age = parseInt(prompt("Please enter your age:", 120))
if (age < 21)
  alert("Sorry, you are too young to enter")
else
  alert("Welcome in...")

If the user’s age is greater than 21, he receives a welcoming message.

You can write these statements with a command block, using one of the following syntax styles:

if (condition) {
  statements1
} else {
  statements2
}

if (condition) {
  statements1
}
else {
  statements2
}

We prefer the first style, but feel free to choose the second one if you find it more comfortable.

Nested if-else Statements

An if statement can execute any legal statement. Obviously, a simple if statement meets this requirement. Statements inside a command block are called nested statements.

Consider the following function:

function testChar(ch) {
 if (ch >= "A" && ch <= "Z")
  alert("An uppercase letter")
 else
  if (ch >= "a" && ch <= "z")
   alert("A lowercase letter")
  else
   alert("Not a letter")
}

The function accepts a character (a one-character string) as its argument. If the character is greater than A and less than Z, it must be an uppercase letter, and an appropriate message is displayed. Only if the character is not an uppercase letter, the execution continues. If it is a lowercase letter, the appropriate message is provided. Once again, only if it is not a lowercase letter (meaning it is not a letter at all) the execution proceeds. No more tests are performed, so the last message is generated.

This function demonstrates simple nested if-else statements. Only if the condition is false does the execution continue. If, for example, ch is "H", only the first expression is evaluated. The message "An uppercase letter" is displayed, and the other tests are not performed. The following illustration should help you understand how nested if-else statements work (assuming that you do not have any computer programming experience):

Figure 8-5. The structure of nested if-else statements.

Although it is not required, try to put the condition that is most likely to be true as the top condition. If the condition is true, the other tests are not even performed. Such a practice will make your scripts more efficient, especially if the tests are complex.

C++ requires a semicolon after the first statement (statement1). Pascal requires that you do not put one there. JavaScript is friendly—it lets you choose.

Note: Perl is basically designed as a scripting language used to manipulate files and their contents. Therefore, Perl features some unique statements that make the programming process easier. However, these statements are not vital, because they have simple substitutes using more common statements. For example, the elsif statement is a unique feature of Perl, and is not supported by JavaScript. In JavaScript you must use the full else if... to create these nested statements. Another statement supported by Perl but not by JavaScript is the unless statement. This statement reverses the order of the regular if statement; that is, unless the condition is false, the statement block is executed. The following table summarizes most of Perl’s conditional statements and their JavaScript equivalents:

Table of Contents