Chapter Sixteen
Arrays: What They Are and How to Use Them


Arrays are extremely useful on many occasions in JavaScript routines.

What is an array? It is just a numbered list of items that you can either define or read in from a database for use in your JavaScript.

Now, you can write JavaScript from now until doomsday without ever using an array. For example, if you have a number of strings, you can simply name them str1, str2, str3, etc.

But lots of times you will want to pick and choose which to send to screen and when to send them. It will really get cumbersome if you always have to call a specific string by name. Especially if you are using loops.

To create an array, you must always initiate it. In older versions of the browser, you were required to create a routine which performed this initiation, but with the 3.x series browsers from Netscape®, this initiation is performed simply by making a call.

variable=new Array(x,y,z,etc.);

This call automatically creates a new array. The elements of the array, x, y, z, etc., may be defined as all strings, or all numerics.

Although you may put a number of array elements within the parentheses, the limitations on line length presently prevailing in JavaScript make it rather impractical to do so unless it is an array with very few elements.

Usually it will be more practical to load the array with a loop. A bit of planning when loading images, for example, can lead you to name the images, 0.gif, 1.gif, 2.gif, etc.

For example, if you had a series of 52 .gif file names that you wished to be loaded into an array, this concise code would do it for you:

function loadGifs(){
 gi=new Array();
 for (var i=0;i<52;i++){
  gi[i]=i+".gif";
  }
 }

Similarly, you can use loops to parse data into memory in arrays from a database.

<HTML><HEAD>
<TITLE>Arrays for Parsing
 Databases</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JS-Impaired Browsers
// First, get the correct newline character
rr=""+(navigator.appVersion.indexOf("Win")>-1?"\r\n":"\n");
db=new Array();
 
function showIt(){
 /* First, read in the string from
    the hidden form element, according
    to the flag that is set. */
 ls=(flg<1?document.ug.ly.value:
 document.ug.ly1.value);
 ctr=0;
 /* Then parse the long string and
    load it into the array. (We did
    not NEED to load it into the
    array - it simply could have been
    parsed into a string for display.
    But in many programs, you will do
    this to avoid repetitive parsing,
    particularly if calculations are
    being performed on the database
    values. */
 while (ls.indexOf("*")>-1){
  pos=ls.indexOf("*");
  db[ctr]=ls.substring(0,pos);
  ls=ls.substring(pos+1,ls.length);
  ctr++;
  }
 // Now build display string
 ls="";
 for (var i=0;i<ctr;i++){
  ls+=db[i]+rr;
  }
 document.ug.ta.value=ls; // Show it
 }
// End Hiding -->
</SCRIPT>
<BODY BGCOLOR="white"><CENTER>
<P><B>JavaScript Using Arrays for Parsing
Databases</B>
<BR>(Although the hidden element could be simply
parsed, we've parsed it into an array first)
<FORM NAME="ug">
<INPUT TYPE="hidden" NAME="ly"
VALUE="January*February*March*April*May*June*
July*August*September*October*November*December* ">
<INPUT TYPE="hidden" NAME="ly1"
VALUE="Sunday*Monday*Tuesday*Wednesday*Thursday
*Friday*Saturday* ">
<INPUT TYPE="button" NAME="but1"
 VALUE=" Click to Read, Array, Parse and Display Months "
 onClick="flg=0;showIt()">
<BR><INPUT TYPE="button" NAME="but2"
 VALUE=" Click to Read, Array, Parse and Display Days "
 onClick="flg=1;showIt()">
<P><TEXTAREA NAME="ta" ROWS=12
 COLS=20>
</TEXTAREA>
</FORM>
</BODY>
</HTML>

Click Here to See This Script.



© Copyright 1997, John H. Keyes john.keyes@intellink.net