Several people have asked me how to add random text strings to a web page, so I thought I’d write a little tutorial. All you need is a text editor and a web site. If you publish your own blog, I’m sure you’ll be able to do this. If you follow these simple instructions, you should be able to add the same feature to your web site.

I am by no means an expert on the subject, and there may be better ways to do this, but it has worked for me. If you have suggestions or improvements, please let me know.

This implementation uses JavaScript to write your random text to a web page. I have all of my JavaScript functions in an external file (here) which makes it a bit easier for me to manage my many blogs, pages, domains, etc. This is just a text file. Nothing fancy about it. (I used a .js extension so I could find it quickly, but you could name your file “myfileoffunctions.floop” if you were so inclined.)

To make the functions in the script available to a page, I simply add the line:

<script language=”Javascript” type=”text/javascript” src=”http://www.davidgagne.net/script.js”></script>

to each site. Make sure to add this line inside the <head> – </head> tags of your hyper-text. Whenever a page with this line loads in a browser, it has access to all of the functions in the script file.

The script file can have as many or as few functions in it as you want. You can have a script file with just one function or with dozens. If you’re just beginning to write code, I cannot stress enough the value of comments. Add them liberally. You will thank yourself when you try to read some line of code you wrote months in the past. To add a comment to an external .js file, type a slash-asterisk (/*) combo before and an asterisk-slash (*/) combo after whatever it is that you want the script to ‘ignore’. So you would have something like this:

some code
some code
/*This is a comment. The script file will ignore it.*/
some code
some code

First we’ll create the array of strings that we want randomly displayed. (An array is just another word for a ‘group’ or a ‘collection’ of things.) This is easy to do. Pick a name for your array and assign some values to it. I named mine wordz.

wordz = [
“wet blog soup”,
“tomorrow = yesterday++”,
“there is no spoon”,
“fight like a brave”,
“chickens never cry”,
“can nothing wait?”
];

Note that each text string is separated with a comma, and that there is no comma after the last text string. Each text string is enclosed in quotes. If you want to include a quotation mark (“) within your text string, you have to let the computer know that it’s something to print and not the end of the text string. You do this by adding a backslash (\) in front of the quotation mark. Ex:

“My friend said, “Hello!””

The same is true for the slash character (/) and the @ character. You have to add a backslash in front of these so the computer knows to ignore these character and treat them like text.

“My website is <a href=”http:\/\/www.mysite.com\/”>here<\/a>”

Now you need the function that will choose a string randomly from your array. Here it is:

function getRandomText() {
var rand = Math.round(Math.random()*(wordz.length-1));
document.write(wordz[rand]);
}

It’s pretty vanilla, but you don’t need anything fancy. Don’t worry if you have no idea what it means. It works for me and it should work for you, too.
All we need to do now is add it to a web page. Add the following line to your html (as long as it’s in the <body> section of your page).

<script type=”text/javascript” language=”JavaScript”>
<!–
getRandomText();
//–>
</script>

If you get an error, check for typos! You most likely forgot a semi-colon or comma, or forgot to add a backslash before a slash, @ symbol, or a quotation mark. Make sure you have the paths to the files correct as well. If the page can’t find your script, it won’t be able to load the functions.

I hope someone out there finds this useful. If you do, let me know how it goes!

references:
bratta.com
scottandrew.com
packetmonkeys.net