Using CSS to style HTML pages allows us to separate structure (the content) from presentation. Separating structure from presentation reduces page loading times, improves search engine ranking and increases a websites' reach. It also ensures a website is more easily maintained and will ultimately save you time and money.
More recently emerging JavaScript techniques such as 'progressive enhancement', 'Unobtrusive JavaScript' and 'graceful degradation' have added a third layer, the behavioural layer.
The behavioral layer is created by placing all Javascript in an external file. The JavaScript is then applied using the DOM. Methods such as getElementsByTagName()
allow us attach the JavaScript based on rules set in the external JavaScript file rather than entering JavaScript inline.
Advantages of creating a behavioral layer are as follows:
JavaScript has been with us since December 1995 when it was first deployed by the Netscape browser version 2.0b3 (for those who like detail!). It's both a client-side and server-side scripting language.
JavaScript is more commonly and for the purposes of this article a client-side scripting language. It can be used to validate forms, open new browser windows and swap images amongst other things.
Unfortunately web designers have had a tendency to misuse JavaScript. The additional functionality JavaScript affords developers has often led to websites becoming unusable. JavaScript functionality that could hinder the user experience includes:
This was also compounded by the fact that cross-browser support was unreliable at best.
JavaScript is now an established scripting language and browser support is relatively consistent. The hot topic at the moment is called progressive enhancement. This is the technique of using JavaScript to enhance the user experience.
Progressively enhancing your site using JavaScript means you should:
Let's use a real world example to illustrate how JavaScript can be used to progressively enhance a site.
Initially, as with all forms, validation rules must be applied server-side. If you rely on client-side validation and the client-side script is unavailable you may:
The second step is where we use JavaScript to progressively enhance the form. The form will therefore be validated with client-side JavaScript. Validating the form client side intercepts the form submission client-side and stops users from having to wait for the page to reload if it's been filled out incorrectly.
Extra effort creating a JavaScript behavioral layer means the form can be made more usable. Intercepting the form before it is submitted means the user's experience is improved but without JavaScript available the form is still fully functional.