DHTML: Parte 2 DOM. Introducción al desarrollo web. Laura Sirvent Collado Estudiante de Ingeniería Multimedia Universidad de Alicante (España)

Tamaño: px

Comenzar la demostración a partir de la página:

Download "DHTML: Parte 2 DOM. Introducción al desarrollo web. Laura Sirvent Collado Estudiante de Ingeniería Multimedia Universidad de Alicante (España)"

Amparo Paz Miguélez
hace 6 años
Vistas:

1 DHTML: Parte 2 Laura Sirvent Collado Estudiante de Ingeniería Multimedia Universidad de Alicante (España) IDW-DOM-DHTML-2

2 Contacto

3 DHTML Dynamic HTML (HTML Dinámico) HTML + CSS + Javascript + DOM Páginas web interactivas

4 Ejemplo práctico 1 Efecto ola : Destacar una letra de un párrafo cada tiempo.

5 Ejemplo práctico 1 El código no es el más eficiente, pero sí el más fácil de entender. Una vez hecho, se debe pensar formas de optimizarlo.

6 HTML <html> <head> <script type="text/javascript" src="ola.js"></script> </head> <body onload="iniciar()"> este texto tiene un efecto ola. </body> </html>

7 Javascript (ola.js) var obj, dir; function iniciar() { var txt = document.getelementbyid("ola").innerhtml; var letras = txt.split(""); var res = ""; for(var i = 0; i < letras.length; i++) res += "" + letras[i] + ""; document.getelementbyid("ola").innerhtml = res; obj = document.getelementbyid("ola").firstchild; dir = 1; setinterval("efecto()", 100); }

8 Javascript (ola.js) var txt = document.getelementbyid("ola").innerhtml;

9 Javascript (ola.js) var letras = txt.split(""); var res = ""; for(var i = 0; i < letras.length; i++){ res += "" + letras[i] + " ; }

10 Javascript (ola.js) document.getelementbyid("ola").innerhtml = res; obj = document.getelementbyid("ola").firstchild; dir = 1;

11 Javascript (ola.js) setinterval("efecto()", 100);

12 Javascript (ola.js) 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"; }

13 Javascript (ola.js) obj.style.color = "black";

14 Javascript (ola.js) if(dir == 1){ if(obj.nextsibling!= null) obj = obj.nextsibling; else dir = 0; }

15 Javascript (ola.js) else{ } if(obj.previoussibling!= null) obj = obj.previoussibling; else dir = 1;

16 Javascript (ola.js) obj.style.color = "red";

17 Javascript (ola.js) iniciar(): Recoge el párrafo del documento HTML y lo separa por letras y llama a efecto() cada 100ms efecto(): Cambia el color de una letra, y busca la letra siguiente, para la siguiente llamada a la función

18 Efecto Ola este texto tiene un efecto ola. E s t e t e x t o t i e n e ( )

19 Efecto Ola HTML: Parte estática, contenido que se va a modificar.

20 Efecto Ola Javascript: Parte lógica, llamadas a funciones, llamadas cada cierto tiempo.

21 Efecto Ola DOM: Funciones para poder acceder al HTML: Cambiar su contenido: Dividir párrafo en spans Aspecto visual: Color de las letras. Actúa como intermediario entre HTML (parte estática) y Javascript (parte lógica)

22 Efecto Ola CSS: Parte visual,se modifica para que el usuario vea el cambio.

23 @idesweb

Documentos relacionados

Temario Programación Web para Web

Temario Programación Web para Web 1 Introducción al HTML 1 Qué es una página web? T 2 Qué es HTML? T 3 Porqué aprender HTML T 4 Base del lenguaje: las etiquetas HTML V 5 Estructura de un documento HTML