Estudis d’Informàtica, Multimèdia i Telecomunicacions

Grau de multimèdia Programació web Jordi Llonch Esteve

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. 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_PAC2 amb l’extensió .doc.

Consulteu la data de lliurament al calendari. PAC 2 Teòrica 1.- . Que és l'abstracció? Es pot implementar a JavaScript? Plantegeu alternatives. Què és l’abstracció? La paraula “abstracció” s’utilitza per definir dues realitats en la programació, per una banda, la que fa referència a un dels principis bàsics de la programació orientada a objectes i, per l’altra, la que dóna nom a un tipus de classes de de la programació orientada a objectes, les classes abstractes. L’abstracció, entesa com a principi bàsic de la POO, permet simplificar un problema a través del seu anàlisi. Per fer-ho, es comparen els elements del problema amb la realitat i s’esquematitzen de tal manera que es pugui escriure un codi que serveixi per a cada situació. Les classes abstractes, presents en la programació orientada a objectes, són un tipus de classes a partir de les quals no es poden crear altres objectes, és a dir, no es poden instanciar. La seva construcció les determina com a classes pare, i si es vol crear alguna classe derivada, es farà mitjançant l’ús de l’herència. Es pot implementar a JavaScript? Sí, ja que el JavaScript implementa el principis bàsic de la programació orientada a objectes de l’abstracció, el qual s’aconsegueix combinant l’herència, els mètodes i les propietats dels objectes de JavaScript. Tot i així, JavaScript no pot especificar que una classe sigui abstracta de manera directa, per la qual cosa s’ha de fer ús d’alguna alternativa per solucionar aquest problema.

Alternatives en JavaScript Una opció per a especificar que una classe és abstracta és mitjançant l’ús de comentaris. Una altra, és declarar una classe en forma de funció que defineixi els mètodes comuns a tots els productes que es pugui fer. Després, s’ha de crear una altra classe que hereti de la primera classe i torni a definir els mètodes. 2- . Ús i significat de la paraula clau this de JavaScript. Poseu exemples d'ús en diferents situacions La paraula clau “this” s’empra per accedir a propietats i mètodes d’un objecte sense haver d’escriure el nom d’aquest. Es podria aconseguir el mateix resultat escrivint el nom de l’objecte però d’aquesta manera, els nous objectes creats com a instàncies de l’objecte inicial no funcionarien ja que aquests no farien referència a l’objecte propietari d’aquests mètodes o propietats. Exemple en una propietat:

function Ordinador(potencia) {

alert(“Classe Ordinador instanciada”); var model = null; this.potencia = potencia;

} var ordinador1 = new Ordinador(1024); var ordinador2 = new Ordinador(2048);

Exemple en un mètode:

function Ordinador(potencia) {

alert(“Classe Ordinador instanciada”); this.potencia = potencia; this.setModel = function(model) { this.model = model; alert(“Ordinador: model modificat”); }

} var ordinador1 = new Ordinador(1024); var ordinador2 = new Ordinador(2048); ordinador1.setModel(“Intel i5”); ordinador2.setModel(“Intel i7”);

3.- Descriu les tres formes de polimorfisme, explicant les seves principals diferències. Posa exemples pràctics de la seva utilització i explica els avantatges que aporten en cada cas. Polimorfisme de sobrecàrrega És el tipus de polimorfisme que té lloc quan funcions amb un mateix nom tenen una funcionalitat semblant, però en classes independents entre elles. Aquestes funcions es poden aplicar a paràmetres de diferent tipus, perquè una funció d’aquest tipus es comporta de manera diferent depenent del tipus de paràmetres a que s’apliqui. Exemple: L’operador “+” es pot emprar de les següents maneres:

1 + 1 = 2 1 + 1,5 = 2,5 [1, 2, 3] + [4, 5, 6] = [1, 2, 3, 4, 5, 6] “ho” + “la” = “hola”

Polimorfisme paramètric És el tipus de polimorfisme que serveix per dotar un llenguatge de més expressivitat. Mitjançant aquest tipus de polimorfisme, vàries funcions es poden definir amb un mateix nom, però emprant paràmetres amb noms i tipus diferents. Depenent del tipus de dades passades del paràmetre, la funció seleccionarà el mètode adequat a aplicar. Exemple: Per continuar amb l’exemple anterior, emprarem el mètode homònim “suma()”:

