PAC 3 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

1. Estudis d’Informàtica, Multimèdia i Telecomunicacions
Grau de multimèdia
Programació web
PAQUITA RIBAS TUR
 Per a dubtes i aclariments sobre l’enunciat, adreceu-vos al consultor responsable de la
vostra aula.
 Cal lliurar la solució en un fitxer doc i la pràctica en arxius html, js i css si és el cas.
Podeu comprimir els arxius en un .rar o .zip. Adjunteu el fitxer a un missatge adreçat a
la bústia Lliurament i registre d’AC.
 El nom del fitxer ha de ser CognomsNom_PW_PAC3 amb l’extensió .doc, .dot o .pdf.
 Consulteu la data de lliurament al calendari.
PAC3
Teòrica
1.- . Com contribueixen les funcions locals a la POO?
Els objectes estan formats per propietats i mètodes.
En JavaScript les funcions globals equivalen a objectes, les variables locals a propietats i per tant
les funcions locals equivalen als mètodes d’aquests objectes.
2.- Programar 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?
- Introduirem una cadena mitjançant prompt
- Comprovarem si la cadena està formada NOMÉS per les paraules “SI”, “NO”, “YES”,
“VERTADER” “FALS” i les seves combinacions de majúscules i minúscules i els números
“-1” i “0”.
- Si troba coincidències apareixerà una alerta de tipus “SI és un valor booleà”
- Si no troba coincidències apareixerà una alerta de tipus “no és un valor booleà”.
REVISAR EXERCICI ADJUNT: Paquita_Ribas_pregunta2_teorica_PAC3

2. 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.
Correu electrònic:
/^[a-zA-Z][a-zA-Z0-9._]*[@][a-zA-Z][a-zA-Z0-9.-]*[.][a-zA-Z]{2-6}$/
/^[a-zA-Z] L’entrada ha de començar per qualsevol lletra minúscula o majúscula.
[a-zA-Z0-9._]* Seguit de zero o més lletres minúscules, zero o més lletres majúscules,
zero o més números, zero o més punts o zero o més guions baixos.
[@] Seguint d’una “arroba”
[a-zA-Z] Seguit per una lletra majúscula o minúscula
[a-zA-Z0-9.-]* Seguit de zero o més lletres minúscules, zero o més lletres majúscules,
zero o més números, zero o més punts o zero o més barres inclinades o
zero o més guions baixos.
[.] Seguit d’un punt
[a-zA-Z]{2-6}$/ Finalitzant amb de dos a sis lletres minúscules y/o majúscules.
Nom propi
/^[A-ZÀÁÈÉÍÒÓÚ]{1}[a-zàáèéíòóú]+(s[A-ZÀÁÈÉÍÒÓÚ]{1}[a-zàáèéíòóú]+)+$/
/^[A-ZÀÁÈÉÍÒÓÚ]{1} L’entrada ha de començar obligatòriament amb una lletra majúscula,
acceptant també lletres accentuades.
[a-zàáèéíòóú]+ Seguit d’una o més lletres minúscules, acceptant també lletres
accentuades.
Existia la problemàtica de trobar-nos amb un nom propi compost o un nom anglès (que només té
un llinatge). Per la qual cosa segueix amb el següent:
(s[A-ZÀÁÈÉÍÒÓÚ]{1}[a-zàáèéíòóú]+)+$/
Significa que continuarà amb un o més d’un grup de lletres que comenci amb una lletra majúscula
i continuï amb una o més lletres minúscules, totes les lletres accepten accentuació. Davant del
grup de lletres ha d’haver un espai i és obligatori acabar amb un grup com aquest.
Aquesta expressió regular accepta un Nom+ 1 llinatge com a mínim. Si volguéssim que acceptés
només el nom, hauríem d’utilitzar el parèntesis tal i com ho hem fet en la línia de dalt, però amb tot
el codi sencer.
REVISAR EXERCICI ADJUNT: Paquita_Ribas_pregunta3B_teorica_PAC3
4.- Quins són els models d'esdeveniments existents i posa un exemple d'utilització del mètode
stopPropagation de l'objecte Event.
Existeixen tres models d’esdeveniments:
- Dos que ha evolucionat paral·lelament a l’evolució dels models d’objectes dels navegadors
principals. Eren molt bàsic fins que va aparèixer la versió 4.x dels navegadors.
o Model bàsic de control d’esdeveniments
 En un primer moment s’implementaven els controladors d’esdeveniments en
