Click here to Skip to main content
Click here to Skip to main content

JavaScript and progressive enhancement

, 13 Jan 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
Learn about JavaScript and how it can be used to progressively enhance your site.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Paul Webcredible

United Kingdom United Kingdom
This article was written by Paul McCartny. Paul's crazy about CSS and using JavaScript for good (not evil) - so crazy that he works for Webcredible helping to make the Internet a better place for everyone. He knows an awful lot about DOM scripting & accessible JavaScript and accessible web design.

Comments and Discussions

 
QuestionSo What? Pinmembervolkan.ozcelik22-Mar-07 6:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141220.1 | Last Updated 13 Jan 2007
Article Copyright 2007 by Paul Webcredible
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid