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

1. PAC2
Teòrica
1.- Explica en quins casos creus que és millor incloure el codi javascript a la mateixa pàgina html i
en 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 d'estructura gran i complexa, el no barrejar els diferents tipus de
codi i tenir-los en diferents arxius separats ajuda en l'edició ja que treballem amb més sensació
d'ordre.
• 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 d'enllaçar la pàgina amb l'adreça de l'arxiu .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 d'una
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 s'aprofita el temps d'una manera més eficient.
També estalvia temps alhora de corregir errors en el codi javascript. realitzant una correcció a un
codi js que s'aplica a diferents pàgines web, aconseguim resoldre el problema en totes les pàgines
de cop sense haver d'obrir un fitxer html un per un.
Aleshores, és més útil utilitzar un .js extern quan podem preveure que anem a crear una pàgina
web prou extensa en codi html o una web d'estructura complexa com podria ser per una gran
empresa. Separar el js ens aportarà beneficis alhora de treballar: podrem reutilitzar el codi, controlar el
correcte funcionament del codi js aplicat a diferent seccions de la web des d'un sol arxiu, podran
treballar 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 amb
una estructura no massa complexa i unes funcions javascript que només seran aplicables en
aquesta pàgina. Ja que en aquestes condicions no es treu tant profit dels beneficis de separar el codi
en arxius diferents: la pàgina és més simple per tant més fàcil de mantenir ordenada, no aprofitarem
les 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 la
resposta d'events que aquesta genera (ni que finalment acabem accedint a una llibreria externa) Exemples:
• Al polsar un radio button s'ha de fer invisible una part del formulari i mostrar-ne una altra ressaltada
amb un contorn de color.
• Al produir-se un error en l'entrada d'un camp d'un formulari, volem que el cursor se situï sobre
aquest camp, mostri un missatge tipus tooltip explicant l'error, i canviï el fons del camp de color (ni
que la funció validar sigui externa, la resta d'operacions 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. 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 d'un partit de
futbol d'aficionats del seu poble. Sembla que l'emoció 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 = 'L'arbitre é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 n'ha aturat cap ni una';
alert(minut_joc+” “+in+” “+out);
</script>
Codi correcte:
<script type="text/javascript">
var minut_joc;
var minut_10 = 'L'arbitre é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 n'ha 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.html
Opció 2: En primer lloc el primer error és que la variable minut_joc no ha estat definida com el que és un
Array, ja que més endavant al codi fem referència a la posició 20 del array, així doncs definim l’array sense
especificar el nombre d’intens.
En segon lloc la variable 10_minut té dos problemes, el primer és que si bé es poden utilitzar
numerals per definir una variable, mai poden anar al davant, així podem definir-la com minut_10, en segon
lloc veiem que després de la L, hi ha una cometa simple, i hem tancat el literal complet entre dues cometes
simples, amb l’efecte sobre el codi següent, el codi obre una cometa i la tanca després de la L, així al tancar
tot el literal el que hem fet és tornar a obrir cometes. La solució és emprar dobles cometes per obrir i tancar
el literal que conté cometes simples.

3. El següent error és emprar una paraula reservada per JS com a identificador d’una dada, en aquest
cas 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 a
haver el problema de les cometes simples que apareixen obrin i tancant el literal i dintre de la cadena. Ho
solucionem 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 el
literal que ocupa la posició 20, ho soluciono referenciant a l’alert l’únic valor del array amb contingut.
Arxiu
ex2 teorica.html
Per 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 que
calguè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 / catch
Es tracta d'un sistema que et permet llançar un codi i capturar els possibles errors per d’aquesta manera
controlar el flux del programa i evitar el màxim d'errors possibles. Els llenguatges orientats a objectes tenen
aquest 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 de
controlar que no hi hagi errors al cridar una funció, exemples del write com a wirte o aletr per alert... no són
un bon exemple perquè com que es produiran sempre, els podrem controlar abans de posar les nostres
aplicacions en un entorn de producció. A més a més no té sentit fer un try catch que inclogui tot el nostre
codi. On utilitzar-lo doncs? Personalment el posaria quan es tracten “coses” incertes, hem de fer un
logaritme o un quocient amb dades entrades per l'usuari i no sabem que ha pogut introduir. O quan estem
accedint a una funció que forma part d'una llibreria a la que referenciem online i no estem segurs de que s'hi
hagi pogut accedir, o que, a vegades pel seu volum, pel col·lapse del servidor, els talls en la connexió... no
estem segurs de que s'hagi 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. 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 s'executa sempre al final del try,
independentment de si s'ha entrat al catch o no:
try {
//Obrir un canal per enviar dades al servidor
}
catch (err) {
//Missatge problemes amb l'arxiu
} 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àctica
1.- Programar una funció per donar format a una data obtinguda a partir del constructor Date() de
l'objecte Date que permeti visualitzar la data final en el nostre format habitual: dia-mes-any (2
carà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 d'un exercici molt senzill que molts de vosaltres us heu entossudit en fer malament. L'enunciat diu
clarament (2 caràcters - 2 caràcters – 4 caràcters) i molts heu mostrat els resultats amb (1 caràcter-1
caràcter – 4 caràcters). He estat força estricte en aquest punt
Arxiu
P1Exercici1P Data actual.html
P1Exercici1P Data definida.html
P1Exercici1P Data usuari.html
P1P1.html

5. 2- Escriu un script que demani el nombre de paràmetres d'una funció, desprès demani un valor
numèric per cada paràmetre, cridi la funció, i mostri la seva concatenació. Nota: La dificultat de
l'exercici 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 la
funció que sigui un array. Les altres dues opcions passen un nombre diferent de paràmetres a la funció i
s'ajusta més al que demana l'enunciat, per fer-ho s'utilitzen les funcions apply i eval). Els tres exemples els
podeu consultar a
Han estat molts els casos que han llegit correctament el nombre de paràmetres a entrar, s'han carregat en
un array correctament i s'ha cridat la funció. I aquí han aparegut els problemes, alguns no han passat cap
paràmetre a la funció, altres han passat l'array, en algun cas la funció tenia un paràmetre d'entrada, en altres
no... i en tots els casos l'exercici semblava funcionar. Us miro d'explicar on està l'error, el problema està en
que dins la funció no accedíeu als arguments que rebia i mostràveu els valors d'un array definit global sense
fer cap cas a l'enunciat de l'exercici. En cas d'accedir 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 d'aquest
paràmetre (array) a una cadena de text i el mostràveu. Si recordeu l'exercici teòric 2, al fer un alert d'un
array (passa el mateix si l'assigneu a una variable) es posen els elements separats per, al fer alert veiem
aquests elements, però realment no accedíeu als elements de l'array de forma individual. Si haguéssiu
d'haver fet una altra operació l'exercici no hagués funcionat mai. Què calia fer? Doncs accedir als elements
de l'array 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 tipus
d'aquests 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 milisegons
Hi ha moltíssimes formes de fer-ho, us en presento dues de senzilles que resolen la identificació de les
dades de forma diferent
Arxius
P3P3_1.html
P3P3_2.html