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

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

MooTools (XII)

El objeto hash

Introducción

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.

Instanciar el objeto hash

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:

Propiedad red

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:

Buscar, cambiar o crear propiedades:

Los métodos get() y set() sirven para esto.

• hash.get("nombre") : Nos devuelve el valor de la propiedad pasada en el argumento.
• hash.set("nombre","valor") : Si la propiedad pasada en "nombre" existe le cambia su valor a "valor", si no existe la crea y le asigna un valor.

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:

Izquierda

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:

Ver nuevo código

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:

Derecha

El código de este botón es muy parecido al del primero:

<button onclick="imgHash.set('style','float:right')">Derecha</button>

Acceder a todos los métodos y propiedades de un objeto

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.

Otros métodos de Hash

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"});

Método has

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

Método hasValue

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

Método keyOf

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"))
});

método getKeys

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()

método getValues

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.

Métodos para funciones

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