SlideShare a Scribd company logo
1 of 8
Download to read offline
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.- 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
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.- 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.- 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.- 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
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);
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%)

More Related Content

Viewers also liked (20)

Disseny Gràfic_Pac1
Disseny Gràfic_Pac1Disseny Gràfic_Pac1
Disseny Gràfic_Pac1
 
animació_Practica1
animació_Practica1 animació_Practica1
animació_Practica1
 
Evaluation question 1 redone
Evaluation question 1 redoneEvaluation question 1 redone
Evaluation question 1 redone
 
Grafics3D_PAC1
Grafics3D_PAC1Grafics3D_PAC1
Grafics3D_PAC1
 
Resum video 2part
Resum video 2partResum video 2part
Resum video 2part
 
Camera diagrams
Camera diagramsCamera diagrams
Camera diagrams
 
DBBDD_pac2
DBBDD_pac2DBBDD_pac2
DBBDD_pac2
 
CT-3215
CT-3215CT-3215
CT-3215
 
Technologies used question 4 redone
Technologies used   question 4 redoneTechnologies used   question 4 redone
Technologies used question 4 redone
 
gestpro_pac2
gestpro_pac2gestpro_pac2
gestpro_pac2
 
ADG_pac4
ADG_pac4ADG_pac4
ADG_pac4
 
OPN-ECCH-02-000017
OPN-ECCH-02-000017OPN-ECCH-02-000017
OPN-ECCH-02-000017
 
Main magazine and digipak pitch
Main   magazine and digipak pitchMain   magazine and digipak pitch
Main magazine and digipak pitch
 
TITTR Zika Virus
TITTR Zika VirusTITTR Zika Virus
TITTR Zika Virus
 
Technologies used question 4 redone
Technologies used   question 4 redoneTechnologies used   question 4 redone
Technologies used question 4 redone
 
animació_pac3
animació_pac3animació_pac3
animació_pac3
 
Audience feedback final draft
Audience feedback final draftAudience feedback final draft
Audience feedback final draft
 
Aplicacions Interactives multiplataforma_pac3
Aplicacions Interactives multiplataforma_pac3Aplicacions Interactives multiplataforma_pac3
Aplicacions Interactives multiplataforma_pac3
 
Prog_pac2
Prog_pac2Prog_pac2
Prog_pac2
 
Editing screenshots
Editing screenshotsEditing screenshots
Editing screenshots
 

Similar to PW_pac1

Programació - Pràctica1 - Lidia Bria
Programació - Pràctica1 - Lidia BriaProgramació - Pràctica1 - Lidia Bria
Programació - Pràctica1 - Lidia BriaLidia Bria
 
Programació - Pac3 - Lidia Bria
Programació - Pac3 - Lidia BriaProgramació - Pac3 - Lidia Bria
Programació - Pac3 - Lidia BriaLidia Bria
 
Programació - Pac3 - Solució - Lídia Bria
Programació - Pac3 - Solució - Lídia BriaProgramació - Pac3 - Solució - Lídia Bria
Programació - Pac3 - Solució - Lídia BriaLidia Bria
 
Programació - Pràctica 1 correcció - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 1 correcció - Multimedia (UOC) - Paquita RibasProgramació - Pràctica 1 correcció - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 1 correcció - Multimedia (UOC) - Paquita RibasPaquita Ribas
 
Programació - Pràctica 2 correcció - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 2 correcció - Multimedia (UOC) - Paquita RibasProgramació - Pràctica 2 correcció - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 2 correcció - Multimedia (UOC) - Paquita RibasPaquita Ribas
 
Guia d'estils jordi
Guia d'estils jordiGuia d'estils jordi
Guia d'estils jordiLa Salle
 
| programacion | PRACTICA 2 - Madel Ortiz
| programacion | PRACTICA 2 - Madel Ortiz| programacion | PRACTICA 2 - Madel Ortiz
| programacion | PRACTICA 2 - Madel OrtizArdillita Trepadora
 
