Please check the first part of the this tutorial in Javascript Basics Part-1

In any programming language loops are used to execute repeatedly for a specified no of times. Javscript also has its own loop structure.

While Loop: The structure of the while loop is as follows

<script Language="JavaScript">
var i;
i=1; // set the initial value of i to 1
while(i<=10){
document.writeln(i);
i=i+1; // increment the value of i by 1 each time
}

</script>
Here , the above code will give output
1
2
3
4
5
6
7
8
9
10
Explanetion : Here we have set the initial value of i to 1. Thwn the while loop starts looping. How lmany times it will execute! That has been written inside the baraces. Here it is " i<=10 ", i.e , it will go on executing until "i" becomes greater than 10. The statements inside the loops has to be enclosed in a pair of curly braces. Here there are two statements inside curly braces
document.writeln(i);This statement write the current value of i to the page. And

i=i+1; This statement increments the value of i by 1 each time the loop executes. What if you forget to write this statement! The value of i will never be greater than 10 and the while loop will never terminate and becomes an "infinite Loop".

For Loop : There is another form of loop in JavaScript , that is the for loop. The above code can be converted to for loop like this

<script Language="JavaScript">
var i;
for(i=1 ; i<=10 ; i=i+1){
document.writeln(i);

}

</script>
For loop is a more compct form of while loop. Here you can see that the initial value of " i ", the final value of " i " and the increment value of " i " all has been set within the braces of for loop and they are separeted by " ; ".

Some more example of loops

Printing from 10 to 1, using while loop

<script Language="JavaScript">
var i;
i=10; // set the initial value of i to 1
while(i>=1){
document.writeln(i);
i = i -1; // decrement the value of i by 1 each time
}

</script>
Printing from 10 to 1, using for loop

<script Language="JavaScript">
var i;
for(i=10 ; i>=1 ; i = i - 1){
document.writeln(i);

}

</script>
Finding sum of 1,2,3....,10 using while loop

<script Language="JavaScript">
var i; var sum=0;
i=1; // set the initial value of i to 1
while(i<=10){
sum = sum + i ;
i = i +1; // increment the value of i by 1 each time
}
document.writeln(sum);
</script>
Finding product of 1,2,3....,10 using while loop

<script Language="JavaScript">
var i; var product=1;
for(i=1 ; i<=10 ; i = i + 1){
product = product * i;
}
document.writeln(product);
</script>
</body>
</html>
Printing a line in different heading

<script Language="JavaScript">
var name="koderguru";
for(i=1 ; i<=6 ; i = i + 1){
document.writeln("<h" + i + ">" + name + "</h" + i + ">");
}
</script>




So , that's it . Hope you have enjoyed the tutorial. Thank You.


Back to Tutorial Index page

Your comments are most welcome admin@koderguru.com