Programació Web - PAC 4 correcció - Multimèdia (UOC) - Paquita Ribas

Exercici 1
Explica el procés de modificació del contingut d’un node utilitzant la sintaxis del DOM
Standard. Utilitza un exemple de codi JavaScript degudament comentat.
Cada vegada que un navegador llegeix un fitxer html, genera interiorment el que es coneix com el
DOM (Document Object Model), que és bàsicament un arbre en el qual està representada tota la
informació que conté el document: textos, enllaços, imatges, formularis , etc. Tot sigui dit, per fer
això es farà correctament quan el document estigui validat i totes les etiquetes estiguin
correctament tancades i correctament anidades. En cas de no haver-ho fet així, podem trobar que
l'arbre del DOM no és correcte i per tant no el podrem manipular fàcilment des de Javascript.
Podem accedir als diferents nodes de l'arbre DOM per observar les seves propietats o fins i tot per
modificar algunes. A més a més, podrem afegir i canviar o treure esdeveniments a aquests nodes,
de manera que el seu comportament podria variar al llarg de la visualització del document, en
funció de les accions de l'usuari.
En el modelo estándar de objetos, el DOM establece 12 tipos de nodos diferentes, aunque si
tenemos en cuenta sólo los tipos usados para los documentos HTML se reduce a seis. Un
resumen de los tipos de nodos para documentos HTML sería:
• Identificador: 1. Tipo: Elemento. Descripción: Etiqueta html.
• Identificador: 2. Tipo: Atributo. Descripción: Atributo de una etiqueta html.
• Identificador: 3. Tipo: Texto. Descripción: Texto incluido en una etiqueta html.
• Identificador: 8. Tipo: Comentario. Descripción: Comentarios en html.
• Identificador: 9. Tipo: Documento. Descripción: Documento raíz del documento (<html>).
• Identificador: 10. Tipo: Tipo Documento. Descripción: Definición de tipo de documento.
Vamos a explicar el proceso de modificación del contenido de un nodo de tipo 3 (texto).
Para acceder a la información del texto incluido en una etiqueta html (tipo 3 –texto) y poder
modificar su contenido no se puede utilizar la función getElementById() ya que este tipo de nodos
no disponen de Id. Para ello se debe acceder primer al nodo padre o etiqueta que lo contiene y
desde éste se pasa a navegar a través de sus hijos, el cual es el nodo del texto. De esta manera
se puede sustituye el contenido del nodo.
Ejemplo código JavaScript:
<html>
….
<h1 id=”etiq_h1”>Exercici 1</h1>
….
<script type="text/javascript">
var contenido= document.getElementById(“etiq_h1”).firstChild; // en variable
contenido almacenamos el elemento hijo
// (contenido del nodo texto “Exercici1”) de la etiq h1 a
// través de su Id.
contenido.data =”Ejercicio1”; //sustituimos el valor del nodo texto.
….
</script>
….
</html>
Existen a su vez métodos preestablecidos para la modificación de nodos de texto. A continuación
muestro algún ejemplo de éstos:

• appendData(cadena)._ Añade cadena al final del nodo.
• deleteData(offset, cantidad)._ Borra una cantidad x de caracteres empezando desde un
índice determinado.
• inserData(offset, cadena)._ Inserta una cadena desde un índice determinado
• ReplaceData(offset, cantidad, cadena)._Reemplaza una cantidad x de caracteres por
una cadena especificada a partir de un índice determinado.
A su vez, el objeto “node” dispone de tres métodos que permiten trabajar con los atributos de los
nodos:
• getAttribute(nombre)._ Devuelve el valor del atributo pasado.
• setAttribute(nombre, valor)._ Asigna el atributo con el nombre y valor pasados como
parámetros.
• removeAttribute(nombre)._ Elimina el atributo pasado como parámetro
Ejemplo código JavaScript métodos anteriores:
<html>
….
<p id="p1">A partir de aquí añadimos:</p>
……
<script type="text/javascript">
var añadir= p1.firstChild.appendData("Añadimos cadena al final del nodo hijo de
etiqueta p1"); //añadimos con el evento appendData
//la cadena mostrada al valor texto de la
etiqueta p1.
var texto_nuevo= document.createTextNode("Cadena que reemplazará el valor de
etiqueta p1"); //creamos nuevo nodo de texto
//usando método createTextNode y lo
asignamos a variable.
var reemplazar= p1.firstChild.replaceNode(texto_nuevo); //reemplazamos nodo de
texto hijo de etiq p2 con el nodo creado ant.
var mostrar_id= document.getElementById(p1).getAttribute(“id”); //recogemos en
variable el atributo id de etiq p1.
alert (mostrar_id); //mostramos atributo id de p1.
….
</html>
Per recorrer els fills d'un node pare tenim els següents mètodes i propietat:
• ParentNode: que retorna una referència al node pare.
• FirstChild: que retorna una referència al primer fill.
• LastChild: que retorna una referència al darrer fill.
• PreviousSibling: que retorna una referència al germà gran.
• NextSibling: que retorna una referència al germà petit.
• ChildNodes: que retorna una array amb els nodes fills.
• Attributes: que retorna una array amb els atributs del node.
Veure uns exemples a exercici1.html

Exercici 2
Explica les característiques dels mètodes setTimeout i clearTimeout i la seva relació.
Aquest dos mètodes de l'objecte windows, s'encarreguen de posar en marxa i finalitzar
comptadors de temps. Per una banda setTimeout, executa una funció, una vegada transcorregut
el temps que s'indica en mil·lisegons. El primer paràmetre és el nom de la funció i el segon
paràmetre en mil·lisegons. Per poder fer s del comptador, s'ha de emmagatzemar dins una
variable.
myVar=setTimeout(function(){alert("Hello")},3000);
Per altra banda, clearTimeout, s'encarrega de finalitzar el comparador de temps iniciat amb
setTimeout. Per poder fer referència al comptador iniciat amb setTimeout, s'ha de manejar la
variable creada a tal efecte i aquesta deu ser una variable global per ser usada a qualsevol lloc on
es pugui finalitzar.
clearTimeout(myVar)
Aquestes dues funcions es poden utilitzar per crear efectes de dinamisme dins la web, com per
exemple crear efectes de text o animacions amb imatges.

Exercici 3
Explica amb un exemple com es pot detectar la posició del mouse en un àrea de la pantalla
Per fer aquest exercici, he començat amb dues caixes de dades x,y, on emmagatzemar les
coordenades de posicionament del mouse. Per obtenir la seva coordenada respecte a la pantalla
completa es fa gracies a l’event screenX/Y (pàg. 76 modul 4).
function coordenadas(event) {
x=event.screenX;//event.clientX;
y=event.screenY;//event.clientY;
document.getElementById("x").value = x;
document.getElementById("y").value = y;
}
Per cridar a l’esdeveniment, es fa quan es carrega la pàgina amb:
<body onMouseMove="coordenades(event);">
Finalment mostrem les dades de les coordenades dins de les caixes amb getElementById(); .
Hi altres funcions associades a la posició del cursor
pageX, pageY, screenX, screenY, clientX clientY retornen un nombre que indica els píxels des d'un
punt referència.
• pageX i pageY: El punt de referència està per sota de la barra d'adreces. Aquest punt pot
canviar la ubicació si hi ha pàgines incrustades o es mou la barra de desplaçament.
• screenX i screenY: El punt de referència està a la part superior esquerra de la pantalla,
aquest punt només canvia si es modificala resolució del monitor.
• clientX i clientY: El punt de referència està a la part superior esquerra de la finestra del
navegador.
Aquesta pàgina us dona la compatibilitat d'aquestes funcions amb els navegadors actuals
http://www.quirksmode.org/dom/w3c_cssom.html#t03

Exercici 4
Explica perquè l'exemple, veure “exercici4.html” no omple el camp de text amb el valor
“hola” al polsar sobre el botó. Quan tindria sentit el codi tal com està?
Consulteu l'exemple ex4.html

Exercici 5
Crea una pagina web on, donada una àrea de pantalla, visualitzi un punt fent un recorregut
sinusoïdal. El punt ha de sortir per la dreta de l'àrea de pantalla i quan arribi al seu extrem i
tornar a aparèixer per l'esquerra.
Representar: y = amplada*sin(wt)
Ajuda:
amplitud_ona = height_area_dibuix-20; //amplada de l'ona en pixels (deixem 10 pixels de marge
superior i inferior)
x++;
y = amplitud_ona*Math.sin(x) + height_area_dibuix/2; // on 0 <= x <= width_area_dibuix
Teniu un exemple programat amb canvas ex5_canvas.html
Teniu un exemple sense html5 ex5_divs.html

Exercici 6
Crea una pagina web amb 3 objectes diferents que inicialment apareguin en llocs aleatoris
de la pantalla, i es vagin acostant al cursor
Teniu un exemple senzill i clar a ex6.html
Teniu un exemple més sofisticat, fet amb classes, html5(canvas) i on els objectes tenen
comportament diferent a ex6_canvas.html

Programació Web - PAC 4 correcció - Multimèdia (UOC) - Paquita Ribas

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (9)

Destacado

Destacado (20)

Similar a Programació Web - PAC 4 correcció - Multimèdia (UOC) - Paquita Ribas

Similar a Programació Web - PAC 4 correcció - Multimèdia (UOC) - Paquita Ribas (20)

Más de Paquita Ribas

Más de Paquita Ribas (20)

Último

Último (7)

Programació Web - PAC 4 correcció - Multimèdia (UOC) - Paquita Ribas