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