JavaScript and progressive enhancement

Introduction

Using CSS to style HTML pages allows us to separate structure from presentation. Separating structure from presentation reduces page loading times, improves search engine ranking, and increases a website's 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 behavioural layer

The behavioral layer is created by placing all JavaScript in an external file. The JavaScript is then applied using 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:

• The JavaScript is more maintainable
• Debugging is simpler

What is JavaScript?

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.

Old web technologies

Unfortunately, web designers have had a tendency to misuse JavaScript. The additional functionality JavaScript affords developers has often been used to detriment the usability of a site. Some additional JavaScript functionality that could hinder the user experience include:

• Pop-up windows
• Disabling the right mouse button
• Disabling the back button
• Scrolling special effects

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 user experience.

What is progressive enhancement?

Progressively enhancing your site using JavaScript means you should:

• Ensure a site is functional even if users don't have JavaScript available
• Only use JavaScript to add new layers of enhanced functionality

Let's use a real world example to illustrate how JavaScript can be used to progressively enhance a site.

Using JavaScript to validate a feedback form

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:

• Receive poorly formatted data
• Receive unusable data
• Be exposed to security breaches

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.