El DHTML

Introducció al DHTL .
Les capes, l'etiqueta <div> .
Codi de DHML. Un exemple.
Les funcions setInterval i clearInterval.
Un rellotge.

6.1 El DHTML

És una combinació entre CSS i el model d'objectes, fonamentalment els objectes creats amb el modificador id per identificar-los i amb les propietats style que siguin accessibles.

Permet donar molta més interactivitat al HTML ja que podem canviar algunes parts de la pàgina després de tenir creat el document i visualitzat en el navegador.

El problema ens apareix per la diferència del tractament d'aquest objectes segons el navegador que executi el codi. És el mateix problema que amb els events.

6.2 Les capes, l'etiqueta <div>.

Aquesta etiqueta permet crear una capa amb un id que serà el seu nom d'objecte i amb un conjunt de propietats que s'escriuen dins de l'style de l'etiqueta.

Prem en aquest enllaç i veuràs les capes de l'exemple següent:

Capes i propietats de les capes.

<body>
<div id="capaVerda" style="position:absolute; left:124px; top:89px; 
                          width:348px; height:102px; z-index:1; 
                          background-color: #99CC00;
                          layer-background-color: #99CC00; ">
   Aquesta capa &eacute;s verda.
   Pot contenir tot el codi HTML que necessitem. 
</div>
<div id="capaBlava" style="position:absolute; left:125px; top:237px; 
                           width:347px; height:218px; z-index:2; 
                           background-color: #CCFFFF; 
                           layer-background-color: #CCFFFF;">
  <p>Capa blava</p>
  <div id="capaInterna" style="position:relative; left:50px; top:30px; 
                               width:100px; height:100px; z-index:3
                               background-color: #CCFFFF; 
                               layer-background-color: #CCCCFF; 
                               background-color: #CCCCFF;">
      Contingut de la capa interna
   </div>
</div>
</body>

Tenim tres capes. El seu id és capaVerda, capaBlava i capaInterna. Amb aquests noms es crea dins del document els objectes corresponents amb els valors de les propietats que s'indiquen dins de la propietat style. Cal dir que els objectes capa tenen moltes més propietats.

L'atribut id és l'atribut que donarà nom als objectes per fer DHTML

Amb aquests noms podem després demanar una referència a l'objecte capa des de el JavaScript i canviar, amb la referència, les propietats de la capa.

La propietat position de l'objecte style (atribut de la capa) pot tenir dos valors, absolute i relative.

La posició absoluta dona les coordenades respecte al marc on veiem el document. Així la capa verda és a les coordenades (124,89) respecte al vèrtex superior esquerra d'aquest marc.
La posició relativa indica coordenades respecte a contenidora. Així la capaInterna ésta dins de la capaBlava. La posició de la capa interna es mesura respecte al vèrtex superior esquerra de la capaInterna.

6.2 Codi de DHML Un exemple.

Executa l'enllaç següent script i observa el seu funcionament.

DHTML amb l'Internet Explorer .

<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.estilo1 
{
	position:absolute; 
	top:200px;
	visibility:visible;
	background-color:#00FFFF;
	color:#669900;
	font-size:18px;
}
</style>

<script type="text/javascript">
function cambia()
{
	objeto=document.getElementById("miParrafo");

	nuevoTexto = document.createTextNode("El contenido ha cambiado.");
  objeto.replaceChild(nuevoTexto, objeto.childNodes[0]);

	alert("Cambiré posición y color del texto de la capa\nPulsa para continuar");

	objeto.style.top="100px";

	nuevoTexto.deleteData(0,nuevoTexto.length);
	nuevoTexto.appendData("He cambiado colores y posición.");
	if (IE) objeto.replaceChild(nuevoTexto, objeto.childNodes[0]);

	objeto.style.color="#ff0000";
	objeto.style.backgroundColor="#cccccc";

	alert("Ahora se ocultará la capa");
	objeto.style.visibility="hidden";
}
</script>
</head>

<body>
<div id="miParrafo" class="estilo1" onMouseOver="cambia();return 0;">
      Pasa el ratón por encima de la capa
</div>
</body>
</html>

Aquest script funciona amb l'Internet Explorer i amb el Mozilla. Tenim una capa anomenada miParrafo. Observa la instrucció

objeto=document.getElementById("miParrafo");

que obté una referència a l'objete miParrafo i la posa a la variable objeto. Amb aquesta referència canviem les propietats de l'etiqueta DIV.

Podem canviar el contingut html escrit dins de l'etiqueta div.
```
nuevoTexto = document.createTextNode("El contenido ha cambiado.");
objeto.replaceChild(nuevoTexto, objeto.childNodes[0]);
```
Hem de crear un objecte de tipus TextNode i reemplacem aquest text en el nostre objecte.

