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!
I find it super-useful looking because I have always wanted to be able to do it. 3 questions – (1) do you need to save the wordz file to the same directory as the script.js file? (2) does the wordz file have an extension at the end? (.txt?) (3) the part of the instructions where you say “now you need the function…” – does that go on your HTML page? Or is that the actual text for the .js file? (See, I am 85% of the way there, I am sure that by the time I watch The Weakest Link tonight you can get me over the rest of that hump! *g*)
Christine,
1) I just have the wordz data *in* my .js file. I don’t know how you would call it otherwise.
2) see 1
3) The function goes into your .js file and then you call it from your HTML file. You need the JavaScript reference link (see above) in the HEAD of your HTML file.
This is awesome! I’m glad I stumbled across this, it has been very helpful. The only “hard” bit was listing all of the lyrics I wanted to randomise! I’m still not finished, but you can see the results so far at: http://maddy.sovereignmagic.com/index.php
I see from your script file it seems you can use images as well (I think I spied John Lennon), I might give that a go, as well. One day! Thanks again!
Awesome! Just one question: Ive noticed in your .js file you have several different scripts; so, what Id like to know is how do call a specific function in each case (I mean, different things: from random text to other effects).
This is great! Thanks. I’ve now successfully put a little box off random stuff on my blog (the five-star review box in the sidebar): http://www.book-blog.blogspot.com. But I’d like to know more or less what Giann (comment 4) asked: how could I add a second such box to my site, calling up a different set of random comments? How do you distinguish between, in your example, wordz and wordz2 when you’re calling up the .js file? Thanks.
Thanks, this page helped me alot.