Caixas de Diálogo

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.

Alert

As caixas de diálogo de alerta são simples e informativas. Elas, geralmente, são utilizadas em validação de formulários ou bloqueio de ações.

Sua função é mostrar apenas uma mensagem com um botão de confirmação para que esta seja fechada.

Para chamar esta caixa de diálogo usamos a função alert(). Esta função recebe como parâmetro uma string que será a mensagem a ser exibida. Vejamos o código abaixo:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
alert ("Esta é uma caixa de diálogo ALERT do JavaScript!")
</SCRIPT>

Em caixas de diálogo há a possibilidade de controlar o fluxo de texto usando \n para a quebra de linhas.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
alert ("JavaScript \n Caixa de diálogo \n Alert")
</SCRIPT>

Prompt

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.

A função prompt() sempre irá retornar um valor, ou seja, podemos gravar o resultado da função em uma variável ou algo assim. Se clicarmos no botão OK, o valor a ser retornado será o que estiver escrito no campo de texto, mesmo se ele estiver vazio. Se clicarmos em CANCELAR, o valor retornado será null.

Abaixo criamos um exemplo no qual exige que o usuário digite o nome dele. Para isso, colocamos o prompt dentro de uma estrutura de repetição while que tem a seguinte condição: se o resultado for null (ou seja, se o usuário clicar em cancelar), ou então, se o resultado for vazio (ou seja, se o usuário não digitar nada e clicar no OK), neste caso, deve-se executar a repetição.

Dessa forma nos asseguramos que o usuário sempre irá digitar alguma coisa dentro da caixa de diálogo.

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

Confirm

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).

Como confirm() retorna um valor booleano, isso o torna ideal para ser usado com uma estrutura seletiva if. Por exemplo, podemos usar a caixa de diálogo de confirmação antes de redirecionarmos uma página para executar uma rotina para apagar algum registro do banco de dados.

No exemplo abaixo, não iremos tão profundamente quanto o cenário acima, pois envolve mais do que simples JavaScript. Aqui, apenas iremos demonstrar o resultado do clique em algum dos dois botões.

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

Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons.

Gostou? Indique nosso site!

Este artigo foi lido 21432 vezes

Páginas Relacionadas