Programació - Pràctica 1 - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 1 - Multimedia (UOC) - Paquita RibasProgramació - Pràctica 1 - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 1 - Multimedia (UOC) - Paquita RibasPaquita Ribas
 
Programació - Pac1 - Lidia Bria
Programació - Pac1 - Lidia BriaProgramació - Pac1 - Lidia Bria
Programació - Pac1 - Lidia BriaLidia Bria
 
Programació - Pràctica 2 - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 2 - Multimedia (UOC) - Paquita RibasProgramació - Pràctica 2 - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 2 - Multimedia (UOC) - Paquita RibasPaquita Ribas
 
Operacions combinades
Operacions combinadesOperacions combinades
Operacions combinadesceedukat
 
Programació - PAC 1 correcció - Multimèdia (UOC) - Paquita Ribas
Programació - PAC 1 correcció - Multimèdia (UOC) - Paquita RibasProgramació - PAC 1 correcció - Multimèdia (UOC) - Paquita Ribas
Programació - PAC 1 correcció - Multimèdia (UOC) - Paquita RibasPaquita Ribas
 
Programació - PAC 1 - Multimedia (UOC) - Paquita Ribas
Programació - PAC 1 - Multimedia (UOC) - Paquita RibasProgramació - PAC 1 - Multimedia (UOC) - Paquita Ribas
Programació - PAC 1 - Multimedia (UOC) - Paquita RibasPaquita Ribas
 
Programació - Pràctica 2 - Lidia Bria
Programació - Pràctica 2 - Lidia BriaProgramació - Pràctica 2 - Lidia Bria
Programació - Pràctica 2 - Lidia BriaLidia Bria
 

Similar to PW_pac1 (20)

Prog_pac3
Prog_pac3Prog_pac3
Prog_pac3
 
Programació - Pràctica1 - Lidia Bria
Programació - Pràctica1 - Lidia BriaProgramació - Pràctica1 - Lidia Bria
Programació - Pràctica1 - Lidia Bria
 
Prog_pac1
Prog_pac1Prog_pac1
Prog_pac1
 
Programació - Pac3 - Lidia Bria
Programació - Pac3 - Lidia BriaProgramació - Pac3 - Lidia Bria
Programació - Pac3 - Lidia Bria
 
Prog_prac1
Prog_prac1Prog_prac1
Prog_prac1
 
Programació - Pac3 - Solució - Lídia Bria
Programació - Pac3 - Solució - Lídia BriaProgramació - Pac3 - Solució - Lídia Bria
Programació - Pac3 - Solució - Lídia Bria
 
Programació - Pràctica 1 correcció - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 1 correcció - Multimedia (UOC) - Paquita RibasProgramació - Pràctica 1 correcció - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 1 correcció - Multimedia (UOC) - Paquita Ribas
 
Prog_prac2
Prog_prac2Prog_prac2
Prog_prac2
 
Programació - Pràctica 2 correcció - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 2 correcció - Multimedia (UOC) - Paquita RibasProgramació - Pràctica 2 correcció - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 2 correcció - Multimedia (UOC) - Paquita Ribas
 
Guia d'estils jordi
Guia d'estils jordiGuia d'estils jordi
Guia d'estils jordi
 
| programacion | PRACTICA 2 - Madel Ortiz
| programacion | PRACTICA 2 - Madel Ortiz| programacion | PRACTICA 2 - Madel Ortiz
| programacion | PRACTICA 2 - Madel Ortiz
 
Programació - Pràctica 1 - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 1 - Multimedia (UOC) - Paquita RibasProgramació - Pràctica 1 - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 1 - Multimedia (UOC) - Paquita Ribas
 
Programació - Pac1 - Lidia Bria
Programació - Pac1 - Lidia BriaProgramació - Pac1 - Lidia Bria
Programació - Pac1 - Lidia Bria
 
Programació - Pràctica 2 - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 2 - Multimedia (UOC) - Paquita RibasProgramació - Pràctica 2 - Multimedia (UOC) - Paquita Ribas
Programació - Pràctica 2 - Multimedia (UOC) - Paquita Ribas
 
Operacions combinades
Operacions combinadesOperacions combinades
Operacions combinades
 
Programació - PAC 1 correcció - Multimèdia (UOC) - Paquita Ribas
Programació - PAC 1 correcció - Multimèdia (UOC) - Paquita RibasProgramació - PAC 1 correcció - Multimèdia (UOC) - Paquita Ribas
Programació - PAC 1 correcció - Multimèdia (UOC) - Paquita Ribas
 
Sync toasync
Sync toasyncSync toasync
Sync toasync
 
Programació - PAC 1 - Multimedia (UOC) - Paquita Ribas
Programació - PAC 1 - Multimedia (UOC) - Paquita RibasProgramació - PAC 1 - Multimedia (UOC) - Paquita Ribas
Programació - PAC 1 - Multimedia (UOC) - Paquita Ribas
 
| PROGRAMACIO | Pract2 solucio
| PROGRAMACIO | Pract2 solucio | PROGRAMACIO | Pract2 solucio
| PROGRAMACIO | Pract2 solucio
 
Programació - Pràctica 2 - Lidia Bria
Programació - Pràctica 2 - Lidia BriaProgramació - Pràctica 2 - Lidia Bria
Programació - Pràctica 2 - Lidia Bria
 

More from Marcos Baldovi

Comportament d'Usuaris Marcos baldovi Prova Sintesis 2018
Comportament d'Usuaris Marcos baldovi Prova Sintesis 2018Comportament d'Usuaris Marcos baldovi Prova Sintesis 2018
Comportament d'Usuaris Marcos baldovi Prova Sintesis 2018Marcos Baldovi
 
Comportament d'Usuaris Marcos baldovi Resum Researching UX
Comportament d'Usuaris Marcos baldovi Resum Researching UXComportament d'Usuaris Marcos baldovi Resum Researching UX
Comportament d'Usuaris Marcos baldovi Resum Researching UXMarcos Baldovi
 
Comportament d'Usuaris Marcos baldovi Practica 1
Comportament d'Usuaris Marcos baldovi Practica 1Comportament d'Usuaris Marcos baldovi Practica 1
Comportament d'Usuaris Marcos baldovi Practica 1Marcos Baldovi
 
Comportament d'Usuaris Marcos baldovi PAC2
Comportament d'Usuaris Marcos baldovi PAC2Comportament d'Usuaris Marcos baldovi PAC2
Comportament d'Usuaris Marcos baldovi PAC2Marcos Baldovi
 
Comportament d'Usuaris Marcos baldovi PAC1
Comportament d'Usuaris Marcos baldovi PAC1Comportament d'Usuaris Marcos baldovi PAC1
Comportament d'Usuaris Marcos baldovi PAC1Marcos Baldovi
 
Fotografia Digital Marcos baldovi Prova Sintesis
Fotografia Digital Marcos baldovi Prova SintesisFotografia Digital Marcos baldovi Prova Sintesis
Fotografia Digital Marcos baldovi Prova SintesisMarcos Baldovi
 
Fotografia Digital Marcos baldovi practica 2
Fotografia Digital Marcos baldovi practica 2Fotografia Digital Marcos baldovi practica 2
Fotografia Digital Marcos baldovi practica 2Marcos Baldovi
 
Fotografia Digital Marcos baldovi practica 1
Fotografia Digital Marcos baldovi practica 1Fotografia Digital Marcos baldovi practica 1
Fotografia Digital Marcos baldovi practica 1Marcos Baldovi
 
Fotografia Digital Marcos baldovi pac3
Fotografia Digital Marcos baldovi pac3Fotografia Digital Marcos baldovi pac3
Fotografia Digital Marcos baldovi pac3Marcos Baldovi
 
Fotografia Digital Marcos baldovi pac2
Fotografia Digital Marcos baldovi pac2Fotografia Digital Marcos baldovi pac2
Fotografia Digital Marcos baldovi pac2Marcos Baldovi
 
Fotografia Digital Marcos baldovi pac1
Fotografia Digital Marcos baldovi pac1Fotografia Digital Marcos baldovi pac1
Fotografia Digital Marcos baldovi pac1Marcos Baldovi
 
Mercat i Legislació Marcos baldovi PAC4
Mercat i Legislació Marcos baldovi PAC4Mercat i Legislació Marcos baldovi PAC4
Mercat i Legislació Marcos baldovi PAC4Marcos Baldovi
 
Mercat i Legislació Marcos baldovi PAC3
Mercat i Legislació Marcos baldovi PAC3Mercat i Legislació Marcos baldovi PAC3
Mercat i Legislació Marcos baldovi PAC3Marcos Baldovi
 
Mercat i Legislació Marcos baldovi PAC2
Mercat i Legislació Marcos baldovi PAC2Mercat i Legislació Marcos baldovi PAC2
Mercat i Legislació Marcos baldovi PAC2Marcos Baldovi
 
Marcos Baldoví Disseny D'interacció Practica FInal
Marcos Baldoví Disseny D'interacció Practica FInalMarcos Baldoví Disseny D'interacció Practica FInal
Marcos Baldoví Disseny D'interacció Practica FInalMarcos Baldovi
 
Marcos Baldoví Disseny D'interacció PAC2
Marcos Baldoví Disseny D'interacció PAC2Marcos Baldoví Disseny D'interacció PAC2
Marcos Baldoví Disseny D'interacció PAC2Marcos Baldovi
 
Marcos Baldoví Disseny D'interacció PAC1
Marcos Baldoví Disseny D'interacció PAC1Marcos Baldoví Disseny D'interacció PAC1
Marcos Baldoví Disseny D'interacció PAC1Marcos Baldovi
 
Metodología i Desenvolupament de Projectes en Xarxa PRACTICA
Metodología i Desenvolupament de Projectes en Xarxa PRACTICAMetodología i Desenvolupament de Projectes en Xarxa PRACTICA
Metodología i Desenvolupament de Projectes en Xarxa PRACTICAMarcos Baldovi
 
Metodología i Desenvolupament de Projectes en Xarxa PAC3
Metodología i Desenvolupament de Projectes en Xarxa PAC3Metodología i Desenvolupament de Projectes en Xarxa PAC3
Metodología i Desenvolupament de Projectes en Xarxa PAC3Marcos Baldovi
 
Metodología i Desenvolupament de Projectes en Xarxa PAC 2
Metodología i Desenvolupament de Projectes en Xarxa PAC 2Metodología i Desenvolupament de Projectes en Xarxa PAC 2
Metodología i Desenvolupament de Projectes en Xarxa PAC 2Marcos Baldovi
 

More from Marcos Baldovi (20)

Comportament d'Usuaris Marcos baldovi Prova Sintesis 2018
Comportament d'Usuaris Marcos baldovi Prova Sintesis 2018Comportament d'Usuaris Marcos baldovi Prova Sintesis 2018
Comportament d'Usuaris Marcos baldovi Prova Sintesis 2018
 
Comportament d'Usuaris Marcos baldovi Resum Researching UX
Comportament d'Usuaris Marcos baldovi Resum Researching UXComportament d'Usuaris Marcos baldovi Resum Researching UX
Comportament d'Usuaris Marcos baldovi Resum Researching UX
 
Comportament d'Usuaris Marcos baldovi Practica 1
Comportament d'Usuaris Marcos baldovi Practica 1Comportament d'Usuaris Marcos baldovi Practica 1
Comportament d'Usuaris Marcos baldovi Practica 1
 
Comportament d'Usuaris Marcos baldovi PAC2
Comportament d'Usuaris Marcos baldovi PAC2Comportament d'Usuaris Marcos baldovi PAC2
Comportament d'Usuaris Marcos baldovi PAC2
 
Comportament d'Usuaris Marcos baldovi PAC1
Comportament d'Usuaris Marcos baldovi PAC1Comportament d'Usuaris Marcos baldovi PAC1
Comportament d'Usuaris Marcos baldovi PAC1
 
Fotografia Digital Marcos baldovi Prova Sintesis
Fotografia Digital Marcos baldovi Prova SintesisFotografia Digital Marcos baldovi Prova Sintesis
Fotografia Digital Marcos baldovi Prova Sintesis
 
Fotografia Digital Marcos baldovi practica 2
Fotografia Digital Marcos baldovi practica 2Fotografia Digital Marcos baldovi practica 2
Fotografia Digital Marcos baldovi practica 2
 
Fotografia Digital Marcos baldovi practica 1
Fotografia Digital Marcos baldovi practica 1Fotografia Digital Marcos baldovi practica 1
Fotografia Digital Marcos baldovi practica 1
 
Fotografia Digital Marcos baldovi pac3
Fotografia Digital Marcos baldovi pac3Fotografia Digital Marcos baldovi pac3
Fotografia Digital Marcos baldovi pac3
 
Fotografia Digital Marcos baldovi pac2
Fotografia Digital Marcos baldovi pac2Fotografia Digital Marcos baldovi pac2
Fotografia Digital Marcos baldovi pac2
 
Fotografia Digital Marcos baldovi pac1
Fotografia Digital Marcos baldovi pac1Fotografia Digital Marcos baldovi pac1
Fotografia Digital Marcos baldovi pac1
 
Mercat i Legislació Marcos baldovi PAC4
Mercat i Legislació Marcos baldovi PAC4Mercat i Legislació Marcos baldovi PAC4
Mercat i Legislació Marcos baldovi PAC4
 
Mercat i Legislació Marcos baldovi PAC3
Mercat i Legislació Marcos baldovi PAC3Mercat i Legislació Marcos baldovi PAC3
Mercat i Legislació Marcos baldovi PAC3
 
Mercat i Legislació Marcos baldovi PAC2
Mercat i Legislació Marcos baldovi PAC2Mercat i Legislació Marcos baldovi PAC2
Mercat i Legislació Marcos baldovi PAC2
 
Marcos Baldoví Disseny D'interacció Practica FInal
Marcos Baldoví Disseny D'interacció Practica FInalMarcos Baldoví Disseny D'interacció Practica FInal
Marcos Baldoví Disseny D'interacció Practica FInal
 
Marcos Baldoví Disseny D'interacció PAC2
Marcos Baldoví Disseny D'interacció PAC2Marcos Baldoví Disseny D'interacció PAC2
Marcos Baldoví Disseny D'interacció PAC2
 
Marcos Baldoví Disseny D'interacció PAC1
Marcos Baldoví Disseny D'interacció PAC1Marcos Baldoví Disseny D'interacció PAC1
Marcos Baldoví Disseny D'interacció PAC1
 
Metodología i Desenvolupament de Projectes en Xarxa PRACTICA
Metodología i Desenvolupament de Projectes en Xarxa PRACTICAMetodología i Desenvolupament de Projectes en Xarxa PRACTICA
Metodología i Desenvolupament de Projectes en Xarxa PRACTICA
 
Metodología i Desenvolupament de Projectes en Xarxa PAC3
Metodología i Desenvolupament de Projectes en Xarxa PAC3Metodología i Desenvolupament de Projectes en Xarxa PAC3
Metodología i Desenvolupament de Projectes en Xarxa PAC3
 
Metodología i Desenvolupament de Projectes en Xarxa PAC 2
Metodología i Desenvolupament de Projectes en Xarxa PAC 2Metodología i Desenvolupament de Projectes en Xarxa PAC 2
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%)