ent suma(ent,ent) fa una suma de valors enters. car suma(car,car) fa una concatenació de caràcters.

Polimorfisme de subtificació És el tipus de polimorfisme en el qual una classe hereta els mètodes d’una altra classe, anomenada classe base, cosa que permet no haver de conèixer el tipus intrínsec a l’hora de cridar un mètode d’objecte. Permet no haver de saber detalls de les classes especialitzades d’una família d’objectes. Exemple: Un exemple d’aquest tipus de polimorfisme el trobem entre les paraules “avió” i els tipus d’aquest: “avioneta”, “ultralleuger”, “paramotor”, en el qual cadascun dels tipus hereta la majoria de les característiques d’“avió”, però tenen unes diferències específiques.

4- En què condicions s'aplica l'ocultació? L’ocultació permet definir el tipus de control d’accés que es té dels atributs i mètodes de les classes mitjançant tres modificadors: Public Els membres (atributs i mètodes) són accessibles des de qualsevol lloc on es pugui accedir a la classe i els hereten les subclasses. Private Les propietats i mètodes només són accessibles des de la classe. Protected Les propietats i mètodes només son accessibles per a les seves subclasses. Pràctica 1.- Anem a tractar els accidents de trànsit. Resulta que els hem classificat segons el seu tipus: lleus, greus i mortals, i se'ns demana generar llistes d'accidents per tipus amb informació de la data de l'accident (dd/mm/aaaa). Aplicar la tècnica dels “arrays associatius” en una pàgina web amb JavaScript. Nota: La pàgina web contindrà un desplegable amb les opcions: “Accidents lleus”, “Accidents greus” i ”Accidents mortals”, també hi haurà un botó “mostrar” que visualitzarà els accidents del tipus seleccionat ordenats per data. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PAC 2 - Pràctica 1</title> <script type="text/javascript"> //Creo una classe que emmagatzema la informació sobre l'accident function Accident(dia, accident) { this.dia = dia; this.accident = accident; this.mostraAccident = function() { alert("Dia:" + this.dia + ": Accident: " + this.accident); } }

//Escric els accidents dividits en tres tipus var tipus = new Array(); tipus['lleus'] = new Array( new Accident('01/01/2011', '4 ferits en una col·lisió a Barcelona'), new Accident('16/03/2011', '2 ferits en una col·lisió a Tarragona'), new Accident('24/05/2011', '1 ferit en una col·lisió a Lleida'), new Accident('16/09/2011', '2 ferits en una col·lisió a Girona') ); tipus['greus'] = new Array( new Accident('05/01/2011', '2 ferits greus en una col·lisió a Palamós'), new Accident('20/02/2011', '1 ferit greu en una col·lisió a Reus'), new Accident('13/06/2011', '2 ferits greus en una col·lisió a Camprodon'), new Accident('19/11/2011', '4 ferits greus en una col·lisió a Amposta') ); tipus['mortals'] = new Array( new Accident('05/04/2011', '2 morts en una col·lisió a Sort'), new Accident('22/07/2011', '1 mort en una col·lisió a Calella'), new Accident('30/08/2011', '5 morts en una col·lisió a Viladecans'), new Accident('03/10/2011', '2 morts en una col·lisió a Roses'), new Accident('28/12/2011', '1 mort en una col·lisió a Maçanet de la Selva') ); //Mostro els accidents segons el tipus escollit en el desplegable function mostraAccidents() { var tipusescollit = document.formulari.llista.selectedIndex; if (tipusescollit.lenght > 0) { for(var i=0; i<tipusescollit.length; i++) tipusescollit[i].mostraAccident(); } } </script> </head> <body> <form name="formulari"> <select name="llista"> <option value="lleus">Accidents lleus <option value="greus">Accidents greus <option value="mortals">Accidents mortals </select> <input type="button" value="Mostrar" onclick="javascript:mostraAccidents();"> </form> </body> </html>

2.- Seguint amb els “accidents”, aplicar l'herència a una classe mare ”accident” amb dades comunes a tots els tipus, de la qual derivin “accident_lleu”, “accident_greu” i “accident_mortal” que tindran propietats pròpies. Organitzar els accidents en una llista que permeti consultar-los per data. Nota: Les propietats comunes a cada accident poden ser: carretera, punt kilomètric, descripció del lloc i nombre de vehicles implicats Les propietats pròpies de cada tipus d'accident poden ser:

