Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.3 - Blocs de control de flux a Javascript

Índex de continguts
1. Introducció.......................................................................................................2
2. Decisions.........................................................................................................2
2.1. If-else............................................................................................................2
2.2. Condicionals niats.........................................................................................2
2.3. L’operador ?..................................................................................................3
3. Selecció múltiple: switch..................................................................................3
4. Bucles..............................................................................................................4
4.1. Bucle for........................................................................................................4
4.2. Bucle while....................................................................................................5
4.3. Bucle do-while...............................................................................................6
5. Aturament d’un bucle: instruccions break i continue.......................................6
6. Per saber-ne més............................................................................................7

Pàgina 1 de 7
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.3 - Blocs de control de flux a Javascript

1. Introducció.
JavaScript ofereix diferents possibilitats per trencar l'estructura lineal i seqüencial de
l'execució de les línies de instruccions. Amb ajuda de les ramificacions es poden comprovar
determinades condicions i, d'aquesta manera, executar unes o altres ordres. Els bucles ens
permetran repetir un conjunt d'instruccions fins que es compleixi una condició concreta..

2. Decisions.

2.1. If-else.

La instrucció if és permet l'execució d'un bloc o un altre d'ús en funció d'una condició.

if (condició)
{
bloc d'instruccions que s'executen si la condició es compleix
}
else
{
bloc d'instruccions que s'executen si la condició no es compleix
{

Les claus només s'han d'utilitzar quan hi hagi diverses instruccions seguides
pertanyents a la ramificació. Pot existir una instrucció if que no contingui la part else. En aquest
cas, es execució estarien una sèrie d'ordres si es compleix la condició i si això no és així, es
continuaria amb les ordres que estan a continuació del bloc if.

if (condició)
{
bloc d'instruccions que s'executen si la condició es compleix
}

Exemple1:
Comprovar que la variable nom conté el valor Albert:
if(nom == ”Albert”) alert(“El nom és Albert”);
else alert (“El nom no és Albert”);
Exemple2:
Comprovar que la variable nom no conté el valor Albert:
if(nom != ”Albert”) alert(“El nom no és Albert”);
else alert (“El nom és Albert”);

2.2. Condicionals niats.

Per a les condicions ramificades més complicades, sovint s'utilitzen les ramificacions
niades. En elles es defineixen consultes if dins d'altres consultes if.

Pàgina 2 de 7
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.3 - Blocs de control de flux a Javascript

Exemple1:
Comparar el nombre d’habitants de dues poblacions:
if(habitantsCiutat1 > habitantsCiutat1)
{
alert(“La ciutat ”+nomCiutat1+” té més habitants que la ciutat
“+nomCiutat2);
}
else
{
if (habitantsCiutat1 < habitantsCiutat1)
{
alert(“La ciutat ”+nomCiutat2+” té més habitants que la
ciutat “+nomCiutat1);
}
else
{
alert(“Les ciutats ”+nomCiutat2+” y “+nomCiutat1+” tenen
el mateix nombre d’habitants.”);
}
}

2.3. L’operador ?.

La construcció ? es coneix també com a operador condicional. L'avantatge d’aquest

operador és que permet comprovar dos valors diferents prenent com a base una condició.

Sintaxis:

(condición) ? verdadero:falso;
La condició pot ser una expressió o qualsevol valor boolean. Sobre la base del resultat
s'executarà a continuació o bé la instrucció continguda en veritable (true) o la continguda en
fals (false).

Exemple:
(avui == “divendres”) ? alert (“És divendres”) : alert (“No és divendres”);
Aquesta estructura permet assignar diferents valors a les variables en funció de una
condició.

3. Selecció múltiple: switch.

En la instrucció switch es calcula l'expressió indicada en ella i, segons el resultat,

s'executa una instrucció determinada dins del grup de comandes.

Sintaxis:
switch (variable)
{
case valor1:

Pàgina 3 de 7
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.3 - Blocs de control de flux a Javascript
instrucciones1.1;
…
instrucciones1.n;
break;
case valor2:
instrucciones2.1;
…
instrucciones2.n;
break;
…
default:
instrucciónI.1:
…
instrucciónI.n
break;
}

Amb aquesta estructura es pot evitar l'ús d'instruccions if niades. Primer es comprova
un valor per veure si concorda amb els blocs case, i si l'equivalència és positiva s'executa la
instrucció corresponent. Si el valor no concorda, la instrucció s'executa en la part default, el
que correspon a la branca else d'una consulta if-else. Aquest últim bloc és opcional.

Exemple:
switch (nom)
{
case “Alberto”:
alert (“Hola “+nom);
alert (“T’estava esperant”);
break;
case “Carmen”:
alert (nom+ “ l’Alberto no ha arribat encara”);
break;
default:
alert (“¿quién eres tu?”);
break;
}

4. Bucles.
Molts cops és necessari que un grup d'ordres es repeteixi diversos cops fins que es
compleixin unes determinades condicions. De realitzar aquest tipus de seqüència d'execució
s'utilitzen unes estructures anomenades bucles.

4.1. Bucle for.

Quan l'execució d'un programa arriba a un bucle for, el primer que fa és executar la
Inicialització de l'índex i després analitza la condició de prova, si aquesta es compleix

Pàgina 4 de 7
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.3 - Blocs de control de flux a Javascript
s'executen les instruccions que conté el bucle, al arribar al final del bucle es realitza la
Modificació de l'índex i, de nou, s'analitza la condició de prova, si aquesta se segueix complint
s'executen les instruccions del bucle i així, successivament, fins que la condició de prova no es
compleixi, llavors, s'executen les instruccions que estan després del bucle.

Sintaxis:
for (Inicialització índex; Condició de prova; Modificació índex)
{
…instruccions…
}

Exemple1:
Escriure un nombre de cops determinat un text en la pàgina web:
for (i=0; i<15; i++)
{
document.write (“<BR>El bucle for s’utilitza en JavaScript”);
}
Exemple2:
Escriure els 60 primers nombres pars:
for (i=0; i<30; i+=2)
{
document.write (“<BR>El nombre es:” + i*2);
}

Exemple3:
Escriure els 60 primers nombres pars inversament:
for (i=30; i<=0; i-=2)
{
document.write (“<BR>El nombre es:” + i*2);
}

4.2. Bucle while.

Amb el bucle while es poden executar un grup d'instruccions mentre es compleixi una
condició determinada. Si la condició mai es compleix, llavors tampoc s'executa cap instrucció.
Si la condició es compleix sempre, ens veurem immersos en el problema dels bucles infinits,
que poden arribar a col·lapsar el navegador, o fins i tot l'ordinador. Per aquesta raó és molt
important que la condició deixi de complir-se en algun moment.

Sintaxis:
while (Condició)
{
…instruccions…
}

Exemple1:
Escriure els 60 primers nombres pars:
i=2;
While (i<30)

Pàgina 5 de 7
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.3 - Blocs de control de flux a Javascript
{
document.write (“<BR>El nombre es:” + i*2);
i++;
}
Exemple2:
Preguntar per una clau fins que sigui correcte:
clauAux=””;
while (clauAux != "anonim")
{
clauAux=prompt("Introdueix la clau ","anonim");
}
document.write ("Has encertat la clau");

4.3. Bucle do-while.

La diferència del bucle do-while davant del bucle while resideix en el moment en què
es comprova la condició: el bucle do-while no la comprova fins al final, és a dir, després del
cos del bucle, el que significa que el bucle do-while es recorrerà, una vegada, com a mínim,
encara que no es compleixi la condició.

Sintaxis:
do
{
…instruccions…
}
while (Condició)

Aquesta ordre va ser introduïda en les versions JavaScript 1.2. Això significa que els
programes que contenen aquest bucle només funcionen amb els navegadors de quarta
generació o superiors de Netscape i Microsoft.

Exemple1:
Preguntar per una clau fins que sigui correcte:
clauAux=””;
do
{
clauAux=prompt("Introdueix la clau ","anonim");
}
while (clauAux != "anonim")
document.write ("Has encertat la clau");

5. Aturament d’un bucle: instruccions break i continue.

En els bucles for i while es poden utilitzar les instruccions break i continue per a
modificar el comportament del bucle. La instrucció break dins d'un bucle fa que aquest
s'interrompi immediatament, encara que no s'hagi executat encara el bucle complet. En arribar
la instrucció, el programa se segueix desenvolupant immediatament a continuació del bucle.

Pàgina 6 de 7
Curs 2017-2018 M06 – Desenvolupament Web En Entorn Client

UF1.- Sintaxi del llenguatge. Objectes predefinits del llenguatge

NF1 A1.3 - Blocs de control de flux a Javascript

Exemple1:
Preguntar per una clau i permetre 3 respostes possibles:
var auxClau=””, numCops=0;

// Mentres no introdueixi la clau i no es pulsi cancelar

while (auxClau!= "anonim")
{
auxclave=prompt("Introdueix la clau ","");
numCops ++;
if (numveces == 3) break;
}

if (auxClau = =”anonimo”) document.write(“La clau és correcta”);

else document.write(“La clau no és correcta”);

L'efecte que té la instrucció continue en un bucle és el de fer retornar a la seqüència

d'execució a la capçalera del bucle, tornant a executar la condició o incrementar els índexs
quan sigui un bucle for. Això permet saltar recorreguts del bucle.

Exemple2:
Presentar tots els nombres parells del 0 al 50 excepte els que siguin múltiples de 3

for (i=2;i<=50;i+=2)
{
if ((i%3)= =0) continue;
document.write("<br>"+i)
}

6. Per saber-ne més.

- “JavaScript: the definitive guide.”. Autor: David Flanagan. Publicat per: O’Reilly
Media, Inc.

Pàgina 7 de 7