Chapter 8
Control Structures

Dialog Boxes

Before we discuss the control structures in JavaScript, we need some basic user-interaction devices. These will allow us to create both useful and helpful examples, for demonstration purposes. Dialog boxes are only introduced in this chapter. They will be presented later in further detail.

JavaScript provides the ability to create small windows called dialog boxes. You can create small alert boxes, confirm boxes, and even prompt boxes. These boxes let you generate output and receive input from the user.

Alert Boxes

alert(message)

An alert box is the most simple dialog box. It enables you to display a short message to the user in a separate window. We have already used these boxes in previous chapters as a simple output mechanism. Take a look at the following script and its corresponding output:

alert("Click OK to continue...")

Figure 8-1.  An alert box.

alert() is actually a method of the window object. It is not necessary to specify that because window is the default object. The same applies to all dialog boxes.

---

Note:  Netscape Communications Corp. implemented the “JavaScript Alert:.” header for security reasons. It is used to distinguish JavaScript dialog boxes from those created by the operating system, so that the user knows what the source of the message is. JavaScript programmers cannot trick the user into doing something he might not want to do. It also disables the ability to scare the user into giving away personal information. According to JavaScript developers at Netscape, the design of these dialog boxes might change in the future, but Netscape Navigator 2.0x, 3.0x, and 4.0 generate the box in the format illustrated in Figure 8-1. Note that MSIE 3.0 dialog boxes do not include this warning.

---

You can also display messages using data structures. For example:

var message = "Click OK to continue"
alert(message)

As you can see, the alert box is often used to pause the execution of a script until the user approves its continuation.

Confirm Boxes

confirm(message)

Confirm boxes are different from alert boxes in that they evaluate to a value, based on a decision made by the user. Rather than a simple OK button, the confirm box includes both OK and Cancel buttons.

Like the alert box, confirm is also a method of the window object. This method returns a Boolean value, because there are two options. You can use confirmation boxes to ask the user a yes-or-no question, or to confirm an action. Here is an example and its output:

var reply = confirm("OK to continue?")

Figure 8-2.  A confirm box.

reply is assigned a true value if the user chooses OK, and false if the user selects Cancel.

Prompt Boxes

prompt(message[, inputDefault])

The prompt() method displays a prompt dialog box with a message and an input field. You can use these boxes to receive input from the user. It is similar to the confirm box, except that it returns the value of the input field, rather than true or false. Here is an example:

var name = prompt("Enter your name:", "anonymous")

Figure 8-3.  A prompt box.

The method returns a value of null if the user chooses Cancel.

The value of the field is always a string. If the user enters 16 in the form, the string "16" is returned rather than the number 16. When you want to prompt the user for a number, you must convert the input into a numeric value. JavaScript features a built-in function that does this—parseInt(). You can use the following statement to ask the user for a number:

var number = parseInt(prompt("Enter a number:", 0))

or

var number = prompt("Enter a number:", 0)
number = parseInt(number)

You can see that this function works by using the typeof operator for testing:

var number = prompt("Enter a number:", 0)
alert(number, " is a ", typeof number) // "... is a string"
number = parseInt(number)
alert(number, " is a ", typeof number) // "... is a number"

The input must be of a numeric type, of course (e.g., 99). The parseInt function is discussed later in detail, mostly in Chapter 16, Handling Strings.

if Statement

if (condition)
   statement

The if statement lets you put decision making in your scripts. A script without any decisions does the same procedure each time it is executed. Such linear structures limit your scripts to simple algorithms. JavaScript enables decision making using an if statement. if statements associate a single statement with a true condition. That statement is only executed if the conditional expression is true, and otherwise it is not executed at all. The condition must evaluate to a Boolean value: true or false. Numeric values are also acceptable as an alternative to a Boolean condition. 0 is equivalent to false, and all other values are equivalent to true.

The if statement associates a single statement with a true condition. A statement can be anything from a simple document.write() to a block of statements, using curly braces ({}). Some if statements require multiple statements, so they use a block in the following form:

if (condition) {
   statement1
   statement2
   statement3
   .
   .
   .
}

A nested statement can be any legal statement, including an additional if statement. Here is a simple example demonstrating the if statement:

<HTML>
<HEAD>
<TITLE>A simple if statement</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

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

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

Example 8-1 (ex8-1.htm). A script with one conditional statement.

At first, the script asks the user for his or her age. The age is stored in numeric format in the variable age. The if statement checks if the user’s age is less than 21. If so, the expression age < 21 evaluates to true. Because the condition is true, the following statement is executed, and an alert box is displayed. Note that if the value of age is greater than or equal to 21, no statements are executed. The remedy to this problem is presented in the next section.