les etiquetes HTML, però només si l’etiqueta o l’objecte admetien
l’esdeveniment.

3.  Amb les versions Netscape 3 i Internet Explorer 4 es va poder implementar
els controladors d’esdeveniments amb JavaScript
o Model dinàmic de control d’esdeveniments
 Amb Netscape 4.x els esdeveniments es propagaven mitjançant la jerarquia
del document fins arribar a l’objecte en què s’havia de generar
l’esdeveniment. Així s’evitava la repetició de controladors
 Amb Internet Explorer 4.x, els esdeveniments també es propagaven
mitjançant una jerarquia, però en sentit contrari, és a dir, des de l’objecte en
que s’han creat fins a l’objecte Window.
- L’altre és el model d’esdeveniments del DOM estàndard del W3C. Aquest model
adquireix els avantatges dels models anteriors (Netscape 4.x i Internet Explorer 4.x). És un
model d’esdeveniments molt complet.
stopPropagation evita la propagació d’un event.
Exemple:
Tenim un camp on s’ha d’introduir un número de telèfon. Només volem que es puguin introduir
dades numèriques i que rebutgi un altre tipus de dades.
Amb stopPropagation podem aturar el comportament que té un event per defecte.
REVISAR EXERCICI ADJUNT: Paquita_Ribas_pregunta4_teorica_PAC3
Pràctica
L'Hortènsia, que sempre ha estat preocupada pel canvi climàtic i l'alimentació sana, darrerament
s'ha aficionat a l'agricultura i ha decidit crear un hort urbà que, a part de per menjar sa, també
utilitzarà com escola i centre de divulgació de l'alimentació sana. Ja veieu que l'Hortènsia té el
model de negoci força clar, fins i tot té el nom de l'associació que pretén crear “Hort i cultura”, el
problema és que no en sap gens d'informàtica i vol començar amb una web útil als possibles
interessats i interessades.
Per començar “Horticultura” començarà oferint una llista de les verdures i llegums més comuns a
la zona amb algunes dades bàsiques associades
1.- Dissenyar la classe “planta” amb les següents dades: nom, grup, varietat, mesos de plantada,
mesos de recollida, paràsits). Afegiu un mètode que carregui a les propietats de la classe les
dades d'una determinada posició dels arrays de dades d'exemple
Els grups principals són: tubercles, umbel·líferes, liliàcees, lleguminoses, hortalisses de
fulla (asteràcees o crucíferes), i plantes de fruit carnós (solanàcees)
Els mesos sempre són 12, poden ser plantables i/o recollibles, i s'indicarà amb un booleà
Per fer aquest exercici definiu paràsits com a un booleà (true/false)
Nota: Disposeu de les dades necessàries a l'arxiu dades.js
Segons el document adjunts dades.js, a la posició 0 de Nom, li correspon la posició 0 de Grup,
Varietat, Mesos_plantada, Mesos_recollida i Parasits; a la posició 1 de Nom, li correspon la
posició 1 de Grup, Varietat, Mesos_plantada, Mesos_recollida i Parasits; i així successivament.
Segons això sabem, per exemple, que el Tomàquet, és del Grup de les solanàcies, de la varietat
raf, es planta de maig a juliol, es recull de juny a setembre i és sensible a tots els paràsits que es
troben en la posició 0 de l’array de Parasits.
Com que tant els mesos de plantada com els mesos de recollida s’han d’indicar amb un booleà, al
igual que els paràsits, necessitarem tenir mesos i paràsits per separat.
Primerament crearem un array amb tots els noms del mesos de l’any separats per comes.
L’anomenarem Noms_Mesos.

