Javascript is one of my favourite web technologies. When I stop to think how the Internet would be without Javascript I can't help but think how much less productive and enjoyable my days would be.

Take for instance all the great apps Google makes freely available. Gmail would still work, but the crippled Javascript-free version doesn't cut it for me. And then there's Reader, another of my most used apps. It doesn't degrade quite so gracefully. Actually, like Calendar, it doesn't degrade at all.

Complicated web apps can be forgiven for not degrading in the absence of Javascript. By their nature they rely on JS to handle heavy lifting functions. For more elementary functions graceful degradation can enable similar functionality. Personally I favour scripting to the DOM after the web page loads and replacing HTML functionality with a Javascript alternative that adds behaviour to the page. That way your site remains functional without Javascript.

But what happens when you use Javascript when you really shouldn't?

The $65m Javascript Links

Back in 2006 one of Ireland's largest Internet acquisitions saw Ireland.com, the web property of The Irish Times newspaper, purchase MyHome.ie for a reported $65m. I covered the story here. MyHome.ie is (apparently) an extremely profitable property (real-estate) website.

But apparently MyHome.ie has a smaller sister, a little known site called MyHome2Let.ie. And perhaps little known for good reason. Here's a shot of their site:

Looks innocuous enough. But the kicker is in how the primary navigation is coded:

<td id="mainmenu_td_t0" class="mainmenu mainmenu_t_on" valign="middle" align="center" onclick="window.open('http://www.myhome2let.ie/','_self');" onmouseout="mainmenu_Roll(0);" onmouseover="mainmenu_Roll(0);">HOME</td>
<td width="1" rowspan="2">
</td>
<td id="mainmenu_td_t1" class="mainmenu mainmenu_t_on" valign="middle" align="center" onclick="window.open('http://www.myhome2let.ie/search/', '_self');" onmouseout="mainmenu_Roll(1);" onmouseover="mainmenu_Roll(1);">SEARCH</td>
<td width="1" rowspan="2">
</td>
<td id="mainmenu_td_t2" class="mainmenu mainmenu_t" valign="middle" align="center" onclick="window.open('http://www.myhome2let.ie/advertise/', '_self');" onmouseout="mainmenu_Roll(2);" onmouseover="mainmenu_Roll(2);">ADVERTISE</td>
<td width="1" rowspan="2">
</td>
<td id="mainmenu_td_t3" class="mainmenu mainmenu_t" valign="middle" align="center" onclick="window.open('http://www.myhome2let.ie/services/', '_self');" onmouseout="mainmenu_Roll(3);" onmouseover="mainmenu_Roll(3);">USEFUL SERVICES</td>
<td width="1" rowspan="2">
</td>
<td id="mainmenu_td_t4" class="mainmenu mainmenu_t" valign="middle" align="center" onclick="window.open('http://www.myhome2let.ie/info/', '_self');" onmouseout="mainmenu_Roll(4);" onmouseover="mainmenu_Roll(4);">INFO & ADVICE</td>

In case your wondering what all that code does, well it does what should have been accomplished in about 10% of that mark-up. It instructs the browser, in the most convoluted way possible, how to handle the primary navigation links that you can see in the image.

But worse still, those links, the primary site navigation links, are implemented in Javascript. Turn off JS and the site no longer works. You simply can't navigate the site.

And the real cherry on this particular pie is that search engines have never been good at handling Javascript very well. Do you think that any of the pages linked to via the Javascript code are cached by Google? I'll let my silence answer that question.
The Motto of this Story

Javascript is a great language. Used well the potential of the web expands massively. But make sure you use HTML where it was designed to be used, and Javascript only when you need to do some heavy lifting that HTML can't handle.

Comments