The JavaScript Diaries: Part 11/Page 4

The JavaScript Diaries: Part 11

Parallel Arrays

Now, let's say we also want to include the e-mail addresses for the people we just listed in the previous script. It's really quite easy. We could combine them with the existing data or we could list them separately so we can use either data separately, if we want. Let's list them separately. To do that we would just make another array and make sure the index of the data lines up with the index of the first array. This is called a parallel array, i.e. the data in the two arrays is parallel to each other. Here's how it works in the following script:

// The original array
var coNames = new Array();
  coNames[0]="Paul Smith (President)";
  coNames[1]="Laura Stevens (Vice President)";
  coNames[2]="Mary Larsen (General Manager)";
  coNames[3]="Bob Lark (Sales Manager)";
  coNames[4]="Michael Storm (Technical Manager)";
  coNames[5]="Terri Storm (Office Manager)";
// The new, parallel array
var eMail = new Array();
  eMail[0]="[email protected]";
  eMail[1]="[email protected]";
  eMail[2]="[email protected]";
  eMail[3]="[email protected]";
  eMail[4]="[email protected]";
  eMail[5]="[email protected]";
for (var i=0; i<6; i++) {
  document.write(i+1+". "+coNames[i]+", "+eMail[i]+"<br>");
}

Pretty neat, right? All I did was create another array and put the data in the same order as the first one so each index would line up. Then I added a little more code to the document.write statement to print out the e-mail addresses along with the names and titles. Remember, the value of the variable "i" stays the same all the way though the document.write statement. It's after it finishes the statement that it's increased. So if "i=2" when the document.write statement begins, it will keep that same value throughout the entire statement. All we're doing is just pulling data from two different sources. We use the data from the second index in the coNames array and then add to that ("concatenate") the data from the second index in the eMail array. You could add other arrays, if you like. Just make sure the data lines up in each array.

A Fully Functioning Script

In a recent e-mail edition of the bi-weekly WebReference.com newsletter, I published a script to hide e-mail address from spambots. (The e-mail edition includes a "tips" section for subscribers, so why don't you sign-up?.) I also published the script over on JavaScript Source. The original script was set up to handle only one address. I recently received a request to write a script that would hide several e-mail addresses at a time. With some input from a few people over at the JavaScript forum on WebDeveloper.com, I wrote the following script. The first part should be placed in an external file. We'll name it "hideMail.js", without the quotes.

var userName = new Array();
  userName[0]="msmith";
  userName[1]="bjones";
  userName[2]="ladams";
  userName[3]="bstevens";
  userName[4]="blarsen";
  userName[5]="rschwartz";
  userName[6]="msmithers";
  userName[7]="pclark";
  userName[8]="sakman";
  userName[9]="mrobbins";
  userName[10]="lcrazy";
  userName[11]="webmaster";
var siteName = "mydomain.com";
var i=0;
do {
  userName[i]="<a href=\"mailto:" + userName[i] + "@" + siteName + "\">" + userName[i] + "@" + siteName + "</a>";
  i++
} while(i<12)

Before we go any further, let's look at how the script works.

First, we declared a variable named userName and initialized with a reference to a newly created instance of an array.
Then we listed each index (e.g. userName[0]) with its corresponding element (e.g. msmith).
Next, we declared a variable named siteName and initialized it with a value of mydomain.com.
We then declared a variable named "i" and initialized it with a value of "0."
Then we created a do/while statement. The do portion basically says:
1. "Do what is contained between the brackets." In our case it means to take the variable named userName with an index number derived from the variable "i" and initialize it with the statement that follows.
2. In the statement we created the beginnings of a mailto link (<a href=\"mailto:'"). That was then concatenated to several other pieces to make up a complete mailto link.
3. Next, we incremented the value of "i" by one using the i++ operator.
4. Finally, we issued a while statement that said to continue as long as "i" is less than "12," which is one more than the highest index number that we have. When the value of the variable "i reaches "12," the do/while statement will end.

[previous] [next]

Created: November 24, 2005

URL:

The JavaScript Diaries: Part 11/Page 4