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

Consulteu la data de lliurament al calendari. PAC 3 Teòrica 1.- . En què consisteix l’ocultació a la POO i com s’implementa a JavaScript? Posa un exemple de codi degudament comentat. L’ocultació és la característica de la POO que permet ocultar alguns mètodes a les classes heretades i mostrar només els mètodes necessaris per al correcte funcionament del sistema, així s’evita l’execució i modificació d’aquests, que a vegades podrien causar resultats erronis. En JavaScript els membres (atributs i mètodes) de les classes tenen els següents modificadors per regular-ne el control d’accés:

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, un element privat d’una superclasse no és visible per cap subclasse.

Protected: Les propietats i mètodes només son accessibles per a les seves subclasses, però no a l’exterior.

A continuació posarem un exemple de cada modificador que doni a entendre com es porta a terme l’ocultació i les principals diferències que existeixen entre ells: Element públic:

function classeExemple() { //Comencem creant un element públic utilitzant la

instrucció this. this.elementPublic = “Això és accessible des de

qualsevol lloc.” } var objecteExemple = new classeExemple(); alert(objecteExemple.elementPublic); //Quan cridem l’element públic, funciona correctament.

Element privat:

function classeExemple() { //Aquí creem un element privat emprant la instrucció

var. var elementPrivat = “Això és privat.” } var objecteExemple = new classeExemple(); alert(objecteExemple.elementPrivat); //Quan cridem l’element privat, no funciona i dóna error.

Element protegit:

function classeExemple() { //Aquí creem un mètode privat emprant la instrucció

var. var metodePrivat = function() { alert(“Això és accessible des d’un altre mètode intern.”); } //Aquí creem un mètode protegit amb la instrucció this. this.metodeProtegit = function() { //Des d’aquí es pot cridar el mètode privat. metodePrivat(); } } var objecteExemple = new classeExemple(); objecteExemple.metodePrivat();//Quan cridem el mètode privat, no funciona i dóna error. objecteExemple.metodeProtegit(); //Quan cridem el mètode protegit, funciona correctament.

2.- Existeix l’herència múltiple en JavaScript? Com la implementaríem? Posar dos exemples. No. Tot i que hi algunes alternatives per a poder implementar-la. Us en mostrem dues d’elles: l’object masquerading i el prototype chaining. Object masquerading Aquest mètode fa ús del comportament de la sentència “this” dins dels constructors de les funcions. Per a fer-ho, un constructor assigna propietats i mètodes a un objecte fent referència a ell mateix mitjançant la sentència “this”. Com que un constructor és una funció, es pot emprar el constructor d’una classe “X” com a mètode d’una classe “Y”. Així doncs, podem escriure el següent constructor:

function classeX(nom) {

this.nom = nom; this.identificacio = function() { alert(this.nom); }

} S’ha de tenir en compte que la sentència “this” dins d’un constructor fa referència al nou objecte que es retorna, però dins d’un mètode, aquest fa referència a l’objecte des del qual ha estat cridat. Observem, doncs, què succeeix si l’emprem dins d’un altre constructor:

function classeY(nom) {

this.superClasse = classeX; this.superClasse(nom); delete this.superClasse;

} Hem vist, per tant, que el constructor “classeX” ha estat cridat com a mètode del nou objecte creat a “classeY”, per la qual cosa, les propietats i mètodes creats a “classeX” s’afegeixen al nou objecte de “classeY”. Prototype chaining Aquest mètode fa ús de l’objecte “prototype” per implementar l’herència. “Prototype” és una propietat de l’objecte “function”, que actua com a plantilla sobre el qual es creen nous objectes. El que succeeix és que totes les propietats i mètodes de l’objecte “prototype” es transmeten a totes les instàncies de la classe. Vegem com quedaria l’exemple explicat anteriorment utilitzant aquest mètode:

function classeX() { ... } classeX.prototype.nom = “”; classeX.prototype.identificacio = function()

{ alert(this.nom);

} function classeY() { ... } classeY.prototype = new classeX();

El funcionament del prototype chaining es pot observar a l’última línia de codi de l’exemple. El que fem és assignar una instància de “classeX” al prototip de “classeY” i a partir d’aquí, tots els objectes creats amb “classeY” heretaran els mètodes i propietats de la instància de “classeX”. Un aspecte negatiu d’aquesta alternativa en comparació amb l’object masquerading és que no es poden passar paràmetres a la classe mare. D’altra banda, l’operador “instanceof” funciona de la següent manera: per a cada instància de “classeY”, retorna “vertader” per ambdues classes:

var objecte1 = new classeY(); alert(objecte1 instanceof classeY); //retorna vertader alert(objecte1 instanceof classeX); //retorna vertader

3- Quina diferència hi ha entre afegir una propietat a la instància d’una classe i afegir-la a la mateixa classe? Les propietats afegides a una classe seran compartides per totes les instàncies de la classe, però les propietats d’una instància només s’aplicaran a l’objecte sobre el qual actuï aquesta instància. Vegem-ne un exemple:

var titolPelicula = new String(“The Dark Knight”); titolPelicula.idioma = “Anglès”;

La propietat “idioma” només forma part de l’objecte “titolPelicula”, que és una instància de la classe String. Per tant, la propietat no es comparteix per a totes les instàncies de la classe String, sinó que només ho fa per a “titolPelicula”.

4.- Com es modifica un node utilitzant el DOM? Posar exemples Per a modificar un node s’ha d’accedir a aquest mitjançant l’objecte DOM “document” i emprant el mètode de Javascript “getElementByid()”, el qual contindrà la ID del node dins del parèntesi. Llavors es podrà modificar algun dels seus atributs o el seu contingut complet. Tot i així, si es vol modificar un node de tipus 3 (de text), no s’hi podrà accedir inicialment, ja que no disposa d’un ID que l’identifiqui. Per a fer-ho s’haurà d’anar pujant en la jerarquia fins a trobar un node pare, a través de les propietats de l’objecte node. Aquest sí que disposa d’ID, ja que és de tipus 1 (d’element). Per portar a terme la modificació, primer s’ha d’utilitzar la propietat “firstChild” en el node pare, d’aquesta manera s’accedeix al node de text i se’n localitza el contingut. Després, es modifica amb la propietat “nodeValue”. Vegem-ne un exemple:

<html> <head> <title>Modificar un node amb DOM</title> </head> <body> <h1 id=“titol”>Títol d’una notícia</h1> <p id= “contingut”>Contingut de la notícia</p> </body> </html>

En cas que es vulgui modificar el node de tipus 1 que conté el text “Contingut” pel text “Informació”, es crearà un script com el següent:

<script type = “text/javascript”> <!-- var text = document.getElementById(“contingut”).

firstChild; text.nodeValue = “Informació”; //--> </script>

Els nodes de nivell 3 tenen una dificultat, no s’hi pot accedir directament amb “getElementById”, així que per modificar-ne el seu contingut s’han d’emprar les propietats “firstChild”, “lastChild”, “nextSibling”, etc. junt amb els mètodes “data”, “appendData”, “insertData”, “replaceData”, etc. Una altra opció per modificar el contingut d’un node és mitjançant el mètode “setAttribute”, que assigna un valor a un atribut del node sobre el qual actua.

Pràctica 1- Característiques dels mètodes setTimeout i clearTimeout. Aplicar a un cas pràctic que ens doni quant temps ha estat una persona visitant una pàgina. Tant el mètode “setTimeout” com el “clearTimeout” els trobem a l’objecte “window” i són elements temporitzadors. “SetTimeout” inclou instruccions, temps i paràmetres; i “clearTimeout, la variable de temporitzador. El mètode “setTimeout(instruccions, temps)” empra el paràmetre instruccions per indicar les accions a executar un cop passi el temps establert, que es mesura en milisegons. Un cop passi el temps no es pot tornar a iniciar el temporitzador a no ser que s’iniciï un altre “setTimeout()”. Així que si es vol repetir un esdeveniment periòdicament, s’empraran els mètodes “setInterval” i “clearInterval” per a cridar el “setTimeout”. En cas de voler aturar un temporitzador emprarem el mètode “clearTimeout”, al qual se li ha de passar un objecte temporitzador. Aquest últim es crea quan s’arranca el temporitzador inicial, així que s’ha d’assignar el resultat d’iniciar el temporitzador amb “setTimeout” a una variable. Vegem-ne un exemple:

var temporitzador; function inicia() { temporitzador = setTimeout(“alert(‘Aquest missatge

desapareixerà aviat’);”,1000); } function atura() { clearTimeout(temporitzador); }

El comptador de temps es troba en un arxiu anomenat “Pràctica 1.html”. És necessari que l’arxiu “popup.html” es trobi dins de la mateixa carpeta per funcionar correctament. El fitxer “Pràctica 1.html” inclou el següent:

<!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 3 - Pràctica 1</title> <script type="text/javascript"> <!-- // S'obre l'arxiu popup.html en una finestra nova function nova_finestra() {

var popup = window.open("popup.html", "FinestraNova", "menubar,height=25,width=300"); } //--> </script> </head> <body> <h1>PAC3 - Pràctica 1</h1> <p>Comptador de la durada d'una visita en una pàgina web.</p> <form action="conta" id="conta" onsubmit="return false;"> <button id="boto" onclick="nova_finestra();">Inicia el contador</button> <p>La durada és de <input name="temps" type="text"> segons.</p> </form> </body> </html>

