PAC 1PW

Assignatura Programaci Web

Grau Multimedia 2012/13-1
Consultor Jaume Jorba Sagrista
Alumne Madel Ortiz Valor

PAC 1 [PW]Grau Multimedia

Madel Ortiz Valor

1.- Memria
Crear una pgina html buida i incrustar tot l'exercici en aquesta pgina.
1.- Afegir-hi un bot que llenci un bucle per llegir des del teclat la llista de la compra producte, marca
i unitats (format: producte, marca, unitats) i desar-los en un array ( array unidimensional que contingui
la concatenaci de producte, marca, unitats). Finalitzar quan hi hagi una entrada en en qualsevol dels
camps que sigui FI.
Per a resoldre aquest exercici i pensant en els segents he optat per enmagatzemar les dades a una
matriu de dues dimensions ja que trobe poc til que les entrades separades que es reben de producte,
marca i unitats es guarden a un array tinguem que concatenarles amb una execuci posterior, que, a
ms, dificulta (o complica) una mica laccs posterior a les dades.
Tamb he optat per finalitzar el bucle quan troba fi sols en la entrada del producte, ja que no te
sentit introduir un producte i desprs fi per a la marca.
2.- Afegir a l'apartat anterior una funci de validaci de la informaci introduda: que no sacceptin
productes i marques que continguin carcters especials (&%$?! _) i assegurar-se de que les unitats
continguin un valor numric enter.
Un cop definides les funcions que validen el text i els nombres, he fet servir la mateixa estructura del
exerici 1 implantant la crida a les funcions amb aquesta estructura:

BUCLE PRIMARI.
J=0
MENTRES PRODUCTE
J++

FI

mentres trobat==true:
demanar producte

QUAN ES SUPERA EL BUCLE:

desar producte
avanar seqencia (i++)

cridar fun. validar

mentres trobat==true:
demanar marca

QUAN ES SUPERA EL BUCLE:

desar marca
avanar seqencia (i++)

cridar fun. validar

mentres trobat==true:
demanar unitats

QUAN ES SUPERA EL BUCLE:

desar unitats

cridar fun. validar

FI o INICI BUCLE

Pg 2

PAC 1 [PW]Grau Multimedia

Madel Ortiz Valor

3.- A la pgina anterior inserir un bot mostrar que permeti fer un llistat de les dades en format taula
en una nova pgina (el codi que obri la nova pgina sexplicar al frum).
Mhe decidit per obrir una pgina nova dun tamany concret i aplicant la mateixa fulla destils de la
pgina principal per tindre una major coherncia esttica.
A ms he cregut oport afegir un bot per tancar la pgina, aquest te una doble funcionalitat:
permet a lusuari tancar la finestra comodament i permet a la funcio tancar lobjecte windows.
Tamb he afegit un condicionant a la funci, de manera que si no troba entrades a larray no mostra
la taula buida (lusuari podria no saber per quina ra la veu buida) sino que li comunica a lusuari que
no shan introduit dades.
4.- A la pgina anterior afegir un bot que permeti cercar una marca de la llista i mostri tots els
registres que compleixen la condici. Per visualitzar el resultat utilitzeu un alert.
En aquest cas descarte lalert com a mode de visualitzaci per continuar amb la mateixa coherncia
tant esttica com estructural.
A banda del bot per tancar li mostre a lusuari quin text de recerca a introduit, i si no troba cap
entrada coincident li ho comunique. Pense que es primordial que lusuari puga saber en tot moment
que ha pasat al prmer un boto i, en aquest cas per exemple, trobar una taula buida: podria ser
perque no shan introduit dades, perque no sha trobat el seu text, podria haver-lo escrit malament
5.- Afegir un nou bot que ordeni la llista de productes i els mostri, en format taula ordenada, en una
pgina nova.
Per a resoldre aquest exercici he optat per definir un array nou on fer una copia de les entrades de
producte i desprs ordenar-lo alfabeticament. Tot seguit es definexen dos arrays ms per a les
marques i les unitats i inicialitze un bucle que agafa el primer valor del nou array de productes
ordenats i el cerca de larray original, quan el troba mira en quin index es troba i desa a la primera
posici del nou array de marques la marca que hi ha en eixe index en larray original, i el mateix a les
unitats. Quan ja estan el tres arrays ordenats segons lordre dels productes sols hi ha que mostrarlos en
forma de taula com en els casos anteriors.
Primerament volia estalviar-me els dos arrays nous de marques i unitats fent que quan el bucle cerca i
troba el primer producte a larray original mire lindex i directament omplira la primera fila de la taula
amb el primer producte del nou array i la marca i unitats del index trobat de larray original. Sembla
ms directe i estalvie unes lines de codi, per no em va funcionar.
6.- Com que l'opci 5 ens desordena l'estat inicial de la llista, afegir un bot que permeti recuperarlo.
Quines opcions s'us plantegen i quina seria ms optima?
Optant per la clonaci del array de productes per reordenar-lo ja no tenim cap problema. Continuem
tenint larray original.
7.- Exportar el codi javascript de la pgina a un arxiu .js extern i vincular-lo a la pgina web.
8.- Documentar el codi segons la soluci proposada als temes de debat.

