Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | for Repetition Statement - JavaScript(JS)

Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - JavaScript: Control Statements II

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

for Repetition Statement - JavaScript(JS)

The for repetition statement handles all the details of counter-controlled repetition.

for Repetition Statement

 

The for repetition statement handles all the details of counter-controlled repetition. Figure 8.2 illustrates the power of the for statement by reimplementing the script of Fig. 8.1.

 

When the for statement begins executing (line 15), the control variable counter is declared and is initialized to 1 (i.e., the first statement of the for statement declares the control variable’s name and provides the control variable’s initial value). Next, the loop-

    <?xml version = "1.0" encoding = "utf-8"?>

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

    <!-- Fig. 8.2: ForCounter.html -->

 

    <!-- Counter-controlled repetition with the for statement. -->

 

    <html xmlns = "http://www.w3.org/1999/xhtml">

 

    <head>

 

    <title>Counter-Controlled Repetition</title>

 

      <script type = "text/javascript">

      <!--

 

      // Initialization, repetition condition and

 

      // incrementing are all included in the for

 

      // statement header.

 

for ( var counter = 1; counter <= 7; ++counter )

document.writeln( "<p style = \"font-size: " +

counter + "ex\">XHTML font size " + counter +

"ex</p>" );

      // -->

 

      </script>

 

      </head><body></body>

 

</html>


Fig. 8.2 | Counter-controlled repetition with the for statement.

 

continuation condition, counter <= 7, is checked. The condition contains the final value (7) of the control variable. The initial value of counter is 1. Therefore, the condition is satisfied (i.e., true), so the body statement (lines 16–18) writes a paragraph element in the XHTML document. Then, variable counter is incremented in the expression ++counter and the loop continues execution with the loop-continuation test. The control variable is now equal to 2, so the final value is not exceeded and the program performs the body state-ment again (i.e., performs the next iteration of the loop). This process continues until the control variable counter becomes 8, at which point the loop-continuation test fails and the repetition terminates.

 

The program continues by performing the first statement after the for statement. (In this case, the script terminates, because the interpreter reaches the end of the script.)

Figure 8.3 takes a closer look at the for statement at line 15 of Fig. 8.2. The for state-ment’s first line (including the keyword for and everything in parentheses after for) is often called the for statement header. Note that the for statement “does it all”—it spec-ifies each of the items needed for counter-controlled repetition with a control variable. Remember that a block is a group of statements enclosed in curly braces that can be placed anywhere that a single statement can be placed, so you can use a block to put multiple statements into the body of a for statement.

 

Note that Fig. 8.3 uses the loop-continuation condition counter <= 7. If you incor-rectly write counter < 7, the loop will execute only six times. This is an example of the common logic error called an off-by-one error.

The general format of the for statement is

 

for ( initialization; loopContinuationTest; increment ) statements

 

where the initialization expression names the loop’s control variable and provides its initial value, loopContinuationTest is the expression that tests the loop-continuation condition (containing the final value of the control variable for which the condition is true), and


increment is an expression that increments the control variable. The for statement can be represented by an equivalent while statement, with initialization, loopContinuationTest and increment placed as follows:

 

initialization;

 

while ( loopContinuationTest )

{

statements increment;

 

}

 

In Section 8.7 we discuss an exception to this rule.

 

If the initialization expression in the for statement’s header is the first definition of the control variable, the control variable can still be used after the for statement in the script. The part of a script in which a variable name can be used is known as the variable’s scope. Scope is discussed in detail in Chapter 9, JavaScript: Functions.

The three expressions in the for statement are optional. If loopContinuationTest is omitted, JavaScript assumes that the loop-continuation condition is true, thus creating an infinite loop. One might omit the initialization expression if the control variable is initial-ized before the loop. One might omit the increment expression if the increment is calcu-lated by statements in the body of the for statement or if no increment is needed. The increment expression in the for statement acts like a stand-alone statement at the end of the body of the for statement. Therefore, the expressions

 

counter = counter + 1 counter += 1 ++counter

 

counter++

 

are all equivalent in the incrementing portion of the for statement. Many programmers prefer the form counter++. This is because the incrementing of the control variable occurs after the body of the loop is executed, and therefore the postincrementing form seems more natural. Preincrementing and postincrementing both have the same effect in our ex-ample, because the variable being incremented does not appear in a larger expression. The two semicolons in the for statement header are required.

The initialization, loop-continuation condition and increment portions of a for state-ment can contain arithmetic expressions. For example, assume that x = 2 and y = 10. If x and y are not modified in the body of the loop, then the statement

 

for ( var j = x; j <= 4 * x * y; j += y / x )

 

is equivalent to the statement

 

for ( var j = 2; j <= 80; j += 5 )

 

The “increment” of a for statement may be negative, in which case it is really a dec-rement and the loop actually counts downward.

 

If the loop-continuation condition initially is false, the for statement’s body is not performed. Instead, execution proceeds with the statement following the for statement.

The control variable frequently is printed or used in calculations in the body of a for statement, but it does not have to be. Other times, the control variable is used for control-ling repetition but never mentioned in the body of the for statement.

The for statement is flowcharted much like the while statement. For example, Fig. 8.4 shows the flowchart of the for statement

 

for ( var counter = 1; counter <= 7; ++counter ) document.writeln( "<p style = \"font-size: " +

 

counter + "ex\">XHTML font size " + counter + "ex</p>" );

 

This flowchart makes it clear that the initialization occurs only once and that incrementing occurs after each execution of the body statement. Note that, besides small circles and ar-rows, the flowchart contains only rectangle symbols and a diamond symbol.



Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.