In the GoogleTV post, the video mentions (briefly) a Google service called Loco. I have decided, for fun, to make this service. Introducing Google Loco. I don’t make a dime from it and I redirect all search traffic to Google.com. Just a funny joke site to show your friends. 😉
Google Loco has some pretty nifty JavaScript that I’d like to share. The main interest is in the script that:
- In Firefox: flips around the text you type in
- In all browsers: randomizes the colors
I will cover the text flipping in another post. This one will focus on event handling.
Event Handling Mini-Lesson
What the heck is event handling anyway? Well, that’s the “onclick” or “onmouseover” stuff you have probably encountered. It’s a term for telling the computer to handle and event when something happens. Thus,
onclick=”SOMETHING”
Is read as “do SOMETHING when a CLICK event happens”. Event handling is an advanced topic in JavaScript. So how do we do it in Google Loco?
First of all, I added an event handler that fires when the page loads. You see, in the old days, people used stuff like this:
<body onload=”initializeOnLoad()”>
But we’re in 2007 now. Things are done differently. The above command now can be redone using event handlers in the following syntax (see the actual site for the advanced, error proof syntax):
window.addEventListener(‘load’, initializeOnLoad, false) // syntax different for IE, see .js file
I know the second one looks more confusing, but it’s better. Why? Because you aren’t mixing business logic with your presentation layer (JavaScript separate from HTML). Secondly, this line can be put anywhere on the page, making it more portable since it can reside inside a JS file.
You’ll notice in the event handler example, initializeOnLoad doesn’t have parentheses after it. This is because, in short, JavaScript treats functions like variables.
When the parentheses are removed it’s like saying “don’t execute me, I’m just the messenger.” My, that was a very clever pun…
Or in other words, initializeOnLoad() executes whatever is inside that function. InitializeOnLoad (no parentheses) refers to the contents, but doesn’t actually execute anything. This allows you to copy it around, modify it, reassign it, or whatever else you might do with a regular variable. In our case, we assigned it to the event handler for when the page loads.
The page itself uses a “loco” variable. You’ll notice there’s stuff like:
addEvent(document.getElementById(‘typed-box’), ‘keydown’, loco.locoEffects);
This, for example, would grab the element “typed-box”, and cause loco.locoEffect to fire whenever a key is pressed on it. If I had used “window” instead of “document.getElementById(‘typed-box’)”, the event would fire when a key is hit anywhere on the page.
Anyway, that loco.locoEffects thing… That’s a class. Well, a faked class. It’s really a variable called loco with another variable called locoEffects inside it. This inner variable just so happens to be a function. Why did I do this? Oh, just to keep the global namespace uncluttered (as in, so I don’t have to worry about overwriting a native JavaScript function).
The Internet is where it is today thanks largely to much of it being free. While the cost of bandwidth is ever decreasing, it is still expensive to run a popular site. This means that as a person’s contribution to the net grows, their costs due to bandwidth also grows (see orange chart). 
The current model requires begging for donations while letting companies (leeches) like Paypal take a percentage. Or slapping on a thousand ads. Okay, we can deal with Paypal, and maybe the ads, but what happens if donations and ads don’t cut it? Should a site be subject to destruction simply because its owner can’t afford to spawn a company around it? Can’t the owner get a break for providing stuff for free to the entire world?
