Você provavelmente já recebeu uma mensagem de alerta ao preencher um formulário ou durante a confirmação de algum procedimento em uma página na internet. Uma das maneiras de usar esse recurso é com o JavaScript alert, que faz parte das funções de browser, ou seja, um conjunto de recursos disponíveis no navegador que podem ser manipulados por meio do JavaScript.
Entender como esse método funciona é importante para que as pessoas que desenvolvem softwares saibam como usá-lo em suas aplicações web, já que eles podem ser aplicados de diferentes maneiras. Pensando nisso, fizemos este post em que vamos mostrar:
- O que é JavaScript alert?
- Qual é a sintaxe?
- O que são caixas de diálogo e quais são os 3 tipos?
- Como pular linha no alert?
- Qual a compatibilidade com os navegadores?
Quer saber como esse recurso funciona? Vamos lá!
O que é JavaScript alert?
Antes de explicar o que é o método alert(), vamos falar rapidamente sobre o que é o Browser Object Model (BOM). Ao abrir uma página HTML, o navegador cria um conjunto de objetos que são organizados hierarquicamente. No topo dessa hierarquia está o objeto window, que controla toda a página e permite acessar os objetos filhos, além de propriedades e métodos associados a eles.
Os objetos relacionados ao BOM estão associados a recursos para a manipulação do navegador, como os objetos screen, location, history e outros, que são controlados pelo objeto window. O método alert(), portanto, faz parte desse conjunto e é usado para permitir a interação com a pessoa usuária da página.
O método alert() exibe uma mensagem no navegador por meio de uma caixa de diálogo, que nada mais é que uma pequena janela popup. Além do texto, também é exibido um botão de confirmação para indicar que a pessoa realmente leu a mensagem. Portanto, a janela só será fechada após o clique no botão de confirmação.
Por ter a característica de bloquear a navegação da pessoa usuária enquanto o botão confirmar não for clicado, esse recurso deve ser usado com moderação. Além disso, existem navegadores que oferecem a função de bloquear o uso dessa funcionalidade.
Qual é a sintaxe?
O método alert() é um dos tipos de caixas de diálogo disponíveis no navegador. Sua função é exibir o parâmetro mensagem, que pode ser fornecido como uma variável ou ter um valor constante definido no código. Existem outras duas maneiras possíveis de se comunicar com o usuário e falaremos sobre elas mais adiante. Confira a sintaxe a seguir:
window.alert(“mensagem”); É importante dizer que a declaração window antes do alert() é opcional, pois o objeto window tem escopo global. Portanto, é possível escrever o comando simplesmente dessa forma:
alert(“mensagem”);
O que são caixas de diálogo e quais são os 3 tipos?
Basicamente, as caixas de diálogo são janelas modais que são exibidas no navegador com o objetivo de interagir com a pessoa usuária da página. Por meio delas é possível exibir alertas, fazer perguntas e obter respostas. Como cada uma tem a função diferente da outra, a sintaxe e a forma de utilização do recurso também mudam. Confira, a seguir, como os tipos de alert JavaScript funcionam.
Alert()
Como já mencionamos, o método alert() é indicado para quando é preciso informar algo à pessoa usuária, como avisar sobre uma falha no preenchimento de um formulário, dar boas-vindas em um novo cadastro efetuado em uma página e muitas outras situações. Para demonstrar o seu funcionamento, confira o código a seguir.
<!DOCTYPE html>
<html>
<head>
<title>
Teste do método window.alert()
</title>
<meta charset="utf-8">
</head>
<body>
<form name="formCadastro" onsubmit="return validarFormulario()" method="post">
<label for="nome">Informe o seu Nome:</label>
<input type="text" name="nome">
<input type="submit" value="Enviar">
</form>
<script>
function validarFormulario(){
var nomePessoa = document.forms["formCadastro"]["nome"].value;
if (nomePessoa == "") {
alert("Favor informar o seu nome!");
return false;
}
else{
alert("Olá, " + nomePessoa + " !");
return true;
}
}
</script>
</body>
</html> No exemplo acima, criamos um formulário em que a pessoa deve informar o seu nome. A seguir, fazemos a validação para verificar se o campo não está vazio. Assim, ao clicar no botão enviar, o evento onsubmit definido na tag HTML form chama a função validarFormulário().
Além de verificar se o campo está vazio, a função exibe a mensagem de alerta para que a pessoa informe seu nome. Caso o conteúdo tenha sido preenchido, é exibida uma mensagem de cumprimento. Perceba que para recuperar o nome, usamos o comando document.forms[“formCadastro”][“nome”].value.
Assim como o BOM está relacionado com as funções do navegador, existe o DOM (Document Object Model), que se relaciona com os elementos HTML da página e permite a sua manipulação por meio do JavaScript.
Confirm()
Outro tipo de caixa de diálogo é o método confirm(). Seu objetivo é permitir que a pessoa usuária da página decida se deseja ou não executar uma ação determinada. Para isso, exibe uma janela modal com uma mensagem e dois botões: um de confirmação e outro que cancela a ação. Confira a sintaxe:
confirm("mensagem");É importante dizer que não é possível alterar o texto usado nos botões da janela modal do método confirm(), que correspondem a OK e Cancelar. Veja no algoritmo abaixo uma forma de aplicação do JavaScript alert confirm usado para confirmar a exclusão dos elementos de uma lista.
<!DOCTYPE html>
<html>
<head>
<title>
Teste do método window.confirm()
</title>
<meta charset="utf-8">
</head>
<body>
<p>Escolha um item da lista para removê-lo:</p>
<select name="itens" id="itens" size="6" style="width: 150px">
<option>Camiseta</option>
<option>Calça</option>
<option>Sapato</option>
<option>Bolsa</option>
</select>
<br/>
<input type="button" value="Excluir item" onclick=excluirItemSelecionado()>
<script>
function excluirItemSelecionado(){
var itens = document.getElementById("itens");
if (itens.selectedIndex == -1){
alert("Selecione um item na lista!");
return;
}
var indice = itens.options[itens.selectedIndex].index;
var itemSelecionado = itens.options[itens.selectedIndex].text;
var resultado = confirm("Deseja excluir o item: " + itemSelecionado + " ?");
if (resultado == true) {
itens.removeChild(itens[indice]);
alert("O item " + itemSelecionado + " será excluído da lista!");
}
else{
alert("Você desistiu de excluir o item " + itemSelecionado + " da lista!");
}
}
</script>
</body>
</html> Em primeiro lugar, criamos um código HTML com uma lista com quatro elementos que poderão ser excluídos por meio de um botão, que chama a função excluirItemSelecionado() ao ser clicado.
Perceba que aqui também usamos o objeto document para recuperar o elemento select e encontrar qual foi o item selecionado para a exclusão. Também colocamos uma validação logo no início da função, caso a pessoa usuária pressione o botão sem selecionar nenhum elemento da lista. Assim, será exibido um alerta para que ela faça uma escolha.
O próximo passo é a recuperação sobre qual é o índice do elemento selecionado e o seu conteúdo. Vamos precisar dessas informações para informar qual item será excluído e exibir na tela o alerta de confirmação, no qual mostramos para a pessoa qual foi o item escolhido por ela.
O método confirm() retorna verdadeiro se a escolha for a alternativa confirmar, e falso se a opção escolhida for cancelar. Por isso, precisamos usar uma variável para armazenar o retorno do comando quando o utilizamos no código. No nosso exemplo, criamos a variável resultado para guardar esse valor.
Portanto, se a variável resultado for verdadeira, excluímos o elemento correspondente da lista e mostramos uma mensagem para informar que o item escolhido foi removido. Já se a escolha for cancelar a operação, exibimos uma mensagem para mostrar que o item não será removido.
Prompt()
O próximo tipo de caixa de diálogo é o método prompt(). Seu objetivo é obter alguma informação da pessoa usuária da página. Confira a sua sintaxe:
window.prompt(“argumento1”, [“argumento2”]);
No qual:
argumento1: a mensagem destinada à pessoa usuária, que corresponde à solicitação feita.
argumento2: texto opcional que serve como um exemplo do que deve ser preenchido no prompt.
Além dos argumentos, o método prompt() também exibe dois botões: OK e Cancelar. O OK indica que a pessoa preencheu o campo, enquanto o cancelar significa que ela deseja cancelar a operação. Vamos continuar com o exemplo anterior, entretanto, agora vamos adicionar um novo elemento à lista. Veja o código a seguir.
<!DOCTYPE html>
<html>
<head>
<title>
Teste do método window.prompt()
</title>
<meta charset="utf-8">
</head>
<body>
<p>Vamos adicionar novos itens:</p>
<select name="itens" id="itens" size="6" style="width: 150px">
<option>Camiseta</option>
<option>Calça</option>
<option>Sapato</option>
<option>Bolsa</option>
</select>
<br/>
<input type="button" value="Adicionar item" onclick=adicionarItem()>
<script>
function adicionarItem(){
var item = prompt("Qual objeto você deseja incluir na lista?", "Adicione um novo objeto");
if (item == null || item == "") {
alert("O uso do prompt foi cancelado!");
} else {
var itens = document.getElementById("itens");
var option = document.createElement("option");
option.text = item;
itens.add(option, itens[0]);
}
}
</script>
</body>
</html> Perceba que na função adicionarItem() usamos o método prompt() para solicitar à pessoa o nome do objeto que ela deseja adicionar. O próximo passo é verificar se ela pressionou a opção cancelar e exibir uma mensagem de alerta. Já se for informado um valor, ele será adicionado à lista de objetos.
Observe que usamos o método prompt() com o segundo argumento preenchido. Por isso, aparece a frase “Adicione um novo objeto” na linha do prompt.
Como pular linha no alert?
Como mencionado, não é possível alterar o texto dos botões da caixa de diálogo e também não podemos estilizar a janela modal com CSS. Entretanto, ainda é possível usar o alert JavaScript personalizado.
Uma forma de fazer isso é pulando linhas. O objetivo é tornar a mensagem mais clara e visível à pessoa usuária da página. Para isso, basta adicionar “\n” no texto a ser exibido. Confira o exemplo a seguir.
<!DOCTYPE html>
<html>
<head>
<title>
Teste de quebra de linha
</title>
<meta charset="utf-8">
</head>
<body>
<h2>Exibir um alert com quebra de linha!</h2>
<input type="button" value="Exibir alert" onclick=exibeAlert()>
<script>
function exibeAlert(){
alert("Agora você já sabe\ncomo pular linha\nnos métodos: \nalert, confirm e prompt!");
}
</script>
</body>
</html>
Qual a compatibilidade com os navegadores?
Verificar a compatibilidade dos recursos com os navegadores é importante para evitar falhas que podem ocorrer caso a ferramenta não ofereça suporte ao método usado. Afinal, para as pessoas que acessam a página, é desagradável clicar em um botão e não obter nenhuma resposta. Os métodos alert(), confirm() e prompt() são suportados pelos principais navegadores.
Confira a lista de navegadores compatíveis:
- Chrome;
- Internet Explorer;
- Firefox;
- Safari;
- Opera.
Os métodos JavaScript alert, confirm e prompt são alguns dos recursos que facilitam a interação entre a pessoa usuária e a página web. Cada um deles é indicado para uma situação específica. Por isso, é importante conhecer as formas de aplicação e a maneira de acessar o resultado dessa interação.
Gostou do conteúdo? Então confira nosso post sobre o que é a função callback e de que forma ela pode ser usada!
