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]="psmith@domain.com";
eMail[1]="lstevens@domain.com";
eMail[2]="mlarsen@domain.com";
eMail[3]="blark@domain.com";
eMail[4]="mstorm@domain.com";
eMail[5]="tstorm@domain.com";
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:
- "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.
- 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.
- Next, we incremented the value of "
i" by one using the i++ operator.
- 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.
|
IE 7
Firefox 2.0
