Unobtrusive Javascript: A Solution?
The new philosophy in Javascript that attempts to deal with these issues is called Unobtrusive Javascript. It uses Javascript to enhance the function of your site, while visitors with different levels of Javascript support never find anything broken. A unobtrusive website may have many more features available to visitor with full Javascript support than it does to a visitor with Javascript turned off. However, at all times and for all visitors, the site appears to operate correctly. Visitor's have access to the functions they can use safely, if any, and never know about functions unavailable to them. This is called "graceful degradation" by some and "progressive enchancement" by others, though the techniques each group uses is similar. The key practice of Unobtrusive Javascript is to remove all the Javascript code to a separate .js file. This is not only best practice for supporting - while not requiring - Javascript, it also consolidates all Javascript for the website in one easy to maintain place.
On Earth Chronicle Beta, everything is indeed located in our .js file. Our key use for Javascript is the navmenus of our navigation bar. If someone visits the site without proper Javascript support, these menus are simply unavailable. This works fine, because such visitors never know that there should be menus. And yet visitors without Javascript still have a fully functional navbar. They simply have to make due with the navbar buttons. We planned the navbar with this in mind, so you will notice that the navbar buttons link to the most important pages for the website. The menus give you additional related pages, but the site still functions without them; this is one reason for the accessible page links at the bottom of the webpage. You can navigate easily without the navmenus, just not as easily as you can with full Javascript support.
Finally, we also use Javascript to build the clock. This is the most problematic use, as the text field for the clock is written into the XHTML of the webpage. If a visitor without Javascript visits our site, the clock appears as an empty text field that does nothing. This isn't technically broken, but it is problematic. It is the only time a visitor will know that something isn't quite right if they don't have Javascript support. We hope to rebuild the clock as a label div, especially if the background color is the same as the page, this may achieve the same level of accessibility that our navbar solution has reached. However, that is a lower priority right now. I'm much more interested in reprogramming the navmenu behavior so that the code isn't so bulky. Our Javascript file is over 10K, and more than half is highly redundant calls to control the navbuttons. However, our attempts to build subroutines have so far run afoul of the Document Object Model (DOM). We've had to reprogram script for problems such as a menu that drops down but then vanishes when you move your mouse over a link. When we work out a syntax that works, we'll be incorporating that into our Javascript file
[chroniclemaster1, 2007/07/08]
So much for problems. We've now rewritten the clock as a styled div instead of a text field, so we don't have the naked text box problem anymore. Plus it looks better. We finagled around inactive Javascript a bit creatively on the clock too. If a visitor has Javascript support, they get the fully functional clock. But if they don't, they get an Earth Chronicle motto. So viewing the site without Javascript gives you access to one of our Easter eggs, rather than just giving you a broken clock. We used the div's innerHtml property to transform it's content. In fact, you never know that anything is wrong. It looks like the div was styled especially for the motto.
[chroniclemaster1, 2007/07/17]