Google Loco – A Lesson on Event Handling

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).

Make Text Come Out Backwards!

This is a very little known secret, but there is a special character that causes browsers to reverse the text it encounters. This feature exists so that right-to-left languages can be displayed, but it can be applied to languages like English!. This character is displayed by typing &#8238; at the beginning of a sentence block. Here is a sample:

Source:

&#8238;Wow, is it all backwards?

Comes out as:

‮Wow, is it all backwards?

Pretty neat huh? To see this in action, visit Google Loco with Firefox. Google Loco will use JavaScript to add this special character as the first character of the search term box. It is mostly invisible in regular browsers, although it can cause a strange square or space to appear at times.