PDF de programación - DHTML

Programación en Internet 2009-2010

Departamento de Lenguajes y
Sistemas Informáticos

DHTML
DHTML

Programación en Internet

Curso 2009-2010

Programación en Internet – Curso 2009-2010

Contenido

• Introducción
• CSS dinámico
• Ejemplos

DLSI - Universidad de Alicante

1

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Introducción

• Dynamic HTML no es una tecnología ni un lenguaje,

es un término que define el uso conjunto de
es un término que define el uso conjunto de
diferentes tecnologías

• Wikipedia:

El HTML Dinámico o DHTML (del inglés Dynamic
HTML) designa el conjunto de técnicas que permiten
crear sitios web interactivos utilizando una
combinación de lenguaje HTML estático un lenguaje
combinación de lenguaje HTML estático, un lenguaje
interpretado en el lado del cliente (como JavaScript),
el lenguaje de hojas de estilo en cascada (CSS) y la
jerarquía de objetos de un DOM.

Programación en Internet – Curso 2009-2010

Introducción

• Wikipedia:

Una página de HTML Dinámico es cualquier página
web en la que los scripts en el lado del cliente
cambian el HTML del documento, después de que
éste haya cargado completamente, lo cual afecta a la
apariencia y las funciones de los objetos de la
página. La característica dinámica del DHTML, por
t
l
tanto, es la forma en que la página interactúa con el
usuario cuando la está viendo, siendo la página la
misma para todos los usuarios.

á i

i t

tú

t

l

f

l

DLSI - Universidad de Alicante

2

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Introducción

• DHTML combina HTML, CSS, JavaScript y DOM

para lograr páginas con contenido dinámico e
para lograr páginas con contenido dinámico e
interactivas
– HTML define el contenido de los documentos

• Los eventos de HTML permiten interactuar con el usuario

– CSS define el estilo y la posición de los elementos HTML
– DOM ofrece un mecanismo para acceder y manipular los

elementos HTML

– JavaScript , a través del DOM, se emplea para controlar,

acceder y manipular los elementos HTML y sus propiedades
CSS

Programación en Internet – Curso 2009-2010

Introducción

• Ejemplos de uso:

– Menús desplegables
– Imágenes que cambian al pasar el cursor

sobre ellas

– Objetos en movimiento
Textos explicativos que aparecen al situar
– Textos explicativos que aparecen al situar
el cursor sobre ciertas palabras clave

– …

DLSI - Universidad de Alicante

3

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

CSS dinámico

• elemento.className = valor;

– Cambia la clase CSS de un elemento HTML

• Ejemplo:

alert(document.getElementById("p1").className);

Programación en Internet – Curso 2009-2010

CSS dinámico

• elemento.style.property = valor;
– Cambia la propiedad CSS de un elemento

• Ejemplo:

alert(document.getElementById("p1").style.fontFamily);

document.getElementById("p2").style.color = "red";

document.getElementById("d1").style.display = "none";

DLSI - Universidad de Alicante

4

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

CSS dinámico

CSS

JavaScriptp

Programación en Internet – Curso 2009-2010

CSS dinámico

• Conversión del nombre de una
propiedad de CSS a JavaScript:
– Se elimina el guión
– Las palabras separadas por un guión
empiezan con letra mayúscula (camel
case)

• Ejemplo:

– background-color backgroundColor
– border-bottom-color borderBottomColor
– font-size fontSize

DLSI - Universidad de Alicante

5

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

CSS dinámico

• Excepción:

– float cssFloat

• Los valores de las propiedades se

ponen siempre entrecomillados:
"arial,sans-serif";

document.getElementById("p1").style.fontFamily =

document.getElementById("p2").style.zIndex = "1";

document.getElementById("p3").style.margin = "100px";

Programación en Internet – Curso 2009-2010

Ejemplos
• Efecto visual en un texto:

– Efecto “ola” sobre un párrafo de texto
– De forma periódica, aparece destacada
una letra del texto con un color diferente

DLSI - Universidad de Alicante

6

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Programación en Internet – Curso 2009-2010

Ejemplos

• HTML:
<body onload="iniciar()">
<p>
En el siguiente párrafo de texto, se destaca cada

100ms una letra del texto.

</p>
<p id="ola">Este texto tiene un efecto ola.</p>
</body>
</body>

DLSI - Universidad de Alicante

7

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Ejemplos

• JavaScript:
function iniciar() {

var txt = document.getElementById("ola").innerHTML;
var letras = txt.split("");
var res = "";

for(var i = 0; i < letras.length; i++)

res += "<span>" + letras[i] + "</span>";

document.getElementById("ola").innerHTML = res;

obj = document.getElementById("ola").firstChild;
dir = 1;
setInterval("efecto()", 100);

}

Programación en Internet – Curso 2009-2010

Ejemplos

var obj, dir;

function efecto()
{

obj.style.color = "black";
if(dir == 1)

if(obj.nextSibling != null)
obj = obj.nextSibling;

else

dir = 0;

else
if(obj.previousSibling != null)
obj = obj.previousSibling;

else

dir = 1;

obj.style.color = "red";

}

DLSI - Universidad de Alicante

8

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Ejemplos

• Efecto tooltip: mostrar un bocadillo de

ayuda
– Cuando el usuario sitúa el cursor del ratón
sobre un icono, se muestra un rectángulo
con un texto explicativo

– Cuando el usuario retira el cursor del

ratón, la ayuda desaparece

Programación en Internet – Curso 2009-2010

DLSI - Universidad de Alicante

9

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Ejemplos

onmouseout="ocultar(this)" />

• HTML:
Nombre: <input type="text" name="nombre" />
<img src="information.png" alt="" onmouseover="mostrar(this)"
<span class="tooltip">Nombre del usuario, sin apellidos</span>
<br />
Apellidos: <input type="text" name="apellidos" />
<img src="information.png" alt="" onmouseover="mostrar(this)"
<
>
<span class="tooltip">Apellidos del usuario</span>
<br />
Fecha de nacimiento: <input type="text" name="fnac" />
<img src="information.png" alt="" onmouseover="mostrar(this)"
<span class="tooltip">Fecha de nacimiento, formato

onmouseout="ocultar(this)" />
dd/mm/aa</span>

onmouseout="ocultar(this)" />

i </

l

"t

lti ">A

llid

d l

Programación en Internet – Curso 2009-2010

Ejemplos

• CSS:

<style type="text/css">
.tooltip {

background-color: yellow;
border: 2px solid orange;
display: none;
position: absolute;

}
</style>

DLSI - Universidad de Alicante

10

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Ejemplos

• JavaScript:

function mostrar(obj) {

while(obj.nextSibling != null && obj.className !=
"tooltip")

obj = obj.nextSibling;

if(obj != null)
i

j

obj.style.display = "inline";

i i

}

Programación en Internet – Curso 2009-2010

Ejemplos

• JavaScript:

function ocultar(obj) {

while(obj.nextSibling != null && obj.className !=
"tooltip")

obj = obj.nextSibling;

if(obj != null)

i

obj.style.display = "none";

j

}

DLSI - Universidad de Alicante

11

Programación en Internet 2009-2010

Programación en Internet – Curso 2009-2010

Ejemplos

• Ejercicio: visor de imágenes

DLSI - Universidad de Alicante

12