4. Després crearem un array amb tots els noms del paràsits existents separats per comes.
L’anomenarem Noms_Parasits.
Crearem la classe “planta” i agafarem el nom, grup i varietat des de la posició “n” de cada array.
Obtindrem també la cadena paràsits que es troben en la posició “n”. Però abans de fer res s’han
de convertir tots els caràcters en minúscules, ja que, per exemple, el paràsit Pugó apareix en
majúscules i minúscules i podria donar error.
string_parasits és l’array de paràsits de cada planta.
Per a poder comparar els paràsits de cada planta amb la nostra cadena de paràsits
Noms_Parasits hem de separar cada element. Ho farem amb split. Aquest paràsits separats de
cada planta els anomenarem paràsits_individual.
Quan hem separar els paràsits per les comes, ens ha quedat un espai davant de cada paràsit.
Aquest s’ha d’eliminar amb trim, perquè o si no donaria error. El mètode trim elimina els espais en
blanc del principi i final d’una cadena.
Després compararem l’array Noms_parasits de l’arxiu dades.js amb paràsits_individuals per
trobar-ne coincidències. Si és així ens retornarà true, i si no false.
Seguirem les mateixes pautes per als mesos de plantada i de recollida.
string_mesos és l’array de mesos de cada planta.
En aquest cas hem de separar els mesos que vagin amb guionet. Ho farem amb Split(“-“) i
anomenarem array_mesos a aquest nou array.
Hi ha plantes que tenen dos mesos i en hi ha d’altres que nomes en tenen un. Per això hem de fer
que en les plantes que tinguin només un mes, més d’inici ha de ser igual a mes del final.
Si una planta té els mesos de plantada entre juny i setembre, ha de donar true juny, juliol i
setembre. Els mesos anteriors i posteriors serien false.
mesos_plantada és l’array nou que tindrà true o false.
Repetim el mateix procediment amb els mesos de recollida.
REVISAR EXERCICI ADJUNT: Paquita_Ribas_pregunta1_practica_PAC3
2.- Crear un array d'instàncies de la classe “planta” amb les dades emplenades (pe de nom
ll_plantes) i dissenyar una pàgina que permeti visualitzar l'array de plantes. Com a mínim hem de
poder navegar per les dades de les diferents plantes amb els botons: primera, anterior, següent i
última
Primerament, crearem una instància per a cada planta dintre d’un array de denominarem plantes.
Aquest, per a cada nom de planta, carregarà les seves dades.
Desprès crearem la funció mostrar_planta. Aquesta fa el següent:
- Obre una nova finestra on mostra una taula amb totes les dades de les plantes
- Mostra el nom, grup i varietat de la planta en la seva corresponent cel·la
- En les cel·les de mesos de plantada i mesos de recollida es mostrarà el llistat dels dotze
mesos amb Si o No segons correspongui a la planta
- En la cel·la de paràsits es mostrarà el llistat de tots els paràsits amb Si o No segons
correspongui a la planta
Finalment, per a mostrar la fitxa de cada planta hem creat un enllaç per a cada posició dels arrays.
REVISAR EXERCICI ADJUNT: Paquita_Ribas_pregunta2_practica_PAC3
3.- Reconeguts experts amb els que ha parlat l'Hortènsia li han fet notar que els grups classificats
en: tubercles, lleguminoses, hortalisses de fulla, i plantes de fruit carnós tenen una importància
que no ha sabut destacar. Desprès de reflexionar sobre el tema ha decidit ampliar la informació
sobre aquests grups creant una classe per cadascun amb la següent informació:

5.  tubercles, umbel·líferes, liliàcees:
 Propietats:
 Grup
 Tipus d'arrel: bulbs. Arrels engruixides, tubercles
 lleguminoses:
 Propietats:
 Grup
 Tipus de creixement: ràpid o lent
 Necessitat de nutrients: molts o pocs
 hortalisses de fulla:
 Propietat:
 Grup
 es consumeix la fulla
 es consumeix la tija
 es consumeix la flor
 fruit carnós:
 Propietat:
 Grup
 Suport: cap, vertical, malla
4.- Relacionar, aplicant l'herència, els grups (classes) amb les plantes (classe). Modificar el
formulari dissenyat al exercici2 de forma que es mostri la informació particular del grup al que
pertany la planta que es mostra.
Nota: Per fer la feina menys repetitiva tan sols considereu els grups: lleguminoses,
hortalisses de fulla i fruit carnós.