Pac3 PW PDF

PAC3
Estudis dInformtica, Multimdia i Telecomunicacions Grau de multimdia
Programaci web
Introducci i manipulaci del DOM.
1.- Explica amb un exemple els distints tipus de nodes existents en el DOM estndard:
#1 ELEMENT
Qualsevol etiqueta HTML.
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd>
<html> <head> <title>Exemple nodes</title> </head> <body> <h1>Ttol de l'article</h1> <div><b>Contenidor</b> genric. <p>Text de l'article</p> </div> </body> </html>
#2 ATRIBUT
Qualsevol atribut que s'adjudiqui a una etiqueta HTML.
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html> <head> <title>Exemple nodes</title> </head> <body> <h1 <div
class="tit">Ttol de l'article</h1> id="contGen"><b>Contenidor</b> genric. blue;">Text de l'article</p>
<p style="color: </div> </body> </html>
#3 TEXT
Qualsevol text incls en una etiqueta HTML.
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html> <head> <title>Exemple </head> <body> <h1 class="tit">Ttol
nodes</title>
de l'article</h1> genric.
<div id="contGen"><b>Contenidor</b> <p style="color: blue;">Text </div>
de l'article</p>
</body> </html>
#8 COMENTARI
Qualsevol comentari incls dins del codi HTML.
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html> <head> <title>Exemple nodes</title> </head> <body> <h1 class="tit">Ttol de l'article</h1>


<div id="contGen"><b>Contenidor</b> genric. <p style="color: blue;">Text de l'article</p> </div> </body> </html>
#9 DOCUMENT
Node que fa referncia al document arrel del document. S'actua sobre ell mitjanant la manipulaci del tag <html>.
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd>
<html>
<head> <title>Exemple nodes</title>
</head> <body> <h1 class="tit">Ttol de l'article</h1>  <div id="contGen"><b>Contenidor</b> genric. <p style="color: blue;">Text de l'article</p> </div> </body>
</html>
#10 TIPUS DE DOCUMENT

Node que fa referncia al tipus de document. S'actua sobre ell mitjanant la manipulaci del tag <!DOCTYPE>. <!DOCTYPE html PUBLIC -//W3C//DTD HTML
4.01//ENhttp://www.w3.org/TR/html4/strict.dtd>
<html> <head> <title>Exemple nodes</title> </head> <body> <h1 class="tit">Ttol de l'article</h1>  <div id="contGen"><b>Contenidor</b> genric. <p style="color: blue;">Text de l'article</p> </div> </body> </html>
2.- Quina diferncia hi ha entre el BOM i el DOM?
MODEL
PARTICULARITAT
(Browser Object Model) Model d'objectes que defineix la interfcie i l'estructura prpia dels navegadors. Permet actuar sobre elements propis de la seva estructura, com ara l'objecte Window, History o Screen.
BOM
Malgrat tot,
presenta algunes particularitats que cal tenir en
compte a l'hora de programar:

