Download
1 / 18
180 likes | 263 Vues
Chapter 6: More JavaScript. CIS 275—Web Application Development for Business I. 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“;
E N D
Chapter 6: More JavaScript CIS 275—Web Application Development for Business I
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 />“ ); }
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 ];
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> </html>
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 <img src = "CPE.gif" width = "105" height = "100" />
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 );
<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>
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.
<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> sort.html
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);
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];
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. 3.14159265 • Math.round(10.7) // returns 11
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; • }
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”);
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)
The Document Object Model II • The document object: • document.bgColor = “#9f2020”; • A form definition: • <form name = “data”> • <input type = “text” name = “firstName” /> • </form> • Referencing a form field: • var myForm = document.data; • var fName = myForm.firstName; // read from textbox • myForm.firstName = “Sam”; // write to textbox
Forms and Validation • See Listing 6-8, pp. 139-140 in text.
