Les estructures de control serveixen per controlar l’execució d’un programa. Aquestes es construeixen mitjançant decicions lògiques muntades per operadors.

Les estructures de control són del tipus decisició única:

si (escumpleixlacondició) fes aquestatasca()
sino fes aquestaaltratasca() 

que podria decidir si un

o de decisió repetitiva:

var x=0;
repeteix mentres (x<10) {
fesoperacions
augmenta x en 1;
}

que repeteix una seqüència d’accions de manera repetida. Controlada per una condició, en el cas de l’exemple la variable x ha de ser menor que 10. La variable x augmenta a cada volta.

Podem calcular els valors amb una taula que ens mostra el valors de les variables a cada volta. Aquest sistema ens permet calcular a mà el resultat de “bucles” on podriem afegir més variables.

x	0	1	2	3	4	5	6	7	8	9	10
(x<10)	no	no	no	no	no	no	no	no	no	no	sí

Tenim per tant unes eines de control que permeten que un programa no sigui una seqüència de instruccions, per tantel programa pot decidir amb les condicions implementades.

3.1. Estructura if

És l’estructura condicional més emprada i s’empra per prendre decisions en funció d’una condició. La definició formal és:

if(condicio) {
  ...
}

Si la condició es compleix (es a dir, si el seu valor és true) se executen totes les instruccions de dins {...}. Si la condició no es compleix (valor false) no s’executa cap instrucció de dins {...} i el programa executa les següents instruccions.

exemple:

var mostrarMissatge = true;

if(mostrarMissatge) {
  alert("Hola Món");
}

L’exemple es pot escriure com:

var mostraMissatge = true;

if(mostrarMissatge == true) {
  alert("Hola Món");
}

Cal recordar que = serveix per assignar valors, == per comparar valors (o variables) i === serveix per comparar variables i tipus.

var mostraMissatge = true;

// Comparam
if(mostraMissatge == false) {
  ...
}

// Error - assignam valor false a la variable
if(mostraMissatge = false) {
  ...
}

La condició  if() pot combinar els operadors lògics:

var mostrat = false;

if(!mostrat) {
  alert("És la primera vegada que es mostra el missatge");
mostrat=true;
}

Els operadors AND y OR permeten encadenar varies condicions simples per construir condicions complexes:condiciones complejas:

var mostrat = false;
var usuariVolMissatges = true;

if(!mostrat && usuariVolMissatges) {
alert("És la primera vegada que es mostra el missatge");
mostrat=true;
}

La condició anterior sols mostraà el missatge si mostrat=fals i usuariVolMissatges=true, altrament no mostrarà cap missatge.

Exercici Combinació condicionals

Completa les condicions dels if per tal que els missatges es mostrinde manera correcte:

var numero1 = 5;
var numero2 = 8;

if(...) {
  alert("numero1 no es major que numero2");
}
if(...) {
  alert("numero2 es positiu");
}
if(...) {
  alert("numero1 es negatiu o distiferent de zero");
}

Ver solución

3.4.2. Estructura if…else

En ocasiones, las decisiones que se deben realizar no son del tipo “si se cumple la condición, hazlo; si no se cumple, no hagas nada”. Normalmente las condiciones suelen ser del tipo “si se cumple esta condición, hazlo; si no se cumple, haz esto otro”.

Para este segundo tipo de decisiones, existe una variante de la estructura if llamada if...else. Su definición formal es la siguiente:

if(condicion) {
  ...
}
else {
  ...
}

Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se encuentran dentro del if(). Si la condición no se cumple (es decir, si su valor es false) se ejecutan todas las instrucciones contenidas en else { }. Ejemplo:

var edad = 18;

if(edad >= 18) {
  alert("Eres mayor de edad");
}
else {
  alert("Todavía eres menor de edad");
}

Si el valor de la variable edad es mayor o igual que el valor numérico 18, la condición del if() se cumple y por tanto, se ejecutan sus instrucciones y se muestra el mensaje "Eres mayor de edad". Sin embargo, cuando el valor de la variable edad no es igual o mayor que 18, la condición del if() no se cumple, por lo que automáticamente se ejecutan todas las instrucciones del bloque else { }. En este caso, se mostraría el mensaje "Todavía eres menor de edad".

El siguiente ejemplo compara variables de tipo cadena de texto:

var nombre = "";

if(nombre == "") {
  alert("Aún no nos has dicho tu nombre");
}
else {
  alert("Hemos guardado tu nombre");
}

La condición del if() anterior se construye mediante el operador ==, que es el que se emplea para comparar dos valores (no confundir con el operador = que se utiliza para asignar valores). En el ejemplo anterior, si la cadena de texto almacenada en la variable nombre es vacía (es decir, es igual a "") se muestra el mensaje definido en el if(). En otro caso, se muestra el mensaje definido en el bloque else { }.

La estructura if...else se puede encadenar para realizar varias comprobaciones seguidas:

if(edad < 12) {
  alert("Todavía eres muy pequeño");
}
else if(edad < 19) {
  alert("Eres un adolescente");
}
else if(edad < 35) {
  alert("Aun sigues siendo joven");
}
else {
  alert("Piensa en cuidarte un poco más");
}

No es obligatorio que la combinación de estructuras if...else acabe con la instrucción else, ya que puede terminar con una instrucción de tipo else if().

Ejercicio 6

El cálculo de la letra del Documento Nacional de Identidad (DNI) es un proceso matemático sencillo que se basa en obtener el resto de la división entera del número de DNI y el número 23. A partir del resto de la división, se obtiene la letra seleccionándola dentro de un array de letras.

El array de letras es:

var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];

Por tanto si el resto de la división es 0, la letra del DNI es la T y si el resto es 3 la letra es la A. Con estos datos, elaborar un pequeño script que:

1. Almacene en una variable el número de DNI indicado por el usuario y en otra variable la letra del DNI que se ha indicado. (Pista: si se quiere pedir directamente al usuario que indique su número y su letra, se puede utilizar la función prompt())
2. En primer lugar (y en una sola instrucción) se debe comprobar si el número es menor que 0 o mayor que 99999999. Si ese es el caso, se muestra un mensaje al usuario indicando que el número proporcionado no es válido y el programa no muestra más mensajes.
3. Si el número es válido, se calcula la letra que le corresponde según el método explicado anteriormente.
4. Una vez calculada la letra, se debe comparar con la letra indicada por el usuario. Si no coinciden, se muestra un mensaje al usuario diciéndole que la letra que ha indicado no es correcta. En otro caso, se muestra un mensaje indicando que el número y la letra de DNI son correctos.

Ver solución

3.4.3. Estructura for

Las estructuras if y if...else no son muy eficientes cuando se desea ejecutar de forma repetitiva una instrucción. Por ejemplo, si se quiere mostrar un mensaje cinco veces, se podría pensar en utilizar el siguiente if:

var veces = 0;

if(veces < 4) {
  alert("Mensaje");
  veces++;
}

Se comprueba si la variable veces es menor que 4. Si se cumple, se entra dentro del if(), se muestra el mensaje y se incrementa el valor de la variable veces. Así se debería seguir ejecutando hasta mostrar el mensaje las cinco veces deseadas.

Sin embargo, el funcionamiento real del script anterior es muy diferente al deseado, ya que solamente se muestra una vez el mensaje por pantalla. La razón es que la ejecución de la estructura if() no se repite y la comprobación de la condición sólo se realiza una vez, independientemente de que dentro del if() se modifique el valor de la variable utilizada en la condición.

La estructura for permite realizar este tipo de repeticiones (también llamadas bucles) de una forma muy sencilla. No obstante, su definición formal no es tan sencilla como la de if():

for(inicializacion; condicion; actualizacion) {
  ...
}

La idea del funcionamiento de un bucle for es la siguiente: “mientras la condición indicada se siga cumpliendo, repite la ejecución de las instrucciones definidas dentro del for. Además, después de cada repetición, actualiza el valor de las variables que se utilizan en la condición”.

• La “inicialización” es la zona en la que se establece los valores iniciales de las variables que controlan la repetición.
• La “condición” es el único elemento que decide si continua o se detiene la repetición.
• La “actualización” es el nuevo valor que se asigna después de cada repetición a las variables que controlan la repetición.

var mensaje = "Hola, estoy dentro de un bucle";

for(var i = 0; i < 5; i++) {
  alert(mensaje);
}

La parte de la inicialización del bucle consiste en:

var i = 0;

Por tanto, en primer lugar se crea la variable i y se le asigna el valor de 0. Esta zona de inicialización solamente se tiene en consideración justo antes de comenzar a ejecutar el bucle. Las siguientes repeticiones no tienen en cuenta esta parte de inicialización.

La zona de condición del bucle es:

i < 5

Los bucles se siguen ejecutando mientras se cumplan las condiciones y se dejan de ejecutar justo después de comprobar que la condición no se cumple. En este caso, mientras la variable i valga menos de 5 el bucle se ejecuta indefinidamente.

Como la variable i se ha inicializado a un valor de 0 y la condición para salir del bucle es que i sea menor que 5, si no se modifica el valor de i de alguna forma, el bucle se repetiría indefinidamente.

Por ese motivo, es imprescindible indicar la zona de actualización, en la que se modifica el valor de las variables que controlan el bucle:

i++

En este caso, el valor de la variable i se incrementa en una unidad después de cada repetición. La zona de actualización se ejecuta después de la ejecución de las instrucciones que incluye el for.

Así, durante la ejecución de la quinta repetición el valor de i será 4. Después de la quinta ejecución, se actualiza el valor de i, que ahora valdrá 5. Como la condición es que i sea menor que 5, la condición ya no se cumple y las instrucciones del for no se ejecutan una sexta vez.

Normalmente, la variable que controla los bucles for se llama i, ya que recuerda a la palabra índice y su nombre tan corto ahorra mucho tiempo y espacio.

El ejemplo anterior que mostraba los días de la semana contenidos en un array se puede rehacer de forma más sencilla utilizando la estructura for:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

for(var i=0; i<7; i++) {
  alert(dias[i]);
}

Ejercicio 7

El factorial de un número entero n es una operación matemática que consiste en multiplicar todos los factores n x (n-1) x (n-2) x ... x 1. Así, el factorial de 5 (escrito como 5!) es igual a: 5! = 5 x 4 x 3 x 2 x 1 = 120

Utilizando la estructura for, crear un script que calcule el factorial de un número entero.

Ver solución

3.4.4. Estructura for…in

Una estructura de control derivada de for es la estructura for...in. Su definición exacta implica el uso de objetos, que es un elemento de programación avanzada que no se va a estudiar. Por tanto, solamente se va a presentar la estructura for...in adaptada a su uso en arrays. Su definición formal adaptada a los arrays es:

for(indice in array) {
  ...
}

Si se quieren recorrer todos los elementos que forman un array, la estructura for...in es la forma más eficiente de hacerlo, como se muestra en el siguiente ejemplo:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

for(i in dias) {
  alert(dias[i]);
}

La variable que se indica como indice es la que se puede utilizar dentro del bucle for...in para acceder a los elementos del array. De esta forma, en la primera repetición del bucle la variable i vale 0 y en la última vale 6.

Esta estructura de control es la más adecuada para recorrer arrays (y objetos), ya que evita tener que indicar la inicialización y las condiciones del bucle for simple y funciona correctamente cualquiera que sea la longitud del array. De hecho, sigue funcionando igual aunque varíe el número de elementos del array.