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++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 8
Visitas el mes pasado: 19
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquà mismo se enseñan.
By Anyelguti
El objeto Hash realiza un análisis de otro objeto (lo llamaremos aquí elemento1), de manera que a partir de ahi podemos obtener información del mismo. Mediante Hash podemos acceder a las propiedades y métodos del elemento1, añadir o quitar nuevas propiedades, incluso propiedades inventadas por nosotros mismos, tal como haríamos con la programación de objetos.
Hash realiza un "mapa" del elemento1, con sus métodos y propiedades. Hash dispone a su vez de una serie de métodos para poder acceder o variar el elemento1.
Hash es una clase de objetos creada por mootools, por lo que lo primero que debemos hacer para obtener un hash de un elemento es instanciar el objeto. Esto lo haremos de la siguiente manera:
cabHash=new Hash($("cab"));
Hemos creado un nuevo objeto de la clase Hash. Como argumento pasamos el elemento del cual queremos crear un hash. En este caso, el elemento es la cabecera de nuestra página, la cual tiene un id="cab".
Como argumento podemos pasar un objeto existente, tal como hemos hecho aquí, o también crear un nuevo objeto, definiendo sus propiedades y métodos. Por ejemplo:
colorHash=new Hash({red:"rojo",yellow:"amarillo"});
Hemos definido aquí un nuevo objeto de la clase Hash, que lo hemos llamado colorHash. Le hemos puesto dos propiedades: red con un valor "rojo" y yellow, con valor "amarillo".
Fíjate en la sintaxis que hemos empleado¨: El argumento va encerrado entre llaves. Dentro de las llaves tenemos los pares nombre:valor, (Separamos el nombre del valor por el signo de dos puntos), los pares van separados entre sí por comas.
Para crear métodos se usa la misma técnica, sólo que el segundo elemento del par es una función que indica lo que debe hacer ese método.
Para acceder a una propiedad o un método sólo hay que llamarlo como a cualquier otro en javascript. Vemos aquí un botón que nos muestra en una ventana de alerta la propiedad red del ejemplo anterior:
Este botón tiene el siguiente código:
<button onclick="alert(colorHash.red)">Propiedad red</button>
Aunque podemos crear nuevos objetos hash y a veces ésto puede sernos útil, la utilidad más común de hash está en analizar los objetos ya existentes. Veamos ahora algunos métodos:
Los métodos get() y set() sirven para esto.
Pongamos como ejemplo un imagen que colocamos aquí a la derecha (abajo):
Para colocar la imagen hemos puesto el siguiente código html:
<img id="foto" src="objetos/foto1.jpg" alt="foto1" width="25%" />
Para que la imagen quede en el sitio donde está hemos puesto en la hoja de estilos el siguiente código CSS:
#foto { margin: 1em 3em; float:right; }
Creamos primero un hash de este elemento:
imgHash=new Hash($("foto"))
Ahora queremos cambiar la posición de la imagen para que esté a la izquierda. Para ello creamos un botón con atributo (propiedad) style, en el hash, en el cual indicamos la nueva posición:
El código de este botón es el siguiente:
<button onclick="imgHash.set('style','float:left')"> Izquierda </button>
Con el método get podemos ver en una ventana de alerta el valor del atributo "style" que hemos añadido:
El código de este botón es el siguiente:
<button onclick="alert(imgHash.get('style'))">Ver nuevo código</button>
Cambiando el valor de set podemos crear otro botón para poner otra vez la imagen en su posición inicial:
El código de este botón es muy parecido al del primero:
<button onclick="imgHash.set('style','float:right')">Derecha</button>
Mediante el método .each podemos acceder a todas las propiedades y métodos de un objeto hash: por ejemplo, vamos a acceder a las propiedades y métodos del objeto imgHash creado en apartado anterior, mediante el siguiente código:
titulo=new Element("h2",{"html":"imgHash"}); titulo.inject($("capa1")); imgHash.each(function(valor,nombre){ entrada=new Element("p",{"html":nombre+": "+valor}); entrada.inject($("capa1")); });
En el código html, debemos incluir también el elemento en el que recibimos la informacion:
<div id="capa1"></div>
El método .each() tiene como argumento una función. Esta función tiene dos argumentos que son el valor y el nombre de la propiedad o método. El metodo .each crea un bucle que recorre todos los métodos y propiedades del elemento.
Como podemos ver aquí, cualquier elemento de la clase Element de mootools tiene más métodos y propiedades que las que podemos apreciar a simple vista.
Para los siguientes métodos utilizaremos el siguiente hash de ejemplo:
poligonos=new Hash({n3:"triángulo",n4:"cuadrado",n5:"pentágono",n6:"hexágono"});
El método .has(), comprueba si una propiedad existe o no dentro de un hash. El nombre de la propiedad se pasa como argumento, y el método devuelve true si existe o false si no existe.
poligonos.has("n5"); // devuelve true
poligonos.has("n8"); // devuelve false
El método .hasValue(), comprueba si existe un cierto valor para una propiedad o no dentro de un hash. El valor de la propiedad se pasa como argumento, y el método devuelve true si existe o false si no existe.
poligonos.hasValue("pentágono"); // devuelve true
poligonos.hasValue("octógono"); // devuelve false
El método .keyOf(), devuelve el nombre de una propiedad, cuando se le pasa su valor como argumento. Si el valor pasado no se corresponde con el de ninguna propiedad devuelve null
poligonos.keyOf("pentágono"); // devuelve n5
poligonos.keyOf("octógono"); // devuelve null
Hemos hecho un "div" con id="capa2" en el que hemos indicado algunas características de este hash indicando sus propiedades. El código que hemos usado es el siguiente:
poligonos=new Hash({n3:"triángulo",n4:"cuadrado",n5:"pentágono",n6:"hexágono"}); titulo=new Element("h2",{"html":"Otros métodos"}); titulo.inject($("capa2")); entrada=new Element("p",{"html":"lados 5(has) : "+poligonos.has("n5")}); entrada.inject($("capa2")) entrada=new Element("p",{"html":"lados 7(has) : "+poligonos.has("n7")}); entrada.inject($("capa2")) entrada=new Element("p",{"html":"pentagono? (hasValue) : "+poligonos.hasValue("pentágono")}); entrada.inject($("capa2")) entrada=new Element("p",{"html":"octógono? (hasValue) : "+poligonos.hasValue("octógono")}); entrada.inject($("capa2")) entrada=new Element("p",{"html":"lados pentagono? (keyOf) : "+poligonos.keyOf("pentágono")}); entrada.inject($("capa2")) entrada=new Element("p",{"html":"lados octógono? (keyOf) : "+poligonos.keyOf("octógono")}); entrada.inject($("capa2")) });
El método .getKeys() devuelve un array con todos los nombres de los métodos y propiedades de un objeto hash. Este método no tiene argumentos:
nombres=poligonos.getKeys()
El método .getValues() devuelve un array con todos los valores de los métodos y propiedades de un objeto hash. Este método no tiene argumentos:
valores=poligonos.getValues()
En la siguiente página veremos métodos de mootols que podemos aplicar a las funciones.
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