Fragmentos y estructuras de control. Parte 4 del curso de JavaScript de Principiante a Avanzado en 10 publicaciones de blog.

Esta es la parte 4 de la serie de publicaciones del blog de JavaScript que te llevará de principiante a avanzado. Al final de esta serie, conocerás todos los conceptos básicos que necesitas saber para comenzar a programar en JavaScript. Sin más preámbulos, comencemos con el cuarto tutorial.

Fragmentos y estructuras de control – índice:

1. Mejorando nuestra configuración de codificación a fragmentos
2. Estructuras de control

En esta publicación del blog continuaremos desde donde lo dejamos en el tercer blog. En esta etapa, deberías tener abierto tu navegador Google Chrome y, más específicamente, tener abierta tu consola de JavaScript. Si por alguna razón las cerraste, sería un buen momento para volver a abrirlas.

Si estás en una Mac, el atajo de teclado para abrir la consola es presionar “Opción + Comando + J”, después de abrir Chrome. Si estás usando un dispositivo Windows, puedes usar el atajo de teclado “Control + Shift + J” para abrir la Consola de JavaScript, una vez que abras Chrome. O también puedes ir al menú en la parte superior y seleccionar Ver -> Desarrollador -> Consola de JavaScript.

Mejorando nuestra configuración de codificación a fragmentos

Hasta este punto en el curso, podríamos haber escrito todo línea por línea y ejecutarlo línea por línea. No sería la forma más conveniente de ejecutar las cosas, pero funcionaría de todos modos. A partir de este tutorial, escribiremos código que requiere múltiples líneas de código para crear un conjunto completo de instrucciones. Para lograr eso, utilizaremos algo llamado “fragmentos” en Google Chrome. Sin más preámbulos, mejoramos nuestra configuración de la consola de JavaScript a fragmentos de Chrome.

Actualmente deberías tener tu consola abierta, y si seguiste los tutoriales anteriores, deberías tener una pantalla que se vea así:

Cuando mires esta pantalla, o tu pantalla, deberías ver: Elementos, Consola, Fuentes, Red, Rendimiento, Memoria, Aplicación, etc., escritos uno al lado del otro en la barra superior del área oscura. Si los ves en colores más claros, también está completamente bien. Significa que estás usando el modo claro, que puede ser el modo predeterminado para el día. La pantalla que muestro actualmente utiliza el esquema de color para el modo oscuro en la configuración de la consola de Chrome. Si ves los Elementos, Consola, Fuentes, Red, etc., apareciendo, en cualquiera de los esquemas de color, estás listo para continuar.

Si miras más de cerca la barra superior de la consola, puedes ver que la escritura de “Consola” se ve ligeramente de un color diferente. Haz clic en “Fuentes” justo al lado.

Una vez que hagas clic en fuentes, deberías estar viendo una pantalla que de alguna manera se ve así.

Una diferencia que podrías esperar es que probablemente no verás el archivo “notes.js”, ya que lo he creado previamente. Aparte de eso, debería verse bastante similar a esto. Para crear un nuevo archivo, haz clic en “+ Nuevo fragmento”. Una vez que hagas clic en él, creará un nuevo archivo de JavaScript para ti y puedes nombrarlo como desees. En este tutorial lo llamaremos “index.js”, ya que es una práctica común nombrar el primer o el archivo principal como “index.js”.

Si deseas seguir este tutorial palabra por palabra, después de hacer clic en “+ Nuevo fragmento”, puedes ingresar el nombre “index.js” y presionar la tecla enter en tu teclado. Ahora podemos hacer clic dentro del archivo abierto en el área principal que se abrió, para comenzar a codificar en JavaScript.

Comencemos con algo que ya sabemos que funciona. Y eso es:

alert("¡Hola, Mundo!");

