En aquesta assignatura el llenguatge de programació utilitzat és JavaScript. Aquest llenguatge de programació que s'utilitza principalment per crear pàgines web dinàmiques. A través d'aquest llenguatge s'estudia com incorporar efectes i animacions a una pàgina web. També l'aplicació d'accions que ens permetin realitzar manipular el navegador web en prémer botons i finestres amb missatges d'avís a l'usuari.
Metodología i Desenvolupament de Projectes en Xarxa PAC 2
PW_pac1
1. Estudis d’Informàtica, Multimèdia i Telecomunicacions
Grau de multimèdia
Programació web
Per a dubtes i aclariments sobre l’enunciat, adreceu-vos al consultor responsable de la
vostra aula.
S'ha de lliurar la solució en un fitxer comprimit a l'espai Lliurament d'activitats de
l'aula. El fitxer ha d’estar compost d’un fitxer doc, docx, odt o pdf amb totes les
respostes teòriques i els exercicis pràctics en arxius html, js i css.
Consulteu la data de lliurament al calendari.
PAC1 - JavaScript: Estructures bàsiques.
1.- Explica utilitzant un exemple de codi, els distints àmbits de les variables a
JavaScript, indicant com i on es declaren.
(1 punt)
var missatge = "variable global";
function mostraMissatge() {
var mensaje = "variable local";
alert(mensaje);
alert(missatge + "dins de la funcio");
}
alert(missatge); // executa la variable global
mostraMissatge(); // executa la variable local aquesta sols s'executara dins
de la funcio
alert (mensaje); // quant la cridem no s'executa
Existeixen dos tipus d'àmbits de funcionament de les variables local i global.
Les variables denominades locals són aquelles que sols s'executen quan es crida a la
funció en aquest cas, hem creat la variable «mensaje» i sols s'executa quan cridem a la
funció quan s'intenta cridar-la des de fora no s'executa.
Les variables de tipus global són aquelles que es poden cridar en qualsevol moment de la
seqüència del programa per exemple: La variable «missatge» la podem cridar tant des de
fora de la funció com des de dins.
Veure el fitxer ambit.html
2. 2.- Descriu el principal ús que es donen als operadors de comparació. Explica la
utilitat dels operadors estrictes.
La funció principal dels operadors de comparació és la de comparar dos valors ja siguen
variables, o vectors tant de caràcter numèric com de text.
Els d'igualtat disposem de dos tipus:
( == ) La seva funció és comparar la igualtat de dos valors però no discrimina el tipus de
variable. En l'exemple compara un valor tipus numèric amb un de tipus cadena (“”) i ens
dóna com a resultat correcte
3==”3” → cert
El Perquè tenim dos tipus de comparadors d'igualtat (==) i (===), és pels següents motius:
El de doble igualtat al comparar dos valors, per exemple un del tipus numèric i altre de
caràcter aquest el converteix amb un valor numèric i a diferència de triple igual (===) que
no parteixen restriccions.
(!==) La desiguatat estricta funciona igual que la triple igualtat dona la operacio com a
incorrecta si es de diferent tipus
A l'exercici practic ( comparacio.html) el funcionament es el següent:
var a = 3;
var b = 3;
var c = "3";
document.write(a == c);document.write("<br>"); // true
document.write(a === c);document.write("<br>"); // false
document.write(a !== c);document.write("<br>"); // true
document.write(a == b);document.write("<br>"); // true
document.write(a === c);document.write("<br>"); // true
document.write(a !== b);document.write("<br>"); // false
3. La resta de variables es tracta de variables de comparació
var a = 3;
var b= 3;
var c = "3";
document.write(a < b);document.write("<br>"); // false
document.write(a > b);document.write("<br>"); // false
document.write(a >= b);document.write("<br>"); // true
document.write(a <= b);document.write("<br>"); // true
document.write(a < c);document.write("<br>"); // false
document.write(a > c);document.write("<br>"); // false
document.write(a >= c);document.write("<br>"); // true
document.write(a <= c);document.write("<br>"); // true
adjunte fitxer html comparacio.html
3.- La sentència with pot ajudar a simplificar el codi JavaScript en certes
estructures. Identifica amb dos exemples diferents aquesta possibilitat.
Aquest exemple l'ús de with ens permet utilitzar els mètodes definits pels arrays sense
necessitat d'especificar sobre quin objecte s'han d'utilitzar, ja que es pren com objecte per
defecte sobre el que s'apliquen les seqüències contingudes dintre del with.
Amb aquest codi el que estaríem fent és primer ordenar l'array amb el comandament sort
begudes = new Array("fantaTaronga", "cerveza", "whisky", "pepsiCola")
with (begudes){
sort(); //El métode sort ordena els elements d'una matriu
reverse(); //El métode reverse invertix els elements d'una matriu
shift();// //elimina el primer element de l'array i ho retorna.L'array
original es veu modificat i la seva longitud disminuïda en 1 element.ULL
AQUI DINTRE DEL WITH NO ACTUA PERQUE ES L'ULTIM OBJECTE
}
document.write("Les begudes ordenades i amb ordre invertit finalment son: "
+ begudes + "<br>");
document.write(begudes.sort() + "<br>");
document.write(begudes.reverse() + "<br>");
document.write(begudes.shift() + "<br>");
Segon Exemple
var radi = 7;
with (Math) {
longitud = PI * 2* r;
area = PI * r * r;
}
En aquest exemple s'agafa com objecte per defecte l'objecte Math i es sobre el que aplica
la propietat PI, si no s'hagués utilitzat la sentència with, hauríem d'haver indicat sobre quin
objecte s'aplica PI, mitjançant Math.PI. Aquest codi implica calcular els valors de dues
variables que correspondrien a la longitud i àrea de la circumferència amb radi 7.
4. 4.- Explica quines avantatges té l’ús de funcions dins el nostre codi i les principals
característiques dels seus paràmetres.
Una funció és un bloc de codi amb un nom ben definit, ja que quan són requerides quant les cridem
pel nom que els hàgim posat. Poden admetre un o més arguments.
Les funcions ens permeten poder descompondre el programa per parts fent possible que sigui mes
lleuger i no hàgim de repetir un mateix codi en un mateix programa.
També permet que puguem veure mes clar el codi amb el que s'aconsegueix tenir menys errors en
l'escriptura d'aquest (codi) i alhora poder localitzar aquests mes fàcilment.
A més, permeten la reutilització de codi, ja que podran ser utilitzades tantes vegades com es vulgui al
llarg del document sense necessitat de escriure una altra vegada el codi.
En quant a les característiques dels paràmetres:
Els paràmetres s'indiquen entre parèntesi i separats per comes en cas que hagi més d'un. Són
opcionals i dependrà de cada funció que tingui paràmetres i els seu número.
Aquests paràmetres són les dades entrades a la funció, és a dir, les dades que li passem a la funció, i
depenen del seu valor la funció retornarà un o altre valor. S'ha de tindre en compte si passem una
cadena de text com paràmetre, si s'han d'utilitzar cometes dobles o simples, depenent com es fa la
crida, per exemple, si es fa la crida a la funció des d'un esdeveniment. Altre característica important a
tenir sempre present és l'àmbit de la variable. Normalment els paràmetres passats a una funció actuen
com variables locals que sols existeixen dintre de la mateixa funció, el motiu d'aquest funcionament és
que estem passant variables per valor, que fa que no és modifiquin el valor de la variable fora de la
funció. Hi ha excepcions a aquest funcionament, com seria quan passem variables del tipus Array o
objectes, on les variables es passen per referència i qualsevol modificació dintre de la funció s'aplica a
la variable externa a la funció.
Per últim dir, que si a una funció li hem de passar determinats paràmetres i al fer la crida no els
indiquem, la funció retorna el valor null.
function sumaiMostra() {
resultat = nombre1 + nombre2;
alert("El resultat es " + resultat);
}
var resultat;
// cambiem el valor de les variables nombre1 i nombre2 cada resutat el
mostrara en la finestra emergent a traves del comandament alert
var nombre1 = 27;
var nombre2 = 42;
sumaiMostra();
nombre1 = 1;
nombre2 = 2;
sumaiMostra();
nombre1 = 6543;
nombre2 = 1234;
sumaiMostra();
5. 5.- Explica la funcionalitat de les sentències break i continue, el seu objectiu i les
recomanacions d’us.
break: permet la interrupció del bucle on es troba, aturant completament la seva execució
i continuant amb l'execució del codi que es troba just darrere del bucle.
continue: permet continuar l'execució del bucle saltant alguna iteració; en concret salta la
iteració que es troba en execució en aquell moment i passa a executar la següent iteració.
La utilitat de cadascuna dues seria:
break: si una variable pren determinat valor o es compleix una determinada condició,
serveix per sortir del bucle sense acabar la seva execució i continuar amb l'execució de
lesinstruccions que es trobin fora del bucle.
continue: en aquest cas si una variable pren determinat valor o es reuneixen
determinades condicions, permet actuar com filtre modificant el comportament habitual de
les iteracions i saltant a la següent iteració.
Exemples
Break Aquesta sentència que el permeten és saltar a la iteració següent del bucle, o fins i
tot sortir del bucle per complet.
En aquest exemple el que hem creat és un bucle for amb un comptador d'1 a 10. Pero
hem col.locat un if amb la sentencia break i en el moment que el comptador és igual a 5,
sortim per complet del bucle for i no tornarem a efectuar una altra iteració. Per tant,
solament s'imprimeixen els nombres de l'1 al 4.
for (var comptador = 1; comptador<=10; comptador++) {
if (comptador == 5) break; // quant arriba a quatre surt del bucle for
document.write(comptador);
document.write("<br>");
}
La sentència continue interromp l'iteracció on es troba, donant pas a la següent accio.
En aquest exemple el que hem creat és un bucle for amb un comptador d'1 a 10.
Començara imprimint els nombres de l'1 al 4, la sentència continue s'executara en la
cinquena passada pel bucle, quan el comptador és igual a 5, la qual cosa dóna lloc al fet
que no s'imprimeixi el nombre 5. A diferència de la sentència break, no obstant això, el
bucle for prossegueix, i s'imprimeixen els nombres del 6 al 10.
for (var comptador = 1; comptador<=10; comptador++) {
if (comptador == 5) continue; //arriba a 4 executa continue i no
imprimeix el 5
document.write(comptador);
document.write("<br>");
}
adjunte documents break.html i continue.html
6. 6.- Escriu un programa en JavaScript que et demani un nombre inicial. A partir d’aquest
nombre es crearà un bucle que anirà demanat nombres sencers i s’emmagatzemaran en
una estructura del tipus array.
Quan s’introdueixi l’últim nombre, es crearà el codi JavaScript amb estructures adients per
ordenar els nombres de l’array i es mostrarà el resultat en una finestra modal.
algoritme
// demani un nombre inicial
Llegir nombreIncial();
i:=0;
mentre i < nombreInicial fer
Llegir nombreSencers()
deixar nombre a l'array
i++;
fmentre
j=0;
mentres j<nombreInicial-1 fer
i=0;
mentres i<nombreInicial-1 fer
si a(i)<a(i+1) llavors
a=a(i);
a(i)=a(i+1);
a(i+1)=a;
fsi
i++;
fmentres
fmentres
falg
7. var nombreInicial = prompt("Introdueix en valor numeric la quantitat de
nombres a introduir ","");
var nombreSencers =[];
var i=0;
while (i<parseInt(nombreInicial) )
{
nombreSencers[i] = prompt ("nombre enter");
i=i+1;
}
document.write(nombreSencers);
//document.write(nombreSencers).lengh;
// ordenar l'array mmitgant un metode de “ordenamiento por seleccion”
var j=0;
var a=0;
// mentres la j que compararar el 1er amb 2 on valor de l'[array]
while (j<parseInt(nombreInicial) -1) {
i=0;
while (i<parseInt(nombreInicial) -1) {
if
(parseInt(nombreSencers[i])<parseInt(nombreSencers[i+1])){
a=nombreSencers[i];
nombreSencers[i]=nombreSencers[i+1];
nombreSencers[i+1]=a;
}
i++;
}
j++;
}
document.write("<br>");
document.write(nombreSencers);
8. Adjunte Exercici 6
Criteris de correcció
Els cinc primers exercicis s’avaluen si l’estudiant demostra en pròpies paraules que entén
clarament els conceptes plantejats. No s’avaluarà el 100% si l’estudiant simplement
transcriu allò que s’explica als apunts.
Caldrà lliurar els fitxers HTML i JS de tots els exercicis que requereixin codi, de no fer-ho
repercutirà en una penalització en la nota.
L’exercici 6 s'avaluarà tenint en compte els següents punts:
o La resolució utilitza adequadament els conceptes explicats a l’assignatura (30%)
o L'exercici fa el que es demana (30%)
o El codi és clar, ordenat (30%)
o Hi ha comentaris concisos i que expliquin clarament el que s'està fent. (10%)