///How to Setup a Randomising Function

How to Setup a Randomising Function

How to set up a randomising function

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:

<script type="text/javascript">
insert script here
</script>

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:

<script type="text/javascript" src="script.js">
</script>

2010-05-25T22:52:00+00:00 November 17th, 2007|JavaScript|0 Comments

About the Author:

A small electronic repository for film, literature, politics and other areas of interest since 2003.

Leave A Comment