The Prototype JavaScript Framework

Once you've been programming in a given language for awhile, you tend to collect a number of utility functions to perform common tasks that are missing from the core language. This is also the case in JavaScript, where different browser compatibilities and implementations often necessitate using standard workarounds. JavaScript might not be as fast as compiled languages, but what it lacks in speed, it makes up for in versatility. As a case in point, here's a splitOnSpaces() function that uses a generic curry() utility function to extend the String's split() method:

String.prototype.splitOnSpaces = String.prototype.split.curry(' '); var results = "My dog has fleas.".splitOnSpaces(); //-> ["My", "dog", "has", "fleas."] //general purpose curry function: Function.prototype.curry = function() { var fn = this, args = Array.prototype.slice.call(arguments); return function() { for ( var i = 0, arg = 0; i

It's a good idea to move the curry() and splitOnSpaces() function to a separate file, along with other general utility functions. Meanwhile, thousands of other coders are doing the same thing. One day, a fellow by the name of Sam Stephenson compiled a group of utilities and released them as the Prototype JavaScript Framework. Originally implemented as a single JavaScript file called "prototype.js", it's now called: "prototype-1.6.0.2.js" to reflect the latest version number. A core team of developers work on the Prototype Framework, and other developers are encouraged to contribute as well, in true open source fashion. In this article we'll go over some of the key features of this exciting new tool and demonstrate how it can make your life easier!

Using the Prototype JavaScript File

The Prototype Framework is encompassed within one JavaScript file. To begin using it right away, download it from the prototypejs.org site and link it to your Web page as you would any JavaScript file:

<script language="JavaScript" type="text/JavaScript" src="prototype-1.6.0.2.js"></script>

You'll also want to download the API documentation and peruse the tutorials.

Let's take a look at some of the Prototype Framework's more useful functions.

Utility Functions

The $() Function

The $() function is the cornerstone of the Prototype Framework. It's main purpose is to provide a handy shortcut for document.getElementById(), and it's capable of doing more than that! In addition to an ID string, the $() function also accepts any number and combination of ID's and DOM node references. This allows us to do some very interesting things with it, such as apply the same method to several elements:

$('item1', 'item2', 'item3').invoke('hide');

You can call methods directly on the results of the $() function because all elements returned by the function are extended with Prototype DOM extensions, meaning that the elements possess all of the methods contained in Element.Methods.

Like the underscore _, the $ character is a legal "word character" in JavaScript identifiers, and has no other significance in the language. It was added to the language at the same time as support for regular expressions, so that Perl-like matching variables could be emulated, such as $' and $'.

The $$() Function

The $$() function is Prototype's CSS Selector emulator. It returns all matching elements, following the same rules as a selector in a CSS stylesheet. For example, if you want to get all paragraph (<P>) tags with the class "bright", you would use the following: $$("p.bright").

The $F() Function

The $F() function returns the value of the requested form element. For a 'text' <input>, the function will return the data contained in the element. For a <select> element, the function will return the currently selected value:

var clientName = $F("txtName")

The $A Function

Accepts an array-like collection (or anything with numeric indices) and returns its equivalent as an actual Array object. This is useful when you would like to use Array methods on a collection or enumerated list, such as the arguments of a function. For instance, we could display all the arguments in a function by using the Array's join() method, but the arguments property that exists in all functions doesn't inherit from Array:

// The old way... alert(Array.prototype.join.call(arguments, ', ')); // The new way... alert($A(arguments).join(', '));

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both