Embed Size (px)
Citation preview
Chapter 5: Arrays in JavaScriptChapter 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
Array TerminologyArray 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.
CreatingCreating Arrays 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 = [,,,,,,,,,];
Accessing ArraysAccessing Arrays Accessing array elementsvar 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.
Arrays can contain anything…Arrays can contain anything…Document 5.1 (siteData.htm)
<html><head><title>Site Names</title><script> var siteID = ["Drexel",3,"home",101]; var i; for (i=0; i<siteID.length; i++) alert(i+", "+siteID[i]);</script></head><body></body></html>
Copying Arrays… notCopying 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 foraccessing the same memory locations.
Stacks and QueuesStacks 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.
Array Methods for Stacks and Array Methods for Stacks and QueuesQueues
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.)
The The sort() MethodMethod JavaScript provides a built-in sorting
method, but be careful!!Document 5.3 (sort.htm)<html><head><title>Sorting Arrays</title><script language="javascript" type="text/javascript">
var a=[7,5,13,3];var i;alert(a + " length of a = " + a.length);a.sort();alert(a + " length of a = " + a.length);
</script></head> <body></body></html>
Accessing contents of Accessing contents of <form> fieldsfields
<form name="myform"> A[0]<input type="text" value="3" /><br /> A[1]<input type="text" value="2" /><br /></form><script language="javascript" type="text/javascript">for(var i=0; i<document.myform.elements.length; i++) { document.write("A["+i+"] = "+document.myform.elements[i].value+"<br />");}</script>Created automatically within the form.
Accessing Accessing radio and and checkbox fieldsfields
Consider this HTML code:
Employee is punctual: Y <input type="radio" name="punctual" value="Y" checked /> N <input type="radio" name="punctual" value="N" /><br />
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.
Accessing…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 <input type="radio" name="punctual" value="Y" checked /> N <input type="radio" name="punctual" value="N" /><br />Employee likes these animals:Dogs <input type="checkbox" name="animals" value="dogs" />Cats <input type="checkbox" name="animals" value="cats" checked />Boa constrictors <input type="checkbox" name="animals" value="boas" checked /><br />
Accessing…Accessing…
"Hiding" JavaScript script"Hiding" JavaScript scriptDocument 5.9 (siteData4.htm)
<html><head><title>"Multidimensional" arrays</title>// This file defines the site characteristics.<script language="javascript" src="site_data.dat"></script><script language="javascript" type="text/javascript"> var i; for (i=0; i<siteID.length; i++) {
document.write(siteID[i].ID+", "+siteID[i].lat+", "+siteID[i].lon+",
"+siteID[i].elev+"<br />"); }</script></head><body></body></html>
"Hiding"…"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);
Check passwordCheck passwordDocument 5.8 (password1.htm)<html><head><title>Check a password</title><script language="javascript" type="text/javascript">var PWArray=new Array(); PWArray[0]="mypass"; PWArray[1]="yourpass";</script></head><body><form>Enter your password: <input type="password" name="PW" value=""onchange="var found=false; result.value='not OK'; for (var i=0; i<PWArray.length; i++) if (PW.value == PWArray[i]) { found=true; result.value='OK'; } " /><br />(Tab to or click on this box to check your password.)<br /><input type="text" name="result" value="Click to check password." /></form></body></html>
Two-Dimensional ArraysTwo-Dimensional ArraysDocument 5.4 (TwoDArray.htm)<html><head><title>Two-D arrays</title><script language="javascript" type="text/javascript">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<n_rows; r++) { document.write(siteID[r][0]); for (c=1; c<n_cols; c++) {
document.write(", "+siteID[r][c]); } document.write("<br />");}</script></head><body></body></html>
Two-Dimensional ArraysTwo-Dimensional ArraysSite ID Latitude Longitude Elevation (m)Drexel 39.955 -75.188 10Home 40.178 -75.333 140North Carolina 35.452 -81.022 246Argentina -34.617 -58.367 30Netherlands 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<siteID.length; i++) { document.write(siteID[i].ID+
", "+siteID[i].lat+", "+siteID[i].lon+", "+siteID[i].elev+"<br />");}
This code gives names to the “second” dimension – the tablecolumns.