a diferncia del DOM, aquest model d'objectes experimenta una constant evoluci, fet que dificulta l'estandaritzaci. la gran varietat de navegadors fa que hi hagi tamb un gran nombre de divergncies entre ells, fet que obstaculitza l'estandaritzaci i dificulta la tasca dels programadors.
(Document Object Model) Model d'objectes que dna accs al contingut i els elements del document que cont la finestra del navegador. A diferncia del BOM, el model d'objectes del document est mot estandaritzat ja que es basa l'organitzaci jerrquica dels objectes, on qualsevol element depn del seu immediatament superior i influeix sobre els que t en nivells inferiors. Aquest flux s el que permet la comunicaci entre ells.
DOM
3.-
Explica
les
principals
caracterstiques
del
model
desdeveniments del DOM estndard. Compara aquest ltim amb els primers models dInternet Explorer 4.X i Netscape 4.X. Per poder explicar les principals caracterstiques del model d'esdeveniments del DOM estndard s interessant explicar abans les particularitats d'aquest model en els navegadors Explorer 4.x i Netscape 4.x. L'aparici de les versions 4.x dels navegadors va proporcionar un nou objecte: l'objecte Event, que es creava quan es produa un esdeveniment per tal que aquest recolls la seva informaci. Malgrat tot, cada navegador ho va implementar de manera diferent.
Al model de Netscape 4.x els esdeveniments es propagaven a travs de la jerarquia del document, de tal manera que objectes superiors podien capturar l'esdeveniment abans que fos processat per l'objecte que l'havia generat amb la finalitat d'unificar la gesti d'esdeveniments i evitar duplicitats de controladors. A ms, els esdeveniments eren rebuts com a parmetres pels mtodes que els havien de tractar. Mscares de bits com CLICK, KEYPRESS o FOCUS complien aquesta funci.
Exemple d's del model d'esdeveniments: function Esdev(e){ alert("Esdeveniment detectat"); } document.captureEvents(Event.CLICK | Event.KEYPRESS); document.onclick=Esdev; document.onkeypress= Esdev;
Al model de Explorer 4.x gaireb tots els objectes podien capturar esdeveniments. De manera anloga a la implementaci de Netscape, cada cop que es generava un esdeveniment es creava un objecte Event. La diferncia rau en el fet que aquest esdeveniment no es passava al controlador com argument del mtode sin que es constitua en objecte global. Aquest fet permetia que fos accessible directament des de qualsevol codi.
Exemple d's del model d'esdeveniments: function Esdev(){ alert("Esdeveniment detectat:" + event.keyCode); } document.onkeypress= Esdev;
La segent taula resumeix les caracterstiques fonamentals dels dos models d'esdeveniment:
Netscape 4.x
L'esdeveniment es propaga a travs de la jerarquia del document. Declara els esdeveniments capturats Passa els esdeveniments com a parmetre del controlador.
Explorer 4.x
L'esdeveniment es propaga des de l'objecte on s'ha creat. No declara els esdeveniments capturats No passa l'esdeveniment com a parmetre. Empra la variable global event.
El model d'esdeveniments del DOM estndard s un model hbrid basat en els dos models presentats:
1. fase de captura: els esdeveniments s'inicien en la part ms alta de la jerarquia i descendeixen fins a l'objecte de destinaci (model Netscape). 2. fase d'ascens: quan el controlador acaba el tractament de l'esdeveniment aquest realitza el cam invers fins arribar a la part superior de la jerarquia. (model Explorer)
El model DOM permet controlar esdeveniments de ratol, de navegador i HTML, d'UI i de canvi de jerarquia. Aquests esdeveniments requereixen una funci controladora i un objecte al que ser assignat:
la funci controladora rep l'esdeveniment com a parmetre i pot ser consultat dins de la mateixa.
l'esdeveniment
s'assigna
l'objecte
escollit
mitjanant
propietats del DOM.
El model DOM introdueix el concepte d'oient d'esdeveniments, que sn el conjunt de controladors d'esdeveniments vinculats a un node concret. Un oient d'esdeveniments permet:
establir la fase de control de l'esdeveniment. vincular diversos controladors a un esdeveniment. vincular un controlador a un node de tipus text.
4.- Explica les distintes caracterstiques que sutilitzen per a detectar el navegador que est utilitzant lusuari. El fabricant del navegador es pot consultar mitjanant el valor que retorna la propietat appName de l'objecte Navigator:
retorna Netscape si el client s Firefox, Safari o Chrome. retorna Microsoft Internet Explorer. Opera pot retornar qualsevol dels dos valors. Cal consultar la propietat userAgent. Internet Explorer si el client s
Malgrat tot, aquest darrer mtode s el que retorna la informaci ms completa sobre la informaci d'un navegador. Aquesta informaci est continguda en una cadena que cont una srie de parmetres:
subcadena MSIE: identifica el navegador Internet Explorer i la seva versi. subcadena Gecko: identifica els navegadors Mozilla, Netscape, Firefox i Camino. subcadena Opera: identifica el navegador Opera. subcadena Chrome: identifica el navegador Chrome. si apareix la subcadena Safari per no Chrome s'identifica el navegador Safari.
5.- En aquest exercici sha dimplementar el moviment en lnea recta dun objecte en la pantalla. Lexercici constar duna pgina HTML inicial on hi haur un formulari que recollir la informaci sobre la posici inicial de lobjecte (left i top), aix com la velocitat (pxels per segon) i la posici final de lobjecte. I a ms el formulari contindr un bot que executar el moviment anterior en la mateixa pgina on est el formulari.
Sha de validar cadascun dels valors introduts en els camps del formulari de forma que el moviment estigui restringit a lespai de la pantalla. Lestudiant ha aplicar un cert estil a la pgina aix com a lobjecte que sha de moure.
Es
pot
consultar
el
codi
de
l'exercici
als i
arxius js/
villarreal_quintana_jaume_exercici5.html ex5.js. Al respecte ser interessant fer dues consideracions:
l'script valida els valors introduts i retorna un alert en cas que algun d'ells desbordi la mida del contenidor. l'interval de crida ha quedat establert a 1000 millisegons, tot i que visualment el moviment es s'executa de manera correcta a un interval de 10 millisegons. he experimentat certes dificultats a l'hora de demanar a l'script que el moviment se cenys a la mida del contenidor quan les coordenades finals sn menors que les inicials. Possiblement aquest aspecte no ha estat resolt satisfactriament al 100%.
6.- Sha dampliar la pgina anterior, de forma que quan el ratol contacte amb la capa en moviment fai que aquesta aturi el seu moviment. Una vegada aturada la capa es podran modificar els valors del formulari i tornar a moure la capa des de la posici on sha aturat. (2 punts) Es pot consultar el codi de l'exercici als i arxius js/ villarreal_quintana_jaume_exercici5.html ex5.js. S'ha implementat una darrera funci que remou el control de temps.
7.- Tenint com a base lexemple de lapartat 3.6.3 del mdul 5, sha de crear una pgina HTML que contingui un men dinmic de dos nivells. Estar format per 4 opcions de men en el primer nivell i almenys 3 opcions en el segon nivell de 3 de les opcions del primer nivell. La principal diferncia respecte lexemple del mdul es que sha dimplementar a la part esquerra de la pgina i ha de ser vertical. Es pot consultar el codi de l'exercici als i arxius js/
villarreal_quintana_jaume_exercici7.html jquery-1.9.1.min.js.
El men s'ha collocat a l'extrem superior esquerre d'un contenidor genric.

Pac3 PW PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Pac3 PW PDF

Uploaded by

Copyright:

Available Formats

PAC3

Estudis dInformtica, Multimdia i Telecomunicacions Grau de multimdia

class="tit">Ttol de l'article</h1> id="contGen"><b>Contenidor</b> genric. blue;">Text de l'article</p>

<p style="color: </div> </body> </html>

<div id="contGen"><b>Contenidor</b> <p style="color: blue;">Text </div>

#10 TIPUS DE DOCUMENT

2.- Quina diferncia hi ha entre el BOM i el DOM?

presenta algunes particularitats que cal tenir en

compte a l'hora de programar:

propietats del DOM.

villarreal_quintana_jaume_exercici5.html ex5.js. Al respecte ser interessant fer dues consideracions:

El men s'ha collocat a l'extrem superior esquerre d'un contenidor genric.

You might also like