Learning JavaScript

Script.aculo.us: More Than the Sum of Its Periods

The script.aculo.us library is one of several that’s built on top of Prototype. It extends the available functionality and provides a higher level of interaction, as well as increasingly sophisticated effects.

You’ll find documentation for script.aculo.us, which includes a usage page, at http://wiki.script.aculo.us/scriptaculous/show/Usage. This covers where to get the library and how to install it. The library consists of multiple JavaScript files (scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js, and control.js), which need to be placed in your script directory, along with prototype.js and any other JavaScript file.

Usage

To use script.aculo.us, you’ll need to link prototype as well as the new library:

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

The scriptaculous.js file loads in all the other JS files. If you want only certain effects, though, you can specify this on the same line as the scriptaculous.js load, using the following syntax:

<script type="text/javascript" src="scriptaculous.js?load=effects,controls">

Once loaded, you can then use any of the libraries’ specialized UI (user interface) effects.

Tip

Script.aculo.us’ libraries of effects, drag and drop, and auto-completion are integrated as a Ruby on Rails Ajax helper. This means you can automatically manage an effect using a tag such as the following:

<%= text_field_with_auto_complete ...