Como usaremos el navegador como nuestro entorno de demostración, veamos un par de funciones para interactuar con el usuario: alert
, prompt
y confirm
.
Éste ya lo hemos visto. Muestra un mensaje y espera a que el usuario presione “OK”.
Por ejemplo:
alerta("Hola");
La miniventana con el mensaje se llama ventana modal . La palabra "modal" significa que el visitante no puede interactuar con el resto de la página, presionar otros botones, etc., hasta que haya manejado la ventana. En este caso, hasta que presionen "OK".
El prompt
de función acepta dos argumentos:
resultado = mensaje (título, [predeterminado]);
Muestra una ventana modal con un mensaje de texto, un campo de entrada para el visitante y los botones Aceptar/Cancelar.
title
El texto para mostrar al visitante.
default
Un segundo parámetro opcional, el valor inicial del campo de entrada.
Los corchetes en la sintaxis [...]
Los corchetes alrededor de default
en la sintaxis anterior indican que el parámetro es opcional, no obligatorio.
El visitante puede escribir algo en el campo de entrada del mensaje y presionar Aceptar. Luego obtenemos ese texto en el result
. O pueden cancelar la entrada presionando Cancelar o presionando la tecla Esc , luego obtenemos null
como result
.
La llamada al prompt
devuelve el texto del campo de entrada o null
si se canceló la entrada.
Por ejemplo:
let age = Prompt('¿Cuántos años tienes?', 100); alert(`¡Tienes ${age} años!`); // ¡Tienes 100 años!
En IE: proporcione siempre un default
El segundo parámetro es opcional, pero si no lo proporcionamos, Internet Explorer insertará el texto "undefined"
en el mensaje.
Ejecute este código en Internet Explorer para ver:
dejar prueba = Prompt("Prueba");
Por lo tanto, para que las indicaciones se vean bien en IE, recomendamos proporcionar siempre el segundo argumento:
let prueba = solicitud("Prueba", ''); // <-- para IE
La sintaxis:
resultado = confirmar(pregunta);
La función confirm
muestra una ventana modal con una question
y dos botones: Aceptar y Cancelar.
El resultado es true
si se presiona OK y false
en caso contrario.
Por ejemplo:
let isBoss = confirm("¿Eres el jefe?"); alerta( esJefe ); // verdadero si se presiona OK
Cubrimos 3 funciones específicas del navegador para interactuar con los visitantes:
alert
muestra un mensaje.
prompt
muestra un mensaje pidiendo al usuario que ingrese texto. Devuelve el texto o, si se hace clic en el botón Cancelar o Esc , null
.
confirm
muestra un mensaje y espera a que el usuario presione “Aceptar” o “Cancelar”. Devuelve true
para Aceptar y false
para Cancelar/ Esc .
Todos estos métodos son modales: pausan la ejecución del script y no permiten que el visitante interactúe con el resto de la página hasta que se cierre la ventana.
Hay dos limitaciones compartidas por todos los métodos anteriores:
La ubicación exacta de la ventana modal la determina el navegador. Normalmente está en el centro.
El aspecto exacto de la ventana también depende del navegador. No podemos modificarlo.
Ese es el precio de la sencillez. Hay otras formas de mostrar ventanas más bonitas y una interacción más rica con el visitante, pero si las "campanas y silbatos" no importan mucho, estos métodos funcionan bien.
importancia: 4
Cree una página web que solicite un nombre y lo genere.
Ejecute la demostración
Código JavaScript:
let nombre = Prompt("¿Cómo te llamas?", ""); alerta(nombre);
La página completa:
<!DOCTYPE html> <html> <cuerpo> <guión> 'uso estricto'; let nombre = Prompt("¿Cómo te llamas?", ""); alerta(nombre); </script> </cuerpo> </html>