JavaScript: cuadros de diálogo
JavaScript admite tres tipos importantes de cuadros de diálogo. Estos cuadros de diálogo se pueden utilizar para generar y alertar, o para obtener confirmación sobre cualquier entrada o para tener algún tipo de entrada de los usuarios. Aquí discutiremos cada cuadro de diálogo uno por uno.
Cuadro de diálogo de alerta
Un cuadro de diálogo de alerta se utiliza principalmente para dar un mensaje de advertencia a los usuarios. Por ejemplo, si un campo de entrada requiere ingresar algún texto pero el usuario no proporciona ninguna entrada, entonces, como parte de la validación, puede usar un cuadro de alerta para dar un mensaje de advertencia.
No obstante, un cuadro de alerta aún se puede usar para mensajes más amigables. El cuadro de alerta proporciona solo un botón "Aceptar" para seleccionar y continuar.
Ejemplo
<html>
<head>
<script type = "text/javascript">
<!--
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "Warn();" />
</form>
</body>
</html>Salida
Cuadro de diálogo de confirmación
Un cuadro de diálogo de confirmación se utiliza principalmente para obtener el consentimiento del usuario sobre cualquier opción. Muestra un cuadro de diálogo con dos botones:OK y Cancel.
Si el usuario hace clic en el botón Aceptar, el método de la ventana confirm()volverá verdadero. Si el usuario hace clic en el botón Cancelar, entoncesconfirm()devuelve falso. Puede utilizar un cuadro de diálogo de confirmación de la siguiente manera.
Ejemplo
<html>
<head>
<script type = "text/javascript">
<!--
function getConfirmation() {
var retVal = confirm("Do you want to continue ?");
if( retVal == true ) {
document.write ("User wants to continue!");
return true;
} else {
document.write ("User does not want to continue!");
return false;
}
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>Salida
Cuadro de diálogo de solicitud
El cuadro de diálogo de solicitud es muy útil cuando desea que aparezca un cuadro de texto para obtener la entrada del usuario. Por lo tanto, le permite interactuar con el usuario. El usuario debe completar el campo y luego hacer clic en Aceptar.
Este cuadro de diálogo se muestra mediante un método llamado prompt() que toma dos parámetros: (i) una etiqueta que desea mostrar en el cuadro de texto y (ii) una cadena predeterminada para mostrar en el cuadro de texto.
Este cuadro de diálogo tiene dos botones: OK y Cancel. Si el usuario hace clic en el botón Aceptar, el método de la ventanaprompt()devolverá el valor introducido en el cuadro de texto. Si el usuario hace clic en el botón Cancelar, el método de la ventanaprompt() devoluciones null.
Ejemplo
El siguiente ejemplo muestra cómo utilizar un cuadro de diálogo de solicitud:
<html>
<head>
<script type = "text/javascript">
<!--
function getValue() {
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>