Gary L. Simmons  rev 06/17/03  webwonks.org/WebBuilding/Random.html
Home  Marathon  Joke OT Weak  Web Building  Resumé  Lynx  Hobbies  Extra  Site Map Resume Joke of the Weak Go to next department

Gary's Web Building

Randomized Text

Every now and then you might have use for a randomized message to appear on your page. This is easy to do, I figured it out all by my lonesome so even those studying to be a village idiot can grasp this and put it to use for themselves. Now is there an easier way to do this? I bet there is cause no matter how hard I try, someone will just come along and say, "Hey foo, do it this way and save yourself a lot of work". Now keep in mind I could have combined several commands into one command line but I wanted to break it down for the tutorial. This tutorial puts a

 

random text message at the very top of the web page and it also creates a random title tag. Go ahead and refresh or reload the page, the random message will change. There are more ways to use this than that but that is for you to experiment with. Remember never to harm a web page with any of your experiments. Web page activists are everywhere and for your insensitivity they will hunt you down, kill you, gut you, and eat you then parade your entrails before your weeping wife and children if they ever discover you've harmed a single tag. So beware.


  • Set up us the bomb:

    In order to use JavaScript you must treat it a little differently than HTML. All your JavaScript functions are put within your <HEAD> tag and oddly enough commented out! This is so older browsers that do not know about JavaScript can blithely ignore JavaScript and go about its archaic business of pounding two rocks together. Modern browsers know that JavaScript is commented out and take this into account. Remember, all JavaScript starts out with these statements in the <HEAD> tag:

    < SCRIPT LANGUAGE = "JavaScript" type="text/javascript">
        < !--
         JavaScript function definitions within a commented area
         / / -->
    < /SCRIPT>


    Got it?

  • Build a list of sayings:

    coolPhrase = new Array
    coolPhrase[0] = "Stop refreshing the page"
    coolPhrase[1] = "Because we own the shotgun"
    coolPhrase[2] = "Because your web site sucks"
    .
    .
    .
    coolPhrase[23] = "*sniff sniff* Hey it wasn't me!"


    A couple of things here. You need to store all of your sayings in a thingy called an "array". An array is only a numbered list of stuff that is referred to later by it's number. Each number refers to an array "element". You assign it a number as you build your array. This array starts with the number zero, you must start with the number zero and increment it by one for each new array element for this code to work. You can call the array any name you want that is not a reserved word used by JavaScript but you must refer to that name throughout this code. A simple carriage return after the last array entry terminates the building of the array.

  • Picking yourself up by your bootstraps

    You are going to build a random number generator that will produce a number in the range of the number of array elements you have. In order for the random generator function to create that number it needs to know how many elements are in that array. You can hard code that number (type the number into the random number generator) or you can make life easier for yourself when you go back into the code later to add new phrases to the array or remove old ones. How do you automatically count your array elements?

    phraseCnt = coolPhrase.length;

    I created an ad hoc variable called phraseCnt (give it any name you want) and let JavaScript count up how many array elements I created. It is of the form VariableName = ArrayName.length, length being a property describing the number of elements. OK, is that one beat into the ground yet?

    Next I call the function that I have not yet created to write the random phrase! What? How is that possible?? That is a snake swallowing itself, it is picking yourself up by your own bootstraps, it is voting for anarchy! Well your browser reads the whole dang JavaScript before it takes any actions you tell it to do in the script. Otherwise it would be impossible right? So the call looks like this:


    javascript: picPhrase();

    where picPhrase is the name I gave to the function.

  • The dang function already:

    function picPhrase() {
    randomNum = Math.floor ((Math.random() * phraseCnt))
    trashTalk = coolPhrase[randomNum]
    document.write ("<title>" + trashTalk + "</title>")
    document.write ("<p align='center'><b><font color='#990000' size='+1'>Gary&acute;s Web Building: " + trashTalk + "</font></b></p>")
    }


    That was a mouthful. Let me regurgitate it and chew it like a fine French cud a little better this time. Call me cow boy. My first cud command is to create a random number I store in the variable "randomNum". Math.floor is a built in JavaScript function that returns the next lower integer that is less than or equal to the number passed to it. In other words, it truncates the number, stripping any fractions off of it.

    Fractions are developed by the Math.random function which when called provides a fraction between 0 and 1 inclusively. This is the actual random number we are working with but it is very small and we need numbers that will be in a value range of zero up to 50 or more depending on how insane our needs are. Remember we stored the number of array elements in phraseCnt? This is where phraseCnt comes in. We multiply the number of array elements by the random number (between zero and 1), remove any fractions and we have an array element number! If the random number is zero than the array number is zero. If the random number is 1 the array number is last element in the array. If the random number is .50000 then .50000 times 23 (our max. array number in this instance) equals 11.5, discard the .5 and it leaves us with array element number 11. Cool eh?

    Now all I have to do is use the random number I generated to pluck a cool phrase out of the array with. I do that with the command:
    trashTalk = coolPhrase[randomNum]. Remember how each element of array coolPhrase has a number? This is where that comes into play. I plug in the randomNum variable into the array and it returns the phrase stored in it and places it into one easy to work with variable named trashTalk.

    In the Popup Window tutorials I have discussed the "document.write" command in more detail. For this exercise just know that you can use it to write HTML on the fly and your browser processes it just like it read it off an HTML text page. The first document.write command creates the title tag. The second document.write command just writes the random text to the top of the page. Note how I use the plus signs (+) to concatenate the trashTalk variable into the surrounding text and HTML.


  • The whole enchalada...:

    You can copy and paste this into your <HEAD> tag and it will work with no further work from you but I would highly recommend that you customize it to suit your own purposes.

    < SCRIPT LANGUAGE="JavaScript" type="text/javascript">
    < !-- Hide script from old browsers
    coolPhrase = new Array
    coolPhrase[0] = "Stop refreshing the page!"
    coolPhrase[1] = "Because we own the shotgun"
    coolPhrase[2] = "Because your web site sucks"
    coolPhrase[3] = "Producers of quality world-class orphans"
    coolPhrase[4] = "Smarter than your average bear... butt"
    coolPhrase[5] = "Your OTHER left stupid"
    coolPhrase[6] = "Stop refreshing the page!"
    coolPhrase[7] = "Because love stinks"
    coolPhrase[8] = "We know where your mom lives"
    coolPhrase[9] = "Just jiggle the handle, we'll do the rest"
    coolPhrase[10] = "Learn HTML then terrorize on the Internet"
    coolPhrase[11] = "Al Gore invented SPAM"
    coolPhrase[12] = "With enough force, the square peg will fit"
    coolPhrase[13] = "For when mercy fails"
    coolPhrase[14] = "Pants"
    coolPhrase[15] = "Stop refreshing the page!"
    coolPhrase[16] = "JavaScript will consume your soul!"
    coolPhrase[17] = "Disturbing is as disturbing does"
    coolPhrase[18] = "When life serves you lemons, snipe from a tower"
    coolPhrase[19] = "uh oh... Do farts have lumps??"
    coolPhrase[20] = "Sick puppies, much vomit, front row seat"
    coolPhrase[21] = "Better than a dog wiping his eye snot on you"
    coolPhrase[22] = "For when size matters"
    coolPhrase[23] = "*sniff sniff* Hey it wasn't me!"

    phraseCnt = coolPhrase.length;
    javascript: picPhrase();

    function picPhrase() {
    randomNum = Math.floor ((Math.random() * phraseCnt))
    trashTalk = coolPhrase[randomNum]
    document.write ("<title>" + trashTalk + "</title>")
    document.write ("<p align='center'><b><font color='#990000' size='+1'>Gary&acute;s Web Building: " + trashTalk + "</font></b></p>")
    }

    // End hiding script from old browsers -->
    < /SCRIPT>


    Before you run off and plug this into your web page, think a moment. You can use this randomizing code to not just do text, you can randomize graphics, flash animations, the music that plays on your page or if you combine this and the Popup Window tutorials, entirely different web pages. Get it? Go do it!

  • ...and a byte of taco:

    If you don't want to put the random text into the title bar or have it displayed on the first line, you can change the code to have it display in a table anywhere on the page once, or in multiple places. All you need to do is make a call to the function you have already created above and put in place (remove the function call from the above code if you are doing this). You just need to make sure to tell your browser you are making a JavaScript function call by using the <SCRIPT> tag or it will just print the function call into the table rather than executing the actual function code. Here is an example of putting it in a table:

    < table width="100%" border="4" cellspacing="0" cellpadding="2">
      < tr>
        < td>
          < SCRIPT LANGUAGE="JavaScript" type="text/javascript">
            < !-- Hide script from old browsers
               javascript: picPhrase();
             // End hiding script from old browsers -->
          < /SCRIPT>
        < /td>
      < /tr>
    < /table>


  • Look out fors:

    An important thing to be aware of is the use of apostrophes in messages. Be aware that JavaScript uses apostrophes to help it parse information. To avoid confusing JavaScript every time you need an apostrophe use &acute; instead. The same goes for other special characters:

        The apostrophe = &acute;
        Double left quote = &#147;
        Double right quote = &#148;
        The double quote = &quot;

    Put them in a command thusly:
    coolPhrase[0] = "This is Gary&acute;s &quot;cool&quot; poot shootin&acute; refried bean page"

    It would be almost always be overkill to have the title bar AND a line of text with the random phrase. Pick one or the other. Give your visitors a break, show a little restraint. Don't make me come over there. If you have to do both, re-randomize the phrase and make the two different. Sure, sure, sure... _I_ made them the same but I was only giving you an example of two ways to use it and anyway I'm a trained professional, if you try this at home you will only wind up on "MTV Jackass" with your head through a wall or a dwarf sniffing your crotch.

    If you want a phrase to reoccur more often than the others, repeat the phrase in your array accordingly. I did this with the phrase "Stop refreshing the page!"

    Look out for all the little punctuation such as the semicolons and make sure you close all your quotes and apostrophes and parentheses. They will own you. JavaScript is about as unforgiving as a first wife.

Top of page

Back to Web Building