Session 14: Loops and Arrays

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

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

(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
}

(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...
(BSCS)
Sample Code(Try It)
7
<html> Output:
<body>
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
2 X 7 = 14
</script>
2 X 8 = 16
2 X 9 = 18
</body>
2 X 10 = 20
</html>
Loop stopped!
(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
}

(BSCS)
Example Code (Try It)
9
<html>
<head> <script type="text/javascript"> OUTPUT:
 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...
(BSCS)
Example Code (Try It)
10
<html>
Output:
<head> <script type="text/javascript">
 2 X 5 = 10
</script></head> 2 X 6 = 12
<body> 2 X 7 = 14
2 X 8 = 16
</body>
2 X 9 = 18
</html>
2 X 10 = 20
Loop stopped!
(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);

(BSCS)
Code
12
<html> OUTPUT
<body>

</script>
</body>
</html>

(BSCS)
Code
13
<html>
<body> Starting Loop
<script type="text/javascript"> 6*1=6
 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>

(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
}

(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>

(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!
(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>

(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>

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

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

(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]);
Questions?
23

Session 14: Loops and Arrays

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Session 14: Loops and Arrays

Uploaded by

Copyright:

Available Formats

1

LOOPS AND ARRAYS

Aptech Computer Education

 In this Session, you will learn to:

 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)

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

Presented by Muhammad Ehtisham Siddiqui

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

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

 loops through the properties of an object

Presented by Muhammad Ehtisham Siddiqui

Presented by Muhammad Ehtisham Siddiqui

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

Presented by Muhammad Ehtisham Siddiqui

Presented by Muhammad Ehtisham Siddiqui

Presented by Muhammad Ehtisham Siddiqui

Presented by Muhammad Ehtisham Siddiqui

 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

for (variablename in object){

Presented by Muhammad Ehtisham Siddiqui

Presented by Muhammad Ehtisham Siddiqui

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

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

Presented by Muhammad Ehtisham Siddiqui

Presented by Muhammad Ehtisham Siddiqui

Presented by Muhammad Ehtisham Siddiqui

Presented by Muhammad Ehtisham Siddiqui

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

 To enter data in two dimentional array you can

 To Read tw dimenstional array

Presented by Muhammad Ehtisham Siddiqui (BSCS)

You might also like