Java Reference
In-Depth Information
You'll dig deeper into Prototype in a moment; let's do one fi nal test with MooTools to make sure your
installation is correct.
Testing Your MooTools Installation
Testing the MooTools installation will look similar to the jQuery and Prototype tests. Like those two
frameworks, MooTools defi nes a dollar function, and its functionality is similar to Prototype's.
$(“myDiv”)
Like Prototype, MooTool's dollar function accepts either a string containing an element's id or a DOM
element, and returns the element or DOM object with an extended set of methods. One such method is
the addEvent() method. This method accepts two arguments: the fi rst is the event to watch for, and
the second is the function to call when the event fi res. The MooTools framework adds the addEvent()
method to the window and document objects. So simply call the addEvent() method to add a domready
event handler, like this:
function window_domready()
{
alert(“Hello, MooTools World!”);
}
window.addEvent(“domready”, window_domready);
The domready event is also added by the MooTools framework, and it fi res when the DOM is com-
pletely loaded.
Also like jQuery and Prototype, you can chain MooTools methods to perform multiple operations on an
element with less code than if you didn't use a framework. Look at the following code:
function window_domready()
{
$(document.body).setProperty(“bgColor”, “yellow”)
.set(“html”, “<h1>Hello, MooTools World!</h1>”);
}
window.addEvent(“domready”, window_domready);
The new function body of window_domready() passes the document.body object to the dollar func-
tion. Then, by using the setProperty() method, it sets the bgColor attribute to yellow. It then calls
the set() method and passes the string “html” as the fi rst parameter to set the second parameter's
value as the HTML within the page's body.
Use this code to test your MooTools installation. Open the ch15_examp1_mt.htm fi le and change it to
look like the following code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
