Web Sites com Ajax

Popup Boxes

Os popup boxes no JavaScript nos permitem alertar o usuário sobre algum acontecimento, pedir-lhe uma confirmação para que uma determinada ação possa ser executada e pedir-lhe que nos informe algum dado.

Assim, podemos criar três tipos de popup boxes. São eles: Alert box, Confirm box e Prompt box.

Vamos conhecer cada um deles.

Alert box

Sintaxe

alert("Curso iMasters - Web Sites com Ajax");

Vejamos o resultado abaixo na imagem de exemplo:

Esse tipo de popup box tem o objetivo de alertar o usuário sobre algo que ocorreu durante alguma ação por ele executada.

Um botão de OK é exibido junto a ela. Para prosseguir com a navegação é necessário que o usuário clique nesse botão.

Confirm box

Sintaxe

confirm("Você está cursando o curso: Web Sites com Ajax");

Vejamos uma imagem de exemplo desse tipo de popup box:

Com o Confirm Box, podemos ter a certeza se o usuário deseja ou não executar determinada ação, uma vez que esse box exibe dois botões: OK e Cancel.

Ao clicar em OK o box retorna true e ao clicar em Cancel o box retorna false.

Prompt Box

Sintaxe

// Sem sugestão de resposta.
prompt("Qual o curso você está fazendo no momento?","");

// Com sugestão de resposta.
prompt("Qual o curso você está fazendo no momento?","Web Sites com Ajax");

Vejamos os respectivos resultados nas imagens abaixo:

Ambos possuem a mesma característica e função: solicitar uma informação do usuário.

Porém, eles se diferenciam por um único detalhe: o segundo prompt box exibe uma sugestão de resposta, já o primeiro não.

Vejamos um exemplo integrando variável, condição, operadores, confirm box, alert box e prompt box:

var querMsg = confirm("Gostaria de receber uma mensagem de boas vindas?");

if(querMsg) {
 var nome = prompt("Por favor, qual o seu nome?","");
 if(nome != null && nome != "") {
  alert("Olá " + nome + ", seja bem vindo.");
 }
}


Vejamos a demonstração desse exemplo.

Vamos compreender esse exemplo. Definimos a variável querMsg com um valor proveniente de um confirm box, ou seja, essa variável poderá ter o valor true ou false. O primeiro valor é obtido quando o usuário clica no botão OK, já o segundo valor quando acioona o botão Cancel.

Em seguida, utilizamos a condição if (se) para verificar se a variável querMsg terá o valor true, o que significa dizer que o usuário clicou no botão OK, concordando em receber uma mensagem de boas vindas.

Logo após, criamos a variável nome, a qual terá seu valor informado pelo usuário através de um prompt box.

Através da condição if (se) verificamos se a variável nome não está null ou em branco. Caso essa verificação seja verdadeira, exibiremos a mensagem de boas vindas ao usuário.

• « Condições
• |
• Loops »