Puedes escribirlo tú mismo para practicar o copiar y pegar la parte del código en el archivo que creamos. Te recomiendo encarecidamente que lo escribas tú mismo, ya que así es como lo aprendes en muchos casos. Una vez que lo escribas, si presionas la tecla enter, verás que el código no se ejecuta. En su lugar, tu cursor simplemente irá a la siguiente línea, como en cualquier otra área de edición de texto. Hay dos formas principales en las que podemos ejecutar nuestro código. La primera es hacer clic en el botón de reproducción que se encuentra en la esquina inferior derecha.

Si haces clic en ese botón de reproducción, debería ejecutar nuestro código y mostrarnos los resultados.

Una vez que hagas clic en “OK”, también ejecutemos nuestro código usando la otra forma principal. La segunda forma principal de ejecutar tu código, o ejecutar tu fragmento, es usar el atajo de teclado. Como podemos ver, ya nos muestra el atajo cuando hacemos clic en el botón de ejecutar. Ese atajo de teclado es “Comando + Enter”. Para hacerlo, podemos presionar la tecla Comando y luego presionar la tecla Enter. Hacer eso también ejecutará nuestro código y nos dará los mismos resultados que hacer clic en el botón de reproducción.

Y con eso, ahora conoces las dos formas de ejecutar nuestro código JavaScript en los fragmentos de Chrome.

Si deseas crear nuevos archivos para tal vez tomar notas sobre JavaScript, o para practicar algo de código JavaScript, siempre puedes crear nuevos archivos haciendo clic en “+ Nuevo fragmento” y nombrar tus archivos como desees. Ahora que tenemos nuestra nueva configuración de codificación lista, veamos un poco más de JavaScript.

Estructuras de control

Cuando escribimos código, tenemos que tener en cuenta muchos escenarios y acciones que el usuario puede tomar. Esta preparación para diferentes escenarios puede provenir de diferentes fuentes, como el dispositivo en el que se ejecuta nuestro código, el tamaño de la pantalla que se mostrará, los diferentes tipos de navegador que el usuario podría tener, etc. Pero, ¿cómo nos aseguramos de que podemos estar preparados para diferentes escenarios? Si escribes diferentes códigos uno tras otro, ¿tendría sentido ejecutar todos ellos para el usuario? Para responder a todo eso y más, utilizaremos estructuras de control.

Las estructuras de control nos permiten guiar la ejecución del código, para que nuestro código pueda adaptarse a diferentes condiciones. Hay múltiples elementos comunes utilizados para estructuras de control. En este tutorial comenzaremos con la más simple y avanzaremos desde allí. La primera que veremos utiliza declaraciones If, else, else if para controlar la ejecución del código.

If, else y else if

Esta es la estructura de control más simple para comenzar. Lo que nos permite hacer es ejecutar un fragmento de código si una cierta condición es verdadera, y ejecutar otro fragmento de código si otra condición es verdadera. Veamos eso con un ejemplo. Supongamos que, si llueve afuera, llevaré mi paraguas conmigo. De lo contrario, no llevaré un paraguas. Podemos traducir la lógica y el razonamiento exactos a código de la siguiente manera:

(Antes de escribir este código, comentaremos el código del código anterior que tenemos en el archivo colocando dos barras diagonales al frente, para que no se ejecute, pero aún tengas una copia de él. Después de agregar las barras diagonales, debería verse así:)

// alert("¡Hola, Mundo!");
let rainy = true;
if (rainy){
   alert("Lleva un paraguas");
} else {
   alert("No es necesario un paraguas");
}

Ejecutar este código nos daría la siguiente salida:

// alert("¡Hola, Mundo!");
let rainy = false;
if (rainy){
   alert("Lleva un paraguas");
} else {
   alert("No es necesario un paraguas");
}

Mientras que ejecutar esta versión del código que dice que no hay lluvia, daría la siguiente salida:

Cuando estés escribiendo el código para hacer cambios en el archivo de código, si miras más de cerca el nombre del archivo, verás que tendrá un asterisco antes del nombre del archivo. Esto significa que el archivo de código que escribimos no está completamente guardado. Esto puede no hacer una gran diferencia si solo estás escribiendo un par de líneas de código que siempre puedes escribir, pero más a menudo de lo que piensas querrás guardar tu código, para que puedas reutilizarlo o revisarlo más tarde. Podemos guardar este archivo de código de la misma manera que guardamos otros archivos, así que eso sería “Comando + S” en Mac y “Control + S” en Windows.

