... in Java by Richard G Baldwin

Richard G Baldwin (512) 223-4758, baldwin@austin.cc.tx.us, http://www.austin.cc.tx.us/baldwin/

JavaScript Programming, Flow of Control

Java/Web Programming, Lecture Notes # 2120, Revised 05/23/98.

Preface
Introduction
Flow of Control

The if-else Statement
The switch-case Statement
The while Statement
The do-while Statement
The for Statement
The Semicolon
The break and continue Statements
Unlabeled break and continue
The Label Statement
The return Statement

Preface

The material was prepared as part of a new tutorial that I plan to publish on Web programming in general. It is not part of the Java academic curriculum at ACC.

The purpose of this series of lessons is to teach you how to program in JavaScript. The goal is to provide a programming tutorial that will be accessible to persons with no programming experience and will be equally useful to persons who already have programming experience using JavaScript or some other language.

Introduction

Earlier lessons have pointed out that expressions are combined to create statements and statements are combined to create programs. Flow of Control is the jargon normally used to describe the order in which the statements in a script are executed.

Although you don't hear too much about it these days, programming instructors used to make a big deal about sequence, selection, and loop. (That was back when there wasn't much else to make a big deal about.) Programming these days involves so many new and more complex abstract concepts that these three have been relegated to the appendix in many books on computer programming.

The concept here is that the statements in a script are executed in sequence until a point is reached where it is necessary to either select a fork in the road, or loop and repeat the execution of a given set of statements more than once.

I recall one Pascal programming book using an analogy something like:

Sequence is like driving down the freeway looking for your exit.
Selection is like taking the exit from the freeway.
Loop is like driving around the block looking for a parking place.

This is actually not a bad analogy if it helps you to get a feel for how programs execute.

This lesson will be primarily concerned with learning about the flow of control in JavaScript.

Flow of Control

JavaScript supports several different kinds of statements designed to alter or control the logical flow of control in the script. You might be interested in knowing that these statements in JavaScript largely mimic the same capability in Java and C++. Thus, once you have mastered them in JavaScript, you have a head start on learning how to program in either or both of these other two important languages, and probably many other languages as well.

The following table is a partial list of the statements supported by JavaScript for controlling the logical flow of the script. Some additional statements will be presented in conjunction with the study of objects.

Statement Type

if-else selection

switch-case selection

for loop

while loop

do-while loop

break miscellaneous

continue miscellaneous

label miscellaneous

return miscellaneous

Each of these statements will be covered in this lesson, but not necessarily in the order given in the table.

The if-else Statement

According to Netscape: "A conditional statement is a set of commands that executes if a specified condition is true."

JavaScript supports two conditional statements:

if-else
switch

The general syntax of the if statement is as shown below.

if(conditional expression)
  statement or compound statement;
else //optional
  statement or compound statement; //optional

In plain English, this says: If the conditional expression evaluates to true, execute the statement or compound statement that follow it. Otherwise, execute the statement or compound statement that follows the else.

A compound statement is one or more individual statements enclosed in curly braces {} and treated as a group. This is often called a block in some languages.

The following sample script illustrates the behavior of the if-else statement.

 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript1.2">  if(x<y){ document.write("x is less than y<BR>"); document.write("Second statement in compound statement<BR>"); }//end compound statement for if  if(x < y) document.write("if branch, x is less than y<BR>") else document.write("else branch, x is not less than y<BR>");  if(x > y) document.write("if branch, x is greater than y<BR>"); else document.write("else branch, x is not greater than y<BR>"); // End hiding --> </SCRIPT> </HEAD> <BODY> <P> Done. </BODY> </HTML>

According to Netscape:

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, {}.

This is really a very simple concept and is a representation of the types of decisions that we make on a daily basis such as: If it is not rush hour, take the freeway, otherwise, take the slower neighborhood streets. I seem to recall a language from the earlier days of programming that used otherwise. Apparently it was replaced by else to reduce the typing effort.

The switch-case Statement

The general syntax of the switch-case statement is as follows.

