Gmultimdia

rau

JAVASCRIPT: INTRODUCCI A LA PROGRAMACI ORIENTADA A OBJECTES

Jaume Villarreal Quintana

PAC2

programaci web

PROGRAMACI WEB

PAC1

Indica quines de les segents afirmacions sn vertaderes o falses:

El llenguatge LISP s el precursor de la programaci lgica.
El llenguatge LISP s el creador del paradigma funcional.

FALS

El llenguatge assemblador va ser el primer llenguatge funcional que es va crear als anys 70. FALS

Els llenguatges dassemblador van ser els primers llenguatges imperatius.

El llenguatge Smalltalk forma part dels primers llenguatges del paradigma imperatiu.
Smalltalk s un lleguatge orientat a objectes pur.

FALS

El paradigma de la programaci orientada a objectes va nixer a Sucia. FALS

El paradigma de la POO t lorigen en el llenguatge Simula 67, desenvolupat al Centre Noruec de Cmput.

-2Grau en Multimdia

PROGRAMACI WEB

PAC1

Descriu utilitzant un exemple del mn real els segents conceptes i la relaci entre ells:
classe, objecte, herncia simple, herncia mltiple i ocultaci.

CLASSE
Quan ens referim a la POO, una classe s el model a partir del qual es poden crear mltiples objectes. Aquesta classe contindr les propietats que defineixen la seva naturalesa i els mtodes que estableixen el seu comportament. EXEMPLE
En la vida real una classe podria respondre al concepte de autombil. Seran propietats daquesta classe tots aquells elements que defineixein la seva naturalesa: tenir quatre rodes, finestres protegides per vidres, un motor i llums per illuminar de nit, entre daltres. Seran mtodes tots aquells mecanismes que estableixen el seu comportament: desplaar-se endavant i endarrere, fer llum, transportar persones o objectes,...

OBJECTE
Un objecte s tota instncia duna classe que adquireix les propietats i els mtodes de la classe a la que pertany. EXEMPLE
Un COTXE i una FURGONETA sn objectes/instncies de la classe AUTOMBIL. Aquests objectes reben de la seva classe totes les propietats que els defineixen (quatre rodes, vidres, llums, intermitents, neteja-vidres,...).

-3Grau en Multimdia

PROGRAMACI WEB

PAC1

Pel fet de pertnyer a la mateixa classe tamb comparteixen els comportaments definits pels seus mtodes: arrencar, desplaar-se endavant i enrere, netejar els vidres quan plou, indicar canvis de carril,...

HERNCIA SIMPLE
Lherncia simple simplementa quan es crea una classe nicament a partir duna sola classe. EXEMPLE
La classe VEHICLE_CARREGA podria ser una subclasse de la classe AUTOMBIL creada mitjanant el mecanisme dherncia simple. La classe VEHICLE_CARREGA hereta de la classe pare totes les seves propietats. Aix doncs, qualsevol instncia daquesta classe tindr quatre rodes, vidres, un motor, llums i neteja-vidres, entre daltres. Per a ms tindran caracterstiques prpies, com ara una mplia zona de crrega o plataformes de descrrega. De manera anloga, aquesta subclasse heretar tots els mtodes/comportaments de la classe VEHICLE i afegir els seus propis, com ara carregar i descarregar. Un CAMI podria ser una instncia daquesta subclasse.

HERNCIA
Lherncia s un dels pilars bsics de la POO, ja que permet la creaci de noves classes a partir de classes existents. Aix permet una reutilitzaci de codi neta i simple, ja que una classe filla o subclasse hereta totes les propietats i mtodes la classe pare o superclasse.

HERNCIA MLTIPLE
Lherncia mltiple simplementa quan es crea una classe nicament a partir de dues o ms classes. EXEMPLE
La classe VEHICLE_ESPECIAL podria ser una subclasse creada a partir de la classe AUTOMBIL i la classe GRUA. Aquesta subclasse hereta les propietats de la superclasse AUTOMBIL i la superclasse GRUA. Aix permet crear una subclasse amb les caracterstiques de totes dues ms les propietats que estableixi la nova classe: quatre rodes, vidres, llums, neteja-vidres, motor, bra -4Grau en Multimdia

