- 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´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´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 ´
instead. The same goes for other special characters:
The apostrophe = ´
Double left quote = “
Double right quote = ”
The double quote = "
Put them in a command thusly: coolPhrase[0]
= "This is Gary´s "cool"
poot shootin´ 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.
|
