Everyone has JavaScript, Right?
By David Perkins, OIT, Web Coordinator for DHHS
Increasingly, web developers are turning to JavaScript to add functionality to their pages. With JavaScript libraries such as Jquery, DOJO, Prototype etc. becoming available, it is ever easier to implement sophisticated JavaScript functions. This may be through JavaScript based graphics effects (such as rollovers), form manipulation (e.g. selecting all checkboxes on a form, data validation, etc.), and more robust implementations, such as AJAX . Developers of Informe hosted (Maine.gov) content are using JavaScript (jquery) by default (JavaScript is used to “toggle” the bullets on the left hand navigation menu, etc.)
In using JavaScript, there are a number of considerations which developers must keep in mind. Most importantly, a not-insignificant number of visitors to your page may have JavaScript turned off. Reports vary, but current statistics suggest there are still a few users who either don't have it, or have it disabled. (See http://www.w3schools.com/browsers/browsers_stats.asp ) In developing pages utilizing JavaScript, developers must ensure that no critical functionality is lost without JavaScript.
An example of this is data validation. You may implement a JavaScript based data validation function on your page, which doesn't allow the user to submit a form if the data doesn't validate. This saves the time it takes for the form processor to process the data, and can also provide more immediate feedback to the user, as they enter data. However, you should not make the submission of the form dependent on JavaScript – you need to implement additional data validation on your forms processor (e.g. Informe's AutoForms) to ensure that you can trap for invalid data being submitted by users who have JavaScript disabled.
JavaScript can greatly enhance the user experience coming to your page. However, aside from the issues raised above, there are a number of additional considerations which you must keep in mind when using JavaScript. Does it render your page inaccessible? Does it open up any security risks? Is it the best tool to use? It is beyond the scope of this article to explore all of these issues. What we can do is raise the issue, and provide a simple example of alternatives.
One of the most commonly used (and overused) function facilitated by JavaScript is image rollovers. However, for a number of commonly implemented roll-overs, the same effect can be accomplished using CSS. An example is navigational buttons. Visit http://inet.state.me.us/dhhs/webmasters/bck-for-arrow.html (accessible via the intranet only) to see a CSS implemented (JavaScript free) navigational button rollover. While this is a simple example, it illustrates the notion there can be multiple ways to achieve the same desired result.
References:
Jquery - http://jquery.com/
DOJO - http://www.dojotoolkit.org/
Prototype - http://www.prototypejs.org/
Basic AJAX tutorial - http://www.w3schools.com/Ajax/Default.Asp
Articles – Why Javascript - http://javascript.about.com/od/hintsandtips/a/whyjavascript.htm
Disabling JavaScript – (for testing purposes) http://javascript.about.com/library/bldisable1.htm
