Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,346 views

Published on

Correcció de la PAC 3 de l'assignatura de Programació Web del Grau Multimèdia de la UOC.

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Exercici teoria 1Com contribueixen les funcions locals a la POO?Entenem per funcions locals en lentorn POO, funcions definides dins el cos duna altra funcióprincipal. function F1() // Funció principal { this.entrada = function() // Funció secundaria dins de F1 { alert (“Hola”); // Acció de la funció secundaria } }En lexemple anterior, hi ha una funció F1 en el cos de la qual sha creat una altra funció sensenom amb una acció definida en el seu interior.La funció secundaria es assignada a un paràmetre, entrada, que serà el nom del mètodepertanyent a F1 al qual haurem de cridar quan vulguem dur a terme lacció definida en el cos de lafunció secundaria.En javaScript, la funció F1 és lequivalent en Java a lelement class. La paraula entrada és elnom del mètode definit en el cos de F1 i la crida a aquest mètode comporta executar una seriedaccions, les quals estan definides en el cos de la funció secundaria sense nom.Així, les funcions locals en lentorn POO sutilitzen per definir mètodes de la funcióprincipal. Les accions daquest mètode es defineixen dins el cos de la funció secundaria.Precisament això dóna cap a locultament o encapsulació, un dels principis bàsics de la POO,capacitat que consisteix en ocultar els detalls interns del comportament duna classe i exposarpúblicament només els necessaris per la resta del sistema, de manera que es protegeix depossibles modificacions que poden implicar comportaments no desitjats.Així doncs es poden definir propietats privades (variables locals) que només es poden consultar omodificar a través de mètodes interns de la classe definits com a públics.
  2. 2. Exercici teoria 2Programar una actualització de lobjecte String amb una funció “esBoolea()”que retorni siel contingut de la cadena String es pot considerar un valor booleà (es a dir, si conté el text“Si” “No” “Yes””-1” “0” o els que considereu convenients) Quina propietat de lobjecteString sha utilitzat per poder realitzar aquest exercici? A quins altres objectes existeix?La propietat de lobjecte “String” que hem dutilitzar és la propietat “prototype”, així podem afegirmètodes a lobjecte, per després poder-los utilitzar en qualsevol instància daquest, ja hagi estatcreada o es crei posteriorment. En realitat la propietat “prototype” la podem trobar a tots elsobjectes javaScript, incloses les classes creades pels usuaris.
  3. 3. Exercici teoria 3Utilitza (i explica) una expressió regular per detectar si una entrada de teclat té el formatdun mail i una altra que validi si lentrada té un format de nom propi.Detectar si una entrada tiene formato de un mail:/^[w+-]+(.[w+-]+)*@w+(.w+)*.([a-zA-Z]{2,6})$//^ Al inicio de la linea[w+-] Cualquier carácter alfanumérico y el guión bajo, es lo mismo que [a-zA-Z0-9] y, además, los signos + y -+ Lo anterior puede cumplirse varias veces, pero por lo menos se cumple una.(.[w+-]+) Lo siguiente que puede aparecer es un punto, o no, pero en caso de aparecer irá seguido del mismo paquete que antes, un caràcter alfanumerico y puede que un guión bajo, un + o un -. Todo lo dicho puede pasar una vez o más de una vez, es decir, que después del punto algo tiene que haber, no un vacío.* A partir del punto antes mencionado (incluido) es algo que puede no existir.@ Este símbolo es imprescindible y su aparición debe ser en este punto.w+ A continuación se espera por lo menos, un carácter alfanumérico, quizás más de uno.(.w+) Lo siguiente es un punto y luego un caracter alfanumérico por lo menos.* Esto, como lo anterior va entre parèntesis, significa que el patrón anterior puede existir o no. Ahora sí se espera un punto obligatoriamente y, tras él, letras, entre dos y.([a-zA-Z]{2,6}) seis.$/ Fin function formatoMail (mail) { return /^[w+-]+(.[w+-]+)*@w+(.w+)*.([a-zA-Z]{2,6})$/.test(mail); }Detectar si una entrada tiene formato de nombre propio:/^[A-Z]{1}[a-z]+(s[A-Z]{1}[a-z]+)*$//^ Al inicio de la linea[A-Z] Letra mayúscula
  4. 4. {1} Una unidad[a-z] Letra minúscula+ Esto puede pasar una o más veces(s[A-Z]{1}[a-z]+) Espacio en blanco y lo mismo otra vez, una mayúscula seguida de una o varias minúsculas* Esta repetición puede suceder o no, en caso de que solo se de el nombre, sin apellido$/ Fin function formatoNombre (nombre) { return /^[A-Z]{1}[a-z]+s([A-Z]{1}[a-z]+)*$/.test(nombre); }
  5. 5. Exercici teoria 4Quins són els models desdeveniments existents i posa un exemple dutilització del mètodestopPropagation de lobjecte Event.Nhi han dos models de gestió desdeveniments: • Model bàsic • Model desdeveniments del DOM estàndard, el qual és un híbrid entre el model HTML dinàmic de gestió desdeveniments desenvolupat al Netscape 4.x per una banda i al Internet Explorer 4.x per laltra.El mètode stopPropagation de lobjecte Event atura la seva propagació per larbre delDOM. La propagació és la forma en la que viatja lobjecte Event, té tres fases: • Captura: lobjecte descendeix en larbre del DOM des de lobjecte Window fins a lelement on sha originat lesdeveniment. • Objectiu: lelement on es produeix lesdeveniment. • Borbolleig: lobjecte Event ascendeix en el seu camí de tornada cap a la part superior del DOM.La propagació es pot aturar per evitar que en el camí de lobjecte Event altres listeners delmateix tipus desdeveniment produït el puguin capturar i activar les seves accions predefinides.Exemple: <!DOCTYPE html> <html> <head> <style type=text/css> #orange {width:100px; height:100px; background-color:orange;} #blue {width:30px; height:30px; background-color:blue;} </style> </head> <body> <h5>Fes click sobre el color per saber el seu nom</h5> <div id="orange" onclick="alert(Sóc de color taronja);"> <div id="blue" onclick="alert(Sóc de color blau);"></div> </div> </body> </html>El codi anterior mostra en pantalla un quadrat de color blau dins dun quadrat taronja de majorsdimensions. El comportament esperat consisteix en que al fer click sobre el quadrat taronja osobre el quadrat blau sactivi un codi alert (“Sóc de color taronja”) o alert (“Sóc de color blau”) enfunció de sobre quin color hem fet el click.Amb aquest codi però, la realitat és que el click sobre el quadrat taronja mostra el comportamentesperat però el clik sobre el de color blau activa un alert (“Sóc de color blau”) seguit dun altre alert(“Sóc de color taronja”).Això es deu a que lobjecte Event descendeix des de lobjecte Window per arribar al listeneronclick que activa el codi alert (“Sóc de color blau”) i després torna al seu lloc dorigen fent el camíascendent de tornada, moment en el qual es capturat per laltre listener onclick del codi que activael alert (“Sóc de color taronja”).En aquest cas ens pot ajudar el mètode stopPropagation. Aconseguim aturar la propagació detornada de lobjecte Event i evitar així que sactivi el codi del segon listener onclick.
  6. 6. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title> ** Exercici teòric 4 - PAC3 **</title><meta name="author" content="Marc Agulló Correa"/><style type=text/css>#orange {width:100px; height:100px; background-color:orange;}#blue {width:30px; height:30px; background-color:blue;}</style></head><body><h5>Fes click sobre el color per saber el seu nom</h5><div id="orange" onclick="alert(Sóc de color taronja);"><div id="blue" onclick="alert(Sóc de color blau); event.stopPropagation();"></div></div></body></html>
  7. 7. Exercicis pràcticsPer una banda sou pocs els que heu utilitzat locultació, no es tracta dun error però si queés important tenir en compte en la POOPer altra, a lhora daplicar lherència he observat errors importants. Primer declarar lesplantes hereves dels grups, quan són els grups els que són plantes, per exemple, untubercle és una planta, una lleguminosa és una planta... no una planta és un tubercle,perquè aplicar lherència representa fer que una classe hereti les dades duna altra classebase comuna a totes, i les dades comuns a tots els grups pertanyen a planta.La darrera observació general que he notat, seria la de no crear una única llista de plantes,sinó crear diverses llistes en funció del grup. Suposo que això pot fer-vos creure quefacilitarà la visualització de les dades de les plantes amb les seves particularitats.Realment, si definiu un mètode mostrar dins de cada classe i el gestioneu correctament,utilitzar un sol array és extremadament senzillUs proposo dues solucions entre les diverses que podria posar. • Una és la que considero més correcta i senzilla dentendre (carpeta practica 1). • Laltra (practica 2) és molt més visual, però la resolució no està completa. Voldria destacar la PAC del Javi i la Susana per la seva visualitat, però opto per la de la Susanna – no sé si és casualitat- però les imatges es corresponen a la varietat de la planta mostrada

×