Chapter 5. JavaScript Structures

CONTENTS

CONTENTS>>

Statements in Sequential Structures
Conditional Structures
Loops
The with Statement
The label andcontinue Statements and Nested Loops
Summary

As seen in Chapter 4, "Using Operators and 4," operators are the building blocks of expressions. In some respects, expressions are the building blocks of statements; however, expressions themselves can be statements, so it would be tautological to say that expressions build statements.

A better way to understand statements can be found in the three basic structures in JavaScript and just about every other programming language. The three structures are as follows:

Sequences
Branches
Loops (iterative)

All statements in JavaScript fall into one of those structural categories, with the possible exception of functions. Functions are encapsulated statements or compound statements, but the statements within a function are one of the three structures. So, a function, too, is made up of one or more of the basic structures.

Scripts and functions can use single or compound structures. A compound structure is simply a structure that uses two or more of the three basic structures. Most scripts do. For example, the following script uses all three structures:

<html>  <head>  <title>Compound Structure</title>  <script language="JavaScript">  var counter = 0; //Sequence  var endIt = 14;  while (counter < endIt) {        //Loop begins        if (counter == 7) {             //Conditional begins              alert("You are half way through");              }                       //Conditional ends        counter++;  }                               //Loop ends  var message="Counter value is now:" + counter;  document.write(message);  </script>  </head>  <body bgcolor="antiquewhite">  </body>  </html>

Absolutely no conflicts exist between structures, and one structure can be used in conjunction with or even inside (nested) another. For example, in the previous script, a conditional structure is nested inside a loop structure.

Getting back to what a statement is, just about any line of code in a JavaScript program is a statement. The keywords and combination of expressions, or even expressions themselves, can be statements. Some statements have a commandlike consequence (operations), while others define and redefine variables and objects. Still others perform transformations and calculations.

Statements in Sequential Structures

Sequential structures refer to the order in which the code is entered into a JavaScript program. In one sense, all code is sequential, but I am using the structure to differentiate it from statements that loop or conditionally execute lines of code.

Variable Declarations and Assignments

A simple statement that declares a variable using var is all that a variable declaration does. Typically, a variable is declared and assigned a value at the same time; however, technically, the two types of statements are different. For example, a perfectly legitimate variable declaration is this one:

var myFineVariable; //Declaration

Later in the script, the developer may assign a value to the declared variable. For example, she might write this, without having to use the var keyword:

myFineVariable = alpha + beta; //Assignment

The assignment statement assigns a value, and a declaration statement makes the variable part of the script. (Even though the declaration statement is optional in JavaScript, use it always. Among other things, you can avoid confusion that might arise between global and local variables.) The assignment of the variables alpha and beta assumes that in the sequence of the script, both alpha and beta have been declared and assigned values themselves. Hence this sequence must precede that assignment of those variables to another variable:

var alpha= 5;  var beta= " de Mayo";

Function Definitions

A second type of definition statement in JavaScript is the function definition. Unlike the optional var keyword, the function keyword is absolutely required in JavaScript. This form is used to define all functions:

function functionName(optional argument) {       Statements  }

An argument is optional after the function name, but the parentheses are required. For example, the following script illustrates a function definition statement with no arguments:

<html>  <head>  <title>Function No Arguments</title>  <script language="JavaScript">  function hiThere( ) {       document.write("Hi there!");        }  hiThere( );  </script>  </head>  <body bgcolor="lavender">  </body>  </html>

In other cases, you probably will want to provide arguments because the parameters change. For example, the following script has a function that measures the cubic inches for a dog crate. The arguments are for x, y, and z dimensions representing width, height, and depth. By adding the optional arguments in a function, it's easy to use the same function to find different dimensions.

<html>  <head>  <title>Function With Arguments</title>  <script language="JavaScript">  function dogCrate(x,y,z) {       var size = x * y * z;  var message="Your pup will have " + size;  message += " square inches in the crate.";  document.write(message);        }  dogCrate(15,30,50);  </script>  </head>  <body bgcolor="tan">  </body>  </html>

The sequence of statements within the function follows the same rules as a sequence outside of a function. Within the curly braces, the multiple statement creates a compound statement.

Function Calls

In previous chapters, a common function call has been this:

alert("Some message");

Function calls in a script include both built-in and user-built functions. Many of the built-in functions might look not like functions, but like methods in objects. However, the Math object is a placeholder for functions and constants. For examples, the following script uses a function call as part of a variable assignment:

<html>  <head>  <title>Calling Function</title>  <script language="JavaScript">  var BidA="33";  var BidB="24";  var bestBid=Math.max(BidA,BidB);  var message ="The best bid is $" + bestBid;  document.write(message);  </script>  </head>  <body bgcolor="lightcyan">  </body>  </html>

Because most built-in functions will not return anything that you can use unless you put the return into a variable, a function call by itself won't help much. For example, this line:

Math.max(BidA,BidB);

is equivalent to typing

33;

Nothing happens. Function calls to alert( ), prompt( ), and confirm( ), plus user functions with an output statement, can create a return that can be displayed on the screen. Or, as in the previous script, the function call is assigned to a variable.

Increment/Decrement Statements

In examining operators in the previous chapter, both the increment (++) and decrement (- -) operators were discussed. Whenever they are used in a lines, such as this one, they constitute an increment/decrement statement:

addOne++;  - -dropOne;

Usually, you will find these statements as a part of a loop statement.

Conditional Structures

The "thinking" structure in JavaScript is found in the different types of conditional statements in the language. Used in concert with different types of comparative operators, conditional statements take the script on different routes, depending on what conditions have been met.

At the same time that JavaScript has a thinking structure, so should designers. The ability to fluently write your own scripts rather than cutting and pasting someone else's design frees you from that person's vision of a page or page component. Let JavaScript figure out what the user is doing, and provide the user with an interesting response from JavaScript rather than something that you don't understand but can only cut and paste.

The if Statement

When testing for a condition to execute one or more statements, the if statement is the most common to use. It has the following general format:

If (condition) {       Conditional Statement(s)  }

The conditional statement is executed only if the condition resolves to a Boolean true. Otherwise, the script continues to the next line after the second curly brace.

Single or multiple conditions can be a part of the triggering condition. The following script contains a single condition that resolves as false so that the conditional statement is not executed.

<html>  <head>  <title>False Condition</title>  <script language="JavaScript">  var alpha="High";  var beta="Low";  var message="The condition is not met";  if(alpha > beta) {       message="The condition is met";        }  document.write(message);  </script>  </head>  <body bgcolor="mediumspringgreen">  </body>  </html>

The expression found to be false is the condition that the variable alpha is greater than the variable beta. Because beta's value is Low and alpha's value is High, and because letters higher in the alphabet are resolved to be greater than letters lower in the alphabet, the false Boolean value prevented the script from executing the conditional statement. When the condition is changed to this:

