Scribd
Upload
66 views23 pages

Session 14: Loops and Arrays

The document discusses different types of loops in JavaScript including for, while, do while, and for/in loops. It provides the syntax and examples of each loop type, demonstrating how to initialize and iterate variables to execute code blocks repeatedly. Examples show using loops to output counting text or multiplication tables to illustrate their functions. The objectives are to explain the different loop types and how to use single and multi-dimensional arrays with loops.

Uploaded by

sameerroushan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
66 views23 pages

Session 14: Loops and Arrays

The document discusses different types of loops in JavaScript including for, while, do while, and for/in loops. It provides the syntax and examples of each loop type, demonstrating how to initialize and iterate variables to execute code blocks repeatedly. Examples show using loops to output counting text or multiplication tables to illustrate their functions. The objectives are to explain the different loop types and how to use single and multi-dimensional arrays with loops.

Uploaded by

sameerroushan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

1

LOOPS AND ARRAYS


SESSION 14

Aptech Computer Education


Presented by Muhammad Ehtisham Siddiqui (BSCS)
Objectives
2

 In this Session, you will learn to:


 Explain while loop
 Explain for loop

 Explain do while loop

 Explain break and continue statement

 Explain single-dimensional arrays

 Explain multi-dimensional arrays

 Explain for .. in loop

Presented by Muhammad Ehtisham Siddiqui (BSCS)


Loop
3

 Loops in JavaScript are used to execute the same block of code a


specified number of times or while a specified condition is true.
 Very often when you write code, you want the same block of code to run
over and over again in a row. Instead of adding several almost equal
lines in a script we can use loops to perform a task like this.

Presented by Muhammad Ehtisham Siddiqui


(BSCS)
Types of Loops
4

 For Loop
 - loops through a block of code a number of times

 While Loop

 loops through a block of code while a specified condition is true

 do/while Loop

 also loops through a block of code while a specified condition is true

 for/in Loop

 loops through the properties of an object

Presented by Muhammad Ehtisham Siddiqui


(BSCS)
For Loops
5

 The 'for' loop is the most compact form of looping. It includes the following three
important parts
 The loop initialization where we initialize our counter to a starting value. The
initialization statement is executed before the loop begins.
 The test statement which will test if a given condition is true or not. If the condition is
true, then the code given inside the loop will be executed, otherwise the control will
come out of the loop.
 The iteration statement where you can increase or decrease your counter.

 Syntax:-
for (initialization; test condition; iteration statement)
{
Statement(s) to be executed if test condition is true
}

Presented by Muhammad Ehtisham Siddiqui


(BSCS)
Sample Code
6

<html>
OUTPUT:
<body>
<script type="text/javascript">
Starting Loop
var count; Current Count : 0
document.write("Starting Loop" + "<br />"); Current Count : 1
for(count = 0; count < 10; count++){ Current Count : 2
document.write("Current Count : " + count ); Current Count : 3
document.write("<br />"); Current Count : 4
} Current Count : 5
document.write("Loop stopped!");
Current Count : 6
Current Count : 7
</script>
Current Count : 8
<p>Set the variable to different value and then try...</p>
Current Count : 9
</body>
Loop stopped!
</html> Set the variable to different
value and then try...
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Sample Code(Try It)
7

<html> Output:
<body>
<script type="text/javascript">
var count; Starting Loop
var table=2; 2X1=2
document.write("Starting Loop" + "<br />"); 2X2=4
for(count = 1; count <= 10; count++){
2X3=6
document.write(table+" X "+ count+" = "+table*count );
2X4=8
document.write("<br />");
2 X 5 = 10
}
2 X 6 = 12
document.write("Loop stopped!");
2 X 7 = 14
</script>
2 X 8 = 16
2 X 9 = 18
</body>
2 X 10 = 20
</html>
Loop stopped!
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
While loop
8

 The while statement creates a loop that is executed while a specified


condition is true.

 The loop will continue to run as long as the condition is true. It will only stop
when the condition becomes false.

 Syntax:
while (Condition)
{
Statement(s) to be executed if expression is true
}

Presented by Muhammad Ehtisham Siddiqui


(BSCS)
Example Code (Try It)
9

<html>
<head> <script type="text/javascript"> OUTPUT:
<!--
var count = 0; Starting Loop
document.write("Starting Loop "); Current Count : 0
Current Count : 1
while (count < 10){ Current Count : 2
document.write("Current Count : " + count + "<br />"); Current Count : 3
count++; Current Count : 4
} Current Count : 5
document.write("Loop stopped!"); Current Count : 6
//--> Current Count : 7
</script></head> Current Count : 8
<body> Current Count : 9
<p>Set the variable to different value and then try...</p> Loop stopped!
</body> Set the variable to different
</html> value and then try...
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Example Code (Try It)
10

<html>
Output:
<head> <script type="text/javascript">
<!--
var count = 1;
document.write("Starting Loop <br/> "); Starting Loop
while (count < 10){ 2X1=2
document.write(5+ " X " + count + " = "+count*5+" <br />"); 2X2=4
count++;
2X3=6
}
document.write("Loop stopped!");
2X4=8
//--> 2 X 5 = 10
</script></head> 2 X 6 = 12
<body> 2 X 7 = 14
<p>Set the variable to different value and then try...</p>
2 X 8 = 16
</body>
2 X 9 = 18
</html>
2 X 10 = 20
Loop stopped!
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
Do While Loop
11

 The do...while loop is similar to the while loop except that the condition check
happens at the end of the

 This means that the loop will always be executed at least once, even if the
condition is false.

 Syntax:
do{
Statement(s) to be executed;
} while (expression);

Presented by Muhammad Ehtisham Siddiqui


(BSCS)
Code
12

<html> OUTPUT
<body>
<script type="text/javascript">
<!--
var count = 0;
Starting Loop
document.write("Starting Loop" + "<br />");
Current Count : 0
do{
Current Count : 1
document.write("Current Count : " + count + "<br />");
Current Count : 2
count++;
Current Count : 3
}
Current Count : 4
while (count < 5);
Loop stopped!Set the variable to
document.write ("Loop stopped!");
different value and then try...
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>

Presented by Muhammad Ehtisham Siddiqui


(BSCS)
Code
13

<html>
<body> Starting Loop
<script type="text/javascript"> 6*1=6
<!-- 6 * 2 = 12
var count = 1; 6 * 3 = 18
document.write("Starting Loop" + "<br />"); 6 * 4 = 24
do{ 6 * 5 = 30
document.write("6 * " + count +" = "+count*6+ "<br6/>");
* 6 = 36
count++; 6 * 7 = 42
} 6 * 8 = 48
while (count <=10); 6 * 9 = 54
document.write ("Loop stopped!"); 6 * 10 = 60
//--> Loop stopped!
</script> Set the variable to different value
<p>Set the variable to different value and then try...</p> and then try...
</body>
</html>

Presented by Muhammad Ehtisham Siddiqui


(BSCS)
For in Loop
14

 The for...in loop is used to loop through an object's properties.

 In each iteration, one property from object is assigned to variablename and


this loop continues till all the properties of the object are exhausted.

 Syntax:

for (variablename in object){


statement or block to execute
}

Presented by Muhammad Ehtisham Siddiqui


(BSCS)
Code
15

<!DOCTYPE html>
<html>
<body>
<p>Click the button to loop through the properties of an object.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
text += person[x] + " ";
} document.getElementById("demo").innerHTML = text; }
</script>
</body>
</html>

Presented by Muhammad Ehtisham Siddiqui


(BSCS)
Array
16

 JavaScript arrays are used to store multiple values in a single


variable.

 An array is a special variable, which can hold more than one value
at a time.

 If you have a list of items (a list of car names, for example), storing
the cars in single variables could look like this:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
 owever, what if you want to loop through the cars and find a specific
one? And what if you had not 3 cars, but 300?
 The solution is an array!
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
var cars = ["Saab", "Volvo", "BMW"];
Creating an Array
17

 Using an array literal is the easiest way to create a JavaScript Array.

 Syntax:
var array_name = [item1, item2, ...];
 Spaces and line breaks are not important. A declaration can span
multiple lines:
var cars = [
"Saab",
"Volvo",
"BMW"
];
 The following example also creates an Array, and assigns values to
it:
var cars
Presented = new Array("Saab",
by Muhammad "Volvo", "BMW");
Ehtisham Siddiqui
(BSCS)
Example
18

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>
</body>
</html>

Presented by Muhammad Ehtisham Siddiqui


(BSCS)
Example
19

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Avoid using new Array(). Use [] instead.</p>
<p id="demo"></p>
<script>
//var points = new Array(40, 100, 1, 5, 25, 10);
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>

Presented by Muhammad Ehtisham Siddiqui


(BSCS)
Example(sort)
20

<!DOCTYPE html>
<html><body>
<h2>JavaScript Array Sort</h2>
<p>The sort() method sorts an array alphabetically.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script> var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Presented by Muhammad Ehtisham Siddiqui


(BSCS)
Example(reverse)
21

<!DOCTYPE html><html><body>
<h2>JavaScript Array Sort</h2>
<p>The sort() method sorts an array alphabetically.</p>
<p>The reverse() method reverts the elements.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.sort();
fruits.reverse();
document.getElementById("demo").innerHTML = fruits;
}
</script></body></html>

Presented by Muhammad Ehtisham Siddiqui


(BSCS)
2 Dimensional Array
22

 var arr = [[],[]]; // 2 dimensional array

 To enter data in two dimentional array you can


use
 arr[0][2] = 'Hi Mr.A';
 arr[1][3] = 'Hi Mr.B';

 To Read tw dimenstional array


 alert(arr[0][2]);

 alert(arr[1][3]);
Presented by Muhammad Ehtisham Siddiqui (BSCS)
Questions?
23

Presented by Muhammad Ehtisham Siddiqui (BSCS)

You might also like