switch(expression){
  case constant:
    //sequence of optional statements
    break; //optional
  case constant:
    //sequence of optional statements
    break; //optional
.
.
.
  default //optional
    //sequence of optional statements
}

The expression is evaluated and an attempt is made to match the result against one of the constant values following the case keywords. If a match is made, the statements following the constant are executed.

In JavaScript, the constant can be of numeric, string, or boolean type. In the case of boolean, it is similar to an if-else statement.

Because of accuracy considerations, you should probably avoid using numeric values having fractional parts that have been previously calculated for matching purposes. A very small difference in two calculated values could prevent a match.

Execution of statements continues until the optional break is encountered. When break is encountered, execution of the switch statement is terminated and control is passed to the next statement following the switch statement.

If no match is found and the optional default keyword along with a sequence of optional statements has been provided, those statements will be executed.

Switch statements can be nested as illustrated in the follow script. This script also illustrates what can happen if you forget to include the break statement. Note the line of output from this script that states that 8matches 9. This is the result of neglecting to include the break where appropriate and two statements were executed instead of just the one that should have been executed.

Note that it is not necessary to include multiple statements inside of curly braces {} to cause multiple statements to be executed inside of a switch statement.

 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript1.2">  x = 5; switch(x){ case 4: document.write(x + " matches 4");break case 5: document.write(x + " matches 5");break case 6: document.write(x + " matches 6");break default: document.write("No match found for " + x); }//end switch statement document.write("<BR>");  x = 3; switch(x){ case 4: document.write(x + " matches 4");break case 5: document.write(x + " matches 5");break case 6: document.write(x + " matches 6");break default: document.write("No match found for " + x); }//end switch statement document.write("<BR>");  x = "cat"; switch(x){ case "dog": document.write(x + " matches dog");break case "cat": document.write(x + " matches cat");break case "rat": document.write(x + " matches rat");break default: document.write("No match found for " + x); }//end switch statement document.write("<BR>");  x = "pig"; switch(x){ case "dog": document.write(x + " matches dog");break case "cat": document.write(x + " matches cat");break case "rat": document.write(x + " matches rat");break default: document.write("No match found for " + x); }//end switch statement document.write("<BR>");  x = "true"; switch(x){ case "true": document.write(x + " matches true");break case "false": document.write(x + " matches false");break }//end switch statement document.write("<BR>");  x = "false", y = 8; switch(x){ case "true": document.write(x + " matches true<BR>");//no break here switch(y){ case 8: document.write(y + "matches 8<BR>");//no break case 9: document.write(y + "matches 9<BR>"); }//end nested switch statement case "false": document.write(x + " matches false<BR>");//no break here switch(y){ case 8: document.write(y + "matches 8<BR>");//no break case 9: document.write(y + "matches 9<BR>"); }//end nested switch statement }//end switch statement document.write("<BR>"); // End hiding --> </SCRIPT> </HEAD> <BODY> <P> Done. </BODY> </HTML>

JavaScript also supports labeled break statements. This capability can be used to cause JavaScript to exhibit different behavior when switch statements are nested. The use of labeled break will be explained more fully in a later section of this lesson.

The while Statement

A loop is a set of commands that executes repeatedly until a specified condition is met. JavaScript supports three loop statements:

for
while
do-while

You can use the break and continue statements as well as labeled break and continue within loop statements.

A while statement executes its statements as long as a specified condition evaluates to true. It is probably the most straightforward of the three types of loops listed above.

The general syntax of a while statement is as follows

while (conditional expression) statement or compound statement;

When the conditional expression evaluates to false, control will pass to the next statement following the while statement. while statements can be nested inside of other statements, including other while statements.

As with all loop statements, you must be careful to make certain that the conditional expression eventually evaluates to false. Otherwise, control will be trapped inside the while statement in what is commonly called an infinite loop.

The while statement is used to form an entry condition loop. The significance of an entry condition loop is that the conditional expression is tested before the statements in the body of the loop are executed. If it tests false initially, the statements in the loop will not be executed.

