aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Despues de unos días entre líneas de Javascript, empapado en MooTools (siempre con la ayuda de Daniel Mota), ya puedo dar por aprendido la creación y uso de Clases y Objetos en MooTools. La verdad es que me ha sorprendido la potencia que tiene y lo cómodo y fácil que es trabajar con MT.

Otra de las maravillas que me ha sorprendido mucho ha sido la aplicación de funcionalidades de los Arrays (Vectores), que convierten su uso en algo bastante ligero y efectivo. Los que hayan usado los arrays nativos en javascript sabrán lo pesado que es tener que generar un for o while para recorrer el array.

¿Que es un Array (Vector)?

Llamamos vector a un conjunto de elementos o variables del mismo tipo, que mediante un índice podemos tener localizados, podiendo tenerlos siempre accesibles conociendo el indice en el que se encuentra. Los vectores reciben varios nombre, array, arreglo, alineación…

Como su propia definición indica, pueden albercar elementos o variables del mismo tipo, dando lugar a la posibilidad de generar un vector de vectores, tambien conocido como Matriz. Estas matrices de dos dimensiones pueden dar lugar a matrices más complejas y estás a otras aún más.. y asi infinitamente.

Visto esto se verá claro la potencia y lo útiles que son los vectores a la hora de programar. Recuerdo que en el primer año de carrera tuvimos que hacer un buscaminas en C, y la base de la aplicación era un tablero de 10×10 (que podía crecer dependiendo de los parametros que pasabamos) para hacerlo usé una matriz que se encargaba de ubicar aleatóriamente las «bombas» dentro de sus campos. Sin una matriz hubiera sido imposible hacer que el juego funcionara.

Arrays y Javascript

Los Arrays y Javascript son viejos conocidos y a lo largo del tiempo han ido puliendo esta relación para conseguir llevarse lo mejor posible, así y todo aún les quedaba mucho para integrar iteradores cómodos para manejarlos….Hasta la 1.7 tendremos que esperar.

MooTools y Arrays

Para facilitar el úso de esta herramienta MT ha añadido funcionalidades extras al objeto nativo con el fín de mejorar la tarea de desarrollo. Debido a la gran cantidad de objetos para trabajar con el DOM de JS se veían obligados a mejorar este aspecto. Gracias al uso de arrays la creación de funciones no obstructivas es mucho más cómoda y los chicos de MT lo sabén.

Crear un array

Al tratarse de una aplicación del objeto Array podremos seguir usando la antígua especificación para generar arrays, que aportarán las nuevas funcionalidades desde el momento en el que importemos el fichero.

var letters = ["a","b","c"];
var letters = new Array("a","b","c") ;
var letters = [];
letters[0] = "a";
letters[1] = "b";
letters[2] = "c";

Métodos nativos de los array

Las funcionalidades nativas de los arrays en javascript continúan intactas asi que podremos añadir, elimitar, extraer una porción,…Echarle un vistazo a la Wikipedia.

Eliminando del array 

Los chicos de MT han pensado que podrían ahorrarnos unas líneas de código haciendonos un método «remove» con el cual podremos eliminar un elemento del Array sin tener que recorrerlo entero para buscarlo y despues eliminetarlo. 

//Sin MT
var array = ["arbol","buho","coche"];
for (var x=0; x< arra.length; x++)
	if (array[x] == "buho") array[x] = "";
//Con MT
var aray = ["arbol","buho","coche"].remove("buho");

Como podemos ver es mucho más claro y cómodo.

Comprobando la existencia de un elemento

Al igual que para eliminar un elemento del Array teníamos que recorrerlo, con MT ahora lo tenemos más fácil.

//Sin MT
var array = ["arbol","buho","coche"];
for (var x=0; x< arra.length; x++)
	if (array[x] == "buho") alert("EXISTE");
//Con MT
var aray = ["arbol","buho","coche"].test("buho");

Usando el método test nos devolverá true en caso de que exista y false en caso contrario.

Extendiendo un Array

Tambien podremos añadir a nuestro array otro array.

var Animals = ['Cat', 'Dog', 'Coala'];
Animals.extend(['Lizard','Monkey']);
//Animals es ahora: ['Cat', 'Dog', 'Coala', 'Lizard','Monkey'];

Asociando Arrays

Muy interesante utilidad con la cual podremos asociar dos array de forma númerica. De esta forma conseguiremos que los elementos, uno a uno se asocien con el mismo elemento úbicado en la misma posición del otro array.

var Animals = ['Cat', 'Dog', 'Coala'];
var Speech = ['Miao', 'Bau', 'Fruuu', 'Mute'];
var Speeches = Animals.associate(Speech);
//Speeches['Miao'] is now Cat.  //Speeches['Bau'] is now Dog.  //...

Iterando los elementos

Quizas la mejora más interesante sea esta, que te permite iterar (recorrer) los elementos del array de forma muy rápida. Además este método recibe un parametro que puede ser una función con la que nos permitirá extender la funcionalidad de la iteración.

var enlaces = $S('a'); // Recogemos todas las <a></a>
enlaces.each(function(item) {
	alert("Este enlace va a : " + item.href);
	});

Como podemos ver la iteración es realmente cómoda para el desarrollador y eso siempre se agradece, usamos la función $S(), que ya explicaré más adelante, para  obtener todos los elementos <a></a> del código y con los que encuentre nos dedicamos a ver hacia donde va cada uno de ellos.