Home arrow JavaScript arrow Page 2 - 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 - Working with combo boxes to extend a site's behavior with JavaScript
(Page 2 of 4 )

Undoubtedly, a good place to start demonstrating how a concrete JavaScript application can be conceived from its very beginning to degrade gracefully under specific client-side conditions consists of building a typical online registration form where users are prompted to enter their postal addresses as part of the overall registration process.

In this case, the registration form could contain a simple combo box, populated with the names of some states in the USA. However, to make the registration process a bit more interactive, I'd like to dynamically display on the browser an additional combo box when users select “Maine” as the state they're living in. In this case, the extra combo box will show the name of some cities in Maine, making the whole registration procedure slightly more interactive.

Of course, this is obviously an example, so you're free to code your combo boxes to suit your personal requirements. But for now, suppose that the registration procedure will be performed this way. So, having said that, below I listed the definition of a simple (X)HTML file, which includes a short JavaScript snippet for dynamically displaying the combo boxes.

Here's the file:  

<!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- incorrect 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{
   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 toogleCitiesVisibility(formElem){
     var citycont=document.getElementById('citycontainer');
     if(!citycont){return};
       if(citycont.style){
         citycont.style.display=formElem.value==
'Maine'?'block':'none';
     }
  
}
  
window.onload=function(){
     if(document.getElementById
        &&document.getElementsByTagName
        &&document.createTextNode){
       var states=document.getElementsByTagName('form')
[0].elements[3];
       if(states){
         states.onchange=function(){
          
toogleCitiesVisibility(this);
         }
       }
     }
  
}
</script>
</head>
<body>
 
<h1>Example of JavaScript-driven combo box - incorrect
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>
      
<div id="citycontainer" style="display: none;">
       
<p>City
          <select name="city">
           
<option value="Acton">Acton</option>
           
<option value="Bangor">Bangor</option>
           
<option value="Boothbay">Boothbay</option>
           
<option value="Brunswick">Brunswick</option>
           
<option value="Cape Elizabeth ">Cape
Elizabeth</option>
            
<option value="Columbia Falls">Columbia
Falls</option>
           
<option value="Cumberland">Cumberland</option>
           
<option value="Dexter">Dexter</option>
           
<option value="East Boothbay">East Boothbay</option>
           
<option value="Falmouth">Falmouth</option>
           
<option value="Gardiner">Gardiner</option>
           
<option value="Gorham">Gorham</option>
            
<option value="Greenville">Greenville</option>
         
</select>
        </p>
     
</div>
     
<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>

As you can see, the above (X)HTML file includes a basic registration web form, where users are able to specify different states of the United States as part of their corresponding postal addresses. However, when the option “Maine” is selected in the first combo box, an additional one will be displayed on the browser to allow visitors specify one city from that state. Quite simple, right?

I'd like you to pay close attention to the approach followed previously to dynamically display the second combo box in the browser. In this case, an ugly inline “style” attribute has been assigned to the combo box, simply to hide it initially from visitors, and logically display it via JavaScript, if users eventually select the state of Maine as their choice.

As you might guess, the implementation for the previous pair of combo boxes might degrade gracefully if scripting is disabled in the client, since visitors will only be able to enter the name of the state they're living (not the cities of Maine), but the functionality of the registration form will remain nearly the same.

However, it should be noticed that the above approach for building the interactive combo boxes is rather inefficient since it relies upon the CSS “display” property to show and display the second menu included in the registration form.

Therefore, considering this important issue, in the course of the upcoming section I'm going to show you how to build the same combination of drop-down boxes, which will degrade gracefully if a user has disabled scripting on the browser, but this time using some DOM-based JavaScript functions.

Want to see how this will be achieved? Please, click on the link 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