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)
