comparte el articulo 

Introducción al manejo de elementos y eventos con MooTools

Actualizado el 02/05/2012 < > 0 Comentarios

Resumen: En esta entrega del manual empezaremos a manejar MooTools dentro del código de la página, haremos uso de la librería para manipular elementos, así como añadir y remover eventos.

Como ya fue definido en artículos anteriores Mootools, es una librería Javascript la cual debe de ser cargada en nuestro código HTML antes de realizar cualquier acción.

Como en esta ocasión haremos uso del core del framework para poder elaborar los ejemplos, tenemos que cargarlo en el inicio de nuestro código tal como se indicó en el artículo “Empezando con MooTools” de este manual.

Al igual que con jQuery, tenemos la opción de cargarlo de dos maneras distintas, ya sea descargando el core y los módulos que queremos utilizar o simplemente haciendo llamada a la API de Google que nos proporciona el código. La manera de carga que elijamos dependerá de la forma en que quieras desarrollar y si tendrás una conexión constante a Internet.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools.js"></script>

Elementos y eventos de Mootools

Para poder empezar a manipular el DOM de nuestra página debemos tener en mente todas las partes que lo conforman, cada una de estas es considerada un elemento y generalmente son definidas por una etiqueta HTML que se encarga de añadirlo a la interfaz. En una misma página podemos tener elementos de tipo imagen, sonido, texto o de estilo, todos ellos tomando parte del DOM.

Todos los elementos que conforman la página pueden ser manipulados de manera individual, cada uno puede recibir ciertas acciones que se encargarán de llevar a cabo alguna clase de proceso.

A estas acciones se les llaman eventos, y se encargan de capturar la interacción del usuario con el sitio para poder desencadenar alguna otra tarea.

Evento de carga en Mootools

El primer evento que surge dentro de una página es la carga de esta, no hay ningún elemento en particular que lo mande llamar, más bien es el conjunto de elementos que al estar totalmente cargados hacen que esta función pueda entrar en juego para llamar el código que tiene en su interior.

Debido a que no hay un elemento que reciba la acción, muchas veces la definición de este evento puede resultar confusa para la persona que va empezando a programar con JavaScript. En el caso de MooTools, la librería cuenta con dos funciones que nos ayudan a capturar este evento y poder llevar un proceso inmediatamente después de que la página se ha cargado.

Este par de funciones llevan por nombre “load” y “domready”, son sencillas y prácticamente hacen lo mismo, la única diferencia es que “domready” entra en acción antes de que las imágenes de nuestro sitio se carguen, mientras que “load” espera a que realmente todo el sitio se encuentre visible y listo.

En base a esto, se puede pensar que “load” es una mejor función para manipular la carga de un sitio, y puede que tengas razón, pero todo dependerá de lo que desees hacer.

Si en tu trabajo necesitas calcular las dimensiones de un objeto, imagen, o la posición final, entonces “load” si es la mejor opción para ti, pero generalmente la función “domready” es la más utilizada, ya que permite un inicio de proceso más rápido sin tener que esperar la carga de elementos que en ocasiones pueden ser muy pesados.

La manera de codificar dichas funciones es la siguiente:

window.addEvent('domready', function(){
    //Aquí podemos realizar cualquier acción que queramos se lleve a cabo después de cargar la página.
     alert("Hola La Webera!");
});

window.addEvent('load', function(){
    //Aquí podemos realizar cualquier acción que queramos se lleve a cabo después de cargar la página, incluso cálculos con imágenes.
});

Manipulación de elementos con Mootools

Como ya se dijo, cada elemento puede recibir varios eventos los cuales a su vez se encargarán de realizar algún proceso, pero para poder llegar a eso debemos saber como manipularlos.

Lo primero que tenemos que hacer es seleccionar el o los elementos que queremos reciban la acción, para ello contamos con los selectores que en el caso de MooTools son definidos dentro de dos funciones: $() o $$().

La función $() muchas veces es vista como un atajo para la sentencia “document.getElementById()” de JavaScript y generalmente esa es su función, pero aparte de recibir un ID, esta función también puede recibir elementos del DOM.

La manera en que esta función diferencia si el desarrollador envía un elemento o un ID, es que cuando recibe una cadena inmediatamente lo procesa como ID y va en busca de dicho elemento, en cambio cuando se pasa una referencia a un elemento simplemente lo envuelve para aplicarle las funciones posteriores.

var elemDiv = $('laWeberaDiv'); // Elemento MooTools formado por el div con id 'laWeberaDiv'

En el caso de la función $$(), esta es utilizada para obtener una serie de elementos, es decir al momento de introducir un parámetro a la función se nos regresará un arreglo con todos los elementos que cumplan con el selector.

Se puede pensar como un atajo de la función “document.getElementsByTagName()” de JavaScript, pero además de rastrear un objeto por su tipo, puede recibir selectores CSS como parámetro lo cual aumenta su poder.

var arrDiv = $$('div'); // Arreglo de elementos de tipo div

En base a esto podemos desarrollar un pequeño código que nos permita cambiar el color de todos los links que sean de cierta clase dentro de una página, y que todo esto se haga al momento de cargar la página.

window.addEvent('domready', function(){
    $$('a.linkLaWebera').setStyle('color', 'steelblue');
});

Conclusión

Como se pudo observar en este artículo, el manejo de elementos y su manipulación con eventos es un proceso bastante sencillo. Si ya has desarrollado con anterioridad para JavaScript, o mejor aún si ya habías utilizado un framework anteriormente, no te resultará nada difícil poder dominar este tema.

El uso de selectores puede ser el tema más difícil a tratar, sobre todo si vienes de trabajar con jQuery, pero nada que la practica no pueda remediar, solo recuerda utilizar siempre doble signo de moneda para traer un arreglo de elementos.

Publicado el 02/05/2012, última actualización 02/05/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras