Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (I Básico)

MooTools: la librería más completa para trabajar fácilmente con javascript.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.



MooTools (X)

Arrays

Introducción

En mootools muchos métodos dan como resultado un array, No sólo tenemos los arrays que podamos hacer nosotros con javascript, sino que métodos como $$(".selector") del objeto "element" dan como resultado un array. Para recorrer un array y extraer sus elementos, podemos usar las formas convencionales de javascript (recorrerlos con bucles), o también podemos usar el método .each() de mootools.

El método .each()

El método .each() funciona como un bucle que recorre los elementos del array. Este método tiene como argumento una función que será la que recorre los elementos:

miarray.each(function(valor,indice){ ... });

La función que pasamos como argumento funciona como un bucle, ésta irá recorriendo los elementos del array. Los argumentos valor y indice nos dan respectivamente el valor (contenido) y el índice (posición) de cada elemento.

Veamos un ejemplo: tenemos un elemento HTML en el que visualizaremos el array:

<div id="capa1"><h2>Mi array</h2></div>

Ahora incorporamos a este elemento un array mediante el método .each() de mootools:

miarray= new Array("pera","manzana","plátano","fresa","melocotón");
miarray.each(function(valor,indice){
elemento=new Element("p",{"html":indice+", "+valor})
elemento.inject($("capa1"),"bottom");
});

Con esto conseguimos recorrer todos los elementos del array y extraer su valor y su posición. En la función, el segundo argumento (indice) no es obligatorio, sólo lo pondremos cuando queramos obtener la posición del elemento dentro del array.

Otros métodos de arrays en mootools

Además de los métodos que hay en javascript para añadir elementos, quitarlos, buscarlos, etc, con mootools tenemos también algunas funciones que hacen cosas parecidas:

Array.clean();

Elimina del array los elementos que son null o undefined:

elarray=[1,2,null,3,undefined,7];
elarray.clean(); //ahora elarray=[1,2,3,7]

Array.indexOf();

El método indica el índice (posicion) que ocupa un determinado elemento del array, si es que existe. Pasamos el elemento como argumento, y si existe devuelve su posición en el array. Si no existe devuelve -1;

miarray=["pera","manzana",plátano","fresa","melocotón"];
num1=miarray.indexOf("plátano");//num1=2
num2=miarray.indexOf("naranja");//num2=-1

Array.asociate();

Crea un array asociativo, a partir de dos arrays. Pasando el segundo array como argumento, asocia los elementos de este segundo array a los del primero, de manera que podemos llamar a los elementos del primero mediante los del segundo:

capitales=["Madrid","Lisboa","París","Roma"];
paises=["España","Portugal","Francia","Italia"];
capitales.asociate(paises);
cap1=capitales["España"];//cap1="Madrid"
cap2=capitales ["Francia"];//cap2="Paris"

Array.include();

Incluye un nuevo elemento en el array. En el argumento se pasa un nuevo elemento. Se comprueba si existe un elemento igual en el array. Caso de que haya un elemento igual este no se incluye, y si el elemento es distinto se incluye.

miarray=["pera","manzana",plátano"];
miarray.include["pera"];//El array no varía.
miarray.include["naranja"];
//ahora miarray=["pera","manzana",plátano","naranja"]

Array.extend();

Añade todos los elementos de un array a otro array. El segundo array se pasa como argumento del método, y sus elementos se colocan a continuación de los del primero.

miarray=["naranja","manzana",plátano"];
otroarray=["naranja","limón"];
miarray.extend(otroarray);
//ahora miarray=["naranja","manzana","plátano","naranja","limón"]

Este método no tiene en cuenta si los elementos están o no repetidos, simplemente añade los elementos del segundo array a los del primero, estén o no repetidos.

Array.combine();

Este método funciona parecido al anterior, excepto que los elementos que resulten duplicados por estar en ambos arrays, sólo se incluyen una vez.

miarray=["manzana",plátano"];
otroarray=["naranja","limón","manzana"];
miarray.extend(otroarray);
//ahora miarray=["manzana","plátano","naranja","limón"]

Array.erase();

Elimina el elemento que se le pasa como argumento:

miarray=["manzana",plátano","pera"];
miarray.erase("manzana");
//ahora miarray=["plátano","pera"]

Array.empty();

Vacía un array de todos sus elementos. Convierte el array en un array vacío.

miarray=["manzana",plátano","pera"];
miarray.empty();
//ahora tendremos un array sin elementos.

Array.flatten();

Convierte un array de arrays (multidimensional), en un array plano, de una sola dimensión. Los elementos contenidos en los arrays secundarios forman todos parte del mismo array:

miarray=[["pera","manzana"],["naranja","limon"]];
miarray.flatten();
//ahora miarray=["pera","manzana","naranja","limón"]

Array.rgbToHex()

Tenemos un array con tres números, que son valores de color, y los convierte a valor RGB hexadecimal. Util para establecer colores con CSS:

color=[99, 100, 101];
color.rgbToHex();//ahora color="#636465"

Array.rgbToRgb()

Convierte un array con tres números, que son valores de color en sistema hexadecimal, y los convierte a valor RGB decimal. Util para establecer colores con CSS:

color=[63, 64, 65];
color.rgbToRgb();//ahora color="rgb(99,100,101)"

Array.getRandom()

Devuelve un elemento del array escogido al azar.

elemento=miarray.getRandom();

---

En la siguiente página veremos el tratamiento que mootools da a las cadenas de texto y al objeto Number:

Cadenas y números

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com