You are on page 1of 75

Tu mejor ayuda para aprender a hacer webs

www.desarrolloweb.com

Manual de Mootools

Autores del manual
Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez
Director de DesarrolloWeb.com
http://www.desarrolloweb.com
(35 capítulos)

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 1
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Mootools
Después de trabajar durante unos meses con Mootools, ha llegado el momento de escribir
algún artículo sobre este interesante sistema. No puedo decir que sea un experto, ni mucho
menos, pero creo que podré ayudar a las personas que quieren dar sus primeros pasos usando
Mootools en sus páginas web. Lo primero sería decir que Mootools es un framework Javascript,
que sirve para crear fácilmente código Javascript independiente del navegador, de una forma
rápida y directa.

Dicho de otra manera, que tal vez sea más fácil de entender, Mootools es un conjunto de
librerías, también llamado API, que proveen clases de programación orientada a objetos en
Javascript, para realizar una amplia gama de funcionalidades en páginas web, como trabajo
con capas, efectos diversos, Ajax y mucho más. Con Mootools podemos programar todo tipo
de scripts en el cliente rápidamente y sin preocuparnos de las distintas particularidades de
cada navegador. Mootools está especialmente indicado para programar scripts complejos, que
nos costaría mucho más trabajo de realizar si partiésemos de cero.

Existen diversos framework en Javascript, la mayoría ni he probado todavía. Podemos ver unos
cuantos de ellos en el artículo Listado de distintos Framework Javascript. Mootools es una
opción interesante, bastante difundida y que tiene una serie de ventajas como:
• Ligero: el framework no pesa demasiado en Kb y no el procesamiento carga poco al
navegador.
• Modular: mootools se compone de diversos módulos y podemos seleccionar los que
vamos a utilizar para incorporarlos en nuestras páginas web, dejando los otros para que
no ocupen tiempo de descarga ni procesamiento.
• Libre de errores: podemos confiar en el sistema porque Mootools las herramientas de
Mootools funcionan perfectamente, sin emitir errores en tiempo de ejecución.
• Soportado por una amplia comunidad: existen muchos desarrolladores que lo utilizan
con éxito y han creado una serie de componentes adicionales ya listos para usar en
nuestras páginas web, como calendarios, editores de texto, etc.
Pero también hay cosas que no me han gustado tanto, como la documentación, que resulta un
poco escasa. Realmente tiene una buena documentación, pero la encuentro un poco escueta y
falta de explicaciones o ejemplos. También he de decir que me resultó bastante difícil dar los
primeros pasos utilizando el framework, es decir, la curva de aprendizaje de Mootools en el
inicio resulta bastante complicada y los ejemplos que encontraba en un principio demasiado
complejos para poder entender qué y cómo estaban trabajando. No obstante, después de
realizar con éxito unas cuantas pruebas, ya pude empezar a crear mis propios scripts
personales. Uno de mis objetivos es preparar una buena serie de ejemplos sencillos para que
los nuevos desarrolladores de Mootools puedan comenzar con mayor facilidad que yo en el
trabajo con el framework.

Para acabar esta introducción hay que decir que Mootools es gratuito y de código abierto, con
licencia MIT, que permite usarlo y modificarlo en cualquier caso de uso.

En los artículos siguientes voy a ilustrar el uso de Mootools, con el la versión framework 1.11,
que es la que estaba en producción en el momento de escribir este texto.

Dejo la URL de Mootools para consultas y descargas del Framework. http://mootools.net

Artículo por Miguel Angel Alvarez

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 2
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Descarga de Mootools
La descarga de Mootools es sencilla, pero incorpora varias opciones que podemos resumir en
este artículo. Tenemos dos cosas que elegir cuando hacemos el download de las librerías:

Módulos que queremos descargar:

El código de Mootools está repartido en varios módulos o librerías, pero nuestras páginas web
puede que no realicen todas las acciones que permiten los distintos módulos. Es decir, puede
que descarguemos sólo Mootools para realizar efectos con capas, o para invocar fácilmente
procesos Ajax. Así que, en la hora de descargar el framework, podemos elegir qué módulos
traernos y así liberar a los usuarios que visitan nuestras webs de tiempo de descarga de las
librerías y tiempo de interpretación por parte del navgador.

Los módulos tienen algunas dependencias unos con otros. Pero la herramienta para descarga
es "inteligente" y si seleccionamos un módulo que necesita de otro, lo marca automáticamente
para la descarga en el paquete que necesitamos. El módulo Core es necesario para cualquier
paquete de librerías Mootools, por lo que siempre se debe descargar y aparece marcado desde
el principio. Luego, si por ejemplo marcamos las librerías Element.Event, se marcarán
adicionalmente otra serie de librerías que son necesarias para que esta funcione, como Class,
Array, Element, etc.

Tipo de compresión de la descarga:

Además también tenemos que seleccionar el tipo de compresión. Esto es para hacer la
descarga de un archivo con las librerías con unas características específicas que lo hacen pesar
más o menos. Todos los archivos son de texto, con el código listo para incluir en nuestras
páginas, pero en unos están los comentarios al código, otros no tienen saltos de línea o
espacios, en otros incluso de han cambiado los nombres de variables internas por otros más
cortos, etc.

Lo que está claro que cuanta mayor compresión, menos ocupará el archivo y menor será por
tanto el tiempo de descarga en nuestra web. Pero cuando estamos desarrollando igual nos
conviene una versión con todo el código y la documentación en el propio archivo, para que
podamos guiarnos con ella para depurar cualquier fallo.

En esta serie de artículos he utilizado la versión de Mootools 1.11, que era la que estaba para
descarga en el momento de hacer este texto. Voy a colocar aquí los archivos para descarga,
para que cualquiera que quiera seguir estas explicaciones pueda utilizar las mismas versiones
de la librería que usé yo en los ejemplos.

mootools-release-1.11-completo-comprimido.js.txt
El framework completo y comprimido 43Kb

mootools-release-1.11-completo-documentado-comentarios.js.txt
Mootools completo, documentado y con comentarios 180Kb

mootools-1.11-parcial-comprimido.js.txt
El framework con las funcionalidades suficientes para hacer los primeros ejemplos, comprimido

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 3
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

js. Las librerías de Element. Además. contienen varios métodos que podemos invocar sobre los objetos element. simplemente para que veamos la facilidad con la que se puede utilizar Mootools para realizar código Javascript compatible con todos los navegadores más habituales. Por eso tiene sentido hacer un ejemplo inicial muy simple para iniciarse. No obstante. En este ejemplo sólo tenemos que conocer unas cuantas cosas de Mootools. hay que decir que para poder utilizar Mootools debemos tener antes un conocimiento medio o avanzado de Javascript. Tu mejor ayuda para aprender a hacer webs www. para realizar cosas con ellos. Mootools puede resultar difícil para las personas que nunca han trabajado con él o con otro framework Javascript. El valor 0 es transparente y el valor 1 es opaco del todo. <script src="mootools -1.js" type="text/javascript"></script> La función $() En Mootols utilizamos la function $() para recibir un objeto con un elemento de la página.11.com tenemos varios manuales de Javascript que nos van a servir para obtener las bases sobre el lenguaje y hasta conocimientos avanzados. . porque realmente lo que estamos haciendo en estos ejemplos es programar en Javascript funcionalidades para páginas web.com 20kb No obstante. hay que incluir el código Javascript de las librerías de Mootools.desarrolloweb. En DesarrolloWeb. No reproducir sin autorización. desde la propia página de descargas podremos seleccionar los módulos que realmente vamos a necesitar en nuestras aplicaciones. Manual de Mootools: http://www. esto se hace incluyendo el archivo externo de código Javascript con las librerías del framework. Nosotros vamos a utilizar dos métodos de Element: Método setOpacity() Es para alterar la transparencia de un elemento. que vendrá más completo y con mayor depuración del código. analizarlos o alterar su estado. será necesario que comience por el principio del manual sobre Mootools. Para empezar. Los podemos ver en la sección de Javascipt a fondo. Además. Este ejemplo realmente no sirve para nada. Artículo por Miguel Angel Alvarez Primer ejemplo con Mootools Como había dicho en la introducción de este manual.com tienen el copyright de sus autores. que se ha indicado con el atributo id de la etiqueta HTML de lo que queremos recibir. para quien no sepa qué es Mootools y donde descargarlo.desarrolloweb. Recibe un valor entre 0 y 1 para definir cuanto de opaco o transparente que es un elemento. dentro del paquete llamado NATIVE.html 4 © Los manuales de DesarrolloWeb.com/manuales/manual-mootools. que hemos descargado de la página de Mootools. $() recibe como parámetro el identificador del elemento. hay que remarcar que para nuestros proyectos será mejor descargar Mootools en las versiones más actuales.

