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: 18
Visitas el mes pasado: 16
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
En javascript al producirse un evento, podemos obtener información de algunas características del mismo mediante el objeto "event". Mootools simplifica la obtenciòn de este objeto, así como sus propiedades, las cuales nos proporcionan la información.
En mootools también podemos acceder al objeto "event", de una forma más fácil que en javascript. Para ello basta con poner un primer argumento en la función que controla el evento:
$("elemento").addEvent("mousemove",function(evento){
//Código de la función que ejecuta el evento ...
});
Observamos que la única diferencia con la ejecución de un evento es que en la función hemos puesto un primer argumento, que aquí lo hemos llamado evento.
Este primer argumento es el objeto "event", el cual lo utilizaremos dentro de la función para obtener información del evento. La información no la obtenemos del objeto event en si, sino de sus propiedades y métodos.
Las propiedades que podemos obtener las podemos clasificar según el tipo de información que nos dan. Tenemos los siguientes tipos de propiedades del objeto "event", y también algunos métodos:
Las propiedades del ratón que utiliza el obejto "event" son las siguientes:
Debemos diferenciar entre el documento o la página completa, y la ventana del navegador, o parte visible en el navegador de la página. Estos no coinciden si la página está desplazada mediante las barras de desplazamiento.
Veamos un ejemplo en el que vemos en todo momento la posición del raton. Para ello creamos primero un elemento en el código html:
Página:
Ventana:
<div id="capa1">
<h2>Posición del ratón</h2>
<p id="p1">Página: </p>
<p id="p2">Ventana: </p1>
</div>
Ahora con mootools-javascript escribiremos la posición del ratón en los párrafos de este elemento. El código es el siguiente:
document.addEvent("mousemove",function(evento){
docX=evento.page.x;
docY=evento.page.y;
venX=evento.client.x;
venY=evento.client.y;
$("p1").set("html","Página: Horizontal "+docX+", Vertical "+docY);
$("p2").set("html","Ventana: Horizontal "+venX+", Vertical "+venY);
});
Vemos el resultado de este ejemplo en el recuadro arriba a la derecha.
Las propiedades de teclado dan información sobre la tecla que se ha pulsado. Se utilizarán por tanto los eventos de teclado para este tipo de propiedades. Estas son:
Veamos un ejemplo: tenemos el siguiente código html:
<div id="capa2">
<h2>Pulsa una tecla:</h2>
<p id="p3">Codigo (code) : </p>
<p id="p4">Tecla (key) : </p>
<p id="p5">Mayus (shift) : </p>
<p id="p6">Ctrl (control) : </p>
<p id="p7">Alt (alt) : </p>
<p id="p8">Meta (meta) : </p>
</div>
Codigo (code) :
Tecla (key) :
Mayus (shift) :
Ctrl (control) :
Alt (alt) :
Meta (meta) :
En los diferentes párrafos de este código pondremos la información del teclado, para ello ponemos el siguiente código en javascript-mootools (dentro del "domready"):
document.addEvent("keypress",function(evento){
$("p3").set("html","Código (code): "+evento.code);
$("p4").set("html","Tecla (key): "+evento.key);
$("p5").set("html","Mayus (shift): "+evento.shift);
$("p6").set("html","Ctrl (control): "+evento.control);
$("p7").set("html","Alt (alt): "+evento.alt);
$("p8").set("html","Meta (meta): "+evento.meta);
});
Ls propiedades anteriores funcionan igual con todos los eventos de teclado, (keydwoun, keyup, keypress).
La propiedad key devuelve siempre una cadena en minúsculas con el nombre de la tecla, por lo que si queremos saber si se ha pulsado la tecla mayúsculas debemos usar también la propiedad shift, para después pasar la cadena a mayúsculas (si es que queremos mostrarla así).
evento.preventDefault() : Elimina el comportamiento por defecto del elemento al ejecutarse el evento. Por ejemplo, en los enlaces, al hacer click, el comportamiento por defecto es ir a la página del enlace. Pues con event.preventDefalut sobre el enlace, éste deja de ir a la página indicada y ejecuta el código de la función asociada al evento.
evento.stopPropagation() : Easta propiedad hace justo lo contrario de la anterior, es decir, aplicada sobre un enlace (evento click), la función asociada al evento deja de ejecutarse, sin embargo el comportamiento por defecto si se produce, por lo que el enlace nos llevará al destino indicado, sin habarse ejecutado el evento.
evento.stop() : Esta propiedad hace las dos cosas anteriores a la vez, es decir elimina el comportamiento por defecto y también interrumpe la ejecución de la función del enlace.
evento.target() : Esta propiedad nos devuelve el elemento sobre el que se está ejecutando el evento. Para obtener alguna información sobre el elemento devuelto, debemos tratarlo como un objeto elemento de mootools. por ejemplo, tenemos el siguiente elemento en html:
<p id="ver1">click para mi etiqueta: </p>
Ahora queremos ver qué etiqueta tiene el elemento al hacer un click sobre él. Este es el código:
$("ver1").addEvent("click",function(evento){
this.set("html","Mi etiqueta : "+evento.target.get("tag"))
});
El resultado sera parecido al siguiente elemento:
Clik para mi etiqueta:
En la siguiente página veremos el tratamiento que mootools da a los Arrays
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