Your SlideShare is downloading. ×

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

1,816

Published on

Correccció de la PAC 4 de l'assignatura de Programació Web de la UOC. Per a descarregar els arxius HTML i js, visiteu la meva wiki, Racó Vermell: …

Correccció de la PAC 4 de l'assignatura de Programació Web de la UOC. Per a descarregar els arxius HTML i js, visiteu la meva wiki, Racó Vermell: http://raco-vermell.wikispaces.com/PROGRAMACI%C3%93+WEB

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,816
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Exercici 1Explica el procés de modificació del contingut d’un node utilitzant la sintaxis del DOMStandard. Utilitza un exemple de codi JavaScript degudament comentat.Cada vegada que un navegador llegeix un fitxer html, genera interiorment el que es coneix com elDOM (Document Object Model), que és bàsicament un arbre en el qual està representada tota lainformació que conté el document: textos, enllaços, imatges, formularis , etc. Tot sigui dit, per feraixò es farà correctament quan el document estigui validat i totes les etiquetes estiguincorrectament tancades i correctament anidades. En cas de no haver-ho fet així, podem trobar quelarbre del DOM no és correcte i per tant no el podrem manipular fàcilment des de Javascript.Podem accedir als diferents nodes de larbre DOM per observar les seves propietats o fins i tot permodificar 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, enfunció de les accions de lusuari.En el modelo estándar de objetos, el DOM establece 12 tipos de nodos diferentes, aunque sitenemos en cuenta sólo los tipos usados para los documentos HTML se reduce a seis. Unresumen 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 podermodificar su contenido no se puede utilizar la función getElementById() ya que este tipo de nodosno disponen de Id. Para ello se debe acceder primer al nodo padre o etiqueta que lo contiene ydesde éste se pasa a navegar a través de sus hijos, el cual es el nodo del texto. De esta manerase 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ónmuestro algún ejemplo de éstos:
  • 2. • 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 losnodos: • 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ámetroEjemplo 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 dun 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
  • 3. Exercici 2Explica les característiques dels mètodes setTimeout i clearTimeout i la seva relació.Aquest dos mètodes de lobjecte windows, sencarreguen de posar en marxa i finalitzarcomptadors de temps. Per una banda setTimeout, executa una funció, una vegada transcorregutel temps que sindica en mil·lisegons. El primer paràmetre és el nom de la funció i el segonparàmetre en mil·lisegons. Per poder fer s del comptador, sha de emmagatzemar dins unavariable. myVar=setTimeout(function(){alert("Hello")},3000);Per altra banda, clearTimeout, sencarrega de finalitzar el comparador de temps iniciat ambsetTimeout. Per poder fer referència al comptador iniciat amb setTimeout, sha de manejar lavariable creada a tal efecte i aquesta deu ser una variable global per ser usada a qualsevol lloc ones pugui finalitzar. clearTimeout(myVar)Aquestes dues funcions es poden utilitzar per crear efectes de dinamisme dins la web, com perexemple crear efectes de text o animacions amb imatges.
  • 4. Exercici 3Explica amb un exemple com es pot detectar la posició del mouse en un àrea de la pantallaPer fer aquest exercici, he començat amb dues caixes de dades x,y, on emmagatzemar lescoordenades de posicionament del mouse. Per obtenir la seva coordenada respecte a la pantallacompleta 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 cursorpageX, pageY, screenX, screenY, clientX clientY retornen un nombre que indica els píxels des dunpunt referència. • pageX i pageY: El punt de referència està per sota de la barra dadreces. 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 daquestes funcions amb els navegadors actualshttp://www.quirksmode.org/dom/w3c_cssom.html#t03
  • 5. Exercici 4Explica perquè lexemple, 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 lexemple ex4.html
  • 6. Exercici 5Crea una pagina web on, donada una àrea de pantalla, visualitzi un punt fent un recorregutsinusoïdal. El punt ha de sortir per la dreta de làrea de pantalla i quan arribi al seu extrem itornar a aparèixer per lesquerra.Representar: y = amplada*sin(wt) Ajuda: amplitud_ona = height_area_dibuix-20; //amplada de lona 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_dibuixTeniu un exemple programat amb canvas ex5_canvas.htmlTeniu un exemple sense html5 ex5_divs.html
  • 7. Exercici 6Crea una pagina web amb 3 objectes diferents que inicialment apareguin en llocs aleatorisde la pantalla, i es vagin acostant al cursorTeniu un exemple senzill i clar a ex6.htmlTeniu un exemple més sofisticat, fet amb classes, html5(canvas) i on els objectes tenencomportament diferent a ex6_canvas.html

×