The Prototype JavaScript Framework
By
|
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:
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:
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:
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:
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:
