- 206.319.0255
- Contact Us
-
Chat
- |
- Client Login
We recently got a request to do 30 days of Mootools 1.2 tutorials and it seemed like such a fine idea that we decided to get started right away. These tutorials will assume no previous Mootools or JavaScript experience, but will require basic knowledge of html and CSS.
Mootools 1.2 is a powerful, lightweight javascript library designed to ease interactive JavaScript web development. In a way, you can think of a lot of things that Mootools can do as CSS extensions. For example, CSS lets you change a property on hover. Javascript allows you to recognize more events (click, mouseover, keystrokes, …) and Mootools makes it almost painfully easy to take advantage of this.
In addition, Mootools has all sorts of nifty extensions which let not only change element properties (like you can with hover), but lets you “morph” or “tween” properties, giving you the ability to create animated effects like you see on our menu.
Thats just one example, Mootools can allow you to do much more. Over the next 30 days, we are going to dig deeper into the Mootools library, exploring everything from arrays and functions to FX.Slide and the other bundled plugins.
First, download and install the Mootools 1.2 Core library.
Now that you are calling Mootools into your page, you need a place to write the code. There are two options:
1. Place the code between script tags in your head:
<script type="text/javascript"> //Mootools code goes here </script>
2. Create an external JavaScript file and link to it in your head:
<script src="myJavaScriptFile.js" type="text/javascript"></script>
From here on out, you can use either method. I will often call the functions within the domready event inside the script tags, but create my functions in an external JavaScript file.
Mootools functions must be called within the domready event.
window.addEvent('domready', function() { exampleFunction(); });
You can still build your function outside of the domready, then call it within.
var exampleFunction = function() { alert('hello') }; window.addEvent('domready', function() { exampleFunction(); });
For this first tutorial, we are going to take a closer look at the key components of the library’s architecture and go over some of the basic functionality.
The core contains common functions within the Mootools library and makes it easy to accomplish common tasks as well as beefing up a lot of pre-existing functionality (more on that later). The following is meant only as an example of some of Mootools’ capabilities and is no replacement for reading the Mootools documentation.
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:
A JavaScript class (in contrast to a CSS class), is a reusable object with functionality. To learn more about Mootools classes you can check out this quick intro by Valerio (Mootools Classes - How to Use Them). I would also recommend David Walsh’s Mootools Class Template.
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:
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.
This is probably Mootools’ most fun section. With FX you can create “tween” and “morph” effects that add animation to your DOM objects.
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.
The Mootools plugins extend the core functionality, letting you easily add advanced UI functionality to your web projects. The list of plugins includes:
Before the next tutorial, take some time to pour over the Mootools documentation. Even if you don’t understand it all, just read through it and absorb what you can. Over the next 29 days we are going to dig deeper into specific areas within the library and break Mootools down into some easy to digest pieces, but first, be sure and take a good look over the whole menu.
Includes a copy of the Mootools 1.2 core library, a simple html file, an external JavaScript file for your functions and a css style sheet. The html is well commented and includes the domready event.
In the mean time, here is a list of some other Mootorials to help you get started.
Hablas Español? Echa un vistazo a la traducción de alainalemany.com
We have also been told to expect a Chinese translation shortly.
Here is a great summary of the capabilities of Mootools 1.2. I just printed out myself a copy and am currently looking for a place to hang it. Maybe i’ll drop by the printers and have them set me up with a poster size :). Anyhow, here’s the link to the Mootools 1.2 Cheat Sheet
If you want to chat with other folks about Mootools, check out code samples or dig into specific questions, this is the place for you. It’s still very new, but picking up steam: Mootools 1.2 forum
Visit our Day 2 tutorial to learn more about Mootools 1.2 selectors
Here is a look at the subjects we are going to cover in this series:
The plan is to ramp up slowly, dealing with more complex issues later in the series. We would like to hear from you: what basic areas are you interested in learning about? What kind of projects would you like to see covered in these tutorials? Please feel free to drop us a note with any comments, questions or suggestions. Thanks and hope you find this series helpful.
