Difference between revisions of "JavaScript/C2/Loops-in-JS/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(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...")
 
 
(3 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
Author: Jayesh Katta Ramalingaiah
 
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
 
Keywords: JavaScript, HTML, for, while, do.. While, for..in
Line 24: Line 24:
 
Learning Objectives
 
Learning Objectives
 
|| In this tutorial, we will learn about:
 
|| In this tutorial, we will learn about:
−
 
−
 
 
* Different types of '''Loops''' in '''JS'''
 
* Different types of '''Loops''' in '''JS'''
 
* And their usage
 
* And their usage
−
 
−
 
  
 
|-
 
|-
 
|| Slide: System Specifications
 
|| Slide: System Specifications
 
|| This tutorial is recorded using:
 
|| This tutorial is recorded using:
−
 
−
 
 
* '''Ubuntu Linux''' OS version 18.04
 
* '''Ubuntu Linux''' OS version 18.04
 
* '''Visual Studio Code''' version 1.51.1 ('''code editor''')
 
* '''Visual Studio Code''' version 1.51.1 ('''code editor''')
Line 45: Line 39:
 
|| Slide : Pre-requisites
 
|| Slide : Pre-requisites
 
|| To practice this tutorial,
 
|| To practice this tutorial,
−
 
−
 
 
* You should be familiar with writing and executing''' JS''' files'''.'''
 
* You should be familiar with writing and executing''' JS''' files'''.'''
 
* If not, please go through the prerequisite tutorials on this website.
 
* 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.
 
* 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.
 
* Make a copy and then use them for practising.
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Types of Loops in JS
 
|| Slide: Types of Loops in JS
 
|| The different '''types''' of '''loops''' are:
 
|| 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.
 
Let us take an example and understand this better.
  
 
|-
 
|-
−
|| Switch to Editor
+
|| Switch to the '''Visual Studio Code editor'''.
−
|| Switch to the '''editor.'''
+
|| Switch to the '''Visual Studio Code editor'''.
  
 
|-
 
|-
Line 161: Line 147:
 
|| <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab
 
|| <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab
 
|| Now click on the '''console tab''' in the '''developer tools.'''
 
|| Now click on the '''console tab''' in the '''developer tools.'''
−
 
−
 
−
 
  
 
|-
 
|-
Line 271: 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 281: Line 264:
  
  
−
Next, let us learn about '''while loop.'''
+
Now, let us learn about '''while loop.'''
  
 
|-
 
|-
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.'''
 
|| Switch back to the '''browser.'''
  
Line 373: 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 379: Line 362:
  
 
|-
 
|-
−
|| Switch to Editor
+
|| Switch to editor
 
|| Switch back to the '''editor.'''
 
|| Switch back to the '''editor.'''
  
  
−
Next, let us learn about '''do.. while loop.'''
+
Now, let us learn about '''do.. while loop.'''
  
 
|-
 
|-
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 438: 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 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.'''
 
|| 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 less than </nowiki>5''' is checked, it will '''return false.'''
  
  
Line 494: Line 477:
 
|| To conclude, if the '''condition''' is not satisfied-
 
|| 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'''
 
** It’s also called as '''Entry controlled loop'''
 
* The '''do..while loop''' will '''execute''' the '''block''' at least once before '''terminating'''
 
* The '''do..while loop''' will '''execute''' the '''block''' at least once before '''terminating'''
 
** It’s also called as '''Exit controlled loop'''
 
** It’s also called as '''Exit controlled loop'''
−
 
−
 
  
 
|-
 
|-
Line 586: Line 567:
  
 
|-
 
|-
−
|| Switch to '''Browser'''
+
|| Switch to '''browser'''
 
|| Switch back to the '''browser.'''
 
|| Switch back to the '''browser.'''
  
Line 613: Line 594:
 
|| Slide''': '''Summary''' '''
 
|| Slide''': '''Summary''' '''
 
|| In this tutorial, we have learnt about:
 
|| 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
 
|| Slide: Assignment
 
|| As an assignment:
 
|| As an assignment:
−
 
−
 
 
* Open the file '''assignment.js''' which you have created earlier
 
* Open the file '''assignment.js''' which you have created earlier
 
* Clear the existing code
 
* Clear the existing code
 
* '''Loop '''the numbers from 1 to 100
 
* '''Loop '''the numbers from 1 to 100
 
* '''Log''' the values which are divisible by 3
 
* '''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'''
 
* Observe the output in the '''browser’s console'''
−
 
−
 
  
 
|-
 
|-
Line 641: Line 614:
 
* The video at the following link summarises the Spoken Tutorial project.
 
* The video at the following link summarises the Spoken Tutorial project.
 
* Please download and watch it
 
* Please download and watch it
−
 
−
 
  
 
|-
 
|-
Line 649: Line 620:
 
* We conduct workshops using spoken tutorials and give certificates.
 
* We conduct workshops using spoken tutorials and give certificates.
 
* For more details, please write to us.
 
* For more details, please write to us.
−
 
−
 
  
 
|-
 
|-

Latest revision as of 11:16, 21 June 2021

Title of the script:Loops in JS

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: Ankita Maske

Novice Reviewer: Praveeen S.

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=55277"