Variables con let, prompt y alert

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:23

Variables con let, prompt y alert

Curso Gratis de Programación Básica 2022

Clase 7 de 84

Clase 7 / 84

Recursos

Aprender a declarar variables en JavaScript es el primer paso para programar en serio. Aquí entenderás cómo reservar un espacio en memoria con let, capturar datos del usuario con prompt y mostrarlos con alert, todo con ejemplos prácticos pensados para quien recién empieza.

¿Qué significa declarar una variable en JavaScript?

Declarar una variable es reservar un nombre en la memoria del navegador para usarlo después en cualquier parte de tu aplicación. No se trata solo de escribir a = 5 y ya; necesitas avisarle al lenguaje que ese espacio existe.

En JavaScript moderno usas la palabra reservada let para crear ese espacio. Por ejemplo:

javascript let nombre = "";

Las comillas vacías le indican al procesador algo importante: la variable existe, va a contener texto y por ahora está vacía. Si en lugar de comillas pusieras un 1, estarías diciendo que la variable es numérica. Esa diferencia entre texto y número va a ser clave más adelante.

¿Qué hace let en JavaScript? let declara una variable con un nombre reservado en memoria. Puedes asignarle un valor inicial y luego cambiarlo o reutilizarlo en otras partes del código.

¿Cómo capturar datos del usuario con prompt?

Una vez tienes la variable lista, necesitas llenarla con algo. Para pedirle información a quien usa la página, JavaScript ofrece una función llamada prompt, que se comporta de forma parecida a alert pero abre una caja de texto donde la persona puede escribir.

La estructura es directa:

javascript let nombre = prompt("¿Cuál es tu nombre?");

Lo que la persona escriba dentro de esa caja queda guardado automáticamente en la variable nombre. Si solo escribes prompt("¿Cuál es tu nombre?") sin asignarlo a nada, la pregunta aparece, pero el dato se pierde. Por eso el signo igual importa tanto: conecta lo que el usuario escribe con el espacio que reservaste con let.

¿Y si el usuario escribe un número?

Aquí viene un detalle que vale la pena tener claro. Si alguien responde 5+5 esperando obtener 10, no va a pasar. JavaScript trata por defecto todo lo que viene de un prompt como cadena de texto, no como expresión numérica. Para convertirlo en número tienes que ser explícito, y evaluar expresiones del usuario directamente además sería un hueco de seguridad.

¿Por qué prompt devuelve siempre texto? Porque JavaScript asume que cualquier entrada del usuario es una cadena. Si necesitas un número, debes convertirlo manualmente con funciones como Number() o parseInt().

¿Cómo mostrar el valor de una variable con alert y concatenación?

Tener el nombre guardado no sirve de mucho si no lo usas. Para devolverle un mensaje a la persona puedes apoyarte en alert y unir el texto fijo con la variable usando el signo +. Esa unión tiene un nombre técnico: concatenación.

javascript let nombre = prompt("¿Cuál es tu nombre?"); alert("Bienvenida " + nombre);

Si alguien escribe Francisca, el navegador mostrará Bienvenida Francisca. Fíjate en el espacio dentro de las comillas después de Bienvenida; sin él, las palabras quedarían pegadas.

Los pasos para que el flujo funcione son tres:

Declarar la variable con let para reservar el espacio.
Capturar el dato con prompt y asignarlo a esa variable.
Mostrar el resultado con alert concatenando texto y variable.

Con esa secuencia ya tienes una mini interacción real entre tu código y quien visita la página.

¿Qué conceptos clave acabas de dominar?

En pocos minutos aprendiste a manejar piezas que aparecen en casi cualquier proyecto web.

Variable: nombre reservado en memoria para guardar datos y reutilizarlos.
let: palabra reservada de JavaScript para declarar variables modernas.
Cadena de texto: valor delimitado por comillas, como "" o "Pepito".
prompt: función que abre una caja para pedir información al usuario.
alert: función que muestra un mensaje en pantalla.
Concatenación: unir cadenas y variables usando el signo +.

Existen formas más elegantes que prompt para pedir datos, como formularios HTML, y las irás conociendo en cursos más avanzados. Por ahora, esta base te alcanza para entender cómo el código guarda, transforma y devuelve información.

¿Qué variable vas a crear primero en tu próximo ejercicio? Cuéntame en los comentarios cómo te fue al probar tu primer prompt.

Griger Ratia

Hace 4 años

Usar alert() o prompt() es genial cuando aprendemos. Pero en el futuro casi no lo usaremos. Lo que sí usaremos es (y es un spoiler) console.log() y será de nuestros mejores amigos cuando estamos realizando páginas web y verificando el código javascript.

En JavaScript, para poder usar un espacio en memoria y ponerle un nombre a ese espacio y un contenido dentro, debes reservarlo primero. Para eso usas alguna de estas palabras: var, let, o const. Cada una de estas palabras es para manejar el espacio/variable en memoria de una forma diferente. Por ejemplo, const la usamos para reservar un espacio cuyo contenido no pueda ser cambiado. Lo que se guarde allí no podrá ser distinto nunca.