• Lleus: nombre de persones que han necessitat d'assistència mèdica. Si han pogut marxar amb el vehicle propi (podem posar el nombre de vehicles).

• Greus: nombre de persones ingressades, dies total ingressats. Llista de les seqüeles més greus.

• Mortals: nombre de persones que han mort en el mateix moment de l'accident, nombre de persones que han mort els dies posteriors.

Resulta evident que aquesta informació l'hauríem de guardar per a cadascuna de les persones implicades juntament amb les seves dades personals. Però plantejar-ho d'aquesta manera ens simplifica el treball. Una llista d'accidents és el mateix que un array d'accidents. Exemple en pseudocodi de la llista suposant que només guardem els accidents de l'any actual. En aquest cas l'índex del array és el dia de l'any:

var llista_per_dia = array(365); llista_per_dia(0) = llista_de_accidents_de el_dia_1_de_gener; llista_per_dia(364) = llista_de_accidents_de el_dia_31_de_desembre;

Hi ha millors alternatives si desitgeu elaborar-ho una mica més... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PAC 2 - Pràctica 2</title> <script type="text/javascript"> //Aquí creo la classe mare function accident (dia,lloc) { this.dia = dia; this.lloc = lloc; } //Aquí creo la classe filla accidents lleus

function accident_lleu(dia,lloc,assistides,vehicles) { accident.call(this,dia,lloc); this.assistides = assistides; this.vehicles = vehicles; } accident_lleu.prototype = new accident() //Aquí creo la classe filla accidents greus function accident_greu(dia,lloc,ingressades) { accident.call(this,dia,lloc); this.ingressades = ingressades; } accident_greu.prototype = new accident() //Aquí creo la classe filla accidents mortals function accident_mortal(dia,lloc,mortes,mortesdespres) { accident.call(this,dia,lloc); this.mortes = mortes; this.mortesdespres = mortesdespres; } accident_mortal.prototype = new accident() //Aquí defineixo els accidents var accident_lleu1 = new accident_lleu([1,75,144,289],["Barcelona","Tarragona","Lleida","Girona"],[4,2,1,2],[3,3,1,1]) var accident_greu1 = new accident_greu([5,51,164,323],["Palamós","Reus","Camprodon","Amposta"],[2,1,2,4]) var accident_mortal1 = new accident_mortal([95,203,242,276,362],["Sort","Calella","Viladecans","Roses","Maçanet de la Selva"],[2,1,5,2,1],[1,0,0,4,2]) //Aquí faig un recorregut per tots els dies i comprovo si cada objecte té accidents en els dies definits. Després mostro les activitats en una llista. for (i=0;i<=365;i++) { cadena = "" for (j=0;j<=accident_lleu1.dia.length;j++) { if (accident_lleu1.dia[j]==i) { cadena = cadena + "Accident lleu amb " + accident_lleu1.assistides[j] + " persones assistides a " + accident_lleu1.lloc[j] + ", de les quals " + accident_lleu1.vehicles[j] + " han pogut marxar amb el vehicle propi.<br>" } } for (j=0;j<=accident_greu1.dia.length;j++) { if (accident_greu1.dia[j]==i) { cadena = cadena + "Accident greu amb " + accident_greu1.ingressades[j] + " persones ingressades a " + accident_greu1.lloc[j] + ".<br>" } } for (j=0;j<=accident_mortal1.dia.length;j++) { if (accident_mortal1.dia[j]==i) { cadena = cadena + "Accident mortal amb " + accident_mortal1.mortes[j] + " morts a l'intstant a " + accident_mortal1.lloc[j] + " i " + accident_mortal1.mortesdespres[j] + " morts els dies posteriors.<br>" } } if (cadena!="") { document.writeln("Dia: " + i + "<br>")

