Sección 1: JavaScript

Lección 8: Flujo de control

En esta lección vamos a hablar acerca de algo llamado flujo de control. Hasta ahora hemos estado haciendo esto:

Nuestros programas eran una secuencia de sentencias que se ejecutan en una sola línea. ¿Qué sucedería si agregáramos condiciones?

Por ejemplo, si quisiéramos saludar a un usuario en particular, diciendo “Hola Juan”, en caso de que su nombre sea Juan, y diciéndole “Hola desconocido” en caso de su nombre no fuera “Juan”.

Esto es lo que se conoce como condición dentro de la ejecución. En algún punto de nuestro programa tenemos una condición, y de acuerdo a si se cumple o no, tomaremos una de dos rutas posibles.

En esta lección estudiaremos sobre condiciones y cómo trabajar con ellas dentro de nuestros programas.

Vamos a comenzar viendo con la sentencia if. Por ejemplo definamos en la primera línea de nuestro programa una variable llamada nombre y asignemos a ella el valor ingresado por un usuario a través de un prompt.

var nombre = prompt(“Por favor ingrese su nombre”);

Presionemos nuevamente las teclas Shift y Enter y escribamos la siguiente sentencia:

alert(“Hola Juan”);

Presionamos las teclas Shift y Enter e ingresamos la siguiente línea:

}

Ahora vamos a presionar Enter para ejecutar todas las sentencias.

Probemos ingresar Juan.

Veremos que nos aparecerá el mensaje Hola Juan.

Ahora probemos ingresar un texto diferente.

Vemos que al ejecutar no obtenemos una ventana con un mensaje. En su lugar obtenemos undefined. ¿Por qué ocurre esto? Así son las sentencias condicionales. La palabra if traducida al español significa “si”, y lo que se define a continuación entre paréntesis es una condición.

Por lo tanto se pregunta si ocurre la condición, o dicho de otra manera, si la condición se cumple, se llevarán a cabo todas aquellas sentencias que se encuentran entre las dos llaves. Por lo tanto, podemos interpretar nuestro ejemplo de la siguiente manera: si el contenido de la variable nombre es el string “Juan” entonces se debe ejecutar la sentencia alert(“Hola Juan”);

El contenido de la condición siempre debe retornar un valor del tipo booleano: true (verdadero) o false (falso).

Ahora, ¿qué sucede si queremos hacer algo cuando no se ingrese el nombre Juan? Por ejemplo si queremos decir “Hola desconocido”. Para ello vamos a utilizar otra palabra clave de Javascript, la cual es else (sino). De esta manera podemos decir if (si) sucede tal cosa entonces hagamos esto, else (sino) hagamos esto otro.

Si aplicamos esto en el código anterior nuestro programa quedará de la siguiente manera:

var nombre = prompt(“Por favor ingrese su nombre”);

if (nombre === “Juan”) {

   alert(“Hola Juan”);

} else {

   alert(“Hola desconocido”);

}

Si probamos ingresar Juan veremos que nuestro programa nos saludará por nuestro nombre.

Si ingresamos un texto diferente, veremos que nos saludará como “Hola desconocido”.

Vamos a utilizar con mucha frecuencia las condiciones if-else. Vamos a ver que luego de practicar un par de ejercicios ya estaremos acostumbrados a su sintaxis y uso.

Ahora, ¿qué pasaría si tuviéramos algo como esto?

Podemos ver múltiples condiciones. Primero tenemos una condición y en el caso de tomar un camino se nos presenta otra condición. Siguiendo con el ejemplo anterior digamos que queremos añadir un saludo para aquellos usuarios de nuestro programa que se llaman Juana.

Por lo tanto primero deberíamos preguntar si nuestro usuario se llama en el caso de que sea así lo saludaremos “Hola Juan”, en el caso de que no se llame Juan, preguntaremos si se llama Juana, en el caso de que así la saludaremos “Hola Juana”, en el caso que no sea así, saludaremos “Hola desconocido”.

Para el vamos a utilizar la combinación else if, y la vamos a emplear de la siguiente manera:

var nombre = prompt(“Por favor ingrese su nombre”);

if (nombre === “Juan”) {

   alert(“Hola Juan”);

} else if (nombre === “Juana”) {

   alert(“Hola Juana”);

} else {

   alert(“Hola desconocido”);

}

Como podemos ver, si ingresamos Juan, nos saludará “Hola Juan”.

Si ingresamos Juana, nos saludará “Hola Juana”.

Si ingresamos otro texto, nos saludará “Hola desconocido”.

Ahora intentemos modificar nuestro ejemplo de la siguiente manera: Si el usuario ingresa el nombre Juan o Pedro lo saludaremos diciendo “Hola Amigo”, caso contrario lo saludaremos “Hola desconocido”. Para ello vamos a usar el operador lógico or (o) representado por los símbolos ||

var nombre = prompt(“Por favor ingrese su nombre”);

if (nombre === “Juan” || nombre === “Pedro”) {

   alert(“Hola Amigo”);

} else {

   alert(“Hola desconocido”);

}

Veamos que al ingresar Juan o Pedro nos saludará “Hola Amigo”. Caso contrario nuestro programa emitirá el saludo “Hola desconocido”. Como podemos ver el operador or nos permite que una condición esté formada por más de una condición y que la condición general será verdadera si alguna de las dos condiciones internas es verdadera.

Modifiquemos nuevamente el ejemplo para poder aprender otro operador lógico. Hagamos que nuestro programa emita el saludo “Hola Amiga” solo si el usuario se llama Juana y tiene 25 años, caso contrario saludará “Hola desconocido”.

En este caso para que la condición general sea verdadera, ambas condiciones internas deben ser verdaderas, el nombre debe ser Juana y su edad 25. Para ello vamos a utilizar el operador lógico and (y), representado por los símbolos &&, y cuyo uso veremos a continuación:

var nombre = prompt(“Por favor ingrese su nombre”);

var edad = Number(prompt(“Por favor ingrese su edad”));

if (nombre === “Juana” && edad === 25) {

   alert(“Hola Amiga”);

} else {

   alert(“Hola desconocido”);

}

Como podemos ver si ingresamos Juana y 25 vamos a ver el saludo “Hola Amiga”.

El último operador lógico que existe es la negación, y se la representa con el símbolo de cierre de exclamación !

Modifiquemos nuevamente nuestro ejemplo, en este caso queremos que si una persona no se llama Juan la saludaremos como “Hola Amigo”, en el caso que se llame Juan lo saludaremos simplemente “Hola”.

var nombre = prompt(“Por favor ingrese su nombre”);

if ( ! (nombre === “Juan) ) {

   alert(“Hola Amigo”);

} else {

   alert(“Hola”);

}

Podremos ver que si por ejemplo ingresamos el nombre Pedro, nuestro programa nos saludará “Hola Amigo”, pero si ingresamos el nombre Juan nos saludará simplemente con “Hola”.

Quizás todo lo que vamos viendo te resulte un poco confuso, más todavía si estás aprendiendo tu primer lenguaje de programación. Definitivamente tendremos que practicar mucho, tipeando y ejecutando programas en la consola, hasta familiarizarnos con la sintaxis. ¡Lograremos dominar todo esto! Tengamos en cuenta que todo programador pasa por esto.

Bueno, eso fue todo por esta lección.

Nos vemos en la siguiente.

¡Adios!