Home arrow JavaScript arrow Page 4 - 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 - Assembling all the pieces
(Page 4 of 4 )

As I stated in the previous section, below I listed the complete source code that displays on the browser and the entire online registration form, this time including the interactive combo boxes that you saw before.

The corresponding code listing is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of combo box - correct implementation</title>
<style type="text/css">
body{
   padding: 0;
   margin: 0;
   background: #fff;
}

h1{
   font: bold 20px Arial, Helvetica, sans-serif;
   color: #000;
   text-align: center;
}

p{
   margin: 10px;
   font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
   color: #000;
}

#formcontainer{
   width: 300px;
   padding: 10px;
   margin-left: auto;
   margin-right: auto;
   background: #9cf;
   text-align: right;
}
</style>
<script language="javascript">
  
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);
      }
    }
  }
}
</script>
</head>
<body>
 
<h1>Example of JavaScript-driven combo box - correct
implementation</h1>
 
<div id="formcontainer">
   
<form action="processform.php" method="post">
     
<p>First Name <input type="text" name="fname"></p>
     
<p>Last Name <input type="text" name="lname"></p>
     
<p>Email <input type="text" name="email"></p>
     
<p>State
        <select name="state">
         
<option value="Florida">Florida</option>
         
<option value="Nevada">Nevada</option>
         
<option value="Texas">Texas</option>
         
<option value="California">California</option>
         
<option value="South Carolina">South Carolina</option>
         
<option value="North Carolina">North Carolina</option>
         
<option value="New York">New York</option>
         
<option value="Ohio">Ohio</option>
         
<option value="Maine">Maine</option>
         
<option value="Massachusetts">Massachusetts</option>
         
<option value="Washington">Washington</option>
         
<option value="Indiana">Indiana</option>
         
<option value="Colorado">Colorado</option>
        
</select>
      </p>
     
<p>Enter your comments below:</p>
     
<p><textarea name="comments" rows="8"
cols="20"></textarea></p>
      
<p><input type="submit" name="send" value="Send
Data" /></p>
    
</form>
  
</div>
</body>
</html>

That's all for the moment. In this case I attached a small JavaScript application to the previous online registration form that degrades gracefully when scripting has been disabled in the client. Of course, this is only an introductory example, but it does show in a nutshell how to build a basic behavior layer for a sample web page without breaking its functionality when JavaScript is deactivated on the browser.

Final thoughts

In this first article of the series I showed in a step-by-step process how to build an interactive online registration form that uses JavaScript to display an additional combo box on the browser when a user selects a specific option. In this way I demonstrated how a concrete JavaScript application may degrade gracefully when scripting has been disabled in the client.

In the second tutorial of this series, I'm going to provide you with another illustrative example of how to use JavaScript to expand the existing functionality of a given web application. I'm going to show you how to create a dynamic navigational bar.

Now that you've been warned, you won't want to miss it!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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