Advance Web Programming

Week 4 Arrays

1
 if…else --?-- switch
• If the action to be taken of the value of a single
variable (or a single expression), use ‘switch’

• When the action depends on the values of

multiple variables (or expressions), use the
‘if...else’ structure

2
 Compound Statements
• At times, we need to put multiple statements at
places where JavaScript expects only one

• For those situations, JavaScript provides a way

of grouping a number of statements into a
single statement, called a “statement block”

• This is done simply by enclosing any number of

statements within curly braces, { }

• NOTE: Although the statements within the

3
block end in semicolons, the block itself doesn’t
 for: Example 1

x=1;
Initial count
while ( x < 6000 ) {Condition Operation
document.write ( x ) ;
x=x+1;
} for ( x = 1 ; x < 6000 ; x = x + 1 ) {
document.write ( x ) ;
}
4
 for --?-- while
• When the exact number of iterations is
known, use the ‘for’ loop

• When the number of iterations depend

upon a condition being met, use the
‘while’ loop

5
‘for’ loops become especially useful
when used in conjunction with arrays

We’ll find out about arrays today, and

we’ll probe their usefulness as part of
‘for’ loop structures

6
 Today’s Topic:
Arrays

• We will find out why we need arrays

• We will become able to use arrays for solving

simple problems

7
Array?
8
 Array

An indexed list of elements

We said that a variable is a container that

holds a value.

Similarly, an Array can be considered a

container as well, but this one can hold
multiple values
9
 Array
An indexed list of elements

Example: There are many ways of

assigning identifiers to the following fruit

strawberry orange apple watermelon

fruit1 fruit2 fruit3 fruit4
fruit[ 0 ] fruit[ 1 ] fruit[ 2 ] fruit[ 3 ]
10
 Array
An indexed list of elements

• fruit[ 0 ], fruit[ 1 ], fruit[ 2 ], and fruit[ 3 ] are the

elements of an array

• ‘fruit’ is the identifier for that array

• The length of the ‘fruit’ array is 4, i.e. ‘fruit’ has

four elements

11
 Array

fruit[ 0 ]

Square
Identifier Index
bracket

12
Let’s now take look at one of the
advantages of using arrays

13
var student1, student2, student3, student4 ;

student1 = “Waseem” ;
student2 = “Waqar” ;
student3 = “Saqlain” ;
student4 = “Daanish” ;

document.write( student1 ) ;
document.write( student2 ) ;
document.write( student3 ) ;
document.write( student4 ) ; 14
student = new Array( 4 ) ; //array declaration

student[ 0 ] = “Waseem” ;
Can you see
student[ 1 ] = “Waqar” ; the advantage
student[ 2 ] = “Saqlain” ; of using arrays
student[ 3 ] = “Daanish” ; along with the
‘for’ loop?
for ( x = 0 ; x < 4 ; x = x + 1 ) {
document.write( student[ x ] ) ;
}
15
 Arrays in JavaScript
• In JavaScript, arrays are implemented in the
form of the ‘Array’ object

• The key property of the ‘Array’ object is ‘length’,

i.e the number of elements in an array

• Two of the key ‘Array’ methods are:

– reverse( )
– sort( )

• Elements of an array can be of any type; you

can even have an array containing other arrays
16
Declaring a New Instance of the Array Object

• ‘student’ is an instance of the ‘Array’ object

• ‘student’ was declared such that it is of length ‘4’

• That is, student is an array having 4 elements

• The four elements of the array are: ‘student[ 0 ]’,

‘student[ 1 ]’, ‘student[ 2 ]’, and ‘student[ 3 ]’

17
 The ‘new’
This is the operator creates Pair of
identifier of the an instance paren-
new instance theses

student = new Array( 4 )

The ‘assignment’
operator
Length of the
This is the parent object (or new instance
18
class) of the new instance of ‘Array’
An Object

19
‘Instances’ of an Object

20
 All instances
of an object are
objects themselves!

21
‘Property’ Values of the Instances May Differ

22
student = new Array( 4 )

23
 Array Identifiers
The naming rules for Array identifiers are
the same as were discussed for variable
identifiers

24
Assigning Values to Array Elements
a[ 1 ] = 5 ; //the second element

name[ 5 ] = “bhola” ;

number = 5 ;
name[ number ] = name[ 5 ] ;

for ( x = 0 ; x < 10 ; x = x + 1 ) {
y[ x ] = x * x ;
} 25
Remember: just like C, C++ and Java,
the first element of an array has an
index number equal to zero

26
JavaScript Arrays are Heterogeneous
Unlike many other popular languages,
a JavaScript Array can hold elements
of multiple data types, simultaneously

a = new Array( 9 ) ;
b = new Array( 13 ) ;

b[ 0 ] = 23.7 ;
b[ 1 ] = “Bhola Continental Hotel” ;
b[ 2 ] = a ; 27
 The ‘length’ Property of Arrays

‘d’ is an ‘length’ is a
instance of the property of the
‘Array’ object object ‘d’

d = new Array ( 5 ) ;
document.write( d.length ) ;

28
 The ‘length’ Property of Arrays
x = new Array ( 10 ) ; What is
advantage
for ( x = 0 ; x < 10 ; x = x + 1 ) { of using
‘x.length’
y[ x ] = x * x ;
here
} instead of
x = new Array ( 10 ) ; using the
literal ‘10’?
for ( x = 0 ; x < x.length ; x = x + 1 ) {
y[ x ] = x * x ;
} 29
 Array Methods: sort( )
Sorts the elements in alphabetical order

x = new Array ( 4 ) ; Saqlain

x[ 0 ] = “Waseem” ; Shoaib
x[ 1 ] = “Waqar” ; Waqar
x[ 2 ] = “Saqlain” ; Waseem
x[ 3 ] = “Shoaib” ;
x.sort( ) ;
for ( k = 0 ; k < x.length; k = k + 1 ) {
document.write( x[ k ] + “<BR>” ) ;
30
}
Were the elements sorted in
ascending or descending order?

What if you wanted to arrange them

in the reverse order?

31
 Array Methods: reverse( )
Reverses the order of the elements
x = new Array ( 4 ) ; Saqlain
x[ 0 ] = “Waseem” ; Shoaib
x[ 1 ] = “Waqar” ; Waqar
x[ 2 ] = “Saqlain” ; Waseem
x[ 3 ] = “Shoaib” ; Is this the
x.reverse( ) ; required
x.sort( ) ; result?
for ( k = 0 ; k < x.length; k = k + 1 ) {
document.write( x[ k ] + “<BR>”) ;
} 32
 Array Methods: reverse( )
Reverses the order of the elements
x = new Array ( 4 ) ; Waseem
x[ 0 ] = “Waseem” ; Waqar
x[ 1 ] = “Waqar” ; Shoaib
x[ 2 ] = “Saqlain” ; Saqlain
x[ 3 ] = “Shoaib” ;
x.sort( ) ;
x.reverse( ) ;
for ( k = 0 ; k < x.length; k = k + 1 ) {
document.write( x[ k ] + “<BR>”) ;
} 33
Let’s Now Do a More Substantial Example

Develop a Web page that prompts the

user for 10 words, and then displays them
in form of a list in two different ways:

1. In the order in which the words were

entered
2. In a sorted order

We will try to show you the complete code - the

JavaScript part as well as the HTML part - for this
34
example
Before looking at code, let’s first
understand what is that code
supposed to do

35
36
37
 Pseudo Code
1. Declare the array that will be used for
storing the words

2. Prompt the user and read the user

input into the elements of the array

3. Now write the array to the document

4. Sort the array

5. Write the sorted array to the document38

<HTML>
<HEAD>
<TITLE>Sort Ten Words</TITLE>
<SCRIPT>
words = new Array ( 10 ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
words[ k ] = window.prompt( "Enter word # " + k, "" ) ;
}
document.write( "UNSORTED WORDS:" + "<BR>" ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
document.write( words[ k ] + "<BR>" ) ;
}
words.sort( ) ;
document.write( "SORTED WORDS:" + "<BR>" ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
document.write( words[ k ] + "<BR>" ) ;
}
</SCRIPT>
</HEAD>
<BODY>
</BODY> 39
</HTML>
<HTML>
<HEAD>
<TITLE>Sort Ten Words</TITLE>
<SCRIPT>
//JavaScript Code
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML> 40
The next three slides show the
JavaScript code that goes between
the <SCRIPT>, </SCRIPT> tags

41
 Pseudo Code
1. Declare the array that will be used for
storing the words

2. Prompt the user and read the user

input into the elements of the array

3. Now write the array to the document

4. Sort the array

5. Write the sorted array to the document42

 words = new Array ( 10 ) ;

for ( k = 0 ; k < words.length ; k = k + 1 ) {

words[ k ] = window.prompt(
"Enter word # " + k, "" ) ;
}
This method is used
for collecting data
from the user. It can
display a message
and provides a field
in which the user can 43

enter data
 Pseudo Code
1. Declare the array that will be used for
storing the words

2. Prompt the user and read the user

input into the elements of the array

3. Now write the array to the document

4. Sort the array

5. Write the sorted array to the document44

document.write( "Unsorted Words:" + "<BR>" ) ;

for ( k = 0 ; k < words.length ; k = k + 1 ) {

document.write( words[ k ] + "<BR>" ) ;
}

45
 Pseudo Code
1. Declare the array that will be used for
storing the words

2. Prompt the user and read the user

input into the elements of the array

3. Now write the array to the document

4. Sort the array

5. Write the sorted array to the document46

words.sort( ) ;

document.write( "Sorted Words:" + "<BR>" ) ;

for ( k = 0 ; k < words.length ; k = k + 1 ) {

document.write( words[ k ] + "<BR>" ) ;
}

47
 During Today’s Lecture …
• We found out why we need arrays

• We became able to use arrays for solving

simple problems

48
 Next Web Lecture:
Functions & Variable Scope
• To become familiar with some of JavaScript’s
built-in functions

• To be able to understand the concept of user-

defined functions and their use for solving
simple problems

• To become familiar with the concept of local

and global variables 49