Scribd
Upload
133 views

JS Arrays

The document discusses declaring and initializing arrays in JavaScript. It explains that arrays can be dynamically allocated using the new operator. Elements in arrays are accessed using indexes, and arrays have a length property. The document provides examples of initializing empty and populated arrays using for loops. It also describes a function that outputs the contents of an array as a two-column HTML table for display.

Uploaded by

api-3760405
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
133 views

JS Arrays

The document discusses declaring and initializing arrays in JavaScript. It explains that arrays can be dynamically allocated using the new operator. Elements in arrays are accessed using indexes, and arrays have a length property. The document provides examples of initializing empty and populated arrays using for loops. It also describes a function that outputs the contents of an array as a two-column HTML table for display.

Uploaded by

api-3760405
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 60

1

Chapter 11 - JavaScript: Arrays


Outline
11.1 Introduction
11.2 Arrays
11.3 Declaring and Allocating Arrays
11.4 Examples Using Arrays
11.5 Random Image Generator Using Arrays
11.6 References and Reference Parameters
11.7 Passing Arrays to Functions
11.8 Sorting Arrays
11.9 Searching Arrays: Linear Search and Binary Search
11.10 Multidimensional Arrays
11.11 Building an Online Quiz
11.12 Web Resources

 2004 Prentice Hall, Inc. All rights reserved.


2

Objectives

• In this tutorial, you will learn:


– To introduce the array data structure.
– To understand the use of arrays to store, sort and search lists
and tables of values.
– To understand how to declare an array, initialize an array
and refer to individual elements of an array.
– To be able to pass arrays to functions.
– To be able to search and sort an array.
– To be able to declare and manipulate multi-dimensional
arrays.

 2004 Prentice Hall, Inc. All rights reserved.


3

11.1 Introduction

• Arrays
– Data structures of related items
• Also called Collections
– Dynamic

 2004 Prentice Hall, Inc. All rights reserved.


4

11.2 Arrays

• Arrays in JavaScript
– Each element referenced by a number
• Start at “zeroth element”
• Subscript or index
– Accessing a specific element
• Name of array
• Brackets
• Number of element
– Arrays know their length
• length property

 2004 Prentice Hall, Inc. All rights reserved.


5

11.2 Arrays
c[ 0 ] -45
Name of array
c[ 1 ] 6

c[ 2 ] 0

c[ 3 ] 72

c[ 4 ] 1543

c[ 5 ] -89

c[ 6 ] 0

c[ 7 ] 62

c[ 8 ] -3

c[ 9 ] 1
Position number (index
or subscript) of the c[ 10 ] 6453
element within array c
c[ 11 ] 78

Fig. 11.1 A 12-element array.

 2004 Prentice Hall, Inc. All rights reserved.


6

11.2 Arrays

Operators Associativity Type


() [] . left to right  highest
++ -- ! right to left  unary
* / % left to right  multiplicative
+ - left to right  additive
< <= > >= left to right  relational
== != left to right  equality
&& left to right  logical AND
|| left to right  logical OR
?: right to left  conditional
= += -= *= /= %= right to left  assignment
Fig. 11.2 Precedence and associativity of the operators discussed so far.

 2004 Prentice Hall, Inc. All rights reserved.


7

11.3 Declaring and Allocating Arrays

• Arrays in memory
– Objects
– Operator new
• Allocates memory for objects
• Dynamic memory allocation operator

var c;
c = new Array( 12 );

 2004 Prentice Hall, Inc. All rights reserved.


8

11.4 Examples Using Arrays

• Arrays grow dynamically


– Allocate more space as items are added
• Must initialize array elements
– Default value is undefined
– for loops convenient
– Referring to uninitialized elements or elements outside array
bounds is an error

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?> 9
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 11.3: InitArray.html --> InitArray.html
6 <!-- Initializing an Array --> (1 of 3)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Initializing an Array</title>
11
12
Array n1 has five elements.
<script type = "text/javascript">
13 <!--
14 // this function is called when the <body> element's
Array n2 is an empty array.
15 // onload event occurs
16 function initializeArrays()
17 {
18 var n1 = new Array( 5 ); // allocate 5-element Array
19
The for loop initializes the elements in n1 to
var n2 = new Array(); // allocate empty Array
20
their subscript numbers (0 to 4).
21 // assign values to each element of Array n1
22 for ( var i = 0; i < n1.length; ++i )
23 n1[ i ] = i;

 2004 Prentice Hall, Inc.


All rights reserved.
24
10
25 // create and initialize five-elements in Array n2 Outline
26 for ( i = 0; i < 5; ++i )
27
The for loop adds five elements
Each function Array n2
to displays theand initialize
n2[ i ] = i;
28
each element to its subscript
contentsnumber (0 to 4). Array
of its respective
InitArray.html
29 outputArray( "Array n1 contains", n1 ); in an XHTML table.(1 of 3)
30 outputArray( "Array n2 contains", n2 );
31 }
32
33 // output "header" followed by a two-column table
34 // containing subscripts and elements of "theArray"
35 function outputArray( header, theArray )
36 {
37 document.writeln( "<h2>" + header + "</h2>" );
38 document.writeln( "<table ouputArray
border = \"1\" width
is =" +
The first time function ouputArray is called,
The second time function
39 "\"100%\">"
called, );
header
variablevariable header
gets thegets “Array
theofvalue
value of n1
40
“Array
contains” n2 and
contains”
variable theArray
and variable gets the
41
theArray
document.writeln(
. the value of n2.
value of n1gets "<thead><th width = \"100\"" +
42 "align = \"left\">Subscript</th>" +
43 "<th align = \"left\">Value</th></thead><tbody>" );

 2004 Prentice Hall, Inc.


All rights reserved.
44
11
45 for ( var i = 0; i < theArray.length; i++ )
Outline
46 document.writeln( "<tr><td>" + i + "</td><td>" +
47 theArray[ i ] + "</td></tr>" );
48 InitArray.html
49 document.writeln( "</tbody></table>" ); (1 of 3)
50 }
51 // -->
52 </script>
53
54 </head><body onload = "initializeArrays()"></body>
55 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
12

11.4 Examples Using Arrays


Fig. 11.3 Initializing the elements of an array.

 2004 Prentice Hall, Inc. All rights reserved.


13

11.4 Examples Using Arrays

• Possible to declare and initialize in one step


– Specify list of values
• Initializer list
var n = [ 10, 20, 30, 40, 50 ];
var n = new Array( 10, 20, 30, 40, 50 );
– Also possible to only initialize some values
• Leave uninitialized elements blank
• Uninitialized elements default to “undefined”
var n = [ 10, 20, , 40, 50 ];

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?> 14
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 11.4: InitArray2.html --> InitArray2.html
6 <!-- Initializing an Array with a Declaration --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Initializing an Array with a Declaration</title>
11
12 <script type = "text/javascript"> Array integers1 is initialized using an initializer list.
13 <!--
14 function start()
15 {
Two values are not supplied for integers2,
16 // Initializer list specifies
which will be displayed as undefined.
number of elements and
17 // value for each element.
18 var colors = new Array( "cyan", "magenta",
19 "yellow", "black" );
20 var integers1 = [ 2, 4, 6, 8 ];
21 var integers2 = [ 2, , , 8 ];
22
23 outputArray( "Array colors contains", colors );
24 outputArray( "Array integers1 contains", integers1 );
25 outputArray( "Array integers2 contains", integers2 );
26 }

 2004 Prentice Hall, Inc.


All rights reserved.
27
15
28 // output "header" followed by a two-column table Outline
29 // containing subscripts and elements of "theArray"
30 function outputArray( header, theArray )
31 { InitArray2.html
32 document.writeln( "<h2>" + header + "</h2>" ); (2 of 2)
33 document.writeln( "<table border = \"1\"" +
34 "width = \"100%\">" );
35 document.writeln( "<thead><th width = \"100\" " +
36 "align = \"left\">Subscript</th>" +
37 "<th align = \"left\">Value</th></thead><tbody>" );
38
39 for ( var i = 0; i < theArray.length; i++ )
40 document.writeln( "<tr><td>" + i + "</td><td>" +
41 theArray[ i ] + "</td></tr>" );
42
43 document.writeln( "</tbody></table>" );
44 }
45 // -->
46 </script>
47
48 </head><body onload = "start()"></body>
49 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
16

11.4 Examples Using Arrays


Fig. 11.4 Initializing the elements of an array.

 2004 Prentice Hall, Inc. All rights reserved.


17

11.4 Examples Using Arrays

• for…in statement
– Perform an action for each element in an array
– Iterates over array elements
• Assigns each element to specified variable one at a time
– Ignores non-existent elements

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?> 18
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 11.5: SumArray.html --> SumArray.html
6 <!-- Summing Elements of an Array --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Sum the Elements of an Array</title>
11
12 <script type = "text/javascript">
13 <!-- The for loop sums the values contained in the 10-
14 function start() element integer array called theArray.
15 {
16 var theArray = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
17 var total1 = 0, total2 = 0;
18
19 for ( var i = 0; i < theArray.length; i++ )
20 total1 += theArray[ i ];
21
22 document.writeln( "Total using subscripts: " + total1 );
23

 2004 Prentice Hall, Inc.


All rights reserved.
24 for ( var element in theArray ) 19
25 total2 += theArray[ element ]; Outline
26 Variable element is assigned a subscript
27 document.writeln( "<br />Total using for...in:in" the
+ range of 0 up to, but not including,
28 total2 ); theArray.length. SumArray.html
29 } (2 of 2)
30 // -->
31 </script>
32
33 </head><body onload = "start()"></body>
34 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
20

11.4 Examples Using Arrays


Fig. 11.5 Calculating the sum of the elements of an array.

 2004 Prentice Hall, Inc. All rights reserved.


21

11.4 Examples Using Arrays

• Arrays can provide shorter and cleaner substitute


for switch statements
– Each element represents one case

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?> 22
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 11.6: RollDie.html --> RollDie.html
6 <!-- Roll a Six-Sided Die 6000 Times --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Roll a Six-Sided Die 6000 Times</title>
11
12 <script type = "text/javascript">
Referencing Array frequency replaces the switch
13 <!-- statement used in Chapter 10’s example.
14 var face, frequency = [ , 0, 0, 0, 0, 0, 0 ];
15
16 // summarize results
17 for ( var roll = 1; roll <= 6000; ++roll ) {
18 face = Math.floor( 1 + Math.random() * 6 );
19 ++frequency[ face ];
20 }
21

 2004 Prentice Hall, Inc.


All rights reserved.
22 document.writeln( "<table border = \"1\"" + 23
23 "width = \"100%\">" ); Outline
24 document.writeln( "<thead><th width = \"100\"" +
25 " align = \"left\">Face<th align = \"left\">" +
26 "Frequency</th></thead></tbody>" ); RollDie.html
27 (2 of 2)
28 for ( face = 1; face < frequency.length; ++face )
29 document.writeln( "<tr><td>" + face + "</td><td>" +
30 frequency[ face ] + "</td></tr>" );
31
32 document.writeln( "</tbody></table>" );
33 // -->
34 </script>
35
36 </head>
37 <body>
38 <p>Click Refresh (or Reload) to run the script again</p>
39 </body>
40 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
24

11.4 Examples Using Arrays


Fig. 11.6 Dice-rolling program using arrays instead of a switch.

 2004 Prentice Hall, Inc. All rights reserved.


25

11.5 Random Image Generator Using Arrays

• Cleaner approach than previous version


– Specify any file name rather than integers 1-7
– Result of Math.random call is index into array of image file
names

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?> 26
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" Outline
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 11.7: RandomPicture2.html --> RandomPicture2
6 <!-- Randomly displays one of 7 images --> .html
7 (1 of 2)
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Random Image Generator</title>
11
12 <script type = "text/javascript">
13 <!--
14 var pictures =
15 [ "CPE", "EPT", "GPP", "GUI", "PERF", "PORT", "SEO" ];

 2004 Prentice Hall, Inc.


All rights reserved.
16
27
17 document.write ( "<img src = \"" + Outline
18 pictures[ Math.floor( Math.random() * 7 ) ] +
19 ".gif\" width = \"105\" height = \"100\" />" );
20 // --> RandomPicture2
21 </script> .html
22 (2 of 2)
23 </head>
24
25 <body>
26 <p>Click Refresh (or Reload) to run the script again</p>
27 </body>
28 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
28

11.5 Random Image Generator Using Arrays


Fig. 11.7 Random image generation using arrays.

 2004 Prentice Hall, Inc. All rights reserved.


29

11.6 References and Reference Parameters

• Two ways to pass parameters


– Pass-by-value
• Pass copy of original value
• Default for numbers and booleans
• Original variable is unchanged
– Pass-by-reference
• How objects are passed, like arrays
• Pass location in memory of value
• Allows direct access to original value
• Improves performance

 2004 Prentice Hall, Inc. All rights reserved.


30

11.7 Passing Arrays to Functions

• Name of array is argument


– Not necessary to also pass size of array
• Arrays know their size
– Passed by reference
• Individual elements are passed by value if numbers or
booleans
• Array.join
– Creates string containing all array elements
– Specify separator

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?> 31
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 11.8: PassArray.html --> PassArray.html
6 <!-- Passing Arrays --> (1 of 3)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Passing Arrays and Individual Array
11 Elements to Functions</title>
12
13 <script type = "text/javascript">
14 <!-- The first call to function outputArray displays the
15 function start() contents of the Array a before it is modified.
16 {
17 var a = [ 1, 2, 3, 4, 5 ];
18
19 document.writeln( "<h2>Effects of passing entire " +
20 Function
"array call-by-reference</h2>" ); modifyArray multiplies each element by 2.
21 outputArray(
22 "The values of the original array are: ", a );
23
24 modifyArray( a ); // array a passed call-by-reference
25

 2004 Prentice Hall, Inc.


All rights reserved.
26 outputArray( 32
27 "The values of the modified array are: ", a ); Outline
28
29
Again, function outputArray is called to show
document.writeln( "<h2>Effects of passing array " +
30
that the contents of Array a have been modified.PassArray.html
"element call-by-value</h2>" +
31 "a[3] before modifyElement: " + a[ 3 ] ); (2 of 3)
32
33
Function modifyElement multiplies the
modifyElement( a[ 3 ] );
34
contents of a[ 3 ] by 2.
35 document.writeln(
36 "<br />a[3] after modifyElement: " + a[ 3 ]The
); value of a[ 3 ] is output to show its
37 } contents before it is modified.
38
39 // outputs "header" followed by the contents of "theArray"
40 function outputArray( header, theArray )
41 {
42 document.writeln(
43 header + theArray.join( " " ) + "<br />" );
44 }
45
Method join takes as its argument a string
containing a separator that should be used to
separate the elements of the array in the string
that is returned.

 2004 Prentice Hall, Inc.


All rights reserved.
46 // function that modifies the elements of an array
33
47 function modifyArray( theArray ) Outline
48 {
49 for ( var j in theArray )
50 theArray[ j ] *= 2; PassArray.html
51 } (3 of 3)
52
53 // function that attempts to modify the value passed
54 function modifyElement( e ) Multiply each element in theArray by 2.
55 {
56 e *= 2;
57 document.writeln( "<br />value in modifyElement: " + e );
58 }
59 // -->
60 </script>
61
62 </head><body onload = "start()"></body>
63 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
34

11.7 Passing Arrays to Functions


Fig. 11.8 Passing arrays and individual array elements to functions.

 2004 Prentice Hall, Inc. All rights reserved.


35

11.8 Sorting Arrays

• Sorting
– Important computing task
• Array.sort
– Defaults to string comparison
– Optional comparator function
• Return negative if first argument less than second
• Return zero if arguments equal
• Return positive if first argument greater than second

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?> 36
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 11.9: sort.html --> Sort.html
6 <!-- Sorting an Array --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Sorting an Array with Array Method sort</title>
11
12 Method
<script type = "text/javascript"> sort takes as its optional argument the name of a
13 <!-- function that compares two arguments and returns a value
14 function start() of –1, 0 or 1.
15 {
16 var a = [ 10, 1, 9, 2, 8, 3, 7, 4, 6, 5 ];
17
18 document.writeln( "<h1>Sorting an Array</h1>" );
19 outputArray( "Data items in original order: ", a );
20 a.sort( compareIntegers ); // sort the array
21 outputArray( "Data items in ascending order: ", a );
22 }

 2004 Prentice Hall, Inc.


All rights reserved.
23
37
24 // outputs "header" followed by the contents of "theArray" Outline
25 function outputArray( header, theArray )
26 {
27 document.writeln( "<p>" + header + Sort.html
28 theArray.join( " " ) + "</p>" ); (2 of 2)
29 }
30
31 // comparison function for use with sort
32 function compareIntegers( value1, value2 )
33 {
34 return parseInt( value1 ) - parseInt( value2 );
35 } Function compareIntegers calculates the difference
36 // --> between the integer values of its arguments.
37 </script>
38
39 </head><body onload = "start()"></body>
40 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
38

11.8 Sorting Arrays


Fig. 11.9 Sorting an array with sort.

 2004 Prentice Hall, Inc. All rights reserved.


39
11.9 Searching Arrays: Linear Search and
Binary Search
• Searching
– Look for matching key value
• Linear search
– Iterate through each element until match found
– Inefficient
• Worst case scenario, must test entire array
• Binary search
– Requires sorted data
– Cuts search range in half each iteration
– Efficient
• Only look at small fraction of elements

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?> 40
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 11.10: LinearSearch.html --> LinearSearch.html
6 <!-- Linear Search of an Array --> (1 of 3)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head> Array a is initiated with 100 elements.
10 <title>Linear Search of an Array</title>
11
12 <script type = "text/javascript">
13 <!-- Array a is populated with the even integers 0 to 198.
14 var a = new Array( 100 ); // create an Array
15
16 // fill Array with even integer values from 0 to 198
17 for ( var i = 0; i < a.length; ++i )
18 a[ i ] = 2 * i;
19

 2004 Prentice Hall, Inc.


All rights reserved.
20 // function called when "Search" button is pressed 41
21 function buttonPressed() Outline
22 {
23 var searchKey = searchForm.inputVal.value;
24 LinearSearch.html
25 // Array a is passed to linearSearch even though it (2 of 3)
26 // is a global variable. Normally an Get value
array willof search key from the input field in
27 // the XHTML form.
be passed to a method for searching.
28 var element = linearSearch( a, parseInt( searchKey ) );
29
30 if ( element != -1 ) Calling function linearSearch and passing it the
31 searchForm.result.value = Array a and the value of variable searchKey as
32 "Found value in element " an integer.
+ element;
33 else
34 searchForm.result.value = "Value not found";
35 }
36

 2004 Prentice Hall, Inc.


All rights reserved.
37 // Search "theArray" for the specified "key" value 42
38 function linearSearch( theArray, key ) Outline
39 {
40 for ( var n = 0; n < theArray.length; ++n )
41 if ( theArray[ n ] == key ) LinearSearch.html
42 return n; (3 of 3)
43
Variable theArray gets the value of
44 return -1;
Array a and variable key gets the
45 } Function
value of variable searchKey . linearSearch compares each
46 // --> each element with a search key.
47 </script>
48
49 </head>
50
51 <body>
52 <form name = "searchForm" action = "">
53 <p>Enter integer search key<br />
54 <input name = "inputVal" type = "text" />
55 <input name = "search" type = "button" value = "Search"
56 onclick = "buttonPressed()" /><br /></p>
57
58 <p>Result<br />
59 <input name = "result" type = "text" size = "30" /></p>
60 </form>
61 </body>
62 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
43
11.9 Searching Arrays: Linear Search and
Binary Search
Fig. 11.10 Linear search of an array.

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?> 44
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 11.11 : BinarySearch.html --> BinarySearch.html
6 <!-- Binary search --> (1 of 5)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Binary Search</title>
11 Array a is initialized with 15 elements.
12 <script type = "text/javascript">
13 <!--
14 var a = new Array( 15 );
15
16 for ( var i = 0; i < a.length; ++i )
17 a[ i ] = 2 * i;
18

 2004 Prentice Hall, Inc.


All rights reserved.
19 // function called when "Search" button is pressed 45
20 function buttonPressed() Outline
21 {
22 var searchKey = searchForm.inputVal.value;
23 BinarySearch.html
24 searchForm.result.value = (2 of 5)
25 "Portions of array searched\n";
26 Function binarySearch receives two arguments:
27 // Array a is passed to
the Array a and the search key, searchKey.
binarySearch even though it
28 // is a global variable. This is done because
29 // normally an array is passed to a method
30 // for searching.
31 var element =
32 binarySearch( a, parseInt( searchKey ) );
33
34 if ( element != -1 )
35 searchForm.result.value +=
36 "\nFound value in element " + element;
37 else
38 searchForm.result.value += "\nValue not found";
39 }
40

 2004 Prentice Hall, Inc.


All rights reserved.
41 // Binary search 46
42 function binarySearch( theArray, key ) Outline
43 {
44 var low = 0; // low subscript
45 var high = theArray.length - 1; // high subscript BinarySearch.html
46 var middle; // middle subscript (3 of 5)
47
48 while ( low <= high ) {
49 middle = ( low + high ) / 2;
50
51 // The following line is used to display the
52 // part of theArray currently being manipulated
If the key matches the middle element of a
53 // during each iteration of the binary
subarray, the subscript of the current element is
54 // search loop.
returned.
55 buildOutput( theArray, If key
low, is less
middle, high ); the middle element, the high
than
56 subscript is set to middle – 1.
57 if ( key == theArray[ middle ] ) // match
58 return middle;
59 else if ( key < theArray[ middle ] )
60 If key is greater then the middle elements, the
high = middle - 1; // search low end of array
61 else
high subscript is set to middle + 1.
62 low = middle + 1; // search high end of array
63 }

 2004 Prentice Hall, Inc.


All rights reserved.
64
47
65 return -1; // searchKey not found Outline
66 }
67
68 // Build one row of output showing the current BinarySearch.html
69 // part of the array being processed. (4 of 5)
70 function buildOutput( theArray, low, mid, high )
71 {
72 for ( var i = 0; i < theArray.length; i++ ) {
73 if ( i < low || i Function
> high ) buildOutput creates the markup that
74 displays the
searchForm.result.value += results
" ";of the search.
75 // mark middle element in output
76 else if ( i == mid )
77 searchForm.result.value += theArray[ i ] +
78 ( theArray[ i ] < 10 ? "* " : "* " );
79 else
80 searchForm.result.value += theArray[ i ] +
81 ( theArray[ i ] < 10 ? " " : " " );
82 }
83
84 searchForm.result.value += "\n";
85 }
86 // -->
87 </script>
88 </head>
89

 2004 Prentice Hall, Inc.


All rights reserved.
90 <body> 48
91 <form name = "searchForm" action = ""> Outline
92 <p>Enter integer search key<br />
93 <input name = "inputVal" type = "text" />
94 <input name = "search" type = "button" value = BinarySearch.html
95 "Search" onclick = "buttonPressed()" /><br /></p> (5 of 5)
96 <p>Result<br />
97 <textarea name = "result" rows = "7" cols = "60">
98 </textarea></p>
99 </form>
100 </body>
101 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
49
11.9 Searching Arrays: Linear Search and
Binary Search
Fig. 11.11 Binary search of an array.

 2004 Prentice Hall, Inc. All rights reserved.


50

11.10 Multidimensional Arrays

• Two-dimensional arrays analogous to tables


– Rows and columns
• Specify row first, then column
– Two subscripts

 2004 Prentice Hall, Inc. All rights reserved.


51

11.10 Multidimensional Arrays

Column 0 Column 1 Column 2 Column 3

Row 0 a[ 0 ][ 0 ] a[ 0 ][ 1 ] a[ 0 ][ 2 ] a[ 0 ][ 3 ]

Row 1 a[ 1 ][ 0 ] a[ 1 ][ 1 ] a[ 1 ][ 2 ] a[ 1 ][ 3 ]

Row 2 a[ 2 ][ 0 ] a[ 2 ][ 1 ] a[ 2 ][ 2 ] a[ 2 ][ 3 ]

Column subscript (or index)

Row subscript (or index)

Array name

Fig. 11.12 Two-dimensional array with three rows and four columns.

 2004 Prentice Hall, Inc. All rights reserved.


52

11.10 Multidimensional Arrays

• Declaring and initializing multidimensional arrays


– Group by row in square brackets
– Treated as arrays of arrays
– Creating array b with one row of two elements and a second
row of three elements:
var b = [ [ 1, 2 ], [ 3, 4, 5 ] ];

 2004 Prentice Hall, Inc. All rights reserved.


