JavaScript/C2/Loops-in-JS/English

From Script | Spoken-Tutorial
Revision as of 10:05, 3 February 2021 by Pravin1389 (Talk | contribs)

Jump to: navigation, search

Title of the script:Loops in JS

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

Keywords: JavaScript, HTML, for, while, do.. While, for..in


Visual Cue
Narration
Slide: Title Hello and Welcome to the spoken tutorial on “Loops in JS”.
Slide:

Learning Objectives

In this tutorial, we will learn about:
  • Different types of Loops in JS
  • And their usage
Slide: System Specifications This tutorial is recorded using:
  • Ubuntu Linux OS version 18.04
  • Visual Studio Code version 1.51.1 (code editor)
  • Firefox web browser

However you may use any other browser of your choice.

Slide : Pre-requisites To practice this tutorial,
  • You should be familiar with writing and executing JS files.
  • If not, please go through the prerequisite tutorials on this website.
Slide: Code files
  • The files used in this tutorial are available in the Code files link on this tutorial page.
  • Pls download and extract the files.
  • Make a copy and then use them for practising.
Slide: Types of Loops in JS The different types of loops are:
  • for loop
  • while loop
  • do..while loop
  • for..in loop

Let us take an example and understand this better.

Switch to the Visual Studio Code editor. Switch to the Visual Studio Code editor.
[Editor]


Welcome Page ->

Open Folder ->

Practice-JS

In the Welcome page, click on the Open folder link at the top left corner.


Browse and locate the folder “Practice-JS ”.


Then click on the OK button at the top right corner.

[Editor] Click on


Explorer panel -> Practice-JS -> index.html

In the Explorer panel on the left, under Practice-JS click on the file named index.html


We had created this file earlier. The same is available in the Code files link for practice.

[Editor] Type:


<!DOCTYPE html>

<html lang="en">

<head>

<title>Loops</title>

</head>

<body>

<script src="main.js"></script>

</body>

</html>

In the index.html file, replace the code as shown.


In this code we have written a small HTML code and linked the JS file.

Press: Ctrl + S Save the file.
Press: Alt + L and Alt + O


Now press the key combinations Alt + L and Alt + O.


The Live server gets started.

Show firefox The default browser will open automatically and a new tab opens.
[Firefox] Press Ctrl + Shift + I


Point to the Browser developer tools

Now press Ctrl + Shift + I keys together.


The Browser developer tools panel opens.

[Firefox] Click on the Console tab Now click on the console tab in the developer tools.
Switch to Editor Switch back to the editor.
[Editor] Click on


Explorer panel -> Practice-JS -> main.js

In the Explorer panel on the left, under Practice-JS click on the file named main.js
[Editor] Type:


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

console.log(i);

}

In the main.js file, replace the code as shown.


In this code we have written a for loop.

[Editor] Highlight:


var i = 0

Let me explain how the for loop works in JS.


In the for loop, the variable is first initialized. We have initialised i to zero.

[Editor] Highlight:


i < 5

Next, the condition is checked for the value of i = 0.


As the value of i is less than 5, the condition is true.

[Editor] Highlight:


console.log(i);

So, the block of code within the for loop gets executed.


Here, in our case we just log the value.

[Editor] Highlight:


i++

After this we increment i by 1 using i++, which is basically i = i +1.


Please note i++ is a post increment operator.


Now the value of i becomes 1.


Again the condition is checked and the process continues.


The for loop will only end when the condition returns false.


This will logically happen when the value of i becomes 5.

Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


0

1

2

3

4

We see the output as 0 1 2 3 4.


After 4, the value of i would become 5.


Now when the condition i less than 5 is checked, it will return false.


So the block doesn’t get executed and thus the loop terminates.

Switch to Editor Switch back to the editor.


Now, let us learn about while loop.

[Editor] Type:


var n = 0;

while (n < 5) {

console.log(n);

n++;

}

In the main.js file, replace the code as shown.
[Editor] Highlight:


var n = 0;

Let me explain how the while loop works.


The variable is declared once outside the loop and also initialised. We have initialised to 0.

[Editor] Highlight:


while (n < 5)

Then comes the while loop.


This loop is also called an entry controlled loop.


The condition is always checked before entering the block.


Only if the condition returns true, the block get executed.


If the condition returns false, the loop terminates.

[Editor] Highlight:


console.log(n);

