1. Chapter 5: Arrays in JavaScript 5.1 Basic Array Properties 5.2 Some Operations on Arrays 5.3 Simulating Multidimensional Arrays 5.4 Using Arrays to Access the Contents of Forms 5.5 Hiding the Contents of a JavaScript Script

2. Array Terminology An array provides a way to access large amunts of related information. An array has a name, contents ("elements") and location ("indices"). Numbering of elements always starts at 0, not 1.

3. Creating Arrays Arrays are objects and they can be created with a "constructor." var Array1 = new Array(); var Array2 = new Array(value_1,value_2,…,value_n); var Array3 = new Array(10); You don't have to use a constructor: var Array1 = []; var Array2 = [value_1,value_2,…,value_n]; var Array3 = [,,,,,,,,,];

4. Accessing Arrays Accessing array elements var a=3.3,b=5.5, c=7.7; var A = [a,b,c]; var x,y=17.9,z=13.3; x=A[0]+A[1]+A[2]; A[2]=y+z; In JavaScript, you can change the size of an array: A[3]=A[0]+A[1]; The current length of an array is always available. In the above example, A.length is originally 2, and then 3. In this example: var A = new Array(5); alert(A.length); A.Length is 5 even though the array is empty.

5. Arrays can contain anything… Document 5.1 ( siteData.htm ) Site Names var siteID = ["Drexel",3,"home",101]; var i; for (i=0; i

6. Copying Arrays… not Make a "copy"… var siteID = ["Drexel",3,"home",101]; var newSite = []; var i; newSite=siteID; for (i=0; i<newSite.length; i++) alert(newSite[i]); newSite is not really a "copy," but just another name for accessing the same memory locations.

7. Stacks and Queues Stacks are "last in first out" (LIFO) structures. Queues are "First in first out" (FIFO) structures. JavaScript supports (maybe?) array methods for managing stacks and queues.

8. Array Methods for Stacks and Queues pop() (no arguments) removes (“pops”) the last (most recent) element from the array, returns the value of that element, and decreases length by 1. push() adds (“pushes”) the specified arguments to the end of the target array, in order. shift() (no arguments) removes the first element from the array, returns the value of that element, shifts the remaining elements down one position, and decreases length by 1. unshift() shifts current array elements up one position for each argument, inserts its arguments in order at the beginning of the array, and increases length by 1 for each argument. (A “line crasher” in a queue.)

9. The Method The sort() Method JavaScript provides a built-in sorting method, but be careful!! Document 5.3 (sort.htm) Sorting Arrays var a=[7,5,13,3]; var i; alert(a + " length of a = " + a.length); a.sort(); alert(a + " length of a = " + a.length);

10. Accessing contents of fields A[0] A[1] for(var i=0; i<document.myform.elements.length; i++) { document.write("A["+i+"] = "+document.myform.elements[i].value+" "); } Created automatically within the form.

11. Accessing and fields Accessing radio and checkbox fields Consider this HTML code: Employee is punctual: Y <input type="radio" name="punctual" value="Y" checked /> N Even though "punctual" represents a single value (either Y or N), each field still represents an element in the elements array. Fortunately, each named set of radio and checkbox fields has its own array, with a name assigned with the name attribute.

12. Accessing… onclick="howMany.value=elements.length; contents.value=elements[parseFloat(n.value)].value; var i; if (punctual[0].checked) alert(Ename.value+' is always on time.'); else alert(Ename.value+' is always late.'); for (i=0; i<animals.length; i++) { if (animals[i].checked) alert(Ename.value+ ' likes '+animals[i].value); }; " Employee is punctual: Y N Employee likes these animals: Dogs Cats Boa constrictors <input type="checkbox" name="animals" value="boas" checked />

13. Accessing…

14. "Hiding" JavaScript script Document 5.9 (siteData4.htm) "Multidimensional" arrays // This file defines the site characteristics. var i; for (i=0; i<siteID.length; i++) { document.write(siteID[i].ID+ ", "+siteID[i].lat+", "+siteID[i].lon+", "+siteID[i].elev+" "); }

15. "Hiding"… Data file siteData.dat for siteData4.htm: var siteID = new Array(); function IDArray(ID,lat,lon,elev) { this.ID=ID; this.lat=lat; this.lon=lon; this.elev=elev; } siteID[0]=new IDArray("Drexel",39.955,-75.188,10.); siteID[1]=new IDArray("home",40.178,-75.333,140.); siteID[2]=new IDArray("NC",35.452,-81.022,246); siteID[3]=new IDArray("Argentina",-34.617,-58.367,30.); siteID[4]=new IDArray("Netherlands",52.382,4.933,-1);

16. Check password Document 5.8 (password1.htm) Check a password var PWArray=new Array(); PWArray[0]="mypass"; PWArray[1]="yourpass"; Enter your password: (Tab to or click on this box to check your password.) <input type="text" name="result" value="Click to check password." />

17. Two-Dimensional Arrays Document 5.4 ( TwoDArray.htm ) Two-D arrays var siteID = new Array(); siteID[0]=new Array("Drexel",39.955,-75.188,10.); siteID[1]=new Array("home",40.178,-75.333,140.); siteID[2]=new Array("NC",35.452,-81.022,246); siteID[3]=new Array("Argentina",-34.617,-58.37,30.); siteID[4]=new Array("Netherlands",52.382,4.933,-1); var r,c,n_rows=siteID.length,n_cols=siteID[0].length; for (r=0; r "); }

18. Two-Dimensional Arrays Site IDLatitudeLongitudeElevation (m) Drexel 39.955-75.18810 Home 40.178-75.333140 North Carolina 35.452-81.022246 Argentina-34.617-58.36730 Netherlands 52.382 4.933-1 var siteID = new Array(); function IDArray(ID,lat,lon,elev) { this.ID=ID; this.lat=lat; this.lon=lon; this.elev=elev; } siteID[0]=new IDArray("Drexel",39.955,-75.188,10.); siteID[1]=new IDArray("home",40.178,-75.333,140.); siteID[2]=new IDArray("NC",35.452,-81.022,246); siteID[3]=new IDArray("Argentina",-34.617,-58.37,30.); siteID[4]=new IDArray("Netherlands",52.382,4.933,-1); var i; for (i=0; i "); } This code gives names to the “second” dimension – the table columns.