TryHackMe - JavaScript: Simple Demo

Hola hacketones! En este capítulo de TryHackMe – JavaScript: Simple Demo Explora cómo se ve un programa JavaScript básico.

JavaScript Esencial

Aprender JavaScript muchas veces comienza con pequeños proyectos interactivos que ayudan a comprender cómo funciona la lógica de programación en la práctica. Un ejemplo clásico es el juego de adivinar un número, donde el programa genera un valor secreto y el usuario intenta descubrirlo mediante intentos sucesivos. Este tipo de ejercicio introduce conceptos fundamentales del lenguaje mientras se construye una aplicación simple pero dinámica.

Todo comienza con la configuración y almacenamiento de los datos. En JavaScript, las variables permiten guardar información que el programa necesita utilizar durante su ejecución. Por ejemplo, el número secreto puede declararse como una constante usando const, ya que su valor no cambia una vez generado. En cambio, el número de intentos o la suposición del jugador pueden almacenarse en variables declaradas con let, que sí permiten modificaciones durante el flujo del programa.

Para generar el número secreto se utiliza una función aleatoria. Mediante Math.random() combinado con Math.floor() es posible crear un número entero dentro de un rango específico, como entre 1 y 20. Este valor se convierte en el objetivo del juego, y el usuario deberá descubrirlo mediante prueba y error.

Cuando el jugador introduce su respuesta, el programa recibe esa información normalmente como texto. Para poder compararla con el número secreto es necesario convertirla en un número entero. Aquí entra en juego parseInt(), una función que transforma la entrada de texto en un valor numérico que el programa puede evaluar correctamente.

Construyendo un Juego de Adivinanza

Una vez que el programa tiene el número ingresado por el usuario, comienza la parte central de la lógica: la evaluación de la suposición. A través de estructuras condicionales como if, else if y else, el código compara la respuesta del jugador con el número secreto. Si el número es mayor de lo esperado, el sistema indicará que es demasiado alto. Si es menor, mostrará una pista indicando que es demasiado bajo. Finalmente, cuando ambos valores coinciden, el programa anuncia la victoria.

Para mantener el juego activo hasta que se acierte el número correcto, se utiliza un bucle de repetición. Este bucle permite que el programa continúe solicitando intentos mientras la condición principal se mantenga. En este caso, la condición se basa en que la suposición del usuario sea diferente al número secreto, lo que suele evaluarse con operadores lógicos como !==, que verifica si dos valores no son iguales.

Este pequeño proyecto combina varias piezas esenciales de JavaScript: declaración de variables, generación de números aleatorios, conversión de tipos de datos, estructuras condicionales y bucles de repetición. Aunque el resultado final es un juego sencillo, el proceso de construcción permite entender cómo se conectan los elementos básicos del lenguaje para crear lógica interactiva.

Con este tipo de ejercicios se empieza a desarrollar una mentalidad de programación, donde cada problema se divide en pasos claros y cada decisión del programa se basa en condiciones y datos. A partir de aquí, es posible avanzar hacia proyectos más complejos que integren interfaces web, interacción con usuarios en el navegador y automatización de procesos dentro del ecosistema de JavaScript.

Conceptos y Elementos de JavaScript en el Juego Guess the Number

Concepto	Palabra Clave o Método	Descripción	Uso en el Código	Tipo de Elemento
Declaración de Variable	let	Se utiliza para declarar variables cuyo valor puede ser modificado a lo largo de la ejecución del programa.	Se utiliza para inicializar ‘tries’ y ‘guess’ en 0 al inicio de guess_v3.js.	Palabra clave
Declaración de Constante	const	Se utiliza para declarar valores que permanecen fijos y no pueden ser reasignados durante el programa.	Se emplea para definir el número ‘secret’ y la entrada ‘text’ del usuario.	Palabra clave
Generación de Números Aleatorios	Math.random()	Método que devuelve un número decimal aleatorio entre 0 (inclusive) y 1 (exclusivo).	Parte de la expresión para generar el número secreto entre 1 y 20.	Método
Redondeo hacia Abajo	Math.floor()	Método que elimina la parte decimal de un número redondeándolo al entero inferior más cercano.	Se aplica al resultado de Math.random() * 20 para obtener un número entero.	Método
Salida de Datos por Consola	console.log()	Método utilizado para imprimir o mostrar mensajes y valores en la pantalla/terminal.	Muestra instrucciones al usuario y retroalimentación sobre si el número es alto, bajo o correcto.	Método
Entrada de Usuario	rl.question()	Método que muestra una pregunta al usuario y espera a que este ingrese una respuesta por teclado.	Captura la suposición del jugador bajo el mensaje ‘Take a guess:’.	Método
Conversión a Entero	parseInt()	Método que analiza una cadena de texto y la convierte en un número entero de una base específica.	Convierte la variable ‘text’ (entrada del usuario) a un número entero de base 10.	Método
Estructura de Control Condicional	if / else if / else	Estructuras que permiten ejecutar diferentes bloques de código según se cumplan o no ciertas condiciones.	Evalúa si ‘guess’ está fuera de rango, es menor, mayor o igual a ‘secret’.	Condicional
Bucle de Repetición	while()	Bucle que repite un bloque de instrucciones mientras una condición específica sea verdadera.	Mantiene el juego activo mientras ‘guess’ sea diferente de ‘secret’.	Bucle
Operador de Desigualdad	!==	Operador lógico que significa ‘no es igual’ (estricto).	Condición del bucle while (guess !== secret) para continuar el juego.	Operador
Operador Lógico OR	\|\|	Operador que representa la disyunción lógica ‘o’.	Verifica si el número es menor a 1 O mayor a 20 en la validación de rango.	Operador
Manejo de Excepciones	try / finally	Bloques utilizados para intentar ejecutar código y asegurar que se realice una limpieza al finalizar, ocurra o no un error.	Envuelve la lógica del juego y asegura el cierre de la interfaz ‘rl’ con rl.close().	Estructura de control
Cierre de Interfaz	rl.close()	Método que cierra la interfaz de lectura de línea para liberar los recursos del sistema.	Se ejecuta en el bloque ‘finally’ para finalizar la sesión de entrada de Node.js.	Método

Introducción a JS

El propósito de esta sala es darte una idea de un lenguaje de programación popular: JavaScript. Es casi seguro que has oído hablar de JavaScript; sin embargo, en esta sala, asumimos que nunca has estudiado ni escrito programas en este lenguaje.

JavaScript se utiliza en la mayoría de las páginas web que visitamos a diario. Por lo tanto, cuando pensamos en motores JavaScript, nos vienen a la mente los navegadores web. De hecho, JavaScript se desarrolló inicialmente para ejecutarse en equipos cliente, en particular, dentro de un navegador web. Sin embargo, esto cambió con el lanzamiento de Node.js, que permite a los desarrolladores crear aplicaciones web con JavaScript. En consecuencia, con la expansión de Node.js, JavaScript dejó de ser solo un lenguaje de programación del lado del cliente para convertirse también en un lenguaje del lado del servidor.

En esta sala, crearemos un juego de «Adivina el Número». Nuestro plan será el siguiente:

La computadora elige en secreto un número entre 1 y 20.
El usuario sigue adivinando hasta que acierta.
La computadora le dice al usuario si su estimación es demasiado baja o demasiado alta.

A continuación se muestra un ejemplo de sesión que ejecuta el programa.

Intentaremos seguir un enfoque similar al que seguimos en la sala de demostración de Python: Simple . Por lo tanto, elegimos la misma idea para implementar. Esto se debe a que puedes explorar las principales diferencias del lenguaje para la misma idea de programa.

Objetivos de aprendizaje

Aprenda sobre las variables de JavaScript
Comprender cómo se utilizan las declaraciones condicionales
Ver la iteración (bucle) en acción

Prerrequisitos

Variables

Puede continuar iniciando la máquina virtual adjunta haciendo clic en el botón «Iniciar máquina» (mostrado arriba). Visual Studio Code debería abrirse automáticamente, como se muestra en la captura de pantalla a continuación.

Preparando el escenario

Antes de comenzar, cabe destacar que los archivos JavaScript se pueden ejecutar de varias maneras: una es mediante un navegador web y otra, mediante Node.js. Sin embargo, para nuestros propósitos, la forma más sencilla de empezar es usar Node.js. Es fácil de descargar para su sistema y ejecutar los archivos JavaScript desde la línea de comandos.

Si te interesa ejecutar JavaScript en tu navegador web, es bastante sencillo. En tu navegador favorito, accede a las Herramientas para desarrolladores web. Por ejemplo, necesito presionar F12 en Firefox para abrir la consola, donde puedo ejecutar mi código JavaScript. A continuación se muestra una captura de pantalla de un navegador web ejecutando código JavaScript.

Tenga en cuenta que en esta sala, probaremos nuestro código JavaScript exclusivamente con Node.js. Este proceso se puede ejecutar escribiendo node demo.jsen la línea de comandos, donde demo.jses el nombre de nuestro archivo JavaScript.

Creando variables

Volviendo a nuestro «juego», necesitamos comenzar declarando variables. Consideramos una variable como un espacio en memoria que almacena un valor y nos permite modificarlo posteriormente. Por ejemplo, queremos registrar el número de tries intentos que ha realizado un usuario, así como su [número de intentos] guess. Podemos hacerlo declarando estas dos variables:

lettries =0;

letguess =0;

Indica let que estamos declarando variables. Al iniciar, el usuario no ha realizado ningún intento, por lo que tries se establece en 0; además, inicializamos guess con un valor que no puede ser accidentalmente el secret número que el usuario intenta adivinar. (Como nota al margen, secretes constante y se tratará en la siguiente subsección). Recuerda que el número secreto está entre 1 y 20.

Creando constantes

Solemos let declarar variables, cuyo valor puede cambiar a lo largo del programa; sin embargo, solemos const declarar constantes, cuyo valor no puede cambiar a lo largo del programa.

Contiene secret el número que intentaremos calcular mediante una suposición, y no debería cambiar. Como ya se mencionó, para declarar una constante, usamos la palabra clave const, por ejemplo, const secret = 12. Para asegurarnos de que secre tobtenga un nuevo valor aleatorio cada vez que ejecutamos el programa, necesitamos usar Math.random() el método de JavaScript.

constsecret =Math.floor(Math.random()*(20))+1;

Aunque los detalles de esta expresión no son el propósito clave de esta sala, compartiremos un breve desglose para los lectores curiosos.

Math.random()Da un decimal aleatorio entre 0 (inclusive) y 1 (excluyendo 1). Ejemplo: 0.372.
* 20tramos que van desde 0 hasta (casi) 20. Ejemplo: 7.44.
Math.floor()Elimina el decimal redondeándolo hacia abajo. Ejemplo: 7.44se convierte en 7.
+ 1cambia el rango de 0–19a 1–20.

El resultado secret final es 1, 2, 3, …, hasta 20.

Visualización de salida

Una vez seleccionado el número secreto, el programa informará al usuario de la finalización del paso. Para mostrarlo en pantalla, console.log()se puede usar [Nombre del usuario]. En la siguiente expresión de ejemplo, la cadena entre comillas dobles se mostrará en pantalla.

console.log(«I’m thinking of a number between 1 and 20»);

Responda las preguntas a continuación

¿Qué palabra se utiliza para declarar una variable?

let

¿Qué palabra se utiliza para declarar una constante?

const

¿Cuál es el método que llamamos para mostrar texto en la pantalla?

console.log()

Solicitar entrada al usuario

Antes de comenzar, tenga en cuenta que puede descargar el archivo zip adjunto. Incluye todas las versiones del programa presentes en la máquina virtual de destino . Este archivo le permite revisar la evolución del proyecto, comparar implementaciones o probar cada versión de forma independiente en su máquina local. Tener todas las iteraciones en un solo paquete le permitirá trabajar de forma más eficiente.

