1 Chapter 11 Java Script Arrays Outline 11

2 11. 2 Arrays Name of array (Note that all elements of this array

3 11. 3 Declaring and Allocating Arrays 2001 Prentice Hall, Inc. All rights reserved.

33 34 35 36 37 38 39 40 41 42 43 44 45 46

Outline Program Output 2001 Prentice Hall, Inc. All rights reserved. 6

28 29 30 31 32 33 34 35 36 37 38 39 40 41

Outline Program Output 2001 Prentice Hall, Inc. All rights reserved. 9

Outline Program Output 2001 Prentice Hall, Inc. All rights reserved. 11

36 37 38 39 40 </head> <body> <p>Click Refresh (or Reload) to run the

35 36 37 38 39 40 41 42 43 44 45 46 47 48

Outline Program Output 2001 Prentice Hall, Inc. All rights reserved. 16

31 32 33 34 35 36 37 38 39 40 // comparison function for

36 37 38 39 40 41 42 43 44 45 46 47 48 49

Outline Program Output 2001 Prentice Hall, Inc. All rights reserved. 21

34 35 36 37 38 39 40 41 42 43 44 45 46 47

68 69 70 71 72 73 74 75 76 77 78 79 80 81

Outline Program Output 2001 Prentice Hall, Inc. All rights reserved. 25

26 11. 9 Multiple-Subscripted Arrays Fig. 11 Double-subscripted array with three rows and four

30 31 32 33 34 35 36 37 38 39 40 41 42 43

Slides: 28

Download presentation

1 Chapter 11 - Java. Script: Arrays Outline 11. 1 11. 2 11. 3 11. 4 11. 5 11. 6 11. 7 11. 8 11. 9 11. 10 Introduction Arrays Declaring and Allocating Arrays Examples Using Arrays References and Reference Parameters Passing Arrays to Functions Sorting Arrays Searching Arrays: Linear Search and Binary Search Multiple-Subscripted Arrays Java. Script Internet and World Wide Web Resources 2001 Prentice Hall, Inc. All rights reserved.

2 11. 2 Arrays Name of array (Note that all elements of this array have the same name, c) Position number (index or subscript) of the element within array c c[ 0 ] -45 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 c[ 10 ] 6453 c[ 11 ] 78 Fig. 11. 1 A 12 -element array. 2001 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 Outline <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd">   <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>Initializing an Array</title>Array n 1 has five elements. <script type = "text/javascript"> <!-Array n 2 is an empty array. // this function is called when the <body> element's // onload event occurs function initialize. Arrays() The for loop initializes the elements in n 1 to { var n 1 = new Array( 5 ); // allocate 5 -element Array their subscript numbers (0 to 4). Init. Array. html var n 2 = new Array(); // allocate empty Array // assign values to each element of Array n 1 The for loop five elements to Array n 2 and for ( var i = 0; i < n 1. length; ++iadds ) n 1[ i ] = i; initialize each element to its subscript number (0 to 4). // create and initialize five-elements in Array n 2 for ( i = 0; i < 5; ++i ) Each function displays the contents of n 2[ i ] = i; respective Array in an XHTML table. its output. Array( "Array n 1 contains", n 1 ); output. Array( "Array n 2 contains", n 2 ); } 2001 Prentice Hall, Inc. All rights reserved. 4

33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 // output "header" followed by a two-column table // containing subscripts and elements of " the. Array" function output. Array( header, the. Array ) { document. writeln( "<h 2>" + header + "</h 2>" ); document. writeln( "<table border = "1" width =" + ""100%">" ); time The first second function ouput. Array is The time function ouput. Array is called, Outline called, variable header theof of + variable header gets thegets value “Array document. writeln( "<thead><th width =value "100"" “Array n 2 contains” and variable "align =contains” "left">Subscript</ th>" + n 1 and variable the. Array gets "<ththe align ); the. Array gets the value ofth></thead><tbody>" n 2. value= of"left">Value</ n 1. for ( var i = 0; i < the. Array. length; i++ ) document. writeln( "<tr><td>" + i + "</td><td>" + the. Array[ i ] + "</td></tr>" ); document. writeln( "</tbody></table>" ); } // --> </script> Init. Array. html </head><body onload = "initialize. Arrays()"></body> </html> 2001 Prentice Hall, Inc. All rights reserved. 5

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 Outline <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd">   <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> for loop sums <title>Sum the Elements of The an Array </title> the values contained in the 10 element integer array called the. Array. <script type = "text/javascript"> <!-function start() { var the. Array = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; var total 1 = 0, total 2 = 0; Sum. Array. html is assigned a subscript in the range of 0 up to, but not including, the. Array. length. using subscripts: " + total 1 ); for ( var i = 0; i < the. Array. length; i++ ) Variable element total 1 += the. Array[ i ]; document. writeln( "Total for ( var element in the. Array ) total 2 += the. Array[ element ]; document. writeln( " Total using for/in: " + total 2 ); } // --> </script> </head><body onload = "start()"></body> </html> 2001 Prentice Hall, Inc. All rights reserved. 10

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 Outline <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd">   <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>Roll a Six-Sided. Referencing Die 6000 Times </title> Array frequency replaces the switch statement used in Chapter 10’s example. <script type = "text/javascript"> <!-var face, frequency = [ , 0, 0, 0 ]; // summarize results for ( var roll = 1; roll <= 6000; ++roll ) { face = Math. floor( 1 + Math. random() * 6 ); ++frequency[ face ]; } Roll. Die. html document. writeln( "<table border = "1"" + "width = "100%">" ); document. writeln( "<thead><th width = "100"" + " align = "left">Face< th align = "left">" + "Frequency</th></thead></tbody>" ); for ( face = 1; face < frequency. length; ++face ) document. writeln( "<tr><td>" + face + "</td><td>" + frequency[ face ] + "</td></tr>" ); document. writeln( "</tbody></table>" ); // --> </script> 2001 Prentice Hall, Inc. All rights reserved. 12

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 Outline <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd">   <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>Passing Arrays and Individual Array Elements to Functions </title> The first call to function output. Array displays the of the Array a before it is modified. <script type = "text/javascript"> contents <!-function start() { var a = [ 1, 2, 3, 4, 5 ]; Pass. Array. html Functionofmodify. Array each element by 2. document. writeln( "<h 2>Effects passing entiremultiplies " + "array call-by-reference</h 2>" ); output. Array( a[ "The 3 ] isvalues output of to show its function the Again, original arrayoutput. Array are: " , a ); is called to show The value of contents before it is modified. modify. Array( a ); that the contents of Array a have been modified. the // array. Function a passedmodify. Element call-by-referencemultiplies contents of a[ 3 ] by 2. output. Array( "The values of the modified array are: " , a ); document. writeln( "<h 2>Effects of passing array " + "element call-by-value</h 2>" + "a[3] before modify. Element: " + a[ 3 ] ); modify. Element( a[ 3 ] ); 2001 Prentice Hall, Inc. All rights reserved. 14

35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 document. writeln( " a[3] after modify. Element: " + a[ 3 ] ); Outline } // outputs "header" followed by the contents of " the. Array" function output. Array( header, the. Array ) { document. writeln( header + the. Array. join( " " ) + " " ); } Method takes as its argument a string // function that modifies the elements of join an array function modify. Array( the. Array ) containing a separator that should be used to { separate the elements of the array in the string for ( var j in the. Array ) the. Array[ j ] *= 2; that is returned. } Pass. Array. html // function that attempts to modify the value passed function modify. Element( e ) Multiply each element in the. Array by 2. { e *= 2; document. writeln( " value in modify. Element: " + e ); } // --> </script> </head><body onload = "start()"></body> </html> 2001 Prentice Hall, Inc. All rights reserved. 15

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> Outline   <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>Sorting an Array. Method with Array Method sort </title> sort takes as its optional argument the name of a function that compares two arguments and returns a value "text/javascript"> of – 1, 0 or 1. <script type = <!-function start() { var a = [ 10, 1, 9, 2, 8, 3, 7, 4, 6, 5 ]; document. writeln( "<h 1>Sorting an Array</h 1>" ); output. Array( "Data items in original order: " , a ); a. sort( compare. Integers ); // sort the array output. Array( "Data items in ascending order: " , a ); Sort. html } compare. Integers calculates the // outputs "header" followed. Function by the contents of " the. Array" function output. Array( header, the. Arraybetween ) difference the integer values of its arguments. { document. writeln( "<p>" + header + the. Array. join( " " ) + "</p>" ); } 2001 Prentice Hall, Inc. All rights reserved. 17

31 32 33 34 35 36 37 38 39 40 // comparison function for use with sort function compare. Integers( value 1, value 2 ) { return parse. Int( value 1 ) - parse. Int( value 2 ); } // --> </script> Outline </head><body onload = "start()"></body> </html> Sort. html Program Output 2001 Prentice Hall, Inc. All rights reserved. 18

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 Outline <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> 19   Array a is initiated with 100 elements. <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>Linear Search of an Array </title> Array a is populated <script type = "text/javascript"> <!-var a = new Array( 100 ); // create an Array with the integers 0 to 198. // fill Array with even integer values from 0 to 198 for ( var i = 0; i < a. length; ++i ) a[ i ] = 2 * i; // function called when "Search" button is pressed function button. Pressed() { var search. Key = search. Form. input. Val. value; // Array a is passed to linear. Search even though it // is a global variable. Normally an. Get array valuewill of search key // be passed to a method for searching. the XHTML form. var element = linear. Search( a, parse. Int( search. Key ) ); } Linear. Search. htm l from the input field in if ( element != -1 ) Calling function linear. Search and passing it search. Form. result. value = a and the value of variable "Found value in elementthe " Array + element; search. Key as an integer. else search. Form. result. value = "Value not found"; 2001 Prentice Hall, Inc. All rights reserved.

36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 // Search "the. Array" for the specified "key" value function linear. Search( the. Array, key ) { for ( var n = 0; n < the. Array. length; ++n ) if ( the. Array[ n ] == key ) return n; return -1; } // --> </script> Outline 20 Function linear. Search compares each element a search key. Variable the. Array gets thewith value of Array a and variable key gets the value of variable search. Key. </head> <body> <form name = "search. Form" action = ""> <p>Enter integer search key <input name = "input. Val" type = "text" /> <input name = "search" type = "button" value = "Search" onclick = "button. Pressed()" /> </p> Linear. Search. htm l <p>Result <input name = "result" type = "text" size = "30" /></p> </form> </body> </html> 2001 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> Outline 22   <html xmlns = "http: //www. w 3. org/1999/ xhtml"> <head> <title>Binary Search</title> Array a is initiated with 15 elements. <script type = "text/javascript"> <!-var a = new Array( 15 ); for ( var i = 0; i < a. length; ++i ) a[ i ] = 2 * i; // function called when "Search" button is pressed function button. Pressed() { var search. Key = search. Form. input. Val. value; Binary. Search. htm l Function binary. Search receives two search. Form. result. value = "Portions of array searchedn" ; arguments: the Array a and the search key, search. Key. // Array a is passed to binary. Search even though it // is a global variable. This is done because // normally an array is passed to a method // for searching. var element = binary. Search ( a, parse. Int( search. Key ) ); 2001 Prentice Hall, Inc. All rights reserved.

34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 if ( element != -1 ) search. Form. result. value += "n. Found value in element " + element; else search. Form. result. value += "n. Value not found"; Outline 23 } // Binary search function binary. Search( the. Array, key ) { var low = 0; // low subscript var high = the. Array. length - 1; // high subscript var middle; // middle subscript while ( low <= high ) { middle = ( low + high ) / 2; Binary. Search. htm // The following line is Ifused to display the key matchesthe middle element of a // part of the. Array currently being manipulated the subscript of the currentl element is // during each iteration subarray, of the binary // search loop. returned. If key is less than); the middle element, the high build. Output ( the. Array, low, middle, high subscript is set to middle – 1. if ( key == the. Array[ middle ] ) // match return middle; else if ( key < the. Array[ middle ] ) then the middle elements, If key is greater high = middle - 1; // search low end of array high subscript is set to middle +1. else low = middle + 1; // search high end of array the } return -1; // search. Key not found } 2001 Prentice Hall, Inc. All rights reserved.

68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 // Build one row of output showing the current // part of the array being processed. function build. Output( the. Array, low, mid, high ) { for ( var i = 0; i < the. Array. length; i++ ) { if ( i < low || i > high ) Function build. Output"; creates the search. Form. result. value += " // mark middle element output displays the in results of the search. else if ( i == mid ) search. Form. result. value += a[ i ] + ( the. Array[ i ] < 10 ? "* " : "* " ); else search. Form. result. value += a[ i ] + ( the. Array[ i ] < 10 ? " " : " " ); } Outline 24 markup that search. Form. result. value += "n"; } // --> </script> </head> <body> <form name = "search. Form" action = ""> <p>Enter integer search key <input name = "input. Val" type = "text" /> <input name = "search" type = "button" value = "Search" onclick = "button. Pressed()" /> </p> <p>Result <textarea name = "result" rows = "7" cols = "60"> </textarea></p> </form> </body> </html> Binary. Search. htm l 2001 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 Outline <? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd">   two sublists. provides six initializers in <html xmlns = "http: //www. w 3. org/1999/ xhtml"> Array array 2 provides <head> <title>Initializing Multidimensional Arrays </title> three sublists. <script type = "text/javascript"> <!-function start() { var array 1 = [ [ 1, 2, 3 ], [ 4, 5, 6 ] ]; var array 2 = [ [ 1, 2 ], [ 3 ], [ 4, 5, 6 ] ]; // // // 27 six initializers in first row second row third row Init. Array 3. html Function output. Array displays each array’s in aby. Web page. "Valueselements in array 1 row" , array 1 ); output. Array( "Values in array 2 by row" , array 2 ); } function output. Array( header, the. Array ) { document. writeln( "<h 2>" + header + "</h 2><tt>" ); 2001 Prentice Hall, Inc. All rights reserved.

30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 Outline for ( var i in the. Array ) { 28 for ( var j in the. Array[ i ] ) document. write( the. Array[ i ][ j ] + " " ); document. writeln( " " ); } document. writeln( "</tt>" ); } // --> </script> Referencing the multidimensional array the. Array. Init. Array 3. html </head><body onload = "start()"></body> </html> Program Output 2001 Prentice Hall, Inc. All rights reserved.