Si volem reemplaçar una altra vegada el text hem de fer els passos següents:
```
nuevoTexto.deleteData(0,nuevoTexto.length);
nuevoTexto.appendData("He cambiado colores y posición.");
if (IE) objeto.replaceChild(nuevoTexto, objeto.childNodes[0]);
```
Veiem que hi ha una diferència entre els navegadors. Es deu al fet que la funció replaceChild rep les dades per valor o per referència segons el navegador.
La propietat (atribut de la capa) style, que en realitat és un objecte amb moltes propietats que afecten a la capa. Hem fet ús de les propietats top, color, backgroundColor i visibility.
```
objeto.style.top="100px";
objeto.style.color="#ff0000";
objeto.style.backgroundColor="#cccccc";
objeto.style.visibility="hidden";
```

6.4 Les funcions setInterval i clearInterval.

La funció setInterval permet definir una funció que s'executarà cada cop que hagin passat el nombre de milisegons que li passem. Torna un punter que ens servirà per eliminar aquesta definició amb la funció clearInterval. Observa el funcionament del programa enllaçat.

Quan executem el botó Pon alerta s'executa la instrucció

puntero=setInterval("muestraAlerta()",tiempo);

que farà que la funció muestraAlerta() s'executi cada cop que passi el temps indicat a la variable tiempo. Tenim un punter anomenat puntero amb el retorn de la funció setInterval, per tal de poder desfer aquesta assignació de funció. Per alliberar aquesta funció utilitzem la instrucció

clearInterval(puntero);

Les funcions setInterval i clearInterval .

<html>
<head>
<title>Poner una alerta</title>
<script type="text/javascript">
var puntero =null;
function ponAlerta()
{
	tiempo = document.frmAlerta.txtTiempo.value;
	tiempo = parseInt(tiempo);
	puntero=setInterval("muestraAlerta()",tiempo);
}

function muestraAlerta()
{
	alert(document.frmAlerta.txtTexto.value);
}

function quitaAlerta()
{
	clearInterval(puntero);
}
</script>
</head>

<body>
<form name="frmAlerta" >
  <table bgcolor="#00FFFF" cellpadding="2px">
    <tr bgcolor="#FFFFCC">
      <td align="right">Tiempo para la alerta en milisegundos</td>
      <td><input name="txtTiempo" type="text" id="txtTiempo" size="4"></td>
    </tr>
    <tr bgcolor="#FFFFCC">
      <td align="right">Texto para la alerta</td>
      <td><input name="txtTexto" type="text" id="txtTexto"></td>
    </tr>
    <tr bgcolor="#6666FF">
      <td colspan="2" align="right">
	  <input name="btnPonerEnMarcha" type="button" value="Pon alerta" onClick="ponAlerta();">
      <input name="btnQuitaAlerta" type="button" value="Quita alerta" onClick="quitaAlerta()">
	  </td>
    </tr>
  </table>
</form>
</body>
</html>

5. Un rellotge

Observa el rellotge i els dos botons que l'engegen i l'aturen:

Ara farem un rellotge combinant les técniques de DHTML setInterval in canvi de propietats d'una taula. Per tal d'organitzar el codi l'hem dividit en tres fitxers:

navegador.js que ens detecta el navegador en el que s'està executant el codi.
reloj.js que conté un objecte que es diu relojSencillo.
reloj.htm que és una pàgina html que crida els fitxers anteriors i declara un objecte de tipus relojSencillo i l'engega.

Reloj.htm

<html>
<head>
<title>Muestra de relojes</title>
<script type="text/javascript" src="navegador.js"></script>
<script type='text/javascript' src="reloj.js"></script>
</head>

<body>
 <div id='capaReloj1'> </div>
 <script type="text/javascript">
 reloj1 = new relojSencillo('capaReloj1');
 reloj1.engega('capaReloj1');
</body>
</html>

reloj.js

//Este reloj necesita una capa para salida de datos

function relojSencillo()
{
  this.relId=null;
  this.relEngegat = false;
  this.mostraHoraRel=mostraHoraRel;
  this.atura=atura;
  this.engega=engega;  
}

function atura()
{
   if(this.relEngegat) clearInterval(this.relID);
   this.relEngegat = false;
}

function engega(idSalida)
{
   this.atura();
   this.relID=setInterval("mostraHoraRel('"+idSalida+"')",1000);
   this.relEngegat = true;
}

function mostraHoraRel(idSalida)
{
   var ara = new Date();
   var hora = ara.getHours();
   var minutos = ara.getMinutes();
   var segundos = ara.getSeconds();
   var valorHora = "" + ((hora > 12) ? hora - 12 : hora);
   valorHora += ((minutos < 10) ? ":0" : ":") + minutos;
   valorHora += ((segundos < 10) ? ":0" : ":") + segundos;

   if (IE) document.all[idSalida].innerHTML = valorHora;
   if (NE6) document.getElementById(idSalida).innerHTML = valorHora;
}

Cal destacar les dues instruccions de sortida de dades cap a una capa

   if (IE) document.all[idSalida].innerHTML = valorHora; 
   if (NE6) document.getElementById(idSalida).innerHTML = valorHora;

Veiem com s'utilitza la propietat innerHTML que ens permet canviar tot el contingut HTML d'una capa. També veiem la forma de fer-ho en els dos navegadors més importants.