document.writeln(cadena + "<br>") } } </script> </head> <body> </body> </html> 3.- A partir de la llista anterior, utilitzeu el polimorfisme per programar la funció “mostrar” que mostri en pantalla els accidents d'una llista d'accidents de diversos tipus (lleu, greu i mortal) per a un determinat dia. Nota: Com que els accidents tenen unes dades comunes i uns altres particulars, caldrà aplicar un disseny personalitzat en la visualització de cada tipus. Aplicar el polimorfisme ens permet tenir una funció amb el mateix nom en diferents classes. Aquesta funció tindrà un comportament diferent (codi diferent) en funció de la classe (accident_lleu, greu o mortal). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PAC 2 - Pràctica 3</title> <script type="text/javascript"> //Començo definint la funció mare "accidents", amb el dia i l'accident function accidents() { this.dia = "diaX"; this.accident = "accidentY"; } //Defineixo la classe filla "accidentslleus", que inclou el tipus d'accident function accidentslleus (dia,accident) { this.tipus = "lleu"; this.dia = dia; this.accident = accident; this.Mostra = Mostra_poli; function Mostra_poli(tipus) { if (this.tipus == tipus) { var dv=document.getElementById("accident"); dv.innerHTML = dv.innerHTML +"</br>"+ this.accident + " " + this.dia; } } }

function accidentsgreus (dia,accident) { this.tipus = "greu"; this.dia = dia; this.accident = accident; this.Mostra = Mostra_poli; function Mostra_poli(tipus) { if (this.tipus == tipus) { var dv=document.getElementById("accident"); dv.innerHTML = dv.innerHTML +"</br>"+ this.accident + " " + this.dia; } } } function accidentsmortals (dia,accident) { this.tipus = "mortal"; this.dia = dia; this.accident = accident; this.Mostra = Mostra_poli; function Mostra_poli(tipus) { if (this.tipus == tipus) { var dv=document.getElementById("accident"); dv.innerHTML = dv.innerHTML +"</br>"+ this.accident + " " + this.dia; } } } accidentslleus.prototype = new accidents(); accidentsgreus.prototype = new accidents(); accidentsmortals.prototype = new accidents(); var array = new Array(); array['accident1'] = new accidentslleus ("01/01/2011", "4 ferits en una col·lisió a Barcelona"); array['accident2'] = new accidentsgreus ("05/01/2011", "2 ferits greus en una col·lisió a Palamós"); array['accident3'] = new accidentsgreus ("20/02/2011", "1 ferit greu en una col·lisió a Reus"); array['accident4'] = new accidentslleus ("16/03/2011", "2 ferits en una col·lisió a Tarragona"); array['accident5'] = new accidentsmortals ("05/04/2011", "2 morts en una col·lisió a Sort"); array['accident6'] = new accidentslleus ("24/05/2011", "1 ferit en una col·lisió a Lleida"); array['accident7'] = new accidentsgreus ("13/06/2011", "2 ferits greus en una col·lisió a Camprodon"); array['accident8'] = new accidentsmortals ("22/07/2011", "1 mort en una col·lisió a Calella"); array['accident9'] = new accidentsmortals ("30/08/2011", "5 morts en una col·lisió a Viladecans"); array['accident10'] = new accidentslleus ("16/09/2011", "2 ferits en una col·lisió a Girona"); array['accident11'] = new accidentsmortals ("03/10/2011", "2 morts en una col·lisió a Roses");

array['accident12'] = new accidentsgreus ("19/11/2011", "4 ferits greus en una col·lisió a Amposta"); array['accident13'] = new accidentsmortals ("28/12/2011", "1 mort en una col·lisió a Maçanet de la Selva"); function MostraLleus() { document.getElementById("accident").innerHTML=""; for (var i in array) { if (typeof array[i].Mostra("lleu") != "undefined") { array[i].Mostra("lleu"); } } } function MostraGreus() { document.getElementById("accident").innerHTML=""; for (var i in array) { if (typeof array[i].Mostra("greu") != "undefined") { array[i].Mostra("greu"); } } } function MostraMortals() { document.getElementById("accident").innerHTML=""; for (var i in array) { if (typeof array[i].Mostra("mortal") != "undefined") { array[i].Mostra("mortal"); } } } </script> </head> <body> <button onclick="javascript:MostraLleus();">Accidents lleus</button> <button onclick="javascript:MostraGreus();">Accidents greus</button> <button onclick="javascript:MostraMortals();">Accidents mortals</button> <div id="accident"> </div> </body> </html>