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

3,469 views

Published on

PAC 4 de l'assignatura de Programació Web (JavaScript) del Grau Multimèdia de la UOC. Us podeu baixar els arxius html i js en 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
3,469
On SlideShare
0
From Embeds
0
Number of Embeds
2,702
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. PAQUITA RIBAS TURPAC4 – PROGRAMACIÓ WEB1.- Explica el procés de modificació del contingut d’un node utilitzant la sintaxis delDOM Standard. Utilitza un exemple de codi JavaScript degudament comentat.Quan el navegador carrega un document HTML crea una estructura d’arbre a partir deles etiquetes HTML. Cada element d’aquest arbre es coneix com a node. Cada nodepot contenir a la vegada altres nodes que poden ser de diferent tipus.L’arrel de l’arbre és un node de tipus document i d’aquest només deriven l’elementhead i l’element body.Cada etiqueta genera dos nodes: un de tipus Element (que correspon a la pròpiaetiqueta) i un altre de tipus Text, que consisteix en el contingut textual de l’etiqueta.Per exemple, en la pàgina:<html ><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Pagina per a explicar el DOM</title></head><body><h1 id=”titol” >Títol del paràgraf</h1><p name=”paragraf1” >Primer <strong>paràgraf</strong></p><p name=”paragraf2”>Segon paràgraf</p></body></html>Se transformaria en el següent arbre de nodes:Document HTML - Element HEAD o Element META o Element TITLE  Text Pagina per a explicar el DOM - Element BODY o Element H1  Text Títol del paràgraf o Element P  Text Primer  Element STRONG  Text paràgraf o Element P  Text Segon paràgraf
  2. 2. Es pot accedir a un node a través dels seus nodes pare, i consisteix en accedir al nodearrel de la pàgina i després als seus nodes fills i als nodes fills d’aquests fills fins arribaral node cercat.Però és molt més ràpid accedir directament a aquest node. Es pot fer amb les següentsfuncions: - getElementsByTagName() – Obtindrem tots els elements de la pàgina HTML que tinguin la mateixa etiqueta que es passa a la funció. var accedir = getElementsByTagName(“p”) Aquest exemple aplicat a la pàgina web anterior, obtindríem els dos paràgrafs, és a dir, tot el que engloben les etiquetes <p></p>,. Podríem operar, per tant, sobre tots els paràgrafs que tingui el document. - getElementsByName() – Obtindrem els elements amb l’atribut name igual al paràmetre que se li passa a la funció. var accedir = getElementsByName(“paragraf1”) Aquest exemple aplicat a la pàgina web anterior, obtindríem el primer paràgraf ja que el seu atribut name és paragraf1. - getElementById() – Aquesta funció torna únicament el node desitjat, ja que no hi pot haver dos elements amb la mateixa id. Per tant, l’element que obtindrem és únic. o var accedir = getElementsById(“titol”) Aquest exemple aplicat a la pàgina web anterior, obtindríem “Títol del paràgraf”.Exemples:// Obtenim l’element amb id=”títol” var canviarColor = getElementsById(“titol”);// Canviarem el color, en aquest cas el posarem de color vermell canviarColor.style.color= “red”// Afegim un event. Quan el ratolí passi per sobre, canviarà a blau canviarColor.onmouseover=function() { this.style.color= “blue” }Si el que volem es crear un nou node, es segueixen els següents passos:// Crear un node de tipus Element var nouParagraf = document.createElement(“p”);// Crear un node de tipus Text var nouContingut = document.createTextNode(“Tercer paràgraf”);// Afegir el node Text com un fill del node Element nouParagraf.appendChild(nouContingut);// Afegir el node Element com a fill de la pàgina document.body.appendChild(nouParagraf);2.- Explica les característiques dels mètodes setTimeout i clearTimeout i la seva relació.Un setTimeout és un temporitzador. Permet registrar un codi perquè s’executin dintred’un període de temps.
  3. 3. var activarTemps = setTimeout("alert(Pasaron 2 segundos desde el click);",2000);On activarTemps seria la variable amb la que més tard podrem detenir la cridada de lafunció amb el mètode clearTimeout.La sintaxi seria: variable = setTimeout(funció, temps);El temps és el temps transcorregut abans que s’executi el codi. Està en mi·lisegons1000 ms equivalen a 1s. Per tant, en l’exemple anterior, l’alerta s’executarà després dedos segons.Amb setTimeout es crea i amb clearTimeout s’elimina. clearTimeout(activarTemps);Comprovar exemple en el document adjunt: RibasTur_Paquita_pregunta2.html3.- Explica amb un exemple com es pot detectar la posició del mouse en un àrea de lapantallaExemple 1:Quan es fa clic sobre la pàgina, ens indica les coordenades amb un alert: <body> <script type="text/javascript"> function posicio(e) { alert("Has fet clic a: X="+ e.screenX +" Y="+e.screenY); //* }// Cridarem la funció amb l’esdeveniment onclick sobre la pantalla. Per això es cridades de document. document.onclick=posicio; </script> </body>*screenX conté la coordenada X en què ha ocorregut l’esdeveniment i screenY conté lacoordenada Y en què ha ocorregut l’esdeveniment.Comprovar document adjunt: RibasTur_Paquita_pregunta3A.htmlExemple 2:Indicarà les coordenades dintre d’un camp de formulari.Primerament crearíem un formulari dintre de <body> destinat a escriure lescoordenades x y. El camp de value estarà buit. <form > <label>X: </label><input type="text" id="x" value=""> <label>Y: </label><input type="text" id="y" value=""> </form>
  4. 4. Després crearíem la següent funció dintre de <head> <script type="text/javascript"> function coordenadas(event) { x=event.clientX; // clientX conté la coordenada X y=event.clientY; // clientY conté la coordenada Y//Obtindrem el camp de text del formulari amb l’id=”x” i canviarem el valor buit pelvalor de la coordenada x. document.getElementById("x").value = x;//Obtindrem el camp de text del formulari amb id=”y” i canviarem el valor buit pelvalor de la coordenada y. document.getElementById("y").value = y; } </script>Cridarem la funció des de l’etiqueta body perquè accedeixi a ella només iniciar lapàgina. <body onMouseMove="coordenadas(event);">Comprovar document adjunt: RibasTur_Paquita_pregunta3B.html4.- Explica perquè lexemple, veure “exercici4.html” no omple el camp de text amb elvalor “hola” al polsar sobre el botó. Quan tindria sentit el codi tal com està?L’exercici s’ha solucionat canviant el tipus de botó de “submit” a “button”<input type="submit" value="Posar hola al text" id="boto" onClick="javascript:escriu()"/><input type="button" value="Posar hola al text" id="boto" onClick="javascript:escriu()"/>El botó de tipus “button” no fa res amb resposta a un clic a no ser que s’especifiqui unaacció. En aquest cas si té una acció que s’especifica amb la funció escriu().Un botó de tipus “submit” funciona com un botó de validació. Tanca la captura dedades del formulari i llença el que s’hagi definit en l’atribut “action” del formulari.El codi tindria sentit si volguéssim validar i enviar el que s’ha escrit en el camp delformulari.Comprovar document adjunt: RibasTur_Paquita_pregunta4.html5.- Crea una pagina web on, donada una àrea de pantalla, visualitzi un punt fent unrecorregut sinusoïdal. El punt ha de sortir per la dreta de làrea de pantalla i quan arribial seu extrem i tornar a aparèixer per lesquerra.Representar: y = amplada*sin(wt)Ajuda:
  5. 5. //amplada de lona en pixels (deixem 10 pixels de marge superior i inferior)amplitud_ona = height_area_dibuix-20;x++;// on 0 <= x <= width_area_dibuixy = amplitud_ona*Math.sin(x) + height_area_dibuix/2;Comprovar document adjunt: RibasTur_Paquita_pregunta5.html6.- Crea una pagina web amb 3 objectes diferents que inicialment apareguin en llocsaleatoris de la pantalla, i es vagin acostant al cursor

×