quarta-feira, 24 de junho de 2015

Caixas de Diálogo, Alert, Prompt e Confirm

Nesse post, vamos falar da utilização das caixas de diálogos, para que serve e como utilizar.

Um recurso interessante de JavaScript é a possibilidade de criar caixas de diálogo simples, que podem ser muito informativas aos usuários que a visualizam.

Essas caixas de diálogo podem ser de alerta, de confirmação ou de prompt de entrada. Todas elas são chamadas de forma simples e intuitiva por uma função.

Então vamos mostrar na prática como criar cada uma delas e seu resultado final.

ALERT

<script language="JavaScript" type="text/javascript">
alert ("Esta é uma caixa de diálogo ALERT do JavaScript!")
</script>

Resultado:

Como vimos ele exibe uma caixa de alerta, com a informação que colocamos entre as aspas.

PROMPT

<script language="JavaScript" type="text/javascript">
var nome;
do {
    nome = prompt ("Qual é o seu nome?");
} while (nome == null || nome == "");
alert ("Seu nome é "+nome);
</script>

Resultado:

A caixa de diálogo de prompt nos possibilita requerer uma entrada ao usuário apesar de não ser tão útil, pois esse recurso pode facilmente ser substituído por um campo de texto feito em HTML.

Para chamarmos esta caixa de diálogo, usamos a função prompt() que recebe uma string como parâmetro. Esse parâmetro será a mensagem a ser exibida dentro da caixa de diálogo.

A caixa de diálogo de prompt possui três elementos: um campo input para texto, um botão OK e outro CANCELAR.

CONFIRM

<script language="JavaScript" type="text/javascript">
decisao = confirm("Clique em um botão!");
if (decisao){
    alert ("Você clicou no botão OK,\n"+
               "porque foi retornado o valor: "+decisao);
} else {
    alert ("Você clicou no botão CANCELAR,\n"+
               "porque foi retornado o valor: "+decisao);
}
</script>

Resultado:

A caixa de diálogo de confirmação é chamada pela função confirm() e tem apenas dois botões: um OK e outro CANCELAR. Assim como a função prompt(), a função confirm() também retorna um valor que pode ser true (verdadeiro) ou false (falso).

Até o próximo Post ;)

Nenhum comentário:

Postar um comentário