LanguagesJavaScriptThe Document.Write Loop

The Document.Write Loop content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.



When the page first displays, the text you see is set into a table. The script both builds the table and sets certain parts of the arrays to be bold or to be links that trigger the function through mouse roll overs. This is how it works.


The Script’s Effect

Here’s the Code

The script is in a format that is hard to display in HTML. I have set the script to display using <XMP> tags. If the script renders rather than displaying, look at the source code.



Scroll down until you see:

<table border="0" cellspacing="4">
<script language="javascript"> 	 

It’s near the bottom, about 80% of the way through the script. Got it? Good.

The main table command is printed right to the page. You can see it up above. Then the script starts. You can see that above too.

for (var i = 0; i < Titles.length; ++i) 

A for loop is set up to roll through ten times. The variable “i” is set to zero. The condition is that “i” must remain lesser than the length of the titles (that’s 10). If the condition isn’t met, then one is added (++) to “i” each time the loop rolls through. After ten go-rounds, the loop will be finished and the full HTML table to be written.

You’ll notice that the first test, the “Title” array text, is not a link that triggers when your mouse rolls over. Here’s why:

document.write("<tr>n<td><p align="right">");
document.write(Titles[i] + ":</p>");	 

First a document.write command writes a <tr> to the page and then jumps to the next line (n). Then a <TD. is written plus p align=”right”. The backslashes are in front of the quotes so they display as quotes rather than act as surrounding elements.

A second document.write command writes the “Title” array element represented by the value of “i”. The first time the script rolls through, “i” is zero, so the return from “Titles” is the first one, “General Programming”. The next time the loop runs, the second array item will be returned, the next time, the third, etc., etc.

Now we get to the meat of creating rollovers.

document.write("</td>n<td><a onMouseOver="eShow("" + Titles[i] + "")"");

document.write("onMouseOut="eHide("" + Titles[i] + "")"");

document.write("<font color="#0000FF" size="3" face="Arial">"); 

document.write commands are employed to again write code to the page. An end TD, a new line (n), and then another TD to start the next table cell. In that TD, a hypertext anchor is created with an onMouseOver set to run “eShow(“Titles[i]”)”. That’s an onMouseOver that runs the function while passing the elements of the first array item to it. Get it? It looks codey, but it’s just writing text to the page depending on what array elements are represented by “i”

The next line simply does the same thing except it sets up an onMouseOut to run the eHide() function.

The first time around through the loop, the text created will look like this:

<TD><a onMouseOver="eShow("General Programming")"
onMouseOut="eHide("General Programming")"</a> 	 

The third line of code denotes how the next set of text will look. The font color will be #0000FF, the size will be three, and the face arial. Then this:

for (var j = 0; j < Text[i].length; j = j + nCols)
if (j > 0)
document.write(", ");
if (Text[i][j + 3] == 1)
document.write("<b>" + Text[i][j] + "</b>");

Another loop gets underway. This sets “j” to zero. The loop goes through as long as “j” is less than the length of Text[i] (which changes each time the loop rolls through). Each time, j is equal to j plus the columns. The concept here is to look at the last column. Remember that from above? That last column has a one or a zero depending on if it should be bold or not. Look back at the “Text” array if you don’t remember.

The first time the loop goes through “j” is not greater than zero, so no comma is placed. see that first document.write statement?

The next time the loops rolls through, and every other time the loop rolls through, “j” is larger than zero, so a comma is placed each time. You’ll see those commas when you look at the script’s effect.

The next lines are there only to write the first part of the array to the page. The loop system will loop through all of the lines in the Text array zero, then loop through all of the lines in the text array 1, etc., etc.

The question is, does the first document.write post the text thus bolding it, or does the second document.write post the text thus not bolding it. The answer is pretty simple. If Text[i][j+3] is equal to one, then the first document.write gets it. That’s bold.

That [j+3] is the key. That looks at the last of the four elements in each line of the arrays. That’s where the one or the zero is located.

The loop continues posting bold if one, and not if zero.

Finally, when the loops have gone completely through, a document.write statement ends the font, the anchor, the TD and the TR. HTML ends the table and you’re done.

How’s that for some pretty wacky code?

Next week, we’ll get into posting the tables that pop up when the mouse passes over.

Next Time: Those Pop-Up Tables

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories