JavaScript - caixas de diálogo
JavaScript oferece suporte a três tipos importantes de caixas de diálogo. Essas caixas de diálogo podem ser usadas para levantar e alertar, ou para obter confirmação sobre qualquer entrada ou para ter um tipo de entrada dos usuários. Aqui, discutiremos cada caixa de diálogo, uma por uma.
Caixa de Diálogo de Alerta
Uma caixa de diálogo de alerta é usada principalmente para dar uma mensagem de aviso aos usuários. Por exemplo, se um campo de entrada exige a inserção de algum texto, mas o usuário não fornece nenhuma entrada, então, como parte da validação, você pode usar uma caixa de alerta para fornecer uma mensagem de aviso.
No entanto, uma caixa de alerta ainda pode ser usada para mensagens mais amigáveis. A caixa de alerta fornece apenas um botão "OK" para selecionar e prosseguir.
Exemplo
<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>Resultado
Caixa de Diálogo de Confirmação
Uma caixa de diálogo de confirmação é usada principalmente para obter o consentimento do usuário sobre qualquer opção. Ele exibe uma caixa de diálogo com dois botões:OK e Cancel.
Se o usuário clicar no botão OK, o método da janela confirm()retornará verdadeiro. Se o usuário clicar no botão Cancelar, entãoconfirm()retorna falso. Você pode usar uma caixa de diálogo de confirmação da seguinte maneira.
Exemplo
<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>Resultado
Caixa de Diálogo Prompt
A caixa de diálogo de prompt é muito útil quando você deseja exibir uma caixa de texto pop-up para obter a entrada do usuário. Assim, permite que você interaja com o usuário. O usuário precisa preencher o campo e clicar em OK.
Esta caixa de diálogo é exibida usando um método chamado prompt() que tem dois parâmetros: (i) um rótulo que você deseja exibir na caixa de texto e (ii) uma string padrão para exibir na caixa de texto.
Esta caixa de diálogo possui dois botões: OK e Cancel. Se o usuário clicar no botão OK, o método de janelaprompt()retornará o valor inserido na caixa de texto. Se o usuário clicar no botão Cancelar, o método da janelaprompt() retorna null.
Exemplo
O exemplo a seguir mostra como usar uma caixa de diálogo de prompt -
<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>