Time for action—downloading and installing the MooTools Core
The following steps will help you to download and install MooTools Core:
- Go to the MooTools Download page located at http://mootools.net/download. You'll see three options, choose the Uncompressed version.
- Create an HTML document, call it whatever you want, but I'll call mine
index.html, as shown:
- Install MooTools by referencing it in the
<head>of your HTML document with the following code:<script type="text/javascript" src="mootools-1.2.1-core-nc.js"></script>
Right below the MooTools script reference, place the following block of code:
<script type="text/javascript"> window.addEvent('domready', function() { alert("Hello World!"); }); </script> - Test your code by opening your HTML document in your favorite web browser. If everything went according to plan, you should see something like this:
What just happened?
We've just downloaded and installed MooTools by referencing it in an HTML document that we created and then tested to see if we referenced the file correctly by writing a line of JavaScript that displays "Hello World" in an alert box.
For your reference, your HTML markup should look similar to the following:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Installing MooTools</title>
<script type="text/javascript" src="mootools-1.2.1-core-nc.js"> </script>
<script type="text/javascript">
window.addEvent('domready', function() {
alert("Hello World!");
});
</script>
</head>
<body>
</body>
</html>
If all went well, congratulations! You're on your way to becoming a MooTools rockstar!
Different MooTools downloads
When you went to the MooTools download page, you had three options: YUI Compressor, JSMin, and Uncompressed. These options have the same source code and differ only in the source code format. The YUI Compressor and JSMin versions are compressed. They are smaller in file size because unnecessary characters (such as those involved in code formatting, like tabs, extra spaces, and inline comments) have been removed.
The process of removing extraneous characters in the source code is called Minification. The trade-off in minifying your source code is that it's virtually unreadable, so we downloaded the Uncompressed version, in case you wanted to see how MooTools works by studying the source code.
The domready event listener
When writing MooTools code, you will often want to execute the code as soon as possible, otherwise it'll wait until other webpage components are loaded before it runs.
Let's take a closer look at the code we wrote earlier:
window.addEvent('domready', function() {
alert('Hello World');
});
In this block of code, we used the addEvent method and we tell it to watch out for the event that the window's DOM is ready ('domready'). Once the DOM is ready, we ask the method to run the following function:
function() {
alert("Hello World");
}
We will discuss the MooTools syntax and concepts in detail in Chapter 2, but for now, let's just say that all code we write throughout this book will be wrapped inside the domready event listener so they are executed as soon as possible.