Introducción a prompt()

Generated avatar
javascript prompt

Tabla de contenido

🎯 Introducción

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

En JavaScript, podemos hacerlo con prompt().

CUIDADO

En programas profesionales no se usa, pero para principiantes es una buena forma de introducirnos al manejo de datos

🖥️ ¿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.

INFO

💡 Debemos tener en cuenta que prompt() siempre devuelve un String (cadena de caracteres)

🔢 ¿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.

☝️🤓
🏋️‍♂️ Ejercicio

Crea un programa que:

  1. Pide al usuario su nombre usando prompt()
  2. Pide su edad usando prompt()
  3. Convierta la edad a número
  4. Muestre un mensaje que diga “¡Hola [nombre]! En 10 años tendrás [edad + 10] años”
🏋️‍♂️ Ejercicio

Crea un programa que calcule el precio de una pizza personalizada:

  1. Pide al usuario el tamaño de la pizza usando prompt() (“pequeña”, “mediana”, “grande”)
  2. Pide la cantidad de ingredientes extra usando prompt()
  3. Convierte la cantidad de ingredientes a número
  4. Calcula el precio total (pequeña: $8, mediana: $10, grande: $12, cada ingrediente extra: $1)
  5. Muestra un mensaje que diga “Tu pizza [tamaño] con [cantidad] ingredientes extra costará $[precio] dólares”
🚀 Extra

Investiga sobre:

  1. ¿Qué diferencia hay entre parseInt() y parseFloat()?
  2. ¿Qué otros métodos existen para convertir strings a números en JavaScript?
  3. ¿Por qué no se recomienda usar prompt() en aplicaciones profesionales?

Comentarios

Compartir

Esta artículo aparece en estas rutas de aprendizaje

El curso más corto de programación (con JavaScript)

Conceptos fundamentales explicados de la manera más superficial para comenzar a entender de qué se trata la programación

Generated avatar