March 29, 1999: Weasel Works' JavaScript
 I thought I'd whip up a short little thing describing the various snippets of JavaScript used on this page. Basically, I wanted something easy to write to fill up my Articles section. Besides, it might be useful to someone trying to figure JavaScript out.
First off, you'll notice on the main page two little random text thingies: the line under the Weasel Works banner, and the noun used to describe the kinds of visitors this site's been getting. Both of these are done in similar manners. Essentially, there's an array of quotes and a couple lines to randomly choose an array index and write it into the document. The banner line quotes are in a seperate file, the visitor nouns are inline. This was done because there's only ever going to be a couple of visitor types, but a lot of quotes, so I didn't want to take up all this space in the HTML for the quotes. Anyways, you can reference to an outside JavaScript file like this:
<script language="javascript" src="quotes.js"></script>
Anything the script file writes will be included in the document at that point. Also note that all functions and variables will be included into the JavaScript of the page, so you can reference them in other places. For the Weasel Works page, I also have a <noscript> alternative for browsers that have no JS. You do this like so:
<noscript>Makers of false idols and corrupt realities.</noscript>
Browsers with JavaScript capabilties will ignore the text within <noscript> tags. That quotes.js file looks like this:
numQuotes = 32;
quotes = new Array(numQuotes);
quotes[0] = "Undeniably.";
quotes[1] = "Makers of false idols and corrupt realities.";
quotes[2] = "Everything here is b0rked!";
quotes[3] = "Keepin' it real.";
quotes[4] = "Show me the money!";
... and on and on and on...
document.write(quotes[Math.floor(Math.random()*(numQuotes))]);
See how it works? Neat, huh? Yep :) The visitor nouns are done like this:
<script language="javascript">
<-- Hide!
numVisitors = 12;
visitors = new Array(numVisitors);
visitors[0] = "visitors";
visitors[1] = "aliens";
visitors[2] = "monkeys";
visitors[3] = "bananas";
visitors[4] = "recruits";
visitors[5] = "casualties";
visitors[6] = "lost souls";
visitors[7] = "victims";
visitors[8] = "predators";
visitors[9] = "weirdos";
visitors[10] = "soldiers";
visitors[11] = "faerie queens";
// visitors[4] = "";
document.write(visitors[Math.floor(Math.random()*(numVisitors))]);
// -->
</script>
<noscript>recruits</noscript>
What that document.write() line is doing is picking a random quote index and outputting that into the web page being presented on screen. Math.random() picks a random number from 0 to 1, which is multiplied by the number of quotes to choose from. That number is then floored (truncated) in order to index correctly. That array index is then printed, giving the random text and an excuse for Allmighty to keep hitting that Reload button to see all the quotes. It's a neat effect that's simple to do.
You'll notice after a while that most links around here affect the status bar of your browser. This is done through one of the most basic of all JavaScript tricks. Links have an optional "onMouseOver" and "onMouseOut" fields that let you execute JavaScript code whenever the mouse moves over or leaves a link. Here's the line from the main page's News link:
<a href="news.html" onMouseOver="return setMsg('Weasel Works News');" onMouseOut="return clearMsg();">News</a>
The onMouseOver tag tells your browser to return the value from the setMsg() function. This function takes one argument, the text to display in the status bar. It always returns true, and that value is returned to the browser because the browser uses a true/false return value on the mouseOver/Out tags to determine whether or not it has to update anything on screen. These two functions are in a base JavaScript file that each page in this web site includes with this line:
<script language="javaScript" src="../basejs.js"></script>
Right now base.js just looks like:
function setMsg(s) {parent.status=s; return true;}
function clearMsg() {parent.status=""; return true;}
A simple trick that can really help people navigate your site, or just make it more confusing (which is what I chose to do). You might find yourself asking now why I bother to include that in a seperate JS file. The answer has mostly to do with Camel's weird handling of curly brackets. I need to write a new version of that to deal with it, but in the meantime it's better to seperate JS from Camel files.
I think the last bit for now is an oft-overlooked facet of the Articles Index. It detects your browser when it tells you who not to trust. This is done with this very simple line:
<script language="javascript">document.write(navigator.appName);</script>
Slick, aye? Yeah. Anyways, that's enough for now. I'll write about some JS used in other sites of mine later. Bye bye.
|