PROGRAMACI WEB

PAC1

hidrulic, anclatge,... De manera anloga al cas anterior, la subclasse hereta els mtodes dambdues i nimplementa de nous. Aix doncs, la subclasse VEHICLE_ESPECIAL es podr desplaar endavant i endarrere, fer llums, carregar objectes pesants o desplaar-los, alhora que nimplementar de propis com fer forats i rases. Una PALA EXCAVADORA podria ser una instncia daquesta classe

OCULTACI
Locultaci respon a la capacitat damagar detalls interns del comportament duna classe per fer-ne pblics noms els necessaris. EXEMPLE
La classe AUTOMBIL ofereix moltes possibilitats a lhora dexplicar aquest procediment en la vida real. Un fabricant dautombils crea objectes (cotxes) que tenen unes propietats i uns mtodes o mecanismes que controlen el seu comportament. Un conductor qualsevol podr controlar un nombre limitat de mtodes del cotxe (accionament de llums, canvi de relacions o tancament de la capota, entre molts daltres) per sobre daltres no hi podr actuar. En aquest cas el fabricant sassegura que el conductor noms pugui interactuar amb els mtodes que ell fa pblics, per no ho pugui fer amb comportaments propis del motor o de la central electrnica de dades.

-5Grau en Multimdia

PROGRAMACI WEB

PAC1

Crea una classe JavaScript amb les segents caracterstiques:

Identificador alumne. Amb les propietats segents: nom, cognom1, cognom2, data naixement, estudis, curs Amb els mtodes necessaris per consultar i modificar les propietats estudis i curs, un mtode constructor de la classe i un mtode mostra que mostri en un alert les propietatsde la instncia. Crea una instncia de la classe anterior i crida al mtode que mostra les propietats de la instncia.

CREACI DE LA CLASSE alumne.js

//construm la classe alumne, que ens servir de base per crear la subclasse alumneUOC function alumne(){ } this.nom = ; this.cgn1 = ; this.cgn2 = ; this.dataN = ; this.estudis=; this.curs=;

-6Grau en Multimdia

PROGRAMACI WEB

PAC1

//adjudiquem propietats a la classe alumne.prototype.init = function(nom, cgn1, cgn2, dataN, estudis, curs) { }; this.nom = nom; this.cgn1 = cgn1; this.cgn2 = cgn2; this.dataN = dataN; this.estudis=estudis; this.curs=curs;

//creem el mtode consultaDades(); que retorna info alumne.prototype.consultaDades = function() { }; return info; var info = ; info += <p><strong>NOM: </strong>+this.nom+</p>; info += <p><strong>COGNOMS: </strong>+this.cgn1+ +this.cgn2+</p>; info += <p><strong>DATA DE NAIXEMENT: </strong>+this.dataN+</p>; info += <p><strong>ESTUDIS: </strong>+this.estudis+</p>; info += <p><strong>CURS: </strong>+this.curs+ curs</p>;

//creem el mtode modificaDades(); alumne.prototype.modificaDades = function(pEstudis,pCurs){ } -7Grau en Multimdia

this.estudis=pEstudis; this.curs=pCurs;

PROGRAMACI WEB

PAC1

//creem el mtode mostraDades(); alumne.prototype.mostraDades = function(){ alert(this.nom+ +this.cgn1+ +this.cgn2+ || +this.dataN+ || +this.estu-

dis+ || +this.curs+ curs); }

-8Grau en Multimdia

PROGRAMACI WEB

PAC1

Crea una classe JavaScript amb les segents caracterstiques:

Identificador alumne. Amb les propietats segents: nom, cognom1, cognom2, data naixement, estudis, curs Amb els mtodes necessaris per consultar i modificar les propietats estudis i curs, un mtode constructor de la classe i un mtode mostra que mostri en un alert les propietatsde la instncia. Crea una instncia de la classe anterior i crida al mtode que mostra les propietats de la instncia.

