Main Points
- Javascript: Pros and Cons Our new experiments with making Javascript more user friendly.
- Unobtrusive Javascript: A Solution? A bloated page with many different Javascript exercises.
- Historical Javascript A bloated page with many different Javascript exercises.
- Skip to Main Points links return to the Main Points menu.
Javascript: Pros and Cons
We have some demo pages that we used when we first started to develop when we made the decision to convert to unobtrusive Javascript. For anyone not familiar with it, Javascript is a problematic technology. It has some key advantages. Javascript is client side. First, this saves the server time and trouble. Rather than wasting server time computing things, you can download the code to the visitor's browser and let the visitor's computer do the computations. Javascript also allows you to do things that you simply couldn't do with server side code. Anything that moves on a webpage, besides flash, basically has to be Javascript driven. When an image changes when you roll over it with your mouse, when our menus appear when your mouse moves over the buttons, when you see the clock changing time. All of these things are impossible without Javascript.
On the downside, some browsers still don't have full Javascript support; especially text browsers and browsers for the blind. Not only does Javascript not necessarily work properly on these pages, it can actually interfere with the pages. Another key difficulty is that Internet Explorer now frequently turns Javascript off by default. There is no good reason for this, which is what makes it so frustrating. Microsoft began having difficulty keeping up with internet threats, and more importantly for developers, suffered one high profile security failure after another. Rather than take these threats seriously, Microsoft's new philosophy is that Javascript is dangerous and should be disabled by default. Now, most people do in fact enable Javascript in their browsers, to which Microsoft can say in court, "We told you not to do it!" So any problems you run into are YOUR problems. Internet Explorer therefore is not any more secure than it was before, Microsoft has simply announced that it's given up it's responsibility for it. The REAL problem is that there is a sizable fraction of your visitors who don't know how to change the defaults of IE, and so Javascript is turned off when they visit your site.
Unobtrusive Javascript: A Solution?
The new philosophy in Javascript that attempts to deal with these issues is called Unobtrusive Javascript. The idea behind it is to use Javascript in ways 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, the site should operate "correctly", and the real definition of this is that the visitor never knows about functions unavailable to them. One of the key practices of Unobtrusive Javascript is to remove all the Javascript code to a separate .js file. The only hint that a page is scripted to look at the webpage is a <script src="whatever.js"></script> At least that's the goal.
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 important pages related to the page on their respective buttons, but the site still functions, and you can navigate easily without the navmenus. Though not as easily as if you have 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
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.
Unobtrusive Scripts
-
Trigger a Javascript Event from a File - This was our first test to see if we could get unobtrusive Javascript to work.
[chroniclemaster1, 2007/05/12]
-
Change the Display on a Div - Next we moved in the direction of running our navbar menus unobtrusively. We demonstrated control over a the display of a div.
[chroniclemaster1, 2007/05/12]
-
Show and Hide a Div - Next we extended the principle to being able to hide the div once again, as well as showing it.
[chroniclemaster1, 2007/05/12]
-
Javascript File Driven Menus - In this phase we demonstrated that we could build code to handle more than one menu.
[chroniclemaster1, 2007/05/12]
-
XHTML Id Detection Subroutine - Rather than build on the previous work, we needed to find a way to generalize the functions, basically we need to rebuild them to save on file size. Here's our first attempt that could identify the ID of an element on the fly. There's one minor problem.
[chroniclemaster1, 2007/06/14]
-
Subroutine Driven Navbar - Here's a navbar the way you'd expect to work it. Everything seems fine.
[chroniclemaster1, 2007/06/14]
-
Oops! Adding Links - And then disaster struck. When we built the working version, there's no way to mouse over the links. IE throws an error, and Firefox triggers the subroutine that hides the div.
[chroniclemaster1, 2007/06/14]
-
Passing Parameters - But fear not, every obstacle leads you to another path. We worked out the syntax for working with unobtrusive functions and passing parameters into them. And it works much better.
[chroniclemaster1, 2007/07/16]
-
Contact Form - Image Rollovers - We had trouble with the image in the contact form; the first attempt to build an unobtrusive rollover script killed the navbar menus. It took a little more work to get everything playing nicely together.
[chroniclemaster1, 2007/07/16]
-
Navbar - Condensing Event Handlers - We have several dozen event handlers to cover the functioning of the navbar. There's got to be a better way.
[chroniclemaster1, 2007/08/21]
Historical Javascript
Way back when, we first began learning Javascript. This page from the old site, JavaScriptTest.html, was a large scale exercise in Javascript behaviors. Fortunately, we simply abandoned this page when we moved to the new website. It's retained for historical interest.