View source for JavaScript/C2/Loops-in-JS/English

Title of the script:Loops in JS

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: 

Novice Reviewer: 

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



{| border = “1”
|| <center>'''Visual Cue'''</center>
|| <center>'''Narration'''</center>

|-
|| 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 Editor
|| Switch to the '''editor.'''

|-
|| <nowiki>[Editor] </nowiki>


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.

|-
|| <nowiki>[Editor] </nowiki>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.

|-
|| <nowiki>[Editor] Type: </nowiki>


<nowiki><!DOCTYPE html></nowiki>

<nowiki><html lang="en"></nowiki>

<nowiki><head></nowiki>

<nowiki><title>Loops</title></nowiki>

<nowiki></head></nowiki>

<nowiki><body></nowiki>

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

<nowiki></body></nowiki>

<nowiki></html></nowiki>
|| 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.

|-
|| <nowiki>[Firefox] Press</nowiki>''' Ctrl + Shift + I'''


Point to the '''Browser''' '''developer tools'''
|| Now press '''Ctrl + Shift + I''' keys together.


The '''Browser developer tools''' panel opens.

|-
|| <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab
|| Now click on the '''console tab''' in the '''developer tools.'''

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

|-
|| <nowiki>[Editor] </nowiki>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'''

|-
|| <nowiki>[Editor] Type: </nowiki>


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

console.log(i);

}
|| In the '''main.js '''file, replace the '''code''' as shown.


In this code we have written a '''for loop'''.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


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.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


<nowiki>i < 5</nowiki>
|| Next, the '''condition''' is checked for the value of '''i = 0.'''


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

|-
|| <nowiki>[Editor] Highlight:</nowiki>


console.log(i);
|| So, the '''block''' of '''code '''within the '''for loop''' gets executed.


Here, in our case we just '''log''' the value'''.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>


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.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

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 '''<nowiki>condition i < </nowiki>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.'''


Next, let us learn about '''while loop.'''

|-
|| <nowiki>[Editor] Type: </nowiki>


var n = 0;

<nowiki>while (n < 5) {</nowiki>

console.log(n);

n++;

}
|| In the '''main.js '''file, replace the '''code''' as shown.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


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.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


<nowiki>while (n < 5)</nowiki>
|| 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.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>


console.log(n);
|| Here, the '''block''' of code gets '''executed''' and '''logs''' the value.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


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.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

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''' '''<nowiki>n < </nowiki>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.'''


Next, let us learn about '''do.. while loop.'''

|-
|| <nowiki>[Editor] Type: </nowiki>


var m = 0;

do {

console.log(m);

m++;

<nowiki>} while (m < 5);</nowiki>
|| In the '''main.js '''file, replace the '''code''' as shown.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

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.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


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.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>


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.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


<nowiki>while (m < 5);</nowiki>
|| 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.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

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''' '''<nowiki>m < </nowiki>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.'''

|-
|| <nowiki>[Editor] Type: </nowiki>


var obj = {

name1: "Spoken",

name2: "Tutorials",

};


for (var key in obj) {

<nowiki>console.log(obj[key]);</nowiki>

}
|| In the '''main.js '''file, replace the '''code''' as shown.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


var obj = {

name1: "Spoken",

name2: "Tutorials",

};
|| Here, we are '''initializing''' an '''object '''to '''loop '''over and print the values in all the '''object properties'''.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


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. 

|-
|| <nowiki>[Editor] Highlight:</nowiki>


<nowiki>console.log(obj[key]);</nowiki>
|| Here, we are '''logging''' the value as '''<nowiki>obj[key]</nowiki>'''


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.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

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.

|}