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

PAQUITA RIBAS TUR
PAC4 – PROGRAMACIÓ WEB

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.

Quan el navegador carrega un document HTML crea una estructura d’arbre a partir de
les etiquetes HTML. Cada element d’aquest arbre es coneix com a node. Cada node
pot 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’element
head i l’element body.
Cada etiqueta genera dos nodes: un de tipus Element (que correspon a la pròpia
etiqueta) 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

Es pot accedir a un node a través dels seus nodes pare, i consisteix en accedir al node
arrel de la pàgina i després als seus nodes fills i als nodes fills d’aquests fills fins arribar
al node cercat.
Però és molt més ràpid accedir directament a aquest node. Es pot fer amb les següents
funcions:
- 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 dintre
d’un període de temps.

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 la
funció 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·lisegons
1000 ms equivalen a 1s. Per tant, en l’exemple anterior, l’alerta s’executarà després de
dos segons.
Amb setTimeout es crea i amb clearTimeout s’elimina.
clearTimeout(activarTemps);

Comprovar exemple en el document adjunt: RibasTur_Paquita_pregunta2.html

3.- Explica amb un exemple com es pot detectar la posició del mouse en un àrea de la
pantalla

Exemple 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 crida
des de document.

document.onclick=posicio;
</script>

</body>

*screenX conté la coordenada X en què ha ocorregut l’esdeveniment i screenY conté la
coordenada Y en què ha ocorregut l’esdeveniment.

Comprovar document adjunt: RibasTur_Paquita_pregunta3A.html

Exemple 2:
Indicarà les coordenades dintre d’un camp de formulari.
Primerament crearíem un formulari dintre de <body> destinat a escriure les
coordenades 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>

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 pel
valor de la coordenada x.
document.getElementById("x").value = x;
//Obtindrem el camp de text del formulari amb id=”y” i canviarem el valor buit pel
valor 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 la
pàgina.

<body onMouseMove="coordenadas(event);">

Comprovar document adjunt: RibasTur_Paquita_pregunta3B.html

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à?

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 una
acció. 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 de
dades 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 del
formulari.

Comprovar document adjunt: RibasTur_Paquita_pregunta4.html

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:

//amplada de l'ona en pixels (deixem 10 pixels de marge superior i inferior)
amplitud_ona = height_area_dibuix-20;
x++;

// on 0 <= x <= width_area_dibuix
y = amplitud_ona*Math.sin(x) + height_area_dibuix/2;

Comprovar document adjunt: RibasTur_Paquita_pregunta5.html

6.- Crea una pagina web amb 3 objectes diferents que inicialment apareguin en llocs
aleatoris de la pantalla, i es vagin acostant al cursor

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

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

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

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

Mais de Paquita Ribas

Mais de Paquita Ribas (20)

Último

Último (8)

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