¿Qué es la programación?

Para comunicarnos entre personas, estamos acostumbrados a usar un sistema de palabras en común.

A estos los llamamos lenguajes naturales, como el español, inglés, chino, etc.

Pero las computadoras no entienden estos lenguajes directamente.

La programación es una forma de comunicarnos con las computadoras (y otros dispositivos electrónicos) para decirles qué hacer.

Para comunicarnos con estos dispositivos de una manera más técnica debemos utilizar los lenguajes de programación.

Algunos ejemplos de lenguajes de programación son: Python, JavaScript, Ruby, Java, Go, Rust, etc.

Hay que ser específicos

Cuando le damos instrucciones a otra persona hay muchas cosas que no tenemos que explicar, pero hablar con las computadoras no es tan intuitivo.

Por ejemplo, si le decimos a un amigo:

¿Puedes comprarme un chocolate?

Esa persona seguramente ya tiene conocimientos de qué es un chocolate y dónde lo puede conseguir.

Al contrario cuando hablamos con las computadoras, con ellas debemos ser extremadamente específicos.

Imagina que a tu amigo le tienes que decir exactamente:

• Ve a la calle
• Trata de encontrar una tienda (camina hasta que encuentres alguna)
• Cuando encuentres una, entra en ella
• Busca la sección de chocolates
• Toma alguno de ellos
• Ve al mostrador
• Paga el chocolate
• Sal de la tienda
• Vuelve conmigo
• Dame el chocolate

En realidad podemos extender estas instrucciones tanto como queramos, quizás también hay que explicarle qué es un chocolate, o cómo se ve una tienda, o…

…para no alargarlo más: así es como funcionan las computadoras.

En algún punto, a los procedimientos complejos (como la lista anterior) los convertimos en instrucciones más abstractas como “consígueme un chocolate”, ya lo veremos más adelante.

Por ahora sólo debemos tener en cuenta que como humanos podemos deducir información del contexto en el que nos comunicamos, mientras que las computadoras necesitan instrucciones más específicas.

Usemos JavaScript

En esta ruta de estudios aprenderemos JavaScript, que es uno de los lenguajes más usados y versátiles.

¿Qué es JavaScript?

Es un lenguaje de programación que nos ayuda (principalmente) a modificar archivos de páginas web. Lo podemos usar en el navegador ya que fue inventado para ese propósito.

En realidad se puede usar en distintos entornos (más allá del navegador) aunque en los próximos artículos veremos las maneras más básica de crear programas con este lenguaje.

¿Cómo usarlo?

Para probarlo no debemos instalar nada, ya existe una herramienta dentro de nuestro navegador favorito. Ya sea Chrome, Edge, Safari o cualquier otro.

Para abrir dicha herramienta debemos dirigirnos a las Opciones (Config) > Más Herramientas (More tools) > Herramientas de Desarrollador (Developer tools).

O podemos presionar F12 en nuestro teclado.

Esto abrirá las herramientas de desarrollador que incluyen una pestaña llamada Consola (Console) que nos permite escribir y ejecutar código de JavaScript.

En los siguientes artículos veremos las instrucciones más fundamentales para entender cómo funcionan los lenguajes de programación de manera práctica.

Cuando hablamos de conceptos fundamentales nos referimos a las instrucciones que existen en la mayoría de lenguajes de programación.

Nuestro primer programa

En la programación, cada lenguaje nos proporciona acciones y herramientas que están listas para ser usadas.

Estas acciones tienen un nombre especial: funciones.

Una de las primeras funciones de JavaScript que aprenderemos es: console.log().

Su propósito es muy simple: hacer que la computadora hable. Es decir: mostrar un mensaje en la consola del navegador.

Para usarla debemos escribir el siguiente código:

console.log();

Y dentro de los paréntesis debemos poner un mensaje encerrado entre comillas:

console.log("¡Hola, mundo!");

Ahora podemos ejecutar el código y debemos ver el mensaje:

¡Hola, mundo!

¡Ahora formamos parte del mundo de la programación!

Instalando VS Code

El código que escribimos directamente en la consola del navegador se pierde una vez que lo cerramos. Por lo que debemos aprender una manera de conservar nuestros programas.

Para escribir y ejecutar nuestro código de manera más organizada, usaremos VS Code, un editor de código gratuito.

📥 Instalando VS Code

1. Debemos dirigirnos al sitio oficial de VS Code y descargar la versión para nuestro sistema operativo.

2. Instalar el programa con las opciones predeterminadas.

3. Abrir VS Code y explora su interfaz

Este editor de código tiene tres áreas principales:

1. La barra de herramientas, donde encontraremos todo tipo de opciones
2. La barra lateral, donde encontraremos los paneles más relevantes para trabajar
3. El espacio principal donde se abrirán nuestros archivos de código

En realidad podemos usar cualquier aplicación que nos permita crear archivos de texto y guardarlos con extensiones particulares. Pero los editores de código incluyen herramientas que facilitan distintas tareas relacionadas con programación.

Cambiando el idioma de la interfaz

Para nuestra suerte, las palabras que usamos para programar están en inglés. Por lo que no importa si queremos huir de él, siempre estará con nosotros.

Lo que sí podemos cambiar es el idioma de la interfaz de nuestro nuevo editor de código.

¿Cómo cambiar el editor a español?

Cuando instalamos VS Code la interfaz aparecerá en inglés.

Si queremos cambiar este ajuste, podemos dirigirnos a Barra lateral > Extensiones y escribir spanish dentro de la barra de búsqueda.

Aquí aparecerá el paquete de lenguaje para el idioma español.

Lo instalamos y nos aparecerá un botón para reiniciar el editor.

Una vez reiniciado tendremos la interfaz en español.

¿Cómo volver a cambiar el idioma?

Si deseamos cambiar el idioma nuevamente, podemos ir al menú de la barra superior Ver > Paleta de comandos y escribir idioma.

Aquí encontraremos la opción Cambiar idioma de pantalla o Configure Display Language.

Nos ayudará a cambiar entre los idiomas instalados o instalar uno nuevo.

Creando archivos personalizados

Ahora que tenemos un editor de código podemos crear archivos que nos permitan conservar los programas que hagamos.

Creando un nuevo proyecto

El primer paso es dirigirnos a la Barra Lateral > Explorador y abrir una carpeta donde guardaremos nuestros proyectos.

Esto nos ayudará a mantener organizados nuestros archivos mientras aprendemos.

Agregando un archivo HTML

Una vez que tengamos abierta una carpeta dentro de VS Code, el panel cambiará ligeramente con una nueva sección.

Ahora podemos darle Clic derecho > Nuevo archivo.

Debemos crear un archivo con la extensión .html, ya que es el tipo de archivos que reconoce un navegador. Por ejemplo: mi-primer-programa.html.

Generando la estructura HTML

Dentro de él debemos escribir ! (signo de admiración) para activar el atajo de autocompletado que nos dará el código inicial.

El código se verá algo así:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Agregando código de JavaScript

Este código nos permite crear una página web, que es donde vivirá nuestro código.

Por ahora sólo tenemos código HTML, para ejecutar JavaScript debemos hacer un paso extra.

Debemos agregar un poco más de código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log("¡Hola, mundo!");
    </script>
  </body>
</html>

En medio de <script>...</script> podemos agregar las líneas de JavaScript que necesitemos.

Ejecutando el código en el navegador

Ahora el archivo que acabamos de crear lo podemos abrir con nuestro navegador.

Este programa sólo imprime un ¡Hola, mundo! a la consola, por lo que debemos abrirla para ver el resultado.

De esta manera podemos crear archivos que preserven el código que hagamos a lo largo de las siguientes lecciones. Incluso podemos volver a ellos para repasar los conceptos que vimos.

console.log("¡Hola, [NOMBRE]!");

Antes de continuar

Ahora que sabemos crear archivos personalizados, hablemos un poco del flujo de trabajo que recomendamos usar en este curso.

Sobre la ruta de estudio

A pesar de que existen diferentes alternativas para agregar JavaScript a nuestros proyectos, en esta ruta de estudio nos concentraremos en usarlo mediante el procedimiento que aprendimos en la lección pasada.

Sobre la creación de archivos

Nuestra siguiente recomendación es crear un nuevo archivo .html por cada lección que veamos. Todos van a seguir la misma estructura básica:

• Crear un archivo con el nombre de la lección. Por ejemplo: variables.html
• Agregar el código HTML por defecto
• Agregar las etiquetas <script>
• Escribir el código de las lecciones y ejercicios

Por ejemplo:

Sobre Live Server

Por defecto, cuando modificamos el código dentro de nuestros archivos, debemos recargar la página en el navegador para ver los cambios. Esto puede ser un poco molesto, especialmente cuando estamos aprendiendo.

Para solucionar este problema, podemos usar una extensión de VS Code llamada Live Server.

Instalación

Para instalar Live Server, debemos:

• Ir a la barra lateral de VS Code y abrir el panel de Extensiones
• En la barra de búsqueda, escribir Live Server
• Instalamos la extensión, usualmente es la primera opción en los resultados

Uso

Una vez instalada la extensión, podemos abrir nuestros archivos HTML de una manera más conveniente:

1. Dar clic derecho sobre el archivo HTML
2. Seleccionar Open with Live Server

Esto abrirá nuestro archivo en el navegador.

Ahora cada vez que hagamos cambios en el archivo y guardemos, la página se actualizará automáticamente.

Introducción a los comentarios

En JavaScript los comentarios son líneas de código que el navegador ignora al ejecutar un programa.

Los comentarios tienen dos usos principales:

1. Hacer anotaciones: Nos permiten explicar partes del código y documentar su funcionamiento.
2. Desactivar código: Podemos comentar temporalmente líneas de código que no queremos eliminar.

📝 Comentarios de una línea

Para escribir un comentario de una sola línea, usamos // antes del texto:

// Esto es un comentario de una línea
console.log("Hola, mundo!"); // Esto también es un comentario

JavaScript ignora todo lo que esté después de // en la misma línea.

📄 Comentarios de múltiples líneas

Si necesitamos un comentario más extenso, usamos /* */ para escribir en varias líneas:

/*
Este es un comentario
que ocupa varias líneas.
Podemos usarlo para explicar partes del código en detalle.
*/
console.log("Este código sí se ejecutará");

🚫 Desactivando código con comentarios

Los comentarios son útiles cuando queremos probar diferentes versiones de nuestro código:

// Versión 1: Saludar en español
console.log("¡Hola!");
// Versión 2: Saludar en inglés
// console.log("Hello!");

// También podemos comentar varias líneas de código:
/*
let nombre = "Juan";
let edad = 25;
console.log("Nombre: " + nombre);
console.log("Edad: " + edad);
*/

// Y mantener activa solo la línea que queremos probar:
console.log("Este código sí se ejecuta");

Variables

🌍 Mundo real vs. mundo digital

Así como en el mundo real todo ocupa un espacio físico…

…en nuestra computadora los datos también necesitan un lugar para existir.

