Introducción a Mootools 1.2, librería Javascript.

by dorian06

Esta entrada forma parte de un post de webizzima que es una traducción del origian hecho por ConsiderOpen.

Mootools 1.2 es una librería Javascript poderosa designada para facilitar el desarrollo web interactivo de Javascript. Hay muchas cosas que Mootools puede hacer y una de ellas es la creación de extensiones CSS. Por ejemplo, CSS te deja cambiar las propiedades del estado del mouse hover, Javascript te permite reconocer muchos más eventos (click, mouseover, keystrokes, etc.) y Mootools hace de esto algo inimaginablemente fácil de crear.

Para comentarte más, Mootools posee todo tipo de extensiones, las cuales te permitirán no solo cambiar propiedades, también te permitirá “transformar” (morph) propiedades, dándote la habilidad de crear efectos animados increíbles y asombrosos.

Eso es solo un ejemplo de billones, Mootools te permite hacer mucho más. Dentro de los próximos 30 días, vamos a excavar bien profundo dentro de la librería Mootools, explorando todo, desde arrays y funciones hasta FX.Slide y los otros plugines.

Instalación de Mootools 1.2

Primero, descarga e instala la librería Mootools 1.2 Core:

1. Descarga la librería Mootools 1.2 Core
2. Subre la librería Mootools a tu servidor o a to espacio de trabajo
3. Vincula la librería Motools 1.2 en tu etiqueta head:

Agregando la etiqueta Script dentro de tu etiqueta Head

Ahora que estás llamando a Mootools dentro de tu página, necesitas un espacio donde escribir el código. Para ello existen dos opciones:

1. Establece el código entre etiquetas script en el head de tu página:

2. Crea un archivo JavaScript externo y vinculízalo dentro de tu etiqueta head:

A partir de aquí puedes usar ambos métodos. Frecuentemente llamaré las funciones dentro del evento domready dentro de las etiquetas <script>, pero las crearé en un archivo JavaScript externo.

Ponlo en el domready

Las funciones de Mootools deben ser llamadas cuando se cumpla el evento domready.

window.addEvent(‘domready’, function() {
exampleFunction();
});

Ponlo en una función

Puedes construir tu función fuera del domready y posteriormente llamarla.

var exampleFunction = function() {
alert(‘hello’)
};
window.addEvent(‘domready’, function() {
exampleFunction();
});

Descripción de la librería

Para este tutorial, vamos a efectuar una mirada profunda a los componentes de la arquitectura de la librería e ir hacia algunas de las funcionalidades básicas.
Core

Core contiene funciones comunes dentro de la librería Mootools y se encarga de ejecutar tareas comunes así como alimentar muchas funcionalidades pre-existentes (más después). Lo siguiente se hizo como un ejemplo de algunas capacidades de Mootools y no pretende reemplazar la documentación oficial.

* Chequea por un valor (retorna un false si no encuentra un valor o si lo que encuentra es un 0) – $chk(value);
* Retorna un entero aleatorio entre dos valores – $random(min, max);
* Te deja detectar fácilmente navegadores, motores de navegación y capacidades de navegación

segui leyendo este tutorial y el resto de los dias desde el post original

compartilo
  • Twitter
  • Facebook
  • LinkedIn
  • del.icio.us
  • Digg
  • Tumblr
  • Google Bookmarks
  • Print this article!
  • Turn this article into a PDF!
  • RSS