ECA 225 Applied Online Programming javascript arrays ECA

ECA 225 Applied Online Programming javascript arrays ECA 225 Applied Interactive Programming

Java. Script Arrays v unlike a var, an array is a structure to store multiple values, or a list of values v each value is stored at a numbered position called an index v index numbers always start at 0 ( zero ) and go up ECA 225 Applied Interactive Programming

Creating Arrays There a number of ways to create an array 1. create an instance of an empty array with the new operator var my. Array = new Array( ); ECA 225 Applied Interactive Programming

Creating Arrays cont … 2. create an empty array, but set the size in the constructor parameter var my. Array = new Array( 4 ); ECA 225 Applied Interactive Programming

Creating Arrays cont … 3. fill in the constructor parameters with the array elements var my. Array = new Array( ‘Bob’, ‘Carol’, ‘Ted’, ‘Alice’ ); ECA 225 Applied Interactive Programming

Creating Arrays cont … 4. use the standard array square brackets var my. Array = new Array( ); my. Array = [ ‘Bob’, ‘Carol’, ‘Ted’, ‘Alice’ ]; ECA 225 Applied Interactive Programming

Creating Arrays cont … to read from and write to the array, use the [ ] operator v to access the values in the array, use the numerical indexes inside square brackets v var my. Array = new Array( ‘Bob’, ‘Carol’, ‘Ted’, ‘Alice’ ); document. write( my. Array[ 1 ] ); // prints Carol ECA 225 Applied Interactive Programming

Creating Arrays cont … 5. fill individual elements var my. Array = new Array( ); my. Array[ 0 ] = “Bob”; my. Array[ 1 ] = “Carol”; my. Array[ 2 ] = “Ted”; my. Array[ 3 ] = “Alice”; ECA 225 Applied Interactive Programming

String Index – Associative Array rather than using numbers as indexes, it is possible to use string indexes var dog_weight = new Array( ); dog_weight[ ‘halle’ ] = 63; dog_weight[ ‘boo’ ] = 58; dog_weight[ ‘sam’ ] = 5; dog_weight[ ‘inky’ ] = 103; ECA 225 Applied Interactive Programming

String Index – Associative Array cont … to display the values in the array document. write(“Halle weighs “+dog_weight[‘halle’] +“ pounds. ”); document. write(“Boo weighs “+dog_weight[‘boo’] +“ pounds. ”); document. write(“Sam weighs “+dog_weight[‘sam’] +“ pounds. ”); document. write(“Inky weighs “+dog_weight[‘inky’] +“ pounds. ”); ECA 225 Applied Interactive Programming

String Index – Associative Array cont … since an array is an object, we can access elements as properties, using dot syntax document. write(“Halle weighs “+dog_weight. halle +“ pounds. ”); document. write(“Boo weighs “+dog_weight. boo +“ pounds. ”); document. write(“Sam weighs “+dog_weight. sam +“ pounds. ”); document. write(“Inky weighs “+dog_weight. inky +“ pounds. ”); ECA 225 Applied Interactive Programming

length v one property of the Array object is length, which returns the number of elements in the array v the length of an array is always one more than the highest index number var my. Length = my. Array. length // returns 4 ECA 225 Applied Interactive Programming

length cont … to use a loop to iterate through an array for( x = 0; x < my. Array. length; x++ ){ document. write( my. Array[ x ] + “ ” ); } ECA 225 Applied Interactive Programming

length cont … to use an array with an image slideshow, using set. Interval( ) set. Interval( ‘rotate. Pics( )’, 5000 ); var image_array = new Array( ‘img 1. jpg’, ‘img 2. jpg’, ‘img 3. jpg’ ); var add. It = 0; function rotate. Pics(){ if( add. It == image_array. length - 1 ){ add. It = 0; } else{ add. It++; } document. my. Image. src = image_array[ add. It ]; } ECA 225 Applied Interactive Programming

Array. join( ) The join( ) method converts all the elements of the array to strings, and then concatenates all the strings into one. If an argument is provided in the parameter list, it is used to separate the elements in the string returned by the method. fruit = new Array(“Apple”, ”Orange”, ”Grape”); a. String = fruit. join(“, ”); document. write(“The fruit array contains: “+ a. String); ECA 225 Applied Interactive Programming

Array. pop( ) The pop( )method “pops” elements off the end of the array by deleting the last element of the array and setting the array’s length property to one less than its current value. The element popped off the end of the array is returned from the method. fruit = new Array(“Apple”, ”Orange”, ”Grape”); current. Fruit = fruit. pop( ); document. write(current. Fruit + ” was removed. ”); ECA 225 Applied Interactive Programming

Array. push( ) The push( ) method “pushes” the elements specified in the parameter list on to the end of the array in the order they were listed. fruit = new Array(“Apple”, ”Orange”, ”Grape”); current. Fruit = fruit. push(“Banana”, ”Cherry”); document. write(fruit. join(‘, ’), ” are in the fruit basket. ”); ECA 225 Applied Interactive Programming

Array. shift( ) The shift( )method deletes and returns the first element of the array. Once deleted, all the remaining elements are shifted down one spot, so the first position is filled by the element that was previously in the second position. fruit = new Array(“Apple”, ”Orange”, ”Grape”); var first. Elem = fruit. shift( ) document. write(“Removed: “+ first. Elem+”<br />”); document. write(“Still in array: “+ fruit. join(‘, ‘)); ECA 225 Applied Interactive Programming

Array. unshift( ) The unshift( ) method adds arguments to the front of the array as new elements. Existing elements are shifted up to allow room for the new elements. Unshift returns the length of the array after adding the new elements. fruit = new Array(“Apple”, ”Orange”, ”Grape”); new. Length = fruit. unshift(“Kumquat”, ”Mango”); for(i=0; i<new. Length; i++){ document. write(fruits[ i ] + ”<br />”); } ECA 225 Applied Interactive Programming

Array. reverse( ) The reverse( ) method reverses the order of the elements in the array according to the array index numbers. fruit = new Array(“Apple”, ”Orange”, ”Grape”); fruit. reverse( ); document. write( fruit. join(“, “) ) ECA 225 Applied Interactive Programming

Array. sort( ) The sort( )method rearranges the elements of the array based on a sorting order. If sort( ) is called with no parameters, Java. Script attempts to convert all the elements of the array to strings and then sort them alphabetically. fruit = new Array(“Apple”, ”Orange”, ”Grape”); fruit. sort( ) var a. String = fruit. join(", ") document. write( a. String ) ECA 225 Applied Interactive Programming

Array. sort( ) cont … If the array needs to be sorted some other way, a function must be provided to handle the new sorting algorithm. • The function must accept two arguments that are to be compared • The function must return a number indicating the order of the two arguments in relation to each other. • If the first argument should appear before the second argument, a number less than zero should be returned from the function. • If the first argument should appear after the second argument, a number greater than zero should be returned from the function. • If both arguments are equivalent, zero should be returned from the function. When the function specified by the sort() method returns zero, signifying that the arguments are equal, the arguments remain in the same order relative to each other after the function has been called. ECA 225 Applied Interactive Programming

Array. sort( ) cont … fruit = new Array(“Apple”, ”Orange”, ”Grape”); fruit. sort( sort. Array ) function sort. Array( arg 1, arg 2 ){ if(arg 1. length < arg 2. length) return -1; if(arg 1. length > arg 2. length) return 1; if(arg 1. length == arg 2. length) return 0; } var a. String = fruit. join(", ") document. write( a. String ) ECA 225 Applied Interactive Programming

access form elements v Form object v represents v Input object v represents v both all the forms on a web page all the form controls in a form objects are part of the document object ECA 225 Applied Interactive Programming

access form elements v some Java. Script objects are arrays of other objects v document object contains v forms[ ] array containing references to all forms in document v web page may have more than one form document. forms[ 0 ] document. forms[ 1 ] ECA 225 Applied Interactive Programming

access form elements v Form object contains an element[ ] array v contains references to each element in the form v contains Input objects representing control types v indexed according to the order in which they are found in the code document. forms[ 0 ]. elements[ 0 ] document. forms[ 0 ]. elements[ 1 ] ECA 225 Applied Interactive Programming

access form elements v name attribute is <form> is deprecated v continue to use name attribute in form elements v can be used as associative array document. forms[ 0 ]. elements[ ‘first_name’ ]. value v can be used as property document. forms[ 0 ]. first_name. value ECA 225 Applied Interactive Programming

access form elements v when multiple form elements share the same name v Javascript creates an array out of the elements v radio buttons v checkboxes v select options for( n=0; n<document. forms[0]. dog_breed. length; n++ ){ if( document. forms[0]. dog_breed[ n ]. checked ){ input = document. forms[0]. dog_breed[ n ]. value; } // end if } // end for ECA 225 Applied Interactive Programming