June 18, 2019
Hot Topics:

Introducing Prototype and Scriptaculous Part 1

  • March 2, 2007
  • By Dave Crane and Bear Bibeault with Tom Locke
  • Send Email »
  • More Articles »

What is Prototype?

We'll look at Prototype first, because it is the more fundamental of the two libraries. Prototype provides a set of language extensions for Java- Script, for the browser environment, and for the XMLHttpRequest object. Scriptaculous (and other libraries, such as Rico) build on Prototype's foundations to create widgets and other end-user "stuff."

It might seem odd to state that a JavaScript library can extend the language in which it was written, but that's exactly what Prototype does. JavaScript provides a mechanism known as prototype-based inheritance (from which this library derived its name). In fact, several scripting languages provide features for extending the base objects of the language. Ruby does it, and many of the extensions provided by Prototype are borrowed from Ruby. Once could describe Prototype's goal as making JavaScript feel more like Ruby.

The good news for most of us is that it isn't necessary to understand everything that's going on under the hood in order to get the benefits of Prototype.

Right now, though, we'll run through the features that Prototype does provide, in order to give a more concrete sense of its scope and the issues it is designed to address. We'll group these into features that address the core language, and those that are designed specifically for web browsers.

JavaScript Language Features

JavaScript is a general-purpose programming language. As an Ajax developer, you'll generally be using Prototype inside a web browser, but certain parts of it, such as objects, features, arrays, strings, and numbers, are designed to enhance the JavaScript language itself.

The JavaScript Object Class

At the core of most JavaScript programming is the base class Object. Creating an Object in JavaScript can be accomplished in as few as two characters:

var myObject = {};

myObject is endowed with a number of useful features and methods, such as a toString() method, the prototype-based inheritance mechanism, and the ability to absorb new properties and methods on the fly.

Using the prototype property of Object, it is possible to create proper object-oriented hierarchies of object types similar to those that a Java or C# programmer would be used to. That is, it's possible, but it is rather cumbersome. Prototype adds some useful features to the Object that make it a lot easier and more natural to develop object type hierarchies. We'll see these capabilities in action as we examine other parts of Prototype, and Scriptaculous, which makes heavy use of these functions.

JavaScript Functions

JavaScript Function objects represent pieces of code that one can call, passing arguments into them, and that will return a result. In this, they're very similar to the methods that OO-programmers attach to objects.

A JavaScript function, unlike a Java or C# method, is a first-class citizen in the language. It can be referenced directly, passed as an argument to other functions, and even attached to arbitrary objects. This freedom gives the JavaScript programmer the opportunity to indulge in all sorts of strange and clever hacks. For the more practical among us, understanding JavaScript Function objects is important because the browser event model relies upon them. Prototype comes to our rescue here again, making it easier to bind Function objects to JavaScript objects in the way that the event model commonly calls for.

JavaScript arrays

In JavaScript, arrays are expandable, numerically indexed lists of variables. The base language supports accessing array members using square braces notation, like this:

var element = myArray[3];

Iterating through the members of an array is generally done using a

for() loop, like this:
for (var i=0;i

The Ruby programming language has a much richer way of interacting with arrays, based on an Enumeration type. Prototype has ported this concept over to JavaScript, and enhanced the native arrays with a similar functionality. If you're used to working with Ruby's Enumerable types, Prototype offers a home away from home. And even if you don't know Ruby, Prototype's array extensions are easy to pick up, and will soon become a powerful addition to your repertoire.

JavaScript Strings and Numbers

The String and Number classes in JavaScript allow methods to be attached to the language primitives directly. Functions attached to strings can be called directly from the primitive:


This line will evaluate to the string "efghij", for example. With numbers, it is necessary to reference the number as a variable first:

var x=123456789; x.toExponential()

This evaluates to the string "1.23456789e+8".

The standard methods on JavaScript primitives mostly relate to formatting and some helpers for generating HTML content. Prototype extends both String and Number with some useful utilities that make it easier to work with HTML colors, that support internationalized text, and other useful features.

That wraps up the features of Prototype that affect the core JavaScript language. Let's look now at what Prototype can do specifically within the web browser.

Web browser features

More lines of JavaScript code have been written for use inside web browsers than for any other environment. When coding in such an environment, various parts of the web browser are exposed to the JavaScript interpreter, and Prototype offers support for the web coder in various ways. We'll map out the territory here.

The Document Object Model

The Document Object Model (or DOM for short) is the mechanism by which the visual elements of a web page are exposed to the JavaScript interpreter. When we hide or show on-screen elements in response to a mouseclick or keypress, build a DHTML navigation menu, or create a browser-based animation, we're using the DOM. Programming the DOM used to be a major exercise in cross-browser workarounds and tricks, but the major browser vendors have converged around the W3C standards in recent years, and cross-browser DOM programming is no longer the problem that it was. However, the W3C model is rather verbose and unwieldy, and writing code against it can become an exercise in stamina.

Prototype provides a few helper methods that ease some of the strain of DOM programming. For now, let's continue our quick tour of Prototype's features.

HTML Forms

HTML forms are a mainstay of web application development, and, in the pre-Ajax era, presented the only serious way to elicit information from a user. With Ajax, other input mechanisms, such as drag and drop, can be used as part of a conversation between the browser and the server, but forms still have a very important role to play. Prototype provides a set of utilities for working with HTML forms.

JavaScript Events

Event handling is central to the Ajax user interface. Although the major browsers have converged in their DOM-manipulation APIs, the event models of the Internet Explorer and Mozilla browsers still differ considerably, in both the calling semantics and the implementation details. Prototype provides some excellent cross-browser support when coding events, and it also extends the Function object to make it easy to work with event handling, as we noted earlier.

Page 2 of 3

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date