[Link]
inicio=0
1 - Introduccin.
Para poder aplicar los conceptos de DHTML debemos conocer a la perfeccin el DOM (Document Object Model Modelo Objeto Documento) El DOM es otra forma para representar una pgina web. Para entender que es el DOM veamos tres tipos de personas frente a una pgina web: 1 - Un usuario de internet que conoce muy poco sobre el mundo de la computacin, ve una pgina web como una ventana que contiene texto con distintos tamaos y colores, imgenes, enlaces etc. esto es lo que ve un usuario comn de internet.
2 - Ahora veamos como ve una pgina web una persona que se ha iniciado hace muy poco en el mundo del diseo de pginas web, este usuario ve un poco ms all de lo que ve un usuario comn, puede identificar que texto dispuso en la marca title del documento, si utiliz tablas para formatear datos de la pgina o emple CSS o ambas. Si incorpor algun aplique Flash etc. Este segundo tipo de personas puede imaginar el contenido HTML y CSS de la pgina.
3 - Ahora por ltimo, para un programador de sitios web tiene una visin mucho ms profunda, puede decir si la pgina segn su interactividad tiene apliques de programacin.
Este ltimo tipo de persona puede identificar ms all del cdigo HTML y CSS de la pgina, intuye perfectamente si hay programacin por detrs del esqueleto HTML y la definicin de las hojas de estilo. Este tercer tipo de persona debe conocer perfectamente el DOM. Entonces que es el DOM? El DOM es otra forma de ver el contenido de la pgina. Con el DOM, todos los elementos HTML se insertan en un rbol cuyos nodos son las marcas HTML y las hojas, los valores propiamente dichos de las marcas. Por medio de JavaScript podemos acceder y modificar este rbol de marcas y hacer que la pgina vare luego que ya se haya mostrado en el navegador. De aqu el nombre de esta tecnologa DHTML es decir Dynamic Hyper Text Markup Language.
Mediante el DOM podemos acceder al contenido y estilo de cada marca del documento y modificarlo de acuerdo a algn evento. Mediante el DOM podemos insertar, borrar, modificar marcas HTML. Podemos acceder a la hoja de estilo definida a la pgina y dinmicamente agregar, modificar o borrar propiedades. Todos esto sin tener que recargar la pgina del servidor, es decir todo se hace en el cliente (navegador) mediante JavaScript.
3 - Accediendo a una marca HTML a travs del DOM (getElementById)
La primera funcin que nos provee el DOM a travs del objeto document es:
[Link]("nombre del Id de la marca HTML")
Nos retorna una referencia a la marca en s misma. Con esta referencia podemos acceder a sus propiedades como puede ser su contenido, color, fuente, etc. A esta funcin la emplearemos constantemente durante el curso. Para disponer un ejemplo muy sencillo dispondremos una marca <h1> en la pgina y luego por medio de dos botones cambiaremos su color, y su tamao de fuente. El archivo html es el siguiente:
<html> <head> <title>Problema</title> <script language="javascript" src="[Link]" type="text/javascript"></script> <link rel="StyleSheet" href="[Link]" type="text/css"> </head> <body> <h1 id="titulo">Este es un ttulo dinmico</h1> <input type="button" value="Cambiar Color" onClick="cambiarColor()"> <input type="button" value="Cambiar Tamao de Fuente" onClick="cambiarTamanoFuente()"> </body> </html>
Es importante notar que a los eventos para los dos botones los definimos en un archivo separado llamado [Link] que lo incluimos con el siguiente cdigo:
<script languaje="javascript" src="[Link]" type="text/javascript"></script>
A la hoja de estilo tambin la definimos en un archivo separado que la incluimos con el siguiente cdigo:
<link rel="StyleSheet" href="[Link]" type="text/css">
Para poder acceder a la marca h1 debemos definir la propiedad id:
<h1 id="titulo">Este es un ttulo dinmico</h1>
Para capturar los eventos de los dos botones inicializamos la propiedad onclick de cada botn:
<input type="button" value="Cambiar Color" onClick="cambiarColor()"> <input type="button" value="Cambiar Tamao de Fuente" onClick="cambiarTamanoFuente()">
Por otro lado definimos el archivo [Link]:
#titulo { text-align:center; } #boton1,#boton2 { text-align:center; width:200px; }
y el archivo [Link]:
function cambiarColor() { var tit=[Link]('titulo'); [Link]='#ff0000'; } function cambiarTamanoFuente() { var tit=[Link]('titulo'); [Link]=60; }
Notemos que para recuperar una referencia a la marca h1 debemos indicar el siguiente cdigo:
var tit=[Link]('titulo');
Ahora, en la varible tit tenemos una referencia a la marca h1 de la pgina. Si queremos cambiar el color del texto debemos acceder a la propiedad style y de sta a la propiedad color:
[Link]='#ff0000';
Es similar para cambiar la fuente del ttulo (accedemos a la propiedad fontSize):
var tit=[Link]('titulo'); [Link]=60;
Ejercicio: Permitir cambiar el tamao de la fuente de un prrafo. Para esto crear tres botones (fuente pequea (10), fuente mediana(13) y fuente grande(20))
4 - Accediendo a los nodos hijos de una marca HTML(childNodes)(solo Internet Explorer)
Veremos ms adelante que hay diferencias de implementacin en varias partes del DOM entre diferentes navegadores y es muy bueno conocerlas para cuando implementamos nuestros programas. Cada vez que aparezca una de estas diferencias las haremos notar dando un concepto para cada navegador. Cada nodo tiene un solo nodo padre, pero puede tener muchos hijos. En este ejemplo el nodo body tiene 4 hijos, la marca h1 tiene 1 hijo, lo mismo cada marca li tienen un hijo. Los nodos que no tienen descendientes son los nodos hoja. El DOM provee a cada nodo de un vector que almacena la referencia a cada nodo hijo, la propiedad se llama:
childNodes
Este vector almacena una referencia a cada nodo hijo. El siguiente ejemplo muestra como acceder a cada hijo de una marca div que contiene tres prrafos. Al presionar un botn cambiaremos el color de cada prrafo accediendo a los mismos desde el nodo div a travs de la propiedad childNodes. Mostramos finalmente la cantidad de hijos que tiene la marca div. Problema: Definir dentro de una marca div tres prrafos. Al presionar un botn cambiar el color de cada prrafo accediendo a los mismos desde el nodo div a travs de la propiedad childNodes. Mostrar la cantidad de hijos que tiene la marca div. [Link] <html> <head> <title>Problema</title> <script language="javascript" src="[Link]" type="text/javascript"></script> </head> <body> <div id="bloque"> <p>Este es el primer prrafo</p> <p>Este es el segundo prrafo</p> <p>Este es el tercer prrafo</p> </div> <input type="button" value="Cambiar colores" onClick="cambiarColores()"> </body> </html> [Link]
function cambiarColores() { var lista=[Link]('bloque'); [Link][1].[Link]='#ff0000'; [Link][3].[Link]='#00ff00'; [Link][5].[Link]='#0000ff'; alert('La cantidad de hijos del nodo div es:'+[Link]); }
Es importante notar que slo definimos la propiedad id para la marca div, ya que teniendo la referencia de ste podemos acceder a los tres hijos (los tres prrafos). Para obtener la referencia a la marca div hacemos como lo vimos en el concepto anterior:
var lista=[Link]('bloque');
Luego para acceder al primer prrafo:
[Link][0].[Link]='#ff0000';
Es decir, indicamos la propiedad childNodes y entre corchetes qu elemento del vector accedemos. Se numeran las componentes a partir de cero. Si queremos saber cuntos elementos tiene el vector lo hacemos mediante la propiedad length de la propiedad childNodes:
alert('La cantidad de hijos del nodo div es:'+[Link]);
5 - Accediendo a los nodos hijos de una marca HTML (childNodes) (FireFox)
El concepto de nodos hijo para un elemento es similar pero veremos que la cantidad de hijos que detecta un navegador y otro es distinto. Como es eso? Si en FireFox si disponemos:
<div id="bloque"> <p>Este es el primer prrafo</p> <p>Este es el segundo prrafo</p> <p>Este es el tercer prrafo</p> </div>
Y luego le preguntamos al div cuantos hijos tiene, este nos responder 7 (siete), recordemos que con el Internet Explorer el resultado es 3 (tres). FireFox crea el rbol de nodos de la siguiente manera:
<div id="bloque"> <p>Este es el primer prrafo</p>
Entre la marca <div id="bloque"> y la marca <p> hay un salto de lnea (crea un nodo de texto, este es el primer nodo). Luego el primer prrafo es el segundo nodo. Entre el primer prrafo y el segundo hay otro salto de lnea (este es el tercer nodo) y as sucesivamente. Si
contamos los prrafos y saltos de lnea podremos contabilizar los 7 hijos. Si no dejamos el salto de lnea entre una prrafo y otro y tampoco dejamos espacios despus del div y antes del cerrado del div, los hijos sern 3. Crearemos una pgina con dos div que contengan tres prrafos cada uno, en uno insertaremos saltos de lnea entre prrafos y en otro los dispondremos todos en la misma lnea y veremos la cantidad de hijos que tiene cada div: [Link]
<html> <head> <title>Problema</title> <script language="javascript" src="[Link]" type="text/javascript"></script> </head> <body> <div id="bloque1"> <p>Este es el primer prrafo</p> <p>Este es el segundo prrafo</p> <p>Este es el tercer prrafo</p> </div> <hr> <div id="bloque2"><p>Este es el primer prrafo</p><p>Este es el segundo prrafo</p><p>Este es el tercer prrafo</p></div> <input type="button" value="Cambiar colores" onClick="cambiarColores()"> </body> </html>
[Link]
function cambiarColores() { var lista1=[Link]('bloque1'); alert('La cantidad de hijos del primer div es:'+[Link]); var lista2=[Link]('bloque2'); alert('La cantidad de hijos del segundo div es:'+[Link]); }
Ejercicio: Definir 5 prrafos en un bloque div. Luego modificar la propiedad fontSize de cada prrafo. Acceder a cada prrafo a partir del div.