Chapter 5   Statements


JavaScript supports a compact set of statements that you can use to incorporate a great deal of interactivity in Web pages. This chapter provides an overview of these statements.

This chapter contains the following sections, which provide a brief overview of each statement:

• Block Statement: { }

• Conditional Statements: if...else and switch

• Loop Statements: for, while, do while, label, break, and continue (label is not itself a looping statement, but is frequently used with these statements)

• Object Manipulation Statements: for...in and with

• Comments

• Exception Handling Statements: try...catch and throw

Any expression is also a statement. See Chapter 3, "Expressions and Operators," for complete information about statements.

Use the semicolon (;) character to separate statements in JavaScript code.

See the Core JavaScript Reference for details about the statements in this chapter.

Block Statement

---

A block statement is used to group statements. The block is delimited by a pair of curly brackets:

{statement1 statement2 . . .statementn}

Conditional Statements

---

A conditional statement is a set of commands that executes if a specified condition is true. JavaScript supports two conditional statements: if...else and switch.

if...else Statement

Use the if statement to perform certain statements if a logical condition is true; use the optional else clause to perform other statements if the condition is false. An if statement looks as follows:

if (condition) {
   statements1
}
[else {
   statements2
} ]

The condition can be any JavaScript expression that evaluates to true or false. The statements to be executed can be any JavaScript statements, including further nested if statements. If you want to use more than one statement after an if or else statement, you must enclose the statements in curly braces, {}.

You should not use simple assignments in a conditional statement. For example, do not use the following code:

if(x = y)
{
   /* do the right thing */
}

If you need to use an assignment in a conditional statement, put additional parentheses around the assignment. For example, use if( (x = y) ).

Do not confuse the primitive Boolean values true and false with the true and false values of the Boolean object. Any object whose value is not undefined, null, zero, NaN, or the empty string, including a Boolean object whose value is false, evaluates to true when passed to a conditional statement. For example:

var b = new Boolean(false);
if (b) // this condition evaluates to true

Example. In the following example, the function checkData returns true if the number of characters in a Text object is three; otherwise, it displays an alert and returns false.

function checkData () {
   if (document.form1.threeChar.value.length == 3) {
      return true
   } else {
      alert("Enter exactly three characters. " +       
      document.form1.threeChar.value + " is not valid.")
      return false
   }
}

switch Statement

A switch statement allows a program to evaluate an expression and attempt to match the expression's value to a case label. If a match is found, the program executes the associated statement. A switch statement looks as follows:

switch (expression){
   case label :
      statement;
      break;
   case label :
      statement;
      break;
   ...
   default : statement;
}

The program first looks for a label matching the value of expression and then executes the associated statement. If no matching label is found, the program looks for the optional default statement, and if found, executes the associated statement. If no default statement is found, the program continues execution at the statement following the end of switch.

The optional break statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If break is omitted, the program continues execution at the next statement in the switch statement.

Example. In the following example, if expr evaluates to "Bananas", the program matches the value with case "Bananas" and executes the associated statement. When break is encountered, the program terminates switch and executes the statement following switch. If break were omitted, the statement for case "Cherries" would also be executed.

switch (expr) {
   case "Oranges" :
      document.write("Oranges are $0.59 a pound.<BR>");
      break;
   case "Apples" :
      document.write("Apples are $0.32 a pound.<BR>");
      break;
   case "Bananas" :
      document.write("Bananas are $0.48 a pound.<BR>");
      break;
   case "Cherries" :
      document.write("Cherries are $3.00 a pound.<BR>");
      break;
   default :
      document.write("Sorry, we are out of " + i + ".<BR>");
}

document.write("Is there anything else you'd like?<BR>");

Loop Statements

---

A loop is a set of commands that executes repeatedly until a specified condition is met. JavaScript supports the for, do while, and while loop statements, as well as label (label is not itself a looping statement, but is frequently used with these statements). In addition, you can use the break and continue statements within loop statements.

Another statement, for...in, executes statements repeatedly but is used for object manipulation. See Object Manipulation Statements.

for Statement

A for loop repeats until a specified condition evaluates to false. The JavaScript for loop is similar to the Java and C for loop. A for statement looks as follows:

for ([initialExpression]; [condition]; [incrementExpression]) {
   statements
}

When a for loop executes, the following occurs:

1. The initializing expression initial-expression, if any, is executed. This expression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity. This expression can also declare variables.

2. The condition expression is evaluated. If the value of condition is true, the loop statements execute. If the value of condition is false, the for loop terminates. If the condition expression is omitted entirely, the condition is assumed to be true.

3. The statements execute.

4. The update expression incrementExpression, if there is one, executes, and control returns to Step 2.

Example. The following function contains a for statement that counts the number of selected options in a scrolling list (a Select object that allows multiple selections). The for statement declares the variable i and initializes it to zero. It checks that i is less than the number of options in the Select object, performs the succeeding if statement, and increments i by one after each pass through the loop.

<SCRIPT>
function howMany(selectObject) {
   var numberSelected=0;
   for (var i=0; i < selectObject.options.length; i++) {
      if (selectObject.options[i].selected==true)
         numberSelected++;
   }
   return numberSelected;
}

</SCRIPT>
<FORM NAME="selectForm">
<P><B>Choose some music types, then click the button below:</B>
<BR><SELECT NAME="musicTypes" MULTIPLE>
<OPTION SELECTED> R&B
<OPTION> Jazz
<OPTION> Blues
<OPTION> New Age
<OPTION> Classical
<OPTION> Opera
</SELECT>
<P><INPUT TYPE="button" VALUE="How many are selected?"
onClick="alert ('Number of options selected: ' + howMany(document.selectForm.musicTypes))">
</FORM>

do...while Statement

The do...while statement repeats until a specified condition evaluates to false. A do...while statement looks as follows:

do {
   statement
} while (condition)

statement executes once before the condition is checked. If condition is true, the statement executes again. At the end of every execution, the condition is checked. When the condition is false, execution stops and control passes to the statement following do...while.

Example. In the following example, the do loop iterates at least once and reiterates until i is no longer less than 5.

do {
   i+=1;
   document.write(i);
} while (i<5);

while Statement

A while statement executes its statements as long as a specified condition evaluates to true. A while statement looks as follows:

while (condition) {
   statements
}

If the condition becomes false, the statements within the loop stop executing and control passes to the statement following the loop.

The condition test occurs before the statements in the loop are executed. If the condition returns true, the statements are executed and the condition is tested again. If the condition returns false, execution stops and control is passed to the statement following while.

Example 1. The following while loop iterates as long as n is less than three:

n = 0;
x = 0;
while( n < 3 ) {
   n ++;
   x += n;
}

With each iteration, the loop increments n and adds that value to x. Therefore, x and n take on the following values:

• After the first pass: n = 1 and x = 1

• After the second pass: n = 2 and x = 3

• After the third pass: n = 3 and x = 6

After completing the third pass, the condition n < 3 is no longer true, so the loop terminates.

Example 2: infinite loop. Make sure the condition in a loop eventually becomes false; otherwise, the loop will never terminate. The statements in the following while loop execute forever because the condition never becomes false:

while (true) {
   alert("Hello, world") }

label Statement

A label provides a statement with an identifier that lets you refer to it elsewhere in your program. For example, you can use a label to identify a loop, and then use the break or continue statements to indicate whether a program should interrupt the loop or continue its execution.

The syntax of the label statement looks like the following:

label :
   statement

The value of label may be any JavaScript identifier that is not a reserved word. The statement that you identify with a label may be any statement.

Example. In this example, the label markLoop identifies a while loop.

markLoop:
while (theMark == true)
   doSomething();
}

break Statement

Use the break statement to terminate a loop, switch, or label statement.

• When you use break without a label, it terminates the innermost enclosing while, do-while, for, or switch immediately and transfers control to the following statement.

• When you use break with a label, it terminates the specified labeled statement.

The syntax of the break statement looks like this:

1. break
2. break label

The first form of the syntax terminates the innermost enclosing loop or switch; the second form of the syntax terminates the specified enclosing label statement.

Example. The following example iterates through the elements in an array until it finds the index of an element whose value is theValue:

for (i = 0; i < a.length; i++) {
   if (a[i] = theValue)
      break;
}

continue Statement

The continue statement can be used to restart a while, do-while, for, or label statement.

