Repetition in Javascript

A lot of times a program has to do something over and over again. For instance, you can write a program that counts to 10. You can also write a program that displays your name 50 times on the screen.

Javascript allows you to create repetition by using loops.

We'll cover two kinds of loops

  1. for loop
  2. while loop

For loop

The for loop allows you to repeat a task a specific number of times.

The for loop syntax

for(var i = 0; i<5; i++)

{

document.writeln("Good morning");

}

The code above display Good morning five times.

First, It checks the value of i to see if it less than 5, if it is, Good morning is displayed. Then 1 is added to i. Now, the value is 1. The loop checks if i is greater than 5. As you know 1 is less than 5, therefore Good morning is being displayed.

Afterwards, the value of i is increased by 1 again. i is now 2, therefore the loop executes again and Good Morning is displayed. This process repeats until the value of i is 5. The loop then stops.

Example 1: Write a script that displays the number 1 through 20.

<script type="text/javascript">
for(var i= 1; i<=20; i++)
{
document.writeln(i + "<br/>");
}
</script>

Example 2: Write a script that displays your name seven times.

<script type="text/javascript">
for(var j=0; j<7; j++)
{
document.write("Cyrille <br/>");
}
</script>

Example 3: Write a script that counts by 2 up to 30.

<script type="text/javascript">
for(var i=2; i<=30; i= i+2)
{
document.write(i + "<br/>");
}
</script>

Example 4: Write a script that displays 1 through 20 in descending order.

<script type="text/javascript">
for(var i = 20; i>=1; i--)
{
document.write(i + "<br/>");
}
</script>

Example 5: Write a script that asks the user to enter five numbers and display the sum of these numbers.

<script type="text/javascript">
var num;
var sum;
sum = 0;
for(var i = 1; i<=5; i++)
{
num = prompt("Enter a number ");
sum = sum + parseInt(num);

}
document.write("The sum is " + sum);
</script>

 

While loop

The While loop also allows you to repeat a task a specific number of times and can be used when you do not know how many times a condition needs to be repeated.

The While loop syntax

while(i<10)

{

document.writeln("Hello, World");

i++;

}

Example 6: Write a script that counts to 10.

<script type="text/javascript">
var i;
i = 1;
while(i<=10)
{
document.writeln(i + "<br/>");
i++;
}

</script>

Example 7: Write a script that displays "Happy Birthday" seven times.

<script type="text/javascript">
var i;
i = 1;
while(i<=7)
{
document.writeln("Happy Birthday <br/>");
i++;
}

</script>

Example 8: Write a script that counts by 3 up to 33.

<script type="text/javascript">
var i;
i = 3;
while(i<=33)
{
document.write(i + "<br/>");
i = i + 3;
}

</script>

Example 9: Write a script that asks a user to enter five scores. Calculate the sum of these numbers and display the sum. Your while loop should end when the user enters -1.

<script type="text/javascript">
var num;
var sum;
sum = 0;

num = prompt("Enter a number ");
while(num != -1)
{
sum = sum + parseInt(num);
num = prompt("Enter a number ");

}
document.write("The sum is " + sum);
</script>

 

Explanation of example 9: Since you are going to ask the user to enter their scores. You need to declare a variable to hold or store the scores. The variable num accomplishes this task. The problem then asks you to calculate the sum of the five scores. Since you do not know what the sum is going to be, you must declare another variable to hold the sum. As you can see in the code, I also assign 0 to sum. This is excellent programming practice to give a variable an inital value before using it.

Next, I ask the user the enter a number outside the while loop. Why? Because I want my variable to have an inital value so I can use it in the while loop. The problem states that the loop should end when the user enters -1. Therefore, if num was not assigned an initial value, the loop would not work because num never had a value.

Then in the while loop I am checking to see if num is not equal to -1 everytime, I am also updating the sum and am asking the user to enter another number until -1 is entered.