Here, the block of code gets executed and logs the value.
[Editor] Highlight:


n++;

Here, inside the block we have written n++


This is also a post increment operator which basically means n = n+1.

Press: Ctrl + S Save the file.
Switch to browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


0

1

2

3

4

Now, we see the output as 0 1 2 3 4.


After 4 the value of n would become 5.


Now when the condition n less than 5 is checked, it will return false.


So it will not enter the block and thus the loop terminates.

Switch to editor Switch back to the editor.


Now, let us learn about do.. while loop.

[Editor] Type:


var m = 0;

do {

console.log(m);

m++;

} while (m < 5);

In the main.js file, replace the code as shown.
[Editor] Highlight:

var m = 0;

The variable declaration and initialisation happens outside the loop.

We have initialised the variable m to zero.

Only Narration This loop is also called an exit controlled loop because the condition check will happen at the end.
[Editor] Highlight:


do {


}

In do.. while loop, the condition is always checked while exiting the block.


So even if the condition is not satisfied, the block gets executed at least once.


When the condition returns false, the loop terminates.

[Editor] Highlight:


console.log(m);

m++;

In the loop, we are just logging the value and then increasing it by 1.


Here also we have used the post-increment operator to do so.

[Editor] Highlight:


while (m < 5);

This is where the condition check happens.


If the condition returns true, the loop gets executed again.


If the condition returns false the loop terminates.

Press: Ctrl + S Save the file.
Switch to browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


0

1

2

3

4

Now, we see the output as 0 1 2 3 4.


After 4 the value of m would become 5


Now when the condition m less than 5 is checked, it will return false.


So it will not enter the block and thus the loop terminates.



Slide: Comparison between loops To conclude, if the condition is not satisfied-
  • The for loop and while loop immediately terminates and does not execute the block at all
    • It’s also called as Entry controlled loop
  • The do..while loop will execute the block at least once before terminating
    • It’s also called as Exit controlled loop
Slide: Iteration over an array All these three loops can iterate over an array taking the index value as counter.
Only Narration Next, we shall learn how to loop over properties of an object.


For this we will be using the for .. in loop.

Switch to Editor Switch back to the editor.
[Editor] Type:


var obj = {

name1: "Spoken",

name2: "Tutorials",

};


for (var key in obj) {

console.log(obj[key]);

}

In the main.js file, replace the code as shown.
[Editor] Highlight:


var obj = {

name1: "Spoken",

name2: "Tutorials",

};

Here, we are initializing an object to loop over and print the values in all the object properties.
[Editor] Highlight:


for (var key in obj)

In this loop, we need to create a temporary variable, which holds the property in each and every iteration.


Here, we have created and named it as key.


key would be name1 in first iteration and name2 in second iteration.


And obj refers to the object which we have created above to iterate.

[Editor] Highlight:


console.log(obj[key]);

Here, we are logging the value as obj[key]


This is one way to access the value of a property in an object.


We have learnt to access objects earlier in this series.


If you are not confident, kindly go through the Data Types in JS tutorial in this series.

Press: Ctrl + S Save the file.
Switch to browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


Spoken

Tutorials

Here, we see in the output that the values for all the properties in the object are printed.


This indicates that we have successfully iterated over the object.

Only narration With this we have come to the end of this tutorial.


Let’s summarize.

Slide: Summary In this tutorial, we have learnt about:
  • for Loop
  • while Loop
  • do..while Loop
  • for..in Loop in JS
Slide: Assignment As an assignment:
  • Open the file assignment.js which you have created earlier
  • Clear the existing code
  • Loop the numbers from 1 to 100
  • Log the values which are divisible by 3
  • Open the file MyPage.html in a web browser.
  • Observe the output in the browser’s console
Slide: About Spoken Tutorial Project
  • The video at the following link summarises the Spoken Tutorial project.
  • Please download and watch it
Slide: Spoken tutorial workshops
  • We conduct workshops using spoken tutorials and give certificates.
  • For more details, please write to us.
Slide: Forum questions Pls post your timed queries in this forum
Slide: Acknowledgement Spoken Tutorial Project is funded by Ministry of Education (MoE), Government of India
Slide: Thanks The script for this tutorial is contributed by Jayesh.

And this is Praveen from IIT Bombay signing off.

Thank you for joining.

Contributors and Content Editors

Kr.jayesh, Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=JavaScript/C2/Loops-in-JS/English&oldid=54772"