El fitxer “popup.html” inclou el següent:

<!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=iso-8859-1"> <title>PAC 3 - Pràctica 1 (Popup)</title> <script type="text/javascript"> <!-- //Creo les variables que contaran el temps var timerID = null; var inici = new Date(); var fi = new Date(); var timeValue; //Creo una funció recursiva que anirà restant 1 segon a l'hora actual function contador() { fi = new Date(); timeValue = fi.getTime()-inici.getTime(); timerID = setTimeout("contador()", 1000); }

//Creo la funcion que aturi el temps transcorregut function atura() { clearTimeout(timerID); } //Paro la funció recursiva, converteixo timeValue de milisegons a segons i l'envio al formulari de la finestra mare abans de tancar la finestra emergent function envia(){ atura(); timeValue=timeValue/1000; timeValue=parseInt(timeValue); window.opener.document.forms["conta"].temps.value = timeValue; window.close(); } //--> </script> </head> <body> <form action="tanca" name="tanca" id="tanca" onsubmit="return false;"> <button id="boto_fi" onclick="envia();">Prem aquest botó per tancar la finestra emergent i calcular el temps transcorregut</button> </form> <script type="text/javascript"> <!-- contador(); //--> </script> </body> </html>

2.- Defineix una expressió regular que permeti comprovar si una cadena de text conté els caràcters prohibits guardats en un array. Els caràcters prohibits són - + * _ = .

<!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=iso-8859-1"> <title>PAC 3 - Pràctica 2</title> <script type="text/javascript"> <!-- function comprova() { cadenaText = document.formulari.cadena.value cadenaText = cadenaText.toString() prohibit = /\-|\+|\*|_|=/ sino = prohibit.test(cadenaText) alert("La cadena de text conté algun dels caràcters prohibits (-, +, *, _ o =) és: " + sino + ".") } //--> </script> </head> <body> <h1>PAC3 - Pràctica 2</h1> <p>Comprovador de caràcters prohibits.</p> <form action="prohibits" name="formulari"> <p>Escriu una cadena de text:</p> <input type="text" name="cadena" size="80" /></p> <input type="button" onclick="comprova()" value="Comprova" /> </form> </body> </html>