Chapter 6: More JavaScript

1
Chapter 6 More JavaScript

• CIS 275Web 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 )
• famname0 "Jan Egil
• famname1 "Tove
• famname2 "Hege
• Use a ____ loop to write an Array (note the use
  of the length property of the Array object)
• for ( i 0 i lt famname.length i )
• document.write( famnamei "ltbr /gt )

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 lt theArray.length i )
• total1 theArray i
• for ( var element in theArray )
• total2 theArray element

4
Random Image Generator

• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtRandom Image Generatorlt/titlegt
• ltscript type "text/javascript"gt
• lt!--
• var pictures
• "CPE", "EPT", "GPP", "GUI", "PERF",
  "PORT", "SEO"
• document.write ( "ltimg src \""
• pictures Math.floor( Math.random()
  7 )
• ".gif\" width \"105\" height
  \"100\" /gt" )
• // --gt
• lt/scriptgt
• lt/headgt
• lt/htmlgt

5
Explaining a Statement

• document.write ( "ltimg src \""
• pictures Math.floor( Math.random()
  7 )
• ".gif\" width \"105\" height
  \"100\" /gt" )
• "ltimg src \"" is a literal string that contains
  these characters ltimg 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\" /gt" is a
  literal string that contains these characters
  .gif" width "105" height "100"
  /gt
• Using the operator forms code such as
  ltimg src "CPE.gif" width "105" height
  "100" /gt

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

• ltscript type "text/javascript"gt
• 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( "lth2gtEffects of
  passing array "
• "element by valuelt/h2gt"
• "a3 before modifyElement " a 3
  )
• modifyElement( a 3 )
• document.writeln(
• "ltbr /gta3 after modifyElement "
  a 3 )
• function outputArray( header, theArray )
• document.writeln(header theArray.join(
  " " ) "ltbr /gt" )
• function modifyArray( theArray )

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

• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtSorting an Array with Array Method
  sortlt/titlegt
• ltscript type "text/javascript"gt
• function start()
• var a10,1,9,2,8,3,7,4,6,5
• document.writeln( "lth1gtSorting an
  Arraylt/h1gt" )
• outputArray( "Data items in original
  order ", a )
• a.sort( compareIntegers )
• outputArray( "Data items in ascending
  order ", a )

• function outputArray(header,
• theArray)
• document.writeln( "ltpgt"
• header theArray.join( " " )
• "lt/pgt" )
• function compareIntegers(value1,
• value2)
• return parseInt(value1) -
  parseInt(value2)
• lt/scriptgt
• lt/headgt
• ltbody onload "start()" gt
• lt/bodygt
• lt/htmlgt

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 lt theArray.length n)
• if ( theArrayn 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)
• b0new Array(5)
• b1new Array(3)

12
Manipulating Multi-Dim Arrays

• Set all elements in the 3rd row of array a to
  zero
• for( var col 0 col lt a2.length col)
• a2col 0
• The same thing using for______
• for( var col in a2)
• a2col 0
• Determining the total of all elements in array a
• var total0
• for(var row0 row lt a.length row)
• for(var col0 col lt arow.length col)
• total arowcol

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
• ltform name datagt
• ltinput type text name firstName /gt
• lt/formgt
• 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.