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

Poor Best

Rating:

/ 6

June 20, 2007

TABLE OF CONTENTS:

<!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.