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
• laurasirco@gmail.com
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/
idw@idesweb.es
@idesweb
