quinta-feira, 18 de junho de 2015

Caixas de Diálogo em JavaScript



Um recurso interessante do JavaScript é a possibilidade de criar caixas de diálogo, passando informações e alertas aos usuários que a visualizam. 

Aprendi recentemente sobre dois tipos: de alerta e de prompt. Elas são chamadas de forma simples por uma função.

ALERT

Esta caixa de dialogo é simples e informativa, e serve para mostrar apenas uma mensagem ao usuário, com um botão de confirmação para fechá-lo.

Para chamar esta caixa de dialogo, usaremos a função alert().

Abra um arquivo de texto (pode ser o bloco de notas - eu uso o Sublime Text 2) e salve o mesmo em html. Exemplo: caixa_dialogo.html

<script>
alert("Escreva sua mensagem aqui");
</script>

Salve e feche o arquivo, após abra-o novamente para ele carregar no navegador. Simples não? 



PROMPT

Na caixa de diálogo com a função prompt podemos interagir com o usuário.

Digite o código em um arquivo de texto novamente:

<script>
var nome = prompt ("Bom dia! Qual é o seu nome?");
document.write("Bem vindo, " + nome);
</script>

O resultado é este:


E podemos continuar interagindo, fazendo novas perguntas enquanto o chamamos pelo próprio nome.

<script>
var nome = prompt ("Bom dia! Qual é o seu nome?");
document.write("Bem vindo, " + nome);
document.write("<br>");
var idade = prompt (nome + ", quantos anos você tem?");
document.write(nome + " tem " + idade + " anos. ");
</script>


Dica: Para aparecer corretamente as letras com acentos utilize o código <meta charset="UTF-8"> no inicio, antes do <script>.

Abraços!

Anterior
Proxima

0 comentários: