<$BlogRSDUrl$>

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:

<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.
Vemos que le aplicamos un color de fondo (style="background-color: rgb(255, 0, 0);") (CSS)
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
Enlaces a este envio:

Links to this post:

Crear un enlace

Comentarios:
Me gusta. Quiero mas
 
Publicar un comentario
Nedstat Basic - Estadisticas gratis