1 / 18

Chapter 5: Arrays in JavaScript

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. Array Terminology.

ryder
Télécharger la présentation

Chapter 5: Arrays in JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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) <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>

  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]); newSiteis 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 sort()Method 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> • JavaScript provides a built-in sorting method, but be careful!!

  10. Accessing contents of <form>fields <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.

  11. Accessing radio and checkbox fields Consider this HTML code: Employee is punctual: Y <input type="radio" name="punctual" value="Y" checked />&nbsp;&nbsp;&nbsp; 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.

  12. Accessing… Employee is punctual: Y <input type="radio" name="punctual" value="Y" checked /> &nbsp;&nbsp;&nbsp;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 /> 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); }; "

  13. Accessing…

  14. "Hiding" JavaScript script Document 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>

  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) <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>

  17. Two-Dimensional Arrays Document 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>

  18. Two-Dimensional Arrays Site ID Latitude Longitude Elevation (m) Drexel 39.955 -75.188 10 Home 40.178 -75.333 140 North Carolina 35.452 -81.022 246 Argentina -34.617 -58.367 30 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<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 table columns.

More Related