if(beta >alpha) {

the condition is found to be true, and the value of the variable message is changed to "The condition is met," and that's what appears on the screen.

Multiple statements (compound statements) may appear within the curly braces in an if statement, allowing several different events to occur. For example, the following example has three different statements when a condition is met in the if statement:

<html>  <head>  <title>Multiple Statements in Conditional</title>  <script language="JavaScript">  var alpha="Zebras";  var beta="Monkeys";  if(alpha > beta) { //"Zebras" are greater than "Monkeys" because 'Z' is further up the alphabet than 'M.'  var polite="Please enter your name:"  var yourName=prompt(polite);  alert("Hiya " + yourName);  }  </script>  </head>  <body bgcolor="beige">  </body>  </html>

The else Keyword

The limitation of the if statement by itself is that no alternative branch is made available for a false condition. So another keyword, else, had to be added as an alternative form of if. The following format uses two sets of curly braces:

if (condition) {       Conditional statement(s)  } else {       Different conditional statement(s)  }

For example, in the following example, a Boolean outcome forces a different branch (conditional statement) for a true or false value:

<html>  <head>  <title>If Else</title>  <script language="JavaScript">  var stillSmokin="cough";  var quitSmokin="freeAtLast";  if(stillSmokin > quitSmokin) {       alert("You\'re going to die too soon fool!");        } else {       alert("Way to go Jack!");  }  </script>  </head>  <body bgcolor="whitesmoke">  </body>  </html>

In scripts with user input, such as forms or prompt functions, the else option provides a step for a second type of feedback. When the parser (interpreter) is going through the code line by line, the else statement is interpreted only if the first condition is false.

The else if Convention

Sometimes several options must be considered and several alternatives must be provided. The else if "statement" combines the if keyword and the else keyword into a conventionally used pair to create a unique statement. Combining else and if beyond a single if keyword differentiates it from the standard combination of if and else. Consider the following else if format:

if (condition1) {       Conditional statement/s 1;  }  else if (condition2) {       Conditional statement/s 2;  }  else {       Conditional statement/s 3;  }

Because the else if "statement" is not a unique JavaScript word but rather is a programming convention, what is really happening is that the first if statement can be used with the first else statement. The else branch is to another if statement. Therefore, the last statement in an else if sequence is the lone else statement.

<html>  <head>  <title>else if Structure</title>  <script language="JavaScript">  var puppy=prompt("What kind of pup would you like?","");  var puppyLC=puppy.toLowerCase( );  if(puppyLC=="greater swiss mountain dog") {        alert("Yes we have Swissies!");         }         else if(puppyLC=="great dane") {              alert("Yes we have those big wonderful Great Danes!");               }         else if(puppyLC=="irish wolfhound") {              alert("Yes we have the Gentle Giants!");               }         else {              alert("Sorry we only have giant dogs.");               puppy="information where to find that breed";              }  var message="<p>Come get your <b>" + puppy;  message +="</b> at<h3>Goliath\'s Breeders</h3>";  document.write(message);  </script>  </head>  <body bgcolor="palegreen">  </body>  </html>

The final else statement is typically used as a residual category, one in which the if statements exhausted the categories provided in the series of else if combinations. It works like a "none of the above" selection in a multiple-choice quiz.

Using switch, case, and break

The series of else if combination statements makes multiple comparisons against a condition. JavaScript provides an alternative to the repeated checking conditions using the switch and case statements:

switch(expression) { case alpha:        Alpha statements execute        break;      // skip the other cases if case alpha==expression  case beta:        Beta statements execute        break;      // skip the other cases if case beta==expression  default:     //if no matches execute this        Tell user that nothing matches  }

To see how the switch and case keywords work together in a script, the next script takes a similar topic as was done with the else if statements. Using switch and case as statements, the switch statement includes what amounts to a true condition to be matched with the different cases. In most real-world applications of switch, the contents of the expression in the switch statement would be based on data from external input by a user.

If the case matches the expression in the switch statement, the statements in that case are executed. Then the parser moves down to the next line and into the next case statement. To prevent that from happening, one of the statements within each case should be break. Because the break statement is executed only if the case statement for that segment of the script is true, the only time that break will affect the parsing of the script is when the condition that is sought in the switch statement has been found. Thus, when case resolves as true, break moves the script execution out of the larger switch condition (beyond the closing curly brace) and on to the next line of JavaScript.

<html>  <head>  <script language ="JavaScript">  var puppy="Irish Wolfhound";  puppy=puppy.toLowerCase( );  var found;  switch(puppy) { case 'great dane':  alert("Big Guy Breeders have Great Danes");  found="Big Guy Breeders phone: 555-9943";  break;  case 'irish wolfhound':  alert("Gentle Giant Breeders have Irish Wolfhounds");  found="Gentle Giant Breeders phone: 555-1912";  break;  case 'greater swiss mountain dog':  alert("The Swissy Center Breeders have Greater Swiss Mountain Dogs");  found="The Swissy Center Breeders phone: 555-5432";  break;  default:  alert("Contact the American Kennel Club for other breeds and breeders.");  found="American Kennel Club: 555-8989";  }  var message="<p><p>Be sure to contact them as soon as possible";  message +="<h2>" + found + "</h2>"  document.write(message);  </script>  </head>  <body bgcolor="lightgreen">  </body>  </html>

NOTE

Using break is sometimes associated with poor programming practices, and it generally should be avoided in conditional statements, especially for novices. However, the break keyword is a perfectly legitimate one and has useful applications that conform with good programming; using break with switch and case is a good example of the break keyword's appropriate use.

Placing the break at the end of every case within a switch statement is optional, but doing so is good practice to save processing time and protect against errors. Some uses of case and switch might mitigate against using break (for example, you might have more than a single matching case and want to launch different actions from within a switch statement with more than a single case), but, for the most part, using break with switch and case is a good practice.

Conditional Shortcuts

Ternary conditional operators were discussed in Chapter 4. As a reminder, a ternary conditional can be substituted for a simple if / else statement. For example, both of the following scripts do the same thing, except that the ternary conditional is far more concise.

Ternary Shortcut

2 > 3 ? alert("It is true") : alert("Not true!");

Standard if/else Statement

if(2 > 3) {       alert("It is true");        } else {       alert("Not true!");  }

You can save some coding time with the ternary operator conditional shortcut, and while it is perhaps not as clear as the standard if / else statement, once you get used to using the shortcut, you will find it helpful to get through a project quickly. The following script shows how the ternary shortcut appears in the context of a script:

<html>  <head>  <title>Conditional Shortcut</title>  <script language="JavaScript">  2 > 3 ? alert("It is true") : alert("Not true!");  </script>  </head>  <body>  </body>  </html>

Loops

Loops in JavaScript are similar to loops in C++ and Java and most other languages using loop structures. In this section, you will find explanations of the different types of loops in JavaScript and suggestions where they are typically used most effectively in a script. In previous chapters, several examples used loop structures to illustrate how to employ operators and variables. Now in this section, the loop structures themselves are the focal point of discussion.

The for Loop

One of the most used and familiar loops is the for loop. This loop iterates through a sequence of statements for a number of times determined by a condition. The condition can be a constant based on a numeric literal (a number) or a constant (that is, a math constant), or the loop can be variable depending on the count in the variable. The general format is shown here:

for(start value; termination condition; increment/decrement) {       Statements        }

The start value is the initial value of a counter variable. The first time through the loop, the counter value will be based on the start value. The termination condition is a test to determine whether the counter variable has met the condition that terminates the loop. The increment/decrement determines how much has been added or subtracted from the counter variable. A typical use for a loop is to examine characters in a string. The length of the string is used as the termination condition, and each character is based on its linear position in the string.

<html>  <head>  <title>For Loop</title>  <script language="JavaScript">  var found = "Email address is missing @ symbol.";  var emailAd=prompt("Please enter your email address:","");  for (var counter=0; counter <= emailAd.length; counter++) { //The charAt(n) function looks at the character 'n' in the string              var findAt=emailAd.charAt(counter);                    if (findAt=="@") {                               found="Email address has @ symbol";                    }  }  document.write(found);  </script>  </head>  <body bgColor="powderblue">  </body>  </html>

Because the length of the string is a variable, the termination condition uses the length of the string rather than a literal value. In this particular example, all that the script is attempting to do is verify whether the user remembered to put in the "@" when she entered her email address.

The for/in Loop

A second format used with the for keyword in a loop is the for / in statement. When the for / in statement is used, the counter and termination are determined by the length of the object. The general format is shown here:

for (counter variable in object) {       Statement  }

You do not need to know the number of properties in the object using for / in because the statement begins with 0 as the initial value of a counter variable and terminates the loop when all of the properties of the objects have been exhausted. For example, using an array object, the following loop begins with the first element of the array named airplane and keeps looping until no more elements are found in the array:

<html>  <head>  <title>For Loop</title>  <script language="JavaScript">  var airFlock="";  var airplane = new Array("Cessna","Piper","Maule","Mooney","Boeing");  for (var counter in airplane) {       airFlock += airplane[counter] + "<br>";  }  document.write(airFlock);  </script>  </head>  <body bgColor="powderblue">  </body>  </html>

Because variables are objects in JavaScript, each character of a string variable is a property of the variable. Rewriting the script used to illustrate how a for loop works, the following for / in loop requires a simpler statement to arrive at the same results:

<html>  <head>  <title>Search For/In</title>  <script language="JavaScript">  var complete="You are missing the @ character in your email address.";  var emailAd = prompt("Enter your email address","");  for (var counter in emailAd) {       if (emailAd[counter]=="@") {             complete="You included your @ character.";        }  }  document.write(complete);  </script>  </head>  <body bgColor="aliceblue">  </body>  </html>

Using the for / in loop in simple strings is just as effective as its use in other objects that contain properties.

The while Loop

The while loop begins with a termination condition and keeps looping until the termination condition is met. The counter variable initialization and the counter increment/decrement are handled within the context of the while statement (that is, within the curly braces), but they are not part of the initial statement itself. The general format for the while loop is shown here:

initial value declaration  while (termination condition) {       statements        increment/decrement statement  }

As long as the termination condition is not met, the statements are executed and the counter variable increases or decreases in value. The following example illustrates the counter variable decrementing in steps of 5:

<html>  <head>  <title>While Loop</title>  <script language="JavaScript">  var counter = 50;  var teamGroups="";  while(counter > 0) {       teamGroups +="Team " + counter + "<br>";        counter -= 5;  }  document.write(teamGroups);  </script>  </head>  <body bgColor="teal">  </body>  </html>

The output to the screen is as shown:

Team 50  Team 45  Team 40  Team 35  Team 30  Team 25  Team 20  Team 15  Team 10  Team 5

The fact that no Team 0 exists is important. As soon as the termination condition returned a Boolean false, the loop was immediately terminated and the script jumped over the statements within the loop and executed the next line. Had the termination condition been this, a Team 0 would have been included in the output:

while(counter >= 0) {

The do/while Loop

Unlike the while loop, the do / while loop always executes statements in the loop in the first iteration of the loop. Instead of the termination condition being at the top of the loop, it is at the bottom. The general format looks like the following:

do {         statements          counter increment/decrement  } while(termination condition)

The keyword while is outside the curly braces beginning after the do keyword. Because arrays are commonly used with loops, the following shows a do / while loop extracting the properties of an array:

<html>  <head>  <title>Do/While Loop</title>  <script language="JavaScript">  var bigCities= new Array("Beijing", "Tokyo", "Mexico City", "New York", "Los  Angeles", "London", "Berlin", "Bloomfield")  var counter=0;  var metropolis="";  bigCities.sort( );  do {       metropolis += bigCities[counter] + "<br>";        counter++  } while (counter < bigCities.length)  document.write(metropolis);  </script>  </head>  <body bgColor="cornsilk">  </body>  </html>

The sorting statement, bigCities.sort( ), puts the array elements into alphabetical order before the array is placed in the loop. Then the loop iterates until the counter variable returns a Boolean false based on the length of the array. Because the elements have been arranged alphabetically, the output is arranged alphabetically, as the following shows:

Beijing  Berlin  Bloomfield  London  Los Angeles  Mexico City  New York  Tokyo

The with Statement

Like the ternary conditional operator, the with statement is a shortcut. Instead of having to list all of the properties of an object by repeating the basic object, you can state the bulk of the object in a with statement and then the properties within the context of the with statement. For example, take a typical form object. First you must state the object as follows:

document.formName...

Then you follow with the element names and values:

 elementName.value

Thus, your statement would be

document.formName,elementName.value

A typical form could include several different elements, such a first name, last name, address, city, state, ZIP code, Social Security number, and all other kinds of property details. Using the with statement, you can specify the object name once and then follow it with all of the properties and their values in this format:

with (object) { statements with properties only  }

The statements are typically property values. In the following simple example, the script uses a single with statement and then places the property values of the object in the statements within the with context:

<html>  <head>  <title>with</title>  <script language="JavaScript">  function showEm(){       with (document.customer) {       var alpha=fname.value;        var beta=lname.value;        var gamma=address.value;        var delta=city.value;        var epsilon=state.value;  }  var fullName=alpha + " " + beta + "\n";  var livesHere=gamma + "\n" + delta + ", " + epsilon;  alert(fullName + livesHere);  }  </script>  </head>  <body bgColor="cornsilk">  <form name="customer">  <input type=text name="fname"> First Name:  <input type=text name="lname"> Last Name:  <br>  <input type=text name="address"> Address:  <br>  <input type=text name="city"> City:  <input type=text name="state" size=2> State:  <p>  <input type=button value="Click Here" onClick="showEm()">  </body>  </html>

When and where to best use the with statement depends on the application, but, as can be seen from the example, it helps to clean up and simplify references to multiple properties in an object. Figure 5.1 shows the output in a browser.

Figure 5.1. When using forms containing multiple properties, consider using the `with` statement.

graphics/05fig01.gif

The label and continue Statements and Nested Loops

The label statement does not inherently go with the continue statement but, like discussing break with switch and case, you might find it useful to see the statements used in a mutual context. Likewise, nested loops typically are written without either label or continue statements, but they serve as a useful structure to help explain how to effectively use continue.

For the most part, I don't use continue because, like the break statement, it can signal sloppy programming practices and poor planning. However, when used appropriately and in the right context, continue can be a valuable programming option. The statement jumps out of sequence in a loop structure, but, unlike break, which exits the loop, continue jumps to test the termination condition of the loop, effectively skipping the current iteration of statements within the loop.

Consider a program in which a baseball team is sequentially given jersey numbers except for the numbers of specially recognized players whose numbers have been retired. Within a loop, the continue statement can jump to the beginning of the loop when any of the retired numbers are found in the loop. Furthermore, you have more than a single team, and the second team has the same number of players and uses the same jersey numbers. The first loop (outer) keeps track of the teams, and the second loop (inner) keeps track of the players and jerseys that they will be getting. When one loop resides inside another loop, it's called a nested loop.

In JavaScript, labels are not statements, but rather identifiers. If you have ever programmed in Basic, in which line numbers or labels are used to reference a line of code, you know what labels are. They are places in the script where the program can branch if a statement tells it to do so. The format for a label is as follows:

label:  statements

In some respects, labels can be used like comments to help you organize your scripts, but they also can be used in conjunction with continue to send the program to execute the labeled portion of the script. Because the continue statement can be used only in loops, labeling the loops helps to control what the program will do. In the following script, the two loops are labeled team and jersey. Within the jersey loop is a conditional statement using continue that prevents the retired team numbers from being used. Note that the continue statement commands a jump to the beginning of the jersey loop, not the team loop. After you run the script, change the label next to continue from jersey to team.

<html>  <head>  <title>Using Continue and Labels</title>  <script language="JavaScript">  var teamJ="";  var teamMember=0;  team:       for(var outCount=1;outCount<3;outCount++) {            jersey:                   for(var inCount=20;inCount<35;inCount++) {                        if(inCount==22 || inCount==29 || inCount==30) {                              continue jersey;                         }                   if (teamMember==12) {                  teamMember=0;                   }                                      teamMember++;       teamJ += "Team" + outCount + "Member " + teamMember + " Jersey Number " + inCount +       "<br>";       }  }  document.write(teamJ);  </script>  </head>  <body bgColor="mediumspringgreen">  </body>  </html>

The script output should look like the following:

Team1 Member 1 Jersey Number 20     Team1 Member 2 Jersey Number 21     Team1 Member 3 Jersey Number 23     Team1 Member 4 Jersey Number 24     Team1 Member 5 Jersey Number 25     Team1 Member 6 Jersey Number 26     Team1 Member 7 Jersey Number 27     Team1 Member 8 Jersey Number 28     Team1 Member 9 Jersey Number 31     Team1 Member 10 Jersey Number 32     Team1 Member 11 Jersey Number 33     Team1 Member 12 Jersey Number 34     Team2 Member 1 Jersey Number 20     Team2 Member 2 Jersey Number 21

It finishes with Member 12, and then starts over with Member 1.

Notice how all of the retired jersey numbers were omitted in the assignments for both teams. Now change this line:

continue jersey;

continue team;

When you run the program a second time, the output shows only the following four lines:

Team1 Member 1 Jersey Number 20     Team1 Member 2 Jersey Number 21     Team2 Member 3 Jersey Number 20     Team2 Member 4 Jersey Number 21

The reason that the second script produces only four lines in the browser window is that, as soon as the first retired number was detected, the program branched to the outer loop (team), incremented the value of the counter, and ended when the second reserved number was found because it had reached the termination condition. So, as you can see, depending on which label the continue statement branches to, very different outcomes are produced.

Summary

The three basic structures of sequence, branch, and loop are well represented in the rich assortment of statements in JavaScript. Knowing how and when to use the different structures and the set of statements that create the structures along with the operators and expressions makes up the heart of any language and certainly JavaScript. Throughout the remainder of the book, the set of statements discussed in this chapter and the operators from the previous chapter are used repeatedly. All of the objects and functions, other than those that are built into JavaScript, employ different combinations of statements and operators discussed up to this point. In the next chapter on functions, the bulk of the discussion is centered on how to use statements to create different functions using the operators and expressions discussed up to this point.