Si quiero guardar mi edad en un espacio en memoria, lo hago así: var mi_edad = 28 pero no siempre tendré 28 años, por eso uso la palabra var, con ella no tendré problemas cuando quiera cambiar 28 por 29. Pero si en un espacio quisiera guardar PI, haría así const PI = 13.1415 como PI siempre valdrá lo mismo y jamás debería cambiar, entonces reservamos este espacio con const que significa que su valor es constante, que no cambiará. let es muy parecido a var. Y lo mejor es que sepas sus diferencias mientras avances en tu aprendizaje de JavaScript.

Karina L Biasini

Hace 4 años

Una genialidad!!

Romina Alejandra Mustone

Hace 4 años

muy interesante!! gracias!

Comentarios (468)468 comentarios

Wilmer Felipe Pungo

Yeltsin Andrés Ñique Paredes

Carlos Eduardo Gomez García

Rubén Ernesto Aragón Gil

Aby Leyva

al mn

Joana Casillas

Kevin Daniel Hincapie Lumbaque

Samuel Steven Bernal Martínez

Erick Alay

David Yana Ortega

Elian Nahuel Navarro

Rolando Tarqui Benito

David Cifuentes Zapata

Lizette Rosalía Dazza Hernández

Alejandro Castro

David Hernandez

Juan Castro

Profesor

Camila Esmeralda Molina Pineda

Andres Dos Santos

Eduardo Peña Ramos

Sonia Silva Contreras

Augusto Aldana

Lucas Villar Marte

Gustavo Jiménez León

Ángel Téllez Gutiérrez

Edison Manrique

Camilo Manrique

Jesús Fernando Obregón Armenta

Mauricio Castro

Mirta Elvira Guzman

Felipe Castro Hernández

Daniela Itriago

braulio Gonzalez

Santiago Garzon

David Yañez

Fundamentos de Programación

Programa tu primer videojuego desde cero

Tu primera variable en la consola del navegador

Crea tu primer archivo HTML desde cero

Estructura básica de HTML: head y body

Estructura de árbol en HTML y JavaScript

Instala VS Code y configura tu primer HTML

Variables con let, prompt y alert

Condicionales if y else en JavaScript

Lógica if-else en piedra papel tijera

Números aleatorios con Math.random y Math.floor

Creación y uso de funciones en programación

Cómo funcionan los ciclos en programación

While en JavaScript: cómo evitar loops infinitos

Rutas relativas para separar JS del HTML

Qué es el DOM y los eventos en JS

Desarrollando un juego con HTML y JavaScript

Cómo usar section, id y span en HTML

Radio buttons para elegir mascota en HTML

Cómo hacer que un botón responda al clic

Detectar el input seleccionado con checked

Detectar la mascota seleccionada con checked

innerHTML para mostrar la mascota elegida

Mascota enemiga aleatoria con JavaScript

Selección de ataques con variables globales en JS

Ataque aleatorio enemigo en JavaScript

createElement y appendChild en el DOM

Lógica de ganaste, perdiste o empataste en JS

Tablas de verdad con AND, OR y NOT

Vidas dinámicas con innerHTML en JavaScript

Validar vidas en cero con JavaScript

Reiniciar juego con location.reload

Mostrar y ocultar secciones con JavaScript

Estilos con CSS

Selectores, propiedades y valores en CSS

block, inline e inline-block en CSS

Centrar elementos en CSS con Flexbox

Modelo de caja en CSS explicado

Diseño y Estilo de Páginas Web con HTML y CSS

Cómo estilizar botones con CSS y Google Fonts

Estilos CSS para Mejorar la Interfaz de un Juego

Estiliza botones de ataque con Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid para organizar ataques en columnas

Diseño responsivo con media queries CSS

CSS :checked para resaltar selección activa

Optimización de código

Refactoriza tu JavaScript antes de escalar

let vs const al refactorizar funciones

Clases y objetos en JavaScript explicados

Clases y objetos en JavaScript con Mokepones

Uso de Arreglos para Almacenar Objetos en JavaScript

Ataques de Mokepon con arrays y push

Renderizar arrays en HTML con forEach

Cómo evitar null al inyectar HTML dinámico

Eliminar hardcode con fuente de verdad

Selección aleatoria de mascotas con arrays

Botones de ataque dinámicos con for loop

Botones de ataque dinámicos con forEach

Eventos de clic en botones dinámicos con JS

Secuencia de ataques aleatorios del enemigo

Lógica de combate por turnos en JavaScript

Lógica de victorias en un juego JavaScript

Optimización y Corrección de Errores en Juegos Web con JavaScript

Mapa con canvas

Dibuja imágenes en canvas con JavaScript

Mover personajes en canvas con JavaScript

Movimiento continuo en canvas con setInterval

Eventos de Teclado para Controlar Personajes en Juegos

Fondo del canvas y mascota dinámica en JS

Métodos de clase para pintar enemigos en Canvas

Cómo detectar colisiones entre objetos en JS

Conectar colisiones con ataques en JS

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos responsive para el mapa con CSS

Backend: videojuego multijugador

Cómo funciona la arquitectura cliente servidor

Instalación de Node.js en Windows para desarrollo backend

Hola Mundo con Node.js y npm

Servidor web con Express.js desde cero