ECA 225

1. ECA 225 AppliedOnline Programming javascript arrays ECA 225 Applied Interactive Programming

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

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

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

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

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

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

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

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

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

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

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

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

14. length cont … to use an array with an image slideshow, using setInterval( ) setInterval( ‘rotatePics( )’, 5000 ); var image_array = new Array( ‘img1.jpg’, ‘img2.jpg’, ‘img3.jpg’ ); var addIt = 0;  function rotatePics(){ if( addIt == image_array.length - 1 ){ addIt = 0; } else{ addIt++; } document.myImage.src = image_array[ addIt ]; } ECA 225 Applied Interactive Programming

15. 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”);aString = fruit.join(“, ”); document.write(“The fruit array contains: “+ aString); ECA 225 Applied Interactive Programming

16. 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”);currentFruit = fruit.pop( ); document.write(currentFruit + ” was removed.”); ECA 225 Applied Interactive Programming

17. 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”);currentFruit = fruit.push(“Banana”,”Cherry”);document.write(fruit.join(‘, ’),” are in the fruit basket.”); ECA 225 Applied Interactive Programming

18. 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 firstElem = fruit.shift( )document.write(“Removed: “+ firstElem+”<br />”);document.write(“Still in array: “+ fruit.join(‘, ‘)); ECA 225 Applied Interactive Programming

19. 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”);newLength = fruit.unshift(“Kumquat”,”Mango”);for(i=0; i<newLength; i++){ document.write(fruits[ i ] + ”<br />”); } ECA 225 Applied Interactive Programming

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

21. Array.sort( ) The sort( )method rearranges the elements of the array based on a sorting order. If sort( ) is called with no parameters, JavaScript 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 aString = fruit.join(", ")document.write( aString ) ECA 225 Applied Interactive Programming

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

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

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

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

26. access form elements • Form object contains an element[ ] array • contains references to each element in the form • contains Input objects representing control types • 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

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

28. access form elements • when multiple form elements share the same name • Javascript creates an array out of the elements • radio buttons • checkboxes • 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