Cajas emergentes o alertas en JS en JavaScript

Esta parte del tutorial tiene como objetivo cubrir JavaScript «tal como está», sin ajustes específicos del entorno. Pero aún utilizamos un navegador como entorno de demostración. Así que deberíamos saber al menos algunas funciones de interfaz de usuario. En este capítulo nos familiarizaremos con las funciones del navegador alert, prompt y confirm.

Alert

Sintaxis:


alert(mensaje);

Esto muestra un mensaje y detie

 

ne la ejecución de la secuencia de comandos hasta que el usuario presione «OK».

Por ejemplo:

alert("Hola");

La mini-ventana 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 tratado con la ventana. En este caso – hasta que presionen «OK».

Prompt

La función prompt acepta dos argumentos:

result = prompt(title[, default]);

Muestra una ventana modal con un mensaje de texto, un campo de entrada para el visitante y los botones Aceptar y cancelar.

title //titulo
El texto para mostrar al visitante.
default //botones por defecto

Un segundo parámetro opcional, el valor inicial para el campo de entrada.
El visitante puede escribir algo en el campo de entrada de solicitud y presionar OK. O pueden cancelar la entrada presionando el botón CANCELAR o presionando la tecla Esc.

La llamada a prompt devuelve el texto del campo o null si la entrada fue cancelada.

Por ejemplo:

let edad= prompt('¿Qué edad tienes?', 100);
alert('Tú tienes ${edad} años cumplidos!); // Tú tienes 100 años cumplidos!

El segundo parámetro es opcional. Pero si no lo suministramos, Internet Explorer insertaría el texto «undefined«en el indicador.

Ejecute este código en Internet Explorer para ver que:

let test = prompt("Prueba");

Por lo tanto, para verse bien en IE, se recomienda proporcionar siempre el segundo argumento:

let prueba= prompt("Prueba", ''); // <-- for IE

Confirm

La sintaxis:

result = confirm(question);

La función confirm muestra una ventana modal con los botones question: Aceptar y CANCELAR.

El resultado es true si se presiona OK y de lo contrario false.

Por ejemplo:

let Jefe = confirm("¿Eres el jefe?");
alert( Jefe ); // true if OK es presionado

En la lección de hoy cubrimos tres funciones específicas del navegador para interactuar con el visitante:

  • alert muestra un mensaje.
  • prompt muestra un mensaje pidiendo al usuario que ingrese texto. Devuelve el texto o, si CANCELAR o Esc se presionan, todos los navegadores regresan null.
  • confirm muestra un mensaje y espera a que el usuario presione «OK» o «CANCELAR». Vuelve true para OK y false para CANCELAR o 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 el mensaje haya sido descartado.

Hay dos limitaciones compartidas por todos los métodos anteriores:

La ubicación exacta de la ventana modal está determinada por el navegador. Por lo general, está en el centro.

El aspecto exacto de la ventana también depende del navegador. No podemos modificarlo.

Ese es el precio por la simplicidad. Hay otras formas de mostrar ventanas más agradables y una interacción más rica con el visitante, pero si las «campanas y los silbidos» no importan mucho, estos métodos funcionan bien.