Cómo usar el prompt() para obtener datos del usuario en JavaScript

Me voy a desviar por un capítulo de los condicionales para enseñarte algo que vamos a utilizar en ellos, y no solo en ellos.

Presta especial atención a este tema, ya que la cosa se empieza a poner interesante. Con lo que ya sabes hasta ahora y lo que vas a aprender en este capítulo, ya puedes hacer más cosas de lo que te piensas.

Lo que te voy a enseñar es para que tu código pueda interactuar con el usuario. Lo haremos con el método prompt().

Palabra del lenguaje nº 33 encontrada.
prompt es un método que permite al usuario introducir datos con los que el código puede interactuar.

Puedes guardar lo que recoge del usuario en una variable. Veamos un ejemplo.

let nombre;

nombre = prompt("Introduce tu nombre");

Declaro una variable sin iniciar (da igual si la inicias con cualquier cosa). Gracias a prompt(), se despliega una ventanita parecida a la del alert(), solo que en este caso, a parte de informar con un string, va a permitir introducir algo con el teclado. Lo que se introduzca, quedará almacenado en la variable nombre y podrá ser utilizado como un valor más en el código.

Solicita el nombre del usuario.

Lo escribe y pulsa aceptar. En caso de darle a cancelar, guarda un valor null (lo puedes comprobar por ejemplo, con un console.log()).

En el caso de que le des al botón aceptar con un nombre escrito, se almacena el valor en la variable nombre. Si no escribes nada y pulsas en aceptar, se guarda un valor vacío (en blanco).

¿Qué podemos hacer con este valor almacenado? Puedes hacer lo que quieras, solo tienes que llamar a nombre como ya sabes. Yo voy a hacer que se muestre en el documento un saludo con el nombre que se introduzca.

let nombre;
nombre = prompt("Introduce tu nombre");

document.write("Bienvenido/a a mi sitio web, " + nombre);

Suponiendo que en el alert introduzco el nombre "Programación Fácil", este será el resultado:

En caso de darle a cancelar saldría el valor null:

Mejorar el prompt con condicionales

Ya que estamos con los condicionales desde el capítulo anterior, es buen momento para que practiques un poco más con ellos.

Si el método prompt() recibe un valor, aunque sea un espacio en blanco, devuelve ese mismo valor. En cambio, si no se le especifica nada, devuelve el valor de null. Sabiendo esto, puedes crear un condicional que prevenga una acción del usuario con el botón de cancelar.

let nombre;

nombre = prompt("Introduce tu nombre");

if (nombre != null){
	document.write("Bienvenido/a a mi sitio web, " + nombre + ".");
} else {
	alert("No has introducido nada. Recarga la página para intentarlo de nuevo.");
}

En la condición del if le digo que si el valor obtenido por el prompt() en la variable nombre es != (diferente que null) es decir, que no es igual a null o que no está vacío, como prefieras decirlo, que me muestre un alert() con el texto de bienvenida y el valor que haya introducido el usuario. En cambio, si el valor es igual a null, se ejecutará el código del else y va a decir que no se ha introducido nada, así evitamos que aparezca el mensaje de bienvenida con un null.

prompt devuelve un tipo de dato string aunque le introduzcas un número. Compruébalo con un typeof().

Ejercicios de JavaScript

46. Utiliza un prompt() para preguntar al usuario su edad. Esta se almacenará en una variable.
47. Al código anterior, añádele un if else que diga que el usuario es mayor de edad si introduce un número mayor que 18 y que es menor si la edad almacenada es inferior a 18.

La solución la encontrarás aquí: Soluciones de ejercicios de JavaScript.