• Save
Programació Web - PAC 3 - Multimedia (UOC) - Paquita Ribas
Upcoming SlideShare
Loading in...5
×
 

Programació Web - PAC 3 - Multimedia (UOC) - Paquita Ribas

on

  • 1,302 views

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: ...

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

Statistics

Views

Total Views
1,302
Views on SlideShare
512
Embed Views
790

Actions

Likes
0
Downloads
12
Comments
0

3 Embeds 790

http://raco-vermell.wikispaces.com 685
http://racovermell.com 103
http://www.google.es 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Programació Web - PAC 3 - Multimedia (UOC) - Paquita Ribas Programació Web - PAC 3 - Multimedia (UOC) - Paquita Ribas Document Transcript

  • Estudis d’Informàtica, Multimèdia i Telecomunicacions Grau de multimèdiaProgramació webPAQUITA 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.PAC3Teòrica1.- . 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 tantles funcions locals equivalen als mètodes d’aquests objectes.2.- Programar una actualització de lobjecte String amb una funció “esBoolea()”que retorni si elcontingut 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 lobjecte String sha utilitzat perpoder 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
  • 3.- Utilitza (i explica) una expressió regular per detectar si una entrada de teclat té el format dunmail i una altra que validi si lentrada 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úsculai continuï amb una o més lletres minúscules, totes les lletres accepten accentuació. Davant delgrup 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ésnomés el nom, hauríem d’utilitzar el parèntesis tal i com ho hem fet en la línia de dalt, però amb totel codi sencer. REVISAR EXERCICI ADJUNT: Paquita_Ribas_pregunta3B_teorica_PAC34.- Quins són els models desdeveniments existents i posa un exemple dutilització del mètodestopPropagation de lobjecte 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.
  •  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 introduirdades 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_PAC3PràcticaLHortènsia, que sempre ha estat preocupada pel canvi climàtic i lalimentació sana, darreramentsha aficionat a lagricultura i ha decidit crear un hort urbà que, a part de per menjar sa, tambéutilitzarà com escola i centre de divulgació de lalimentació sana. Ja veieu que lHortènsia té elmodel de negoci força clar, fins i tot té el nom de lassociació que pretén crear “Hort i cultura”, elproblema és que no en sap gens dinformàtica i vol començar amb una web útil als possiblesinteressats i interessades.Per començar “Horticultura” començarà oferint una llista de les verdures i llegums més comuns ala zona amb algunes dades bàsiques associades1.- 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 lesdades duna determinada posició dels arrays de dades dexemple 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 sindicarà amb un booleà Per fer aquest exercici definiu paràsits com a un booleà (true/false) Nota: Disposeu de les dades necessàries a larxiu dades.jsSegons 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 laposició 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 varietatraf, es planta de maig a juliol, es recull de juny a setembre i és sensible a tots els paràsits que estroben 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à, aligual 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.
  • 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’hande convertir tots els caràcters en minúscules, ja que, per exemple, el paràsit Pugó apareix enmajú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àsitsNoms_Parasits hem de separar cada element. Ho farem amb split. Aquest paràsits separats decada 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 enblanc del principi i final d’una cadena.Després compararem l’array Noms_parasits de l’arxiu dades.js amb paràsits_individuals pertrobar-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(“-“) ianomenarem 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 ferque 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 isetembre. 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_PAC32.- Crear un array dinstàncies de la classe “planta” amb les dades emplenades (pe de nomll_plantes) i dissenyar una pàgina que permeti visualitzar larray de plantes. Com a mínim hem depoder navegar per les dades de les diferents plantes amb els botons: primera, anterior, següent iúltimaPrimerament, 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 plantaFinalment, 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_PAC33.- Reconeguts experts amb els que ha parlat lHortènsia li han fet notar que els grups classificatsen: tubercles, lleguminoses, hortalisses de fulla, i plantes de fruit carnós tenen una importànciaque 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ó:
  •  tubercles, umbel·líferes, liliàcees:  Propietats:  Grup  Tipus darrel: 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, malla4.- Relacionar, aplicant lherència, els grups (classes) amb les plantes (classe). Modificar elformulari dissenyat al exercici2 de forma que es mostri la informació particular del grup al quepertany 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.