Generating HTML using JavaScript

Everything started the day I needed to load different images every time a user hit my page; searching in Altavista for something like "title:random and title:image* and javascript " I found and example on www.computerhope.com, which proved an excellent kick-off.

The example was fairly clear, but the problem I had was understanding which section of my HTML page I had to insert this code. I had always thought that JavaScript belongs in the HEAD part, but it appeared that it was used in the body, which was a surprise.

Having a certain expertise in JSP, my eyes noticed the statements:

    
   document.write("<DL>\n");
   document.write("<DT>" + "" + images[index] + "\n");
   document.write("</DL>\n");

which obviously were the JavaScript equivalent of the JSP

output.println().

I was somewhat surprised, because it seemed that JavaScript could play the role of snippets in JSP, i.e. sections delimited by <% %>, where you can use Java code. After a while I reached the conclusion that:

JavaScript can be used anywhere in the body.

JavaScript can be used to build dynamic pages.

To understand better what I am saying, click to build a dynamic table

In this simple example the two above important features of JavaScript are shown, even if it is (perhaps) not yet completely clear what the consequences are.

Generating multiple elements

Don't forget the starting point: we wanted to generate random images. If I now asked "Compose a page that displays four pictures, each inside a table with a title and a caption", what would you do?

Well, perhaps you would diligently define four static tables in HTML, with four static titles with four static captions using four hard coded JPG names ... uhmmmm ... And what if I asked you "Compose a page with a hundred pictures, each inside a table etc. etc. "?

You are smart boys and you are raising your hand yelling "I would generate four dynamyc tables with four dynamic titles with four ... " even if you are not completely sure about the details.

But here I am to help; let's go to the dynamic tables (please not the "s"). (You will need to create a local "images" directory and download my four 96x120 jpg's or create yours).

Well, the four tables look a bit too plain, the yellow picture is not centered, but the layout has been kept simple on purpose.

Generating random multiple elements

Let's decide that the colours have to come up randomly by each page reload; random could mean several things, so let's say that we want to generate the images circularly: R-Y-G-B or Y-G-B-R or G-B-R-Y or B-R-Y-G or, again, R-Y-G-B (where R stands for red, Y for yellow etc.)

One possible solution is working with arrays of 4 + 3 = 7 elements, whose contents are R-Y-G-B-R-Y-G . We will instruct the page to take four elements in a row, sometimes starting from the first, sometimes from the second, sometimes from the third, sometimes from the fourth one, and all the cases will be covered. In arrays term, the initial index must be between 0 and 3, which means that we must generate a random number between 0 and 3. One solution is shown here. Please reload the page a few time to see the random effect in action.

Cleaning the generation code and adding colours

Things are beginning to look pretty good and we want to work with six colours; we add a pink and a light blue rectangle and we generate four pictures here In this example we use a more compact for for defining the arrays and adding more colours is straightforward and doesn't require any change in the code except in the array declaration.

Reusing the code on the page

Excellent! These four colours are so nice that we want to display them in different parts of our HTML page. We simply cut and paste the code ... 2 times? 3 times? A hundred times? Uhmmmm, it doesn't sound too sensible, does it?

Of course we would like to reuse the code as we reuse a ... FUNCTION! That's right, a JavaScript functions would be very handy, and here is one of the crucial points of this short discussion: code that will be reused on the entire page should be defined in the HEAD section as a function. This is not a must, the function can be placed anywhere before the lines it is called from, but I wouldn't recommend it. It is much cleaner to have the code on one clear place.
Let's move the code into the HEAD section defining a JavaScript function displayColours(), change the layout of the page and display two samples; I've put everything here

Reusing the code on every page

And now an obvious extension: what about reusing our brilliant function on every HTML page we write? Should we repeat the code everywhere?
Of course not; save the function into a js file displayColours.js and store it on a "scripts" directory; in your page simply include the js file with the directive


 
<SCRIPT LANGUAGE="JavaScript" src="scripts/displayColours.js">

A fancy 3D frame for your pictures

Click here to be brought to a short tutorial about creating 3d frames

A tutorial on using arrays for onMouseOver buttons

The tutorial is contained in onMouseOver with arrays