En nuestro caso, porque estamos ejecutando nuestro código justo después de escribirlo, automáticamente guardó nuestro archivo cuando ejecutamos el código. Así que si vas a escribir algo de código y dejarlo por horas, es una buena idea guardar tu código de vez en cuando para asegurarte de que no estás perdiendo ningún progreso significativo.

Es genial que podamos hacer que nuestro código se adapte a una condición binaria usando una declaración If y un else, pero ¿qué pasa si tenemos múltiples cosas a considerar, que probablemente será el caso en la vida real? Por ejemplo, ¿qué pasa si hace frío y necesitas llevar una sudadera cuando hace frío? Una forma en que podríamos hacer eso sería con una declaración “else if” y podemos hacerlo de la siguiente manera:

// alert("¡Hola, Mundo!");
let rainy = false;
let cold = true;
if (rainy){
   alert("Lleva un paraguas");
} else if (cold) {
    alert("Lleva una sudadera contigo, no un paraguas");
} else {
   alert("No es necesario un paraguas");
}

La salida de este código se vería así:

Así que si una cierta condición es verdadera, el primer código que está entre paréntesis se ejecutará. En nuestro caso, dado que la primera condición verifica la lluvia, alertaremos al usuario que debe llevar un paraguas. Si esa condición es falsa, lo que significa que no hay lluvia, seguiremos verificando otras condiciones usando una declaración “else if”. Una cosa que es significativamente diferente de la declaración “else if” es que podemos verificar tantas condiciones como queramos con las declaraciones else if.

Lo importante a recordar aquí es que tu código será verificado de arriba a abajo, por corrección o veracidad. Lo que significa que con el código actual, si el clima es tanto lluvioso como frío, no reconocerá el clima frío, ya que la primera declaración es correcta. También podemos verificar esto cambiando el código para tener ambas condiciones de lluvia y frío.

// alert("¡Hola, Mundo!");
let rainy = true;
let cold = true;
if (rainy){
   alert("Lleva un paraguas");
} else if (cold) {
    alert("Lleva una sudadera contigo, no un paraguas");
} else {
   alert("No es necesario un paraguas");
}

Ahora puedes estar preguntándote, ¿cómo puedo resolver esto? ¿Cuál es más importante, el clima frío o la lluvia? ¿Deberías elegir una condición y sacrificar la otra? ¿Tienes que hacer tal elección? Bueno, no realmente. Este es un problema muy común y tiene una solución muy común y relativamente simple. Podemos usar una expresión “y” para cubrir múltiples escenarios. Para decirle a JavaScript que queremos usar un “y” para conectar nuestra lógica de programación, utilizaremos dos de este símbolo: “&”. Y debido a que nuestro código se verifica de arriba a abajo, utilizaremos la opción más completa para la primera declaración if. El código actualizado, entonces, se ve así.

// alert("¡Hola, Mundo!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Póntelo una sudadera y lleva un paraguas contigo.")
} else if (rainy){
   alert("Lleva un paraguas");
} else if (cold) {
    alert("Lleva una sudadera contigo, no un paraguas");
} else {
   alert("No es necesario un paraguas");
}

Ejecutar este código te daría una alerta que se vería así:

Mucho mejor. Ahora podemos combinar múltiples escenarios diferentes, incluyendo diferentes combinaciones de estos escenarios. Pero, ¿qué pasa si queremos considerar un escenario que no es frío pero lluvioso? Y supongamos que queremos decirle al usuario que no se lleve una sudadera específicamente, y que solo se lleve un paraguas. Para hacer eso, podemos usar el “no” lógico, podemos usarlo en nuestro código con el signo de exclamación antes de la condición que queremos especificar. Agreguemos esa condición a nuestro código para que sea más completo.

// alert("¡Hola, Mundo!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Póntelo una sudadera y lleva un paraguas contigo.")
} else if (rainy && !cold){
   alert("Lleva un paraguas, pero no una sudadera.");
} else if (rainy){
   alert("Lleva un paraguas");
} else if (cold) {
    alert("Lleva una sudadera contigo, no un paraguas");
} else {
   alert("No es necesario un paraguas");
}

Cuando estamos agregando una nueva condición a un árbol if else, siempre que sea la condición más completa, podemos colocarla en algún lugar en la parte superior. De esta manera, tenemos muchas menos posibilidades de errores en comparación con el enfoque opuesto. Un efecto secundario de inyectar nuevo código en el código existente es que parte del código puede volverse redundante o puede no funcionar de la manera más eficiente. No nos centraremos mucho en la parte de eficiencia, pero por ahora podemos ver que cubrimos tanto las condiciones de frío como de no frío para un clima lluvioso, por lo que opcionalmente podemos eliminar la condición que solo verifica la condición de “lluvia”. Hacer estos ajustes de código también se llama “Refactorización de Código”, en el proceso de refactorización el objetivo es hacer que el código sea incrementalmente más limpio y eficiente.

// alert("¡Hola, Mundo!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Póntelo una sudadera y lleva un paraguas contigo.")
} else if (rainy && !cold){
   alert("Lleva un paraguas, pero no una sudadera.");
} else if (cold) {
    alert("Lleva una sudadera contigo, no un paraguas");
} else {
   alert("No es necesario un paraguas");
}

Cuando queremos verificar si alguna de las condiciones es verdadera, podemos usar el operador “o”, que es el símbolo de tubería utilizado dos veces en tu teclado y se ve así “||”.

Veamos un ejemplo de eso con otro ejemplo. Para agregar más ejemplos al mismo archivo sin interferir con los nuevos comandos, podemos comentar el código anterior que usamos envolviendo el código anterior dentro de estos símbolos que hemos visto antes:

/* 
*/

Que es una barra diagonal y un asterisco y los mismos símbolos en el orden opuesto para cerrar la parte comentada. Envolvamos nuestro código actual dentro de estos símbolos para que no interfieran con el nuevo código que vendrá. Ahora tu archivo de código debería verse así:

// alert("¡Hola, Mundo!");
/*
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Póntelo una sudadera y lleva un paraguas contigo.")
} else if (rainy && !cold){
   alert("Lleva un paraguas, pero no una sudadera.");
} else if (cold) {
    alert("Lleva una sudadera contigo, no un paraguas");
} else {
   alert("No es necesario un paraguas");
}
*/

A partir de ahora, nos centraremos en las nuevas partes que estamos agregando al archivo, para que podamos concentrarnos en aprender una cosa a la vez. Opcionalmente, puedes mantener el código anterior en modo comentado, moverlo a un nuevo archivo para tus referencias, o si no deseas verlo más, puedes eliminarlo para tener un archivo más limpio.

Continuemos con nuestro ejemplo a un caso de “o”. Considera un escenario en el que visitas tu nevera en busca de comida y bebidas cada vez que sientes hambre o sed. ¿Cómo funcionaría el código para eso?

let hungry = true;
let thirsty = false;
if (hungry || thirsty) {
    alert("Ve a la nevera y verifica qué tienes allí.");
}

Ejecutar este código, como también probablemente has adivinado, nos daría el siguiente resultado:

Hasta ahora, los ejemplos que usamos provienen de escenarios cercanos a la vida real, pero muchas veces estarás tratando con números en el código. Has visto números previamente en esta serie, pero no hemos hablado mucho sobre la comparación o las operaciones que podríamos hacer con ellos. Ahora que hemos aprendido sobre las declaraciones if else, veamos un poco más sobre números.

Cuando estamos tratando con if y declaraciones else if, estamos verificando la veracidad de una declaración. Pero, ¿podemos también hacer una declaración if significativa si todo lo que tenemos son números? Por ejemplo, ¿qué pasa si quiero llevar un paraguas si hay más del 50% de probabilidad de lluvia, podemos lograr eso con código? Sí, podemos, y aquí está cómo sería.

let chanceOfRain = 70;
if (chanceOfRain >= 50) {
    alert("Lleva un paraguas.");
}

Cuando estamos tratando con números, necesitamos una forma de convertirlo en algún tipo de veracidad o falsedad para que la declaración if funcione. Hay múltiples formas en que podemos lograr eso dependiendo de nuestro caso de uso.

Por ejemplo, podemos verificar si dos números son exactamente iguales entre sí con tres signos de igual así:

let a = 10;
let b = 10;
if (a === b) {
    alert("Son iguales.");
}

Esto nos daría la alerta que dice “Son iguales.”.

También podemos verificar si no son iguales con el siguiente código:

let a = 10;
let b = 5;
if (a !== b) {
    alert("¡No son la misma cosa!");
}

Ejecutar el código anterior nos dará la alerta que dice “¡No son la misma cosa!”.

También podemos verificar específicamente cuál es mayor, mayor o igual, menor o menor o igual. Puedes encontrar un resumen de los signos para tu conveniencia.

// === verifica la igualdad
// !== verifica la no igualdad
// > mayor que
// >= mayor o igual que
// < menor que
// <= menor o igual que

Veamos también un par más de ellos para practicar y exponer más código. Aquí hay un par de códigos de ejemplo que mostrarán la alerta que tienen dentro de las declaraciones if:

Mayor que:

let a = 10;
let b = 5;
if (a > b) {
    alert("a es mayor que b");
}

Mayor o igual que:

let a = 10;
let b = 5;
if (a >= b) {
    alert("a es mayor o igual que b");
}

Otro ejemplo de mayor o igual que:

let a = 10;
let b = 10;
if (a >= b) {
    alert("a es mayor o igual que b");
}
[/code>
<p>Menor que:</p>
[code lang="js"]
let a = 5;
let b = 10;
if (a &lt; b) {
    alert(&quot;a es menor que b&quot;);
}

Menor o igual que:

let a = 5;
let b = 10;
if (a <= b) {
    alert("a es menor o igual que b");
}

Otro ejemplo de menor o igual que:

let a = 10;
let b = 10;
if (a <= b) {
    alert("a es menor o igual que b");
}

Usando una combinación de estos signos de comparación o igualdad, podemos crear códigos complejos que pueden adaptarse a diferentes condiciones.

Operaciones aritméticas

Cuando estamos tratando con números, otra cosa que queremos realizar son operaciones aritméticas. La mayoría de las operaciones aritméticas deberían ser bastante familiares, pero también hay operadores aritméticos específicos de programación que podrían ser menos familiares.

Aquí hay un resumen de las operaciones aritméticas que usamos en JavaScript con su significado para tu conveniencia:

// * multiplicación
// / división
// + adición
// - sustracción
// % operación de módulo, nos da el residuo después de la división
// ** exponenciación

Las primeras cuatro funcionarán como esperas:

let a = 12;
let b = 5;
let c = a * b;
// c será 60
c = a / b;
// c será ahora 2.4
c = a + b;
// c será ahora 17
c = a - b;
// c será ahora 7

La operación de módulo nos dará el residuo después de dividir el primer número por el segundo número. Si continuamos con el código anterior de a, b y c:

c = a % b;
// c será ahora 2
c = 18 % 5;
// c ahora tendrá el valor de 3
// porque 18 dividido por 5 nos dará el residuo de 3

El operador de exponenciación realiza la exponenciación en JavaScript. Se representa con dos signos de asterisco y toma el primer elemento a la potencia del segundo elemento.

c = 2 ** 3;
// c ahora tendrá el valor de 8
// porque 2 * 2 * 2 es igual a 8

¡Este fue un tutorial relativamente largo, y lo lograste! Hemos mejorado nuestra configuración de codificación y aprendido bastante en este tutorial. En el próximo tutorial, continuaremos con más formas de controlar el flujo de nuestro código!