Other JavaScript Libraries - Beginning JavaScript - page 516

Note The stable version of Prototype 1.7.2 is provided in the code download.
No compressed versions of Prototype exist.
testing Your prototype installation
The largest portion of the Prototype library is its DOM extensions. Like jQuery, it provides a
variety of helpful utility functions to make DOM programming a bit easier; it even has its own $()
function (unlike jQuery, Prototype doesn't have a special name for this function; it's simply called
the dollar function):
var buttonObj = $("theButton");
Prototype's $() function only accepts element id attribute values or DOM element objects to select
and add extra functionality to DOM objects. Prototype does have a function that allows you to use
CSS selectors to select elements; you learn about that later.
Like jQuery, Prototype provides its own API for registering event listeners. It extends the Event
object with a method called observe() , which is not unlike the evt.addListener() method you
wrote in Chapter 10. For example:
function buttonClick() {
alert("Hello, Prototype World!");
}
Event.observe(buttonObj, "click", buttonClick);
The Event.observe() method accepts three arguments: The first is the DOM or BOM object
you want to register an event listener for, the second is the event name, and the third is the
function to call when the event fires. You can use Event.observe() to register an event listener
to any DOM or BOM object. You look at this method, and other ways to listen for events, later
in this chapter.
Like jQuery, you can chain method calls together on wrapper objects created with the $() function.
Prototype's method names, however, are a bit more verbose:
function buttonClick () {
$(document.body).writeAttribute("bgColor", "yellow")
.insert("<h1>Hello, Prototype!</h1>");
}
Event.observe(buttonObj, "click", buttonClick);
The buttonClick() function now modifies the <body/> element by changing the background color
to yellow and adding content to the page. Let's break down this statement.
First, you pass document.body to the $() function:
$(document.body)