CREACI DE LA CLASSE alumneUOC.js

//creem la subclasse alumneUOC a partir del prototip creat a la classe alumne. Hereta totes les seves propietats i els mtodes. alumneUOC.prototype = new alumne();

//redirigim la propietat constructor de la classe alumneUOC. alumneUOC.prototype.constructor = alumneUOC;

//permetem laccs de la subclasse alumneUOC al prototip de la seva superclasse alumne. alumneUOC.prototype.parent = alumne.prototype;

//construm la classe i hi introdum una propietat ms a les heretades function alumneUOC(){ } -9Grau en Multimdia

this.pais = ;

PROGRAMACI WEB

PAC1

//afegim el mtode modificaPais als ja heretats alumneUOC.prototype.modificaPais = function(pPais) { }; this.pais = pPais;

//modifiquem el mtodes consultaDades per actulitzar la nova propietat de la subclasse. alumneUOC.prototype.consultaDades = function() { }; var info = this.parent.consultaDades.call(this); info += <p><strong>PAS: </strong>+this.pais+</p> return info;

CREACI DE LA CLASSE demoAlumne.js

//creem el llistat que contindr els alumnes function demoAlumne (){ } //creem el mtode init(), que crea una instncia de cadascuna de les classes. Aquestes instncies sn actualitzades mitjanant alguns dels mtodes establerts amb anterioritat. demoAlumne.prototype.init = function() { var jaume = new alumne(); jaume.init(Jaume, Villarreal, Quintana, 08/02/1982, Multimdia, this.llistaAlumnes = []; this.llistaAlumnes = null;

2n); - 10 Grau en Multimdia

PROGRAMACI WEB

PAC1

jaume.modificaDades(Medicina, 6); jaume.mostraDades();

var pere = new alumneUOC(); pere.init(Pere, Serracanta, Boix, 10/05/1968, Arquitectura, 4rt,

CAT); pere.modificaDades(Dret, 1r) pere.modificaPais(CAT); pere.mostraDades();

};

this.llistaAlumnes.push( jaume ); this.llistaAlumnes.push( pere );

//creem el mtode mostraAlumnes(); que ens permetr imprimir les dades en pantalla. demoAlumne.prototype.mostraAlumnes = function() { var i = 0; var nAlumnes = this.llistaAlumnes.length;

for (i=0; i<nAlumnes; i++) { document.write( this.llistaAlumnes[i].consultaDades()+<hr/> );

} };

- 11 Grau en Multimdia

PROGRAMACI WEB

PAC1

CREACI DE LA CLASSE default.htm

<!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Demo classeAlumne</title> <script src=js/alumne.js type=text/javascript charset=utf-8></script> <script src=js/alumneUOC.js type=text/javascript charset=utf-8></script> <script src=js/demoAlumne.js type=text/javascript charset=utf-8></script>

</head> <body> <script>

//creem una instncia de la classe demoAlumne. Els dos mtodes associats sexecuten quan es carrega la pgina. var demo = new demoAlumne();

window.onload = function () { demo.init(); demo.mostraAlumnes();

};

</script>

</body> </html>

- 12 Grau en Multimdia

PROGRAMACI WEB

PAC1

Crea un algorisme que representar un joc a latzar, on el navegador abans de comenar calcular un nombre enter aleatori del 1 al 10. A partir daquest moment li demanar a lusuari que introdueixi un nombre enter mitjanant un prompt i comprovar si ha encertat. Les caracterstiques especfiques del joc seran les segents:
Lusuari tindr fins a 5 oportunitats per encertar, quan encerta guanya i la partida acaba. Ara b, si no encerta amb les 5 oportunitats, lusuari perd i la partida acaba. Quan la partida acaba, ha de mostrar a lusuari els nombres que ha introdut. Per exemple: (1 0 vegades, 2 3 vegades, 3 0 vegades, etc.). El joc ha de controlar els valors que lusuari introdueix, avisant quan aquestos no siguin valors enters entre 1 i 10. Quan acaba cada partida ha de donar loportunitat de comenar una nova. Els resultats shauran de retornar amb document.write.
<html> <head> <title>PW: PAC2-ex.5</title> <link rel=stylesheet href=estils_PAC_02_PW.css type=text/css media=screen/> <script type=text/javascript> //inicialitzem variables var nAleatori = Math.floor(Math.random()*10)+1; var play=true; var i=0; var compt01 = 0; var compt02 = 0; var compt03 = 0; var compt04 = 0; - 13 Grau en Multimdia

PROGRAMACI WEB

PAC1

var compt05 = 0; var compt06 = 0; var compt07 = 0; var compt08 = 0; var compt09 = 0; var compt10 = 0;

//creem la funci recompteNombres, que gestiona els comptadors dels nombres introduts. function recompteNombres(nombre) { switch (nombre) { case 1 :compt01++; break; case 2 : compt02++ ; break; case 3 : compt03++ ; break; case 4 : compt04++ ; break; case 5 : compt05++ ; break; case 6 : compt06++ ; break; case 7 : compt07++ ; break; case 8 : compt08++ ; break; case 9 : compt09++ ; break; case 10 : compt10++ ; break; } }

//creem la funci principal function mainFunction(){ var valor=parseInt(document.getElementById(nombreInput).value);

- 14 Grau en Multimdia

PROGRAMACI WEB

PAC1

var text1= Enhorabona, el nombre aleatori era el ; var text2= Ho sentim, has esgotat tots els intents. El nombre aleatori era el ;

i++; //CONDICI: si play=true i encara shan fet menys de 5 tirades es compara el valor introdut amb el nombre aleatori if(play && i<=5){ if(valor> 0 && valor<11){ //CONDICI:si sencerta el nombre sacaba la partida i es mostren els recomptes. if(valor==nAleatori){ play=false; recompteNombres(valor); with (document.getElementById(caixaText)){ style.visibility=visible; innerHTML= text1 + nAleatori +. <br/> Per fer-ho has introdut els segents nombres:<br/> <hr/> 1: +compt01+ vegades;<br/> 2: +compt02+ vegades;<br/> 3: +compt03+ vegades;<br/> 4: +compt04+ vegades;<br/> 5: +compt05+ vegades;<br/> 6: +compt06+ vegades;<br/> 7: +compt07+ vegades;<br/> 8: +compt08+ vegades;<br/> 9: +compt09+ vegades;<br/> 10: +compt10+ vegades.; } }else{ //si no sencerta el nombre es torna a introduir un nombre en cas que quedin tirades. En cas contrari sacaba la partida i es mostren els recomptes. recompteNombres(valor); if (i<5) { alert(Aquest cop no has encertat! Et queden +(5-i)+ intents.); } - 15 Grau en Multimdia

PROGRAMACI WEB

PAC1

else{ with (document.getElementById(caixaText)){ style.visibility=visible; innerHTML= text2 + nAleatori +. <br/> Per fer-ho has introdut els segents nombres:<br/> <hr/> 1: +compt01+ vegades;<br/> 2: +compt02+ vegades;<br/> 3: +compt03+ vegades;<br/> 4: +compt04+ vegades;<br/> 5: +compt05+ vegades;<br/> 6: +compt06+ vegades;<br/> 7: +compt07+ vegades;<br/> 8: +compt08+ vegades;<br/> 9: +compt09+ vegades;<br/> 10: +compt10+ vegades.; } } } } //lscript alerta que el nombre escollit no est entre 1 i 10. else{ alert(Has d\escollir un nombre entre 1 i 10.); } } else{ //CONDICI: si la partida sha acabat lscript alerta que cal recarregar la pgina. if(!play){ alert(Ja has encertat el nombre. Recarrega la pgina si vols tornar a jugar.); } else{ alert(Has esgotat totes les teves oportunitats. Recarrega la pgina si vols tornar a jugar.); } } - 16 Grau en Multimdia

PROGRAMACI WEB

PAC1

document.getElementById(nombreInput).value; } </script> </head>

<body> <div id=contenidor> <img src=images/top.png alt=Programaci Web />

<div class=caixaExterior> <p>Crea un algorisme que representar un joc a latzar, on el navegador abans de comenar calcular un nombre enter aleatori del 1 al 10. A partir daquest moment li demanar a lusuari que introdueixi un nombre enter i comprovar si lha encertat.</p> <form onsubmit=mainFunction(); return false;> <input id=nombreInputclass=entradaForm type=text name=nombreIntrodut required> <input id=submitForm type=submit value=Introdueix un nombre entre 1 i 10> </form> <img style=position:absolute; right:45%; top:8; src=images/isotip_UOC_web.jpg alt=UOC - Universitat Oberta de Catalunya /> <div id=caixaText></div> </div> </div> </body> </html>

- 17 Grau en Multimdia

PROGRAMACI WEB

PAC1

Realitza un script que solliciti un text en llengua catalana a lusuari. Ha de retornar el nombre despais en blanc, dgits, lletres i altre tipus de carcters que aquest contingui. El script tindr les segents caracterstiques:
Deur donar com a resultat el nombre de carcters de cada tipus. Deur donar com a resultat el mateix text on haur canviat totes les lletres majscules per minscules. Deur donar el nombre de paraules distintes que cont (es considera una paraula a tot conjunt de carcters delimitats per dos espais. Per aquest exercici, no tindrem en compte la possibilitat de que hi haja dos paraules amb signes de puntuaci a continuaci i per tant, hola i hola, seran paraules distintes. A ms, entre paraula i paraula hi haur noms un espai en blanc). Lanterior shaur descriure a la pgina amb document.write.
<html> <head> <title>PW: PAC2-ex.6</title> <link rel=stylesheet href=estils_PAC_02_PW.css type=text/css media=screen/> <script type=text/javascript> //inicialitzem comptadors var play=true; var comptAlfa=0; var comptNum=0; var comptEsp=0; var comptSimb=0; var comptDif=0; var text1=El text introdut cont ; var textArray=Les paraules repetides sn: ;

- 18 Grau en Multimdia

PROGRAMACI WEB

PAC1

function funcioRecompte() { //recuperem el valor introdut var cadena=document.getElementById(introCadena).value; //establim un esquema de recorregut per resseguir el codi dels carcters de totes les posicions de la cadena for (i=0; i<cadena.length; i++) { if (cadena.charCodeAt(i)>=65 && cadena.charCodeAt(i)<=90 || cadena. charCodeAt(i)>=97 && cadena.charCodeAt(i)<=122 || cadena.charCodeAt(i)>=128 && cadena.charCodeAt(i)<=165) { comptAlfa++; } else if (cadena.charCodeAt(i)>=48 && cadena.charCodeAt(i)<=57) { comptNum++; } else if (cadena.charCodeAt(i)==32) { comptEsp++; } else{ comptSimb++; } }

//establim els canvis destil corresponent i retornem el resultat de la funci a la caixa de text corresponent document.getElementById(top_caixaText1).style.visibility=visible;

with(document.getElementById(caixaText1)){ style.visibility=visible;

- 19 Grau en Multimdia

PROGRAMACI WEB

PAC1

innerHTML= text1 + comptAlfa+ lletres, + comptNum+ nombres, + comptSimb+ smbols i + comptEsp+ espais.; } }

function funcioMinuscules() { //recuperem el valor introdut var cadena=document.getElementById(introCadena).value;

//emprem el mtode corresponent per transformar les lletres majscules en minscules var cadenaMin=cadena.toLowerCase();

//establim els canvis destil corresponent i retornem el resultat de la funci a la caixa de text corresponent document.getElementById(top_caixaText2).style.visibility=visible;

with(document.getElementById(caixaText2)){ style.visibility=visible; innerHTML= cadenaMin; } }

function funcioComparativa() { //recuperem el valor introdut var cadena=document.getElementById(introCadena).value;

- 20 Grau en Multimdia

PROGRAMACI WEB

PAC1

//transformen la cadena en un array mitjanant la funci corresponent. Els espais marquen el valor de cada posici de larray. var arrayCadena=cadena.split( );

//creem un nou array buit per collocar-hi les paraules repetides var arrayRepetides=new Array();

//establim un esquema de recorregut doble per poder comparar cada paraula amb la resta de paraules que hi ha a totes les posicions

//PRIMER FOR: pren el primer valor de larray for (i=0; i<arrayCadena.length; i++) {

//SEGON FOR: pren el primer valor de larray for (j=0; j<arrayCadena.length; j++) {

//CONDICI: comprovem que el valor de les variables no sigui el mateix per evitar que una paraula es compari amb ella mateixa if (i==j) { j++; }

//CONDICI: comprovem si el valor [i] de larray s igual que el valor [j] del mateix array. En cas afirmatiu guardem el valor en una variable if (arrayCadena[i]==arrayCadena[j]) { var pRepetida=arrayCadena[i];

//CONDICI: comprovem que el valor guardat a la variable no s troba a larray. En cas afirmatiu emprem el mtode push() per afegir-lo a arrayRepetides - 21 Grau en Multimdia

PROGRAMACI WEB

PAC1

if (arrayRepetides.indexOf(pRepetida)==-1) { arrayRepetides.push(pRepetida); } } } }

//establim un esquema de recorregut per guardar en una variable tots els valors de arrayRepetides. Aquesta variable es recupera a posteriori per imprimir-la en pantalla for (i=0; i<arrayRepetides.length; i++) { textArray+= +arrayRepetides[i]+ ; }

//establim els canvis destil corresponent i retornem el resultat de la funci a la caixa de text corresponent document.getElementById(top_caixaText3).style.visibility=visible;

with(document.getElementById(caixaText3)){ style.visibility=visible; if (arrayCadena.length==1) { innerHTML=El text introdut cont noms una paraula.; } else{ if(arrayRepetides.length==0){ innerHTML=El text introdut cont +arrayCadena.length+ paraules. No n\hi ha cap de repetida.; }

- 22 Grau en Multimdia

PROGRAMACI WEB

PAC1

else{ innerHTML=El text introdut cont +arrayCadena.length+ paraules, de les quals + (arrayCadena.length-arrayRepetides.length) + sn diferents. <br/>+textArray+.; }

} } }

//FUNCI PRINCIPAL function mainFunction() { if (play) { play=false; funcioRecompte(); funcioMinuscules(); funcioComparativa(); } else{ alert(Si us plau, recarregueu la pgina abans d\introduir un nou text.); } }

</script> </head>

<body> - 23 Grau en Multimdia

PROGRAMACI WEB

PAC1

<div id=contenidor> <img src=images/top.png alt=Programaci Web />

<div class=caixaExterior>

<p>Realitza un script que solliciti un text en llengua catalana a lusuari. Ha de retornar el nombre despais en blanc, dgits, lletres i altre tipus de carcters que aquest contingui. El script tindr les tsegents caracterstiques:</p> <form onsubmit=mainFunction(); return false;> <textarea id=introCadena type=text name=intro_Cadena textarea> <input id=submitForm type=submit value=Executa lscript> </form> <img style=position:absolute; right:45%; top:8; src=images/isotip_UOC_web.jpg alt=UOC - Unviersitat Oberta de Catalunya /> <div id=top_caixaText1 class=topcaixaText>Recompte de lletres, nombres, smbols i espais.</div> <div id=caixaText1></div> <div id=top_caixaText2 class=topcaixaText>Text en minscules.</div> <div id=caixaText2></div> <div id=top_caixaText3 class=topcaixaText>Recompte de paraules repetides.</ div> <div id=caixaText3></div> </div> </div> </body> </html> required></

- 24 Grau en Multimdia