Introducción a JavaScript: construye «Adivina el número» 🎯

Prepárate para mi próximo taller con esta guía de conceptos, ejemplos y un reto práctico.

En este taller para principiantes aprenderemos a darle instrucciones a una computadora construyendo un juego: adivinar un número secreto del 1 al 10.

Usaremos CodePen para trabajar desde el navegador. El HTML y CSS estarán preparados; nos concentraremos en JavaScript.

Antes de comenzar

CodePen es un editor en línea donde puedes escribir HTML, CSS y JavaScript y ver el resultado en la misma página.

Abre los materiales:

Para seguir el taller en CodePen, escribe los ejemplos en el panel JS. Si descargas el proyecto de GitHub, utiliza script.js.

1. Primero, piensa en los pasos

Programar es escribir instrucciones para realizar una tarea. Un algoritmo es la secuencia de pasos que seguimos para resolverla, como una receta de cocina.

Nuestro juego seguirá estos pasos:

Generar un número secreto.
Leer el número del jugador.
Compararlos.
Mostrar si acertó o debe intentar más alto o más bajo.

2. Guarda información con variables

Una variable es como una caja con nombre donde guardamos información.

Ejemplo de TypeScript para dividir texto en líneas

const nombre = "Dhanibel";
let intentos = 0;
let ganaste = false;

Aquí usamos tres tipos de datos:

string: texto, como "Dhanibel".
number: números, como 0.
boolean: verdadero o falso, como false.

let permite reasignar un valor; const no permite reasignarlo.

Genera el número secreto

Ejemplo de TypeScript para dividir texto en líneas

const numeroSecreto = Math.floor(Math.random() * 10) + 1;

Parece mucho para una sola línea. Vamos por partes:

ParteQué haceMath.random()Genera un decimal desde 0 hasta menos de 1.* 10Lleva ese valor al rango de 0 hasta menos de 10.Math.floor()Redondea hacia abajo: obtenemos un entero de 0 a 9.+ 1Desplaza el resultado al rango de 1 a 10.

Por ejemplo: 0.73 → 7.3 → 7 → 8.

3. Toma decisiones con condicionales

Los operadores nos permiten comparar valores:

===: comprueba si dos valores son iguales sin convertir sus tipos.
<: menor que.
>: mayor que.

Con if, else if y else elegimos qué hacer según el resultado:

Ejemplo de TypeScript para dividir texto en líneas

const intento = 5;

if (intento === numeroSecreto) {
  console.log("¡Ganaste!");
} else if (intento < numeroSecreto) {
  console.log("Prueba un número más alto");
} else {
  console.log("Prueba un número más bajo");
}

console.log() muestra información en la consola, algo útil para comprobar qué está haciendo nuestro programa.

4. Organiza instrucciones con funciones

Una función agrupa instrucciones para ejecutarlas cuando las necesitemos.

Ejemplo de TypeScript para dividir texto en líneas

function saludar() {
  console.log("¡Hola!");
}

saludar();

Primero definimos saludar; después la ejecutamos escribiendo su nombre y los paréntesis.

En nuestro juego crearemos adivinar() y la ejecutaremos cuando alguien haga clic en el botón.

5. Conecta la lógica con la página

El DOM es la representación de la página que JavaScript puede consultar y modificar.

Estas son las herramientas que utilizaremos:

CódigoPara qué sirvedocument.getElementById()Busca un elemento por su ID..valueLee el contenido de un campo.Number()Convierte un valor a número..textContentCambia el texto de un elemento.addEventListener()Ejecuta una función cuando ocurre un evento.

Completa el reto

Este código funciona con los elementos guess, guessButton y message del proyecto inicial. Reemplaza los ejemplos anteriores por esta versión:

Ejemplo de TypeScript para dividir texto en líneas

const numeroSecreto = Math.floor(Math.random() * 10) + 1;

const input = document.getElementById("guess");
const button = document.getElementById("guessButton");
const message = document.getElementById("message");

function adivinar() {
  const intento = Number(input.value);

  if (
    input.value.trim() === "" ||
    !Number.isInteger(intento) ||
    intento < 1 ||
    intento > 10
  ) {
    message.textContent = "Escribe un número entero del 1 al 10";
  } else if (intento === numeroSecreto) {
    message.textContent = "🎉 ¡Ganaste!";
  } else if (intento < numeroSecreto) {
    message.textContent = "📈 Intenta un número más alto";
  } else {
    message.textContent = "📉 Intenta un número más bajo";
  }
}

button.addEventListener("click", adivinar);

La validación evita aceptar campos vacíos, decimales o números fuera del rango. || significa «o» y ! significa «no»: si alguna condición de error se cumple, mostramos el aviso.

Al hacer clic, adivinar() lee el valor, lo compara con el número secreto y actualiza el mensaje.

Esta primera versión permite intentos ilimitados. El número secreto se mantiene hasta que el código vuelve a ejecutarse.

6. Prueba y hazlo tuyo

Comprueba qué sucede con un campo vacío, un decimal y un número fuera del rango. Luego juega siguiendo las pistas.

Para ver el número secreto mientras pruebas, agrega temporalmente:

Ejemplo de TypeScript para dividir texto en líneas

console.log(numeroSecreto);

Cuando funcione, intenta:

Cambiar el rango a 1–20, incluyendo la generación y la validación.
Personalizar los mensajes.
Agregar un contador de intentos.
Hacer que el botón «Jugar otra vez» genere otro número.

El objetivo del taller es entender cómo resolver un problema paso a paso. El código se aprende practicando.