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"
);
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
arrayis 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);
};
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])
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>
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.
a style sheet and involves an external link to the script in the
following manner:
<script type="text/javascript" src="script.js">
</script>
If you found this post useful you may also want to check these out:
