JavaScript Tutorials--- Loops in JavaScript

in GEMS6 years ago

Hello Everyone!

In the previous post,, we have started new tutorials about Javascript. In the first post, we have discussed variables which are the very basic and fundamental topic of javaScript. Today's topic is Loop in javascript. The loops in programming are very important. We are ganna use the loops in the upcoming programs. Loops are used from basic to advance programming. So without wasting time let's start our today's topic.

What is a loop in programming?

Loops in programming come into use when we need to repeatedly execute a block of statements. For example: Suppose we want to print “Hello World” 10 times. It can be done by using a loop.

In computer programming, a loop is a sequence of instructions that is repeated until a certain condition is reached.

  • An operation is done, such as getting an item of data and changing it, and then some condition is checked such as whether a counter has reached a prescribed number.
  • Counter not Reached: If the counter has not reached the desired number, the next instruction in the sequence returns to the first instruction in the sequence and repeat it.
  • Counter reached: If the condition has been reached, the next instruction “falls through” to the next sequential instruction or branches outside the loop.

Types of loop

  • For loop

For loop is one of the most important type of loop. The syntax of for loop is given below.
for (initialization expr; condition; update expr).

  • While loop
    The while loop is used when we don't know the exact number of iterations. But in for loop, we know the exact number of iterations. Syntax.
initialization expression;
while (test_expression)
{
   // statements
 
  update_expression;
}
  • Do-While Loop

In the do-while loop the program is executed once even the condition is not true. The condition is checked after the execution of the program. The syntax is given below.

initialization expression;
do{
statment
update exp
}
while(condition);

Let's prove the above Definitions with the help of a simple script.

  • We have written a simple syntax of HTML.

image.png

  • Run the code with Live server(Install it in the VS code). So the page will auto-update without refreshing.

image.png

  • In the above code we have declared a button. Let's add some functionality to the button.

  • Suppose we want to print "Hello World" on screen 10 times. We can do it just by writing

image.png

document.write(hello+"<br>"); 10 time or we can use for loop.

image.png

image.png

  • So from 12 lines of code to 3 lines of code with the help of for loop.

  • By using while loop

image.png

  • By using Do-While loop

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<input type="button" value="Click here to display alert" onclick="clicked()">
    

<script>
    function clicked(){
        var hello="Hello World";
for(let i=0;i<=9;i++){
    document.write(hello+" "+i+"<br>");
}

    }

</script>
    
    
</body>
</html>

We will discuss the loops in detail in the upcoming posts but for now I want you to practice on the above codes. We will discuss Continuous and break statement along with loops in the other posts.

That's all for today. Take caree