Implementing iterative control flow

Using the for loop

The for loop is useful in cases in which a block of code should run based on a deterministic number of items.

You might want to run a block of code a specific number of times to perform some type of animation or to create a specific number of objects.

The for loop needs three elements: a counter, an expression, and an increment.

The counter variable holds the current number of times the loop has run. You need to initialize the counter appropriately, such as to 1 or 0.
The expression element evaluates the counter against some other value. Its purpose is to set a limit to the number of times the for loop runs.
With the counter increment, the for loop must be told how to adjust the counter variable after each loop iteration. The increment can be positive or negative depending on how the loop is set up.

In the following code the for loop runs a block of code 10 times:

<body>
<input type="submit" onclick="forLoop()" value="for Loop"/><br />
<div id="#div2"> <ul id="list"></ul></div>
<!-- FOR LOOP - FIRST 10 NUMBERS -->
<script type="text/javascript">
    var forLoop = function () {
        for (var i = 0; i < 10; i++) {
            var numbers = document.getElementById("list");
            var nr = document.createElement("li");
            nr.innerText = (i);
            list.appendChild(nr);
        }
}
</script>
</body>

Using the for in loop

The for…in loop is a method for iterating over an object’s properties. Each property needs to be accessed via the property indexer of the object.

The following code demonstrates the for in loop:

<body>
<input type="submit" onclick="forInLoop()" value="forIn Loop"/><br />
<div id="#div2"> <ul id="list"></ul></div>
<!-- FOR IN LOOP -->
<script type="text/javascript">
    var forInLoop = function () {
        var person = {
            firstName: "Jane", lastName: "Doe",
            birthDate: "Jan 5, 1925",
            gender: "female"
        };
        for (var prop in person) 
            document.writeln(prop + " : " + person[prop]);
        }
</script>
</body>

Using the while loop

The while loop lets you run a code block until some condition evaluates to false. The expression is something that evaluates to a Boolean. While the expression is true, the while loop continues to run.

The code that runs is contained within the code block inside the braces. The condition must be true for the while loop to run at all.

The while loop doesn’t use an increment so the code inside the while loop must be able to set the expression to false as appropriate; otherwise, the loop will be an endless loop.

The following code demonstrates a while loop:

<body>
<input type="submit" onclick="whileLoop()" value="whileLoop Loop"/><br />
<div id="#div2"> <ul id="list"></ul></div>
<!-- WHILE LOOP -->
<script type="text/javascript">
    var whileLoop = function () {
        var i = 0;
        while (i < 10) {
            var numbers = document.getElementById("list");
            var nr = document.createElement("li");
            nr.innerText = (i);
            list.appendChild(nr);
            i++;
        }
    }
</script>
</body>

Using the do...while loop

The difference between the while loop and the do...while is that the do…while loop always runs once because in this form of loop, the expression logic is at the bottom.

The following code demonstrates a do...while loop:

<body>
<input type="submit" onclick="doWhileLoop()" value="doWhileLoop Loop"/><br />
<div id="#div2"> <ul id="list"></ul></div>
<!-- DO...WHILE LOOP -->
<script type="text/javascript">
    var doWhileLoop = function () {
        var i = 0;
        do {
            var numbers = document.getElementById("list");
            var nr = document.createElement("li");
            nr.innerText = (i);
            list.appendChild(nr);
            i++;
        } while (i<10)
    }
</script>
</body>

Ads Right