2.- Dades tcniques

Els arxius adjuntats en aquesta pac son:

Pac1.html: Tipus XHTML 1.0 Transitional. Tamb valida com HTML5

estilos.css

codi2_js_pac1.js

3.- Codi javaScript

/* JavaScript Document
@author: Madel Ortiz
@versio: 2.0
@date: 03-10-2012
*/

Pg 3

PAC 1 [PW]Grau Multimedia

Madel Ortiz Valor

// ___________________FUNCIONS______________________
/* funcio intDades():
@author: Madel Ortiz
@versio: 24.7 [Basada en la funcio intDadesNoVALIDA i les multiples proves realitzades]
@param Compra: array bidimensional d'ambit global on es desen les dades introduides per l'usuari.
@param trobat: boole d'ambit goblal retornat per les funcions de validacio
Funcionament: En premer un bot aquesta funcio permet a l'usuari entrar dades i enmagatzenar-les a un array
bidimensional. Un bucle primari engloba 3 bucles anidats fins que no troba la paraula "fi". Cada uno dels bucles
anidats demanen introduir la dada corresponent fins que la crida a la funcio de validacio no retorna false.
*/
function intDades() { // FUNCIONAAAAAAAAAAAAAAAAAAAAAAAAA
var fi=false; // es defineix la variable local fi: boole true si troba la praula fi, false si no
var j=0; // s'inicialitza la variable que dona comenament al bucle per a una dimesi de l'array
for (j=0; fi==false; j++) { // comena el bucle inicial fins que no trobe "fi"
var i=0; // s'inicialitza una segon variable per a la segona dimensio de l'array
Compra[j]= Array(3); // per a una dimensio de l'array s'inicialitza la variable global definida com
un array de 3
trobat=null; // es buida el valor de trobat per a que no afecte a les segents iteracions
while (trobat!=false) { // comena el bucle que demana entrar prodcute fins que la validacio
no retorne fals
prod=prompt("Introdueix el nom del producte:"); // obre la caixa d'entrada de dades
validar(prod); // crida a la funcio que valida la entrada
} // Fi del while. Un cop asegurat que no hi han caracters prohibits continua el bucle inicial
if (( prod == 'FI') || (prod == 'fi') || (prod == 'Fi')) { // comprova si la dada es fi, en cas
afirmatiu

Compra[j][i]=prod; // desa la entrada perque si es queda null dona error

posteriorment
fi=true; // la variable local fi canvia de valor i finalitza el bucle inicial
} // Fi del if
else { // quan supera el bucle de validacio i la condicio d'acabament pot continuar el
bucle inicial

Compra[j][i]=prod; // desa l'entrada de producte a l'array i

i++; // avana una posici de l'array
trobat=null; // buida el valor de trobat (que la validacio de producte ha deixat

en false)
while (trobat!=false) { // comena el bucle que demana entrar marca fins
que la validacio no retorne fals
var marca=prompt("Introdueix la marca del producte:"); // obre la

caixa d'entrada de dades

validar(marca); // crida a la funcio que valida la entrada

} // Fi del while. Un cop superat el bucle de validacio continua el bucle inicial
Compra[j][i]=marca; // desa l'entrada de marca a l'array
trobat=null; // buida el valor de trobat (que la validacio de marca ha deixat
en false)

i++; // avana una posici de l'array

while (trobat!=false) { // comena el bucle que demana entrar unitats fins

que la validacio no retorne fals

var unitats=prompt("Introdueix les unitats del producte:"); // obre la

caixa d'entrada de dades

valUnits(unitats); // crida a la funcio que valida la entrada
} // Fi del while. Un cop superat el bucle de validacio continua el bucle inicial
Compra[j][i]=unitats; // i si es aixi desa l'entrada a l'array
} // Fi del else
} // Fi del for
} // fi de la funcio
/*
function validar(dada):

Pg 4

PAC 1 [PW]Grau Multimedia

Madel Ortiz Valor

@author: Madel Ortiz

@versio: 1.2
@param dada: Prendr el valor de la variable "prod" o "marca"
@return trobat: boole de caracter global, retorna true si troba un caracter prohibit, i false en cas contrari
Funcionament: Reb una dada i retorna true o false si troba alguns
del caracters especials prohibits definits en la funcio
*/
function validar(dada) { //
var esp="&%$?!_(){}[]"; // llistat de caracters prhibits
var i=0; // condicio inicial del bucle
trobat = false; // ens asegurem de que la variable que ha de retornar tingua un valor
while ((i<esp.length) && (trobat == false)) { // condicions que ha de complir el bucle per a continuar
eecutant-se
var espAux=esp.charAt(i); // asigna a una variable auxiliar cada un dels caracters especials
mentre s'executa el bucle
var n=dada.indexOf(espAux); // comprova si en la dada d'entrada existeix el caracter especials
//
document.write(n +"<br>"); // xivato
if (n>=0) { // si troba un caracter prohibit mostra un alert i canvia el valor de retorn
alert("Els caracters &%$?!_ no estan permesos");
trobat = true;
} // Fi del if
i++; // avana el bucle al segent caracter especials
} // Fi del bucle while for que compara tots els caracters especials
return trobat;
} // Fi de la funcio validar dada

/*
function valUnits(unitats):
@author: Madel Ortiz
@versio: 1.0
@param dada: Prendr el valor de la variable "unitats"
@return trobat: boole de caracter global, retorna true si la dada conte algun caracter no numric, i false en cas
contrari
Funcionament: Reb una dada i retorna true o false si es numerica o no
*/
function valUnits(unitats) {
trobat = false; // ens asegurem de que la variable que ha de retornar tingua un valor
if (isNaN(unitats)==true) {
alert("El valor ha de ser numeric");
trobat= true;
} // Fi del if isNaN
return trobat;
} // Fi de la funcio valUnits
/* function TaulaCompra:
@author: Madel Ortiz
@versio: 1.2
@param Compra: array bidimensional d'ambit global on es desen les dades introduides per l'usuari.
Funcionament: obri una nova p gina amb una fulla d'estil associada en la que ompli una taula amb les dades
introduides mitjanant la funcio intDadesNoVALIDA. Mostra un bot per tancar la p gina.
No escriu l'ultima fila de la taula ja que correspon a l'estrada "fi"
*/
function TaulaCompra() { // FUNCIONA
var w1 = window.open("","Llistat compra","resizable=1,width=400,height=600"); // Genera la nova pagina
w1.document.write("<head><title>Taula:
Llista
compra</title><link
href='estilos.css'
rel='stylesheet'
type='text/css' /></head><body>"); // Determina titol i arxiu css
long=Compra.length;
w1.document.write("<table>"); // Es genera la taula
w1.document.write("<caption><h5>Taula: Llista compra</h5></caption>"); // titol
w1.document.write("<tr><th>Producte</th>"); // encapalaments columnes
w1.document.write("<th>Marca</th>"); // encapalaments columnes
w1.document.write("<th>Unitats</th></tr>"); // encapalaments columnes
i=0;
for (i=0; i<Compra.length-1; i++) { // Compra.length-1 = descompta l'ultima entrada "fi"
w1.document.write("<tr><td>"+Compra[i][0]+"</td>");
w1.document.write("<td>"+Compra[i][1]+"</td>");
w1.document.write("<td>"+Compra[i][2]+"</td></tr>");

Pg 5

PAC 1 [PW]Grau Multimedia

Madel Ortiz Valor

} // Fi del for
if (Compra.length==0) { // si l'array no te cap entrada s'escriu a la taula una fila amb 3 columnes
combinades avisant que no s'han introduit articles
w1.document.write("<tr><td colspan='3'>No hi ha cap article a la LLista de Compra</td></tr>");
} // Fi del if
w1.document.write("</table></body>"); // tanca la taula
w1.document.write("<p align='center'><input type='button' onclick='self.close()' name='Tancar'
value='Tancar'></p>"); // boto per tancar la finestra
} // Fi de la funcio
/* function TaulaMarca:
@author: Madel Ortiz
@versio: 1.4
@param Compra: array bidimensional d'ambit global on es desen les dades introduides per l'usuari.
Funcionament: Genera en una pagina nova amb una fulla d'estils aplicada i omple una taula filtrant les entrades
per el camp "marca".
*/
function TaulaMarca() { //
var cercaMarca= prompt("Introdueix la marca que vols cercar:"); // s'enmagatzema a una variable el text
que hem de cercar
var w2 = window.open("","Llistat filtrat per marca","resizable=1,width=400,height=600"); // Genera la nova
pagina
w2.document.write("<head><title>Taula: Llista filtrada per marca</title><link href='estilos.css' rel='stylesheet'
type='text/css' /></head><body>"); // Determina titol i arxiu css
w2.document.write("<table>"); // Es genera la taula
w2.document.write("<caption><h5>Taula: Llista filtrada per marca</h5></caption>"); //titol
w2.document.write("<tr><td colspan='3'>Has introduit: <em>"+cercaMarca+"</em></td></tr>"); // s'escriu
a la taula una fila amb 3 columnes combinades mostrant el text introduit per l'uasuari
w2.document.write("<tr><th>Producte</th>"); // encapalaments columnes
w2.document.write("<th>Marca</th>"); // encapalaments columnes
w2.document.write("<th>Unitats</th></tr>"); // encapalaments columnes
var aux=0; // variable auxiliar per saber si ha trobat alguna marca al finalitzar el bucle
if (Compra.length==0) { // comprova, i si l'array no te cap entrada s'escriu a la taula una fila amb 3
columnes combinades avisant que no s'han introduit articles
w2.document.write("<tr><td colspan='3'>No hi ha cap article a la LLista de Compra</td></tr>");
} // Fi del if
else { // Si si que hi han entrades escriu les marques trobades en la cerca o avisa de que no s'ha trobat la
marca introduida
for (i=0; i<Compra.length-1; i++) { // El bucle afegeix a la taula les entrades que validen la condicio de
recerca. Compra.length-1 = descopta l'ultima entrada "null"
var n=Compra[i][1].indexOf(cercaMarca); // expressio que busca a l'array les entrades
coincidents amb la marca de cerca
if (n>=0) { // si troba la marca cercada escriu a la taula els tres valor de l'array
w2.document.write("<tr><td>"+Compra[i][0]+"</td>");
w2.document.write("<td>"+Compra[i][1]+"</td>");
w2.document.write("<td>"+Compra[i][2]+"</td></tr>");
aux++; // si ha trobat una marca augmenta el comptador
} // Fi del if
} // Fi de for
if (aux==0) { // si el comptador segueix a 0 s'escriu a la taula una fila amb 3 columnes combinades avisant
que no s'ha trobat la marca cercada
w2.document.write("<tr><td colspan='3'>No s'ha trobat la marca</td></tr>");
} // Fi del if
} // Fi del else
w2.document.write("</table></body>"); // tanca la taula
w2.document.write("<p
align='center'><input
type='button'
value='Tancar'></p>"); // boto per tancar la finestra
} // Fi de la funcio llistaMarca

onclick='self.close()'

name='Tancar'

/* function TaulaProd():
@author: Madel Ortiz
@versio: 1.4
@param Compra: array bidimensional d'ambit global on es desen les dades introduides per l'usuari.
Funcionament: Genera en una pagina i escriu les entrades ordenant els productes per ordre alfabetic.
Es fa una copia dels productes a un nou array destimant l'ultima entrada corresponent a "fi". Seguidament s'ordena
alfabeticament.

Pg 6

PAC 1 [PW]Grau Multimedia

Madel Ortiz Valor

Es creen dos nous arrays per desar les marques i les unitats seguin l'ordre dels productes ordenats.
Es mostren una taula desestimant l'ultima entrada corresponent a "null".
*/
function TaulaProd() { // exercici 5
var w3 = window.open("","Llistat ordenat alfabeticament","resizable=1,width=400,height=600"); // Genera la
nova pagina
w3.document.write("<head><title>Taula: Llista ordenada alfabeticament</title><link href='estilos.css'
rel='stylesheet' type='text/css' /></head><body>");
w3.document.write("<table>"); // Es genera la taula
w3.document.write("<caption><h5>Taula: Llista ordenada alfabeticament</h5></caption>"); //titol
w3.document.write("<tr><th>Producte</th>"); // encapalaments columnes
w3.document.write("<th>Marca</th>"); // encapalaments columnes
w3.document.write("<th>Unitats</th></tr>"); // encapalaments columnes
var ProdOrd=new Array(); // S'inicialtza un nou array per fer una copia dels productes
for (i=0;i<Compra.length-1;i++){ // bucle que recorre l'array compra i clona els productes a un nou array.
Compra.length-1 = descopta l'ultima entrada "fi"
ProdOrd[i]=Compra[i][0].slice(0); // expressio que clona l'array
}
ProdOrd.sort(); // ordena alfabeticament el nou array de productes
var MarcaOrd=new Array(); // S'inicialtza un nou array per desar les marques en l'ordre dels productes
var UnitsOrd=new Array(); // S'inicialtza un nou array per fer desar les unitats en l'ordre dels productes
j=0; // condicio inicial del bucle per a ordenar les marques
while (j<Compra.length) { // Un a un, cerca el productes ordenats en l'array inicial
for (i=0;i<Compra.length;i++){ //
var n=Compra[i][0].search(ProdOrd[j]); // cerca en els productes del array
inicial un producte del array ordenat
if (n==0) { // quan el troba un producte coincident desa al nou array de
marques la marca que hi ha array inical en eixe index
MarcaOrd[j]=Compra[i][1];
j++; // avana la seqencia per cercar el segent producte
ordenat
} // Fi del if
} // Fi del for
} // Fi del while
j=0; // condicio inicial del bucle per a ordenar les unitats
while (j<Compra.length) { // Un a un, cerca el productes ordenats en l'array inicial
for (i=0;i<Compra.length;i++){ //
var n=Compra[i][0].search(ProdOrd[j]); // cerca en els productes del array
inicial un producte del array ordenat
if (n==0) { // quan el troba desa al nou array de unitats la unitat que hi ha array
inical en eixe index
UnitsOrd[j]=Compra[i][2];
j++; // avana la seqencia per cercar el segent producte
ordenat
} // Fi del if
} // Fi del for
} // Fi del while
for (i=0; i<Compra.length-1; i++) { // El bucle escriu a la taula les entrades dels nou arrays ordenats
w3.document.write("<tr><td>"+ProdOrd[i]+"</td>");
w3.document.write("<td>"+MarcaOrd[i]+"</td>");
w3.document.write("<td>"+UnitsOrd[i]+"</td></tr>");
} // Fi de for
if (Compra.length==0) { // si l'array no te cap entrada s'escriu a la taula una fila amb 3 columnes
combinades avisant que no s'han introduit articles
w3.document.write("<tr><td colspan='3'>No hi ha cap article a la LLista de Compra</td></tr>");
} // Fi del if
w3.document.write("</table></body>"); // tanca la taula
w3.document.write("<p
align='center'><input
type='button'
onclick='self.close()'
name='Tancar'
value='Tancar'></p>"); // boto per tancar la finestra
} // Fi de la funcio llistaProd
// ___________________CODI______________________
var Compra=new Array(); // es defineix com a variable global un array bidimensional per enmagatzemar les dades.
Es fa fora de la funci intDades ja que aixi l'array (encara que buid) esta disponible per a les funcions que mostren
taules en finestres noves

Pg 7

PAC 1 [PW]Grau Multimedia

Madel Ortiz Valor

Pg 8