Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Programació Web - PAC 2 correcció - Multimèdia (UOC) - Paquita Ribas

4,420 views

Published on

Correcció de la PAC 2 de Programació Web del Grau Multimèdia de la UOC. Per a descarregar els arxius html, visiteu la meva wiki, Racó Vermell: http://raco-vermell.wikispaces.com/PROGRAMACI%C3%93+WEB

Published in: Education
  • Be the first to comment

  • Be the first to like this

Programació Web - PAC 2 correcció - Multimèdia (UOC) - Paquita Ribas

  1. 1. PAC2 Teòrica1.- Explica en quins casos creus que és millor incloure el codi javascript a la mateixa pàgina html ien quins casos és millor utilitzar un fitxer .js extern.Separar el codi javaScript del html en un fitxer extern té diversos avantatges prou interessants: • Estructuració: ajuda a mantenir més ordenat el codi. Quan estem desenvolupant webs destructura gran i complexa, el no barrejar els diferents tipus de codi i tenir-los en diferents arxius separats ajuda en ledició ja que treballem amb més sensació dordre. • Reutilització del codi: es pot aplicar el mateix codi javascript en diferents pàgines html. Agrupar aquest codi javascript en un fitxer .js extern crea una biblioteca de funcions que un cop definides no haurem de tornar a desenvolupar o copiar i enganxar, ja que cada cop que les necessitem en un codi html només haurem denllaçar la pàgina amb ladreça de larxiu .js i fer la crida a la funció necessitada. • Manteniment: Ajuda en posteriors feines de modificació i manteniment dels codis. Tindrem els codis més localitzables en diferents arxius de text gracies a seguir aquesta estructuració. A més a més, si estem treballant un una web prou complexa com pot ser la duna empresa, separar el codi permet que un equip de professionals pugui treballar simultàniament per fer modificacions sobre el codi html i el js. Amb lo qual saprofita el temps duna manera més eficient. També estalvia temps alhora de corregir errors en el codi javascript. realitzant una correcció a un codi js que saplica a diferents pàgines web, aconseguim resoldre el problema en totes les pàgines de cop sense haver dobrir un fitxer html un per un.Aleshores, és més útil utilitzar un .js extern quan podem preveure que anem a crear una pàginaweb prou extensa en codi html o una web destructura complexa com podria ser per una granempresa. Separar el js ens aportarà beneficis alhora de treballar: podrem reutilitzar el codi, controlar elcorrecte funcionament del codi js aplicat a diferent seccions de la web des dun sol arxiu, podrantreballar diverses persones es alhora en la mateixa pàgina web, ...Pel contrari, pot resultar més còmode utilitzar un js intern si estem desenvolupant un html ambuna estructura no massa complexa i unes funcions javascript que només seran aplicables enaquesta pàgina. Ja que en aquestes condicions no es treu tant profit dels beneficis de separar el codien arxius diferents: la pàgina és més simple per tant més fàcil de mantenir ordenada, no aprofitaremles funcions definides per altres pàgines, ...També pot ser pràctic quan desenvolupem funcions relacionades amb la modificació de la pròpia pàgina o laresposta devents que aquesta genera (ni que finalment acabem accedint a una llibreria externa) Exemples: • Al polsar un radio button sha de fer invisible una part del formulari i mostrar-ne una altra ressaltada amb un contorn de color. • Al produir-se un error en lentrada dun camp dun formulari, volem que el cursor se situï sobre aquest camp, mostri un missatge tipus tooltip explicant lerror, i canviï el fons del camp de color (ni que la funció validar sigui externa, la resta doperacions poden estar desenvolupades a la pròpia pàgina)Explicat en paraules del José Maria Arconada “Yo recomendaría incluir el código javascript en los ficheros html exclusivamente en los casos en los que el código javascript es tan personalizado a la página html en la que se utiliza y tan pequeño en tamaño que no se puede reutilizar en otros
  2. 2. ficheros .html ni pueden ocasionar un ralentización en la ejecución de la página. Al hilo de la “personalización” del código fuente java al fichero .html en el que se ejecuta, otro motivo de uso incrustado en el código html es cuando los eventos de algunas de las propias etiquetas del html lo usan como puede ser (escribiendo el código java en la etiqueta) a la hora de cargar una página o enviar un formulario). “2.- El nostre consultor ha desenvolupat un senzill codi per reflectir les incidències dun partit defutbol daficionats del seu poble. Sembla que lemoció del partit ha provocat que el codi “grinyoli”una mica. Detecta, explica, i soluciona els errors que hi ha en aquest pedaç. <script type="text/javascript"> var minut_joc; var 10_minut = Larbitre és va equivocar; minut_joc[20]=Gooool! Gol del Llorenç; in=”El jugador del barri de dalt ha esta el més connectat durant el partit”; out=El porter de cal Perico no nha aturat cap ni una; alert(minut_joc+” “+in+” “+out); </script>Codi correcte: <script type="text/javascript"> var minut_joc; var minut_10 = Larbitre és va equivocar; minut_joc=Gooool! Gol del Llorenç; var_in="El jugador del barri de dalt ha esta el més connectat durant el partit"; out=El porter de cal Perico no nha aturat cap ni una; alert(minut_joc+" "+var_in+" "+out); </script>Opció 1: S’han corregit les següents variables: • minut_10, una variable no pot començar per un numero. • minut_joc, es una variable string (cadena de text), no un paràmetre d’un array. • var_in, la paraula “in” es una paraula reservada. • També s’han posat contrabarres () davant de les cometes dels strings definits entre cometes simples.Arxiu T2.htmlOpció 2: En primer lloc el primer error és que la variable minut_joc no ha estat definida com el que és unArray, ja que més endavant al codi fem referència a la posició 20 del array, així doncs definim l’array senseespecificar el nombre d’intens. En segon lloc la variable 10_minut té dos problemes, el primer és que si bé es poden utilitzarnumerals per definir una variable, mai poden anar al davant, així podem definir-la com minut_10, en segonlloc veiem que després de la L, hi ha una cometa simple, i hem tancat el literal complet entre dues cometessimples, amb l’efecte sobre el codi següent, el codi obre una cometa i la tanca després de la L, així al tancartot el literal el que hem fet és tornar a obrir cometes. La solució és emprar dobles cometes per obrir i tancarel literal que conté cometes simples.
  3. 3. El següent error és emprar una paraula reservada per JS com a identificador d’una dada, en aquestcas un literal, ho canviem per la traducció al català; var_in. Es següent error es troba al següent identificador, més concretament en el literal, ja que hi torna ahaver el problema de les cometes simples que apareixen obrin i tancant el literal i dintre de la cadena. Hosolucionem emprant cometes dobles per obrir i tancar el literal. L’últim error es produeix quan a l’alert volem donar sortida per pantalla a tot l’array cridant minut_joc,ja que l’array és buit i només hi és definit un valor (minut_joc[20]), llavors surten a l’alert 19 cometes i elliteral que ocupa la posició 20, ho soluciono referenciant a l’alert l’únic valor del array amb contingut.Arxiu ex2 teorica.htmlPer acabar: El codi podria anar al head o al body, també en un js extern encara que no tindria massa sentit.Si que seria convenient afegir a la pàgina on el situem els següents tags (amb les modificacions quecalguèssin en funció del nostre desenvolupament) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Ex.2 </title>3.-Explica amb exemples quan i com utilitzaries les utilitzaries les estructures try / catchEs tracta dun sistema que et permet llançar un codi i capturar els possibles errors per d’aquesta maneracontrolar el flux del programa i evitar el màxim derrors possibles. Els llenguatges orientats a objectes tenenaquest sistema pera a processar les errades possibles dels seus objectes.En la majoria de casos, els exemples que es troben relacionats amb el try són poc útils com és el cas decontrolar que no hi hagi errors al cridar una funció, exemples del write com a wirte o aletr per alert... no sónun bon exemple perquè com que es produiran sempre, els podrem controlar abans de posar les nostresaplicacions en un entorn de producció. A més a més no té sentit fer un try catch que inclogui tot el nostrecodi. On utilitzar-lo doncs? Personalment el posaria quan es tracten “coses” incertes, hem de fer unlogaritme o un quocient amb dades entrades per lusuari i no sabem que ha pogut introduir. O quan estemaccedint a una funció que forma part duna llibreria a la que referenciem online i no estem segurs de que shihagi pogut accedir, o que, a vegades pel seu volum, pel col·lapse del servidor, els talls en la connexió... noestem segurs de que shagi descarregat totalment.En javascript s’usa de la forma següent: try { code } catch (error){ code }Aquesta estructura presenta també la sentència <throw>, que llença una excepció dins la sentencia <try>: try {
  4. 4. throw “Malament”; //Ni que no hi hagi cap error es llença una excepció } catch (err) { alert(Error: +err); } finally { codi.... }Finalment aquesta estructura pot contindre el bloc <finally> que sexecuta sempre al final del try,independentment de si sha entrat al catch o no: try { //Obrir un canal per enviar dades al servidor } catch (err) { //Missatge problemes amb larxiu } finally { //Tancar el canal per poder-lo obrir de nou en un altre moment }Un exemple molt senzill, podria fer la comprovació del password dins un formulari. function ValidatePassword(password){ try { if(password.length < 5 ) throw "SHORT"; else if(password.length > 10 ) throw "LONG"; alert("Paraula clau validada!"); } catch(e) { if(e == "SHORT")alert("Nombre insuficient de caràters a la clau!"); if(e == "LONG")alert("Has superat el nombre màxim de caracters de la clau!"); } finally{ document.myform.password.value=""; } alert("Clau correcta!"); } Pràctica1.- Programar una funció per donar format a una data obtinguda a partir del constructor Date() delobjecte Date que permeti visualitzar la data final en el nostre format habitual: dia-mes-any (2caràcters - 2 caràcters – 4 caràcters). Crear una pàgina web amb un botó que permeti validar-ho(el resultat final es pot mostrar utilitzant un alert).Es tracta dun exercici molt senzill que molts de vosaltres us heu entossudit en fer malament. Lenunciat diuclarament (2 caràcters - 2 caràcters – 4 caràcters) i molts heu mostrat els resultats amb (1 caràcter-1caràcter – 4 caràcters). He estat força estricte en aquest puntArxiu P1Exercici1P Data actual.html P1Exercici1P Data definida.html P1Exercici1P Data usuari.html P1P1.html
  5. 5. 2- Escriu un script que demani el nombre de paràmetres duna funció, desprès demani un valornumèric per cada paràmetre, cridi la funció, i mostri la seva concatenació. Nota: La dificultat delexercici està en passar a una funció un nombre no constant de paràmetres.Aquest exercici es pot solucionar de diverses maneres, la més senzilla és passant un sol paràmetre a lafunció que sigui un array. Les altres dues opcions passen un nombre diferent de paràmetres a la funció isajusta més al que demana lenunciat, per fer-ho sutilitzen les funcions apply i eval). Els tres exemples elspodeu consultar aHan estat molts els casos que han llegit correctament el nombre de paràmetres a entrar, shan carregat enun array correctament i sha cridat la funció. I aquí han aparegut els problemes, alguns no han passat capparàmetre a la funció, altres han passat larray, en algun cas la funció tenia un paràmetre dentrada, en altresno... i en tots els casos lexercici semblava funcionar. Us miro dexplicar on està lerror, el problema està enque dins la funció no accedíeu als arguments que rebia i mostràveu els valors dun array definit global sensefer cap cas a lenunciat de lexercici. En cas daccedir als arguments molts fèieu: for ( i == 0; i < funcio.arguments.length;i++)Resulta que com que passàveu un array funcio.arguments.length val 1, encadenàveu el valor daquestparàmetre (array) a una cadena de text i el mostràveu. Si recordeu lexercici teòric 2, al fer un alert dunarray (passa el mateix si lassigneu a una variable) es posen els elements separats per, al fer alert veiemaquests elements, però realment no accedíeu als elements de larray de forma individual. Si haguéssiudhaver fet una altra operació lexercici no hagués funcionat mai. Què calia fer? Doncs accedir als elementsde larray fent: for( var i = 0; i < funcio.arguments[0].length; i++ ) p += arguments[0][i]+”,”;Arxiu P2P2_1.html (array) P2P2_2.html (eval) P2P2_3.html (apply)3- Programar una funció que rebi 2 paràmetres de diferent tipus i actuï en funció del tipusdaquests paràmetres. La taula inferior ens indica quina funció hem de realitzar Tipus de dada Operació a realitzar cadenes de text Encadenar els paràmetres enters sumar els paràmetres decimals sumar retornant el valor arrodonit data Retornar i la diferència de dates en milisegonsHi ha moltíssimes formes de fer-ho, us en presento dues de senzilles que resolen la identificació de lesdades de forma diferentArxiusP3P3_1.htmlP3P3_2.html

×