JavaScript tutorial

A couple of sections on arbitrary constant used to utilise JavaScript in order to generate some random content for that pesky right column. This was done for two reasons: 1) to give the site a bit more depth and 2) to help me learn the basics of JavaScript. Now that both of these goals have been achieved, here is a guide detailing how it is done, which will hopefully prove useful to anyone new to this sort of thing.

Overview

Generating a random entity on a page can be split into three sections:

1) defining the entities you wish to choose between (i.e. text, images, banners etc)
2) defining a randomising function
3) using that function to return your desired entity

Each of these sections are dealt with in turn.

Defining your entities

In this case, we wish to generate a random quote, so we need to define a long list of quotes from which a script can pick one out. To do this, we define an array. An array is basically a one-dimensional matrix that contains every possible piece of information in it you would like displayed. It is from the array that the randomising function will pick the random (in this case) quote.

The script utilised in the example in the right column uses the following array:

quotes = new Array
(
"This is quote 1",
"This is quote 2",
"This is quote 3",
...
"This is the last quote"
);

It is that simple. Of course, there are many ways to create an array, but in this case, this was the easiest way of finding a solution to the given requirements. The only thing to note is that the array is named "quotes" and that the last quote does not have a comma before the close parenthesis. If it did have a comma, the script wouldn't work.

Defining a randomising function

Once you have an array from which to pick a random entity, there needs to be a function that will deliver a random result to pick said entity. As you would expect, there are many ways to do this and the following method is one example. In it, the script utilises the time and date to pick a random entity from the array. It is given by the following:

rnd.today=new Date();
rnd.seed=rnd.today.getTime();

function rnd()
{
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
};

function rand(number)
{
return Math.ceil(rnd()*number);
};


The first two lines define two elements, based on the date and time, that are to be used in the next line, which is the function rnd(). This function is defined basically as a little sum which uses the time and date as taken before which in turn is then used in the function rand(number) to define a function that will return a random number based on the time and date.

Displaying the random entity

Once we have a randomising function, returning a random entity is straightforward: we simply call upon the script to write the quote associated with the number generated by the random function:

document.write(quotes[rand(quotes.length)-1])

Here, rand is the function as defined before, (quotes.length)-1 is the range of quotes we defined in the array and document.write is the JavaScript command that returns the "value" created within the parenthesis. It is then this entity that will be displayed on the webpage.

Thus, the entire script looks a little like this:

quotes = new Array
(
"This is quote 1",
"This is quote 2",
"This is quote 3",
...
"This is the last quote"
);

rnd.today=new Date();
rnd.seed=rnd.today.getTime();

function rnd()
{
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
};

function rand(number)
{
return Math.ceil(rnd()*number);
};

document.write(quotes[rand(quotes.length)-1])

All that remains now is to decide where to include the code for you html page. There are two main options: 1) within the html page on which you want to utilise it or 2) as an external script called upon by the html page when it loaded. In the first case, you need to include the script tag within the html header or body:

The first method should ideally be used for a script that is used only in a particular circustance, whereas the external link is best employed when a script is used on many changes and would therefore require much more time if it were to be altered on each page it is used. That is the method used on this website.

The second method is similar to that employed for a style sheet and involves an external link to the script in the following manner: