Javascript Play

Main Points

• Historical Javascript A bloated page with our first (many) Javascript exercises.
• Unobtrusive Javascript Testing New external javascript methods using the DOM to eliminate inline function calls.

Javascript support has improved vastly over the last few years, though it is absolutely a consideration still. Both the better understanding of unobtrusive / DOM scripting and the advancement of AJAX has done a lot to make Javascript more important and convince "most" people to use it. You can pretty well assume that Javascript will be available in "most" cases.

Unobtrusive scripting has made great strides in acceptance on the net as well. While you will still find pages full of inline and embedded scripts on the web, most developers coding now know and will at least pay lip service to the concept of unobtrusive scripts called from external .js files. The web standards movement also deserves worlds of credit for helping convey the perception that it needs to be done this way, even if people don't always execute their sites correctly.

Historical Javascript

1. Javascript Background - These are the original tests for Javascript, mostly for building the menus for our navbar. It also contains the original text for the Javascript Play page back in 2007. Some of the info has changed significantly so it's become a "historical" page. It will give you some ideas as to why we started unobtrusive scripting before it was truly fashionable.

   [chroniclemaster1, 2009/04/09]

Unobtrusive Javascript Testing

Unobtrusive Javascript is the now established yet newer scripting practice that permits code separation. We love it. It works by operating on the DOM so you don't have to rely on inline scripts. The way browsers act on a script, having external DOM scripting makes it easier for a browser to ignore scripts that it doesn't understand; so instead of breaking the page, the script simply doesn't work. By using feature sensing, an if statement which tests that a Javascript method is supported by the browser, you can maximize this behavior so that your pages follow the progressive enhancement principle. The idea is that pages with no Javascript support will work, just without the Javascript functions; and pages with partial or full Javascript support will use all the functions that they are able to. This is a critical UI (user interface) principle for Javascript developers.

It's also a godsend for website administrators. With unobtrusive scripting, all Javascript is placed in a separate .js file, so visitors with different levels of Javascript support never find anything broken. Thanks to a few best practices techniques. However, there are a few more ideas that we need to put in place. We'd prefer to use Javascript to manipulate the code on the web page rather than programming specific style information which is what the CSS files are for.

One of the first things you need to be able to do in order to run Javascript without making direct calls to styling methods, is identify and call any elements you need. getElementById() is the most powerful tool for this purpose, and we also have the getElementByTagName() function to work with. However, for styling purposes it's very important to identify elements by their class. And there's no native method for grabbing classes so the first order of business is to build one.