HTML - RUA - Universidad de Alicante
Anuncio
Introducción al desarrollo web DOM http://idesweb.es/ DHTML: Parte 2 Laura Sirvent Collado Estudiante de Ingeniería Multimedia Universidad de Alicante (España) IDW-DOM-DHTML-2 Introducción al desarrollo web http://idesweb.es/ DOM Contacto • http://www.7-days.es • [email protected] Introducción al desarrollo web http://idesweb.es/ DOM DHTML • Dynamic HTML (HTML Dinámico) • HTML + CSS + Javascript + DOM • Páginas web interactivas Introducción al desarrollo web http://idesweb.es/ DOM Ejemplo práctico 1 • Efecto “ola”: Destacar una letra de un párrafo cada tiempo. Introducción al desarrollo web http://idesweb.es/ DOM 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. Introducción al desarrollo web http://idesweb.es/ HTML <html> DOM <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> Introducción al desarrollo web http://idesweb.es/ Javascript (ola.js) DOM 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); } Introducción al desarrollo web http://idesweb.es/ DOM Javascript (ola.js) var txt = document.getElementById("ola").innerHTML; Introducción al desarrollo web http://idesweb.es/ DOM Javascript (ola.js) var letras = txt.split(""); var res = ""; for(var i = 0; i < letras.length; i++){ res += "<span>" + letras[i] + "</span>”; } Introducción al desarrollo web http://idesweb.es/ DOM Javascript (ola.js) document.getElementById("ola").innerHTML = res; obj = document.getElementById("ola").firstChild; dir = 1; Introducción al desarrollo web http://idesweb.es/ DOM Javascript (ola.js) setInterval("efecto()", 100); Introducción al desarrollo web http://idesweb.es/ DOM 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"; } Introducción al desarrollo web http://idesweb.es/ DOM Javascript (ola.js) obj.style.color = "black"; Introducción al desarrollo web http://idesweb.es/ DOM Javascript (ola.js) if(dir == 1){ if(obj.nextSibling != null) obj = obj.nextSibling; else dir = 0; } Introducción al desarrollo web http://idesweb.es/ Javascript (ola.js) DOM else{ if(obj.previousSibling != null) obj = obj.previousSibling; else dir = 1; } Introducción al desarrollo web http://idesweb.es/ DOM Javascript (ola.js) obj.style.color = "red"; Introducción al desarrollo web http://idesweb.es/ DOM 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 Introducción al desarrollo web http://idesweb.es/ DOM 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> (…) Introducción al desarrollo web http://idesweb.es/ DOM Efecto Ola • HTML: Parte “estática”, contenido que se va a modificar. Introducción al desarrollo web http://idesweb.es/ DOM Efecto Ola • Javascript: Parte “lógica”, llamadas a funciones, llamadas cada cierto tiempo. Introducción al desarrollo web http://idesweb.es/ DOM 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) Introducción al desarrollo web http://idesweb.es/ DOM Efecto Ola • CSS: Parte “visual”,se modifica para que el usuario vea el cambio. Introducción al desarrollo web http://idesweb.es/ DOM http://idesweb.es/ [email protected] @idesweb