• When you use continue without a label, it terminates the current iteration of the innermost enclosing while, do-while or for statement and continues execution of the loop with the next iteration. In contrast to the break statement, continue does not terminate the execution of the loop entirely. In a while loop, it jumps back to the condition. In a for loop, it jumps to the increment-expression.

• When you use continue with a label, it applies to the looping statement identified with that label.

The syntax of the continue statement looks like the following:

1. continue
2. continue label

Example 1. The following example shows a while loop with a continue statement that executes when the value of i is three. Thus, n takes on the values one, three, seven, and twelve.

i = 0;
n = 0;
while (i < 5) {
   i++;
   if (i == 3)
      continue;
   n += i;
}

Example 2. A statement labeled checkiandj contains a statement labeled checkj. If continue is encountered, the program terminates the current iteration of checkj and begins the next iteration. Each time continue is encountered, checkj reiterates until its condition returns false. When false is returned, the remainder of the checkiandj statement is completed, and checkiandj reiterates until its condition returns false. When false is returned, the program continues at the statement following checkiandj.

If continue had a label of checkiandj, the program would continue at the top of the checkiandj statement.

checkiandj :
   while (i<4) {
      document.write(i + "<BR>");
      i+=1;
      checkj :
         while (j>4) {
            document.write(j + "<BR>");
            j-=1;
            if ((j%2)==0)
               continue checkj;
            document.write(j + " is odd.<BR>");
         }
      document.write("i = " + i + "<br>");
      document.write("j = " + j + "<br>");
   }

Object Manipulation Statements

---

JavaScript uses the for...in and with statements to manipulate objects.

for...in Statement

The for...in statement iterates a specified variable over all the properties of an object. For each distinct property, JavaScript executes the specified statements. A for...in statement looks as follows:

for (variable in object) {
   statements }

Example. The following function takes as its argument an object and the object's name. It then iterates over all the object's properties and returns a string that lists the property names and their values.

function dump_props(obj, obj_name) {
   var result = "";
   for (var i in obj) {
      result += obj_name + "." + i + " = " + obj[i] + "<BR>"
   }
   result += "<HR>";
   return result;
}

For an object car with properties make and model, result would be:

car.make = Ford
car.model = Mustang

with Statement

The with statement establishes the default object for a set of statements. JavaScript looks up any unqualified names within the set of statements to determine if the names are properties of the default object. If an unqualified name matches a property, then the property is used in the statement; otherwise, a local or global variable is used.

A with statement looks as follows:

with (object){
   statements
}

Example. The following with statement specifies that the Math object is the default object. The statements following the with statement refer to the PI property and the cos and sin methods, without specifying an object. JavaScript assumes the Math object for these references.

var a, x, y;;
var r=10
with (Math) {
   a = PI * r * r;
   x = r * cos(PI);
   y = r * sin(PI/2);
}

Note: Using a with statement can significantly slow down your program.

Comments

---

Comments are author notations that explain what a script does. Comments are ignored by the interpreter. JavaScript supports Java and C++-style comments:

• Comments on a single line are preceded by a double-slash (//).

• Comments that span multiple lines are preceded by /* and followed by */:

Example. The following example shows two comments:

// This is a single-line comment.

/* This is a multiple-line comment. It can be of any length, and
you can put whatever you want here. */

Exception Handling Statements

---

You can throw exceptions using the throw statement and handle them using the try...catch statements.

You also use the try...catch statement to handle Java exceptions. See "Handling Java Exceptions in JavaScript" on page 141 and "Handling JavaScript Exceptions in Java" on page 144 for information.

The throw Statement

Use the throw statement to throw an exception. When you throw an exception, you specify an expression containing the value of the exception:

throw expression

The following code throws several exceptions.

throw "Error2";    // generates an exception with a string value
throw 42;          // generates an exception with the value 42
throw true;        // generates an exception with the value true

You can specify an object when you throw an exception. You can then reference the object's properties in the catch block. The following example creates an object myUserException of type UserException and uses it in a throw statement.

// Create an object type UserException
function UserException (message) {
   this.message=message;
   this.name="UserException";
}
// Create an instance of the object type and throw it
myUserException=new UserException("Value too high");
throw myUserException;

The try...catch Statement

The try...catch statement marks a block of statements to try, and specifies one or more responses should an exception be thrown. If an exception is thrown, the try...catch statement catches it.

The try...catch statement consists of a try block, which contains one or more statements, and zero or more catch blocks, containing statements that specify what to do if an exception is thrown in the try block. That is, you want the try block to succeed, and if it does not succeed, you want control to pass to the catch block. If any statement within the try block (or in a function called from within the try block) throws an exception, control immediately shifts to the catch block. If no exception is thrown in the try block succeed, the catch block is skipped. The finally block executes after the try and catch blocks execute but before the statements following the try...catch statement.

The following example uses a try...catch statement. The example calls a function that retrieves a month name from an array based on the value passed to the function. If the value does not correspond to a month number (1-12), an exception is thrown with the value "InvalidMonthNo" and the statements in the catch block set the monthName variable to "unknown".

function getMonthName (mo) {
   mo=mo-1; // Adjust month number for array index (1=Jan, 12=Dec)
   var months=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul",
      "Aug","Sep","Oct","Nov","Dec");
   if (months[mo] != null) {
      return months[mo]
   } else {
      throw "InvalidMonthNo"
   }
}