creada con un <div> que tiene el atributo id para especificar su nombre: id="texto_presentacion". cargado = true."> <input type="button" value="Opacidad 50%" onclick="$('texto_presentacion'). '1px solid #ff0000'). También debemos fijarnos que tenemos una capa.desarrolloweb.setStyle('width'. esto es un texto para hacer una prueba con Mootools.setStyle('border'.setOpacity(.desarrolloweb.</div> <br> <form> <input type="button" value="Opacidad 0%" onclick="$('texto_presentacion')."> <br> <br> <input type="button" value="Tamaño 200px" onclick="$('texto_presentacion'). '50%')."> <input type="button" value="Opacidad 25%" onclick="$('texto_presentacion'). Tu mejor ayuda para aprender a hacer webs www.charset=ISO-8859-1"> <title>ejemplo básico con mootools</title> <script src="mootools-comprimido-1. Primero voy a poner un enlace al ejemplo en marcha para que se vea lo que hemos hecho. La primera serie de botones alteran la opacidad del elemento. }). con un archivo externo Javascript. .setOpacity(1). $('texto_presentacion').html 5 © Los manuales de DesarrolloWeb. capa_transicion = null."> <input type="button" value="Opacidad 75%" onclick="$('texto_presentacion').com/manuales/manual-mootools. cargado con la etiqueta <script> . function(){ opaco_actual = 0."> <input type="button" value="Pon borde" onclick="$('texto_presentacion').75). Simplemente estoy alterando propiedades de el DIV donde está este texto.setOpacity(0)."> </form> </body> </html> Veremos que hemos incluido las librerías Mootools en el head de la página.11.com tienen el copyright de sus autores. '200px').setStyle('width'. Con estos datos. Luego."> <input type="button" value="Opacidad 100%" onclick="$('texto_presentacion').setOpacity(. No reproducir sin autorización.addEvent('domready'.25).5). el primero el nombre del estilo y el segundo el valor del estilo. Recibe dos parámetros. ya conocemos todo lo que debemos saber de Mootools para entender el siguiente ejemplo."> <input type="button" value="Tamaño 50%" onclick="$('texto_presentacion'). Manual de Mootools: http://www.js" type="text/javascript"></script> <script> window. tenemos un formulario con una serie de botones. El código del ejemplo es el siguiente: <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html.setOpacity(0).setOpacity(. cada uno con un código Javascript que se ejecuta cuando el usuario hace clic sobre el botón.com Método setStyle() Para alterar cualquier estilo CSS del elemento. </script> </head> <body> <div id="texto_presentacion">Hola.

'200px'). vamos a ver un segundo ejemplo de gran sencillez para hacer un scroll en una capa por Javascript. con un trabajo casi nulo. con lo que la capa texto_presentacion tendrá un ancho de 200 pixel. Luego sobre ese objeto invocamos el método setOpacity() pasando por parámetro el valor de opacidad.html 6 © Los manuales de DesarrolloWeb. por lo que será necesario leer los anteriores capítulos. Lo primero aclarar que este artículo ya da por entendidos algunos conceptos que hemos visto en el manual de Mootools.js. Tu mejor ayuda para aprender a hacer webs www. No reproducir sin autorización. Recibe dos parámetros. Espero que el ejemplo haya sido suficientemente sencillo y claro para entender un poco la facilidad con la que podemos realizar acciones. $('texto_presentacion'). Podemos probarlo en distintos browsers para ver que funciona perfectamente.setStyle('width'.Dimensions. Con esto aleramos el atributo CSS border.setStyle('width'. $('texto_presentacion'). .desarrolloweb. El presente ejemplo utiliza el módulo llamado Element. es decir. hemos conseguido un código cross-browser.desarrolloweb.com/manuales/manual-mootools. y le pasamos un nuevo valor que indica que tenga un borde sólido de 1 pixel y con color rojo. que tiene dos métodos que nos van a servir para hacer el desplazamiento: Método scrollTo() Sirve para desplazar un elemento a una nueva posición. las Manual de Mootools: http://www. más o menos complejas.setStyle('border'. $('texto_presentacion').com Con $('texto_presentacion') recibimos un objeto que es el elemento que tenía el id="texto_presentacion". '50%'). compatible con todos los navegadores. Este sistema de scroll o desplazamiento sería muy complejo de hacer sin la ayuda del framework como Mootools. en la página web.com tienen el copyright de sus autores. '1px solid #ff0000'). Luego tenemos otra serie de botones que alteran algunos atributos de estilo del elemento. la mitad del espacio disponible donde está el elemento. Esto altera el atributo CSS width y lo cambia por el valor 200px. Todo sin preocuparnos de las particularidades de cada navegador. Dejo de nuevo el enlace para ver el ejemplo en marcha. Con eso se cambia la transparencia de la capa. Ahora voy a poner el enlace al ejemplo en marcha para que podamos verlo en funcionamiento antes de pasar a visualizar el código. Artículo por Miguel Angel Alvarez Segundo ejemplo con Mootools Para continuar el manual de Mootools. Nosotros lo vamos a hacer con una simple ejecución de una sentencia Javascript. es decir. Con esto último cambiamos de nuevo el atributo width para poner una anchura de 50%.

.js" type="text/javascript"></script> </head> <body> <div id="texto_scroll" style="overflow: auto. El código de este sencillo ejemplo es el siguiente: <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html.scroll. que se llama scroll y a su vez. Luego hemos creado una capa con un texto y una serie de estilos CSS para que tenga un tamaño definido. Me he ayudado de la documentación y de unos ejemplos que he encontrado en la página: http://clientside. Método getSize() Sirve para obtener las dimensiones de un elemento.desarrolloweb.scroll.">Abajo</a> // <a href="javascript:capa_desplazar. Devuelve un objeto con una serie de propiedades que son las informaciones sobre tamaño y desplazamiento del elemento.html 7 © Los manuales de DesarrolloWeb. height: 70px.com/wiki/mootorial/ <br> Ahora tendría que intentar ir poco a poco para conocer todo el funcionamiento en detalle.scroll. así como la posición actual del scroll o desplazamiento que se haya realizado sobre el mismo. Entre las propiedades tiene la que nos interesa. <br> La verdad es que este framework de javscript funciona muy bien y permite un desarrollo sorprendentemente rápido. primero hemos incluido dentro del head de la página el script con el framework de Mootools. capa_desplazar.desarrolloweb."> <div style="width:100%.com/manuales/manual-mootools.getSize(). </div> </div> <br> <script> capa_desplazar = $('texto_scroll').getSize(). </script> <a href="javascript:capa_desplazar. capa_desplazar. con la etiqueta <script> . width: 400px.scroll. Por ejemplo: mielemento. Tu mejor ayuda para aprender a hacer webs www. y unas barras de desplazamiento para hacer el scroll.com coordenadas X e Y a las que queremos desplazar el scroll del elemento."> Hola.charset=ISO-8859-1"> <title>Ejemplo 2 con Mootools</title> <script src="mootools-comprimido-1. scroll tiene dos propiedades que son las X e Y del scroll que se haya realizado.x Nos devolvería los píxel que se haya desplazado el elemento mielemento en la horizontal.getSize(). mielemento.y Nos devolvería el desplazamiento vertical que se haya realizado sobre el elemento mielemento.y .20).com tienen el copyright de sus autores.cnet. A continuación hay un script que crea una variable global a la página que contiene la capa que Manual de Mootools: http://www.11.y + 20). No reproducir sin autorización. <br> En pocos pasos y con absolutamente ningún conocimiento del Framework he conseguido hacer esta página.getSize(). que no permita ver el contenido completo del texto.">Arriba</a> </body> </html> Como vemos.scrollTo(0. esto es un texto que voy a poner de prueba para hacer un scroll rápidamente con Mootools.scrollTo(0.

Tu mejor ayuda para aprender a hacer webs www. Y la sentencia es: capa_desplazar. se tiene que ejecutar el método scrollTo().y + 20).js para obtener la descripción completa de los métodos que hemos utilizado.scrollTo(0.scrollTo(0. Artículo por Miguel Angel Alvarez Componentes Mootools Mootools.desarrolloweb. del módulo Element.y. este segundo un poco más práctico.getSize(). Espero que se haya entendido el ejemplo. <script> capa_desplazar = $('texto_scroll'). <a href="javascript:capa_desplazar. Hasta aquí en este manual hemos visto un par de ejemplos muy simples sobre Mootools. <a href="javascript:capa_desplazar. capa_desplazar.20 píxel.20).scrollTo(0. </script> Luego hay un par de enlaces que son los que. Manual de Mootools: http://www. . porque no queremos desplazarlo horizontalmente.scroll. estamos indicando que se tiene que ejecutar esa sentencia javascript al pulsar el link. aparte de ofrecer un nutrido grupo de librerías para realizar efectos interesantes en Javascript.scroll.com/manuales/manual-mootools. Luego como desplazamiento vertical ponemos el desplazamiento vertical del elemento + 20 píxel. Así que podemos beneficiarnos del esfuerzo de desarrollo de otras personas para realizar páginas con efectos impactantes rápidamente. Y todo compatible con los navegadores más habituales.html 8 © Los manuales de DesarrolloWeb. capa_desplazar. tal como habíamos explicado antes en este artículo. El desplazamiento vertical actual del elemento lo sacamos con capa_desplazar.com queremos desplazar.scroll.com tienen el copyright de sus autores. pulsándolos. capa_desplazar. No reproducir sin autorización. desplazará automáticamente el texto arriba o abajo.getSize(). Este método recibe como primer parámetro 0. El enlace de para desplazar el scroll hacia arriba sería muy similar al que acabamos de ver.">Arriba</a> La única diferencia es que ahora hacemos un scrollTo() a cero en la horizontal y a el scroll actual . tiene una gentil comunidad de desarrolladores que crean componentes que se pueden utilizar en las páginas web que estemos realizando. capa_desplazar.scroll.y + 20).y .getSize(). Eso indica que en la variable de la capa que habíamos creado antes.desarrolloweb.getSize().">Abajo</a> Con "javascript:" metido en un href de un enlace. Dejo de nuevo el enlace al ejemplo en funcionamiento. Podemos ir a la documentación de Mootools.Dimensions. Pero el objetivo no es sino expresar por medio de un código la sencillez con la que se programa con Mootools para conseguir efectos que de otra manera nos hubiera costado mucho trabajo programar.

digitalia. el fondo se queda como grisaceo.com tienen el copyright de sus autores. que permite escoger una fecha determinada visualmente. El componente es tan espectacular como lo podría ser una animación en Flash.1 no funciona.desarrolloweb. sólo a comentarlos por encima y mostrar ejemplos.com/manuales/manual-mootools. Nosotros tendríamos un campo fecha que al pulsarlo se mostraría un calendario del mes y año actuales. Tal vez el más impactante y con mayores opciones de configuración sea el SmoothGallery.com donde vamos a ir colocando distintos scripts.net/ Calendario o seleccionador de fecha Otro componente muy útil es un calendario para seleccionar fechas. plugins y componentes realizados con mootools: Scripts Mootools. en segundo plano. se ofrece un componente muy interesante en: MooTabs. Las imágenes se muestran con una especie de ventana emergente dinámica. Tu mejor ayuda para aprender a hacer webs www. Podemos conocer más del componente y verlo en marcha en su propia página web: http://www.html 9 © Los manuales de DesarrolloWeb. Además. Podemos movernos por el calendario cambiando el mes y el año y luego pulsando cualquier día del calendario se seleccionaría esa fecha determinada. Referencia: Quien desee aprender Mootools. Tenemos una sección de DesarrolloWeb. Podemos ver la página del componente donde tiene diversos demo con distintas funcionalidades y configuraciones: http://smoothgallery.com. con la particularidad que sólo utiliza Javascript para su puesta en marcha (y HTML con CSS. La instalación y configuración de las pestañas es sencilla. por supuesto).11. Este componente permite diversos tipos de pestañas con variados efectos y transiciones e incluso la obtención por Ajax de los contenidos de las diversas pestañas. pero encontré un problema que identifico como incompatibilidad entre las versiones mootools 1. Uno de los calendarios más atractivos visualmente que he visto es el que ofrecen en esta Manual de Mootools: http://www. No reproducir sin autorización.1 y la 1. Interfaz de pestañas Si queremos utilizar en una página web una interfaz de pestañas.desarrolloweb. porque si no utilizas la versión 1. .be/software/slimbox Pase de diapositivas Hay varios componentes de pase de diapositivas o efectos visuales sobre imágenes que van cambiando. que se ajusta a las dimensiones de la imagen. Popup DHTML Slimbox Con este componente podemos mostrar imágenes cuando un usuario hace un clic en una miniatura.jondesign. recomendamos la lectura del Manual de Mootools que estamos publicando en DesarrolloWeb.com No vamos por ahora a explicar cómo poner en marcha estos componentes.

Por ejemplo. • Una simple declaración de estilos CSS te puede tirar al traste todas las pruebas y hacerte perder horas de tu precioso tiempo. aunque por ahora este artículo simplemente quería mostrar un poco las cosas avanzadas que se pueden realizar con Mootools. Si nuestra página es larga y contiene diversas imágenes.desarrolloweb. . porque los componentes utilizaban una versión distinta de Mootools que la que estamos utilizando nosotros • Algunas veces la documentación es escasa. Cuando tenemos el DOM Ready (DOM listo) Bueno. Artículo por Miguel Angel Alvarez Evento domready de Mootools El framework Javascript Mootools define un evento que vamos a utilizar infinidad de veces a lo largo del Manual de Mootools. posicionarlos. pues aunque muchos de ellos funcionan de manera modular. Algunos problemas que he encontrado yo: • A veces existen problemas de versiones. podríamos desear ejecutar acciones Javascript para realizar una carga de datos por Ajax o para generar contenidos dinámicos en la página.com/aeron/calendar/ Conclusión Como se puede ver.com tienen el copyright de sus autores. Esto es lo que veo yo que tienen algunos de los componentes con los que he trabajado. Lo que está claro por mi experiencia hasta estos momentos es que se necesitan bastantes conocimientos de Javascript.desarrolloweb. puede tardar un buen tiempo hasta que todo ha terminado de cargarse. para insertarlos en la página.com/manuales/manual-mootools. Espero que este manual nos ayude a solucionar más rápidamente cualquier eventualidad. sabemos que una página tiene un código HTML y además una serie de elementos externos.com iremos publicando los componentes útiles que encontremos con Mootools. para ejecutar acciones cuando el DOM ha sido cargado por completo y está listo para poder hacer cualquier tipo de acciones con él. etc. insertando elementos como una barra de navegación generada Manual de Mootools: http://www. Tu mejor ayuda para aprender a hacer webs www. que se ejecutan mediante Javascript. En las aplicaciones web que tienen componentes del lado del cliente. están compuestos de varios archivos con distintos códigos que tenemos que saber incluir y utilizar en nuestras páginas.html 10 © Los manuales de DesarrolloWeb. scripts. • Si da un problema en un navegador es casi imposible revisar el código para tratar de arreglarlo. HTML y CSS para poner en marcha los componentes. declaraciones de estilos u otros elementos que tengan cierto peso. Este método se puede asociar al objeto window. No reproducir sin autorización.electricprism. Una vez más recuerdo que en la sección de Scripts Mootools de DesarrolloWeb. que se cargan aparte del propio código de la página. las interfaces y funcionalidades que se pueden hacer con Mootools son tantas como la imaginación nos permita concebir. muchas veces se tienen que crear funciones de inicialización de esos componentes.com dirección: http://www.

Pero este evento se ejecuta cuando TODOS los elementos de la página han terminado de cargarse. puede que onload tarde demasiado en ejecutarse y hasta entonces no se mostrarían los elementos que se desean insertar dinámicamente.js Mootools Las librerías de Mootools están divididas en varios paquetes. es decir.js. Cómo utilizar el evento domready de mootools Espero que las explicaciones anteriores se hayan entendido.com tienen el copyright de sus autores. si nuestra página tiene. banners y otro tipo de recursos externos. Eso es todo. En resumen. la página podría haber estado lista para ejecutar acciones Javascript que alteren el DOM. Para vuestra referencia. para ejecutar acciones cuando el DOM está listo en Mootools se hace esto: window. cuando el DOM está listo. No reproducir sin autorización. los cuales podemos necesitar o no para determinados proyectos. por ejemplo. el DOM estará listo para realiza acciones. Esto es. sobretodo si la página tiene imágenes o elementos externos que ocupen mucho espacio en bytes. deben ser incluidos cuando el navegador está preparado para recibirlos. Pero mucho antes que finalice esa carga de elementos externos. Así que. Simplemente con este código podemos incluir todas las acciones que necesitemos para ejecutarlas sólo en el momento que el DOM esté listo. aunque se continúen descargando imágenes o elementos externos.addEvent('domready'. En concreto. la propia página y todo lo que tenga. function() { //aquí las acciones que quieras realizar cuando el DOM esté listo alert ("Ahora el DOM está listo"). la declaración del evento domready se encuentra dentro del paquete Utilities/DomReady. es decir.com automáticamente.com/manuales/manual-mootools. un calendario o lo que podamos necesitar. que contiene funciones que forman parte del núcleo de mootools. }). Debe quedar claro que el DOM puede estar listo mucho antes que se terminen de cargar todos los elementos de la página. En este caso vamos a explicar el paquete core. Tu mejor ayuda para aprender a hacer webs www. cuando el DOM (la jerarquía de objetos del navegador a disposición de Javascript para alterar los elementos de la página) está cargado por completo en el navegador y listo para ser alterado. Quien conozca las bases de Javascript sabrá que existe un evento "onload". . domready es un evento que se ejecuta cuando la página está lista para realizar acciones que afecten al DOM.desarrolloweb. Artículo por Miguel Angel Alvarez Core. Aquí puede verse un ejemplo de uso del evento domready de mootools. cuando una página termina de cargarse y procesarse.desarrolloweb. Entonces. Importante: El evento domready sólo se puede utilizar con el objeto window del navegador. muchas imágenes muy pesadas. en teoría. Todos estos componentes que se deben insertar dinámicamente en una página. Manual de Mootools: http://www.html 11 © Los manuales de DesarrolloWeb. como imágenes. que sirve para ejecutar acciones cuando se termina la carga de la página.

La función devuelve true si el parámetro que se le pasa no es null o undefined. el tipo de dato que contiene la variable. $type Esta función se utiliza para saber el tipo de una variable. un boleano. que se utilizan en todo el framework y que nosotros también podemos utilizar para crear aplicaciones Javascript. es decir. Por ejemplo: cadena = "sol". estas funciones nos van a servir para ir practicando con aspectos básicos de mootools. al alcance de cualquiera que conozca Javascript de antemano. Veamos un par de ejemplos: $defined(null). por ejemplo. $type(numero). Además. $defined(mivariable). $type(x). Devolvería false. Se puede utilizar de manera independiente.com Esta librería contiene una serie de funciones sencillas. $defined Esta función sirve para saber si existe una variable o un objeto. etc. pero no tiene mucho sentido porque no ofrecen mucha utilidad por si solas. mivariable = 1. El core de mootools es requerido por todas las otras librerías del framework. Referencias: Podemos aprender Javascript en nuestra sección Javascript a fondo. numero = 23. Podemos ver un ejemplo de funcionamiento de $define() en una página aparte. aunque de momento no las vamos a ver todas. Devuelve "number". Devolvería true. El core de mootools contiene diversas funciones. $type puede devolver los siguientes valores: Manual de Mootools: http://www. dejamos el enlace del manual donde se engloba este artículo: programación con el framework mootools. No reproducir sin autorización.2. Devuelve "Array". porque para poder explicarlas necesitaríamos explicar antes algo de programación orientada a objetos.desarrolloweb. si es un objeto. $type(cadena). un número.com/manuales/manual-mootools.com tienen el copyright de sus autores. var x = new Array(1. Se le pasa por parámetro una variable y devuelve un string que identifica el tipo de la misma. Tu mejor ayuda para aprender a hacer webs www. Devuelve "string".3).html 12 © Los manuales de DesarrolloWeb.desarrolloweb. de propósito general. No obstante. .

$chk Hace un chequeo de un parámetro y devuelve un boleano que puede ser: Verdadero: en caso que el valor recibido por $chk() exista. o si el parámetro es undefined o null. diría que no existe el valor. En este caso se ejecutaría el alert de "vale cero o... Tu mejor ayuda para aprender a hacer webs www. En el siguiente artículo seguimos viendo funciones de core. Esta función es útil para permitir valores iguales a cero en el valor a evaluar su existencia.js. $type devuelve false (valor boleano) Podemos ver un ejemplo de funcionamiento de $type() en una página aparte. else alert ("no existe el valor").js de Mootools (parte II) En el artículo anterior del manual de Mootools habíamos presentado las primeras explicaciones sobre las funciones de la librería core. Ahora vamos a seguir explicando algunas de las funciones que forman parte del core de mootools. que son un valor mínimo y uno máximo. No reproducir sin autorización.".desarrolloweb. pudiendo tener el valor cero.js de mootools. creada como una nueva clase o extendiendo otra) 'collection' si el parámetro es una colección htmlelements 'array' si el parámetro es un array Para todos los demás casos. Recibe dos parámetros. por ese orden.com/manuales/manual-mootools.desarrolloweb.com tienen el copyright de sus autores. $random Esta función sirve para obtener números aleatorios de una manera sencilla. if ($chk(mivariable)) alert ("vale cero o cualquier otro valor"). Artículo por Miguel Angel Alvarez Core. Ejemplo: var mivariable=0. Falso: en el caso que el valor recibido por parámetro no exista. y devuelve un número Manual de Mootools: http://www.com 'element' si el parámetro es un elemento DOM (objetos del navegador) 'textnode' si el parámetro es un nodo de texto del DOM 'whitespace' si el parámetro es un nodo de espacio en blanco del DOM 'arguments' si el parámetro es un objeto argumento 'object' si el parámetro es un objeto 'string' si el parámetro es una cadena de caracteres 'number'si el parámetro es un número 'boolean' si el parámetro es una variable boleana (true/false) 'function' si el parámetro es una función 'regexp' si el parámetro es una expresión regular 'class' si el parámetro es una clase (de programación orientada a objetos.html 13 © Los manuales de DesarrolloWeb. Si por ejemplo mivariable hubiése sido null. .

si el navegador que está ejecutando la página es Internet Explorer. temporizador = setTimeout('alert("hola")'.desarrolloweb.gecko){ Manual de Mootools: http://www. Por ejemplo. Con estas dos sentencias el resultado será que el navegador no presentará ningún resultado.com/manuales/manual-mootools. i++){ aleatorio = $random(3. Podemos verlo en marcha en una página aparte.write ("Estás en Internet Explorer").html 14 © Los manuales de DesarrolloWeb. } Podemos ver este script en marcha en una página aparte. Estas nuevas propiedades sirven para realizar detección del navegador que está ejecutando los scripts.js implementan unas nuevas propiedades en la clase Window de la jerarquía de objetos del navegador. Por ejemplo: $random(3. $time Devuelve el timestamp actual. Por ejemplo. las librerías core. se crea la propiedad window.com aleatorio entre esos dos parámetros. $clear Esta función sirve para eliminar un setTimeout o un interval. 6 ó 7. document. temporizador = $clear(temporizador).write ("<br>"). No reproducir sin autorización. Si el navegador es Firefox. i<100. .write (aleatorio). $time() Podemos ver este script en marcha en una página aparte. Vamos a verlo en un ejemplo en el que creamos un setTimeout y luego lo eliminamos. Un setTimeout sirve para ejecutar instrucciones Javascript con un retardo y con $clear podemos liberar ejecuciones que se hayan planificado para un futuro. Por ejemplo este script imprimiría por pantalla 100 números aleatorios entre el 3 y el 7.desarrolloweb. Clase Window Además.7). Devuelve un número aleatorio del 3 al 7. 2000). incluyéndolos. se pueden utilizar las propiedades de la siguiente manera: if (window. } if (window. Se llama sin pasar ningún parámetro.ie y se le asigna el valor true. se crea con valor true la propiedad window. document. 5. Podría ser 3. Un número entero con los milisegundos que han pasado desde 1970.com tienen el copyright de sus autores. 4.gecko. for (i=0.ie){ document. Tu mejor ayuda para aprender a hacer webs www.7).

De momento. Con ello hacemos una nueva clase a partir de Class.desarrolloweb. Provee una serie de utilidades para crear clases de una manera más elaborada que si programásemos sólo con Javascript. Dentro de lo que es la programación orientada a objetos ese artículo sólo comenta una pequeña parte. A la vez. Mootools dispone una sintaxis particular para la realización de clases. También nos detendremos en la utilización de las librerías core. estamos programando en sintaxis Mootools en lugar de sintaxis Javascript. ya que cuando programamos utilizando Mootools en realidad y por decirlo de alguna manera.js en casos prácticos.write ("Estás en Opera"). } Podemos ver este script en marcha en una página aparte. La clase Class.com tienen el copyright de sus autores. Dentro colocamos el contenido de la clase. Clases en Mootools Cuando creamos una clase en Mootools tenemos que hacerlo creando un nuevo objeto de la clase Class. tiene la arquitectura básica para crear clases de programación orientada a objetos en Mootools.com document. Vamos a dejar para más adelante otras características del core. que es un punto interesante para detallar con calma. Todo esto lo tenemos que conocer. también convendrá haber seguido hasta este punto nuestro manual de Mootools. hay que conocer al menos las bases de la programación orientada a objetos. No reproducir sin autorización. Tu mejor ayuda para aprender a hacer webs www. porque tenemos que explicar previamente algunos conceptos sobre programación orientada a objetos. Por supuesto. pero aun así nos dará algunas ideas y aclaraciones que ayudarán a entender este manual. pero sí que puede ser delicado al menos al principio.js de mootools.com/manuales/manual-mootools. Artículo por Miguel Angel Alvarez Clases en Mootools Mootools es un framework Javascript para realizar programas o scripts con programación orientada a objetos. tanto sus propiedades como sus Manual de Mootools: http://www. . Lo cierto es que la programación orientada a objetos no es difícil. Una clase se crea de esta manera: var NombreClase = new Class({ //contenido de la clase (propiedades y métodos) }). para seguir estas explicaciones. Para ello recomendamos leer la pequeña introducción a programación orientada a objetos que hemos publicado en DesarrolloWeb. Cualquier persona con un poco de experiencia en programación orientada a objetos verá que se crea como si instaciásemos un objeto de la clase Class.html 15 © Los manuales de DesarrolloWeb.write ("Estás en Mozilla/Gecko").com. como por ejemplo la detección del navegador.desarrolloweb. } if (window.opera){ document. que permite escribir código más útil con menos líneas.

metodo1 es una función que simplemente muestra un mensaje de alerta. En el código anterior se ha creado una nueva clase llamada MiClaseMetodos. Definir métodos de clases en Mootools Los metodos o funcionalidades asociadas a las clases. siempre podemos colocar null. Utilizamos esta sintaxis para la definición de métodos: var MiClaseMetodos = new Class ({ metodo1: function(){ alert ("estoy ejecutando el método"). Manual de Mootools: http://www. si no deseamos asignar ningún valor a la propiedad. menos la última que no debemos ponerla por no tener ninguna otra propiedad detrás.com/manuales/manual-mootools. No reproducir sin autorización. Esto se hace entre las llaves. con esta sintaxis: var MiClasePropiedades = new Class ({ propiedad1: 232. como hemos hecho nosotros en la propiedad4. En último caso. propiedad3: true. que tiene dos métodos: metodo1 y metodo2. Definir propiedades de las clases A la hora de definir el contenido de la clase podemos especificar las propiedades que tendrá la clase que estamos definiendo. metodo2 es una función que recibe un parámetro y escribe un mensaje de alerta que muestra el valor de ese parámetro. . propiedad2: "texto". metodo2: function(parametro){ alert ("estoy recibiendo un parámetro = " + parametro). dentro de las llaves que declaran los contenidos de la clase.html 16 © Los manuales de DesarrolloWeb. Es decir. se pueden definir de manera similar a como se definen propiedades. Tu mejor ayuda para aprender a hacer webs www. Hay que fijarse también que el contenido de la clase se escribe entre paréntesis y entre llaves. Cada uno de los dos métodos es una función. igual que ocurría entre cada propiedad. }.com métodos. debemos colocar una coma. Como se puede ver.com tienen el copyright de sus autores. Por otra parte. colocando una coma de separación entre cada una de las propiedades. se ha definido una nueva clase con nombre MiClasePropiedades y con 4 propiedades con distintos valores. cuyo código se ha definido también dentro de la declaración de la clase. Por una parte. Para que no de error de sintaxis estamos obligados a definir los valores de las propiedades. propiedad4: null }). Además. con el nombre del método seguido de la función que va a contener el código del método.desarrolloweb.desarrolloweb. Entre cada método. } }). debemos especificar directamente el valor de las propiedades. Asimismo conviene fijarse que las propiedades van separadas por una coma.

es decir.com tienen el copyright de sus autores. la clase es como una declaración de una forma y el objeto es un caso o elemento concreto que responde a esa forma. seguido del operador punto ". el operador punto. se crearían objetos de la siguiente manera: miObjetoDeOtraClase = new MiClaseMetodos(). invocar a los métodos de los objetos a partir del nombre del objeto.desarrolloweb. Los objetos se crean a partir de una clase. podríamos crear instancias de esta de la siguiente manera: miObjeto = new MiClasePropiedades(). miSegundoObjeto = new MiClasePropiedades(). otroObjeto = new MiClasePropiedades(). Llamar métodos de objetos Podemos acceder a los métodos o mejor dicho. Podemos crear infinitos objetos a partir de una clase. Para la clase que habíamos definido en el ejemplo de los métodos.html 17 © Los manuales de DesarrolloWeb.propiedad1 Esta propiedad es como una variable que contiene un valor que está dentro del objeto y es particular a este. la clase MiClasePropiedades. cada uno sería una instancia de la clase o un ejemplar de esa clase. Manual de Mootools: http://www. el nombre del método que queremos ejecutar y los parétesis (como si llamásemos a una función). miObjeto.com Artículo por Miguel Angel Alvarez Instanciar y trabajar con objetos de clases creadas con Mootools Instanciar objetos es el proceso de generar un ejemplar de una clase. Para la clase que habíamos declarado en el ejemplo de las propiedades. seguido de un signo igual y luego la palabra new seguida del nombre de la clase y unos paréntesis. En este artículo vamos a continuar y desarrollar un poco más los ejemplos que vimos en el artículo anterior del manual de Mootools: Clases en Mootools.desarrolloweb. Con el nombre del objeto (o la variable que va a contener ese objeto que deseamos crear). llamaríamos al primer método de la siguiente manera." y el nombre de la propiedad. Para el ejemplo que vimos a la hora de explicar los métodos en Mootools. . Acceder a propiedades de objetos Para acceder a propiedades de los objetos utilizamos el nombre del objeto. No reproducir sin autorización. Tu mejor ayuda para aprender a hacer webs www.com/manuales/manual-mootools.

com/manuales/manual-mootools. propiedad4: null }).metodo2("valor del parámetro"). hemos conocido lo que son las propiedades y Manual de Mootools: http://www. metodo2: function(parametro){ alert ("estoy recibiendo un parámetro = " + parametro). Hemos creado clases y objetos a partir de ellas.metodo1(). La clase que muestra la creación y uso de propiedades: var MiClasePropiedades = new Class ({ propiedad1: 232. propiedad2: "texto". alert(miObjeto.com tienen el copyright de sus autores. }. si es que el método se declaró para recibir parámetros.desarrolloweb. Dentro de los paréntesis indicamos los parámetros que debe recibir el método. No reproducir sin autorización. Ejemplos de creación de clases con propiedades y métodos Ahora vamos a ver el código Javascript completo de los ejemplos que hemos utilizado para explicar tanto las propiedades y métodos. Veamos en una página aparte este script en funcionamiento.com miObjeto. miObjeto = new MiClaseMetodos().metodo1().propiedad1).desarrolloweb. Ahora veamos la clase que muestra la creación y utilización de métodos con Mootools: var MiClaseMetodos = new Class ({ metodo1: function(){ alert ("estoy ejecutando el método"). miObjeto. } }).metodo2("valor del parámetro").html 18 © Los manuales de DesarrolloWeb. Podemos ver este ejemplo en marcha en el siguiente enlace. miObjeto. . Artículo por Miguel Angel Alvarez Constructores en Mootools En nuestro manual de Mootools ya hemos empezado a conocer cosas sobre el uso de clases. propiedad3: true. miObjeto = new MiClasePropiedades(). Tu mejor ayuda para aprender a hacer webs www. pero por ahora estas notas servirán para ir haciéndose una idea de cómo funciona todo el tema de programación orientada a objetos en Mootools. miObjeto. Más adelante en este manual veremos casos más prácticos de clases y objetos.

Si existe éste. No reproducir sin autorización. todos los objetos de la clase ClaseConstructor. Otro ejemplo de constructor Seguimos las explicaciones con este otro ejemplo de clase realizada con mootools. Qué es un constructor Un constructor en programación orientada a objetos se encarga de resumir la tarea de inicialización de los objetos. Habría que remarcar aquí la utilización de “this”. que en Mootools tienen un método especial de declarase.propiedad1 = 1. }. Por lo tanto. que en líneas generales sirve para referenciar al objeto sobre el que se está invocando el método. Al constructor se le pueden pasar parámetros que se podrán utilizar para inicializar el objeto. Dicho método será una función que puede recibir parámetros. var Vehiculo = new Class({ estado: "Detenido". en el momento de instanciar un objeto a partir de esa clase. En este artículo también veremos la creación de una clase completa. arrancar: function(){ this.html 19 © Los manuales de DesarrolloWeb. se realizará una llamada al constructor para inicializar las propiedades del objeto creado. Dado el constructor que hemos creado.com los métodos. pero todavía nos queda mucho camino para recorrer antes que consigamos dominar las clases en Mootools. Tendrá dos propiedades: estado (“Detenido” o “En marcha”) y color.desarrolloweb. Como hemos dicho.com tienen el copyright de sus autores. en el momento de su creación. Luego. el objeto se ha creado con una propiedad. tendrán el valor de propiedad1 = 1. El nombre de la clase es “Vehiculo” y hemos simplificado e idealizado bastante el funcionamiento de un vehículo cualquiera. Manual de Mootools: http://www. durante el proceso de instanciación. en el constructor se actualiza el valor de la propiedad y se le asigna 1. pero con un nombre fijo: “initialize”. Al definir una clase podemos declarar un constructor. initialize: function(){ this. un constructor se ejecuta cuando se está creando un objeto. con funcionalidades que nos servirán para afianzar los conocimientos adquiridos. Ahora le toca el turno a los constructores. definida en la lista de propiedades con valor null.com/manuales/manual-mootools. Como se puede ver. Además crearemos dos métodos en la clase para poner en marcha o parar el vehículo.desarrolloweb. Veamos un ejemplo de clase con su constructor: var ClaseConstructor = new Class({ propiedad1: null. } }). opcionalmente. Tu mejor ayuda para aprender a hacer webs www. Declaración de un constructor en Mootools Un constructor de una clase Mootools se declara como si fuera un método corriente. . initialize: function(color){ this. configurable por medido del constructor. }.estado = "En marcha". siendo lo más corriente la asignación de valores a las propiedades del objeto. Dentro de la función se podrán realizar diversas acciones. “this” servirá para hacer referencia al objeto que se está construyendo. que tiene un constructor.color = color.

Podríamos crear un objeto de la clase “Vehiculo” de la siguiente manera: var miVehiculo = new Vehiculo("rojo"). por nosotros o por otros programadores. de nombre “estado” y que el valor de la propiedad.color). . Manual de Mootools: http://www. miVehiculo. los atributos y funcionalidades) de otras clases. alert (miVehiculo.estado).html 20 © Los manuales de DesarrolloWeb. alert (miVehiculo.com tienen el copyright de sus autores.color). Veamos algunos usos simples que podríamos dar al objeto creado. si mostramos en una caja de alerta la propiedad. alert (miVehiculo.estado).arrancar(). var miVehiculo = new Vehiculo("rojo").detener(). en el momento de declararla se ha marcado como “Detenido”. Todo esto tiene como ventaja que podremos reutilizar código y hacer cosas más complejas basándonos en trabajos realizados anteriormente. Vemos que la clase “Vehiculo” tiene en principio una propiedad.com detener: function(){ this. No reproducir sin autorización. El color recibido por parámetro se asigna a this. asignada al valor de color definido en el parámetro. } }). llamada “color” al que se le asigna el color recibido en el parámetro. podemos estar seguros que todos los objetos creados tendrán la propiedad “color”. en el que se recibe un parámetro. Con esto vemos que. Por tanto. para mostrar el estado. y para cambiarlo con los métodos arrancar y detener. miVehiculo.estado). Tu mejor ayuda para aprender a hacer webs www.desarrolloweb. de esta manera: var miVehiculo = new Vehiculo("azul"). alert (miVehiculo. también se pueden crear propiedades a medida que se ejecutan los métodos. que es el color del vehículo. Este objeto tendrá como propiedad “color” el valor “rojo”.estado = "Detenido". aparte de definir las propiedades de la clase a la hora de declarar sus componentes. Luego vemos en constructor. Como el constructor siempre se ejecuta al crear el objeto.com/manuales/manual-mootools.desarrolloweb. Por ese método podemos crear clases que heredan las propiedades y métodos (es decir. Artículo por Miguel Angel Alvarez Extends: Extendiendo clases con Mootools Una de las ventajas de la programación orientada a objetos es la creación de clases extendiendo las clases que ya tenemos. Podemos ver el ejemplo en ejecución de esta clase vehículo y su uso en una página aparte. nos aparecería “rojo”: alert (miVehiculo. Luego vemos dos métodos que simplemente actualizan la propiedad “estado”.color. para marcar si el vehículo está en marcha o detenido. Con ello se genera una propiedad nueva en el objeto. Podemos crear otro objeto de la clase “Vehiculo” con color “azul”.

Una es la reutilización de código.2 La versión de Mootools 1. y dentro de la propia clase especificaremos que se desea extender otra clase con la palabra Extends: y el nombre de la clase de la que pretendemos heredar. ni los animales.html 21 © Los manuales de DesarrolloWeb. Debido a que un mamífero es un animal que tiene unas particularidades especiales. Es decir. le asignaríamos unas propiedades y métodos cualesquiera que necesitásemos. pues podríamos hacerlo extendiendo la clase mamífero. con unas explicaciones para aprender a implementarla en Mootools. Tu mejor ayuda para aprender a hacer webs www. Si algún día necesitamos definir la clase perro. Estaríamos haciendo el trabajo dos veces y eso es algo que la programación orientada a objetos trata de evitar. . o se le desea añadir una funcionalidad.com tienen el copyright de sus autores. Otra ventaja sería la encapsulación. si definiésemos la clase reptil. simplemente tenemos que editarla y automáticamente ese cambio se trasladará a todas las clases que la extiendan. porque todas esas clases fueron creadas como un paquete que se comprobó que funcionaba correctamente.desarrolloweb. Extends en Mootools 1. No reproducir sin autorización. tenemos aquí una clase "Animal" de ejemplo: Manual de Mootools: http://www. apoyándonos en el trabajo realizado anteriormente para la modelización de los animales. La programación orientada a objetos permite la herencia o extensión de clases que en estos casos nos viene como anillo al dedo.desarrolloweb. Qué es la extensión de clases Para comprender los mecanismos o las ventajas de la extensión de clases podemos verlo con un ejemplo típico. O si definimos la clase Dogo Alemán podríamos hacerlo a través de extender la clase perro. Es decir. Pero si algún día detectamos que una de nuestras clases funciona mal. utilizando Extends. ni como funcionan los mamíferos. Pero eso no sería totalmente óptimo. clases que heredan propiedades y métodos de otras clases. ganamos en reusabilidad. Si tuviéramos que modelizar en programación orientada a objetos la clase animal. Por ejemplo. pues también podríamos ayudarnos extendiendo la clase animal.com vamos a ver cómo extender clases. hacer una clase mamífero que herede las propiedades y métodos de los animales. Así mismo.2 tiene una manera nueva de realizar la extensión de clases. pensemos en los animales. Etc etc… Esto tiene varias ventajas. es decir. Ahora que ya tenemos unas ideas básicas sobre la herencia. facilidad de mantenimiento y creación del código. Por ejemplo. Con ello sólo tendríamos que definir los comportamientos y características propias de los mamíferos. vamos a continar este artículo de desarrolloweb .com/manuales/manual-mootools. lo interesante es definir los mamíferos como una extensión de los animales. Con la herencia. pues podemos crear todas clases con distintas las razas de perros sin preocuparnos de cómo funcionan los perros. como ya hemos dicho. modelizaríamos el reptil a partir del animal (extendiendo la clase animal) y añadiendo los métodos y propiedades de los reptiles. Dado que sabemos que la clase perro funciona tal cual queremos.com En este artículo del manual de Mootools de DesarrolloWeb. El esquema de herencia se puede llevar hasta donde sea necesario. Tenemos que crear la clase que va a heredar como cualquier otra clase (con el correspondiente new Class). porque con ello estaríamos reescribiendo el mismo código que se había programado ya para los animales.com. Otro día podríamos querer definir la clase mamífero (es un animal que tiene unas características específicas). Entonces tendríamos la posibilidad de reescribir todo el comportamiento definido para los animales y añadirle todo el comportamiento o características de los mamíferos. como se puede entender.

com/manuales/manual-mootools.desarrolloweb. en el constructor del mamífero podemos hacer uso del constructor del animal. también se hace uso de parent para llamar al método "tenerHijo" pero de la clase de la que hereda ("Animal").. En el constructor. de modo que esa parte del código no tiene por qué ser escrita de nuevo.nombre). y llega el parto"). } }). definida anteriormente. Eso quiere decir que vamos a extender la clase Animal. tenemos que redefinir el constructor para realizar la inicialización completa de los mamíferos.semanasGestacion + " semanas de gestación. Manual de Mootools: http://www. con la palabra new Class var Mamifero = new Class({ ..nombre = nombre.com tienen el copyright de sus autores. que son las que van a extender la clase "Animal" para crear la clase extendida "Mamifero". "hembra". initialize: function(nombre.sexo = "hembra"){ alert("Pasan " + this.parent(nombre). Y ahora vamos a hacer una clase llamada "Mamifero" que hereda de "Animal". this. }. Para utilizar esta clase "Mamifero" podríamos utilizar este código: var miMamifero = new Mamifero("perro". Cabe decir que el mencionado parent se puede utilizar en cualquier método que se haya reescrito en la case que hereda.parent(nombre). la clase "Mamifero" en este ejemplo refefine el método "tenerHijo" y dentro del código de este método.html 22 © Los manuales de DesarrolloWeb.desarrolloweb. para incializar las características de los animales. } }. La clase "Animal" ya tenía su propio constructor..semanasGestacion = semanas_gestacion. Con ello podemos hacer uso del constructor definido anteriormente para la clase "Animal". Tu mejor ayuda para aprender a hacer webs www. sexo. . tenerHijo: function(){ if (this. clase que estamos heredando.. semanas_gestacion){ this. Para ello utilizamos esta línea de código: Este parent es una llamada al constructor de la clase padre. Extends: Animal. Ahora en este ejemplo vamos a redefinir el constructor. Por ejemplo. }). }).. miMamifero. tenerHijo: function(){ alert("Se produce un nuevo " + this. Al final lleva una coma porque vamos a seguir definiendo métodos y/o propiedades específicas de los mamíferos. de la this. creamos la clase como cualquier otra. var Mamifero = new Class({ Extends: Animal. pero como los mamíferos son más complejos que los animales. Como se puede ver. Ahora tenemos que prestar atención al uso de la palabra Extends: para indicar la clase de la que queremos heredar. es decir. Es decir.tenerHijo(). }.parent(). this.sexo = sexo.com var Animal = new Class({ initialize: function(nombre){ this. this. 9). No reproducir sin autorización. como se puede ver. no obstante. se puede aprovechar el constructor de la clase de la que se hereda.

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Este ejemplo se puede ver en marcha.
Con esto ya sabemos extender clases en Mootools, pero para completar este artículo de
desarrolloweb.com, vamos a presentar otro ejemplo de herencia, que nos va a venir bien para
seguir aprendiendo sobre programación orientada a objetos.
Cómo se realiza un extend en Mootools 1.1
Ahora vamos a ver unas notas sobre extend en Mootools 1.1, ya que la herencia se
implementa de una manera distinta en esta versión del framework Javascript. Ahora bien,
incluso utilizando Mootools 1.2 vendrá bien echar un vistazo a este ejemplo para dar un
impulso a nuestros conocimientos, de cara a dominar la programación orientada a objetos.
En Mootools existe la instrucción extend, que se aplica sobre clases para extender o generar
una clase a partir de otra.
Para la clase que comentábamos antes de los animales, podríamos tener:
var Animal = new Class({
//propiedades y métodos de los animales
});

Ahora los mamíferos se crearían así:
var Mamifero = Animal.extend({
//propiedades y métodos de los mamíeros
});

Después de este código, el mamífero sería la suma de las propiedades y métodos de los
animales (esas propiedades y métodos estarían heredadas de los animales) y las propiedades
y métodos propios de los mamíferos.
Ejemplo completo de herencia o extensión de clases en Mootools
Vamos a hacer un ejemplo sencillo de herencia en Mootools. En el ejemplo vamos a tener una
clase que servirá de punto de partida, llamada InstrumentoMusical, que modeliza cualquier
instrumento musical. Luego tendremos varios instrumentos musicales que crearemos
extendiendo la clase InstrumentoMusical.
Haríamos la clase InstrumentoMusical de la siguiente forma:
var InstrumentoMusical = new Class({
initialize: function(tipo){
this.tipo = tipo;
}
});

Como vemos simplemente hemos creado un constructor, que recibe el tipo de instrumento (si
es de cuerda, percusión, viento, etc) y lo introduce en una propiedad del objeto llamada tipo.
Luego podríamos crear la clase guitarra de esta manera:
var Guitarra = InstrumentoMusical.extend({

initialize: function(cuerdas){
this.parent("instrumento de cuerda");
this.numCuerdas = cuerdas;
},

sonar: function(){
alert("tran tran tran");
}
});

Como se puede ver, la clase guitarra está extendiendo la clase InstrumentoMusical.

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 23
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

A la clase guitarra le hemos incorporado un constructor que recibe un parámetro que es el
número de cuerdas que va a tener la guitarra. En dicho constructor estamos haciendo una
línea que cabría explicar:
this.parent("instrumento de cuerda");

Con esta línea estamos llamando al método initialize de la clase padre que se está extendiendo
(el constructor de la clase InstrumentoMusical) pasándole "instrumento de cuerda" como
parámetro. Luego las guitarras creadas tendrán como siempre tipo de instrumento el valor
"instrumento de cuerda".
Además hemos hecho un métido llamado sonar en la clase guitarra que hace que la guitarra
suene.
Posteriormente podríamos crear la clase batería, que es otro instrumento musical compuesto
por varios elementos de percusión.
var Bateria = InstrumentoMusical.extend({

initialize: function(numeroElementos){
this.parent("instrumento de percusion");
this.numeroElementos = numeroElementos;
},

sonar: function(){
for (i=1; i<=this.numeroElementos; i++){
alert ("Sonando elemento " + i);
}
}
});

La batería tiene sus propias particularidades, pero se basa en la clase InstrumentoMusical para
funcionar. Igual que ocurría con la guitarra, extiende la clase InstrumentoMusical.
Luego la batería tiene un método sonar, que hace ruido, pero este es diferente del de la
guitarra.
Para utilizar estas dos clases podríamos hacer algo como esto:
var miGuitarra = new Guitarra(6);
alert(miGuitarra.tipo);
miGuitarra.sonar();

var miBateria = new Bateria(3);
alert(miBateria.tipo);
miBateria.sonar();

Podemos ver el ejemplo en marcha en una página aparte.

Artículo por Miguel Angel Alvarez

Otras formas de extender clases y objetos
En el artículo Extend: Extendiendo clases con Mootools explicamos qué es la extensión de
clases, para crear clases nuevas, a partir de otras ya creadas, a las que se le añaden
características y funcionalidades nuevas. En este caso vamos a seguir viendo modos de trabajo
con Mootools a la hora de extender clases.

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 24
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Extender un objeto con las características y funcionalidades de otro

Vamos a aprender a utilizar la función $extend() del core de Mootools, para extender un
objeto con otro. Con $extend() indicamos como parámetros dos objetos y entonces
conseguimos que el objeto del primer parámetro se extienda con las funcionalidades y
propiedades del objeto del segundo parámetro.

Tenemos estas dos clases de las que hemos creado dos objetos:

var Ordenador = new Class({
cpu: "Intel 486",
hd: "180 Mb",

procesar: function(x){
alert("Procesando " + x);
}
});
miOrdenador = new Ordenador();

var Portatil = new Class({
cpu: "Pentium",
pantalla: "800x600",

cargaBateria: function(){
alert("Cargando bateria");
}
});
miPortatil = new Portatil();

Son los objetos miOrdenador, de la clase Ordenador. Y miPortatil, de la clase Portátil. Ambos
tienen propiedades y métodos, siendo que alguna propiedad (cpu) está repetida en uno y en el
otro, pero con valores distintos.

Ahora podemos hacer uso de $extend() de esta manera:

//extiendo el objeto miOrdenador con las propiedades y métodos de miPortatil
$extend(miOrdenador, miPortatil);

Con esto he conseguido que el objeto miOrdenador adquiera las propiedades y métodos de
miPortatil. Después de este paso todas las propiedades y métodos de ambos objetos estarán
presentes en miOrdenador y miPortatil quedará inalterado. Además la propiedad cpu de
miOrdenador será igual al valor que había en el objeto miPortatil.

Podríamos ejecutar estas líneas para comprobar los valores de los parámetros y la presencia
de los distintos métodos.

//el campo CPU, repetido, toma el valor del objeto del segundo parámetro
alert(miOrdenador.cpu);
alert(miOrdenador.hd);
//el campo pantalla, que era de miPortatil, queda ahora dentro de miOrdenador.
alert(miOrdenador.pantalla);
miOrdenador.procesar("algo");
//el método de miPortatil queda también en miOrdenador.
miOrdenador.cargaBateria();

Como señalábamos, miPortatil no será alterado, eso lo podemos comprobar tratando de
mostrar la propiedad hd, que no debería estar en ese objeto.

Manual de Mootools: http://www.desarrolloweb.com/manuales/manual-mootools.html 25
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

miOrdenador2.com/manuales/manual-mootools.desarrolloweb.procesar("algo"). alert(miOrdenador2. para añadirle un número de plazas para pasajeros y la posibilidad de llenar o vaciar dichas plazas con personas.com tienen el copyright de sus autores. alert(miOrdenador2. por tanto es un método que tendrá cualquier nueva clase que creemos con Mootools (Recordemos que cualquier clase creada con Mootools en realidad es un objeto de la clase Class). Imaginemos que tenemos la clase coche. sino que se modifican.cpu). Artículo por Miguel Angel Alvarez Implement: implementando clases en Mootools Continuamos el Manual de Mootools con explicaciones sobre el implement de las clases de Mootools. Con implement no se crean nuevas clases. Podemos ver el ejemplo en marcha en una página aparte. La clase coche habrá Manual de Mootools: http://www.desarrolloweb. que tiene las propiedades y métodos de la clase Ordenador. El coche puede tener color. se pueden añadir propiedades y métodos de un objeto a una clase de mootools. pero el caso es que se puede y he decidido poner un ejemplo.html 26 © Los manuales de DesarrolloWeb. Para continuar con el ejemplo de clases anterior.hd). Con ello tenemos la clase OrdenadorPortatil.pantalla). Esto es un poco extraño. moverlo y detenerlo. por si en algún momento a alguien le sirve de utilidad. añadiendo nuevas propiedades o métodos.hd). modelo y motor. Extender una clase a través de un objeto Entre las posibilidades de extend y la extensión de clases en mootools. No reproducir sin autorización. que se ha extendido con las propiedades y métodos del objeto miPortatil. Implement es un método de Class. Pero ahora imaginemos que necesitamos complicar un poco la clase coche. Para explicar el funcionamiento de implement podemos utilizar un ejemplo. Podemos probar ahora el funcionamiento de esta clase OrdenadorPortatil a partir de este código: miOrdenador2 = new OrdenadorPortatil(). así como los métodos de ocupar y desocupar los asientos. .com //el objeto miPortatil queda inalterado alert(miPortatil. luego a un coche podemos arrancarlo y pararlo. Implement sirve para modificar una clase creada anteriormente. la propiedad de número de plazas. //mostrará undefined Veamos el ejemplo en marcha en una página aparte. puesto que no se entiende muy bien para qué puede servir extender clases con objetos. ya creada anteriormente. var OrdenadorPortatil = Ordenador. ya que además son cosas distintas. Entonces lo que haremos será implementar en la clase coche. Tu mejor ayuda para aprender a hacer webs www. más los que había en el objeto miPortatil. vamos crear una nueva clase a partir de la clase Ordenador. alert(miOrdenador2.extend(miPortatil).

}. en vez de extender "Animal". En una estructura de herencia como la que he relatado por poner un ejemplo. por tener que retocar el código de una serie de clases. ahora imaginemos que queremos añadir una característica o funcionalidad específica a la clase "Animal". abrir: function(){ this. se puede solucionar con implement.abierta = true. No reproducir sin autorización. Luego con extend hemos creado.desarrolloweb. initialize: function(habitaciones. mientras que con implement no se crea ninguna clase nueva "hijo". Con Implement podríamos modificar directamente la clase "Animal" y con ello conseguiríamos que cambiase esta y todas las clases que tenga por debajo en la jerarquía de herencia. extendiesen "AnimalExtendido". this. Podríamos extender la clase "animal" y crear un "AnimalExtendido". sino que es la misma clase coche la que se ha alterado. Ahora. }. Imaginemos que tenemos la clase "Animal". "Ranas"… Veamos un ejemplo de Implement en un código Javascript con Mootools: Podemos tener una clase llamada "Casa". ¿Para qué casos puede servir implement? Voy a dar un ejemplo típico en el que nos puede servir de mucha ayuda el método implement. alert('casa cerrada'). Extendiendo "Anfibios" hemos creado la clase "Rana" y "Salamandra". Referencia: Tenemos explicaciones de Extend en el manual de Mootools. pero no se habrá creado ninguna clase a partir de coche.com/manuales/manual-mootools.com tienen el copyright de sus autores. pero esto no modificaría las clases que heredan de "Animal". Por si no ha quedado todavía claro. extendiendo la clase "Mamíferos" hemos creado la clase "Perro" y "Gato". las clases "Mamíferos" y "Anfibios". para que todos los animales de la jerarquía de herencia tengan esa nueva funcionalidad o característica. que sería poco atractiva. banos){ this. a no ser que modificásemos el código de todas las clases que dependen de "Animal" para hacer que. porque ahora tiene nuevas propiedades y funcionalidades. con un código como el que sigue: var Casa = new Class({ abierta: false. Es decir. Mientras que con extend lo que se creaban eran nuevas clases que extendían las anteriores.html 27 © Los manuales de DesarrolloWeb. con extend creábamos nuevas clases "hijo" que heredaban propiedades y métodos de clases "padre". Para entender mejor implemet tenemos que verlo en comparación con extend. Esa solución. } Manual de Mootools: http://www.desarrolloweb. cerrar: function(){ this. a partir de la clase animal. "Anfibios". . Tu mejor ayuda para aprender a hacer webs www. alert('casa abierta'). con implement lo que estamos es modificando esas mismas clases. "Perros".num_habitaciones = habitaciones.abierta = false.com cambiado. implementando esas nuevas funcionalidades o características a "Animal" estaríamos automáticamente incorporándolas a los "Mamíferos".num_banos = banos. sino que se modifica la clase original que se está implementando.

ocupar().desarrolloweb. .ocupantes > 0){ this. } }.1). El método desocupar() simplemente mira si la casa está abierta y si hay ocupantes y en ese caso resta uno a los ocupantes. no puedo entrar"). } }else{ alert("La casa está cerrada. desocupar: function(){ if (this. } }else{ alert("La casa está cerrada. Casa. Además con el constructor initialize se crean dos nuevas propiedades que son el número de habitaciones y baños. no puedo salir"). alert("He salido de la casa y dejado una habitación libre").com tienen el copyright de sus autores. miCasa. miCasa. Podríamos poner en marcha la clase casa de la siguiente manera: var miCasa = new Casa(2.ocupar().com }) Esta clase "Casa" tiene una propiedad "abierta" que en principio vale "false".ocupar(). Ahora vamos a ver como se podría utilizar implement para añadir nuevas propiedades y métodos. Después del implement. miCasa. alert("He ocupado una habitación").ocupantes < this. que contiene el número de ocupantes de la casa. la clase "Casa" simplemente tendrá esas nuevas propiedades y métodos. El método ocupar primero comprueba si la casa está abierta y luego si queda espacio en las habitaciones. miCasa. Luego se han creado dos métodos uno para abrir() la casa y otro para cerrar() la misma.desocupar(). ocupar() y desocupar().implement({ ocupantes: 0.abierta){ if (this.html 28 © Los manuales de DesarrolloWeb. miCasa. No reproducir sin autorización. ocupar: function(){ if (this. pero seguirá siendo la misma clase "Casa". miCasa.ocupantes++.ocupar().abierta){ if (this.num_habitaciones){ this.abrir(). simplemente modificada. Luego se han añadido con implement dos métodos.ocupantes--. inicialmente siempre igual a cero. Si es así añade uno al número de ocupantes. Manual de Mootools: http://www. }else{ alert("No hay espacio para mi en la casa"). Tu mejor ayuda para aprender a hacer webs www. }else{ alert("No hay ocupantes en la casa").com/manuales/manual-mootools. } } }).desarrolloweb. Vemos que se ha añadido una propiedad llamada "ocupantes".

en número indeterminado. Como se puede ver. Forma parte. //fusiono los objetos obj_fusion = $merge(obj1. Recibe varios parámetros. Luego veremos cómo queda dicho objeto "comida" y cómo los objetos iniciales han quedado inalterados. alert (obj_fusion. como no se está creando ninguna clase hija. c:2}. $merge() devuelve un nuevo objeto. pero dos como mínimo. Pero en implement. que tiene todas las propiedades y métodos de los objetos iniciales.b).com miCasa. en este caso explicando otra de las funciones del core de Mootools.com tienen el copyright de sus autores.html 29 © Los manuales de DesarrolloWeb. //obj_fusion vale {a:3.ocupar(). aunque no tenía sentido explicarla sin haber explicado antes la creación de clases y objetos con Mootools. b:4}. de la fusión de dos objetos: //creo dos objetos var obj1 = {a: 1. deja los objetos iniciales (los enviados por parámetro) inalterados y sin referenciar en el nuevo objeto resultante de la fusión de objetos. No reproducir sin autorización. obj2). que deben ser objetos. Podemos ver el ejemplo en marcha en una página aparte. no tiene sentido utilizar parent(). Veamos un primer ejemplo sencillo. "filete" y "manzana".com/manuales/manual-mootools. Podemos ver el resultado de la ejecución de este código en una página aparte. Tu mejor ayuda para aprender a hacer webs www. Luego instanciaremos 3 objetos a partir de esas clases. que es la combinación de todos esos objetos recibidos por parámetro. que puede ser una tontería el comentar. del core de Mootools y nos quedaba por estudiar todavía. b:4. Sólo señalar un pequeño detalle.desarrolloweb.desarrolloweb. ocurre que el elemento del último objeto fusionado es el que prevalece. c:2}.desocupar(). si una propiedad o método se repite en nombre. var obj2 = {a: 3. que hemos llamado "lechuga". $merge(). sino que se modifica la clase original. //muestro los valores alert (obj_fusion. desde la clase hija. alert (obj_fusion. Manual de Mootools: http://www. Artículo por Miguel Angel Alvarez Función $merge() del core Mootools Continuamos con nuestro manual de Mootools. Además. como decimos.a). .c). Cómo funciona la fusión de $merge() Simplemente se crea un objeto totalmente nuevo. sirve para crear un objeto a partir de la fusión de otros objetos. llamada $merge(). pero para que quede claro. toma el valor del segundo objeto fusionado. miCasa. En extend podíamos utilizar parent() para hacer referencia a la clase padre que estábamos extendiendo. que estaba repetida en los dos objetos. Además. Esta función. que combinaremos para crear un nuevo objeto "comida". la propiedad "a". Ahora veamos un segundo ejemplo de uso de $merge(): Vamos a crear tres clases.

alert($comida. .2).desarrolloweb. No reproducir sin autorización. vamos a empezar a explicar Element. } }). //muestro las propiedades del objeto combinado alert($comida. Así que. //creo la clase filete var Filete = new Class({ initialize: function(animal. hasta que no aprendamos a manejar un poco el objeto Element.com //creo la clase lechuga var Lechuga = new Class({ color: "Verde". //ahora creo la clase manzana var Manzana = new Class({ color: "Amarilla".com tienen el copyright de sus autores. } }). no podremos empezar a hacer y entender ejemplos más complejos.tipo).procedencia). //el último objeto combinado era la manzana de color amarilla alert($comida. Sin embargo.color). //La propiedad color.peso= peso. Método $() Mootools tiene un módulo llamado Element.color). alert($comida. Artículo por Miguel Angel Alvarez Element en Mootools. alert(miManzana. miFilete = new Filete("Pollo".sabor). Podemos ver en marcha el código de este segundo ejemplo en una página aparte. miFilete. peso){ this. //instancio 3 objetos a partir de las clases creadas miLechuga = new Lechuga(). sazonar: function(){ alert ("Estoy lista para comer"). En nuestro Manual de Mootools hemos visto una serie de artículos para aprender a manejar otros módulos de los que componen el framework. que debemos conocer y dominar para poder trabajar con el framework y tener a mano cualquiera de los componentes de la página. //utilizo merge para combinar los tres objetos $comida = $merge(miLechuga.com/manuales/manual-mootools.desarrolloweb.color). que estaba repetida. miManzana). miManzana = new Manzana(). this. Ya volveremos atrás más adelante para incluir explicaciones de otras partes de Mootools.procedencia= animal. Tu mejor ayuda para aprender a hacer webs www. //pero los objetos iniciales está inalterados. tipo: "Rizada". sabor: "dulce" }). Element es el módulo de Mootools que contiene la mayoría de funciones para alterar cosas de Manual de Mootools: http://www. Muestro la propiedad color de los mismos alert(miLechuga. aunque nos hayamos saltado algunos temas de la documentación de Mootools. toma el valor del último objeto combinado. 0.html 30 © Los manuales de DesarrolloWeb.

No hay más!.com/manuales/manual-mootools.desarrolloweb. etc. es decir. "1px solid #ff8800"). obtener propiedades. construirlos o destruirlos. . elemento_mibloque. en vez de un string con el identificador del elemento. podremos acceder a ella directamente desde cualquier parte del código Javascript de la página. Para aclarar este punto. En el caso que se esté viendo la página en Internet Explorer. 2.getElementById("mibloque") Manual de Mootools: http://www. mielemento = $(mielemento). Veamos un ejemplo de uso del método $() Primero veamos un elemento cualquiera de una página web: <div id="mibloque"> Estoy probando Element de Mootools! </div> Esto es un bloque DIV. elemento_mibloque. podemos invocar métodos de Element. Aun no hemos visto explicaciones sobre los distintos métodos. que sirven para seleccionar elementos de la página. podemos cambiar las propiedades CSS del elemento. Ahora en la variable elemento_mibloque tenemos una referencia a ese bloque DIV. No reproducir sin autorización. Opera o Safari tienen disponibles desde el principio cualquiera de los métodos de Element (siempre que hayamos incluido el framework Mootools y el módulo Element) en cualquiera de los componentes de la página. Otros navegadores como Firefox.setStyle("padding". como pueden ser atributos CSS. Podemos ver el ejemplo en marcha en una página aparte. de manera transparente para nosotros. La mayoría de los métodos de la clase Element son sencillos de entender.desarrolloweb. "20px"). Nota: Para lo que a nosotros respecta.getElementById("mibloque").setStyle("font-size". $() realiza una segunda función. se aplican todos los métodos de Element a ese objeto al invocar a $(). con el método setStyle() de la clase Element. El método dólar también acepta una referencia a un elemento. como está en la documentación de Mootools. al que le hemos colocado un identificador id=”mibloque”. debemos saber que con $() obtenemos una referencia al objeto Element asociado a un elemento de la página. hemos querido también mencionar que en el caso del navegador Internet Explorer. Tu mejor ayuda para aprender a hacer webs www. Con mielemento = document.html 31 © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. La mayoría de los métodos de Element sirven para alterar propiedades de los elementos que visualizamos en nuestro navegador. No es nada complicado. pero que tiene una razón de ser que explicaré luego: mielemento = document. podemos pasarle una referencia DOM del elemento deseado. porque hasta entonces no estarían disponibles.setStyle("border". pero podemos mostrar un código para alterar las propiedades CSS de dicho bloque. Función dólar $() Esta función se ha incluido dentro de los métodos del objeto Window. mielemento.com la página. Como elemento_mibloque es un objeto de la clase Element. veamos un código que parece un poco redundante. "150%"). elemento_mibloque = $("mibloque"). pasando a $() el identificador del elemento que queramos recuperar. código HTML. Ahora veamos cómo podemos recuperarlo con Mootools como un objeto de la clase Element. Por ello. Obtener un objeto Element a partir de cualquier elemento de la página. Pero bueno. que consiste en aplicar al elemento seleccionado todos los métodos de la clase Element que aporta Mootools. Con $() se efectúan un par de operaciones: 1. inyectar código. simplemente debemos saber que. pero debemos comenzar por un par de métodos que pueden requerir algunas explicaciones adicionales.

Como decíamos. es una manera más rápida de hacer el document.desarrolloweb. En el código anterior guardamos el Array de Elements devuelto una variable que hemos llamado elementos_parrafo.com obtenemos una referencia al bloque DIV de antes. porque hasta que no hagamos la invocación al método $(). Esto es necesario hacerlo. independientemente del número de párrafos que tuviese nuestra página.para especificar grupos de elementos y devuelve siempre un array con las referencias a los elementos. El código anterior se puede ver en este enlace. que son muy interesantes para comenzar a tocar partes divertidas y útiles de Mootools. para tratarlos como objetos de la clase Element de Mootools. Ahora vamos a continuar con el método de Window $$().com tienen el copyright de sus autores. Artículo por Miguel Angel Alvarez Element en Mootools. $(). Función doble dólar $$() Esta función forma parte del módulo Element. Acepta una serie de posibles parámetros de entrada -que veremos luego.getElementById(). aunque se ha creado. Como podemos ver. que sirve para seleccionar un grupo de elementos de DOM y extender sus funcionalidades. Luego.desarrolloweb. lo que hacemos es obtener un objeto Element a partir de la referencia conseguida en la línea de código anterior. Método $$() En el capítulo anterior del Manual de Mootools vimos las primeras nociones sobre el módulo Element. pero a través del método getElementById() del objeto document.html 32 © Los manuales de DesarrolloWeb. <p> Esto es un párrafo </p> <p> Esto es un segundo párrafo </p> Manual de Mootools: http://www. Sirve para obtener referencias a un grupo variable de elementos de la página. El método $$ se puede utilizar de esta manera: elementos_parrafo = $$("p"). independientemente del número de elementos seleccionados.com/manuales/manual-mootools. que podemos conocer anteriormente de Javascript. no tiene aplicadas todas las funcionalidades de Element en IExplorer. Este método forma parte de Javascript y lo tiene cualquier navegador moderno. igual que la función $() vista en el capítulo anterior. Además. Ejemplo completo de uso de $$() Para entender esto. por lo que se encuentra siempre disponible. la referencia del elemento no es un objeto Element de Mootools en Internet Explorer. Tu mejor ayuda para aprender a hacer webs www. puede ser útil cuando no sabemos si en una variable tenemos un identificador o una referencia a un elemento del DOM. elementos_parrafo será un array de objetos Element. lo más fácil es ver un ejemplo de uso del método $$() para ver cómo funciona. . No reproducir sin autorización. Esto selecciona todas las etiquetas P de la página y devuelve un array con las referencias a todos estos párrafos. o mejor dicho. con mielemento = $(mielemento). como un método de Window.

extraídos con document.length. Entonces. Como se puede ver.com tienen el copyright de sus autores.getElementById("p1"). • Arrays de elementos • Variables con elementos • Cadenas de caracteres con selectores de clases CSS. //alert($type(elementos_parrafo)). Posibles parámetros de selección de elementos con $$() Los posibles parámetros que acepta $$() son: • Etiquetas HTML.desarrolloweb.getElementById("p3")). i<elementos_parrafo. No reproducir sin autorización. elementos = $$(elemento0. elemento1 = $("a1"). $("a2")). En este ejemplo tenemos tres variables con objetos de la clase Element y los seleccionamos con $$. elementos_parrafo = $$(elementos). y en la segunda línea obtenemos un array con dichos elementos como objetos de la clase Element. . Tenemos este código HTML: <div id="x">Este div es de identificador id=x</div> Y luego este script: Manual de Mootools: http://www.com/manuales/manual-mootools. elementos=new Array($("p1"). o identificadores Ahora veamos otra serie de ejemplos de selección de elementos de la página: elementos = $$("p". Esto seleccionaría todos los párrafos de la página y en las posiciones sucesivas del array. Tu mejor ayuda para aprender a hacer webs www. } </script> Primero hemos escrito un código HTML con tres párrafos. En nuestro ejemplo hacemos uso del método $$(“p”) para obtener un array con los objetos Element correspondientes a todos los párrafos.html 33 © Los manuales de DesarrolloWeb. elemento0= $("p3"). Este ejemplo es similar al anterior.getElementById(). Podemos ver el ejemplo en marcha en una página aparte. elementos=new Array(document. A continuación tenemos un bucle que recorre cada uno de los elementos del array y va cambiando el estilo de los mismos. elemento2 = $("a2"). document. en concreto el tamaño de la fuente. En la primera línea creamos el array con los elementos. con la diferencia que en este caso ya teníamos los elementos de la clase Element."a"). elementos = $$(elementos). A continuación tenemos un script en Javascript que hace uso de Mootools para recoger esos párrafos y tratarlos. Con estas dos líneas seleccionaríamos los elementos con identificadores “p1” y “p3”. Ahora veamos un ejemplo con selectores. Nos mostraría array en un alert for (i=0. una o varias.desarrolloweb. elemento2). (100 + (i*50))+"%"). i++){ elementos_parrafo[i].setStyle("font-size". seleccionados con $().com <p> Sigo con un tercer párrafo! </p> <script> elementos_parrafo = $$("p"). especificándolos como tres parámetros consecutivos. con elementos_parrafo[i] estamos accediendo a cada una de las etiquetas HTML de párrafo. para cada párrafo le coloca un tamaño de fuente mayor. elemento1. todos los enlaces.

Será un único elemento.com tienen el copyright de sus autores.com. i++){ elementos[i].com/manuales/manual-mootools. //alert($type(elementos_parrafo)). En capítulos anteriores ya comenzamos a explicar las características del módulo Element.setStyle("color". Entonces.length. Así pues. Podemos ver este último ejemplo en marcha aquí. en el que tenemos este código HTML: <div class="titular">Esto es DIV de la clase titular</div> <div>Este NO es de la clase titular</div> <div class="titular">Esto es otro DIV que es titular</div> Vemos tres bloques DIV. Un último ejemplo. .desarrolloweb. Con el bucle luego les estamos cambiando el color del texto a rojo a todos los elementos. podemos entender la página como un conjunto de elementos colocados de manera secuencial. Luego con el bucle for recorremos el array para cambiar el color del texto de ese elemento a azul. "blue"). "red"). para que funcione la selección de elementos por selectores de clase CSS debemos tener el módulo Selectors cargado en Mootools. } </script> Con $$("#x") obtenemos el elemento que tiene identificador id="x”. Por ejemplo. No reproducir sin autorización. for (i=0. Por cierto. La propia lista es un elemento (etiqueta UL u lo). Las listas.length. El primero y el tercero son de la clase “titular”. por ejemplo. pero también son elementos cada uno de los item de la lista (etiqueta LI).setStyle("color". i++){ elementos_titular[i]. Este artículo se encaja en el Manual de Mootools.com <script> elementos = $$("#x"). } </script> Con ello estamos seleccionando todos los elementos de la página que son de la clase titular. que estamos publicando en DesarrolloWeb. Con Mootools tenemos acceso a cualquiera de estos elementos y podemos trabajar con ellos de manera dinámica. i<elementos_titular. también son elementos. modificar sus propiedades. borrarlos. i<elementos. ahora vamos a ver cómo se podrían crear elementos dinámicamente en la página web. Esto incluye.titular”.html 34 © Los manuales de DesarrolloWeb. abarcamos cualquier tipo de contenido de ésta. los párrafos son elementos. Nos mostraría array en un alert for (i=0. crearlos. que sirve para trabajar con los elementos de la página. Para Manual de Mootools: http://www. etc.titular"). Tu mejor ayuda para aprender a hacer webs www. con el selector “.desarrolloweb. Cuando nos referimos a los elementos de la página. Artículo por Miguel Angel Alvarez Construir elementos en la página con Mootools Con el objetivo de continuar nuestro aprendizaje de Mootools. las imágenes o cualquier otra cosa que coloquemos con etiquetas HTML. veamos el siguiente código Javascript: <script> elementos_titular = $$(".

"color": "white" } }). relatada en el artículo anterior. En adelante veremos también cómo insertarlos en la página. Todo esto lo veremos en un par de ejemplos en el siguiente artículo. Constructor de Element La clase Element de Mootools tiene un constructor que sirve para realizar las tareas de creación de un elemento nuevo. Al construir un elemento este simplemente se genera internamente en la memoria con Javascript. Tu mejor ayuda para aprender a hacer webs www.desarrolloweb. Para conseguir una instancia de la clase Element de un elemento de la página a partir de un identificador utilizábamos la función dólar. a la vez que nos ofrece herramientas para su inicialización. No reproducir sin autorización. "styles": { "background-color": "red". y algunos estilos CSS. Características: son una lista de características de la etiqueta o elemento que se está creando. Estas características son opcionales. y aparte le doy una serie de características del enlace. No son otros que crear elementos dinámicamente. etiqueta P: var nuevoElemento = new Element ("p"). . podemos construir elementos de esta manera: Construyo un elemento párrafo. para que aparezcan en el lugar que nosotros deseemos. Artículo por Miguel Angel Alvarez Manual de Mootools: http://www. caracteristicas). vamos ya con los objetivos a cubrir en este artículo de desarrollo web. o inyectarlo. Por ejemplo si ponemos “p” estaremos creando un elemento tipo párrafo. como respuesta a ejecución de sentencias Javascript.com trabajar con un elemento de la página tan solo tenemos que poder referirnos a él y para ello utilizábamos su identificador (atributo id).desarrolloweb.com tienen el copyright de sus autores.com. Por ejemplo. etiqueta A. Así que después de esta introducción a lo que son los elementos de la página. Construyo un elemento enlace.com/manuales/manual-mootools. Para incluirlo en la página tendremos que insertar el elemento. El constructor es muy sencillo y recibe dos parámetros. la URL a la que va dirigido. { "html": "texto del enlace". para inicializar el texto del enlace. como podemos ver a continuación: miElemento = new Element(etiqueta. Los parámetros del constructor son los siguientes: Etiqueta: es el nombre de una etiqueta HTML. "href": "url_del_enlace". pero no aparece en ningún lugar de la página. var otroElemento = new Element("a". o si colocamos “img” estaremos creando un elemento o etiqueta imagen. como prefiramos decirlo.html 35 © Los manuales de DesarrolloWeb.

Tu mejor ayuda para aprender a hacer webs www. Aunque inject() puede insertar los elementos en otros lugares. Con las anteriores líneas de código hemos hecho 3 cosas: Primero creamos un nuevo elemento. Se trata de insertar Manual de Mootools: http://www. Para conocer mejor de antemano los objetivos del artículo podemos entrar a ver el resultado de los ejemplos en marcha.com Ejemplo de construcción de un elemento e inyección en la página En el artículo anterior de nuestro Manual de Mootools publicado en DesarrolloWeb. No reproducir sin autorización. en este caso se mete el elemento dentro de otro elemento llamado “micapa”. un poco más elaborado. en este caso una etiqueta DIV.com/manuales/manual-mootools. la función dólar de Mootools $(). //Meto algo de texto dentro del elemento nuevoElemento. Tener en cuenta también que hemos utilizado una de las funciones explicadas con anterioridad. Supongamos que yo tenía este HTML (fíjate que el div tiene un id=”micapa” para referirme a él): <div id="micapa">Crear Elementos con Mootools</div> Pues después de la ejecución de estas sentencias de creación e inyección del nuevo elemento. entre ellas. Veamos un primer ejemplo de construcción de un elemento con Mootools y la posterior inserción del mismo en la página: //construyo un nuevo elemento var nuevoElemento = new Element ("div"). como veremos en el siguiente ejemplo. Ahora vamos a mostrar un segundo ejemplo. Para ello tengo que utilizar el método inject() indicando como parámetro el lugar donde se tiene que insertar el elemento.inject($("micapa")). en el que asigno un poco de texto a la etiqueta.html 36 © Los manuales de DesarrolloWeb. hemos tenido que introducir otros dos métodos de Element. me quedará la página con el siguiente código HTML: <div id="micapa"> Crear Elementos con Mootools <div>Este texto lo meto directamente desde Javascript</div> </div> Como vemos.com vimos cómo trabajar con el constructor de Element.desarrolloweb. en las que intentaremos aclarar algo el uso de ambos métodos. Esperamos que no resulte muy complicado de entrada. dentro del objeto Element que se indica como parámetro. con “html” asignamos el texto que hay dentro del mismo. Por último inyecto el elemento en la página. con el método inject() de la clase Element se inserta el objeto que recibe el método.set("html". Nota: Para la realización de este sencillo ejemplo de uso del la clase Element de Mootools. Ahora vamos a aprender a poner en práctica la construcción de elementos y la inserción de los mismos en algún lugar de la página. De todos modos. Con set() podemos asignar todo tipo de propiedades al elemento. sigue leyendo las siguientes explicaciones. Esto lo veremos con un par de ejemplos. "Este texto lo meto directamente desde Javascript"). que aun no habíamos relatado en el manual de Mootools de desarrolloweb.com tienen el copyright de sus autores. //injecto ese elemento en la página nuevoElemento. . Luego he una llamada al método set() del Element.desarrolloweb.com: el método set() y el método inject().

Debe haber quedado claro hasta el momento el uso de las funciones dólar $() y doble dólar $$ (). nuevoElementoLista.com nuevos elementos a una lista que hay en la página. pero en la parte de encima (por cambiar un poco. con la salvedad que ahora vamos a utilizar algunas características adicionales del constructor de Element. En artículos precedentes estuvimos brindando las nociones más básicas del módulo Element y vamos a continuar con ello. { "html": "Texto del elemento". Estas son: “html” para indicar el texto que va dentro de la etiqueta y “styles” para especificar algunos atributos de estilos CSS. font-weight: bold.com tienen el copyright de sus autores. Tu mejor ayuda para aprender a hacer webs www. No reproducir sin autorización.com.desarrolloweb.html 37 © Los manuales de DesarrolloWeb. . porque las vamos a utilizar constantemente en este manual. Si no es así. con lo que conseguiremos que el elemento sea introducido arriba del todo de la lista). En este caso hemos utilizado el segundo parámetro del constructor de Element para especificar algunas características del elemento LI.inject($("lista"). hemos utilizado un segundo parámetro del método inject() para decir “top”. "top"). "styles": { "font-size": "14pt". Si teníamos un código HTML como este: <ul id="lista"> <li>Elemento de lista 1</li> <li>Otro elemento de lista</li> </ul> Después de la ejecución de estas líneas de código obtendremos un HTML resultante como este: <ul id="lista"> <li style="font-size: 14pt. var nuevoElementoLista = new Element("li". Es muy parecido al ejemplo anterior. Artículo por Miguel Angel Alvarez Seleccionar un elemento con getElement() Seguimos con el Manual de Mootools de DesarrolloWeb. Con la primera línea de código construyo un elemento LI (un elemento de lista).com en el siguiente link: Ver el ejemplo en marcha.com/manuales/manual-mootools.">Texto del elemento</li> <li>Elemento de lista 1</li> <li>Otro elemento de lista</li> </ul> Podemos ver ambos ejemplos relatados en este artículo de desarrollo web .desarrolloweb. Luego en la última línea se inyecta el elemento recién creado dentro de otro elemento con id=”lista”. "font-weight": "bold" } }). conviene repasar Manual de Mootools: http://www.

com el uso de esas funciones en los artículos Método $() y Método $$(). pero se entenderá así: en la sentencia anterior. getElement() devolverá la primera etiqueta DIV que haya dentro del elemento con id="id_de_un_elemento_cualquiera". Tu mejor ayuda para aprender a hacer webs www. Los elementos que vamos a acceder ahora no necesitan tener identificadores para poder ser accedidos y procesados por medio de Mootools. $("id_de_un_elemento_cualquiera"). De todos modos. simplemente seleccionando algunos de estos elementos y alterando sus propiedades.html 38 © Los manuales de DesarrolloWeb.com/manuales/manual-mootools. Los elementos podemos conseguirlos a través del método $(). para cambiarlos un poco y así ver que los hemos seleccionado correctamente. elemento 1 <a href="#">enlace dentro de elemento</a></li> <li>Lista. como solemos hacer en desarrolloweb .desarrolloweb.getElement("div"). Vimos que con esas funciones se podía acceder rápidamente a elementos de la página a través de sus identificadores (atributo id del elemento HTML).com tienen el copyright de sus autores. englobado en la etiqueta BODY y dentro del mismo varios elementos o etiquetas HTML. elemento 2</li> <li>Otro elemento</li> </ul> <p> Esto es un párrafo. vamos a ver algunos ejemplos de uso de getElement() que terminarán de aclarar este asunto. Pongo un <a href="#">enlace dentro del párrafo</a> </p> </div> <p>Pongo otro párrafo fuera del div</p> </body> Como vemos tenemos un cuerpo de la página. Ahora vamos a ver cómo acceder a elementos de la página que están dentro de otros. No reproducir sin autorización. tenemos que invocarlo sobre una instancia de la clase Element. . así pues. Para ello utilizaremos el método getElement(). un elemento de la página. Imaginemos que tenemos un código HTML como el que sigue: <body> <ul> <li>Elemento en una lista fuera del div</li> <li>Otro elemento fuera del div</li> <li>Elemento <a href="#">con enlace!</a></li> </ul> <div id="capadiv"> <ul> <li>Lista.com. Para ello veamos esta primera función: Manual de Mootools: http://www. getElement() recibe como parámetro el nombre de una etiqueta HTML y devuelve el primer espécimen de esa etiqueta que haya dentro del elemento donde fue invocado getElement(). El método getElement() pertenece a la clase Element. Vamos ahora a trabajar con esta página. Esta explicación puede parecer un poco retorcida. es decir. de cualquier objeto de la clase Element.desarrolloweb.

} Con este nuevo ejemplo estamos seleccionando el primer elemento UL que hay en el BODY del documento HTML.com function seleccionarParrafoEnDiv(){ miParrafo = $("capadiv"). como hemos podido comprobar y tal como habíamos visto en distintos ejemplos de este manual de desarrollo web . miParrafo. miParrafo. } Esto lo que hace es seleccionar el primer párrafo (etiqueta P) que hay dentro del elemento con id="capadiv". Para finalizar este ejercicio podemos ver el ejemplo en marcha en una página aparte.set("html". todos los párrafos.com/manuales/manual-mootools. Vemos que para alterarlo utilizamos el método set() de Element. Ahora veamos una segunda función que también hace uso de getElement() para seleccionar otro elemento. "Meto otro texto en el párrafo"). todos los enlaces. es muy polivalente. function seleccionarPrimeraLista(){ miLista = $(document. El método set() de la clase Element.getElement("p").getElement("p").desarrolloweb.getElement("ul"). por ejemplo. .body). Esto nos seleccionará la primera lista UL que haya en el cuerpo de la página.desarrolloweb. Tu mejor ayuda para aprender a hacer webs www. Luego con la siguiente línea cambiamos ese elemento UL para asignarle nuevos estilos CSS.com tienen el copyright de sus autores. El primero es lo que queremos alterar y el segundo es el nuevo contenido. La ejecución de la línea anterior forzará a que el contenido del párrafo sea "Meto otro texto en el párrafo". En este nuevo artículo de DesarrolloWeb. Luego.com. con la siguiente línea alteramos alguna de las propiedades de ese párrafo.set ("style". "Meto otro texto en el párrafo"). "font-size: 150%. seleccionamos ese primer párrafo con la sentencia: miParrafo = $("capadiv"). entre ellas un párrafo Así pues. Para ello utilizaremos el método getElements() de la clase Element de Manual de Mootools: http://www. Podemos ver en el código HTML anterior que había una capa DIV con ese identificador: <div id="capadiv> Dentro contiene varias otras etiquetas. No reproducir sin autorización.html 39 © Los manuales de DesarrolloWeb.com veremos cómo seleccionar todos los elementos de una misma etiqueta. etc. que recibe dos parámetros.set("html". Artículo por Miguel Angel Alvarez Seleccionar elementos de la página con getElements() En el capítulo anterior del manual de Mootools vimos cómo podríamos seleccionar un elemento en concreto de la página. color: red"). permitiendo alterar cualquier estilo o atributo de una etiqueta HTML. miLista.

ya que getElements() funciona exactamente igual. todosLiEnDiv. $("elemento_de_la_pagina"). } Como vemos. } Esta función. .com tienen el copyright de sus autores. Veremos ahora unos ejemplos de uso de getElements() para terminar de entender su funcionamiento.set("style". con la única diferencia que devuelve todos los elementos de un tipo en un array y no únicamente uno.com. background-color: #999999"). Así pues. esto es. Veamos este código: function seleccionarLiEnDiv(){ todosLiEnDiv = $("capadiv"). en este caso un array de elementos de lista. pasando como parámetro cada uno de los elementos del array. se llama al ya conocido método set() para alterar ese elemento.each(alterarLi). que será el mismo que en el artículo anterior de este manual. para cada elemento del array todosLiEnDiv vamos a llamar a la función alterarLi. estamos utilizando un método propio de Mootools llamado each(). en la primera línea. selecciona todos los elementos "li" (elementos de lista) que hay dentro de una capa llamada "capadiv". para cada elemento del array. Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com/manuales/manual-mootools. recibe por parámetro el elemento actual y simplemente. una función que se le pase por parámetro. en la siguiente línea. cada uno de las etiquetas LI que teníamos en el array que nos devolvió getElements(). Dicho de otra manera. Ahora veamos otra función interesante para ilustrar el funcionamiento de getElements(). Tendremos un código HTML para seleccionar elementos dentro de él. alterarLi recibirá cada uno de los elementos del array. Luego. No reproducir sin autorización. "margin: 15px. function alterarLi(elemento){ elemento. En este caso estamos invocando a each sobre un array. podemos ver cómo sería esa función alterarLi. Lo que hace es ejecutar. each() forma parte del core de Mootools y también de la clase Array. function seleccionarEnlaces(){ Manual de Mootools: http://www. Nos viene bien explicar con detalle este método each. en el que comentamos la función getElement() de Mootools. Antes de continuar con este artículo conviene haber leído el texto anterior. Se entiende entonces que la variable todosLiEnDiv es un array de objetos de la clase Element. La función que se invoca con each para cada elemento del array recibe como parámetro el valor del elemento actual.html 40 © Los manuales de DesarrolloWeb. porque todavía no lo habíamos utilizado ni explicado anteriormente en desarrollo web .getElements("li"). Así pues. Esto nos devuelve un array donde en cada una de sus casillas tenemos una instancia de cada uno de los LI que hay dentro del elemento "capadiv".desarrolloweb.com Mootools.getElements("p") Una línea como la anterior seleccionaría todas las etiquetas de párrafo ("p") que hay dentro del elemento "elemento_de_la_pagina".

Métodos getProperty() y setProperty() Estos dos métodos de Element nos sirven para obtener y modificar el valor de una propiedad de un elemento de la página. } Aquí se puede ver un uso similar de getElements(). En esa función recibimos como parámetro cada uno de los elementos del array y dentro.appendText(" Click aquí!").desarrolloweb.body). No reproducir sin autorización. Siguiendo el ejemplo.com</a> Ahora con el método getProperty() vamos a extraer el valor de una de sus propiedades. Tu mejor ayuda para aprender a hacer webs www. por lo menos algunos de los más útiles. El resultado de ejecutar esta función será la alteración de texto de todos los enlaces de la página. que sirve para añadir un texto al elemento.com todosEnlaces = $(document. appendText(). (hemos combinado los ejemplos de este artículo y el anterior. Todos estos artículos explican las bases del tratamiento dinámico de cualquier elemento de la página web. Cuando hablamos de propiedad nos referimos a uno de los atributos que se colocan en la etiqueta HTML del elemento. Como venimos haciendo en los artículos de desarrolloweb. Con $ (document.com/manuales/manual-mootools. La idea es seguir viendo métodos de Element.com" id="mienlace" title="Tu mejor ayuda para aprender a hacer webs">DesarrolloWeb. acompañaremos las explicaciones con algunos ejemplos. }). Tenemos un enlace como este: <a href="http://www. en Manual de Mootools: http://www. todosEnlaces. agregando al final la cadena " click aquí".getElements("a"). para adquirir una soltura mayor con el framework. llamamos a otro método de la clase Element. El ejemplo en funcionamiento se puede ver en una página aparte.desarrolloweb.each() hacemos llamadas a una función pasando cada uno de los elementos del array. En este caso. simplemente.body) tenemos una referencia al cuerpo de la página o etiqueta BODY. tiene que quedar claro que en la variable todosEnlaces tenemos un array con todos los enlaces de la página.each(function(elemento){ elemento. la propia función está expresada dentro del parámetro que recibe each. La clase Element es una de las más completas de Mootools.com tienen el copyright de sus autores. Ahora con todosEnlaces.html 41 © Los manuales de DesarrolloWeb.desarrolloweb. que contiene decenas de métodos para realizar acciones sobre el contenido de la página. Hemos visto varias maneras de seleccionar elementos de la página y alterar algunas de sus características principales. con el que vamos a seleccionar en un array todos los enlaces (elementos de etiqueta "a") que hay en el cuerpo de la página.com. para tener en un sólo código los usos de las funciones getElement() y getElements()) Artículo por Miguel Angel Alvarez Más métodos de la clase Element de Mootools En nuestro manual de Mootools hemos presentado ya unos cuantos capítulos sobre el trabajo con la clase Element de Mootols. .

getProperty('href') Ahora. } </style> Si queremos alterar el elemento para aplicarle la clase css anterior. color: #ffffcc. Tu mejor ayuda para aprender a hacer webs www. el método removeClass() lo que hace es eliminar los estilos CSS de una clase.desarrolloweb.desarrolloweb.html 42 © Los manuales de DesarrolloWeb. si es que no la tuviera ya. En el momento que se añade una clase se alteran los estilos del elemento para mostrar las nuevas características CSS que tenga esa clase nueva. Imaginemos que tenemos un elemento como este: <div id=mielemento>Contenidos de un elemento al que voy a añadir y quitar clases de CSS (CSS class)</div> Y una declaración de estilos.setProperty('title'.com/manuales/manual-mootools.removeClass('miclase') Podemos ver una página en marcha basada en este ejemplo. 'pongo otro title') Podemos ver un ejemplo en marcha dedicado a este ejemplo de seleccionar y alterar propiedades de elementos. en la que definimos una clase -class css. No reproducir sin autorización.com este caso el valor del atributo title.getProperty('title') Esto nos devolverá el valor del atributo title. Manual de Mootools: http://www. Por su parte. Si quisiéramos obtener el valor del atributo href haríamos lo siguiente: $('mienlace'). Ahora. padding: 15px.addClass('miclase'). En el siguiente artículo vamos a continuar viendo otros métodos de la clase Element de Mootools. .miclase{ background-color: #666666. haríamos algo como esto: $('mielemento'). es decir. si queremos quitarle la clase miclase a ese elemento haríamos algo como esto: $('mielemento'). $('mienlace').como esta: <style type="text/css"> . Métodos addClass() y removeClass() Otros de los métodos más interesantes de la clase Element son los que permiten añadir una clase a un elemento (una clase de estilos CSS -class-) y eliminarla. hace que el elemento no tenga la clase CSS que le indiquemos por parámetro.com tienen el copyright de sus autores. El método addClass() añade una clase de estilos CSS a un elemento. con setProperty() vamos a alterar el valor del atributo title: $('mienlace').

destroy(). Esto nos borrará todo el elemento. . que vamos a eliminar por completo. padding: 10px.html 43 © Los manuales de DesarrolloWeb.com Artículo por Miguel Angel Alvarez Más funcionalidades de Element Continuamos con las explicaciones de la clase Element. padding: 10px. Podemos ver le ejemplo en funcionamiento en una página aparte.com</a> </div> Se trata de una capa DIV que a su vez tiene diversos elementos dentro. Esto no borrará la capa "mielemento" pero sí todo lo que había dentro. tenemos este elemento: <div id="mielemento" style="background-color: #ffcc00."> <p>Contenidos del elemento. Cuando nos referimos a los contenidos hablamos de todo el texto que haya dentro de la etiqueta y todas las etiquetas que pudiera tener. No reproducir sin autorización. que luego podremos borrar!</p> <a href="http://www.desarrolloweb. Método clone() Manual de Mootools: http://www. Veamos ahora este elemento: <div id="mielemento" style="background-color: #ffcc00.desarrolloweb.com">DesarrolloWeb.com/manuales/manual-mootools. entre la apertura y cierre del elemento. Tu mejor ayuda para aprender a hacer webs www. enmarcadas en el Manual de Mootools que estamos publicando en DesarrolloWeb. A continuación vamos a ver otros métodos interesantes de la clase Element.com</a> </div> Si queremos eliminarlo totalmente de la página haríamos algo como esto: $('mielemento').com tienen el copyright de sus autores. Método empty() Este método sirve para eliminar los contenidos que haya dentro de un elemento de la página. él mismo y todo lo que tuviera dentro. es decir."> <p>Contenidos del elemento.desarrolloweb. pero si queremos borrar todos los contenidos de ese elemento y además el propio elemento.empty(). debemos utilizar el método destroy(). Si quisiéramos borrar todo lo que hay dentro del DIV haríamos esto: $('mielemento'). Podemos ver una página con el ejemplo en marcha.desarrolloweb.com.com">DesarrolloWeb.</p> <a href="http://www. Método destroy() Hemos visto que con empty() podemos borrar todo lo que haya dentro de un elemento. Por ejemplo.

Sin embargo. que es una copia de la imagen que habíamos visto antes. justo después de la imágen clonada previamente. Así pues. Pero con esto no obtenemos ningún resultado. 'after'). Con esto tenemos una varible llamada clonada.com ya hemos visto en algunos ejemplos cómo se realizan eventos. Artículo por Miguel Angel Alvarez Eventos en Mootools: Element Event Los eventos son una de las partes fundamentales de Mootools que debemos dominar para poder hacer componentes dinámicos con Javascript. en una variable que es un objeto de la clase Element.html 44 © Los manuales de DesarrolloWeb. Tu mejor ayuda para aprender a hacer webs www. Con esto la hemos insertado dentro de la página.com Ahora vamos a ver un método de Element que permite clonar cualquier elemento que tengamos en la página. vamos a trabajar con la clase Element de Mootools. la clase Element es la más rica en funcionalidades de Mootools y aun quedan muchas cosas que habría que conocer.clone(). Léase el artículo: inyección de un elemento en la página. este artículo pretendemos que sea el último en el que vamos a tratar la clase Element. No reproducir sin autorización. En el futuro iremos mostrando otros ejemplos que con toda certeza aplicarán conocimientos que hemos relatado sobre Element. . para ir avanzando el manual de Mootools de desarrollo web . a no ser que la inyectemos por algún lado. Ha llegado el momento de ponernos en la tarea de conocer los eventos. que dentro contiene una instancia de Element. que respondan a las acciones realizadas por los usuarios.com y por el momento.com/manuales/manual-mootools.com/images/logo_desarrollo_web. tenemos un elemento como este: <img src="http://www. pero aun no hemos ofrecido explicaciones detalladas sobre cómo crearlos. porque el elemento imagen simplemente está en una variable Javascript de la página y no se está visualizando en el navegador. Podemos ver un ejemplo basado en este código para mostrar el funcionamiento del método clone(). Manual de Mootools: http://www. clonada. Este método recibe el elemento que se desea clonar y devuelve una copia del mismo.com tienen el copyright de sus autores. Por ejemplo. para crearlos y empezar a hacer scripts más interactivos.inject($('miimagen').desarrolloweb.desarrolloweb. Nota: ya explicamos cómo inyectar elementos en la página en un artículo anterior publicado por desarrolloweb en este manual.desarrolloweb. En el Manual de Mootools publicado en DesarrolloWeb. y también cosas nuevas que nos hemos dejado en el tintero.gif" id="miimagen" /> Esto es una imagen que vamos a clonar y para ello haremos lo siguiente: clonada = $('miimagen'). para aprender a crear eventos que respondan a acciones del usuario realizadas sobre cualquier elemento de la página. Como hemos dicho en otras ocasiones.

com Para ello.'). Esta serie de funciones se pueden definir a continuación en el mismo código.. Definir un evento sobre un elemento de la página Suponemos que tenemos un elemento cualquiera de la página.. se accede al elemento a través de la función dólar ($). que se modelizan a través de la clase Element.. al que le pasamos dos parámetros.desarrolloweb. onmouseover. Nota: También debemos decir que lo correcto es añadir el evento (es decir. Luego sobre ese elemento se invoca el método addEvent. function() { $("mielemento"). . function() { alert('Has pulsado "mielemento".com/manuales/manual-mootools.. Tu mejor ayuda para aprender a hacer webs www. recomendamos la lectura de nuestros manuales de Javascript. Como se puede ver. Así que lo correcto es utilizar el evento domready de window.com tienen el copyright de sus autores.addEvent('click'. los elementos de la página. ) pero sin el prefijo "on". function(): Luego se define la función que se debe invocar para realizar la ejecución de acciones relacionadas con la puesta en marcha del evento. Si no sabemos qué son los eventos y cuáles tenemos disponibles.addEvent('domready'.addEvent('click'. con Javascript podemos definir el siguiente código para asignar un evento a este elemento: $("mielemento"). }). abriendo las llaves de la función y luego colocando todas las sentencias a ejecutar cuando se ejecute el evento. No reproducir sin autorización. que recibe el tipo de evento y la función que debe ejecutarse como respuesta al mismo.. Lo veremos con detalle en este artículo. al que queremos asignar un evento. llamar al método addEvent) cuando se ha cargado ya el DOM de la página y está listo para recibir acciones.desarrolloweb. }). }). Nota: Suponemos que ya se conocen lo que son los eventos y qué eventos tenemos disponibles en Javascript para hacer cosas como resultado de las acciones del usuario sobre la página. click sirve para definir un evento que se desata cuando se hace clic sobre el elemento. tienen un método llamado addEvent(). window. function() { alert('Has pulsado "mielemento". Manual de Mootools: http://www. <div id="mielemento">Este elemento</div> Ahora. como se puede ver en este código. Así pues. 'click': es el tipo de evento que queremos definir (onclick..').html 45 © Los manuales de DesarrolloWeb. concretamente los artículos del manual de Javascript II que tratan sobre eventos: Eventos en Javascript y los artículos siguientes del manual. Podemos ver el ejemplo en marcha en una página donde tenemos todos los ejemplos sobre eventos que vamos a ver en este artículo.

No reproducir sin autorización.com tienen el copyright de sus autores.addEvent('change'. Ahora bien. $("miselect"). El ejemplo es similar. Ya hemos podido comenzar a crear eventos con Mootools.com/manuales/manual-mootools. Como sabemos 'this' es una variable que apunta al objeto que recibe una llamada a un método. cuando llamamos a un evento que estamos definiendo en un Manual de Mootools: http://www. ahora vamos a pasar a utilizar una función realmente útil en Mootools. Se trata del método bind(). Artículo por Miguel Angel Alvarez Utilización de bind() en los eventos Mootools Hay un metodo que se utiliza constantemente a la hora de definir eventos en Mootools. En este caso vamos a definir un evento "onchange" sobre un campo select de formulario. this es una referencia al objeto sobre el que se está ejecutando un método. Tenemos este campo select de formulario: <form> <select id="miselect"> <option value="1">Opcion 1</option> <option value="2">Opcion 2</option> </select> </form> Como se puede ver. Para los que lleguen a este artículo del Manual de Mootools de DesarrolloWeb. Para qué sirve Bind() en funciones Mootools Bind() es un método de funciones Mootools que permite cambiar el ámbito de la variable this cuando se invoca una función. pero lo explicaremos en el siguiente artículo.html 46 © Los manuales de DesarrolloWeb. function() { alert('Has cambiado el campo select'). decirles que deben leer antes el artículo anterior.Function de Mootools. bind(). vamos a poner otro código para la ejecución de otro evento sobre otro tipo de elemento de la página. Podemos ver este código funcionando en este enlace. aunque sea ligeramente. que pertenece a la librería Native . con la diferencia que en este caso hemos utilizado el evento "change" que corresponde al mencionado evento de Javascript onchange. Los que dominen. Ahora veamos cómo definir un evento sobre este campo. la programación orientada a objetos bien deben saber que la variable this es muy importante.com Otro ejemplo de creación de eventos en Mootools Para que se pueda entender mejor este sistema para la definición de eventos de usuario en Mootools.com. Tu mejor ayuda para aprender a hacer webs www.desarrolloweb. hemos colocado un identificador en la etiqueta SELECT. . El evento onchange se desata cuando cambia el valor seleccionado en el campo de selección desplegable. en el que da una primera introducción a los eventos de Element. porque nos permite hacer cosas con el objeto con el que se trabaja.desarrolloweb. para poder referirnos a él mediante Mootools. con addEvent(). Dicho de otra manera. }).

}. $("mienlace").desarrolloweb. pero a lo largo del manual de Mootools de desarrolloweb. que tiene el valor de lo que se pasó en bind(). donde el ámbito de la variable this ya no existe.com tienen el copyright de sus autores.bind($("mienlace")) ). para decirle a la función del evento el valor de la variable this que debe tener. function mifuncion(){ //. function() { this.com.set("style". hay veces que tendremos que utilizar bind(). Seguramente lo podamos ver mejor con un ejemplo. Luego. Así pues.addEvent('mouseover'.com veremos más ejemplos sobre bind() mucho más utiles y fundamentales."). A ese enlace se le cambia una declaración de estilo css para ponerle un color de fondo. "background-color: #ff8800. Como se puede ver. "background-color: transparent.com/manuales/manual-mootools.bind($("mienlace")) ). como decía anteriormente en este texto publicado en desarrollo web . Este ejemplo se puede ver en marcha en una página aparte. codigo de la funcion this.. Realmente el ejemplo que hemos puesto no dice mucho sobre la verdadera importancia de bind(). al codificarse en una función distinta. No reproducir sin autorización. Con bind() en una función podemos definir el valor de la variable this dentro de esa función. para ejecutar acciones cuando se retira el ratón del enlace: $("mienlace"). es decir.set("style".desarrolloweb. se debe escribir en la propia declaración de la función. se ha colocado el método bind() pasando como parámetro una variable. que es una referencia al enlace que recibe este evento. después de la llave de cierre. cuando se ejecute esa función. Tenemos este enlace: <a href="javascript:void(0)" id="mienlace">Enlace</a>) Ahora vamos a definir un evento sobre el enlace.bind(contenido_para_this) Así.com objeto. para que las funciones que codifican los eventos sepan qué se debe tener en la variable this. con lo que se podrá practicar sobre este asunto.loquesea() //this toma el valor de la variable contenido_para_this }. con lo que no podríamos acceder al objeto que ha recibido el evento. Ahora vamos a ver un evento similar."). . Así que en un evento no tendríamos acceso a la variable this. que se ha de cargar en this durante la ejecución de la función. Artículo por Miguel Angel Alvarez Manual de Mootools: http://www. $("mienlace"). a la hora de declarar la función. se invoca a una función distinta. que se ejecute cuando el usuario coloca el ratón sobre el mismo.addEvent('mouseout'. function() { this. Tu mejor ayuda para aprender a hacer webs www.. en el código de la función.html 47 © Los manuales de DesarrolloWeb. }. hemos aprendido a utilizar la función bind() a la hora de definir eventos. la variable contenido_para_this se podrá acceder a través de la variable this. por lo que respecta a eventos. Definición de un evento con bind Ahora. el enlace sobre el que se ejecutó el evento. se puede apreciar cómo se utiliza la variable this. Dicho valor.

$("miboton"). }). Manual de Mootools: http://www.html 48 © Los manuales de DesarrolloWeb.fireEvent("click").addEvent("domready".com Más sobre Eventos en Mootools.desarrolloweb. se tienen que indicar en un array. Aquí tenemos el primer ejemplo de este artículo de DesarrolloWeb. Tu mejor ayuda para aprender a hacer webs www.com tienen el copyright de sus autores. automáticamente. En general. una capa DIV o lo que sea) y recibe varios parámetros. Pero todavía hay algunos detalles que se deben comentar y mostrar ejemplos de código para dominar el sistema de eventos. function(){ alert("Evento click en el botón"). Método fireEvent de Element. sin que el usuario haya tenido que realizar nada con ese elemento. Ahora veremos cómo podemos disparar un evento de un elemento de la página. que tenía el id="miboton") generamos el correspondiente evento para cuando se haga clic en el botón. un enlace. • Tipo de evento: el nombre del evento que se desea lanzar. Este método se invoca sobre el elemento de la página del que se quiere ejecutar el evento (un botón o elemento de formulario. Luego crearemos un evento "click" para ese botón y lo invocaremos con fireEvent. lanzar un evento que pertenece a un elemento de la página. en el que vamos a tener un botón HTML. Este sería el botón: <input type="button" value="pulsar" id="miboton"> Ahora veamos el código Javascript con Mootools para crear el evento click y lanzarlo con fireEvent: window. • Parámetros para el evento: uno o varios parámetros que se tienen que pasar a la función que ejecuta el evento. .com/manuales/manual-mootools. function(){ $("miboton"). No reproducir sin autorización. Método fireEvent En nuestro Manual de Mootools hemos explicado ya algunas de las claves del trabajo con eventos. Habría de verse que estamos obligados a utilizar addEvent del evento domready. sin necesidad que el usuario produzca el evento. Si es más de un parámetro.desarrolloweb. }).addEvent("click". ya vimos como asociar un evento a un elemento de la página y también cómo utilizar el método bind() para conseguir cambiar el ámbito de la variable this cuando se está codificando el comportamiento de un evento. para asegurarnos que este código se ejecuta cuando el DOM está listo. Luego se puede ver que con addEvent del evento click sobre el objeto $("miboton") (el elemento HTML botón.com de los dos que vamos a ver sobre el método fireEvent.Event El método fireEvent() sirve para ejecutar un evento de un elemento. • Retardo: número de milisegundos que se tiene que ejecutar el evento. es decir.

fireEvent("click")..html 49 © Los manuales de DesarrolloWeb. onmousedown. onload. como si hubiera sido el propio usuario el que Manual de Mootools: http://www.) en la propia etiqueta del elemento . en este caso un enlace: <a href="http://www. que realmente sólo se ejecuta cuando el DOM está listo. sólo podremos lanzar eventos que hayan sido creados o declarados a partir del método addEvent de Mootools y no eventos que se hayan declarado escribiéndolos con el correspondiente atributo HTML de evento (onclick. El ejemplo se puede ver en marcha en una página aparte.desarrolloweb. a la vez que abrimos las puertas a la creación de eventos personalizados en nuestras aplicaciones Javascript. function(algo){ alert("Este evento me lo he inventado\n" + algo). Ahora podemos ejecutar este evento con fireEvent().desarrolloweb. como si el usuario los hubiese producido. Cabe decir además sobre fireEvent que se puede ejecutar sobre los objetos window y document. de esta manera: $("mienlace"). que será como si el usuario hubiese hecho clic sobre el botón.com Luego. con lo que se pueden lanzar eventos sobre la ventana del navegador o sobre el objeto documento. }). Con la excepción del evento "domready". Vemos ahora que la función que procesa el evento tiene un parámetro llamado "algo" que se muestra en la caja de alerta. con $("miboton"). No reproducir sin autorización. en este segundo ejemplo vamos a crear un método personalizado. Pero ojo. Podemos ver el ejemplo en marcha en una página aparte.com tienen el copyright de sus autores. Tememos un elemento de la página.com/manuales/manual-mootools.com" id="mienlace">Volver a DesarrolloWeb. Segundo ejemplo de fireEvent Veamos un segundo ejemplo. Como se había dicho antes. se ejecuta el evento personalizado "desarrolloweb". etc. . con Mootools es fácil codificar eventos y lanzarlos (ponerlos en marcha) desde el propio código javascript. para acabar de mostrar las posibilidades de los eventos en Mootools que podemos poner en marcha con fireEvent. uno es un parámetro que se le pasa a la función que se encarga de procesar el evento y el otro un retardo para la ejecución del evento.addEvent("desarrolloweb".. Como se puede ver.fireEvent("desarrolloweb". Tu mejor ayuda para aprender a hacer webs www. En este ejemplo queremos mostrar la utilización de otros parámetros de fireEvent. Como se ha podido ver. Además. Importante sobre fireEvent El método fireEvent sirve para ejecutar cualquier tipo de evento de los que se pueden escribir con los manejadores de eventos normales de Javascript: onclick.1000). lanzamos el evento "click". "parametro que le paso a la función". que no tiene nada que ver con cualquier evento de los que existen en Javascript.com</a> Y ahora un código Mootools para crear el evento personalizado "desarrolloweb".desarrolloweb. que creamos como si fuera uno de los eventos normales de Javascript: $("mienlace"). se pueden indicar otros atributos a fireEvent. El evento lo hemos creado personalizado sólo por hacer una prueba y lo hemos llamado "desarrolloweb". se le pasa un parámetro con una cadena de texto y se hace un retardo de 1 segundo (1000 milisegundos).

Artículo por Miguel Angel Alvarez Ejemplo práctico de uso de Mootools .html 50 © Los manuales de DesarrolloWeb. Otra de las ventajas será que podremos tener conviviendo varios campos textarea que cuenten sus caracteres en la misma página. .desarrolloweb. y sin que interfieran entre si las cuentas de caracteres de los distintos textarea del documento. Así podremos instanciar cualquier número de objetos para que realicen estas funcionalidades por si solos y podremos desentendernos de su complejidad y reutilizar el código donde lo deseemos. que implemente las funcionalidades con las que queremos dotar a nuestra página. sino mostrar a los lectores de este manual un uso adecuado del framework. de modo que el lector pueda crear sus propias clases para implementar funcionalidades en el cliente para sus propias páginas. así que estamos en disposición de crear un primer ejemplo que explota muchas de las funcionalidades que estamos aprendiendo.Texarea con cuenta de caracteres Ha llegado el momento de revisar todos los conocimientos adquiridos hasta el momento en el manual de Mootools. con lo que podremos reutilizar el código fácilmente para otros proyectos donde queramos utilizar este "textarea inteligente". la idea de este primer ejemplo global de Mootools no es estudiar o depurar la funcionalidad de este "textarea contador de caracteres".com tienen el copyright de sus autores. Las bases para hacer todo esto las hemos aprendido ya en este manual. Insisto. cuya implementación no requiera duplicar código Javascript. A estas alturas deberíamos conocer también cómo crear un constructor de la clase. Este ejemplo nos dará una visión más global sobre el buen uso de Mootools y su potencia.desarrolloweb. Podemos ver una página con el funcionamiento de este ejemplo en marcha. a la que tendremos que pasar los parámetros para personalizar el comportamiento de ese objeto y asociarlo con los elementos de la página con los que queramos que trabaje. tal como se debe hacer en Mootools. Crear una clase con Mootools para implementar una funcionalidad La manera correcta de proceder para hacer un script con Mootools es crear una clase. así que no debería dar mucho problema entender el código y si no es así.com/manuales/manual-mootools.com hubiese producido el evento con sus acciones sobre los elementos de la página. a la vez que nos ayudará a afianzar los distintos conocimientos que hemos aprendido por separado. La clase tiene un constructor. Hemos visto bastantes cosas ya sobre el manejo de este framework Javascript. En el constructor inicializaremos todos los componentes de los objetos una vez sean creados. de programación orientada a objetos. Tu mejor ayuda para aprender a hacer webs www. simplemente sería releer los artículos en los que se habla de las clases de Mootools . Esa clase podremos instanciarla para crear objetos Mootools que se encarguen de automatizar los procesos dinámicos. Nuestro ejemplo será la construcción de un campo textarea que tenga al lado un texto donde se muestra el número de caracteres que tiene. Lo vamos a construir por medio de programación orientada a objetos. Manual de Mootools: http://www. No reproducir sin autorización.

