Random Story Using Javascript

Written By: John Fawcett

- 20 Mar 2006 -
















Description: Create 3 different stories, with a headline, picture, and actual story, and randomly display them one at a time on page load.

  1. Creating the Story
  2. Write the Variables

Random Story Using Javascript

It's not uncommon for one to want randomness on their web page. Putting a random story on your site's main page can save space, and make it more dynamic and sporadic!

To view an example of a random story using Javascript, visit www.rcisd.org.

Objective

Create 3 different stories, with a headline, picture, and actual story, and randomly display them one at a time on page load.

For the sake of keeping our code clean, we'll create a new document for the actual Javascript, and we'll name it with a ".js" extension. Open notepad (or your word processor of coding choice) and rule of thumb, we'll add comment markers ( is used to close comments) for html, and we'll type our javascript in that. We do this because, there are still browsers out there that don't understand javascript, and unless we want our users to see some bad code, we'll just white it for them.

WORD WRAP = OFF!!!

The next step is actually writing the script. We'll start off by creating a variable Array which will represent all three of the stories' titles. This can be accomplished by typing:

var title=new Array()
title[0]="The First Story"
title[1]="The Second Story"

Notice the capitalization scheme. It is absolutely Imperative that you capitalize Array. IT WILL NOT WORK WITHOUT IT! Javascript isn't as forgiving as HTML.

Now it is time to create a corresponding variable Array for the title. This Variable will be for images.

var ran_pic=new Array()
ran_pic[0]="images/1.jpg"
ran_pic[1]="images/2.jpg"
ran_pic[2]="images/3.jpg"

Now we will create the variable Array for the actual story.

title[2]="The Third Story"
 
var story=new Array()
story[0]="Well, here's the first story. If I wanna
        use HTML code that's fine, but make sure the 
        quotations are just apostrophes since we already
        opened quotes, Javascript will get confused. 
        For Ex: Another Page"
story[1]="This is the second story."
story[2]="And this is the third."

Now, we've got our Title, our Pictures, and our story in variables, so were done with those pesky variables, right? Of course not! We still need one more. This one will be a bit different, and by a bit, I mean a lot.

We must create a variable that will give our element of Randomness. I wish Javascript could produce a random whole number through a certain domain via one method, but it can't (In Javascript, certain command like items are called Methods. It would take too long to go in depth with it, just know what I was talking about when I said method). So now lets create our Random variable, which is supposed to correspond to one of our numbers. This is what we'll do:

var ran_num=Math.floor(Math.random()*3)

Lets stop, and take a minute to understand what's going on here. We started off with var, so we know were creating a variable named ran_num, but what the heck does it equal? Math is an object acted upon by the floor method. We said, "Math.floor()". Floor means, it will round down whatever number appears in parenthesis to the nearest whole number. In parenthesis is where the random number. Once again we see the Math object. We said, "Math.random()*3". "Math.random()" creates a random number between 0 and one with up to 4 decimal points. It's between 0 and 1, but it's as if there's 10000 different numbers, because that's how many numbers behind the decimal point there is. Then, we multiplied that number by three. Simple enough!

<< Previous