Home arrow JavaScript arrow Page 3 - Making JavaScript Applications Degrade Gracefully
JAVASCRIPT

Making JavaScript Applications Degrade Gracefully


JavaScript is widely used for applications throughout the web. That's fine, but what happens when someone who has disabled JavaScript on their browser tries to use one of those applications? Nothing -- literally nothing. Fortunately, there is a way to make JavaScript degrade gracefully and improve your visitors' experiences. Keep reading to find out more. This article is the first in a series.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 10
June 20, 2007
TABLE OF CONTENTS:
  1. · Making JavaScript Applications Degrade Gracefully
  2. · Working with combo boxes to extend a site's behavior with JavaScript
  3. · Making JavaScript degrade gracefully
  4. · Assembling all the pieces

print this article
SEARCH DEVARTICLES

Making JavaScript Applications Degrade Gracefully - Making JavaScript degrade gracefully
(Page 3 of 4 )

As I expressed in the section you just read, the interaction between the two combo boxes shown in the previous hands-on example should be achieved in a different way, since its current incarnation is very poor. Therefore, I'm going to define a few simple JavaScript functions which will be responsible for adding dynamically via the DOM the second combo box to the online registration form.

Naturally, in this case the JavaScript functions will degrade gracefully too, since the functionality provided by the online form in question will remain closely the same.

Please take a look at the following group of JavaScript functions. They are tasked with dynamically adding the second combo box to the web document tree:    

function displayCities(formElem){
   var div=document.getElementById('cities');
   if(div){div.parentNode.removeChild(div)}
   else{
     if(formElem.value=='Maine'){
       // create general div container */
       var div=document.createElement('div');
       div.setAttribute('id','cities');
       // create text paragraph
       var par=document.createElement('p');
       par.appendChild(document.createTextNode('Cities '));
       // create combo box
       var sel=document.createElement('select');
       sel.setAttribute('name','cities');
         var cities=new Array('Acton','Bangor','Boothbay',
'Brunswick','Cape Elizabeth','Columbia Falls','Cumberland',
'Dexter','East Boothbay','Falmouth','Gardiner','Gorham',
'Greenville');
       for(var i=0;i<cities.length;i++){
         var option=document.createElement('option');
         option.setAttribute('value',cities[i]);
         option.appendChild(document.createTextNode(cities[i]));
         sel.appendChild(option);
       }
       // append combo box to paragraph
       par.appendChild(sel);
       // append paragraph to general div
       div.appendChild(par);
       // append general div to form
       formElem.parentNode.appendChild(div);
     }
   }
}
window.onload=function(){
   // check if the browser is DOM compatible
  if(document.getElementById
     &&document.getElementsByTagName&&document.createTextNode){
    var states=document.getElementsByTagName('form')[0].elements
[3];
    if(states){
      // trigger 'displayCities' function when 'States' menu
changes
      states.onchange=function(){
        displayCities(this);
      }
    }
  }
}

As shown above, the previous JavaScript functions have been defined in such a way that they can display the combo box containing several Maine cities if a user selects this state in the first menu. Nonetheless, in this case things are slightly different and better, since I didn't use ugly inline styles to show the combo box in  the browser.

So far, so good. At this point I built a simple online registration form that uses a few straightforward JavaScript functions to display an additional combo menu if users eventually select a concrete option. In this case I exemplified this common situation by using the names of some cities and states of the USA, but as you know, this is entirely modifiable and customizable. In addition, the JavaScript code is capable of degrading gracefully if scripting is disabled in the client, since the online registration form will still work with minor modifications.

So, having shown you the definitions for the JavaScript functions for dynamically adding the second combo box to the web document tree, it's time to move on and see how these functions can be linked to the corresponding online form, in this way completing the implementation of this practical example of building a simple JavaScript application that degrades gracefully.

Click on the link that appears below and keep reading.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials