ARRAYS

<< WEB DESIGN FOR USABILITY

COMPUTER NETWORKS: types of networks, networking topologies and protocols >>

Introduction to Computing CS101

LESSON 26

ARRAYS

(WEB DEVELOPMENT LESSON 9)

During the last Lesson we had a discussion on Flow Control & Loops

We discussed the concept of flow control using the "if" and "switch" structures

And also the concept behind the "while" and "for" looping structures

We also solved simple problems using flow control and loop structures

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

Compound Statements:

for: Example 1

Operation

Condition

Initial count

for ( x = 1 ;

x < 6000 ;

x=x+1

){

for --?-- while

When the exact oumberenitt.wriioes (sx nown, use the `for' loop

dn cum of erat tn i k ) ;

When the}number of iterations depend upon a condition being met, use the `while' loop

`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

Today's Topic:

Arrays

We will find out why we need arrays

We will become able to use arrays for solving simple problems

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

Array:

An indexed list of elements

Example: There are many ways of assigning identifiers to the following fruit

orange

apple

watermelo

fruit2

fruit3

fruit[ 1 ]

fruit[ 2 ]

fruit4

strawberry

fruit[ 3 ]

fruit1

fruit[ 0 ]

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

Array

Identifier

166

Introduction to Computing CS101

Index

Fruit [ 0 ]

Square bracket

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

student = new Array( 4 ) ; //array declaration

Can you see the

student[ 0 ] = "Waseem" ;

advantage of

student[ 1 ] = "Waqar" ;

using arrays

student[ 2 ] = "Saqlain" ;

along with the

student[ 3 ] = "Daanish" ;

`for' loop?

for ( x = 0 ; x < 4 ; x = x + 1 ) {

document.write( student[ x ] ) ;

}

26.1 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

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 ]'

This is the identifier

The `new' operator creates

Pair of paren-

of the new instance

an instance

theses

The `assignment' operator

student = new Array( 4 )

This is the parent object (or

Length of the new

class) of the new instance

instance of `Array'

167

Introduction to Computing CS101

An Object

`Instances' of an Object

All instances

of an object are objects themselves!

`Property' Values of the Instances May Differ

168

Introduction to Computing CS101

student = new Array( 4 )

26.2 Array Identifiers

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

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 ;

}

Remember: just like C, C++ and Java, the first element of an array has an index number equal to zero

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 ;

26.3 The `length' Property of Arrays

`length' is a property of

the object `d'

`d' is an instance of the

`Array' object

d = new Array ( 5 ) ;

document.write( d.length ) ;

The `length' Property of Arrays

What is advantage of

x = new Array ( 10 ) ;

using `x.length' here

for ( x = 0 ; x < 10 ; x = x + 1 ) {

instead of using the

y[ x ] = x * x ;

literal `10'?

}

x = new Array ( 10 ) ;

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

y[ x ] = x * x ;

}

26.4 Array Methods: sort( )

26.5 Sorts the elements in alphabetical order

x = new Array ( 4 ) ;

Saqlain

Shoaib

x[ 0 ] = "Waseem" ;

Waqar

x[ 1 ] = "Waqar" ;

Waseem

x[ 2 ] = "Saqlain" ;

x[ 3 ] = "Shoaib" ;

x.sort( ) ;

for ( k = 0 ; k < x.length; k = k + 1 ) { document.write( x[ k ] + "<BR>" ) ;

}

Were the elements sorted in ascending or descending order?

What if you wanted to arrange them in the reverse order?

26.6 Array Methods: reverse( )

26.7 Reverses the order of the elements

169

Introduction to Computing CS101

x = new Array ( 4 ) ;

Saqlain

Is this the

x[ 0 ] = "Waseem" ;

Shoaib

required

x[ 1 ] = "Waqar" ;

Waqar

result?

x[ 2 ] = "Saqlain" ;

Waseem

x[ 3 ] = "Shoaib" ;

x.reverse( ) ;

x.sort( ) ;

for ( k = 0 ; k < x.length; k = k + 1 ) { document.write( x[ k ] + "<BR>") ;

}

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

}

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

example

170

Introduction to Computing CS101

26.7 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 document

<HTML>

<HEAD>

<TITLE>Sort Ten Words</TITLE>

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>

</HTML>

<HTML>

<HEAD>

<TITLE>Sort Ten Words</TITLE>

//JavaScript Code

</SCRIPT>

171

Introduction to Computing CS101

</HEAD>

<BODY>

</BODY>

</HTML>

The next three slides show the JavaScript code that goes between the <SCRIPT>, </SCRIPT> tags

Pseudo Code

·Declare the array that will be used for storing the words

·Prompt the user and read the user input into the elements of the array

·Now write the array to the document

·Sort the array

·Write the sorted array to the document

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

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

for ( k = 0 ; k < words.length ; k = k + 1 ) { document.write( words[ k ] + "<BR>" ) ;

}

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 document

words.sort( ) ;

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

for ( k = 0 ; k < words.length ; k = k + 1 ) { document.write( words[ k ] + "<BR>" ) ;

}

During Today's Lesson ...

·We found out why we need arrays

·We became able to use arrays for solving simple problems

Next (the 10th) Web Dev 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

172

Table of Contents: