23 febrero 2006
Tutorial AJAX - Lección 2 - JavaScript, DOM, CSS
JavaScript sabemos (espero) lo que es.
CSS sabemos (también lo espero) lo que es.
Y DOM, también lo sabemos. Y si no os diré que es un sistema para poder acceder a las propiedades de una página web y cambiarlas.
Con estas tres herramientas podemos hacer cosas como cambiar colores, mover elementos por la pantalla, crear juegos (ver más abajo el post de los lemmings). El límite está en vuestra imaginación.
Un ejemplo:
Este texto tiene de color de fondo rojo. Si pones el ratón encima se pondrá verde. Si lo sacas volverá al rojo.
Explicación del código:
Le damos un identificador (id="leccion2_texto1") (DOM)
Le añadimos dos eventos:
1.- onmouseover="this.style.background='#00ff00';" onmouseover = cuando pongas el ratón encima se ejecuta el código JavaScript. En este caso lo que hacemos es cambiar la propiedad background del estilo para ponerla a verde (#00ff00 en hexadecimal).
2.- onmouseout="this.style.background='#ff0000';" onmouseout = cuando el ratón salga del elemento. Lo que hacemos es poner de nuevo el fondo en rojo
Como veís se utiliza la propiedad this que se refiere siempre al elemento que contiene el código. En siguiente ejemplo veremos cómo se hace referencia a otros elementos:
Al pulsar sobre este texto desparecerá
Y al pulsar hacer doble click sobre éste volverá a a aparecer.
Explicación del código:
Vemos que ahora hemos creado dos elementos:
<span id="leccion2_texto2" onclick="this.style.visibility='hidden'">Al pulsar sobre este texto desparecerá</span>
y
<span ondblclick="document.getElementById('leccion2_texto2').style.visibility='visible'">Y al pulsar hacer doble clicksobre éste volverá a a aparecer.</span>
El primero tiene identificador lección2_texto2(id="leccion2_texto2" y un evento onclick (cuando se pulse con el ratón) que lo que hace es poner la propiedad del estilo visibility (visibilidad) a hidden (oculto). No tiene misterio, ¿no?
El segundo elemento solo tiene un evento: ondblclick (cuando se haga doble-click con el ratón) y lo que hace es poner la propiedad visibility del elemento leccion2_texto2 a visible. Para acceder a ella usamos la función getelementById que nos permitirá tener acceso a las funciones y propiedades de cualquier elemento de una página web.
Espero que os haya servido esta lección para poneros al día de algunas cosas, aunque aún no hemos empezado con AJAX. Como siempre, espero vuestros comentarios para intentar hacerlo mejor.
1 Comentarios
CSS sabemos (también lo espero) lo que es.
Y DOM, también lo sabemos. Y si no os diré que es un sistema para poder acceder a las propiedades de una página web y cambiarlas.
Con estas tres herramientas podemos hacer cosas como cambiar colores, mover elementos por la pantalla, crear juegos (ver más abajo el post de los lemmings). El límite está en vuestra imaginación.
Un ejemplo:
Este texto tiene de color de fondo rojo. Si pones el ratón encima se pondrá verde. Si lo sacas volverá al rojo.
Explicación del código:
Vemos que le aplicamos un color de fondo (style="background-color: rgb(255, 0, 0);") (CSS)
<span style="background-color: rgb(255, 0, 0);" id="leccion2_texto1" onmouseover="this.style.background='#00ff00';" onmouseout="this.style.background='#ff0000';">Este texto tiene de color de fondo rojo. Si pones el ratón encima se pondrá verde. Si lo sacas volverá al rojo.
Le damos un identificador (id="leccion2_texto1") (DOM)
Le añadimos dos eventos:
1.- onmouseover="this.style.background='#00ff00';" onmouseover = cuando pongas el ratón encima se ejecuta el código JavaScript. En este caso lo que hacemos es cambiar la propiedad background del estilo para ponerla a verde (#00ff00 en hexadecimal).
2.- onmouseout="this.style.background='#ff0000';" onmouseout = cuando el ratón salga del elemento. Lo que hacemos es poner de nuevo el fondo en rojo
Como veís se utiliza la propiedad this que se refiere siempre al elemento que contiene el código. En siguiente ejemplo veremos cómo se hace referencia a otros elementos:
Al pulsar sobre este texto desparecerá
Y al pulsar hacer doble click sobre éste volverá a a aparecer.
Explicación del código:
<span id="leccion2_texto2" onclick="this.style.visibility='hidden'">Al pulsar sobre este texto desparecerá</span>
<span ondblclick="document.getElementById('leccion2_texto2').style.visibility='visible'">Y al pulsar sobre éste volverá a a aparecer.</span>
Vemos que ahora hemos creado dos elementos:
<span id="leccion2_texto2" onclick="this.style.visibility='hidden'">Al pulsar sobre este texto desparecerá</span>
y
<span ondblclick="document.getElementById('leccion2_texto2').style.visibility='visible'">Y al pulsar hacer doble clicksobre éste volverá a a aparecer.</span>
El primero tiene identificador lección2_texto2(id="leccion2_texto2" y un evento onclick (cuando se pulse con el ratón) que lo que hace es poner la propiedad del estilo visibility (visibilidad) a hidden (oculto). No tiene misterio, ¿no?
El segundo elemento solo tiene un evento: ondblclick (cuando se haga doble-click con el ratón) y lo que hace es poner la propiedad visibility del elemento leccion2_texto2 a visible. Para acceder a ella usamos la función getelementById que nos permitirá tener acceso a las funciones y propiedades de cualquier elemento de una página web.
Espero que os haya servido esta lección para poneros al día de algunas cosas, aunque aún no hemos empezado con AJAX. Como siempre, espero vuestros comentarios para intentar hacerlo mejor.
1 Comentarios
Comentarios:
Publicar un comentario
