DHTML Ya

http://www.dhtmlya.com.ar/index.php?inicio=0

1 - Introducción. Para poder aplicar los conceptos de DHTML debemos conocer a la perfección el DOM (Document Object Model - Modelo Objeto Documento) El DOM es otra forma para representar una página web. Para entender que es el DOM veamos tres tipos de personas frente a una página web:

1 - Un usuario de internet que conoce muy poco sobre el mundo de la computación, ve una página web como una ventana que contiene texto con distintos tamaños y colores, imágenes, enlaces etc. esto es lo que ve un usuario común de internet.

2 - Ahora veamos como ve una página web una persona que se ha iniciado hace muy poco en el mundo del diseño de páginas web, este usuario ve un poco más allá de lo que ve un usuario común, puede identificar que texto dispuso en la marca title del documento, si utilizó tablas para formatear datos de la página 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 página.

3 - Ahora por último, para un programador de sitios web tiene una visión mucho más profunda, puede decir si la página según su interactividad tiene apliques de programación.

Este último tipo de persona puede identificar más allá del código HTML y CSS de la página, intuye perfectamente si hay programación por detrás del esqueleto HTML y la definición 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 página. 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 página varíe luego que ya se haya mostrado en el navegador. De aquí el nombre de esta tecnología 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 algún evento. Mediante el DOM podemos insertar, borrar, modificar marcas HTML. Podemos acceder a la hoja de estilo definida a la página y dinámicamente agregar, modificar o borrar propiedades. Todos esto sin tener que recargar la página del servidor, es decir todo se hace en el cliente (navegador) mediante JavaScript.

3 - Accediendo a una marca HTML a través del DOM (getElementById) La primera función que nos provee el DOM a través del objeto document es:

document.getElementById("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 función la emplearemos constantemente durante el curso.

Para disponer un ejemplo muy sencillo dispondremos una marca <h1> en la página y luego por medio de dos botones cambiaremos su color, y su tamaño de fuente.

El archivo html es el siguiente:

<html> <head> <title>Problema</title> <script language="javascript" src="funciones.js" ty pe="text/javascript"></script> <link rel="StyleSheet" href="estilos.css" type="tex t/css"> </head> <body> <h1 id="titulo">Este es un título dinámico</h1> <input type="button" value="Cambiar Color" onClick= "cambiarColor()"> <input type="button" value="Cambiar Tamaño de Fuent e" onClick="cambiarTamanoFuente()"> </body> </html>

Es importante notar que a los eventos para los dos botones los definimos en un archivo separado llamado funciones.js que lo incluimos con el siguiente código:

<script languaje="javascript" src="funciones.js" ty pe="text/javascript"></script>

A la hoja de estilo también la definimos en un archivo separado que la incluimos con el siguiente código:

<link rel="StyleSheet" href="estilos.css" type="tex t/css">

Para poder acceder a la marca h1 debemos definir la propiedad id:

<h1 id="titulo">Este es un título dinámico</h1>

Para capturar los eventos de los dos botones inicializamos la propiedad onclick de cada botón:

<input type="button" value="Cambiar Color" onClick= "cambiarColor()"> <input type="button" value="Cambiar Tamaño de Fuent e" onClick="cambiarTamanoFuente()">

Por otro lado definimos el archivo estilos.css:

#titulo { text-align:center; } #boton1,#boton2 { text-align:center; width:200px; }

y el archivo funciones.js:

function cambiarColor() { var tit=document.getElementById('titulo'); tit.style.color='#ff0000'; } function cambiarTamanoFuente() { var tit=document.getElementById('titulo'); tit.style.fontSize=60; }

Notemos que para recuperar una referencia a la marca h1 debemos indicar el siguiente código:

var tit=document.getElementById('titulo');

Ahora, en la varible tit tenemos una referencia a la marca h1 de la página. Si queremos cambiar el color del texto debemos acceder a la propiedad style y de ésta a la propiedad color:

tit.style.color='#ff0000';

Es similar para cambiar la fuente del título (accedemos a la propiedad fontSize): var tit=document.getElementById('titulo'); tit.style.fontSize=60;

Ejercicio:

Permitir cambiar el tamaño de la fuente de un párrafo. Para esto crear tres botones (fuente pequeña (10), fuente mediana(13) y fuente grande(20))

4 - Accediendo a los nodos hijos de una marca HTML(childNodes)(solo Internet Explorer) Veremos más adelante que hay diferencias de implementación 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 párrafos. Al presionar un botón cambiaremos el color de cada párrafo accediendo a los mismos desde el nodo div a través de la propiedad childNodes. Mostramos finalmente la cantidad de hijos que tiene la marca div.

Problema: Definir dentro de una marca div tres párrafos. Al presionar un botón cambiar el color de cada párrafo accediendo a los mismos desde el nodo div a través de la propiedad childNodes. Mostrar la cantidad de hijos que tiene la marca div. pagina1.html <html> <head> <title>Problema</title> <script language="javascript" src="funciones.js" type="text/javascript"></script> </head> <body> <div id="bloque"> <p>Este es el primer párrafo</p> <p>Este es el segundo párrafo</p> <p>Este es el tercer párrafo</p> </div> <input type="button" value="Cambiar colores" onClic k="cambiarColores()"> </body> </html> funciones.js

function cambiarColores() { var lista=document.getElementById('bloque'); lista.childNodes[1].style.color='#ff0000'; lista.childNodes[3].style.color='#00ff00'; lista.childNodes[5].style.color='#0000ff'; alert('La cantidad de hijos del nodo div es:'+lis ta.childNodes.length); }

Es importante notar que sólo definimos la propiedad id para la marca div, ya que teniendo la referencia de éste podemos acceder a los tres hijos (los tres párrafos).

Para obtener la referencia a la marca div hacemos como lo vimos en el concepto anterior: var lista=document.getElementById('bloque');

Luego para acceder al primer párrafo: lista.childNodes[0].style.color='#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 cuántos elementos tiene el vector lo hacemos mediante la propiedad length de la propiedad childNodes: alert('La cantidad de hijos del nodo div es:'+lis ta.childNodes.length);

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 párrafo</p> <p>Este es el segundo párrafo</p> <p>Este es el tercer párrafo</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 párrafo</p>

Entre la marca <div id="bloque"> y la marca <p> hay un salto de línea (crea un nodo de texto, este es el primer nodo). Luego el primer párrafo es el segundo nodo. Entre el primer párrafo y el segundo hay otro salto de línea (este es el tercer nodo) y así sucesivamente. Si

contamos los párrafos y saltos de línea podremos contabilizar los 7 hijos. Si no dejamos el salto de línea entre una párrafo y otro y tampoco dejamos espacios después del div y antes del cerrado del div, los hijos serán 3. Crearemos una página con dos div que contengan tres párrafos cada uno, en uno insertaremos saltos de línea entre párrafos y en otro los dispondremos todos en la misma línea y veremos la cantidad de hijos que tiene cada div: pagina1.html <html> <head> <title>Problema</title> <script language="javascript" src="funciones.js" ty pe="text/javascript"></script> </head> <body> <div id="bloque1"> <p>Este es el primer párrafo</p> <p>Este es el segundo párrafo</p> <p>Este es el tercer párrafo</p> </div> <hr> <div id="bloque2"><p>Este es el primer párrafo</p>< p>Este es el segundo párrafo</p><p>Este es el tercer párra fo</p></div> <input type="button" value="Cambiar colores" onClic k="cambiarColores()"> </body> </html>

funciones.js function cambiarColores() { var lista1=document.getElementById('bloque1'); alert('La cantidad de hijos del primer div es:'+l ista1.childNodes.length); var lista2=document.getElementById('bloque2'); alert('La cantidad de hijos del segundo div es:'+ lista2.childNodes.length); }

Ejercicio:

Definir 5 párrafos en un bloque div. Luego modificar la propiedad fontSize de cada párrafo. Acceder a cada párrafo a partir del div.

DHTML Ya

Documents

Transcript of DHTML Ya