com En este caso tendremos que recibir el identificador (id) del textarea a contar caracteres y entonces crearemos toda la estructura para mostrar caracteres y crear los eventos para contarlos cuando el usuario los escriba.com tienen el copyright de sus autores. En estas líneas hemos creado un elemento de texto donde mostraremos la cuenta de caracteres.desarrolloweb. "after"). //recupero el elemento textarea con la función dolar this. . //creo un método para contar los caracteres cuentaCaracteres: function(){ //simplemente escribo en el campo contador el número de caracteres actual del textarea this. que recibe el id del textarea initialize: function(idTextarea){ Ver el artículo que habla sobre constructores.textarea. //creo un evento para el textarea. para cuando el usuario suelta la tecla this. //defino un constructor. vamos a mostrar ya el código de la clase y luego iremos comentando las diferentes partes. Luego lo hemos colocado en el código de la página después del textarea.textarea = $(idTextarea). //inyecto el contador después del textarea this. El código de la clase está comentado para que se pueda saber qué se hace en cada paso. } }).html 51 © Los manuales de DesarrolloWeb.desarrolloweb.inject(this. En el resto de la clase tendremos que crear los métodos que estimemos necesarios para implementar las funcionalidades de cuenta de caracteres.bind(this) ). Pero voy a dar una serie de referencias donde podemos entender y aprender todo lo que hemos hecho en el script.textarea. }. "Número caracteres: " + this. "after"). function(){ //simplemente llamo a un método de esta clase que cuenta caracteres this. {"class": "estilocontador"}).textarea. //inyecto el contador después del textarea this.textarea. Tu mejor ayuda para aprender a hacer webs www.campoContador.textarea = $(idTextarea).com/manuales/manual-mootools.value. //creo una clase para conseguir que un textarea tenga un contador de caracteres var TextareaContador = new Class({ Ver el artículo que habla sobre las clases. Ver el artículo sobre la función dólar.campoContador. //creo un elemento SPAN para mostrar el contador this. //llamo al método que cuenta caracteres.set("html". {"class": "estilocontador"}). para inicializar el contador this. con lo que aparecerá cerca.campoContador = new Element ("span". Así pues. }. //creo un elemento SPAN para mostrar el contador this. keyup.campoContador = new Element ("span". que recibe el id del textarea initialize: function(idTextarea){ //recupero el elemento textarea con la función dolar this. //creo una clase para conseguir que un textarea tenga un contador de caracteres var TextareaContador = new Class({ //defino un constructor. No reproducir sin autorización.campoContador. posicionado tal como lo indiquemos en el estilo CSS de la clase Manual de Mootools: http://www.inject(this.addEvent("keyup".cuentaCaracteres().length).cuentaCaracteres().

