Prototype: Easing AJAX's Pain
by Bruce Perry | Pages: 1, 2, 3, 4

CO2 Applet

Figure 1-1 shows the browser screen for the application. In the upper left corner is an applet that displays the CO2 level in the atmosphere when the user chooses a year.

Figure 1-1. The select tag shows CO2 level--click for full-size image.

This data is derived from the Mauna Loa Observatory, run by the U.S. government in Hawaii. The measurements are taken at high altitude in pristine conditions. Scientists throughout the world use the data in their climate-change research.

There are only 46 different annual levels, associated with the years 1959-2004 (the 2005 level is not available at this time). Therefore, it makes sense to store this information in a JavaScript object. Even if we choose to display the monthly levels associated with those years with this tool (over 500 separate numbers), it still might make sense to store the data on the client. No database or extra server hits are required.

Where Prototype Comes In

The eevapp.js file contains the code that executes when the user selects a year in the selection list widget.

//instantiate an object 
//defined in the co2.js file 
var co2lev = new CO2Levels();
//the onload event handler executes
//when the browser is finished loading the page.
window.onload=function(){
 
$("co2_select").onchange=function(){
    $("co2ppm").innerHTML= 
    co2lev.getYear($F("co2_select")); 
    }

};

The value "co2_select" is the id value of the selection list that the user clicks to choose a year.

<select id="co2_select" .../>

The code:

 $("co2_select")

returns a DOM Element reference, the equivalent of document.getElementById("co2_select");.

The code sets the onchange event-handler attribute of the selection list element to a JavaScript function, as in: $("co2_select").onchange=function(){...}.

In simpler terms, when the user chooses a year in the select tag, the browser executes the defined function. What does this function do? The function gets a reference to an HTML div element with the id "co2ppm", once again, using Prototype's shortcut. The innerHTML property of this div element, representing what the user sees in the browser, is set to the return value of a method call:

co2lev.getYear($F("co2_select"));

The object named co2lev is instantiated at the top level of the eevapp.js file.

var co2lev = new CO2Levels();

This object has a method called getYear(). This method takes a string representing a year as a parameter, such as "1999". The method returns the CO2 level associated with that year.

Pithy Syntax

That dollar sign pops up in the syntax again: $F("co2_select"). The $F() Prototype function returns the value of an HTML form element, in this case the selection list, when I pass its id into the method as a parameter. The application uses this function to change the displayed CO2 level each time a user chooses a different year.

One tip to remember with $F(): it won't return a value from a selection list unless the list's child option elements have value attributes, as in: <option value="1959">1959</option>. In other words, at least the Prototype version I was using (1.4.0) would not return a value with $F() if I left out the value="..." part.

Pages: 1, 2, 3, 4

Next Page