Webizzima - Le ofrecemos al mundo contenido profesional y de avanzada visión para usuarios que buscan grandes horizontes. Todo a la distancia de un clic y en español.

Introducción a los arrays en Mootools 1.2

---

Si no lo has hecho todavía, asegúrate de chequear el tutorial correspondiente al dia 2. En dicho tutorial, tratamos el tema de los selectores, mucho de los cuales crearon arrays (una lista especial que te brinda mucho control sobre el contenido). Hoy, vamos a mirar cómo usar arrays para gestionar los elementos DOM.

Lo básico

---

.each();

.each(); es nuestro mejor amigo cuando tratamos con arrays. Nos provee una forma fácil de iterar a través de una lista de elementos, aplicando cualquier lógica de script necesaria. Por ejemplo, digamos que quieres poner un mensaje de alerta por cada div en una página:

$$('div').each(function() {
    alert('a div');
});

Con este html, el código, el código de arriba lanzaría dos mensajes de alerta, uno por cada div.

One
Two

.each(); no requiere que uses $$. Otra vía para crear un array (tal y como hablamos ayer), es usar .getElements();.

$('body_wrap').getElements('div').each(function() {
    alert('a div');
});

One
Two

Otra forma de lograr la misma tarea es enviar el array hacia una variable, entonces hacer uso de  .each(); en dicha variable:

//primero declaras tu variable guardando "var VARIABLE_NAME"
//luego usas el signo de igual = para definir lo que va en dicha variable
//en este caso, un array de divs
var myArray = $('body_wrap').getElements('div');

//ahora, puedes usar esa variable array igual que un selector array
myArray.each(function() {
    alert('a div');
});

Finalmente, querrás separar tu función del selector y de .each();. Sobre las funciones vamos a hablar a profundidad en el tutorial próximo a este, no obstante por ahora, podemos crear una función simple como esta:

var myArray = $('body_wrap').getElements('div');

//para crear una nueva función, debes declarar una variable
//igual que antes, y posteriormente la nombras
//luego del signo de igual tú dices "function()" para declarar
//la variable como una función
//finalmente, pones el código de tu función entre { y };
var myFunction = function() {
    alert('a div');
};

//aquí llamas la función dentro de .each();.
myArray.each(myFunction);

Nota: Cuando llamas una función como la que hicimos aquí dentro de .each();, no pongas comillas alrededor del nombre de la función.

Haciendo una copia de un array

---

$A

Mootools provee una vía para simplemente copiar un array con la función $A. Configuremos otro array con una variable como la que hicimos arriba:

//crea tu variable array
var myArray = $('body_wrap').getElements('div');

Para crear una copia del array:

//crea una nueva variable llamada "myCopy", luego asigna la copia
//de "myArray" a tu nueva variable
var myCopy = $A(myArray );

Ahora myCopy contiene los mismos elementos que myArray.

Agarra un elemento específico dentro de un array

---

.getLast();

.getLast(); retornará el último elemento dentro de un array. Primero configuramos nuestro array:

var myArray = $('body_wrap').getElements('div');

Ahora podemos agarrar el último elemento dentro del array:

var lastElement = myArray.getLast();

La variable lastElement ahora representa el último elemento dentro de myArray.

.getRandom();

Trabaja al igual que .getLast();, pero obtendrá un elemento aleatorio del array.

var randomElement = myArray.getRandom();

La variable randomElement representa un elemento aleatoriamente elegido dentro de myArray.

Agrega un elemento en un array

---

.include();

Con este método, puedes agregar otro objeto dentro del array. Simplemente sitúa el selector del elemento dentro de .include(); y lo adjunta a tu array.

Con la siguiente configuración html:

one
two

add to array

podemos crear un array como lo hicimos antes antes llamando todos los divs que son niños (children) de ‘body_wrap’.

var myArray = $('body_wrap').getElements('div');

Para agregar otro elemento a ese array, primero agregamos el elemento que quieras incluir en una var, entonces usamos el método .include();.

//primero agrega tu elemento a una var
var newToArray = $('add_to_array');

//luego incluye la var en un el array
myArray.include(newToArray);

Ahora bien, el array contiene ambos elementos, los divs y span.

.combine();

Trabaja como .include();, excepto que te deja agregar un nuevo array a un array existente sin tener que preocuparte sobre duplicar contenido. Digamos que tenemos dos arrays del siguiente html:

one
two

add to array
    add to array, also
    add to array, too

Podríamos entonces construir los siguientes dos arrays:

//crea tu array justamente como hicimos anteriormente
var myArray= $('body_wrap').getElements('div');

//luego crea un array desde todos los elementos con .class_name
var newArrayToArray = $$('.class_name');

Ahora, podemos usar .combine(); para combinar los dos arrays, y el método se las arreglará con cualquier contenido duplicado de manera tal que no nos preocupemos nosotros.

//luego combina newArrayToArray con myArray
myArray.combine(newArrayToArray );

Ahora myArray contiene todos los elementos de newArraytoArray.

Ejemplos

---

Los arrays te dejan iterar a través de una lista de objetos, aplicando el mismo fragmento de código para cada uno. En este ejemplo, nota el uso de “item” como un marcador de posición para el elemento actual.

//crea un array de todos los elementos dentro de #body_wrap
//con la clase .class_name
var myArray = $('body_wrap').getElements('.class_name');

//primero debemos crear un elemento para agregarlo en nuestro array
var addSpan = $('addtoarray');
//ahora vamos a crear un array para combinarlo con nuestro array
var addMany = $$('.addMany');

//ahora podemos incluir el nuevo span
myArray.include(addSpan);
//y combinar nuestro array addMany con myArray
myArray.combine(addMany);

//crea una función para ir a través de cada ITEM en el array
var myArrayFunction = function(item) {
//item ahora se refiere al elemento dentro del array
  item.setStyle('background-color', '#eee');
}

//ahora puedes llamar a myArrayFunction para CADA item dentro del array
myArray.each(myArrayFunction);

one
two
three

    add to array
    one of many
    two of many

Descarga el zip de la clase de hoy

Para aprender más…

---

Este tutorial no cubre la inmensa cantidad de cosas que se pueden hacer con arrays, no obstante te da una idea de lo que Mootools oferta. Para ver más sobre arrays, te recomendamos lo siguiente:

• La sección de array en el sitio de Mootools
• Esta página tiene mucha información sobre arrays JavaScript

Vía | ConsiderOpen