Intro to the Mootools 1.2 Library
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.
Introduction to Mootools 1.2 JavaScript Library
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.
Installing Mootools 1.2
First, download and install the Mootools 1.2 Core library.
- Download the Mootools 1.2 Core library
- Upload the Mootools 1.2 Core library to your server or workspace
- Link to the Mootools 1.2 Core library in your head tag – <script src=”mootools1.2core.js” type=”text/javascript”>
Add Script Tags in your Head Tag
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"><!--mce:0--></script>
2. Create an external JavaScript file and link to it in your head:
<script src="myJavaScriptFile.js" type="text/javascript"><!--mce:1--></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.
Put it in the domready
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, then call it within.
var exampleFunction = function() { alert('hello') }; window.addEvent('domready', function() { exampleFunction(); });
Library Description
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.
Core
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.
- 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. 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.
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 “tween” and “morph” effects that add animation to your 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:
- Fx.Slide
- Fx.Scroll
- Fx.Elements
- Drag
- Drag.Move
- Color
- Group
- Hash.Cookie
- Sortables
- Tips
- SmoothScroll
- Slider
- Scroller
- Assets
- Accordion
The Big Picture
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.
To Learn More…
A zip with everything you need to get started
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.
Other Mootools Tutorials
In the mean time, here is a list of some other Mootorials to help you get started.
30 Days of Mootools Translations
Hablas Español? Echa un vistazo a la traducción de alainalemany.com
French translation: http://www.6ma.fr/tuto/mootools+jours+jour+1+introduction-458
Chinese translation: http://ooboy.net/blog/article/605.aspx
Mootools 1.2 Cheat Sheet
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
Mootools Forum
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
Tomorrow
Visit our Day 2 tutorial to learn more about Mootools 1.2 selectors
The schedule (so far)
Here is a look at the subjects we are going to cover in this series:
- Day 2 – Selectors
- Day 3 – Intro to Using Arrays
- Day 4 – Functions
- Day 5 – Event Handling
- Day 6 – Manipulating HTML
- Day 7 – Setting and Getting Style Properties
- Day 8 – Input Filtering Part 1 (numbers)
- Day 9 – Input Filtering Part 2 (strings)
- Day 10 – Using Fx.Tween
- Day 11 – Fx.Morph, Options and Events
- Day 12 – Drag and Drop with Drag.Move
- Day 13 – Regular Expressions
- Day 14 – Periodical and Intro to Hashes
- Day 15 – Sliders
- Day 16 – Sortables and Intro to Methods
- Day 17 – Accordion
- Day 18 – Classes Part 1
- Day 19 – Tool Tips
- Day 20 – A few kinds of Tabs
- Day 21 – Classes Part 2
- Day 22 – Morph multiple elements with Fx.Elements
- Day 23 – Fx.Slide
- Day 24 – Simple Modal Box Project – part 1
Tutorial Requests?
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.
Tags: 30 days of mootools, javascript, Mootools 1.2, tutorials
[...] 1.2 – Selectores Si no lo has hecho todavía, asegúrate de chequear primero el tutorial Día 1 – Introducción a la librería. Allí hablamos de cómo instalar Mootools 1.2 y cómo llamar tus scripts dentro del evento [...]
[...] Vía | ConsiderOpen [...]
[...] 30 Days of Mootools 1.2 Tutorials – Day 1 – Intro to the Library — consider: open blog | Web D… 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. (tags: javascript mootools webappdevresources) similar nonsense in: ill.icio.us | No Comments » [...]
Thank you so much for the whole tuts. Very practical.
Waiting for the rest Tuts (Day 22 to 30). What about popup or context menu tutorial ?
Regards,
Hey, is there a possibility to download an archived version of the 30 days tutorial for offline study?
Thanks!
[...] 30 Days of Mootools 1.2 Tutorials – Day 1 – Intro to the Library. Each tutorial comes with some advanced examples and demos. Really interesting. [...]
[...] 30 Days of Mootools – This is what I am using to learn Mootools. [...]
[...] – bookmarked by 2 members originally found by stuffins on 2008-11-10 30 Days of Mootools 1.2 Tutorials – Day 1 – Intro to the Library [...]
[...] http://www.consideropen.com/blog/2008/08/30-days-of-mootools-12-tutorials-day-1-intro-to-the-library... [...]
[...] Mootools 1.2 tutorials, covering much of the basics of the library, the bundled plugins and downloadable examples. [...]
Thank you very much for your work!
I was copy/pasting along while reading and at first, I could not call a function in an external js file. It was because I copied the code where I include the core from your instructions and there the JavaScript Tag is not closed.
I changed it to
and everything worked.
Maybe someone runs into the same problem.
Again, thank you very much!!!
[...] up was introducing myself to javascript, I used a 30 days of MooTools Tutorial. I haven’t needed anything I’ve learned yet, but I’m anxious to try some things [...]
[...] 30 dage med MooTools tutorials. En grundig gennnemgang af MootTools, delt op i en række tutorials. Starter med intro til MooTools librariet, og fortsætter med emner som selectorer, funktioner, html maipulation, drag and drop og mange grafiske effekter som slide, hide og morph. [...]
[...] Great MooTools intro Posted on March 18, 2009 by Paul http://www.consideropen.com/blog/2008/08/30-days-of-mootools-12-tutorials-day-1-intro-to-the-library/ [...]
Great work! Can I translate it in italian?
Hi Andrea,
Please do! We’ll link to the posts, drop us an email after you have published a few.
Thanks
Thank you so much for putting together the zip file with an html for us idiots.
I’ve never used a javascript library, and, for the life of me, I couldn’t get anything with Moo Tools to run until I downloaded the Day 1 zip!
Anyone making a tutorial aimed at beginners (of any kind, and in any subject) should ALWAYS hold their hand through EVERY step, and it was helpful for you to do that.
It’s a shame when some stupid technicality prevents someone from learning, but the truth is that it happens all the time. Know that it was worth your trouble, and that creating such (to an expert seemingly needless) hand-holding tools for beginners is a VERY worthwhile habit to continue in the future.
Thanks again!
[...] Mootools1.2 30???????? ?1?? – ????????(??) [...]
[...] – 30 Days of MooTools Tutorials [...]
[...] Aportado por Boomstix en la fuente original. [...]
I have an understanding of the concept of programming. I write php code a lot, but I’m completely new to javascript. I was hoping that this would be a real beginner’s tutorial. I’m afraid you lost me at “domready”, though. What’s a “domready”?
Answering myself… I found out what “domready” means. It is used when “we want to add an event to the window when the Document Object Model (DOM) is ready, meaning once it is done loading. This ensure that every element defined in your HTML files has loaded before applying events to them.” In case someone else is as confused as I was.
[...] Dari proses belajar melalui demo & dokumentasi di dari situs resmi mootools, lalu belajar dari blog tutorial dan blog favorit mootooler yang berkaitan dan juga mencari di forum, sampe akhirnya ketika mentok [...]
[...] Aportado por Boomstix en la fuente original. [...]
[...] 1.2 – Selectores Si no lo has hecho todavía, asegúrate de chequear primero el tutorial Día 1 – Introducción a la librería. Allí hablamos de cómo instalar Mootools 1.2 y cómo llamar tus scripts dentro del evento [...]
[...] Vía | ConsiderOpen [...]
[...] 30 Days of MooTools Tutorials Salva e condividi questo Articolo su: Queste icone linkano i siti di social bookmarking sui quali i lettori possono condividere e trovare nuove pagine web. [...]
[...] [upmod] [downmod] 30 Days of Mootools 1.2 Tutorials – Day 1 – Intro to the Library — consider: open blog | Web Design… (www.consideropen.com) 1 points posted 8 months, 2 weeks ago by SixSixSix tags imported [...]
[...] 30 Days of Mootools 1.2 Tutorials – Day 1 – Intro to the Library — consider: open blog | Web D… – Share and Enjoy: [...]
[...] Intro to the Library [...]
[...] Intro to the Library [...]
[...] Intro to the Library [...]
[...] Intro to the Library [...]
[...] Intro to the Library [...]
Are the two javascript frameworks conflict that mootools and prototype ?
Both mootools and prototype historically have not played well with other libraries. Mootools is working on making that less of an issue (http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/), but I have not had a chance to check out this addition.
[...] Intro to the Library [...]
Dude. Move to South Africa. I want to vote for you to be our president!!!
Great work.
[...] Intro to the Library [...]
[...] Intro to the Library [...]
[...] 30 Days of Mootools 1.2 Tutorials [...]
I’ve read an article in a blog somewhere where the author said mootools is for real men and jquery is for little girls and also completes saying than in CNN and NASA there are not little girls. So that was the first time I heard about mootools since I’m a beginner on javascript. For a second I felt a little girl because I was using jquery, I’m sure a lot of people have their own point of view, but as soon as jquery have helped me in my first attempt using a javascrit library, I’m quite satisfied with the results. Anyway I’ll keep up on mootools development to learn and improve my abilities. Thanks for the article.
[...] Ich habe bisher noch absolut keine Erfahrung in Bezug auf JavaScript Frameworks, da ich aktuell an einem Projekt mit TYPOlight arbeite kann es gut sein das ich etwas mit JavaScript zu tun bekomme. Bei TYPOlight ist das MooTools Framework standard, deshalb versuche ich mich bei Gelegenheit ein wenig in dieses einzuarbeiten. Nach kurzem googeln fand ich eine interessante Artikelreihe 30 Days of MooTools. [...]
[...] on Mootools site to be far inferior to the tutorials that you can find on this guy’s site: (http://www.consideropen.com/blog/2008/08/30-days-of-mootools-12-tutorials-day-1-intro-to-the-library...) so if you get frustrated with the Mootools site, take a look there.References [...]
[...] en 30 días de este magnífico Framework de Javascript. Es una traducción del original Tutorial Original. [...]
[...] ???? [...]
You call this a tutorial? It didn’t tutor me in anything. The first part of the article was ok, when you were giving code examples. Then, the code examples stopped just as it was getting interesting, and the rest reads like a documentation copy-and-paste (Mootools also has bad documentation, I already discovered that at mootorial.com). I hope you are not going to write 30 days of this stuff with no code examples.
@45: Sorry that you didn’t find it useful. The first few days are meant to be primers for those with limited coding experience.
[...] here to start with this fine tutorial. Have fun. [...]
[...] – 30 Days of MooTools Tutorials [...]