The following script illustrates the use of a simple while loop. This script initializes the value of a counter to 4 and then loops while the value of the counter is greater than 0.

During each pass through the loop (commonly called an iteration), a decrement instruction is used to subtract one from the counter. The value of the counter is tested at the beginning of each iteration. When the value of the counter reaches zero, control is passed to the next instruction following the loop. In this case, there aren't any more instructions, so the script simply terminates

 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <P> Done. </BODY> </HTML>

As mentioned earlier, it is possible to nest while loops inside other loops to any reasonable depth. The following script illustrates the use of one while loop nested inside another while loop.

This script uses a counter named oCnt to control the outer loop and a counter named iCnt to control the inner loop. oCnt is initialized to a value of 4, and the outer loop is designed to loop for as long as the value of this counter remains greater than zero. The value of the counter is decremented by one at the end of each iteration of the outer loop.

The counter for the inner loop named iCnt is initialized to a value of 5 inside the outer loop. Then an inner loop is executed that continues to loop for as long as the value of this counter remains greater than zero. The counter for the inner loop is decremented by one at the end of each iteration of the inner loop.

Perhaps the most important thing to notice is that for every iteration of the outer loop, the inner loop iterates through its full range of iterations.

As you can see, the output from this script forms a sort of a rectangular array with the value of oCnt indicating the row number and the value of iCnt indicating a column number. In fact, nested while loops of this sort are often used to process two-dimensional arrays (arrays will be covered in a subsequent lesson).

 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <P> Done. </BODY> </HTML>

As mentioned earlier, the while loop is an entry condition loop. JavaScript has another entry condition loop which we will study later in this lesson: the for loop. For now, however, let's take a look at JavaScript's only exit condition loop structure.

The do-while Statement

JavaScript provides an exit-condition loop having the general syntax shown below.

do {
    statements
              } while (conditional expression);

The statements in the body of the loop continue to be executed for as long as the conditional expression evaluates to true. An exit-condition loop guarantees that the statements in the body of the loop will be executed at least once, even if the conditional expression evaluates to false the first time it is tested.

All loop structures in JavaScript can be nested inside of other statements, including other loop structures of the same or a different type.

The following script illustrates the use of a simple do-while loop structure. This script is designed to illustrate the special quality of this structure that causes the statements inside the body of the loop to be executed once even if the conditional test fails the first time.

The script contains two identical do-while structures. The only difference between the two is the initial value of a counter that is used in the conditional test. Each structure iterates for as long as the value of the counter remains greater than zero.

In the second structure, the value of the counter is initially zero. Therefore, the test fails the first time it is made and the loop terminates the first time the test is made. Because the statements inside the loop occur before the test is made, those statements are executed once.

 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <P> Done. </BODY> </HTML>

Now we have covered the while loop and the do-while loop. That leaves one additional loop structure to be covered.

The for Statement

The operation of a loop normally involves three actions in addition to executing the code in the body of the loop:

Initialize a control variable.
Test the control variable in a conditional expression.
Update the control variable.

JavaScript provides the for loop construct which groups these three actions in one physical location.

A for loop iterates until a specified condition evaluates to false. The heart of a for loop consists of three clauses separated by semicolons as shown below.

for (first clause; second clause; third clause) simple or compound statement

The first and third clauses can consist of one or more expressions, separated by the comma operator.

In other languages, the comma operator guarantees that its left operand will be executed before its right operand, and presumably this is also true in JavaScript, although I haven't been able to find that stated anywhere.

The expressions in the first clause are executed only once, at the beginning of the loop. Any legal expression(s) may be contained in the first clause, but typically the first clause is used for initialization.

Note that variables can also be declared and initialized in the first clause. (For those of you who have programmed in Java or C++, note that declaring variables in the first clause in JavaScript doesn't restrict the scope of those variables as it does in Java and C++.)

The second clause consists of a single expression which must eventually evaluate to false to cause the loop to terminate.

Typically relational expressions or relational and logical expressions are used in the second clause.

The value of the second clause is tested when the statement first begins execution, and at the beginning of each iteration thereafter. Therefore, the for loop is an entry condition loop.

Contrary to some current (May 98) Netscape documentation, although the third clause appears physically at the top of the loop, it isn't executed until the statements in the body of the loop have completed execution. This is demonstrated in the sample program that follows.

This is an important point since this clause is typically used to update not only the control variable, but also other variables as well. It is important for you to know exactly when your variables are updated in the sequence of events.

Multiple expressions can appear in the third clause, separated by the comma operator. If variables are updated in the third clause and used in the body of the loop, it is important to understand that they do not get updated until the execution of the body is completed.

The following script illustrates the use of a for loop. This script declares and initializes two variables named x and y in the first clause of the for loop. The variable named x is the control variable for the loop, and the loop continues to iterate for as long as the value of x is greater than zero. The variable y is used simply to illustrate the update behavior of the loop.

Both variables are updated in the third clause of the loop by decrementing them by one. Both variables are displayed in the body of the loop.

An important point to note is that the two variables are initialized to values of 3 and 4 and they still have that value the first time their values are displayed in the body of the loop, even though they are decremented in the third clause. This demonstrates that even though the update code is physically written at the top of the loop structure, the actual update isn't executed until the code in the body of the loop has been executed.

Again, for the benefit of Java and C++ programmers, the values of the two variables are also displayed after the loop has terminated which is different behavior than in Java and C++.

 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <P> Done. </BODY> </HTML>

The first and third clauses in a for loop can be empty but the semicolon must be there as a placeholder. This is illustrated in the following script which replicates the behavior of the previous script. In this script, the declaration and initialization of the two variables is accomplished before the loop is entered, and the first clause is left blank.

The update of the two variables is embedded in the body of the loop (at the end) and the third clause is also left blank. The output is identical to that of the previous script, further reinforcing my earlier claims as to when the statements in the update clause of a for loop are executed.

 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <P> Done. </BODY> </HTML>

You may have been wondering when and where it is necessary for you to place semicolons in your JavaScript source code. Now that you understand the for loop which contains two semicolons, it is time to deal with the general use of the semicolon. That will be the topic of the next section.

The Semicolon

Other programming languages require that each statement be terminated with a semicolon. Technically, a semicolon is required in JavaScript only when you need to separate two statements that appear on the same line or to separate the clauses in a for loop. This is illustrated in the following script which is the same as the previous script except for

the removal of most of the semicolons
placing two statements on the same line (highlighted in boldface)
inserting a semicolon between the two statements on the same line

Removal of the semicolons that separate the clauses in the for loop or removal of the semicolon that separates the two statements on the same line will cause the script to fail.

Another area where semicolons are required is in the writing of event handlers, a topic that will be covered in a subsequent lesson. In that case, you sometimes don't have any choice but to put two or more statements on the same line which in turn requires the use of semicolons.

 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <P> Done. </BODY> </HTML>

Now you know where you must use semicolons. Where should you use semicolons?

In my opinion, because there is a good possibility that you might like to also learn to program using Java someday, you should become accustomed to the placement of a semicolon to terminate each statement by using that programming style in JavaScript. It is easier to form good habits in the beginning than to break bad habits later on. Therefore, unless I forget to do so, you will see semicolons to terminate all of the statements in my JavaScript scripts.

The break and continue Statements

We saw the use of the break in conjunction with a switch earlier. We won't repeat that discussion here.

The previous discussions on loops stated that the various loops continue to iterate for as long as some particular condition is true. That was only half the truth. In fact, it is possible to modify that behavior by making use of break and continue.

In a nutshell, break can be used to cause a loop to terminate prematurely. continue can be used to cause a particular iteration of a loop to terminate prematurely so that the next iteration begins immediately.

In addition, both break and continue can be used with a label to provide even more complex behavior. This capability mimics a capability that is also available in Java. I am a very experienced Java programmer and I rarely find the need to use labeled break and continue statements. Therefore, I will discuss the unlabeled versions first followed by a brief discussion of the labeled versions.

Unlabeled break and continue

The break statement can be used either in a switch statement or in a loop. When encountered in a switch statement, break causes control to be passed to the next statement outside the innermost enclosing switch statement. In other words, switch statements can be nested inside other switch statements, and a break statement only impacts the switch statement in which it appears.

When break is encountered in a loop, it causes control to be passed to the next statement outside the innermost enclosing loop. Loops can also be nested inside other loops and an unlabeled break statement only impacts the loop statement in which it appears.

The continue statement cannot be used in a switch statement. It is confined to loops.

When an unlabeled continue statement is encountered in a loop, it causes the current iteration to be terminated and the next iteration to begin.

The following sample script illustrates the use of an unlabeled break in a for loop. You might note that this is a modification of a script that was discussed earlier.

In this version, an if statement was inserted in the body of the loop that causes the loop to break when the value of the variable named y is equal to 3. As a result, even though the loop is designed to iterate until the value of the control variable x reaches zero (as in the sample script discussed earlier), the countdown terminates early because of the break. When x is displayed after the loop terminates, it has a value of 1 so it was never allowed to reach zero as in the previous sample script.

 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <P> Done. </BODY> </HTML>

The next sample script is identical to this one except that a continue was substituted for the break, causing the script to exhibit different behavior. In this case, the loop iterated over its full range of values and the final value of x was zero as was expected. However, careful observation of the output reveals that the following output statement is missing:

Inside loop: x, y = 2, 3

This is because the continue statement caused the iteration that would have produced that output to be terminated prematurely and the next iteration to begin immediately following the continue. As a result, the document.write(...) statement in the body of the loop wasn't executed during that iteration and this line of output wasn't produced.

 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <P> Done. </BODY> </HTML>

.

The Label Statement

There is really no such thing as a label statement, but a statement can have a label. A label can be used to provide an identifier that can be used with break or continue to indicate where the script should continue execution.

The general syntax of a labeled statement is as follows:

label : statement

In a labeled statement, break or continue must be followed with a label, and the label must be the identifier of the labeled statement containing the break or continue. The statements in a labeled statement can be of any type.

Basically, a label can be used with break to cause control to break out of any labeled compound statement as illustrated in the following sample script.

This script contains two labeled compound statements that are essentially identical. However, a test is performed inside of each, and if the result if the test is true, a labeled break is executed on that compound statement.

The demonstration is designed to cause the test to be true in the first compound statement and false in the second compound statement. As a result, when control breaks out of the first compound statement, the document.write() statement is skipped as indicated one line of missing output in the comments at the beginning of the script.

 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <P> Done. </BODY> </HTML>

Labeled break and continue statements can also be used in loops with the results generally being a combination of what you have previously learned about the use of break and continue in loops and what you have learned about labeled statements. It will be left as an exercise for the student to develop sample scripts that illustrate these capabilities.

The return Statement

In an earlier lesson, we learned how to use the return statement to return a value from a function. In addition, return can be used to prematurely terminate a function and therefore, it needs to be considered in the flow of control category.

return may appear any number of times in a function, either with, or without an expression following it. If return is followed by an expression, that expression will be evaluated and the resulting value will be returned to the calling code. If return is not followed by an expression, nothing useful will be returned.

The first time that return is encountered in a function, control is transferred back to the code that invoked the function in the first place. This is illustrated in the following sample script.

This script contains a function named myFunction() that contains a return statement to prematurely terminate the function if the value of the incoming parameter is 5. When the function is not prematurely terminated, an output statement displays the text "Still in myFunction". However, when the return statement is executed to prematurely terminate the function, this output statement is not executed and the text does not appear in the output.

It is also worth noting that a return statement is not required to terminate a function. If the function simply runs out of statements to execute, it will terminate naturally and return control to the code from which it was invoked.

 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript1.2">  </SCRIPT> <P> Done. </BODY> </HTML>

-end-

Statement	Type
if-else	selection
switch-case	selection
for	loop
while	loop
do-while	loop
break	miscellaneous
continue	miscellaneous
label	miscellaneous
return	miscellaneous