1 / 18

Chapter 6: More JavaScript

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

Download Presentation

Chapter 6: More JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 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] + "<br />“ ); }

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

  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 <img src = "CPE.gif" width = "105" height = "100" />

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

  7. <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>

  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. <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

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

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

  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. 3.14159265 • 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: • <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

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

More Related