La entrada de datos con prompt - Curso de JavaScript de cero a máster - Capítulo 17


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.

Código JavaScript

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.

Resultado en el navegador

Solicita el nombre del usuario.

El método prompt de JavaScript

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

El método prompt de JavaScript

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.

Código JavaScript

let nombre;

nombre = prompt("Introduce tu nombre");

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

Resultado en el navegador

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

El método prompt de JavaScript

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

El método prompt de JavaScript botón cancelar

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.

Código JavaScript

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

  1. Utiliza un prompt para preguntar al usuario su edad. Esta se almacenará en una variable.

  2. 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í: Haz click aquí.

Capítulos


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.