En la tarea anterior, configuramos nuestras variables y constantes; además, elegimos un número secret aleatorio para que el usuario lo adivine. Ahora, necesitamos pedirle que adivine e ingrese un número. En la primera línea, esperamos a que el usuario ingrese un valor y lo guardamos en [nombre del archivo] text. En la segunda línea, analizamos [nombre del archivo] text como un entero de base 10usando [ nombre del archivo parseInt(text, 10)]. El parseInt()método toma la entrada del usuario y la convierte de texto a un valor entero.

consttext =awaitrl.question(«Take a guess: «);

guess =parseInt(text,10);

Notas opcionales

La await instrucción pausa el sistema hasta que el usuario responde. Obviamente, el comportamiento predeterminado de Node.js no es esperar a que el usuario introduzca un valor. Recuerde que Node.js está diseñado como un entorno de ejecución para aplicaciones web, no para ejecutar un programa JavaScript de línea de comandos. Por lo tanto, necesitamos usar bibliotecas para anular el comportamiento predeterminado y obligar a Node.js a esperar al usuario. Las siguientes líneas lo consiguen:

import*asreadline from»node:readline/promises»;

import{stdin asinput,stdout asoutput }from»node:process»;

constrl =readline.createInterface({input,output });

La primera línea toma prestado ( import) el readline para que el programa pueda hacer preguntas y esperar respuestas escritas. La /promises parte permite que el programa haga una pausa ordenada hasta que el usuario responda. La segunda línea importa dos módulos más, stdin, abreviatura de entrada estándar (normalmente el teclado), y stdout, abreviatura de salida estándar (normalmente la pantalla); además, los renombra como input y output respectivamente. La tercera línea configura el canal de conversación utilizando el «micrófono» de la línea 1 y los «cables» de la línea 2.

¿Por qué es tan complicado obtener la entrada de la línea de comandos? Como usamos Node.js para probar nuestro programa JavaScript, no necesitamos mantener el servidor ocupado esperando la entrada del usuario. Desviarnos del valor predeterminado esperado requiere añadir estas importaciones de bibliotecas adicionales.

Ejecución limpia

Para leer la entrada del usuario, tuvimos que crear una interfaz que asemejamos a un micrófono. Antes de que el programa termine, debemos cerrar esta interfaz. También apagaría el micrófono después de la sesión de preguntas y respuestas. Para cerrar la interfaz, usamos rl.close(). Como resultado, nuestro código declarará e inicializará rl, lo usará para obtener textla entrada del usuario y close()lo… Estos tres pasos se muestran a continuación.

El try bloque crea un entorno seguro para que, si algo sale mal, el programa no se bloquee. Piense en ello como try ejecutar un conjunto de sentencias y, si algo ocurre, gestionarlo correctamente y finalmente solucionarlo.

Resumamos lo que estamos haciendo:

Estamos importando el readline módulo con la /promises parte, indicando que el script manejará la espera sin congelar todo
Luego importamos stdout(salida estándar) y stdin(entrada estándar) como input y output
Usando estos módulos importados, creamos la línea de lectura const con el nombre rl.
El programa hace su suposición usando Math.random()y la guarda como secret, una constante.
Declaramos dos variables tries y guess
Mostramos en la pantalla que se ha seleccionado “ un número entre 1 y 20 ”
La respuesta del usuario se considera una suposición y se guardará en text, una constante
La respuesta del usuario se convierte en un número usando parseInt()
El número trie saumenta en uno
Finalmente, limpiamos y cerramos la interfaz readline, rl que creamos anteriormente.

Poniéndolo todo junto

El primer borrador que hemos creado hasta ahora se muestra a continuación y también está disponible en el sistema como guess_v1.js, que se puede encontrar en /home/ubuntu/JavaScript-Demo .

¿Qué falta?

La falta más evidente es que el usuario no recibe retroalimentación, incluso si obtiene la respuesta correcta. Implementaremos esto en la siguiente tarea.