By A Web Design

Introduction to the Mootools

MooTools is a JavaScript library. It contains a set of tried / tested and robust functions that help bring a specific type of functionality to any Web application in a standardized way. It is released under the MIT License. The Mootools library is open source, light weight and object oriented.
The aim of Mootools is to empower Web developers to write JavaScript that will execute across browsers elegantly and efficiently.

Introduction to Mootools 1.2 JavaScript Library

Mootools recognizes a ton of HTML events and makes it very simple to take advantage of this (i.e. onClick, mouseOver, keystrokes, and so on)
In addition, Mootools has all sorts of nifty extensions, which provides programmers the ability to create amazing animated effects. That’s just one example, Mootools permits so much more to be done writing the very minimum of JavaScript code.

Installing Mootools 1.2

First, download and install the Mootools 1.2 Core library.

Download the Mootools 1.2 Core library
Create a folder named js on the server or on the desktop
Upload the Mootools 1.2 Core library to the js folder
Link to the Mootools 1.2 Core library by adding the following code snippet in the <head></head> tag of any HTML program

Add Script Tags in your Head Tag

Now the Mootools library is bound to the HTML page, and it’s built-in functions are accessible. You can write your JavaScript code that accesses the Mootools built-in functions using two different options:
1. Place your JavaScript code between <script></script> tags within the <head><?/head> of the HTML file this is called inline JavaScript.
<script type="text/javascript"> { <em>Your JavaScript syntax goes here</em> } </script><br /> 2. Create an external JavaScript file and link it to the HTML file within the <head></head> tags:<br /> <script src="js/myJavaScriptFile.js" type="text/javascript"></script><br /> In this material either method is used. However, most often I will often call the functions within the domready event inside the script tags, but store the functions codespec in an external JavaScript file.</p> <h2>Put it in the domready event</h2> <p align="left">Mootools functions must be called within the domready event.
window.addEvent('domready', function() {
exampleFunction();
});

Put it in a Function

You can still build your function outside of the domready event, then call it within.
var exampleFunction = function() {
alert('hello')
};

window.addEvent('domready', function() {
exampleFunction();
});

Library Description

In this tutorial, let’s take a close look at the key components of the library’s architecture and go over some of its basic functionality.

Core

The core contains common functions within the Mootools library that makes it easy to accomplish common tasks. These functions also beef up a lot of pre-existing functionality. The following is a simple example of some of Mootools’ capabilities. Please do spend time reading the Mootools documentation the time spent doing so will be invaluable.

Check for a value (returns false if no value or 0 is found) - $chk(value);
Return a random integer between two values - $random(min, max);
Lets you easily detect browsers, browser engines and browser capabilities

Native

This section of the library also contains common tools, letting you manipulate arrays (basically a list of values or objects), functions, numbers, strings, hashes and events. Here are a few of the tools featured in Native:

Create a script that will apply to each object within an array - .each();
Get the last item within an array - .getLast();
Create an event that happens every x milliseconds - .periodical();
Round a decimal - .round();
Convert rbg to HEX - .rgbToHex();

Class

A JavaScript class (in contrast to a CSS class), is a reusable object with functionality.

Element

The element classes provide some of the most useful functionality within the Mootools library. Here is where you will select Dom elements, manipulate their properties and position, and change their CSS styles. Here are few of the great tools Mootools provides to deal with Dom elements:

Select the first of a certain type of DOM element, ID or class - .getElement();
Select all of a certain type of DOM element, ID or class - .getElements();
Add a class to an element - .addClass();
Find out the value of an element’s property - .getProperty();
Change the value of an element’s property - .setProperty();
Find out the value of an element’s style property - .getStyle();
Change the value of an element’s style property - .setStyle();
Get an elements coordinates - .getCoordinates();

Utilities

Utilities provides more refined selector logic, includes the domready event, gives you tools to manage AJAX calls, lets you easily manage cookies and even includes the “swiff” functionality which lets you interface JavaScript with ActionScript.

FX

This is probably Mootools’ most fun section. With FX you can create “morph type” effects that add animation to DOM objects.

Create an animated transition between two style values (e.g. grow a div larger smoothly) - var myFx = new Fx.Tween(element);
Create an animated transition between multiple different style values (e.g. grow a div larger smoothly and change the background color while making the border thicker) - var myFx = new Fx.Morph(element);

Request

Contains tools to ease dealing with Javascripts XMLHttpRequest (Ajax) functionality. Above making the entire request/response process much less painful, Request has extensions to deal specifically with either HTML or Javascript Object Notation (JSON) responses.

Plugins

The Mootools plugins extend the core functionality, letting you easily add advanced UI functionality to your web projects. The list of plugins includes: