Skip to content

Lecture Notes: Programming Loops

Jump to bottom
Professor F edited this page Feb 10, 2017 · 1 revision

Week 5. Lecture Notes on Loops

You use loops any time you have a one or more lines of code that need to be repeated for a certain number of times—until some condition is no longer true.

Example of the Need for a Loop

The best example I can think of is the power function: Y^X. Suppose you wanted to calculate 10^5. You know that 10^5=10000, because it’s equal to 10 * 10 * 10 * 10 * 10, or 10 multiplied by itself 5 times. In code, you could write this as:

answer = 1;
answer=answer*10; // copy this line 5 times for 105
answer=answer*10;
answer=answer*10;
answer=answer*10;
answer=answer*10;

Now suppose you wanted to calculate 2^3. Following the pattern above, you could write it as:

answer=1;
answer=answer*2; // copy this line 3 times for 23
answer=answer*2;
answer=answer*2;

And one final example to make this clear 3^4. Following the pattern above, you could write it as:

answer=1;
answer=answer*3; // copy this line 4 times for 34 
answer=answer*3;
answer=answer*3;
answer=answer*3;

Question

How do you generalize this pattern. So you can input an arbitrary Y and an arbitrary X?

Answer

Use loops. The final major programming construct is the loop (the other two being equations and conditionals from the previous lecture). There are three kinds of loops:

  1. For
  2. While
  3. Do-While

Loops in General

Regardless of whether you are using a for, while, or do-while loop, loops generally have four parts

  1. A body. The body is the part of the loop that gets repeated, which is at least one statement (or equation). In the examples above answer=answer*Y will be the loop body.
  2. A counter variable & counter initialization. The counter keeps track of how many times the body of the loop has repeated. Historically, the counter is labelled i, and is initialize to zero, e.g., i=0;
  3. A counter update statement. This is a statement that updates the counter after the body is repeated, e.g., i=i+1
  4. A continuation condition. A condition involving the loop counter that if true results in the body being repeated and if false results in the loop being terminated, e.g., (i<X)

So let’s look at just the code that implements the power function for each of the three kinds of loops. This code would go into a function in the script block. However, to facilitate comparison and understanding of the differences I am only showing the code inside the function—not the function, script block, or user interface.

Partial Example: For Loop for the Power Function

var x,y,answer, i;
x = parseFloat(inX.value);
y = parseFloat(inY.value);
answer=1; // if the repeating line is multiplying set to 1, if adding set to 0
for (i=0; i<x; i=i+1)
{
    answer=answer*y;
}
spAnswer.innerHTML=answer;

Partial Example: While Loop for the Power Function

var x,y,answer, i;
x = parseFloat(inX.value);
y = parseFloat(inY.value);
answer=1; // if the repeating line is multiplying set to 1, if adding set to 0
i=0;
while (i<x)
{
    answer=answer*y;
    i=i+1;
}
spAnswer.innerHTML=answer;

Partial Example: Do-While Loop for the Power Function

var x,y,answer, i;
x = parseFloat(inX.value);
y = parseFloat(inY.value);
answer=1; // if the repeating line is multiplying set to 1, if adding set to 0
i=0;
do
{
    answer=answer*y;
    i=i+1;
} while (i<x);
spAnswer.innerHTML=answer;

Entire Example: For Loop for the Power Function

<!doctype html>
<html>
<head>
<script>
function calcPower()
{
var x,y,answer,i; // i keeps track of how many times the body repeats

// input
x = parseFloat(inX.value);
y = parseFloat(inY.value);

// processing
answer=1; // for loops involving mult. set answer=1 initially

for (i=0; i<x; i=i+1)
{
    answer=answer*y;
}

// output
spAnswer.innerHTML=answer;
}
</script>
</head>
<body>
Y^X<br />
<span>X? </span><input id="inX" type="text" /><br />
<span>Y? </span><input id="inY" type="text" /><br />
<span>Answer:</span><span id="spAnswer"></span><br />
<input type="button" value="Click Me" onClick="calcPower()" />
</body>
</html>

Entire Example: While Loop for the Power Function

<!doctype html>
<html>
<head>
<script>
function calcPower()
{
var x,y,answer,i; // i keeps track of how many times the body repeats

// input
x = parseFloat(inX.value);
y = parseFloat(inY.value);

// processing
answer=1; // for loops involving mult. set answer=1 initially

i=0;
while (i<x)
{
    answer=answer*y;
    i=i+1;
}

// output
spAnswer.innerHTML=answer;
}
</script>
</head>
<body>
Y^X<br />
<span>X? </span><input id="inX" type="text" /><br />
<span>Y? </span><input id="inY" type="text" /><br />
<span>Answer:</span><span id="spAnswer"></span><br />
<input type="button" value="Click Me" onClick="calcPower()" />
</body>
</html>

Entire Example: Do-While Loop for the Power Function

<!doctype html>
<html>
<head>
<script>
function calcPower()
{
var x,y,answer,i; // i keeps track of how many times the body repeats

// input
x = parseFloat(inX.value);
y = parseFloat(inY.value);

// processing
answer=1; // for loops involving mult. set answer=1 initially

i=0;
do
{
    answer=answer*y;
    i=i+1;
} while (i<x);

// output
spAnswer.innerHTML=answer;
}
</script>
</head>
<body>
Y^X<br />
<span>X? </span><input id="inX" type="text" /><br />
<span>Y? </span><input id="inY" type="text" /><br />
<span>Answer:</span><span id="spAnswer"></span><br />
<input type="button" value="Click Me" onClick="calcPower()" />
</body>
</html>
Clone this wiki locally