1

Previously we learned Flow Control & 2

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

 We have to remember this for this next section.

if…else OR switch 3

 Ifthe 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 4

 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 block end in

semicolons, the block itself doesn’t
 for: Example 1
5

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

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
 7

‘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:
8

Arrays

 You will find out why we need arrays

 We will become able to use arrays for solving

simple problems
Array Definitions 9

 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
10

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 ]
 Array 11

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 12

fruit[ 0 ]

Square
Identifier Index
bracket
 13

Let’s now take look at one of the advantages

of using arrays
var student1, student2, student3, student4 ; 14

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

document.write( student1 ) ;
document.write( student2 ) ;
document.write( student3 ) ;
document.write( student4 ) ;
 15

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 ] ) ;
}
Arrays in JavaScript 16

 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 17

 ‘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 ]’
 The ‘new’ operator Pair18of
This is the identifier creates an instance paren-
of the new instance
theses

student = new Array( 4 )

The ‘assignment’
operator
Length of the
new instance of
This is the parent object (or class) of ‘Array’
the new instance
An Object
19
‘Instances’ of an Object
20
 21

All instances
of an object are objects
themselves!
‘Property’ Values of the Instances May Differ
22
 23

student = new Array( 4 )

 24

Array Identifiers

The naming rules for Array identifiers are the

same as were discussed for variable identifiers
Assigning Values to Array Elements
25

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 ;
}
 26

Remember: just like C, C++ and Java,

the first element of an array has an
index number equal to zero
 JavaScript Arrays are Heterogeneous 27

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 ;
 The ‘length’ Property of Arrays
28

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

d = new Array ( 5 ) ;
document.write( d.length ) ;
The ‘length’ Property of Arrays
29

x = new Array ( 10 ) ;

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

y[ x ] = x * x ; advantage of
using ‘x.length
}
’ here instead
of using the
literal ‘10’?
x = new Array ( 10 ) ;

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

y[ x ] = x * x ;
}
Array Methods: sort( ) 30

Sorts the elements in alphabetical order

x = new Array ( 4 ) ;
x[ 0 ] = “Waseem” ; Saqlain
x[ 1 ] = “Waqar” ; Shoaib
x[ 2 ] = “Saqlain” ; Waqar
x[ 3 ] = “Shoaib” ;
Waseem
x.sort( ) ;
for ( k = 0 ; k < x.length; k = k + 1 ) {
document.write( x[ k ] + “<BR>” ) ;
}
 31

Were the elements sorted in ascending or

descending order?

What if you wanted to arrange them in the reverse

order?
 Array Methods: reverse( ) 32

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>”) ;
}
Array Methods: reverse( ) 33

Reverses the order of the elements

x = new Array ( 4 ) ;
x[ 0 ] = “Waseem” ; Waseem
x[ 1 ] = “Waqar” ; Waqar
x[ 2 ] = “Saqlain” ; Shoaib
x[ 3 ] = “Shoaib” ; Saqlain
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 34

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
 35

Before looking at code, let’s first understand

what is that code supposed to do
36
37
Pseudo Code 38

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> 39
<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>
</HTML>
<HTML> 40

<HEAD>
<TITLE>Sort Ten Words</TITLE>
<SCRIPT>
//JavaScript Code
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
 41

The next three slides show the JavaScript code

that goes between the <SCRIPT>, </SCRIPT>
tags
 Pseudo Code 42

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 = new Array ( 10 ) ;
43

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
44

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

 45

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

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

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

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

 47

words.sort( ) ;

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

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

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

Build a program that implements the Bubble Sort

algorithm (Algorithms II)
Lets look at Bubble Sort Video. - https://
youtu.be/IJf5f2LsIEA

The numbers to be sorted will be provided to you and

should be hard coded in the JavaScript code.

Your page should display a button labeled “Run

Bubble Sort”. When that button is clicked, the page
should display the sorted list of numbers
During Today’s Lecture … 49

 We found out why we need arrays

 We became able to use arrays for solving simple

problems
To continue on with sorters…. 50

 Take a look –
 https://youtu.be/kPRA0W1kECg