Chapter 6: More JavaScript CIS 275—Web Application Development for Business I

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] + " “ ); }

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 ];

4 Random Image Generator Random Image Generator <!-- var pictures = [ "CPE", "EPT", "GPP", "GUI", "PERF", "PORT", "SEO" ]; document.write ( "<img src = \"" + pictures[ Math.floor( Math.random() * 7 ) ] + ".gif\" width = \"105\" height = \"100\" />" ); // -->

5 Explaining a Statement document.write ( "<img src = \"" + pictures[ Math.floor( Math.random() * 7 ) ] + ".gif\" width = \"105\" height = \"100\" />" ); "<img src = \"" is a literal string that contains these characters: <img src = " pictures[ Math.floor( Math.random() * 7 ) ] is an Array element that contains a string such as CPE or EPT. ".gif\" width = \"105\" height = \"100\" />" is a literal string that contains these characters:.gif" width = "105" height = "100" /> Using the + operator forms code such as

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

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( " Effects of passing array " + "element by value " + "a[3] before modifyElement: " + a[ 3 ] ); modifyElement( a[ 3 ] ); document.writeln( " a[3] after modifyElement: " + a[ 3 ] ); } function outputArray( header, theArray ){ document.writeln(header + theArray.join( " " ) + " " ); } function modifyArray( theArray ){ for ( var j in theArray ) theArray[ j ] *= 2; } function modifyElement( e ){ e *= 2; document.writeln( " value in modifyElement: " + e ); }

8 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 ); } The above function sorts in ascending order.

9 sort.html Sorting an Array with Array Method sort function start() { var a=[10,1,9,2,8,3,7,4,6,5]; document.writeln( " Sorting an Array " ); outputArray( "Data items in original order: ", a ); a.sort( compareIntegers ); outputArray( "Data items in ascending order: ", a ); } function outputArray(header, theArray) { document.writeln( " " + header + theArray.join( " " ) + " " ); } function compareIntegers(value1, value2) { return parseInt(value1) - parseInt(value2); }

10 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 the exam).

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

12 Manipulating Multi-Dim Arrays Set all elements in the 3 rd 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];

13 JavaScript Objects In JavaScript, an object is a collection of data values (i.e., properties) and ___________ (i.e., functions). The syntax for using JavaScript objects is: objectRef.propertyName objectRef.methodName( parameters ) The JavaScript Math class (or object, if you prefer): Math.PI // returns approx Math.round(10.7) // returns 11

14 User-Defined Objects I To create your own objects: var person1 = new Object(); person1.firstName = “Jane”; person1.hair = new Object(); person1.hair.color = “red”; var car1 = { make: “Toyota”, model: “2007”, color: “red” }; Defining a ____________: function person( fName, hairColor ) { this.firstName = fName; this.hair = new Object(); this.hair.color = hairColor; }

15 User-Defined Objects II Using a constructor: var person1 = new person( “jane”, “red” ); Defining a method: In the constructor, this.alterColor = color; Using a method: person1.alterColor(“blonde”);

16 The Document Object Model I The window object: window.document.write( “Hello, world” ); Some window object properties and methods: document (the document in the window) location (the URL of the window) self (the current window object) alert() (display an alert box) open( url ) (open a window with the specified URL)

17 The Document Object Model II The document object: document.bgColor = “#9f2020”; A form definition: Referencing a form field: var myForm = document.data; var fName = myForm.firstName; // read from textbox myForm.firstName = “Sam”; // write to textbox

18 Forms and Validation See Listing 6-8, pp in text.