The Productivity Perks Behind Prototype's Popularity

he Prototype home page claims that "Prototype is a JavaScript framework that aims to ease the development of dynamic Web applications." By using many object-oriented paradigms such as class-driven development and inheritance to enable JavaScript application development, Prototype completely accomplishes its aim. In fact, this framework contains a lot of useful functionalities, which you cannot help but apply to every application you develop once you've started using them.

Prototype's main claim to fame is its rich AJAX (Asynchronous JavaScript and XML) library, which simplifies the now popular Web development technique for making non-blocking calls to the server through JavaScript. (It topped the recent Ajaxian.com 2006 Survey as the most popular AJAX framework.) Of course, everything you can do with Prototype you also can do using plain JavaScript—upon which Prototype is built. But why would you want to complicate your life? For example, which would you rather type to accomplish the same task: document.getElementById("myElement") or $("myElement")? If you answered $("myElement"), then read the remainder of this article for an in-depth discussion of some useful Prototype functions—$ is just one.

Prototype is a pretty big framework, however. No one article can cover it all. So this discussion covers just a few key features. For a deeper understanding of the whole framework, dive into the source code. That's the best way to understand the nuts and bolts so you can modify it to meet your needs.

High-Functioning Functions
To use Prototype in your Web application, first download the latest version. (At the time of writing, it was version 1.4.0.) The only file you really need is prototype.js, and you just include it in your pages using a <script> tag as follows:

<script type="text/javascript" src="yourPath/prototype.js"></script>

You already saw the $ function, which is a shortcut for document.getElementById. You can also pass more than one element ID to $. For the following code, the result will be an array that contains the requested elements:

<!-- HTML --> 
<div id="firstElem">First element's content</div>
<div id="secondElem">Second element's content</div>

// JavaScript
var elems = $("firstElem", "secondElem");
alert(elems[1].innerHTML);  //displays "Second element's content"

Another really useful shortcut function is $F, which takes a form field ID and returns the field value:

<!-- HTML --> 
<select name="language" id="language"> 
 <option value="JS" selected="selected">JavaScript</option> 
 <option value="Java">Java</option>
 <option value="C#">C#</option>
 <option value="Ruby">Ruby</option>
</select>

// JavaScript 
var langValue = $F("language");
alert(langValue); //displays "JS"

Object-Oriented (OO) JavaScript
Prototype also allows you to write JavaScript code that strongly resembles the OO style. For example, take this class definition:

// Class definition 
var Person = Class.create();

// Class methods
Person.prototype =
{
	//Constructor
	initialize : function(firstName, lastName, age)
	{
		this.firstName = firstName;
		this.lastName = lastName;
		this.age = age;
	},

	//method #1
	toString : function()
	{
		return this.firstName + " " + this.lastName + ", " + this.age;
	},

	//method #2
	displayFirstName : function()
	{
		alert(this.firstName);
	}
};

var myPerson = new Person("Alessandro", "Lacava", 30);
alert(myPerson.toString()); //displays "Alessandro Lacava, 30"

As you can see, the constructor is defined using (by convention) a method whose name is initialize. This example also defines two other methods: toString and displayFirstName. Of course, you can define as many methods as you need.

Using Prototype, you can also extend an existing class through the Object.extend method. It copies one object's properties and methods into another. The syntax is Object.extend(destination, source), where destination is the object that will be extended with the source's properties and methods.