try {
   // statements to try
   monthName=getMonthName(myMonth) // function could throw exception
}
catch (e) {
   monthName="unknown"
      logMyErrors(e) // pass exception object to error handler
}

The catch Block

You can use a single catch block to handle all exceptions that may be generated in the try block, or you can use separate catch blocks each of which handles a particular type of exception.

Single catch Block
Use a single try...catch statement's catch block (recovery block) to execute error-handling code for any exceptions thrown in the try block.

A single catch block has the following syntax:

catch (catchID) {
   statements
}

The catch block specifies an identifier (catchID in the preceding syntax) that holds the value specified by the throw statement; you can use this identifier to get information about the exception that was thrown. JavaScript creates this identifier when the catch block is entered; the identifier lasts only for the duration of the catch block; after the catch block finishes executing, the identifier is no longer available.

For example, the following code throws an exception. When the exception occurs, control transfers to the catch block.

try {
   throw "myException" // generates an exception
}
catch (e) {
   // statements to handle any exceptions
   logMyErrors(e) // pass exception object to error handler
}

Multiple catch Blocks
A single try statement can contain multiple conditional catch blocks, each of which handles a specific type of exception. In this case, the appropriate conditional catch block is entered only when the exception specified for that block is thrown. You can also include an optional catch-all catch block for all unspecified exceptions as the final catch block in the statement.

For example, the following function invokes three other functions (declared elsewhere), which validate its arguments. If a validation function determines that the component that it is checking is invalid, it returns 0, causing the caller to throw a particular exception.

function getCustInfo(name, id, email)
{
   var n, i, e;

   if (!validate_name(name))
      throw "InvalidNameException"
   else
      n = name;
   if (!validate_id(id))
      throw "InvalidIdException"
   else
      i = id;
   if (!validate_email(email))
      throw "InvalidEmailException"
   else
      e = email;
   cust = (n + " " + i + " " + e);
   return (cust);
}

The conditional catch blocks route control to the appropriate exception handler.

try {

// function could throw three exceptions
   getCustInfo("Lee", 1234, "lee@netscape.com")
}

catch (e if e == "InvalidNameException") {
// call handler for invalid names
bad_name_handler(e)
}

catch (e if e == "InvalidIdException") {
// call handler for invalid ids
bad_id_handler(e)
}

catch (e if e == "InvalidEmailException") {
// call handler for invalid email addresses
bad_email_handler(e)
}

catch (e){
// don't know what to do, but log it
logError(e)
}

The finally Block

The finally block contains statements to execute after the try and catch blocks execute but before the statements following the try...catch statement. The finally block executes whether or not an exception is thrown. If an exception is thrown, the statements in the finally block execute even if no catch block handles the exception.

You can use the finally block to make your script fail gracefully when an exception occurs; for example, you may need to release a resource that your script has tied up. The following example opens a file and then executes statements that use the file (server-side JavaScript allows you to access files). If an exception is thrown while the file is open, the finally block closes the file before the script fails.

openMyFile();
try {
   writeMyFile(theData)
}
finally {
   closeMyFile() // always close the resource
}

Nesting try...catch Statements

You can nest one or more try...catch statements. If an inner try...catch statement does not have a catch block, the enclosing try...catch statement's catch block is checked for a match.