La diferencia es que este no es un espacio físico, sino un espacio en la memoria de nuestra computadora.

Sobre las variables

En programación, las variables son como contenedores que nos permiten:

1. Guardar información para usarla después
2. Darle un nombre significativo a esa información
3. Modificar su contenido cuando lo necesitemos

Para decirle a la computadora: “Quiero que apartes un espacio para guardar algo…”, debemos crear una variable.

Veamos las instrucciones de código que nos ayuda con esta tarea.

☝️ Declaración

En JavaScript podemos hacerlo de dos maneras principales:

1. Usando la palabra let seguida del nombre que le queramos dar a nuestra variable.

   let edad;
   let numeroFavorito;

2. Usando la palabra var seguida del nombre que le queramos dar a nuestra variable.

   var puntuacion;
   var temperatura;

De manera técnica a este paso le llamamos: declaración (de variables).

🟰 Asignación

Para guardar algo dentro de esos contenedores usamos el operador =:

let edad = 25;
let temperatura = 21.5;
let puntuacion = 10;

De manera técnica a este paso le llamamos: asignación (de valor).

También podemos hacer la declaración y asignación en pasos separados:

let velocidad; // Primero declaramos
velocidad = 60.5; // Luego asignamos

✍️ Modificación

Una de las características principales de las variables es que podemos cambiar su valor a lo largo de nuestro programa:

let puntuacion = 0; // Iniciamos en cero
puntuacion = 10; // Ganó 10 puntos
puntuacion = 25; // Ganó 15 puntos más

Una vez declarada la variable no hay que volver a usar let. Solo hacemos referencia a su nombre para asignar un nuevo valor.

🔠 Constantes

Cuando queremos asegurarnos de que un valor nunca cambie durante la ejecución de nuestro programa, usamos constantes.

Las creamos usando la palabra const, seguida de su nombre y su valor inicial:

const PI = 3.14159;
const VELOCIDAD_LUZ = 299792458;
const GRAVEDAD = 9.81;

Tipos de dato

En la lección anterior aprendimos que podemos guardar cosas en variables y constantes, ahora toca averiguar: ¿qué cosas podemos guardar?.

🫳 Lo que está nuestro alcance son los datos

Existen diferentes tipos de dato que podemos guardar en nuestras variables y constantes.

Por ahora hablaremos de los principales:

• Undefined (indefinido)
• Null (nulo)
• Number (número)
• String (cadena)
• Boolean (booleano)

Y en otros artículos veremos algunos un poco más complejos:

• Object (objeto)
• Array (arreglo)
• Function (función)

Los tipos de dato son esenciales en programación porque nos dicen qué podemos hacer con un valor.

No es lo mismo sumar dos números que sumar dos textos, y JavaScript trata cada tipo de dato de manera diferente.

❓ Undefined

Undefined o indefinido, es el tipo de dato que indica que no existe nada guardado ahí.

Es el valor por defecto que reciben las variables cuando las creamos sin asignar un valor.

let miIndefinido;
console.log(miIndefinido);

undefined

❔ Null

Null o nulo, es el tipo de dato que también indica que no existe nada en ese lugar, aunque este valor suele ser a propósito.

Es decir, un vacío puesto por un programador.

let miNulo = null;
console.log(miNulo);

null

🔢 Number

Number o número, es el tipo de dato que nos ayuda con lo relacionado a los números.

// Números enteros
let edad = 25;
// Números negativos
let temperatura = -5;

// Números decimales
let precio = 99.99;
let pi = 3.14159;

🔤 String

String o Cadena (de caracteres), es el tipo de dato que nos ayuda a usar texto, como mensajes, palabras, letras o emoji.

// Diferentes tipos de texto
let nombre = "Ana";
let mensaje = "¡Bienvenido a JavaScript!";
let emoji = "😊";

Hay tres maneras de crear strings:

1. Con comillas simples ('):

   let saludo = 'Hola mundo';

2. Con comillas dobles ("):

   let mensaje = "JavaScript es divertido";

3. Con backticks (`) que permiten texto en múltiples líneas y usar variables:

   let nombre = "María";
   let mensaje = `Hola ${nombre},
   ¡Bienvenida al curso!`;

✔️ Boolean

Boolean o booleano, es el tipo de dato que solo puede tener dos valores: true (verdadero) o false (falso).

Nos ayuda a representar condiciones que son verdaderas o falsas. Por ejemplo:

• Si un usuario está conectado o no
• Si un juego está pausado o en marcha
• Si una tarea está completada o pendiente

// Ejemplos de valores booleanos en situaciones reales
let usuarioConectado = true;
let juegoEnPausa = false;
let tareaCompletada = true;

Los booleanos son muy útiles cuando necesitamos tomar decisiones en nuestro código basadas en condiciones de sí/no.

Concatenación de cadenas

🔗 ¿Qué es la concatenación?

Concatenar significa unir cadenas de texto. Tomamos palabras sueltas y las juntamos en un solo mensaje.

➕ Uniendo con el operador +

Uno de los usos más comunes es mediante el operador +:

let saludo = "Hola";
let nombre = "Juan";
console.log(saludo + " " + nombre);

En este ejemplo:

1. Tenemos la variable saludo con el texto "Hola"
2. Tenemos la variable nombre con el texto "Juan"
3. Agregamos un espacio " " entre las palabras para que no se junten
4. Los operadores + unen todo en una sola cadena

Hola Juan

🔢 Uniendo números

Cuando concatenamos strings con números, JavaScript convierte automáticamente los números a strings:

let puntos = 1500;
let bonus = 300;
console.log("¡Has ganado " + puntos + " puntos y un bonus de +" + bonus + "!");

¡Has ganado 1500 puntos y un bonus de +300!

⚠️ Resultados inesperados

JavaScript maneja los tipos de datos de forma diferente según el operador:

• Con +, si uno de los valores es un string, convierte todo a texto y realiza una concatenación
• Con operadores matemáticos ( - , * , / ), intenta convertir los strings a números para realizar la operación

Por ejemplo:

"5" + 2; // "52" (concatenación)
"5" - 2; // 3 (resta numérica)
"5" * "2"; // 10 (multiplicación numérica)

52
3
10

🎯 Uniendo con plantillas literales (${})

Existe otra forma de unir cadenas, a este método se le conoce como plantillas literales.

Debemos usar las comillas invertidas (backticks) para crear una nueva cadena.

let jugador = "Mario";
let puntuacion = 1250;

// Forma tradicional con +
console.log("El jugador " + jugador + " alcanzó " + puntuacion + " puntos.");

// Forma moderna con plantillas literales
console.log(`El jugador ${jugador} alcanzó ${puntuacion} puntos.`);

El jugador Mario alcanzó 1250 puntos.
El jugador Mario alcanzó 1250 puntos.

Las ventajas de usar plantillas literales son:

1. El código es más fácil de leer
2. No necesitamos usar + para unir las partes
3. Podemos incluir saltos de línea directamente
4. Podemos usar expresiones dentro de ${}

📝 Ejemplo con múltiples líneas

let ciudad = "Barcelona";
let temperatura = 28;

console.log(`Ciudad: ${ciudad}
Temperatura: ${temperatura}°C`);

Ciudad: Barcelona
Temperatura: 28°C

Esta vez, con un solo console.log(), pudimos mostrar el producto y el precio en dos líneas diferentes.

Operadores aritméticos

Los operadores aritméticos son las herramientas básicas que usamos para realizar cálculos en programación, similares a las operaciones matemáticas que hacemos en nuestra vida diaria.

• Suma
• Resta
• Multiplicación
• División
• Exponencial
• Módulo o restante

➕ Suma o adición

Podemos usar el símbolo + para calcular sumas.

let miSuma = 2 + 2;

4

➖ Resta o sustracción

Podemos usar el símbolo - para calcular restas.

let miResta = 10 - 5;

5

✖️ Multiplicación

Podemos usar el símbolo * para calcular multiplicaciones.

let miMultiplicacion = 3 * 3;

9

➗ División

Podemos usar el símbolo / para calcular divisiones.

let miDivision = 10 / 3;

3.3333333333333335

💫 Módulo o restante

Podemos usar el símbolo % para calcular divisiones y conseguir el residuo.

let miModulo = 10 % 3;

1

🚀 Exponencial

Podemos usar los símbolos ** para calcular exponenciales.

let miExponencial = 2 ** 3;

8

🎯 Agrupaciones

Cuando empezamos a crear operaciones más complejas tendemos a agrupar utilizando los paréntesis: ().

let miAgrupacion = 2 + 3 * (4 - 2 / 3);

12

🔢 Precedencia de operadores

El orden en el que se calculan las operaciones es el mismo que conocemos en matemáticas.

🏋️ Ejercicios

let producto1 = 30; // Precio del primer producto
let producto2 = 25; // Precio del segundo producto
let producto3 = 45; // Precio del tercer producto

let totalCompra = ____; // Completa la operación de suma
console.log("El total de la compra es $" + totalCompra);

let dinero = 100; // Cambia esto por tu cantidad inicial
let gasto = 30; // Cambia esto por cuánto gastaste

let restante = ____; // Completa la operación de resta
console.log("Después del gasto, te quedan $" + restante);

let precioCamiseta = 20; // Precio de una camiseta
let cantidad = 3; // Número de camisetas compradas

let total = ____; // Completa la operación de multiplicación
console.log("El total a pagar es $" + total);

let premio = 200; // Dinero total a repartir
let dias = 5; // Número de días

let partePorDia = ____; // Completa la operación de división
console.log("Cada persona recibe $" + partePorDia);

let numero = 7; // Cambia esto por cualquier número

let esPar = ____; // Completa la operación con módulo
console.log("El residuo de " + numero + " entre 2 es " + esPar);

let lado = 5; // Longitud de un lado del cuadrado

let area = ____; // Completa la operación de exponenciación
console.log(`El área de un cuadrado con lado ${lado} es ${area}.`);

let num1 = 8;
let num2 = 6;
let num3 = 10;

let promedio = ____; // Completa la operación con agrupación correcta
console.log(`El promedio de los tres números es ${promedio}.`);

let precioOriginal = 100;

let descuento = ____; // Calcula el 15% usando multiplicación y división
let precioFinal = ____; // Resta el descuento al precio original

console.log(`Precio original: $${precioOriginal}`);
console.log(`Descuento: $${descuento}`);
console.log(`Precio final: $${precioFinal}`);

Mini Proyecto: Calculadora de Propinas

🎯 Objetivo

Crear un script simple que calcule la propina y el monto total a pagar de una cuenta, basándose en el monto inicial y el porcentaje de propina deseado.

💡 Conceptos a Utilizar

• Variables (let, const)
• Tipos de dato (number, string)
• Operadores aritméticos (+, *, /)
• Concatenación de cadenas (+)
• Mostrar salida (puedes usar console.log por ahora)

👣 Pasos

1. Declara variables: Crea variables para almacenar el monto de la cuenta (ej: 100) y el porcentaje de propina (ej: 15).
2. Calcula la propina: Calcula el monto de la propina multiplicando el monto de la cuenta por el porcentaje de propina (dividido entre 100). Guarda el resultado en una variable.
3. Calcula el total: Suma el monto de la cuenta y el monto de la propina. Guarda el resultado en otra variable.
4. Muestra los resultados: Usa console.log para mostrar el monto de la propina y el monto total a pagar de forma clara. Por ejemplo: “Propina: $15. Total a pagar: $115”.

// 1. Declara variables
const montoCuenta = 100;
const porcentajePropina = 15;

// 2. Calcula la propina
const montoPropina = montoCuenta * (porcentajePropina / 100);

// 3. Calcula el total
const totalPagar = montoCuenta + montoPropina;

// 4. Muestra los resultados
console.log("Monto de la cuenta: $" + montoCuenta);
console.log("Porcentaje de propina: " + porcentajePropina + "%");
console.log("Propina: $" + montoPropina);
console.log("Total a pagar: $" + totalPagar);

Introducción a prompt()

🎯 Introducción

En la mayoría de los programas, es necesario recibir información del usuario.

En JavaScript, podemos hacerlo con prompt().

🖥️ ¿Qué es prompt()?

prompt() es una función, similar a console.log(), sólo que muestra una ventana donde el usuario puede escribir un valor.

Este valor lo podemos almacenar en una variable.

let sabor = prompt("¿Qué sabor de helado prefieres?");
console.log("¡Excelente elección! Un helado de " + sabor + " saliendo.");

Cuando ejecutamos este código, el usuario verá un cuadro de diálogo preguntando por su sabor preferido.

El texto que escriba se guardará en la variable sabor. Es como tomar una nota del pedido del cliente.

🔢 ¿Cómo convertir la entrada a número?

Si queremos que el tipo de dato sea un número, necesitamos convertir la entrada de prompt() de String a Number.

Para eso usamos parseInt(), parseFloat() o Number().

let puntaje = prompt("¿Cuál fue tu puntaje en el juego?");
puntaje = parseInt(puntaje); // Convertimos el string a número
console.log(
  `¡Increíble! Si vences al enemigo llegarás a ${puntaje + 500} puntos.`,
);

De esta manera no estamos sumando un string con un número, que nos daría el error que vimos en el artículo de concatenación.

Estaríamos sumando número con número, lo cual mostraría un resultado correcto al momento de hacer la suma que esperamos.

📌 Errores comunes con prompt()

1️⃣ No convertir la entrada

let numero = prompt("Escribe un número:");
console.log(numero + 10); // Esto concatenará el número en lugar de sumarlo.

💡 Solución: Usar parseInt() o Number() para hacer operaciones matemáticas correctamente.

2️⃣ Olvidar que el usuario puede cancelar

Si el usuario presiona Cancelar y tratamos de conseguir el texto recibiremos null, por lo que nuestro programa podría dejar de funcionar correctamente.

Operadores de asignación

👀 ¿Qué son los operadores de asignación

Los operadores de asignación son atajos para realizar cálculos y guardar el resultado en la misma variable.

Todas las operaciones tienen un atajo para realizar este tipo de acción:

➕ Asignación de suma o adición

let resultado = 10;
console.log(resultado);
resultado += 6;
console.log(resultado);

10
16

➖ Asignación de resta o sustracción

let resultado = 10;
console.log(resultado);
resultado -= 5;
console.log(resultado);

10
5

✖️ Asignación de multiplicación

let resultado = 10;
console.log(resultado);
resultado *= 3;
console.log(resultado);

10
30

➗ Asignación de división

let resultado = 10;
console.log(resultado);
resultado /= 5;
console.log(resultado);

10
2

💫 Asignación de restante o módulo

let resultado = 10;
console.log(resultado);
resultado %= 3;
console.log(resultado);

10
1

⭐ Asignación de exponente

let resultado = 10;
console.log(resultado);
resultado **= 2;
console.log(resultado);

10
100

🏋️ Ejercicios

Operadores de comparación

🎯 ¿Qué son los operadores de comparación?

Los operadores de comparación son como preguntas que le hacemos a JavaScript para comparar valores.

Cuando hacemos una pregunta (comparación), JavaScript nos responde con:

• true que significa “sí” o “verdadero”
• false que significa “no” o “falso”

🔍 Tipos de Operadores

🟰 ¿Son Iguales?

== Comparación Simple

Es como preguntar “¿se parecen estos valores?”, sin fijarnos mucho en los detalles.

console.log(5 == "5"); // ¿se parecen?
console.log(5 == 5); // ¿son iguales?

true
true

=== Comparación Exacta

Es como preguntar “¿son exactamente iguales?”, fijándonos en todos los detalles.

console.log(5 === "5"); // ¿son del mismo tipo?
console.log(5 === 5); // ¿son exactamente iguales?

false
true

❗ ¿Son Diferentes?

!= Diferencia Simple

Es como preguntar “¿son diferentes?”, sin fijarnos mucho en los detalles.

console.log(5 != "5"); // ¿son diferentes?
console.log(5 != 6); // ¿son diferentes?

false
true

!== Diferencia Exacta

Es como preguntar “¿son completamente diferentes?”, fijándonos en todos los detalles.

console.log(5 !== "5"); // ¿son de diferente tipo?
console.log(5 !== 5); // ¿son diferentes?

true
false

📊 Comparando Números

> ¿Es Mayor?

Es como preguntar “¿es este número más grande que el otro?”

console.log(10 > 5); // ¿es 10 mayor que 5?
console.log(5 > 10); // ¿es 5 mayor que 10?

true
false

< ¿Es Menor?

Es como preguntar “¿es este número más pequeño que el otro?”

console.log(10 < 20); // ¿es 10 menor que 20?
console.log(20 < 10); // ¿es 20 menor que 10?

true
false

>= ¿Es Mayor o Igual?

Es como preguntar “¿es este número más grande o igual que el otro?”

console.log(10 >= 10); // ¿es 10 mayor o igual que 10?
console.log(15 >= 10); // ¿es 15 mayor o igual que 10?

true
true

<= ¿Es Menor o Igual?

Es como preguntar “¿es este número más pequeño o igual que el otro?”

console.log(5 <= 5); // ¿es 5 menor o igual que 5?
console.log(3 <= 7); // ¿es 3 menor o igual que 7?

true
true

let a = 10;
let b = "10";

console.log(a == b); // ¿Son iguales en valor?

let numero = 7;
let texto = "7";

console.log(numero === texto); // ¿Son exactamente iguales?

let x = 5;
let y = "5";

console.log(x != y); // ¿Son diferentes?

let precio = 100;
let precioTexto = "100";

console.log(precio !== precioTexto); // ¿Son completamente diferentes?

let edad = 18;
let edadMinima = 16;

console.log(edad > edadMinima); // ¿Es mayor?

let temperatura = 25;
let temperaturaMaxima = 30;

console.log(temperatura < temperaturaMaxima); // ¿Es menor?

let calificacion = 75;
let notaMinima = 70;

console.log(calificacion >= notaMinima); // ¿Aprobó?

let precioProducto = 50;
let presupuesto = 60;

console.log(precioProducto <= presupuesto); // ¿Alcanza el presupuesto?

Operadores lógicos

Los operadores lógicos son herramientas que nos permiten combinar diferentes condiciones para tomar decisiones en nuestro código.

En programación, como en la vida, usamos operadores lógicos para evaluar múltiples condiciones.

🤔 ¿Qué es una evaluación?

Una evaluación es cuando le hacemos una pregunta a JavaScript y nos responde con true (verdadero) o false (falso). Por ejemplo:

• 5 > 3 es una evaluación que pregunta “¿es 5 mayor que 3?”
• edad >= 18 es una evaluación que pregunta “¿es la edad mayor o igual a 18?”

⚡ Operadores lógicos básicos

Los principales operadores lógicos en JavaScript son:

• && (AND): Ambas condiciones deben cumplirse
• || (OR): Basta con que una condición se cumpla
• ! (NOT): Invierte el resultado de una condición

✅ AND (&&): Todas las condiciones

El operador && da true como resultado solo si todas las condiciones son verdaderas.

La palabra and significa y, como en: ¿condición 1 y condición 2 se cumplen?

let tieneDinero = true;
let hayFunciones = false;

let puedoIrAlCine = tieneDinero && hayFunciones;
console.log("¿Puedo ir al cine?", puedoIrAlCine);

¿Puedo ir al cine? false

🔀 OR (||): Al menos una condición

El operador || devuelve true si al menos una de las condiciones es verdadera.

La palabra or significa o, como en: ¿condición 1 o condición 2 se cumple?

let tieneHambre = false;
let hayPromocion = true;

let vaPedirComida = tieneHambre || hayPromocion;
console.log("¿Voy a pedir comida?", vaPedirComida);

¿Voy a pedir comida? true

❗ NOT (!): Invertir una condición

El operador ! invierte el valor de una condición:

• Si algo es true, lo convierte en false
• Si algo es false, lo convierte en true

La palabra not significa no, como en: ¿no se cumple la condición?

let luzEncendida = true;
console.log("¿Está la luz encendida?", luzEncendida);
console.log("¿Está la luz apagada?", !luzEncendida);

let tieneSuscripcion = true;
let conexionEstable = false;

let puedeJugarMultijugador = ____; // Completa usando &&
console.log("¿Puede jugar en multijugador?", puedeJugarMultijugador);

let pedidoListo = false;
let distanciaRepartidor = 0.5; // kilómetros

let mostrarNotificacion = ____; // Completa usando ||
console.log("¿Mostrar notificación?", mostrarNotificacion);

let esComodin = true;

let cartaNormal = ____; // Completa usando !
console.log("¿Es una carta normal?", cartaNormal);

Condicionales

🧭 Toma de decisiones en programación

Los condicionales son instrucciones que permiten a nuestros programas adaptarse y responder según diferentes situaciones, similar a cómo tomamos decisiones cotidianas.

Existen distintos modos de crear condicionales:

• if, else y else if - para decisiones simples y múltiples
• Operador ternario - para decisiones rápidas y sencillas
• switch - para múltiples opciones específicas

🔄 Estructuras Condicionales Básicas

🚦 if

La palabra if significa si…, como en: Si limpias tu cuarto, puedes seguir estudiando programación

Cuando queremos crear una acción que sólo ocurra bajo ciertas condiciones, podemos usar esta instrucción:

En código se ve algo así:

if (condicion) {
  // Instrucción que se ejecuta si la condición es verdadera
}

Por ejemplo:

let perritoSentado = true; // El perrito está sentado

if (perritoSentado) {
  console.log("¡Buen chico! Aquí tienes tu galleta 🦴");
}

En este ejemplo, si el perrito está sentado (la condición es verdadera), mostraremos un mensaje de felicitación y le daremos su premio.

🔀 else

La palabra else significa en otro caso, como en: Si limpias tu cuarto, puedes jugar. En otro caso, te quito el internet.

Nos ayuda a crear una instrucción que se ejecutará por defecto si es que no se cumple la condición de if:

La anatomía del código es la siguiente:

if (condicion) {
  // Instrucción que se ejecuta si la condición es verdadera
} else {
  // Instrucción que se ejecuta si la condición es falsa
}

Por ejemplo:

let luzVerde = false; // El semáforo está en rojo

if (luzVerde) {
  console.log("¡Adelante! Puedes avanzar 🚗");
} else {
  console.log("¡Alto! Debes detenerte 🛑");
}

En este ejemplo, como el semáforo está en rojo (luzVerde es false), el código mostrará el mensaje de alto.

🔄 else if

La frase else if significa de lo contrario si…, aunque es más sencillo pensarlo como … o si…. Como en el siguiente escenario:

• Si limpias tu cuarto, puedes…
• …o si lavas los trastes, puedes…
• …en otro caso, te quito el internet

Nos ayuda a crear más caminos dentro de estas decisiones.

La anatomía del código es la siguiente:

if (condicion1) {
  // Instrucción que se ejecuta si la condición1 es verdadera
} else if (condicion2) {
  // Instrucción que se ejecuta si la condición2 es verdadera
} else {
  // Instrucción que se ejecuta si ninguna condición es verdadera
}

Por ejemplo:

let poder = "estrella";

if (poder === "estrella") {
  console.log("¡Eres invencible! ⭐");
} else if (poder === "flor") {
  console.log("¡Puedes lanzar fuego! 🔥");
} else if (poder === "hongo") {
  console.log("¡Te has hecho más grande! 🍄");
} else {
  console.log("Tienes habilidades normales 🚶");
}

❓ Operador ternario

Existe una forma mucho más corta de usar un if + else. Le llamamos operador ternario.

Su anatomía se ve así:

condicion ? casoVerdadero : casoFalso;

• La condición va antes del signo de interrogación ?
• El primer valor (después del ?) es el resultado si la condición es verdadera
• El segundo valor (después del :) es el resultado si la condición es falsa

Por ejemplo:

let estaLloviendo = true;

let queLlevar = estaLloviendo ? "Llevo paraguas ☂️" : "Llevo gafas de sol 😎";

console.log(queLlevar);

Llevo paraguas ☂️

🔄 switch

La palabra switch viene del inglés y significa “interruptor” o “selector”.

Cuando tenemos distintos “caminos” para nuestro código es preferible utilizar la estructura switch, esta nos permite crear múltiples casos de una forma más estructurada.

La anatomía se ve de la siguiente manera:

switch (expresion) {
  case valor1:
    // Instrucciones para caso 1
    break;
  case valor2:
    // Instrucciones para caso 2
    break;
  default:
  // Instrucciones para los casos restantes
}

Los elementos principales son:

• switch (expresion): Evalúa una expresión para saber qué caso ejecutar
• case valorN: Define el valor a comparar con la expresión
• break: Evita que el código continúe ejecutando los casos siguientes
• default: Se ejecuta cuando ningún caso coincide con la expresión

let plataforma = "ComedyFlix";

switch (plataforma) {
  case "ComedyFlix":
    console.log("▶️ Reproduciendo 'Cómo conocí a tu meme'");
    break;
  case "MysteryPrime":
    console.log("🔦 Iniciando 'El misterio del WiFi perdido'");
    break;
  case "ActionMax":
    console.log("💣 Cargando 'John Wick: La venganza del examen final'");
    break;
  default:
    console.log("🔄 Seleccionando videos virales del momento...");
}

También es posible que haya lógica donde varios casos comparten las mismas instrucciones:

let dia = "Martes";

switch (dia) {
  case "Lunes":
  case "Miércoles":
    console.log("📚 Día de estudio en la biblioteca");
    break;
  case "Martes":
  case "Jueves":
    console.log("🏀 Práctica de deportes después de clase");
    break;
  case "Viernes":
    console.log("🎉 ¡Noche de juegos con amigos!");
    break;
  default:
    console.log("😴 Descanso en casa");
}

Mini Proyecto: Juego de Adivinanza de Números

¡Pongamos en práctica lo aprendido! En este mini proyecto, crearás un juego interactivo simple. El objetivo es que el usuario adivine un número secreto que tú definirás. Usaremos variables, pediremos datos al usuario y usaremos condicionales para darle pistas.

🎯 Objetivo

Desarrollar un script que:

1. Tenga un número secreto predefinido.
2. Pida al usuario que intente adivinar ese número.
3. Le diga al usuario si su intento fue muy alto, muy bajo o correcto.

💡 Conceptos a Utilizar

Para este ejercicio, necesitarás recordar y aplicar:

• Variables (let, const)
• Tipos de dato (number, string)
• Entrada del usuario (prompt)
• Conversión de tipos (Number())
• Operadores de comparación (===, >, <)
• Condicionales (if, else if, else)
• Mostrar salida (alert o console.log)

👣 Pasos

1. Define el número secreto: Guarda el número a adivinar en una constante (por ejemplo, const numeroSecreto = 42;).
2. Pide la entrada al usuario: Usa prompt() para preguntarle al usuario por un número. Guarda su respuesta en una variable.
3. Convierte la entrada: Recuerda que prompt() devuelve un string. Conviértelo a number usando Number() para poder hacer comparaciones numéricas.
4. Compara los números: Utiliza if, else if y else para comparar el número del usuario con tu número secreto.
5. Muestra el resultado:
   • Si acierta, felicítalo con un alert().
   • Si su número es mayor, indícale que es muy alto.
   • Si su número es menor, indícale que es muy bajo.
   • (Opcional) Considera qué pasa si el usuario no ingresa un número válido.

// 1. Define el número secreto
const numeroSecreto = 42; // ¡Puedes cambiar este número!

// 2. Pide la entrada al usuario
const intentoUsuarioStr = prompt("Adivina el número secreto (entre 1 y 100):");

// 3. Convierte la entrada a número
const intentoUsuario = Number(intentoUsuarioStr);

// 4. y 5. Compara y muestra el resultado
if (intentoUsuario === numeroSecreto) {
  alert("¡Felicidades! 🎉 Adivinaste el número secreto.");
} else if (intentoUsuario > numeroSecreto) {
  alert("Tu número es muy alto. ¡Sigue intentando! 📈");
} else if (intentoUsuario < numeroSecreto) {
  alert("Tu número es muy bajo. ¡Sigue intentando! 📉");
} else {
  // Opcional: Manejar casos donde la entrada no es un número válido
  alert(
    "🤔 Parece que no ingresaste un número. Por favor, intenta de nuevo con un número.",
  );
}

// Es útil mostrar los valores en la consola para depurar
console.log("Número secreto era:", numeroSecreto);
console.log("Tu intento fue:", intentoUsuario);

Ciclos

Los ciclos nos permiten repetir una acción varias veces sin tener que escribir el mismo código.

Son herramientas fundamentales que nos ayudan a automatizar tareas repetitivas de forma eficiente.

En JavaScript existen tres formas básicas de usarlos:

• while: Se repite mientras una condición sea true.
• do...while: Se ejecuta al menos una vez, luego se repite mientras una condición siga siendo true.
• for: Se usa cuando sabemos cuántas veces queremos repetir algo.

🔄 Ciclos while: Repetición condicional

🔬 Anatomía

La anatomía de un ciclo while es la siguiente:

while (condicion) {
  // Instrucciones a repetir mientras
  // la condición sea verdadera
}

• condición: Es una expresión que se evalúa a verdadero o falso
• {}: Contiene el código que se repetirá

Podríamos leerlo como: Mientras condición sea verdadera, haz {instrucciones}.

🔍 Control de calidad

let piezaDefectuosa = true;
let intentos = 0;

while (piezaDefectuosa && intentos < 3) {
  console.log(`Revisando pieza #${intentos + 1}`);
  piezaDefectuosa = Math.random() < 0.5; // 50% de probabilidad de defecto
  intentos++;
}

console.log(piezaDefectuosa ? "Lote rechazado" : "Pieza aprobada");

Revisando pieza #1
Revisando pieza #2
Pieza aprobada

✅ Ciclos do...while: Ejecución garantizada

🔬 Anatomía

La anatomía de un ciclo do...while es la siguiente:

do {
  // Instrucciones que se ejecutan al menos una vez
  // y se repiten si la condición es verdadera
} while (condicion);

• do: Hace referencia a que la acción se ejecuta al menos una vez
• {}: Contiene las instrucciones que se ejecutarán
• while (condicion): Define si el ciclo continúa

Podríamos leerlo como: Haz {instrucciones} y mientras condición se cumpla.

🧪 Pruebas de producto

let pruebaPasada;
let intentos = 0;

do {
  console.log(`Ejecutando prueba #${++intentos}`);
  pruebaPasada = Math.random() >= 0.3; // 70% de probabilidad de éxito
  console.log(pruebaPasada ? "✅ Prueba exitosa" : "❌ Prueba fallida");
} while (!pruebaPasada && intentos < 3);

Ejecutando prueba #1
❌ Prueba fallida
Ejecutando prueba #2
✅ Prueba exitosa

✔ Diferencia clave con while:
El do...while se ejecuta al menos una vez, incluso si la condición ya es false en la primera iteración.

🔢 Ciclos for: Iteración controlada

🔬 Anatomía

La anatomía de un ciclo for es la siguiente:

for (inicializacion; condicion; actualizacion) {
  // Instrucciones a repetir mientras
  // la condición sea verdadera
}

• inicializacion: Crea el estado inicial de una variable
• condicion: Se evalúa antes de ejecutar las instrucciones
• actualizacion: Cambia el estado de la variable al completar las instrucciones
• {}: Contiene el código que se repetirá

Podríamos leerlo como: Para inicializacion, mientras condicion sea verdadera, haz {instrucciones} y luego actualizacion.

📦 Empacado automático

const PRODUCTOS_POR_CAJA = 5;
let productosEmpacados = 0;

for (let i = 0; i < PRODUCTOS_POR_CAJA; i++) {
  console.log(`Empacando producto #${i + 1} en la caja`);
  productosEmpacados++;
}

console.log(`✅ Caja completa con ${productosEmpacados} productos`);

Empacando producto #1 en la caja
Empacando producto #2 en la caja
Empacando producto #3 en la caja
Empacando producto #4 en la caja
Empacando producto #5 en la caja
✅ Caja completa con 5 productos

En este ejemplo:

• El ciclo crea una variable auxiliar llamada i que comienza en 0.
• Realiza una evaluación para saber si i es menor que 5
• Ejecuta las instrucciones en caso de que sea true.
• Incrementa en 1 (i++) después de cada ejecución

// Rellena los espacios con la información correcta
for (____; ____; ____) {
  console.log(i);
}

let numero = ____; // Inicializa con prompt() para pedir un valor

// Condición: mientras el número sea menor o igual a 100
while (____) {
  // Por ejemplo: numero <= 100
  // Pide un nuevo número al usuario
  numero = ____; // Sobreescribe con prompt()
}

alert("¡Número válido!");