Ambos cuadros aparecen como una ventana emergente o puede llamarlos cuadro emergente. Hay tres tipos de cuadros emergentes, puede tener conocimientos básicos leyendo ¿Cuáles son los tipos de cuadros emergentes disponibles en JavaScript? y JavaScript | Artículo de cuadros de diálogo .
- Cuadro de alerta
- Caja de confirmación
- Cuadro de aviso
Todas estas ventanas emergentes abren una ventana modal, lo que significa que el usuario no puede interactuar con el resto de los componentes de la página web sin responder primero a esta ventana. En este artículo, discutiremos entre los dos cuadros emergentes más confusos Alerta y cuadro de confirmación .
Cuadro de alerta:
- Se utiliza un cuadro de alerta para informar/alertar al usuario sobre un evento.
- Este tipo de cuadro emergente solo tiene un botón, llamado ‘Aceptar’, y no tiene valor de retorno.
- Alert Box se puede llamar usando la función de alerta («mensaje») .
Casilla de Confirmación:
- Se utiliza un cuadro de confirmación para proporcionar al usuario una opción sobre un evento.
- Este tipo de cuadro emergente tiene dos botones, llamados ‘Aceptar’ y ‘Cancelar’, y devuelve ‘verdadero’ y ‘falso’ cuando se hace clic en los botones respectivos.
- El buzón de confirmación se puede llamar usando la función confirmar («mensaje»).
El siguiente ejemplo ilustra las diferencias entre el cuadro de alerta y el cuadro de confirmación. Ejemplo:
html
<!DOCTYPE HTML>
<html>
<head>
<title>
Alert Box vs Confirmation Box
</title>
</head>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<button onclick="alertBox()">
Show Alert Box
</button>
<button onclick="confirmationBox()">
Show Confirmation Box
</button>
<script>
function alertBox(){
alert("GeeksforGeeks: This" +
" is an Alert Box.");
}
function confirmationBox(){
confirm("GeeksforGeeks: This" +
" is a Confirmation Box.");
}
</script>
</body>
</html>
Producción:
La acción basada en el cuadro de confirmación devuelve valores diferentes. Pero el cuadro de alerta solo devuelve el valor acordado que el usuario tiene-
- Cuando se presiona el botón ‘Aceptar’ en el cuadro de confirmación, la función confirmar() devuelve ‘verdadero’, cuando se presiona ‘Cancelar’ devuelve ‘falso’.
- A continuación se muestra una instrucción If-Else simple para verificar el tipo de devolución.
- Logramos esto modificando la función ‘confirmationBox()’ en el fragmento de código anterior.
javascript
function confirmationBox(){
if(confirm("GeeksForGeeks: This is a Confirmation Box")){
console.log("'OK' button was pressed.");
}else{
console.log("'Cancel' button was pressed.");
}
}
Salida: salida en la consola del navegador cuando se presionan los botones ‘Aceptar’ y luego ‘Cancelar’.
Veamos las diferencias en forma tabular -:
| cuadro de alerta | cuadro de confirmación | |
| 1. | El cuadro de alerta se utiliza si queremos que la información llegue al usuario. | El cuadro de confirmación se usa si queremos que el usuario verifique o acepte algo. |
| 2. | Debe hacer clic en «Aceptar» para continuar cuando aparezca un cuadro de alerta. | Necesitamos hacer clic en «Aceptar» o «Cancelar» para continuar cuando aparezca un cuadro de confirmación. |
| 3. |
Su sintaxis es -: window.alert(“algúntexto”); |
Su sintaxis es -: window.confirm(“algúntexto”); |
| 4. | Siempre devuelve verdadero, siempre debemos hacer clic en «Aceptar» para continuar. | Devuelve verdadero si hacemos clic en «Aceptar» |
| 5. | El cuadro de alerta quita el foco de la ventana actual y obliga al navegador a leer el mensaje. | Devuelve falso si no hacemos clic en “OK” |