A pedido popular, comenzaré a iniciar a quienes visitan este sitio en algunos de los frameworks Javascript más populares, o por lo menos, que utilizo con más frecuencia. El primero de ellos sería Mootools, con el que más he estado jugando últimamente (y prometo mostrar resultados).

Pero antes, me interesa comenzar con definir framework. Según mi instinto (y ayuda de Wikipedia), los frameworks Javascript (pueden ser de otros tipos) son una arquitectura que modela las relaciones del lenguaje Javascript. Provee una estructura y principalmente una metodología de trabajo que ayuda a ordenar una sintaxis de trabajo. Son diseñados principalmente para facilitar el desarrollo de sitios y aplicaciones web. Cada framework tiene su orden y estructuras definidos, y no pueden ser mezclados, ya que las reglas son diferentes entre ellos (imagínense sino jugar rugby con reglas de básquetbol… ¡un lío!).

En este artículo, crearemos unos simples Eventos donde manipularemos Elementos vía Javascript.

Cargando⌗

Para comenzar a trabajar con Mootools debemos primero llamar la librería, la que puede ser descargada desde su sitio web ofreciéndonos mucha flexibilidad para bajar una versión optimizada a nuestros requerimientos. Por este detalle, Mootools puede intimidar, ya que quizás algunos Eventos o Efectos no funcionen a la primera (y frustren a quienes esperan prontos resultados), debido a que no han bajado el material necesario para ello. Así, Mootools puede ser considerado como un framework avanzado, pero prefiero verlo como versátil y liviano. Basta algo de estudio para entender bien y utilizar lo justo y necesario para nuestras necesidades. Resumiendo, para cagarlo se utiliza:

<script type="text/javascript" src="ruta_a/mootools.js"></script>

Luego, comenzaremos a escribir lo que queremos realizar vía Javascript. Para comenzar, debemos crear un Evento que nos diga cuando comenzar a realizar lo que queremos.

window.addEvent('domready', function() {<br />
     // nuestro código<br />
});

Mootools nos ofrece más de una opción para comenzar a escribir código:

  • domready: se ejecuta cuando todos los elementos de la página están listos, pero no espera por las imágenes. Gran aporte de Mootools.
  • load: se ejecuta cuando toda la página (inclusive imágenes) se carga, lo que se hacía usualmente con Javascript puro. En algunos casos se demora bastante más.

Escribiendo⌗

Bien, estamos listos para programar algo con ayuda de Mootools. Como mencioné, crearemos un Evento donde manipularemos aspectos de alguna etiqueta (Elemento). Primero, lo que queremos realizar:

$('enlace').addClass('grandote');

Ahora diseccionaremos esto: al elemento que tenga un id=“enlace”, agrega una class que se llame .grandote (que aumentará el tamaño de la tipografía del enlace).

$ todos los elementos
(‘enlace’) que tengan el id=“enlace”
.addClass agrega la class
(‘grandote’) .grandote

Así de simple. Claro que tienen que tener definida la class .grandote en su hoja de estilos para que vean el resultado.

[Ver ejemplo 1][1]{.verejemplo}

Ojalá puedan ver el source desde Firefox con el plugin Web Developer o Firebug, y podrán apreciar la diferencia entre el código fuente y el código generado.

Ahora, si queremos alcanzar más de un id:

$$(['nombre:id', 'otro_id']).addClass('grandote');

[Ver ejemplo 2][2]{.verejemplo}

Notaron como cambió la invocación al Elemento? Cuando es más de uno, se usa $$ y se agrupan entre corchetes []. Pequeños detalles que diferencian los Frameworks.

Se pueden hacer muchas cosas más manipulando Elementos o Selectores con Mootools, como por ejemplo:

  • $(‘elemento’).remove(); remueve el elemento, literalmente.
  • $(‘elemento’).removeClass(); remieve la class que tenga ese elemento.
  • $(‘elemento’).setStyle(); agrega estilos CSS que definamos.
  • $(‘elemento’).setOpacity(0.4); le da opacidad de 40%;
  • $(‘elemento’).setText(‘Lorem Ipsum’); le inyecta Lorem Ipsum dentro de un elemento, por ejemplo

  • $(‘elemento’).empty(); vacía un elemento.

Siendo fiel con el título de este artículo, esta fue una introducción. La documentación de Mootools es completa pero lamentablemente pobre de aplicaciones reales. En el foro pueden encontrar más variedad, pero aún no es bastante satisfactorio.

Próximamente, artículo dedicado a JQuery.

[1]: http://www.csslab.cl/ejemplos/mootools/ejemplo1.html “Enlace en CSSLab a “Mootools Ejemplo 1"” [2]: http://www.csslab.cl/ejemplos/mootools/ejemplo2.html “Enlace para ver “Ejemplo 1” en CSSLab”