JavaScript Session 3

LOOPS AND ARRAYS
SESSION 14
Aptech Computer Education
Presented by Muhammad Ehtisham Siddiqui (BSCS)
1

Objectives
 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
2

Loop
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
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.

Types of Loops
(BSCS)
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

For Loops
(BSCS)
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
}

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

Sample Code(Try It)
(BSCS)
7
<html>
<body>
var count;
var table=2;
for(count = 1; count <= 10; count++){
document.write(table+" X "+ count+" = "+table*count );
document.write("<br />");
}
</script>
</body>
</html>
Output:
Starting Loop
2 X 1 = 2
2 X 2 = 4
2 X 3 = 6
2 X 4 = 8
2 X 5 = 10
2 X 6 = 12
2 X 7 = 14
2 X 8 = 16
2 X 9 = 18
2 X 10 = 20
Loop stopped!

While loop
(BSCS)
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
}

Example Code (Try It)
(BSCS)
9
<html>
<head> <script type="text/javascript">

</script></head>
<body>
</body>
</html>
OUTPUT:
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different
value and then try...

Example Code (Try It)
(BSCS)
10
<html>
<head> <script type="text/javascript">

</script></head>
<body>
</body>
</html>
Output:
Starting Loop
2 X 1 = 2
2 X 2 = 4
2 X 3 = 6
2 X 4 = 8
2 X 5 = 10
2 X 6 = 12
2 X 7 = 14
2 X 8 = 16
2 X 9 = 18
2 X 10 = 20
Loop stopped!

Do While Loop
(BSCS)
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);

Code
(BSCS)
12
<html>
<body>

</script>
</body>
</html>
OUTPUT
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Loop stopped!Set the variable to
different value and then try...

Code
(BSCS)
13
<html>
<body>

</script>
</body>
</html>
Starting Loop
6 * 1 = 6
6 * 2 = 12
6 * 3 = 18
6 * 4 = 24
6 * 5 = 30
6 * 6 = 36
6 * 7 = 42
6 * 8 = 48
6 * 9 = 54
6 * 10 = 60
Loop stopped!
Set the variable to different value
and then try...

For in Loop
(BSCS)
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
}

Code
(BSCS)
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>

Array
(BSCS)
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!
var cars = ["Saab", "Volvo", "BMW"];

Creating an Array
(BSCS)
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 = new Array("Saab", "Volvo", "BMW");

Example
(BSCS)
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>

Example
(BSCS)
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>

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

Example(reverse)
(BSCS)
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>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
}
</script></body></html>

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]);

Questions?
23

JavaScript Session 3

More Related Content

What's hot (9)

Similar to JavaScript Session 3 (20)

More from Muhammad Ehtisham Siddiqui (20)

Recently uploaded (20)

JavaScript Session 3

Editor's Notes