30 days of MooTools is a collection of tutorials to learn to use the MooTools javascrit library, first published in 2008 by ConsiderOpen.
The lessons are actually 23, as they where interrupted after this day.
As the original site is currently offline, the tutorials have been collected using the Wayback Machine to make them available to everyone interested in learning to use MooTools.
The tutorials are based on MooTools 1.2 so some parts could be deprecated and they should be updated and expanded based on the new MooTools versions.
The copyright (and gratitude) for the original lessons is hold by ConsiderOpen.
Idea Paolo Manganiello. Licence CC 3.0.
If you haven’t already, be sure and check out yesterday’s tutorial - Day 2 - Selectors
In the last tutorial, we looked at selectors, many of which created arrays (a special list that gives you a lot control over the contents). Today, we are going to take a look at how to use arrays to manage DOM elements.
.each(); is your best friend when dealing with arrays. It provides an easy way to iterate through a list of elements, applying whatever script logic is necessary. For example, lets say you wanted to call one alert box for every div within a page:
$$('div').each(function() {
alert('a div');
});
With this html, the code above would fire two alert boxes, one for each div.
<div>One</div> <div>Two</div>
.each(); doesn’t require you use $$. Another way to create an array (liked we talked about yesterday), is to use .getElements();.
$('body_wrap').getElements('div').each(function() {
alert('a div');
});
<div id="body_wrap">
<div>One</div>
<div>Two</div>
</div>
Still another way to accomplish the same task is to send the array to a variable, then use .each(); on that variable:
//first you declare your variable by saying "var VARIABLE_NAME"
//then you use the equal sign "=" to define what goes in that variable
//in this case, an array of divs
var myArray = $('body_wrap').getElements('div');
//now, you can use that array variable just like an array selector
myArray.each(function() {
alert('a div');
});
Finally, you are going to want to separate out your function from the selector and .each();. We are going to talk more in depth about how to use functions in tomorrow’s tutorial, but for now, we can create a very simple one like this:
var myArray = $('body_wrap').getElements('div');
//to create a new function, you declare a variable just like before, then name it
//after the equal sign you say "function()" to declare the variable as a function
//finally, you place your function code between { and };
var myFunction = function() {
alert('a div');
};
//here you just call the function inside .each();.
myArray.each(myFunction);
Note: When you call a function like we did here inside of .each();, you do not put any quotes around the function name.
Mootools provides a way to simply copy an array with the $A function. Lets set up another array with a variable like we did above:
//create your array variable
var myArray = $('body_wrap').getElements('div');
To create a copy of the array:
//create a new variable, called "myCopy," then assign the copy of "myArray" to your new variable var myCopy = $A(myArray );
Now myCopy contains the same elements as myArray.
.getLast(); will return the last element within an array. First we set up our array:
var myArray = $('body_wrap').getElements('div');
Now we can grab the last element within the array:
var lastElement = myArray.getLast();
The variable lastElement now represents the last element within myArray.
Works just like .getLast();, but will get a random element from the array.
var randomElement = myArray.getRandom();
The variable randomElement is now represents a randomly chosen element within myArray.
With this method, you can add another item into an array. Simply place the element selector within .include(); and attach it to your array. With the following html setup:
<div id="body_wrap">
<div>one</div>
<div>two</div>
<span id="add_to_array">add to array</span>
</div>
We can create an array like we did before by calling all the divs that are children of ‘body_wrap.’
var myArray = $('body_wrap').getElements('div');
To add another element to that array, first add the element you want to include to a var, then use the method .include();.
//first add your element to a var
var newToArray = $('add_to_array');
//then include the var in the array
myArray.include(newToArray);
Now, the array contains both the divs and the span element.
Works just like .include();, except it lets you add an new array to an existing existing array without having to worry about duplicate content. Say we had two arrays from the following html:
<div id="body_wrap">
<div>one</div>
<div>two</div>
<span class="class_name">add to array</span>
<span class="class_name">add to array, also</span>
<span class="class_name">add to array, too</span>
</div>
We could then build the following two arrays:
//create your array just like we did before
var myArray= $('body_wrap').getElements('div');
//then create an array from all elements with .class_name
var newArrayToArray = $$('.class_name');
Now, we can use .combine(); to combine the two arrays, and the method will deal with any duplicate content so we don’t have to.
//then combine newArrayToArray with myArray myArray.combine(newArrayToArray );
Now myArray contains all the elements from newArraytoArray.
Arrays let you do iterate through a list of items, applying the same chunk of code to each one. In this example, notice the use of “item” as a placeholder for the current element.
//creates an array of all elements within #body_wrap with the class .class_name
var myArray = $('body_wrap').getElements('.class_name');
//first lets create a new element to add to our array
var addSpan = $('addtoarray');
//now lets create an array to combine with our array
var addMany = $$('.addMany');
//now we can include the new span
myArray.include(addSpan);
//and combine our addMany array with myArray
myArray.combine(addMany);
//create a function to go through each ITEM in the array
var myArrayFunction = function(item) {
//item now refers to the current element within the array
item.setStyle('background-color', '#eee');
}
//now you call the myArrayFunction for EACH item within the array
myArray.each(myArrayFunction);
<div id="body_wrap">
<div class="class_name">one</div><!-- this has gray background -->
<div>two</div>
<div class="class_name">three</div><!-- this has gray background -->
<span id="addtoarray">add to array</span> <!-- this has gray background -->
<br /><span class="addMany">one of many</span> <!-- this has gray background -->
<br /><span class="addMany">two of many</span> <!-- this has gray background -->
</div>
This tutorial does not begin to cover the wonderful things you can do with arrays, but hopefully it has given you an idea of what Mootools has to offer. To find out more about arrays, take a closer look at:
Tomorrow we will look closer at functions and how to use them in Mootools.