![Page 1: Chapter 11: Arrays CIS 275—Web Application Development for Business I](https://reader036.vdocuments.us/reader036/viewer/2022082418/5697bff21a28abf838cbbb9d/html5/thumbnails/1.jpg)
Chapter 11: Arrays
CIS 275—Web Application Development for Business I
![Page 2: Chapter 11: Arrays CIS 275—Web Application Development for Business I](https://reader036.vdocuments.us/reader036/viewer/2022082418/5697bff21a28abf838cbbb9d/html5/thumbnails/2.jpg)
2
Array Object An Array object is a contiguous series of storage
locations (_________) in memory. First, create the Array object. Then _____ the
Array:var famname = new Array(3)famname[0] = "Jan Egil"famname[1] = "Tove"famname[2] = "Hege“
Use a ____ loop to write an Array (note the use of the length property of the Array object):for (i=0; i < famname.length; i++) {
document.write(famname[i] + "<br />")}
![Page 3: Chapter 11: Arrays CIS 275—Web Application Development for Business I](https://reader036.vdocuments.us/reader036/viewer/2022082418/5697bff21a28abf838cbbb9d/html5/thumbnails/3.jpg)
3
Creating, Initializing, Summing
Creating Arrays var n1 = new Array( 5 ); // allocate 5-element Array var n2 = new Array(); // allocate empty Array
Three ways to initialize Arrays with lists var colors = new Array( “cyan”, “magenta”, “yellow”, “black” );
var integers1 = [ 2, 4, 6, 8 ]; var integers2 = [ 2, , , 8 ];
Summing elements in an Array for ( var i = 0; i < theArray.length; i++)
total1 += theArray[ i ]; for ( var element in theArray)
total2 += theArray[ element ];
![Page 4: Chapter 11: Arrays CIS 275—Web Application Development for Business I](https://reader036.vdocuments.us/reader036/viewer/2022082418/5697bff21a28abf838cbbb9d/html5/thumbnails/4.jpg)
4
Random Image Generator<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Random Image Generator</title>
<script type = "text/javascript"> <!-- var pictures = [ "CPE", "EPT", "GPP", "GUI", "PERF", "PORT", "SEO" ];
document.write ( "<img src = \"" + pictures[ Math.floor( Math.random() * 7 ) ] + ".gif\" width = \"105\" height = \"100\" />" ); // --> </script>
</head>
<body> <p>Click Refresh (or Reload) to run the script again</p> </body></html>
![Page 5: Chapter 11: Arrays CIS 275—Web Application Development for Business I](https://reader036.vdocuments.us/reader036/viewer/2022082418/5697bff21a28abf838cbbb9d/html5/thumbnails/5.jpg)
5
Passing Data to Functions Example
var a = [ 1, 2, 3, 4, 5 ];
Pass-by-value In JavaScript, numbers and ________ values are
passed to functions by value modifyElement( a[ 3 ] );
Pass-by-reference In JavaScript, references to ______ are passed to
functions A reference is a location in memory modifyArray( a );
![Page 6: Chapter 11: Arrays CIS 275—Web Application Development for Business I](https://reader036.vdocuments.us/reader036/viewer/2022082418/5697bff21a28abf838cbbb9d/html5/thumbnails/6.jpg)
6
<script type = "text/javascript"> function start(){ var a = [ 1, 2, 3, 4, 5 ];
outputArray( "The values of the original array are: ", a ); modifyArray( a ); // array a passed by reference outputArray( "The values of the modified array are: ", a ); document.writeln( "<h2>Effects of passing array " +
"element by value</h2>" + "a[3] before modifyElement: " + a[ 3 ] ); modifyElement( a[ 3 ] ); document.writeln( "<br />a[3] after modifyElement: " + a[ 3 ] ); }
function outputArray( header, theArray ){ document.writeln(header + theArray.join( " " ) + "<br />" ); }
function modifyArray( theArray ){ for ( var j in theArray ) theArray[ j ] *= 2; }
function modifyElement( e ){ e *= 2; document.writeln( "<br />value in modifyElement: " + e ); }
</script>
Fig. 11.8, p. 353
![Page 7: Chapter 11: Arrays CIS 275—Web Application Development for Business I](https://reader036.vdocuments.us/reader036/viewer/2022082418/5697bff21a28abf838cbbb9d/html5/thumbnails/7.jpg)
7
Sorting Arrays The Array class a built-in method called _______
for sorting arrays.anArray.sort(); // uses string comparisons for sort
An optional argument of sort is the name of a function called a ___________ function that compares its two arguments.anArray.sort(compareIntegers);
function compareIntegers( integer1, integer2 )
{
return parseInt( integer1) – parseInt ( integer2 );
}
![Page 8: Chapter 11: Arrays CIS 275—Web Application Development for Business I](https://reader036.vdocuments.us/reader036/viewer/2022082418/5697bff21a28abf838cbbb9d/html5/thumbnails/8.jpg)
8
sort.html Fig. 11.9, p. 355
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title>Sorting an Array with Array
Method sort</title>
<script type = "text/javascript"> function start() {
var a=[10,1,9,2,8,3,7,4,6,5];
document.writeln( "<h1>Sorting an Array</h1>" );
outputArray( "Data items in original order: ", a );
a.sort( compareIntegers );
outputArray( "Data items in ascending order: ", a );
}
function outputArray(header, theArray)
{ document.writeln( "<p>" +
header + theArray.join( " " ) + "</p>" );
} function compareIntegers(value1,
value2){ return parseInt(value1) -
parseInt(value2); } </script>
</head> <body onload = "start()“> </body></html>
![Page 9: Chapter 11: Arrays CIS 275—Web Application Development for Business I](https://reader036.vdocuments.us/reader036/viewer/2022082418/5697bff21a28abf838cbbb9d/html5/thumbnails/9.jpg)
9
Searching an Array You search an array for a ______ value. The following contains the logic for a ______
search.var searchKey = “Johnson”;
var element = linearSearch(anArray, searchKey);
function linearSearch(theArray, key)
{
for ( var n = 0; n < theArray.length; ++n)
if ( theArray[n] == key )
return n;
return -1;
}
See p. 360 for the more complicated binary search (will not be covered on exam).
![Page 10: Chapter 11: Arrays CIS 275—Web Application Development for Business I](https://reader036.vdocuments.us/reader036/viewer/2022082418/5697bff21a28abf838cbbb9d/html5/thumbnails/10.jpg)
Multidimensional Arrays An array with two subscripts can be thought of
as a table with rows and _______ (a two-dimensional array).
In JavaScript, a two-dim array is a one-dim array whose elements are _________ arrays (rows).
Example: var b = [ [ 1, 2], [ 3, 4 ] ]; The 1st row of Array b contains 1 in the 1st column, 2
in the 2nd column The 2nd row of Array b contains 3 in the 1st column,
4 in the 2nd column Declaring a two-dim array
var b = new Array(2);
b[0]=new Array(5);
b[1]=new Array(3);
![Page 11: Chapter 11: Arrays CIS 275—Web Application Development for Business I](https://reader036.vdocuments.us/reader036/viewer/2022082418/5697bff21a28abf838cbbb9d/html5/thumbnails/11.jpg)
11
Manipulating Multi-Dim Arrays
Set all elements in the 3rd row of array a to zero:for( var col = 0; col < a[2].length; ++col)
a[2][col] = 0;
The same thing using for______:for( var col in a[2])
a[2][col] = 0;
Determining the total of all elements in array a:var total=0;
for(var row=0; row < a.length; ++row)
for(var col=0; col < a[row].length; ++col)
total += a[row][col];
See Fig. 11.14, p. 367