Ver el artículo de construcción de elementos en la página.cuentaCaracteres(). una vez que el DOM de la página está listo para recibir modificaciones dinámicas por Javascript. Ver también el artículo que habla sobre la instaciación y trabajo con objetos en Mootools El código completo de este ejercicio <html> <head> Manual de Mootools: http://www.desarrolloweb. (El evento "keyup" se activa cuando el usuario pulsa una tecla y luego la suelta. //creo un evento para el textarea. //creo un evento para cuando está listo el DOM de la página window. texto = new TextareaContador("textocontador").set("html".. Ver el artículo sobre el evento "domready" del objeto window que utilizamos para hacer cosas cuando el DOM está listo. function(){ //creo el objeto TextareaContador. con lo que se inicializará el contador de caracteres. para que cuando se escriba algo en el campo se actualice la cuenta de caracteres mostrada al lado del textarea. }).value.bind(this) Aquí se está definiendo un evento. keyup. Para procesar el evento se crea una función que simplemente llama a otro método de la clase donde se realiza la cuenta de caracteres. }. por si en el textarea ya hubiera algún texto escrito previamente. otro = new TextareaContador("otro"). Ver artículo donde se explica el método set de un elemento de la página. Tu mejor ayuda para aprender a hacer webs www.com "estilocontador". Ver el artículo de inyección de elementos en la página. que asociamos con el objeto textarea del objeto.cuentaCaracteres(). Eso ha sido todo el código de la clase TextareaContador. function(){ //simplemente llamo a un método de esta clase que cuenta caracteres this. El constructor termina llamando al método cuentaCaracteres(). que utilizaremos para referirnos a ellos a la hora de crear los objetos para que funcione la cuenta de caracteres. para cuando el usuario suelta la tecla this. .html 52 © Los manuales de DesarrolloWeb. } En este método se actualiza el campo de conteo. pasando el identificador del textarea que se pretende contar caracteres. Ver el artículo donde se habla de la función bind() //llamo al método que cuenta caracteres.length).campoContador.textarea.com tienen el copyright de sus autores.. Ver el artículo donde se habla de eventos.com/manuales/manual-mootools. Ahora sería bueno ver el código HTML que tendremos en la página para crear dos "textareas inteligentes": <textarea id="textocontador"></textarea> <br> <br> <textarea id="otro" cols=50 rows=8>Este textarea tiene texto escrito.addEvent("domready". para inicializar el contador this. No reproducir sin autorización. Por último veamos el código para instanciar los objetos TextareaContador.desarrolloweb. //creo un método para contar los caracteres cuentaCaracteres: function(){ //simplemente escribo en el campo contador el número de caracteres actual del textarea this.</textarea> Sólo necesitamos fijarnos en los Ids de los textarea. "Número caracteres: " + this.addEvent("keyup".textarea. pero sólo en el momento de soltar la tecla). cambiando su propiedad HTML para mostrar la cuenta actual de caracteres.

2. //creo un elemento SPAN para mostrar el contador this. width: 120px.estilocontador{ display: block.com/manuales/manual-mootools. } </style> <script> //creo una clase para conseguir que un textarea tenga un contador de caracteres var TextareaContador = new Class({ //defino un constructor.textarea. }). que recibe el id del textarea initialize: function(idTextarea){ //recupero el elemento textarea con la función dolar this. function(){ //simplemente llamo a un método de esta clase que cuenta caracteres this.inject(this. texto = new TextareaContador("textocontador"). . para cuando el usuario suelta la tecla this..campoContador. //creo un método para contar los caracteres cuentaCaracteres: function(){ //simplemente escribo en el campo contador el número de caracteres actual del textarea this. </script> </head> <body> <form> <textarea id="textocontador"></textarea> <br> <br> <br> <textarea id="otro" cols=50 rows=8>Este textarea tiene texto escrito. {"class": "estilocontador"}).com <title>Textarea que cuenta caracteres escritos</title> <script src="mootools-1. para inicializar el contador this.length).campoContador.addEvent("domready".desarrolloweb. margin-top: 3px.textarea = $(idTextarea).textarea.desarrolloweb. //creo un evento para el textarea.desarrolloweb.. "after").</textarea> </form> <br> <br> <a href="http://www. Tu mejor ayuda para aprender a hacer webs www. }. //inyecto el contador después del textarea this. keyup.campoContador = new Element ("span".js" type="text/javascript"></script> <style type="text/css"> span.1-core-yc. font-size:8pt.bind(this) ).addEvent("keyup". }. otro = new TextareaContador("otro"). } }).value. //llamo al método que cuenta caracteres.cuentaCaracteres(). "Número caracteres: " + this.textarea.desarrolloweb. function(){ //creo el objeto TextareaContador.com">http://www.html 53 © Los manuales de DesarrolloWeb.set("html".cuentaCaracteres(). No reproducir sin autorización.com tienen el copyright de sus autores.com</a> </body> </html> Podemos ver el ejemplo en una página aparte. pasando el identificador del textarea que se pretende contar caracteres. Manual de Mootools: http://www. //creo un evento para cuando está listo el DOM de la página window.

Tu mejor ayuda para aprender a hacer webs www. debes poder entender el mecanismo que vamos a explicar en este artículo. si has seguido el Manual de Mootools que estamos publicando en DesarrolloWeb.com/manuales/manual-mootools.com tienen el copyright de sus autores. que nos sirve como práctica de todo lo visto hasta ahora y de ayuda para afianzar nuestros conocimientos y conocer mejor las posibilidades de Mootools. que hacen uso del framework Javascript. podamos entender el proceso completo de implementación y puesta en marcha de clases útiles para hacer efectos en la página. Esta clase debe prepararse para que realice todas las labores de creación del tip y su visualización en el momento en que el usuario sitúe el ratón sobre los elementos de la página a los que pongamos los tip.com. pero con buenas funcionalidades. para que se pueda utilizar en cualquier elemento de la página con tan solo instanciar un objeto. La clase es la siguiente. Podemos ver el ejemplo que vamos a realizar en este artículo en una página aparte. Artículo por Miguel Angel Alvarez Ejemplo de programación Mootools: Tip simple Con todas las explicaciones vistas hasta ahora sobre Mootools estamos en condiciones de hacer ejemplos sencillos. Pues eso es lo que vamos a hacer en este artículo. (La hemos comentado para que se pueda entender fácilmente) var Tip = new Class({ //propiedad tip: null. . asimilando los conocimientos que ya habíamos adquirido en el manual de Mootools. texto){ //el enlace donde se debe mostrar el tip Manual de Mootools: http://www. Qué son los Tip Tip es una de esas palabras inglesas que ya tenemos incorporadas a nuestro lenguaje. de programación orientada a objetos. En este caso vamos a explicar el proceso de construcción de un sistema para la presentación de tips dinámicos. lo que nos podrá dar una idea exacta de lo que es un tip y nuestros objetivos en esta práctica. que suelen aparecer en los programas o páginas web para aclarar conceptos o funcionalidades de las aplicaciones. Así que. El sistema lo haremos por medio de clases.html 54 © Los manuales de DesarrolloWeb.desarrolloweb. Suelen ser por medio de una información emergente que sale al situarse sobre un elemento. No reproducir sin autorización. Simplemente son unas pequeñas ayudas contextuales. vamos a crear una clase de programación orientada a objetos que mantenga la infraestructura necesaria para la realización de tips de una manera sencilla. La clase Tip Como decíamos. un sistema en Mootools para que podamos asignar fácilmente tips a los elementos de la página que nosotros queramos.desarrolloweb. para realizar efectos e interfaces dinámicas sobre páginas web. que hemos simplificado bastante para que sea más fácil de entender. //constructor initialize: function(enlace.com Espero que con este ejercicio.

Si te fijas. Uno es el evento que se está recibiendo. function(evento){ //la función que va a ejecutarse con el evento recibe un parámetro evento que es un objeto event de mootools //hago una comprobación para saber si el tip no existe como objeto if (!$defined(this. "style": "top:" + (evento.desarrolloweb.enlace. //inyecto el tip en la página this. Porque si estuviera viéndose el tip no tendría que volverlo a mostrar.html 55 © Los manuales de DesarrolloWeb. que sirve para definir acciones cuando el usuario pone el ratón sobre el elemento. .client. No reproducir sin autorización.tip sea null cuando el tip no Manual de Mootools: http://www. Así que con evento.x tengo la coordenada x de la posición del mismo.desarrolloweb. "after").tip.addEvent('mouseover'. o si se hubiera ocultado. //modifico varios estilos css //utilizo las propiedades evento. Dentro del evento utilizo la función del core de Mootools $defined sobre this.com/manuales/manual-mootools. sobretodo para las personas que no tienen mucha experiencia. La creación del evento 'mouseover'.tip. lo voy a quitar de la página this.client.inject(this. no tendría que intentar volver a ocultarlo.tip.enlace.client. Tu mejor ayuda para aprender a hacer webs www. //definimos un evento cuando el ratón sale del enlace this. se define por medio de una función.enlace. } }). para saber si se ha mostrado el tip en un momento dado en la página o si no. 'mouseover'.x para saber la posición del ratón y mostrar el tip sobre esa posición. function(evento){ //compruebo que el tip estaba definido if ($defined(this. y con evento. sobre el elemento al que se debe colocar el tip.bind(this)).bind(this)).y + 10) + "px. } }.addEvent('mouseout'. {"class": "clasetip"}). Los elementos que tienes que identificar son los siguientes: La propiedad "tip".com tienen el copyright de sus autores. en concreto para situar el tip cerca de la posición actual del ratón. Además.y y evento. left:" + evento. en el código nos hemos preocupado que this. Es un pequeño pedazo de código fácil de seguir por medio de los comentarios.x + "px." }).tip = new Element("div". que contendrá el objeto Element con la capa que se tiene que mostrar cuando se debe visualizar el tip. Esa función opcionalmente puede recibir algunos parámetros.texto.tip)){ //si el tip no estaba definido //creo un elemento DIV donde voy a meter el tip this. El constructor (función initialize).enlace = $(enlace). //aplico varias características al elemento HTML this.tip = null } }.destroy(). que tiene una serie de datos útiles que vamos a utilizar más tarde en la función del evento.set({ //el texto del elemento "html": this.texto = texto. que recibe el identificador del elemento al que queremos colocarle un tip y el texto del tip.y tengo la coordenada y de la situación del ratón cuando se produjo el evento. aunque a veces Mootools resulta un poco críptico.client. //definimos un evento cuando el ratón pasa sobre el enlace this.tip. //además coloco null en la variable tip para dejarlo no definido this.client.tip)){ //si el tip estaba definido. //el texto que habrá dentro del tip this.client.com this.

. Y con todo esto ya tenemos tips funcionando en cualquier elemento de la página donde los necesitemos. En ese caso tenemos que destruir el tip y poner la variable this. Manual de Mootools: http://www.tip a null.addEvent("domready". border: 1px solid #cccccc. Configurar tips en elementos diversos de la página Para utilizar esta clase tan solo necesitamos crear elementos con HTML. que podría ser como esto: div.clasetip{ padding: 5px. function(){ var enlaceTip = new Tip("enlacecontip". background-color: #ededed. Todo el código de este ejemplo de tips simples en Mootools Aquí dejamos el código completo de esta práctica: <html> <head> <title>tip en Mootools</title> <style type="text/css"> div. Esto quiere decir que en algún lugar de la página debemos definir una declaración de estilos para esa clase CSS. {"class": "clasetip"}).clasetip{ padding: 5px. var otroTip = new Tip("estotambientienetip". "Este es el texto del tip. Por ejemplo: <a id="enlacecontip" href="http://www. border: 1px solid #cccccc. }).com está visualizándose. background-color: #ededed. preparada para volver a mostrarse si se produce más adelante un nuevo evento 'mouseover'. Un detalle: al crear la capa del tip se le asigna una etiqueta div y una clase CSS llamada "clasetip".tip = new Element("div".. position: absolute. No reproducir sin autorización. } </style> <script src="mootools-1.desarrolloweb. Tu mejor ayuda para aprender a hacer webs www..com tienen el copyright de sus autores.. con un código como el siguiente: window.html 56 © Los manuales de DesarrolloWeb. } Localiza en el código de la clase también el evento 'mouseout' que se ejecuta cuando el usuario retira el ratón sobre un elemento.desarrolloweb..com/manuales/manual-mootools.2.1-core-yc. "Otro tip en marcha. por medio de este código: this. font-size: 9pt.com">Enlace</a> <div id="estotambientienetip">Esta capa también tiene tip</div> Luego tendremos que instanciar los tip asociados a estos elementos. font-size: 9pt. position: absolute..").desarrolloweb."). los que deseemos que tengan un tip asociado.js" type="text/javascript"></script> <script> var Tip = new Class({ //propiedad tip: null.

com/manuales/manual-mootools. //definimos un evento cuando el ratón pasa sobre el enlace this. {"class": "clasetip"}). //el texto que habrá dentro del tip this.enlace. lo voy a quitar de la página this.bind(this)).client..html 57 © Los manuales de DesarrolloWeb.addEvent("domready"..bind(this)). //aplico varias características al elemento HTML this.set({ //el texto del elemento "html": this.tip.x para saber la posición del ratón y mostrar el tip sobre esa posición.tip. }). function(){ var otroTip = new Tip("estotambientienetip". //inyecto el tip en la página this. No reproducir sin autorización.addEvent('mouseout'. </script> <br> <br> <br> <div id="estotambientienetip">Esta capa también tiene tip</div> <script> window.tip = new Element("div". hemos creado otro elemento que tendrá tip").enlace = $(enlace). Tu mejor ayuda para aprender a hacer webs www. function(){ var enlaceTip = new Tip("enlacecontip".enlace.desarrolloweb. //además coloco null en la variable tip para dejarlo no definido this.destroy().addEvent('mouseover'.texto = texto. //modifico varios estilos css //utilizo las propiedades evento. } }.desarrolloweb. "Por ver un poco las posibilidades del sistema. </script> </head> <body> <a id="enlacecontip" href="http://www.texto.tip = null } }.tip)){ //si el tip no estaba definido //creo un elemento DIV donde voy a meter el tip this.client. "Este es el texto del tip.addEvent("domready".com">Enlace</a> <script> window. . texto){ //el enlace donde se debe mostrar el tip this. }). function(evento){ //compruebo que el tip estaba definido if ($defined(this.com"). "style": "top:" + (evento.com tienen el copyright de sus autores.client.tip)){ //si el tip estaba definido.client. </script> Manual de Mootools: http://www.x + "px.desarrolloweb. } }).y + 10) + "px. left:" + evento.tip.enlace." }). //definimos un evento cuando el ratón sale del enlace this.com //constructor initialize: function(enlace. function(evento){ //la función que va a ejecutarse con el evento recibe un parámetro evento que es un objeto event de mootools //hago una comprobación para saber si el tip no existe como objeto if (!$defined(this.y y evento. "after").inject(this. pulsa el enlace para ir a DesarrolloWeb.

desarrolloweb. Código HTML El código HTML que necesitaremos para este ejemplo es muy sencillo. Tu mejor ayuda para aprender a hacer webs www. estamos en condiciones de afrontar pequeños scripts que añaden diversos dimanismos en una página web. . Tips mejorados con un plugin Mootools Un último detalle. estamos haciendo una serie de artículos con ejemplos de uso. Simplemente será un formulario que tiene un campo INPUT password. Por ahora dejamos el enlace a la documentación de los tips de Mootools. Ahora vamos a mostrar otro script sencillo para realizar un campo de clave (input de tipo password) que tiene un avisador de la fortaleza de la contraseña escrita. Este sistema. para que los lectores puedan seguirlos y aprender de paso cómo incorporar Mootools a sus páginas web. Como ya sabemos.com </body> </html> Y también un enlace para ver ver el ejemplo en marcha. pero la verdad es que se podría mejorar bastante el sistema para que fuera realmente potente. que sirve para hacer tips de una manera mucho más versátil y detallista. cualquier ejemplo Mootools tiene una serie de componentes que hay que ver por separado. con intención de repasar los conocimientos adquiridos y afianzarlos por la práctica. En este sentido ya publicamos dos artículos prácticos. simplificados en la medida de lo posible. Podemos ver el ejemplo que vamos a explicar en una página aparte. donde el usuario debe escribir la clave. que es el nombre (id="clave") que nos va a servir para acceder al campo desde Mootools. <form> Clave: <input type="password" id="clave" name="clave"> </form> Hay que fijarse en el atributo id del INPUT.com tienen el copyright de sus autores. sirve para informar al usuario sobre lo débil o fuerte que es la clave que ha escrito.com.desarrolloweb. En este sentido queremos recomendar el estudio de un plugin que viene instalado con Mootools. simples pero ilustrativos de las posibilidades que tenemos utilizando este framework Javascript: Texarea con cuenta de caracteres y Tip Simple. que hemos podido ver en algunas páginas y que queda muy bien.com/manuales/manual-mootools. Manual de Mootools: http://www. Se trata que este sistema de tip lo he creado de manera que sea sencillo para explicar y entender. No reproducir sin autorización. aunque más adelante sin duda nos pararemos a estudiar la implementación de estos tips avanzados. Artículo por Miguel Angel Alvarez Script sencillo con Mootools: fortaleza de una clave Con lo que hemos visto hasta el momento en el Manual de Mootols publicado en DesarrolloWeb. Así que.html 58 © Los manuales de DesarrolloWeb.

debe crearse un evento asociado al campo INPUT password para que. } . } . hemos separado una serie de estilos CSS. media o fuerte) en el elemento que se había generado para mostrar el mensaje de fortaleza de la clave. cuando el usuario escriba texto en ese campo password. } </style> Como hemos podido ver. Este constructor debe situar en la página. <style type="text/css"> .com Código CSS Además. que se encargará de evaluar lo que el usuario haya escrito en el campo password. cambie el mensaje que muestra la seguridad de la clave. que se crearon para darle más visibilidad al mensaje. Para ir imaginándola previamente.com/manuales/manual-mootools. debe evaluarse por primera vez la clave para mostrar su fortaleza Además. Para que sea más visual y vistoso. tenemos una clase llamada "avisoclave" que es general. Clase Mootools para generar el aviso de fortaleza de la contraseña Ahora viene la parte más bonita. Una vez que hemos entendido algo los requisitos de este sistema. que es en la que creamos el script Javascript con la clase Mootools que automatizará todo el proceso de visionado del estado de seguridad de la clave. } . Además. Rojo cuando la clave es débil. Luego. aunque la más complicada de entender. que valdrán en todos los casos. al lado del campo INPUT password un contenedor para mostrar el mensaje de fuerza o debilidad de la clave.clavemedia{ color: #cc8800. Además.com tienen el copyright de sus autores. que inicialice el objeto que se encargará de mostrar la fortaleza. decidir el nivel de consistencia de la clave Según el nivel de la clave.html 59 © Los manuales de DesarrolloWeb. naranja cuando es medianamente segura y verde cuando es una clave con una fortaleza adecuada.desarrolloweb. También tendremos un método en la clase.clavefuerte{ color: #009900. para mostrar la fuerza o debilidad de la contraseña.desarrolloweb. pensar que la clase Mootools debe contener: Un constructor.avisoclave{ margin-left:10px. Luego tenemos 3 clases para cada uno de los posibles estados de fuerza o debilidad de la contraseña. vamos a ver el código Manual de Mootools: http://www. Tu mejor ayuda para aprender a hacer webs www. . con estilos generales para el mensaje de aviso de fortaleza de la clave. display: inline. según la fortaleza o debilidad. podrá tener 3 colores distintos.clavefloja{ color: #990000. Este método debe recuperar el value del campo INPUT password. debe escribir lo que toque (clave débil. No reproducir sin autorización. debe asignar las clases de CSS correspondientes. viendo lo que hay en ese INPUT. font-size: 9pt. que servirán para personalizar la apariencia del mensaje de fortaleza de la clave.

mensajeFuerzaClave. //si el mensaje de la fuerza tenía la class de CSS "clavemedia"."Clave fuerte").length <= 4){ //escribo en el mensaje de fuerza que la clave es floja (débil) this.muestraFuerzaClave().mensajeFuerzaClave. No reproducir sin autorización.mensajeFuerzaClave. } } } }). hasClass() y removeClass(). cuando se escriba algo en el campo password. para que se pueda entender mejor qué se hace en cada paso.mensajeFuerzaClave.hasClass("clavemedia")) this.mensajeFuerzaClave. if(this.html 60 © Los manuales de DesarrolloWeb."Clave floja"). if(this.hasClass("clavefuerte")) this.campoClave = $(miCampoClave).mensajeFuerzaClave. //si el mensaje de la fuerza tenía la class de CSS "clavefuerte".mensajeFuerzaClave.removeClass("clavefuerte"). this. debes haber seguido en desarrollo web . //creo un elemento para mostrar al usuario la fuerza de la clave escrita this.campoClave.removeClass("clavemedia").value.mensajeFuerzaClave. constructor.hasClass("clavemedia")) this.mensajeFuerzaClave.hasClass("clavefloja")) this.mensajeFuerzaClave. . this. }else{ if (claveActual. al menos los que tratan sobre la creación de clases y métodos.bind(this)).set("html". if(this. function(){ this. {"class": "avisoclave"}). }. la clase Element y la creación y manejo de eventos. Tu mejor ayuda para aprender a hacer webs www. //inyecto el elemento después del campo clave this.campoClave. //creo un evento para que.com el Manual de programación con Mootols .hasClass("clavefloja")) this.set("html". para saber si un elemento tenía una clase determinada y para eliminar una class de CSS de un elemento.mensajeFuerzaClave. El código se ha comentado. }.addClass("clavefuerte").desarrolloweb. Quizás no habíamos visto todavía los métodos de Element addClass().mensajeFuerzaClave.removeClass("clavefuerte"). }else{ this.muestraFuerzaClave().addClass("clavemedia").mensajeFuerzaClave. No obstante.length <= 6){ this. no cabe duda que.desarrolloweb. "after").mensajeFuerzaClave = new Element ("div" . para entenderlo. la quito if(this.addEvent("keyup".mensajeFuerzaClave.mensajeFuerzaClave.set("html". Manual de Mootools: http://www. //compruebo la fuerza.removeClass("clavefloja").inject(this. que sirven respectivamente para añadir una clase de CSS al elemento de la página que recibía ese método.removeClass("clavemedia"). //método para mostrar la fuerza de una clave muestraFuerzaClave: function(){ //recupero el texto escrito en el campo password claveActual = this. la quito if(this. //llamo a un método de esta clase para que muestre la fuerza de la clave this.com fuente de esta clase Mootools.hasClass("clavefuerte")) this. var ValidadorClave = new Class({ //creo el constructor initialize: function(miCampoClave){ //obtengo el elemento del campo password this."Clave media").com tienen el copyright de sus autores. a través de la longitud de la clave if (claveActual.addClass("clavefloja").mensajeFuerzaClave. se actualice la fuerza de la clave this.mensajeFuerzaClave. //añado la class de CSS "clavefloja" para que el texto se muestre con ese estilo this.mensajeFuerzaClave. if(this.com/manuales/manual-mootools.removeClass("clavefloja").mensajeFuerzaClave.campoClave.

como las dimensiones de área disponible donde se muestran las páginas web o los distintos scrolls o desplazamientos realizados o posibles en la página completa. window.com. pero realmente para saber si la clave es fuerte o dévil habría que ver también otras cosas.getSize en Mootools Hacemos un pequeño inciso en el manual de Mootools para explicar un detalle que es importante para tratar con la función window. No reproducir sin autorización.. cuando la página está lista para recibir instrucciones que van a alterar el DOM.desarrolloweb. }). si tiene números y letras.. llamada getSize(). Explicaré al final del artículo cómo hacer esto mismo para Mootools 1. Al constructor simplemente se le pasa el id que tiene el campo password que queremos asociar al verificador de la seguridad de la clave. etc. dentro de la ventana del navegador. como si se han combinado mayúsculas y minúsculas. que depende de la configuración del usuario).2 del framework ha cambiado un poco la función getSize(). porque realmente ya se ha explicado todo lo que tendrías que saber para construir este sistema de verificación de la fortaleza de una clave. sino la parte donde se muestran las páginas.1. que sirve para que el navegador nos devuelva varios valores. si no. simplemente te recomiendo repasar el manual de Mootools de DesarrolloWeb. Dicho método depende del objeto window.com tienen el copyright de sus autores. como decimos. Atención: cuando hablamos del área del espacio útil del navegador NO nos referimos al área de la pantalla. Resulta que en la versión 1. Tu mejor ayuda para aprender a hacer webs www. se instancie un objeto de la clase ValidadorClave. o incluso otros caracteres como espacios.getSize(). que está Manual de Mootools: http://www. function(){ var miValidadorClave = new ValidadorClave("clave")..1 ACTUALIZADO: Estas explicaciones que vienen a continuación son para Mootools versión 1. Eso es todo! Esperamos que se haya podido entender. Obtener las dimensiones de Window en Mootools 1. . Para obtener los datos en Mootools de las dimensiones de la ventana del navegador hay una función. simplemente miramos la longitud de la clave.html 61 © Los manuales de DesarrolloWeb. Conocer el área de trabajo disponible del navegador nos puede servir para estructurar los espacios disponibles para la maquetación o para mostrar elementos en posiciones específicas o con tamaños definidos.. Esto hace que. mostramos el código fuente en Javascript que tendríamos que colocar para instanciar el objeto que evalúa la seguridad de la contraseña y lo asocia al campo INPUT password colocado en el código HTML. que variarían según la medida de la ventana del navegador y la configuración de elementos de la interfaz que tenga el usuario.desarrolloweb. Artículo por Miguel Angel Alvarez window.addEvent("domready".com/manuales/manual-mootools. porque ésta suele ocupar un espacio mayor (por ej la definición de pantalla 800x600.2. después de quitar toda la interfaz de menús y botones del browser.com Un detalle que cabe señalar es que en este script. Instanciar el objeto para validar la seguridad de la clave Por último. puntos. creemos que a mejor. para decidir si una clave es o no segura.

No reproducir sin autorización.js. un objeto con una serie de propiedades acerca de las dimensiones del elemento. que a su vez tienen dos propiedades. que puede ser o no mayor que el área disponible para mostrarla.Size.html 62 © Los manuales de DesarrolloWeb. o mejor dicho. 'size': {'x': 400. x e y. • Size: El tamaño del área útil de la ventana del navegador.com extendido por el framework Mootools en el archivo Window. con las barras de desplazamiento horizontales y verticales respectivamente. al espacio útil del navegador. Manual de Mootools: http://www.com tienen el copyright de sus autores. 'y': 600}. donde se mostrarán las páginas. devuelve un objeto que tiene tres propiedades: scroll.getSize(). que devuelve lo mismo que el método Element. 'y': 10}. El que nos interesa es window. el objeto devuelto tiene estas propiedades: { 'scroll': {'x': 10.com/manuales/manual-mootools. que son valores de tamaños en horizontal y vertical. pongo una imagen esquemática sobre los valores de getSize(). Para que quede claro.js.getSize(). Esto es.Size. Tu mejor ayuda para aprender a hacer webs www. destinado a mostrar la página web. 'scrollSize': {'x': 600. aunque lo vamos a explicar algunas cosas en este artículo. En el caso del objeto window se refiere a la ventana. • scrollSize: El tamaño de la página completa. Si es mayor quiere decir que para mostrar toda la página se tendrán que mover las barras de desplazamiento horizontales o verticales.Size. 'y': 1000} } Por explicarlo con palabras. (mirar la documentación de Mootools) para saber acerca de Window. Cada uno de esos tamaños significa: • Scroll: El desplazamiento que se ha hecho en la página.desarrolloweb. Window. size y scrollSize. En concreto.desarrolloweb.js incorpora varios métodos al objeto window del navegador. .

y).w3.size() en Mootools: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.desarrolloweb.scrollSize.js" type="text/javascript"></script> <script> function dameTamanos(){ tamanos = window. Window.dtd"> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html. } window. .x + " x " + tamanos.html 63 © Los manuales de DesarrolloWeb. dameTamanos).getSize() para mootools 1.scrollSize. window.size. Tu mejor ayuda para aprender a hacer webs www.org/TR/xhtml1/DTD/xhtml1- strict. alert ("Scroll: " + tamanos.scroll.com Dejo aquí un ejemplo de uso de window.size.0 Strict//EN" "http://www. </script> </head> <body> <h1>Ejemplo de prueba de size en Mootools</h1> ? </body> </html> Podemos ver el ejemplo en marcha en una página aparte.x + " x " + tamanos.charset=ISO-8859-1"> <title>Ejemplo Size</title> <script src="mootools-release-1.y).y).getSize().scroll.com/manuales/manual-mootools.2 Manual de Mootools: http://www. dameTamanos). alert ("Tamaño del área disponible: " + tamanos. alert ("scrollSize: " + tamanos.desarrolloweb. No reproducir sin autorización.11.addEvent('resize'.x + " x " + tamanos.com tienen el copyright de sus autores.addEvent('domready'.

2 es que ahora todas las propiedades de dimensiones de window no dependen de un único método getSize().0 Strict//EN" "http://www. Para obtener el scroll realizado sobre la página tenemos el método window.getScroll() y para saber cuan grande es el área de la página (lo que se ve más la parte que queda fuera. Por lo tanto. Mootools tiene una serie de métodos. implementados en window y en la clase Element. Con este Doctype no vamos a tener ningún problema. Doctype adecuado para getSize() en Mootools Atención a este pequeño gran detalle: dependiendo de la declaración Doctype que hayamos puesto en la página la función getSize() de Mootools funcionará bien o no en Internet Explorer. En Firefox no existe este problema. . //en dimension. pero en Internet Explorer. que sirven para obtener dimensiones de elementos de la página o de la propia ventana del navegador. Pero lo que sí que cambia en Mootools 1. Tu mejor ayuda para aprender a hacer webs www.y tenemos el tamaño en pixels del área en vertical. te puede hacer perder bastante tiempo. utilizamos window. No reproducir sin autorización.dtd"> O bien este otro: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. para obtener las dimensiones del área disponible del navegador hacemos: dimension = window.x está el tamaño en pixels horizontal del área donde se muestra la página.com tienen el copyright de sus autores.com/manuales/manual-mootools. //en dimension.desarrolloweb.html 64 © Los manuales de DesarrolloWeb. Artículo por Miguel Angel Alvarez API Panoramio + ejemplo de JSON con Mootools En este artículo queremos presentar el API de Panoramio. Estos tres métodos tienen como respuesta un objeto que contiene dos propiedades x e y.getSize(). por lo que se pueden utilizar para ilustrar páginas Manual de Mootools: http://www. con Mootools se ha implementado un método en window llamado getSize().w3. si no lo conoces. si no utilizamos un Doctype adecuado.2.0 Transitional//EN" "http://www. utilizamos window.com Actualizado (19/08/2008): Tal como hemos explicado en las anteriores líneas. Esto no ha cambiado.dtd"> Este es un detalle que.org/TR/xhtml1/DTD/xhtml1- transitional. Ahora. aunque seguramente funcione también con otros doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.getSize().org/TR/xhtml1/DTD/xhtml1- strict.desarrolloweb. ahora en Mootools 1. pero que podemos ver haciendo scroll -desplazando con las barras de desplazamiento-). Aunque en foros está comentado y ha sido fácil encontrar la solución. para obtener el área disponible de espacio para la página. por el que podemos obtener fotografías de lugares del mundo que los usuarios de Panoramio han enviado al servidor. Todas las fotos están localizadas geográficamente.getScrollSize(). con las coordenadas o tamaños que correspondan. los valores de size nos van a dar cero.w3.

porque consiste únicamente en una URL dirigida al sitio web de Panoramio. Existen diversos sistemas para procesar objetos JSON en diferentes lenguajes para desarrolladores del web. Los datos recibidos están generados en JSON.Remote. ASP. ordenadas por popularidad. como Javascript. estos objetos son las propias fotos seleccionadas con nuestra consulta. Yo me he dedicado a jugar un poco con el API de Panoramio utilizando el Framework Javascript Mootools. el tamaño de las mismas. No reproducir sin autorización. para recibir 10 fotos de la ciudad de León.desarrolloweb.5&maxy=42. El API de Panoramio en realidad es muy sencillo de usar.65&size=medium Qué recibimos con la URL de consulta al API de Panoramio Cuando recibimos datos de la URL con la que se realiza la consulta al API de Panoramio. Todo el procesamiento del JSON lo basamos en un método de Mootools llamado Json. con los datos de las propias fotos.html 65 © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. Podemos especificar el lugar geográfico donde se deben buscar fotos. que tiene interesantes funciones para recibir un archivo de código de objetos JSON y procesarlo.com/manuales/manual-mootools. que se envían por GET en la propia URL. una especificación de un lenguaje con una notación de objetos de Javascript.com web de lugares del mundo o para añadir información gráfica a nuestros mapas de Google. en lenguaje JSON. Para ello conviene dejarse ayudar por algún sistema que permita procesar los JSON de una manera cómoda. con el objetivo final de mostrarlas en una página web. Para el uso del API os enviamos directamente a la propia página del API. con los que especificar las fotos que queremos obtener.panoramio. declaraciones de objetos.php?order=popularity&set=full&from=0& to=10&minx=-5. Tu mejor ayuda para aprender a hacer webs www. sino un texto con los datos de las fotos que se han encontrado y seleccionado conforme a la configuración de la URL. fácilmente entendible por seres humanos.desarrolloweb. Action Script. Podemos ver más información de JSON en español en la propia página de especificación de JSON. en realidad lo que estamos recibiendo no son las fotos propiamente dichas. etc. que es el que recibe el texto con los objetos y nos permite volcarlo a objetos Mootools. Este ejemplo de uso del API de Panoramio también puede servir de ejemplo de utilización de JSON en Mootools.8&miny=42.com/map/get_panoramas. en la que indicamos una serie de parámetros. la cantidad de fotos que queremos recibir. Manual de Mootools: http://www. sino simplemente unas notas sobre qué podemos hacer para mostrarlas. podríamos componer una URL como esta: http://www. . donde se explica en español la configuración de la URL para recibir las fotos: API de Panoramio Por ejemplo. Lo cierto es que no caben muchas explicaciones con respecto al uso del API. JSON permite escribir con código fuente.59&maxx=-5. etc. en España. PHP. de modo que podamos utilizarlo en nuestros propios scripts Javascript. En el caso del API de Panoramio. de tamaño medio. Incluso hay librerías que nos facilitan la tarea a unas pocas líneas de código. La complicación entonces será procesar ese texto recibido de la consulta al API de Panoramio.

requiero_fotos. Por el momento.photos[i].com Lo malo es que todo esto tiene cierta dificultad. } $('muestrafotos'). la complicación está en entender el Json. {onComplete: function(fotos){ … El archivo get_panoramas.photo_title. que he colocado en nuestro servidor.photo_url + "' target=_blank>Ver la foto en Panoramio</a>".59&maxx=-5. }}). i++){ HTMLfotos += "<img src='" + fotos. <div id="muestrafotos"></div> Por ahora la capa está vacía.photo_file_url + "'>". El problema es que Ajax da un "Permiso denegado" al intentar acceder a un archivo remoto. Algo como esto: var requiero_fotos = new Json. Problema de acceso a una URL de otro servidor con Ajax y Json. HTMLfotos += "<a href='" + fotos.photos[i]. HTMLfotos += fotos.Remote El código. En la página web he colocado una capa donde mostraré las fotos recibidas del API de Panoramio.send(). HTMLfotos += "<br>".com tienen el copyright de sus autores.desarrolloweb. que contenga el código JSON de las fotos.owner_name HTMLfotos += "<br>".Remote("get_panoramas.length.com donde podréis aprender algo de Mootools con lo que entender un poco más todas estas cosas y donde esperamos en breve explicar temas avanzados que nos hagan dominar este ejemplo y perfeccionarlo más aún. HTMLfotos += "<p>". pero la llenaré una vez recibidas y procesadas las imágenes.photos[i].com/manuales/manual-mootools. Manual de Mootools: http://www. por falta de tiempo. HTMLfotos += "<br>".com) no funciona en ningún navegador.php?order=popularity& set=full&from=0&to=10&minx=-5. i<fotos. {onComplete: function(fotos){ HTMLfotos = "".Remote. publicado en nuestro propio servidor. Para ello utilizo este código: var requiero_fotos = new Json. tal como lo he dado. Con ello he obtenido el listado de las fotos y las he colocado en nuestro servidor para hacer pruebas. for (i=0.setHTML(HTMLfotos).desarrolloweb. dejo un enlace con el ejemplo en marcha de uso del API de Panoramio.Remote("http://www. que espero poder explicarlo en un futuro próximo.photos. que no voy a tratar en este artículo. contiene el texto del código JSON con los objetos de las fotos que he consultado en Panoramio y luego guardado con la opción guardar como del navegador.html 66 © Los manuales de DesarrolloWeb.5&maxy=42.txt. . Como decía. Cabe decir que estamos publicando un manual de Mootools en DesarrolloWeb. La solución pasaría por llamar a un archivo en local. Pero espero que se pueda entender algo. HTMLfotos += "Foto de: " + fotos.txt".photos[i].com/map/get_panoramas. Tu mejor ayuda para aprender a hacer webs www.panoramio. me funciona en local en Internet Explorer y en remoto (publicado en el servidor de DesarrolloWeb.65&size=medium".8&miny=42. No reproducir sin autorización.

O simplemente lo podría obtener con PHP y procesarlo directamente con este lenguaje en el servidor.html'. url: 'archivo-html-solicitud. realizará una conexión con Ajax para traerse los contenidos de un archivo HTML. debemos referirles a nuestro Manual de Mootools. que también tiene librerías de soporte a JSON. pero esperamos que con unos mínimos conocimientos se pueda seguir el ejemplo. En este primer caso veremos un reducido juego de opciones y eventos de los que podemos utilizar en la clase. Luego id="mienlace". . veamos el código HTML que necesitaríamos para crear un enlace. ejemplo sencillo Vamos a ofrecer unas notas para aprender a programar con Ajax usando el framework Javascript Mootools.txt.desarrolloweb. La solución a esto podría ser obtener ese archivo por medio del servidor.com tienen el copyright de sus autores. No reproducir sin autorización. Primero el href="javascript:void(0)". Artículo por Miguel Angel Alvarez Ajax con Mootools. <a href="javascript:void(0)" id="mienlace">Pulsa este enlace</a> El enlace tiene dos cosas que comentar. Para realizar una conexión Ajax tenemos que instanciar un objeto de la clase Request. Código HTML Antes que nada. para mostrarlos en una caja de alerta.html 67 © Los manuales de DesarrolloWeb. Podemos ir viendo el objetivo a conseguir en este ejercicio. que sirve para darle un nombre a ese enlace para poder referirnos a él desde Javascript. Manual de Mootools: http://www.2. El ejercicio consiste en crear un enlace que. var prueboRequest = new Request({ method: 'get'. al pulsarlo. Para los que no sepan lo que es Mootools. con programación PHP y luego guardarlo en nuestro servidor antes de procesarlo con Mootools. que sirve para que el enlace no haga nada al pulsarse. Espero que todos estos problemas no desanimen y sirvan para aprender.com Lo malo de este sistema es que las fotos no se actualizan. que nos servirán para configurar la conexión y especificar las acciones a realizar durante el proceso de ejecución de la conexión. onRequest: function() { alert('Acabas de iniciar una solicitud por Ajax!'). sino que siempre son las mismas que obtuve el día que guardé el archivo get_panoramas. Tu mejor ayuda para aprender a hacer webs www. luego modificaremos su comportamiento con Mootools. La versión del framework que estamos utilizando en estos momentos es Mootools 1. Dicha clase es como un envoltorio del XMLHttpRequest de Javascript. Para realizar estos ejemplos sencillos de Ajax utilizaremos la clase Request de Mootools.com/manuales/manual-mootools. que se utiliza para crear conexiones Ajax.desarrolloweb. Configurar una conexión Ajax con Request de Mootools Ahora veamos qué se debería hacer para configurar una conexión conAjax mediante la clase Request de Mootools. }. que se crea indicando una serie de opciones y eventos. En este artículo vamos a dar por sabidas muchas cosas de Mootools. a través de la realización de un sencillo ejemplo. Intentaré más adelante dar nuevas claves o trucos para el trabajo con el API de Panoramio.

Pero tenemos que conectar estos dos elementos. <html> <head> <title>Request de Mootools</title> <script src="mootools-1.2-core-yc.com tienen el copyright de sus autores. En nuestro ejemplo será por GET url: Con esto indicamos la URL a la que queremos conectar con Ajax. se ha creado un objeto prueboRequest que es una instancia de la clase Request.send(). A continuación se debe escribir el código de la función que se ejecutará al desatarse el evento. El segundo contendrá la respuesta XML del Request.js" type="text/javascript"></script> </head> <body> Manual de Mootools: http://www.desarrolloweb. Para ello tenemos que añadir un evento al enlace y debemos realizarlo así en Mootools: //función que se va a ejecutar cuando esté listo el dom window. que tiene la particularidad de recibir dos parámetros. Asociar esa conexión a un evento de clic en el enlace Hasta ahora tenemos un enlace HTML y una instaciación de un objeto de la clase Request. Este método sirve para poner en marcha la conexión Ajax. que se ejecutará cuando se inicie la conexión con el archivo. que es un método que se llama sobre el objeto Request creado.} }).send(). También debemos fijarnos en el último . onRequest: Esto sirve para definir un evento en la conexión.com onSuccess: function(texto. function(){ //añado un evento al enlace para ejecturar al hacer clic $('mienlace'). xmlrespuesta){ alert('Respuesta:\n' + texto).html' debemos haberlo creado en nuestro servidor. onSuccess: Esto sirve para especificar un evento. para traernos el contenido de la misma. Por cierto que el archivo 'archivo-html-solicitud. que se ejecutará en caso que la conexión se realice con éxito. Para configurar la conexión se envían una serie de opciones: method: Sirve para definir que el método de conexión. Tal como está la ruta al archivo se entiende que se ha colocado en el mismo directorio que el script.addEvent('domready'. }). No reproducir sin autorización.com/manuales/manual-mootools. Como se puede ver. function(evento){ //creo y ejecuto un request como se ha visto anteriormente }).addEvent('click'. En nuestro ejemplo es un simple alert() de Javascript. El primero es el código HTML del archivo traído por Ajax. El ejemplo sencillo de conexión Ajax con Mootools completo El código completo del ejemplo es el siguiente. onFailure: Con este otro evento definimos qué hacer en el caso que la conexión con Ajax haya dado un error. La función escrita a continuación del onRequest contiene el código que de va a ejecutar al inicio de la conexión Ajax. En nuestro ejemplo la función simplemente muestra en una caja de alert() de Javascript el contenido del código HTML.html 68 © Los manuales de DesarrolloWeb. . Tu mejor ayuda para aprender a hacer webs www. Simplemente indicamos la ruta relativa donde está el archivo al que nos conectamos. onFailure: function(){alert('Fallo').}. para que al pulsar el enlace se cree la conexión.desarrolloweb.

Espero que este primer ejemplo de Ajax con Mootools haya podido entenderse bien.}. onRequest: function() { alert('Acabas de iniciar una solicitud de contenidos por Ajax!'). Entonces simplemente colocamos los archivos en un directorio de publicación y accedemos a ellos a través de localhost.com/manuales/manual-mootools. para la puesta en marcha de este ejemplo necesitamos dos páginas distintas. onSuccess: function(texto.com Request de Mootools. Tu mejor ayuda para aprender a hacer webs www. Si abrimos directamente el archivo no se podrá realizar la conexión con Ajax. nos dará un error. xmlrespuesta){ alert('Respuesta:\n' + texto). </script> </body> </html> Podemos ver el ejemplo en funcionamiento en una página aparte. Algo como http://localhost/mootools-ajax/request-alert. para que la ruta de la conexión realizada en el Request funcione. Además.} }). url: 'archivo-html-solicitud.html'. conviene decir un par de cosas para terminar de aclarar este ejemplo y que cualquiera de vosotros pueda ponerlo en marcha en su ordenador o en su servidor web. function(){ //función que se va a ejecutar cuando esté listo el dom //añado un evento al enlace para ejecturar al hacer clic $('mienlace'). Ambos archivos deben estar en el mismo directorio.html'.send(). para que funcione correctamente la conexión con Ajax debemos poner los archivos en un servidor Web.desarrolloweb. Por lo tanto debemos pasar por un servidor web para que funcione. para mostrar los contenidos Ajax en el propio cuerpo de la página. <p> <a href="javascript:void(0)" id="mienlace">Pulsa este enlace</a> <script> window. Para ello debemos de hacer una de estas dos cosas: 1. Artículo por Miguel Angel Alvarez Manual de Mootools: http://www. }. Ahora puedes seguir leyendo y aprendiendo con unas modificaciones a este script. Últimas aclaraciones para que este ejemplo Ajax-Mootools funcione Ahora bien. al intentar hacer la conexión http por Ajax. Como se puede haber entendido por las explicaciones anteriores. Esto es todo. onFailure: function(){alert('Fallo').addEvent('domready'.html 69 © Los manuales de DesarrolloWeb.desarrolloweb. un envoltorio de XMLHttpRequest.html 2. Si intentamos colocar los archivos en un directorio cualquiera de nuestro disco duro y luego abrir la página con código del ejemplo en un navegador. No reproducir sin autorización. Colocar los archivos en un servidor de hosting que tengamos contratado. Para ello los subimos por FTP a nuestro servidor como habitualmente habremos hecho.addEvent('click'. Una es la que tiene el código fuente del ejercicio y otra página que es la que se conecta por Ajax para mostrar sus contenidos. }). function(evento){ //creo un request var prueboRequest = new Request({ method: 'get'. .com tienen el copyright de sus autores. Podemos tener un servidor web instalado en local en nuestro ordenador. }). pero el archivo que nos traemos por Ajax debe llamarse 'archivo-html-solicitud. El archivo con el código Javascript lo podemos llamar de cualquier manera.

así que antes de leer esto. lo único que cambia es lo que va a pasar en caso que la conexión se realice con éxito (Evento onSuccess). El ejemplo es bien parecido. así que la única diferencia es que. lo único que debemos entender. <a href="javascript:void(0)" id="mienlace">Pulsa el enlace</a> <p> <div id="cajaactualizacion"> Aquí voy a actualizar el texto! </div> El enlace no ha cambiado.} }). Así que. pasando a su vez los parámetros "html". onRequest: function() { alert('Empezando la solicitud con Ajax!').set('html'. var nuevoRequest = new Request({ method: 'get'. onFailure: function(){alert('Error!'). Antes de continuar. Código HTML El HTML que necesitaremos para el ejemplo debe contener además un contenedor para mostrar la respuesta Ajax. por supuesto. la idea es realizar una conexión con Ajax.com tienen el copyright de sus autores. Como se decía.set('html'.html 70 © Los manuales de DesarrolloWeb. para decir que queremos cambiar el innerHTML de la capa. es esto: $('cajaactualizacion'). sin recargarla.html'.texto). onSuccess: function(texto. No reproducir sin autorización. lo que se puede ver a continuación es que tenemos un DIV llamado "cajaactualizacion". que es donde mostraremos el contenido del archivo. }. que contiene el texto del archivo traído por Ajax. se mostrará en una capa en el mismo contenido de la página. . El código del segundo ejemplo de Ajax y Mootools <html> <head> <title>Request de Mootools</title> <script src="mootools-1..com Ejemplo 2 de Ajax utilizando Mootools Acabamos de ver el primer ejemplo de Ajax con Mootools. url: 'archivo-html-solicitud. xmlrespuesta){ $('cajaactualizacion').desarrolloweb. al mostrarse el contenido del archivo.js" type="text/javascript"></script> </head> <body> Manual de Mootools: http://www.2-core-yc. Tu mejor ayuda para aprender a hacer webs www. y luego la variable texto. simplemente para hacer que los contenidos traídos por Ajax se muestren en la misma página. si se desea.texto).}. pero se ha utilizado una función distinta en el evento onSuccess. de manera adicional a lo que ya vimos en el ejemplo del artículo anterior.desarrolloweb. que es el DIV donde se iban a escribir los resultados de la conexión Ajax. pero en el propio cuerpo de la página y no en una caja de alerta. A este $ ('cajaactualizacion') le pasamos el método set. Simplemente se está haciendo una llamada a un método del elemento $('cajaactualizacion').send().com/manuales/manual-mootools. Código Javascript relativo al Ajax con Mootools El código es exactamente igual. de la conexión que hacemos con el objeto de la clase Request. Como decía. debemos haber leído el anterior taller de Ajax con Mootools. Ahora vamos a publicar unas modificaciones bien sencillas. puede verse en ejemplo en marcha.

desarrolloweb. onSuccess: function(texto.set('html'. Atentos a las otras explicaciones y recomendaciones adicionales tratadas en el artículo anterior!. Para Ajax! <p> <a href="javascript:void(0)" id="mienlace">Pulsa este enlace</a> <p> <div id="cajaactualizacion"> Aquí voy a actualizar el texto! </div> <script> window. Para ahorrarnos dificultades de cara a los distintos tipos de navegadores es interesante utilizar un framework como Mootools. Antecedentes acerca de conocer la posición del ratón Las cosas como las que queremos hacer en este artículo.addEvent('click'. En nuestro ejemplo queremos saber la posición del ratón en el momento de hacer clic sobre un elemento de la página. No reproducir sin autorización.html 71 © Los manuales de DesarrolloWeb.texto). que sirve para hacer cosas con eventos de usuario.html'. . Si queremos saber la posición del ratón en un momento dado.}. las debemos realizar con Javascript. Artículo por Miguel Angel Alvarez Averiguar la posición del ratón al hacer clic Un rápido ejemplo de uso de Mootools para saber la posición del ratón en el momento que se hace un clic en el elemento que nosotros queramos. }). averiguar la localización del mouse en la página.com Clase Request de Mootools. xmlrespuesta){ $('cajaactualizacion').addEvent('domready'.desarrolloweb. un envoltorio de XMLHttpRequest.com tienen el copyright de sus autores. </script> </body> </html> Podemos ver en marcha el ejemplo en una página aparte. tenemos que definir un evento para ejecutar código en ese momento. onFailure: function(){alert('Error!'). }. function(evento){ var nuevoRequest = new Request({ method: 'get'.send(). Tu mejor ayuda para aprender a hacer webs www. function(){ //función a ejecutar cuando esté listo el dom $('mienlace'). url: 'archivo-html-solicitud. onRequest: function() { alert('Empezando esta solicitud Ajax!'). que hay cosas que no hemos comentado aquí por haberse dado por entendidas. que nos ayuda a realizar un trabajo más sencillo de cara a la programación de scripts del lado del cliente. Es un ejemplo sencillo de las posibilidades de la clase Event de Mootools.com/manuales/manual-mootools. }). El código Mootools Manual de Mootools: http://www. Referencia: Tenemos un manual de Mootools para explicar el funcionamiento del framework Javascript.} }).

</div> Ya ahora este código Mootools para crear el evento: $("elementocualquiera"). En desarrollo web .com iremos publicando nuevos artículos sobre el tema."> Tienes que hacer clic en esta capa. Al asignar un evento a un elemento en Mootools.y Ahora veremos que al pulsar con id="elementocualquiera". pero lo vamos a dejar para próximos artículos.html 72 © Los manuales de DesarrolloWeb.y).page. se muestra en una caja de alerta la posición del ratón. Por ahora vamos a intentar presentar un formulario muy sencillo y cómo podemos enviarlo con Ajax utilizando el menor número de líneas de código posibles. Ver el ejemplo en una página aparte.page.com tienen el copyright de sus autores. para añadir efectos y otras cosas interesantes. .x + "\ny: " + event.com/manuales/manual-mootools. Como siempre hacemos. En la propia función se recibe como parámetro un objeto evento. En el objeto de la clase Event encontramos varias propiedades. background-color:#ccffcc.com queremos mostrar la facilidad con la que podemos enviar un formulario con Ajax usando Mootools. Tenemos este elemento HTML: <div id="elementocualquiera" style="border: 1px solid #999999. que esto es una mera introducción al envío de formularios con Ajax. Una de las facilidades que podemos utilizar de Mootools es la realización de scripts Ajax. para ir mostrando las posibilidades y ventajas de usar Mootools para el trabajo con Ajax.addEvent('click'. por medio del evento click de Mootools. Recuerda que tenemos un manual de Mootools para poder entender bien los procesos explicados en este artículo concernientes a Mootools.com Así que en este artículo vamos a realizar un evento y dentro de ese evento vamos a crear el código para mostrar las coordenadas del lugar donde se encuentra el ratón. padding: 5px. function(event) { alert("Posición del ratón\nx: " + event. width: 120px. de la clase Event.page.page. os dejamos el link para ver el ejemplo que vamos a realizar en Manual de Mootools: http://www. sin tener que complicarnos con las particularidades de los distintos navegadores. por no complicarnos ahora. Artículo por Miguel Angel Alvarez Enviar un formulario por Ajax con Mootools En nuestro Manual de Mootools hemos aprendido las cosas más básicas para empezar a trabajar con este framework Javascript y hacer cómodamente algunas cosas que sin él sería mucho más difícil. se asocia una función a ese evento.desarrolloweb. }). No reproducir sin autorización. En este artículo de DesarrolloWeb.desarrolloweb. Luego complicaremos el ejemplo. Tu mejor ayuda para aprender a hacer webs www. que se ha producido.x / event. entre las que hay un par de ellas que son la posición del ratón al producirse el evento: event.

que requeriría la pagina para utilizar Ajax en el envío del formulario. Código Javascript para enviar el formulario por Ajax Ahora vamos a ver el código Javascript. Referencia: en artículos anteriores ya hemos visto otros ejemplos de Ajax con Mootools.com marcha.set('html'. Ahora bien.stop(). Está compuesto por sólo dos campos de texto y un botón de submit.addEvent('submit'. si no conocemos previamente un poco de Mootools nos sonará a chino. El evento lo programamos para que se detenga el proceso habitual de submit y a continuación codificamos el envío con Ajax.com/manuales/manual-mootools.php" method="post"> Nombre: <input type="text" name="nombre" size="20"> <br> Edad: <input type="text" name="edad" size="3"> <br> <input type="submit" value="Enviar"> </form> Como se puede ver.com tienen el copyright de sus autores. function() { //Vamos a recibir el elemento formulario elementoFormulario = $("miformulario"). utilizando Mootools. Básicamente lo que se hace es crear un evento para ejecutar cuando el formulario se envíe (evento submit).desarrolloweb. { //onComplete sirve para definir qué hacer cuando se recibe la respuesta onComplete: function(respuesta) { //escribo la respuesta en la capa "resultado" $("resultado"). //Aquí podríamos hacer acciones como mostrar la típica imagen de cargando de Ajax //Luego definimos qué hacer cuando se envía el formulario //Aquí "this" se refiere al formulario sobre el que defino el evento this. Así que recodar la referencia al Manual de Mootools o a la documentación del propio framework.addEvent('domready'.php y que se va a enviar por POST. respuesta). //Vamos a añadir un evento al formulario para cuando se envíe elementoFormulario.desarrolloweb. }). Consultar el artículo Ajax con Mootools. //Envío el formulario this. El script es muy sencillo y lo he comentado para que se pueda entender mejor. } }). Manual de Mootools: http://www. window. .send(). Código HTML Pasamos directamente a mostrar el código HTML del formulario: <form id="miformulario" action="recibe-formulario. es un formulario exactamente igual a cualquiera realizado con HTML. }).set('send'. No reproducir sin autorización.html 73 © Los manuales de DesarrolloWeb. Tu mejor ayuda para aprender a hacer webs www. Cabe destacar que el formulario se envía a la página recibe-formulario. function(e) { //primero voy a parar el evento para que no se envíe como lo haría normalmente e.

//Vamos a añadir un evento al formulario para cuando se envíe elementoFormulario. $_POST["edad"].com. Así que tendremos que crear ese archivo PHP para recibirlos datos y hacer algo con ellos. <html> <head> <title>Ejemplo de envío de formulario por Ajax con Mootools</title> <script src="mootools-1.stop(). que asociamos al envío "send". function() { //Vamos a recibir el elemento formulario elementoFormulario = $("miformulario"). .com Para enviar un formulario con Ajax desde Mootools. Para ello tenemos que definir otro evento onComplete.2.com/manuales/manual-mootools. function(e) { //primero voy a parar el evento para que no se envíe como lo haría normalmente e.send(). Tu mejor ayuda para aprender a hacer webs www.js" type="text/javascript"></script> <script> window.com tienen el copyright de sus autores. echo "<br>". Todo lo que se escriba en la página mediante PHP se recibirá como respuesta de la solicitud Ajax. como PHP. Todo el código del ejemplo de procesamiento de formulario en Ajax Veamos todo el código junto. Pero claro. El evento onComplete recibe un parámetro que es el texto que se recibe como respuesta al procesar el formulario. { //onComplete sirve para definir qué hacer cuando se recibe la respuesta Manual de Mootools: http://www. . $_POST["nombre"].desarrolloweb. o lo que queramos. Si nos fijamos en el código HTML del formulario.NET. veremos que el action="recibe-formulario. La respuesta se generará mediante un lenguaje de programación del lado del servidor. donde veremos con detalle más adelante estos usos. echo "Edad: " . No reproducir sin autorización. antes tenemos que decirle qué queremos hacer cuando se complete el envío y cómo mostrar la respuesta recibida después de ello.addEvent('submit'. lo único que tenemos que hacer es ejecutar el método send() del elemento formulario: formulario.addEvent('domready'. Para ello hacemos unos cuantos echo de PHP. ?> Esto es lo más sencillo que podemos hacer con el formulario. Repito que tenemos planificada la publicación de artículos adicionales sobre este tema en desarrolloweb .desarrolloweb. Código PHP para procesar el formulario La respuesta de procesar el formulario se genera en el script que lo recibe. Este código Javascript se podría ampliar mucho con tantos efectos o utilidades como necesitemos. como mostrar una imagen de carga. Dentro de onComplete podremos hacer lo que queramos con la respuesta del procesamiento del form.set('send'. ASP. simplemente mostrar sus datos.html 74 © Los manuales de DesarrolloWeb. //Aquí podríamos hacer acciones como mostrar la típica imagen de cargando de Ajax //Luego definimos qué hacer cuando se envía el formulario //Aquí "this" se refiere al formulario sobre el que defino el evento this. <? echo "Nombre: " .php".

que estaría en un archivo aparte.php" method="post"> Nombre: <input type="text" name="nombre" size="20"> <br> Edad: <input type="text" name="edad" size="3"> <br> <input type="submit" value="Enviar"> </form> <div id="resultado"></div> </body> </html> Para que este código funcion faltaría el script PHP para procesar el formulario. Tu mejor ayuda para aprender a hacer webs www. Podemos ver este ejemplo en marcha en una página aparte. } }). </script> </head> <body> <form id="miformulario" action="recibe-formulario. respuesta).html 75 © Los manuales de DesarrolloWeb. en el mismo directorio que el código HTML.com tienen el copyright de sus autores. porque el envío se realiza por http y porque la página PHP debe ser interpretada y procesada por el servidor web. No reproducir sin autorización. }). }).desarrolloweb.send().com onComplete: function(respuesta) { //escribo la respuesta en la capa "resultado" $("resultado"). Nota: Para que el ejemplo funcione tenemos que ponerlo en un servidor web. //Envío el formulario this.desarrolloweb. Artículo por Miguel Angel Alvarez Manual de Mootools: http://www.com/manuales/manual-mootools. .set('html'.