DHTML: las páginas dinámicas

El HTML dinámico, también conocido por las siglas DHTML (Dynamic HTML) está basado en una idea de lo más simple: convertir las etiquetas tradicionales del HTML en objetos programables, lo que nos permite poder luego manipularlas a nuestro gusto con JavaScript u otros lenguajes.

Si queremos colocar una imagen determinada en una página web, debemos escribir en el documento HTML la etiqueta <img src="" .="" /> que define cuál es el fichero de imagen y qué atributos va a tener (dimensiones, alineamiento, etc.). Una vez que la imagen esté visible en la pantalla, ya no habrá nada que la haga cambiar a menos que se utilice HTML dinámico.

Para cambiar las propiedades de un elemento, es esencial que entendamos que son los eventos.

Los eventos son código JavaScript que pueden incluirse dentro de los tags del HTML y que se ejecutan cuando "algo pasa". Se los denomina event handlers.

Son varios y cada uno "detecta" una acción, puede ser pulsar un botón del ratón, moverlo, enviar un formulario, tocar una tecla, etc.

Por ejemplo al hacer CLICK AQUÍ se abre una ventana de alerta:

<A href="javascript:void(0);"
      onclick="alert('¡HOLA!')">
CLICK
</A>

Los event handler pueden ejecutar varias acciones simultáneamente. Esto se consigue separando cada una con un punto y coma. Por ejemplo:

onClick="alert('Gracias'); window.location=URL_pagina'"

al hacer click se mostrará un mensaje y luego se saltará a otra página web.

Otros dos eventos muy utilizados son onmouseover y onmouseout. El primero se activa cuando se pasa el cursor del ratón sobre un objeto y el segundo cuando se lo quita.

Este es un ejemplo simple donde el botón de la izquierda es del tipo denominado hover. Si se pasa el ratón sobre él, la imagen cambia.

<a href="javascript:void(0);"
onmouseover="getElementById('NOMBRE').src='URL_imagen_OVER';"
onmouseout="getElementById('NOMBRE').src='URL_imagen_OUT';">
<img src="URL_imagen_OUT" id="NOMBRE" border=0 />
</a>

El atributo SRC del tag IMG hace referencia al fichero que contiene la imagen que se quiere mostrar en la pantalla. Para convertir esta etiqueta en un objeto al que se pueda hace referencia desde un lenguaje de programación, basta con añadirle el atributo ID.

<IMG ID="NOMBRE" SRC="URL_imagen">

Ahora la etiqueta ya es un objeto programable. Cuando se carga la página, la imagen que se ve en primer lugar es la señalada en la etiqueta. Al haber incluido unas rutinas para detecta los eventos onmouseover y onmouseout, podemos utilizar todos esto para modificar el archivo fuente utilizado. Por regla general:

NOMBRE.src='URL_imagen'

aunque en Blogger se debe utilizar una función extra:

getElementById('NOMBRE').src='URL_imagen'

De esta manera, cuando el cursor está sobre la imagen, se lanza el evento onmouseover y se establece el atributo SRC con la dirección de una imagen, de la misma forma, cuando el cursor sale de la imagen, se lanza el evento onmouseout y el atributo SRC vuelve a ser el original.

Aunque en el ejemplo, el tamaño de las imágenes es el mismo pero esto no es obligatorio.

Al tener identificados los objetos mediante un nombre, podemos manipularos desde cualquier lugar de la página. Por ejemplo:

En este caso, al poner el ratón sobre una imagen, cambiamos la otra y viceversa.

<a href="javascript:void(0);"
onmouseover="getElementById('imgRIGHT').src='URL_imagenLEFT';"
onmouseout="getElementById('imgRIGHT').src='URL_imagenRIGHT';">
<img src="URL_imagenLEFT" id="imgLEFT" >
</a>

<a href="javascript:void(0);"
onmouseover="getElementById('imgLEFT').src='URL_imagenRIGHT;"
onmouseout="getElementById('imgLEFT').src='URL_imagenLEFT;">
<img src="URL_imagenRIGHT" id="imgRIGHT" />
</a>

Lo mismo puede hacerse para cambiar el valor de una propiedad de cualquier elemento de la página:

NOMBREID.style.color = 'valor'
NOMBREID.style.fontSize = 'valor'
NOMBREID.style.fontFamily = 'valor'

Utilizando los eventos, es muy simple agregar un rutina JavaScript en el HEADER para mostrar u ocultar elementos de manera rápida:

<script type="text/javascript">
function verocultar(href) {
var c = href.nextSibling;
if(c.style.display == 'none'){
c.style.display = 'block';
}else{
c.style.display = 'none';
}
return false;
}
</script>

MAS COSAS QUE LEER Ver/Ocultar
[+]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div>
TEXTO Ver/Ocultar
<a onclick="return verocultar(this);" href="#">[+]</a><div>
<!-- este DIV debe ser la continuación del vínculo A -->
...............................
</div>
</div>

Esta es una lista de los eventos registrados por JavaScript y los tipos de uso generales:

onblur a, area, button, input, label, select, textarea	el visitante abandona un elemento que previamente entró en foco (ver onfocus)
onchange input, select, textarea	se modifica un valor o contenido
onfocus a, area, button, input, label, select, textarea	se selecciona o hace click en un elemento
onkeydown input (tipo name o password), textarea	cuando se ingresa algo mediante el teclado
onkeypress input (tipo name o password), textarea	cuando se ingresa algo mediante el teclado
onkeyup input (tipo name o password), textarea	cuando se ingresa algo mediante el teclado
onload body, frameset	cuando la página es cargada en el navegador
onreset form	cuando se hace click en un botón RESET
onselect input (tipo name o password), textarea	cuando se seleccionan caracteres
onsubmit form	cuando se hace click en un botón SUBMIT (enviar)
onunload body, frameset	cuando el navegador carga otra página