Al hacer una página interactiva con javascript necesitaremos establecer condiciones o decisiones, donde buscamos que el navegador realice una acción A si se cumple una condición o una acción B si no se cumple. Este es el primer tipo de estructuras de control que contraremos. Pero existen varias estructuras de control:
| Estructura de control | Descripción |
|---|---|
if |
Condición simple: si ocurre esto, haz lo siguiente… |
if/else |
Condición alternativa: si ocurre esto, haz esto, sino, haz esto… |
?: |
Operador ternario: equivalente al if/else, pero en formato abreviado. |
switch |
Estructura para casos específicos similar a varios if/else anidados. |
Quizás, el mecanismo más conocido es la sentencia if, con ella podemos evaluar una condición y decirle a nuestro programa que si se cumple la condición que definamos entre los paréntesis () si el resultado sea verdadero (true), ejecuta un bloque de código. Por ejemplo observemos el siguiente diagrama de flujo:
---
title: "SÍMBOLOS DE DIAGRAMA DE FLUJO"
---
graph LR
subgraph SIM[ ]
nodo_inicio_final(["INICIO / FINAL"])
nodo_entrada_salida[/ENTRADA / SALIDA/]
nodo_condicion{"DECISIÓN"}
nodo_accion["PROCESO"]
end
linkStyle default stroke: #f2f5a6
classDef default fill:#191919,stroke:#f2f5a6,stroke-width:1px,color:#ccc
---
title: "DIAGRAMA DE FLUJO: SENTENCIA IF"
---
graph LR
direction LR
inicio([Inicio])
inicio-->condicion{"CONDICIÓN"}
condicion-->|Si| bloqueA[BLOQUE]
bloqueA-->fin([fin])
condicion-->fin
linkStyle default stroke: #f2f5a6
classDef default fill:#191919,stroke:#f2f5a6,stroke-width:1px,color:#ccc
Como vimos en el diagrama de flujo, gracias a las estructuras de control, podemos cambiar el flujo de ejecución de un programa.
Ahora pasemos a los ejemplos, poniendo en practica lo anterior. Comencemos con un caso sencillo, digamos que queremos crear un programa para que un usuario pueda introducir un número y luego evaluar si respectivo número es positivo, de ser cierto vamos a mostrar un mensaje corroborando que el número es positivo:
---
title: "DIAGRAMA DE FLUJO: ES POSITIVO?"
---
graph LR
inicio([Inicio])
inicio-->id2[/numero/]
id2-->condicion{"numero > 0"}
condicion-->|Si| true[numero, 'es positivo']
condicion-->fin([fin])
true-->fin
linkStyle default stroke: #f2f5a6
classDef default fill:#191919,stroke:#f2f5a6,stroke-width:1px,color:#ccc
Ahora llevemos el caso anterior al código en javascript, podemos pegar el código directamente en la consola con clic derecho > inspeccionar o Ctrl + Shift + J:
1
2
3
4
5
var numero = parseInt(prompt("Introduce un número:"));
if (numero > 0) {
alert("El número es positivo");
}
Ahora hagamos lo mismo pero mostrando el resultado en un documento HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Probando IF en JS</title>
</head>
<body>
<h1>El número es: <span id="resultado">sin resolver</span></h1>
<script>
let resultado = document.getElementById("resultado");
var numero = parseInt(prompt("Introduce un número:"));
if (numero > 0) {
resultado.textContent ="Positivo";
}
</script>
</body>
</html>
Se puede dar el caso que queramos una alternativa a una condición. Para ello utilizaremos el if seguido de un else. Con esto podemos establecer una acción A si se cumple la condición y una acción B si no se cumple.
Para comenzar con un ejemplo muy simple como saber si un número es par o impar. Tal como lo muestra el siguiente diagrama:
---
title: "DIAGRAMA DE FLUJO: ES PAR?"
---
graph LR
inicio([Inicio])
inicio-->id2[/numero/]
id2-->condicion{"numero MOD 2 = 0"}
condicion-->|Si| true[numero, 'es par']
condicion-->|No| false[numero, 'es impar']
true-->fin([fin])
false-->fin([fin])
linkStyle default stroke: #f2f5a6
classDef default fill:#191919,stroke:#f2f5a6,stroke-width:1px,color:#ccc
1
2
3
4
5
6
7
8
9
10
var numero = parseInt(prompt("Introduce un número:"));
// Condición
if (numero % 2 === 0) {
// Acción A (número es es divisible por 2)
alert(numero + " es par");
} else {
// Acción B: Cualquier otro caso a A (número no es divisible por 2)
alert(numero + " es impar");
}
El operador ternario es una alternativa de un condicional if/else de una forma mucho más corta y, en muchos casos más legible. Vamos a reescribir el ejemplo anterior (comprobar si un número es par) utilizando este operador:
1
2
3
4
var numero = parseInt(prompt("Introduce un número:"));
// Condición Acción A Acción B
numero % 2 === 0 ? alert(numero + " es par") : alert(numero + " es impar");
La estructura de control switch permite definir casos específicos a realizar en el caso de que la variable expuesta como condición sea igual a los valores que se indican mediante los case casos, veamos el diagrama de flujo:
---
title: "DIAGRAMA DE FLUJO: SWITCH / CASE"
---
graph TD
inicio([Inicio])
inicio-->condicion{"valor expresión"}
condicion-->caso1{"caso 1"}
condicion-->caso2{"caso 2"}
condicion-->caso3{"caso 3"}
condicion-->otrocaso{"otro caso"}
caso1-->instruccion1[instrucciones caso 1]-->fin
caso2-->instruccion2[instrucciones caso 2]-->fin
caso3-->instruccion3[instrucciones caso 3]-->fin
otrocaso-->instruccionotro[instrucciones otro caso]-->fin
fin([Fín])
linkStyle default stroke: #f2f5a6
classDef default fill:#191919,stroke:#f2f5a6,stroke-width:1px,color:#ccc
En el caso de los if nos permite utilizar operadores de comparación donde podemos definir rangos con mayor o menor, cosa que con el switch no se puede hacer. El switch está pensado para indicar sólo con casos con valores concretos y específicos.
Vamos a crear una calculadora básica. Este programa permitirá al usuario realizar operaciones matemáticas simples con dos números. El usuario seleccionará una operación que puede ser:
+)-)*)/)Si el símbolo de la operación ingresado es diferente a los operadores permitidos
(+, -, x, /), el programa indicará “Operación inválida”.
Utilizando un bloque switch. El programa calculará la operación seleccionada y mostrará el resultado en una ventana emergente (alert), el siguiente código lo podemos probar directo en la consola:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var operacion = prompt("¿Que operación desea realizar?:\n(+) = suma\n(-) = resta\n(*) = mutiplicación\n(/) = división");
var num1 = 0;
var num2 = 0;
var resultado = 0;
switch (operacion) {
case '+':
// realizar operación de suma
num1 = +prompt("¿Cuál es el primer número para operar?");
num2 = +prompt("¿Cuál es el segundo número para operar?");
resultado = num1 + num2;
alert("La suma de " + num1 + " y " + num2 + " es: " + resultado);
break;
case '-':
// realizar operación de resta
num1 = +prompt("¿Cuál es el primer número para operar?");
num2 = +prompt("¿Cuál es el segundo número para operar?");
resultado = num1 - num2;
alert("La resta de " + num1 + " y " + num2 + " es: " + resultado);
break;
case '*':
// realizar operación de multiplicar
num1 = +prompt("¿Cuál es el primer número para operar?");
num2 = +prompt("¿Cuál es el segundo número para operar?");
resultado = num1 * num2;
alert("La multiplicación de " + num1 + " y " + num2 + " es: " + resultado);
break;
case '/':
// realizar operación de división
num1 = +prompt("¿Cuál es el primer número para operar?");
num2 = +prompt("¿Cuál es el segundo número para operar?");
resultado = num1 / num2;
alert("La división de " + num1 + " y " + num2 + " es: " + resultado);
break;
default:
alert("Operación inválida");
break;
}