DHTML: Parte 2 Laura Sirvent Collado Estudiante de Ingeniería Multimedia Universidad de Alicante (España) IDW-DOM-DHTML-2
Contacto http://www.7-days.es laurasirco@gmail.com
DHTML Dynamic HTML (HTML Dinámico) HTML + CSS + Javascript + DOM Páginas web interactivas
Ejemplo práctico 1 Efecto ola : Destacar una letra de un párrafo cada tiempo.
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.
HTML <html> <head> <script type="text/javascript" src="ola.js"></script> </head> <body onload="iniciar()"> <p id="ola">este texto tiene un efecto ola.</p> </body> </html>
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 += "<span>" + letras[i] + "</span>"; document.getelementbyid("ola").innerhtml = res; obj = document.getelementbyid("ola").firstchild; dir = 1; setinterval("efecto()", 100); }
Javascript (ola.js) var txt = document.getelementbyid("ola").innerhtml;
Javascript (ola.js) var letras = txt.split(""); var res = ""; for(var i = 0; i < letras.length; i++){ res += "<span>" + letras[i] + "</span> ; }
Javascript (ola.js) document.getelementbyid("ola").innerhtml = res; obj = document.getelementbyid("ola").firstchild; dir = 1;
Javascript (ola.js) setinterval("efecto()", 100);
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"; }
Javascript (ola.js) obj.style.color = "black";
Javascript (ola.js) if(dir == 1){ if(obj.nextsibling!= null) obj = obj.nextsibling; else dir = 0; }
Javascript (ola.js) else{ } if(obj.previoussibling!= null) obj = obj.previoussibling; else dir = 1;
Javascript (ola.js) obj.style.color = "red";
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
Efecto Ola <p id="ola">este texto tiene un efecto ola.</p> <span style= color: black; >E</span> <span style= color: black; >s</span> <span style= color: black; >t</span> <span style= color: black; >e</span> <span style= color: black; ></span> <span style= color: black; >t</span> <span style= color: black; >e</span> <span style= color: red; >x</span> <span style= color: black; >t</span> <span style= color: black; >o</span> <span style= color: black; ></span> <span style= color: black; >t</span> <span style= color: black; >i</span> <span style= color: black; >e</span> <span style= color: black; >n</span> <span style= color: black; >e</span> ( )
Efecto Ola HTML: Parte estática, contenido que se va a modificar.
Efecto Ola Javascript: Parte lógica, llamadas a funciones, llamadas cada cierto tiempo.
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)
Efecto Ola CSS: Parte visual,se modifica para que el usuario vea el cambio.
idw@idesweb.es @idesweb