JavaScript/C2/Loops-in-JS/English - Revision history

Nancyvarkey at 05:46, 21 June 2021

2021-06-21T05:46:44Z

Pravin1389 at 04:35, 3 February 2021

2021-02-03T04:35:07Z

Nancyvarkey at 15:36, 17 January 2021

2021-01-17T15:36:41Z

Nancyvarkey at 15:17, 17 January 2021

2021-01-17T15:17:20Z

Kr.jayesh: Created page with "Title of the script:Loops in JS Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, for, while, do.. While, for..in {| bor..."

2021-01-13T17:44:05Z

Created page with "Title of the script:Loops in JS Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, for, while, do.. While, for..in {| bor..."

New page

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 file.
* 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,''' does 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 doesn’t '''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.

|}

@@ Line 254: / Line 254: @@
-Now when the '''<nowiki>condition i < </nowiki>5''' is checked, it will '''return false.'''
+Now when the '''<nowiki>condition i less than </nowiki>5''' is checked, it will '''return false.'''
@@ Line 264: / Line 264: @@
-Next, let us learn about '''while loop.'''
+Now, let us learn about '''while loop.'''
 |-
@@ Line 356: / Line 356: @@
-Now when the '''condition''' '''<nowiki>n < </nowiki>5''' is checked, it will return '''false.'''
+Now when the '''condition''' '''<nowiki>n less than </nowiki>5''' is checked, it will return '''false.'''
@@ Line 366: / Line 366: @@
-Next, let us learn about '''do.. while loop.'''
+Now, let us learn about '''do.. while loop.'''
 |-
@@ Line 421: / Line 421: @@
-Here also we have used the '''post increment operator''' to do so.
+Here also we have used the '''post-increment operator''' to do so.
 |-
@@ Line 465: / Line 465: @@
-Now when the '''condition''' '''<nowiki>m < </nowiki>5''' is checked, it will '''return false.'''
+Now when the '''condition''' '''<nowiki>m less than </nowiki>5''' is checked, it will '''return false.'''

@@ Line 60: / Line 60: @@
 |-
-|| Switch to Editor
+|| Switch to the '''Visual Studio Code editor'''.
-|| Switch to the '''editor.'''
+|| Switch to the '''Visual Studio Code editor'''.
 |-

@@ Line 3: / Line 3: @@
 Author: Jayesh Katta Ramalingaiah
-Domain Reviewer:
+Domain Reviewer: Ankita Maske
-Novice Reviewer:
+Novice Reviewer: Praveeen S.
 Keywords: JavaScript, HTML, for, while, do.. While, for..in

@@ Line 24: / Line 24: @@
 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''')
@@ Line 45: / Line 39: @@
 || 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.
 |-
@@ Line 56: / Line 46: @@
 ||
 * The files used in this tutorial are available in the''' Code files''' link on this tutorial page.
-* Pls download and extract the file.
+* 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'''
-* '''For loop'''
+* '''do..while loop'''
-* '''While loop'''
+* '''for..in loop'''
-* '''Do..while loop'''
-* '''For..in loop'''
 Let us take an example and understand this better.
@@ Line 161: / Line 147: @@
 || <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab
 || Now click on the '''console tab''' in the '''developer tools.'''
 |-
@@ Line 322: / Line 305: @@
-Only if the '''condition''' '''returns true,''' does the '''block '''get '''executed'''.
+Only if the '''condition returns true,'''  the '''block '''get '''executed'''.
-If the '''condition''' '''returns''' '''false, '''the '''loop terminates.'''
+If the '''condition returns false, '''the '''loop terminates.'''
 |-
@@ Line 349: / Line 332: @@
 |-
-|| Switch to '''Browser'''
+|| Switch to '''browser'''
 || Switch back to the '''browser.'''
@@ Line 379: / Line 362: @@
 |-
-|| Switch to Editor
+|| Switch to editor
 || Switch back to the '''editor.'''
@@ Line 423: / Line 406: @@
-So even if the '''condition''' is not satisfied''',''' the '''block '''gets '''executed '''at least once.
+So even if the '''condition''' is not satisfied, the '''block '''gets '''executed '''at least once.
-When the '''condition''' '''returns''' '''false, '''the '''loop terminates.'''
+When the '''condition returns false, '''the '''loop terminates.'''
 |-
@@ Line 448: / Line 431: @@
-If the '''condition''' '''returns true''', the '''loop''' gets '''executed''' again.
+If the '''condition returns true''', the '''loop''' gets '''executed''' again.
@@ Line 458: / Line 441: @@
 |-
-|| Switch to '''Browser'''
+|| Switch to '''browser'''
 || Switch back to the '''browser.'''
@@ Line 482: / Line 465: @@
-Now when the '''condition''' '''<nowiki>m < </nowiki>5''' is checked, it will return '''false.'''
+Now when the '''condition''' '''<nowiki>m < </nowiki>5''' is checked, it will '''return false.'''
@@ Line 494: / Line 477: @@
 || To conclude, if the '''condition''' is not satisfied-
-* The '''for loop '''and '''while loop''' immediately '''terminates''' and doesn’t '''execute''' the '''block '''at all
+* 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'''
 |-
@@ Line 586: / Line 567: @@
 |-
-|| Switch to '''Browser'''
+|| Switch to '''browser'''
 || Switch back to the '''browser.'''
@@ Line 613: / Line 594: @@
 || Slide''': '''Summary''' '''
 || In this tutorial, we have learnt about:
+* '''for Loop'''
+* '''while Loop'''
-* '''For Loop'''
+* '''do..while Loop'''
-* '''While Loop'''
+* '''for..in Loop '''in '''JS'''
-* '''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'''.
+* Open the file '''MyPage.html '''in a '''web browser'''.
 * Observe the output in the '''browser’s console'''
 |-
@@ Line 641: / Line 614: @@
 * The video at the following link summarises the Spoken Tutorial project.
 * Please download and watch it
 |-
@@ Line 649: / Line 620: @@
 * We conduct workshops using spoken tutorials and give certificates.
 * For more details, please write to us.
 |-