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
