La función de alerta de JavaScript () es una función disponible en el objeto de ventana global. Ordena al navegador que muestre un cuadro de diálogo modal con un mensaje y un botón “Aceptar”.
He aquí un ejemplo básico de uso:
alert("Hello world!");
window.alert("Hello world");
Ejemplos usando alerta
1. Mensaje de alerta al hacer clic
Un caso de uso muy común para la función de alerta es usarlo al completar un formulario y luego intentar enviarlo haciendo clic en un botón.
Digamos que queremos asegurarnos de que el usuario es mayor de 18 años al llenar el siguiente formulario:
<form name="myForm" action="">
<label for="age">Age</label>
<input type="number" name="age" id="age" />
<button type="submit">Submit</button>
</form>
Todo lo que tenemos que hacer es adjuntar un detector de eventos al botón, verificar el valor del campo de entrada y luego mostrar el modal con la función de alerta de JavaScript:
var checkAge = (e) => {
if(document.querySelector('#age').value < 18){
e.preventDefault();
alert("You have to be older 18!");
}
};
document.querySelector('button').addEventListener('click', checkAge);
2. Cuadro de alerta antes de cerrar la ventana
También es una práctica común en los sitios web que requieren guardar los cambios para mostrar un mensaje de alerta cuando el usuario intenta cerrar la ventana o pestaña del navegador.
Para ello, primero tenemos que detectar cuando el usuario está a punto de cerrar la ventana. Podemos lograr esto de dos maneras diferentes, pero generalmente se recomienda usar detectores de eventos cuando sea posible.
window.addEventListener("beforeunload", showDialog);
window.onbeforeunload = showDialog;
Ahora todo lo que tenemos que hacer es mostrarles un diálogo. Pero en este caso, no usaremos la función de alerta para este escenario.
Lamentablemente, ya no podemos personalizar el mensaje que se muestra en el cuadro de diálogo. Todavía tenemos que devolver un texto para la compatibilidad con navegadores antiguos, pero lo más probable es que el mensaje no se muestre en los navegadores modernos. Mostrarán un mensaje predeterminado que le indicará al usuario que los cambios no se guardarán.
Entonces, así es como le decimos al navegador que queremos mostrar un mensaje, pero devolviendo una cadena en la función de evento:
var showDialog = (e) => {
return 'Dialog text here.';
};
window.addEventListener("beforeunload", showDialog);3. Cuadro de alerta al cargar la página
En algunos casos muy específicos, los sitios web pueden querer mostrar un mensaje de alerta en la carga de la página. Para hacer esto, todo lo que tenemos que hacer es disparar el mensaje de alerta en la sección
de nuestro HTML. De esta forma, la alerta se mostrará antes de cargar cualquier elemento en la página.<head>
<script>
alert("Displayed before page loads");
</script>
</head>
<body>
Your page content.
</body>
4. Mensaje de alerta usando una variable
El uso de una variable para mostrar diferentes mensajes en función de su contenido también se puede hacer con bastante facilidad. Simplemente pase la variable al método de alerta en lugar de un texto de cadena.
Aquí hay un ejemplo:
var myVariable = 'I love alert boxes!!';
alert(myVariable);
5. Alertar un mensaje que requiere confirmación
Tal vez desee mostrar una alerta que requiera la confirmación de los visitantes y que también les permita cancelarla o ignorarla mostrando los botones “Cancelar” y “Aceptar”. Para estos casos utilizaremos la función de confirmación, que puede verse como una variante de la función de alerta.
La función de confirmación simplemente agregará un botón “Cancelar” encima del botón “Aceptar” agregado por el método de alerta.
confirm('Do you want to continue?');Podemos captar la decisión del visitante comprobando el resultado del método. Será verdadero si el visitante hace clic en “Aceptar” y falso en caso contrario.
if(confirm("Do you want to continue?")){
}6. Alerta de un mensaje que muestra el campo de entrada
En algunas ocasiones, es posible que queramos capturar la entrada del usuario directamente en el mensaje de alerta. En estos casos, también nos alejaremos de la función de alerta y utilizaremos el aviso de la función alternativa. Esta función crea el mismo cuadro de diálogo pero le agrega un campo de texto y el botón “Cancelar”.
Admite dos parámetros. El primero es el texto que se muestra en el cuadro de diálogo (para la entrada) y el segundo es el valor predeterminado para la entrada (si lo hay).
prompt("Enter your name, please:", "Steve");
prompt("Enter your name, please:");
7. Alertas con estilos personalizados
Para usar sus propios modales de alerta personalizados, tendremos que usar JavaScript y CSS. La forma más fácil, rápida y probablemente más confiable de hacerlo es usar complementos externos en lugar de hacerlo usted mismo.
Uno de los más usados es dulcealerta2o incluso su predecesor SweetAlert.
Aquí hay un ejemplo de cómo se ve un cuadro de diálogo de alerta de confirmación cuando se usa este componente:
var showConfirm = (e) => {
e.preventDefault();Swal.fire({
title: 'Error!',
text: 'Do you want to continue',
confirmButtonText: 'Yeap!'
});
};
document.querySelector('button').addEventListener('click', showConfirm);
Como puede ver, no hay grandes cambios en nuestro código y el uso es bastante inmediato.
Puede consultar más ejemplos de alertas utilizando este componente en su página web.
Existen otros complementos de cuadros de diálogo, así que no dude en elegir el que mejor se adapte a sus necesidades.
Artículos relacionados
