Exercici teoria 1Com contribueixen les funcions locals a la POO?

Entenem per funcions locals en l'entorn POO, funcions definides dins el cos d'una altra funcióprincipal.

function F1() // Funció principal{ this.entrada = function() // Funció secundaria dins de F1{ alert (“Hola”); // Acció de la funció secundaria}}

En l'exemple anterior, hi ha una funció F1 en el cos de la qual s'ha 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 l'acció definida en el cos de lafunció secundaria.

En javaScript, la funció F1 és l'equivalent en Java a l'element 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 seried'accions, les quals estan definides en el cos de la funció secundaria sense nom.

Així, les funcions locals en l'entorn POO s'utilitzen per definir mètodes de la funcióprincipal. Les accions d'aquest mètode es defineixen dins el cos de la funció secundaria.

Precisament això dóna cap a l'ocultament o encapsulació, un dels principis bàsics de la POO, capacitat que consisteix en ocultar els detalls interns del comportament d'una classe i exposar públicament només els necessaris per la resta del sistema, de manera que es protegeix de possibles modificacions que poden implicar comportaments no desitjats.

Així doncs es poden definir propietats privades (variables locals) que només es poden consultar o modificar a través de mètodes interns de la classe definits com a públics.

Exercici teoria 2Programar una actualització de l'objecte String amb una funció “esBoolea()”que retorni si el 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 l'objecte String s'ha utilitzat per poder realitzar aquest exercici? A quins altres objectes existeix?

La propietat de l'objecte “String” que hem d'utilitzar és la propietat “prototype”, així podem afegir mètodes a l'objecte, per després poder-los utilitzar en qualsevol instància d'aquest, ja hagi estat creada o es crei posteriorment. En realitat la propietat “prototype” la podem trobar a tots els objectes javaScript, incloses les classes creades pels usuaris.

Exercici teoria 3

Utilitza (i explica) una expressió regular per detectar si una entrada de teclat té el format d'un mail i una altra que validi si l'entrada 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.

\.([a-zA-Z]{2,6})Ahora sí se espera un punto obligatoriamente y, tras él, letras, entre dos y 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

{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);

}

Exercici teoria 4Quins són els models d'esdeveniments existents i posa un exemple d'utilització del mètodestopPropagation de l'objecte Event.

N'hi han dos models de gestió d'esdeveniments:• Model bàsic• Model d'esdeveniments del DOM estàndard, el qual és un híbrid entre el model HTML

dinàmic de gestió d'esdeveniments desenvolupat al Netscape 4.x per una banda i al Internet Explorer 4.x per l'altra.

El mètode stopPropagation de l'objecte Event atura la seva propagació per l'arbre delDOM. La propagació és la forma en la que viatja l'objecte Event, té tres fases:

• Captura: l'objecte descendeix en l'arbre del DOM des de l'objecte Window fins a l'elementon s'ha originat l'esdeveniment.

• Objectiu: l'element on es produeix l'esdeveniment.• Borbolleig: l'objecte 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 l'objecte Event altres listeners delmateix tipus d'esdeveniment 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 d'un quadrat taronja de majorsdimensions. El comportament esperat consisteix en que al fer click sobre el quadrat taronja o sobre el quadrat blau s'activi un codi alert (“Sóc de color taronja”) o alert (“Sóc de color blau”) en funció de sobre quin color hem fet el click.

Amb aquest codi però, la realitat és que el click sobre el quadrat taronja mostra el comportament esperat però el clik sobre el de color blau activa un alert (“Sóc de color blau”) seguit d'un altre alert (“Sóc de color taronja”).

Això es deu a que l'objecte Event descendeix des de l'objecte Window per arribar al listeneronclick que activa el codi alert (“Sóc de color blau”) i després torna al seu lloc d'origen fent el camíascendent de tornada, moment en el qual es capturat per l'altre 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 l'objecte Event i evitar així que s'activi el codi del segon listener onclick.

<!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>

Exercicis pràctics

Per una banda sou pocs els que heu utilitzat l'ocultació, no es tracta d'un error però si que és important tenir en compte en la POO

Per altra, a l'hora d'aplicar l'herència he observat errors importants. Primer declarar les plantes hereves dels grups, quan són els grups els que són plantes, per exemple, un tubercle és una planta, una lleguminosa és una planta... no una planta és un tubercle, perquè aplicar l'herència representa fer que una classe hereti les dades d'una altra classe base 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 que facilitarà 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 senzill

Us proposo dues solucions entre les diverses que podria posar.

• Una és la que considero més correcta i senzilla d'entendre (carpeta practica 1).

• L'altra (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