TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear cuadros de diálogo de alerta, aviso y confirmación con JavaScript?

6

Crear cuadro de diálogo de alerta con JavaScript

El cuadro de diálogo de alerta es una ventana emergente que aparece en el navegador solo con un botón "Aceptar" para informar un mensaje muy pequeño a los usuarios. El cuadro de alerta se utilizará para mostrar un mensaje de advertencia o un mensaje de información. Por ejemplo:

  • Un mensaje de bienvenida al usuario cuando se carga el sitio.
  • Resultado de la validación de un resultado no válido
  • Una información sobre el tiempo de inactividad del sitio o el tiempo de mantenimiento.

Aquí discutimos cómo crear un cuadro emergente de alerta usando JavaScript con código de ejemplo. Obtenga más información sobre cómo crear alertas en Bootstrap 4.

¿Cómo funciona?

La función JavaScript alert() se activa cuando se invoca un script en una página que mostrará el argumento de cadena en un cuadro de alerta emergente. Hasta que se responda el cuadro de alerta, el navegador no continuará cargando la página web.

Sintaxis

alert("Your Message Here");

Ejemplo

A continuación se muestra un código de ejemplo de un cuadro de alerta en JavaScript. Este cuadro aparecerá cuando la página se cargue como un cuadro de bienvenida y tendrá la opción de hacer clic en el botón "Aceptar" o cerrar el cuadro de diálogo en navegadores como Google Chrome. Tan pronto como el usuario haga clic en "Aceptar" (o cerrar), se cargará una imagen. El navegador dejará de procesar la página hasta que se responda un cuadro de alerta.

<HTML> <HEAD> <TITLE>ALERT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> alert("Welcome to Our Website!!!"); document.write('<IMG SRC=""/>'); </SCRIPT> </BODY> </HTML>

A continuación se muestra la imagen de un cuadro de alerta en el navegador Chrome cuando se ejecuta el código anterior.

¿Cómo crear cuadros de diálogo de alerta, aviso y confirmación con JavaScript?

Cuadro de alerta de JavaScript en Google Chrome

Crear cuadro de diálogo de solicitud con JavaScript

El cuadro de diálogo de solicitud se utiliza para mostrar la salida personalizada en una página web basada en la entrada del usuario. A diferencia de un cuadro de alerta que se utiliza para mostrar un mensaje corto con un solo botón "Aceptar", el cuadro de aviso tiene las siguientes características:

  • Mostrar un mensaje predeterminado en el cuadro
  • El usuario puede ingresar una entrada en el cuadro de texto
  • La entrada del usuario se devuelve al script.
  • El cuadro de aviso tiene dos botones "Aceptar" y "Cancelar"

¿Cómo funciona?

El cuadro de aviso también detiene la carga de la página web hasta el momento en que se recibe una respuesta del usuario. Necesita los siguientes dos conjuntos de información:

  • Un mensaje que se mostrará en el cuadro de aviso.
  • Texto predeterminado que se mostrará en el cuadro de texto; esto es opcional; puede dejar el texto predeterminado en blanco
  • Cuando se hace clic en el botón "Aceptar", el texto ingresado en el cuadro se pasa al script
  • Cuando se hace clic en el botón "Cancelar", el valor NULL se pasa al script de nuevo.

Sintaxis

prompt ("Message", "Default Value");

Ejemplo

prompt ("What is the color you like?", "Green");

Ejemplo práctico para crear un cuadro de diálogo de solicitud utilizando JavaScript

El cuadro de aviso se puede utilizar en muchos escenarios prácticos y un ejemplo es saludar al usuario junto con el nombre. El siguiente código pedirá el nombre de usuario cuando se cargue la página y luego agregará el nombre con el mensaje de saludo para mostrarlo en el navegador.

<HTML> <HEAD> <TITLE>PROMPT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> document.write("<h1>Greetings</h1>"); document.write(prompt("Enter Your Name: ", "Name")); document.write(" Welcome to Our Site!</h1>"); </SCRIPT> </BODY> </HTML>

¿Cómo se ve?

A continuación se muestra la imagen de un cuadro de aviso en el navegador Chrome cuando se ejecuta el código anterior.

¿Cómo crear cuadros de diálogo de alerta, aviso y confirmación con JavaScript?

Cuadro de aviso de JavaScript en Google Chrome

Cuando el usuario ingresa el nombre y presiona el botón "Aceptar", el nombre se pasa al script y todos los mensajes se muestran según la función document.write. El espacio en blanco en el cuadro de entrada también se considera un nombre válido en el cuadro de solicitud de JavaScript.

Visualización de cuadro de aviso con nombre de usuario

Cuando el usuario hace clic en el botón "Cancelar", se pasa un valor nulo y se muestra en el navegador en lugar del nombre.

Visualización de cuadro de aviso con valor nulo

Crear cuadro de diálogo de confirmación mediante JavaScript

Este es un tercer tipo de cuadro de diálogo proporcionado en JavaScript además de cuadros de aviso y alerta. Esta sección explica cómo crear un cuadro de diálogo de confirmación utilizando JavaScript, que se utiliza para confirmar la acción realizada por el usuario.

El cuadro de diálogo Confirmar tiene las siguientes características:

  • Un mensaje predeterminado que se mostrará en el cuadro.
  • Dos botones: Aceptar y Cancelar

¿Cómo funciona?

El cuadro de confirmación, al igual que otros cuadros de diálogo, también detiene la ejecución hasta que se recibe la respuesta del usuario. La acción del usuario puede ser Aceptar o Cancelar.

  • El valor verdadero se pasa al programa de llamada cuando se presiona el botón OK
  • El valor falso se pasa al programa de llamada cuando se presiona el botón Cancelar

Sintaxis

confirm ("Message");

Ejemplo

confirm ("Do you want to close this window?");

Ejemplo practico

El siguiente código JavaScript utiliza un método de solicitud para hacer una pregunta al usuario. Se muestra un cuadro de confirmación para mostrar que la respuesta es correcta o incorrecta.

<HTML> <HEAD> <TITLE>CONFIRM BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> var q = "What is 5+5?"; var a = 10; var c = "<h2>You are a Genius</h2>"; var ic = "<h2>Reload to Try Again</h2>"; var response = prompt(q,"0"); if (response != a) { alert("Wrong, Better Luck Next Time!!!"); } else { alert("Correct! Well done!!!"); } var o = (response == a)? c: ic; document.write("<BR/>"); document.write(o); </SCRIPT> </BODY> </HTML>

¿Cómo se ve?

A continuación se muestra la imagen de un cuadro de aviso en el navegador Chrome cuando se ejecuta el código anterior y el cuadro de confirmación se muestra en función de la exactitud de la respuesta proporcionada en el cuadro de texto del aviso.

¿Cómo crear cuadros de diálogo de alerta, aviso y confirmación con JavaScript?

JavaScript confirmando la respuesta correcta

¿Cómo crear cuadros de diálogo de alerta, aviso y confirmación con JavaScript?

JavaScript confirmando una respuesta incorrecta

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More