domingo, 20 de septiembre de 2015

JavaScript - Cuadros de diálogo

JavaScript soporta tres tipos importantes de cuadros de diálogo. Estos cuadros de diálogo se pueden utilizar para subir y alerta, o para obtener la confirmación de cualquier entrada o tener un tipo de entrada de los usuarios. Aquí vamos a discutir cada cuadro de diálogo uno a uno.

Cuadro de diálogo Alerta

Un cuadro de diálogo de alerta se utiliza sobre todo para dar un mensaje de advertencia a los usuarios. Por ejemplo, si un campo de entrada requiere que introduzca algún texto, pero el usuario no proporciona ninguna entrada, a continuación, como parte de la validación, puede utilizar un cuadro de alerta para dar un mensaje de advertencia.
Sin embargo, un cuadro de alerta se puede seguir utilizando para los mensajes más amigables. Cuadro de alerta le da sólo un botón "OK" para seleccionar y proceder.

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 sobre todo para tener el consentimiento del usuario en cualquier opción. Muestra un cuadro de diálogo con dos botones:Cancelar.
Si el usuario hace clic en el botón Aceptar, el método de la ventana de confirmación ()devolverá true. Si el usuario hace clic en el botón Cancelar, luego confirmar () devuelve falso. Puede utilizar un cuadro de diálogo de confirmación de la siguiente manera.

Salida

<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 Prompt

El cuadro de diálogo del sistema es muy útil cuando se desea pop-up de un cuadro de texto para obtener la entrada del usuario. Por lo tanto, le permite interactuar con el usuario. El usuario tiene que llenar el campo y haga clic en Aceptar.
Se muestra este cuadro de diálogo utilizando 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 que se mostrará en el cuadro de texto.
Este cuadro de diálogo tiene dos botones: Aceptar y Cancelar. Si el usuario hace clic en el botón Aceptar, el método de la ventana prompt () 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 () devuelve nulo.

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>

Salida

No hay comentarios:

Publicar un comentario