53

11.10 Multidimensional Arrays

• Also possible to use new operator


– Create array b with two rows, first with five columns and
second with three:
var b;

b = new Array( 2 );
b[ 0 ] = new Array( 5 );
b[ 1 ] = new Array( 3 );

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?> 54
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Outline
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 11.13: InitArray3.html --> InitArray3.html
6 <!-- Initializing Multidimensional Arrays --> (1 of 2)
7
8 Array array1 provides six initializers in
<html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
two rows.
10 <title>Initializing Multidimensional Arrays</title>
11 Array array2 provides six initializers in
12 three
<script type = "text/javascript"> rows.
13 <!--
14 function start()
15 {
16 var array1 = [ [ 1, 2, 3 ], // first row
17 [ 4, 5, 6 ] ]; // second row
18 var array2 = [ [ Function
1, 2 ], outputArray
// first displays
row each array’s
19 [ elements
3 ], in a Web page.
// second row
20 [ 4, 5, 6 ] ]; // third row
21
22 outputArray( "Values in array1 by row", array1 );
23 outputArray( "Values in array2 by row", array2 );
24 }

 2004 Prentice Hall, Inc.


All rights reserved.
25
55
26 function outputArray( header, theArray ) Outline
27 {
28 document.writeln( "<h2>" + header + "</h2><tt>" );
29 InitArray3.html
30 for ( var i in theArray ) { (2 of 2)
31
32 for ( var j in theArray[ i ] )
33 document.write( theArray[ i ][ j ] + " " );
34
35 document.writeln( "<br />" );
36 }
37
Referencing the multidimensional
38
array theArray.
document.writeln( "</tt>" );
39 }
40 // -->
41 </script>
42
43 </head><body onload = "start()"></body>
44 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
56

11.10 Multidimensional Arrays


Fig. 11.13 Initializing multidimensional arrays.

 2004 Prentice Hall, Inc. All rights reserved.


57

11.11 Building an Online Quiz

• Radio buttons
– Represented as an array
• Name of radio buttons is name of array
• One element per button
– checked property is true when selected
• XHTML Forms
– Contain controls, including radio buttons
– action property specifies what happens when submitted
• Can call JavaScript code

 2004 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 58
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" Outline
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 11.14: quiz.html --> Quiz.html
6 <!-- Online Quiz --> (1 of 2)
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Online Quiz</title>
11
12 <script type = "text/JavaScript">
13
14 function checkAnswers()
15 {
16 // determine whether the answer is correct
17 if ( myQuiz.radiobutton[ 1 ].checked )
18 document.write( "Congratulations, your answer is correct" );
19 else // if the answer is incorrect
20 document.write( "Your answer is incorrect. Please trythe
again"
Determining value);of property
21 } checked.
22
23 </script>
24
25 </head>

 2004 Prentice Hall, Inc.


All rights reserved.
26
59
27 <body>
Outline
28 <form id = "myQuiz" action = "JavaScript:checkAnswers()">
29 <p>Select the name of the tip that goes with the image shown:<br />
30 <img src="EPT.gif" width="108" height="100" alt="mystery tip"/> Quiz.html
31 <br />
Call the checkAnswers function (2 of 2)
32
when the form is submitted.
33 <input type = "radio" name = "radiobutton" value = "CPE" />
34 <label>Common Programming Error</label>
35
36 <input type = "radio" name = "radiobutton" value = "EPT" />
37 <label>Error-Prevention Tip</label>
38
39 <input type = "radio" name = "radiobutton" value = "PERF" />
40 <label>Performance Tip</label>
41
42 <input type = "radio" name = "radiobutton" value = "PORT" />
43 <label>Portability Tip</label><br />
44
45 <input type = "submit" name = "submit" value = "Submit" />
46 <input type = "reset" name = "reset" value = "Reset" />
47 </p>
48 </form>
49 </body>
50 </html>

 2004 Prentice Hall, Inc.


All rights reserved.
60

11.11 Building an Online Quiz


Fig. 11.14 Online quiz graded with JavaScript.

 2004 Prentice Hall, Inc. All rights reserved.

You might also like