Alert em JavaScript
Aprenda nesse artigo os diferentes tipos de alert em JavaScript e conferir como inserir eles em nosso código, deixando nosso sistema/site com uma interação maior com o usuário.
Olá pessoal, neste artigo vamos falar sobre alert em JavaScript. O alert é um recurso muito utilizado em JavaScript porque com ele é possível criar caixas de diálogos que aparecem na tela do usuário.
Existem diferentes tipos de caixa de diálogo, são elas:
- alerta
- confirmação
- prompt de entrada.
Relacionado: JavaScript Replace
Alert em JavaScript
O alert é uma das mais simples caixas de diálogo, com uma aparência simples e intuitiva elas são muito usadas em validações de formulários e/ou bloqueio de ações do browser.
Sua principal função é mostrar ao usuário uma mensagem e um botão de confirmação de que o usuário tenha visto a mensagem. Para chamar essa função, basta utilizarmos o código alert(), que receberá uma string(mensagem que será exibida ao usuário).
Para entendermos melhor vejamos o código JavaScript da função, como mostra a Listagem 1.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial de Alert em JavaScript - Linha de Código</title>
<script>
function funcao1()
{
alert("Eu sou um alert!");
}
</script>
</head>
<body>
<input type="button" onclick="funcao1()" value="Exibir Alert" />
</body>
</html></div>Listagem 1. Alert em JavaScript
O resultado do código acima deverá ser o mesmo que o apresentado na Figura 1.
Alert de Confirmação em JavaScript
A função de confirmação é um pouco diferente da função alert em JavaScript, dessa vez são exibidos dois botões, um de OK e outro de CANCELAR, separados por valores true (verdadeiro) e false (falso).
A função confirm() é muito utilizada em sistemas que utilizamos estruturas condicionais, como confirmação de alteração/exclusão de algum registro do banco de dados.
Na Listagem 2 iremos ver como utilizar a função confirm.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial de Alert em JavaScript - Linha de Código</title>
</head>
<body>
<p>Clique no botão para exibir a caixa de confirmação.</p>
<button onclick="funcao1()">Clique aqui</button>
<p id="demo"></p>
<script>
function funcao1()
{
var x;
var r=confirm("Escolha um valor!");
if (r==true)
{
x="você pressionou OK!";
}
else
{
x="Você pressionou Cancelar!";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>Listagem 2. Confirmação em JavaScript
O resultado o código a seguir deverá ser o mesmo que a Figura 2.
Alert de Prompt em JavaScript
O prompt é um pouco diferente do alert() e do confirm(), pois ele necessita que o usuário insira algum valor, ou seja, precisa de uma interação direta do usuário para que ele funcione.
Para chamarmos a função utilizamos o prompt(), o qual irá receber uma string(mensagem) que será exibida, normalmente em forma de pergunta, ao usuário.
A estrutura básica dessa caixa de diálogo é:
- Um campo input
- Botão OK
- Botão Cancelar
A função sempre irá retornar um valor, tudo que o usuário digitar no campo input será convertido em valor e será exibido na tela.
No exemplo da Listagem 3 iremos criar uma caixa de prompt onde o usuário deverá digitar a sua idade e a mesma será exibida para ele depois.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial de Alert em JavaScript - Linha de Código</title>
</head>
<body>
<p>Clique para exibir.</p>
<button onclick="myFunction()">Clique aqui</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var idade=prompt("Digite sua idade:");
if (idade!=null)
{
x="Idade: " + idade + " anos.";
document.getElementById("demo").innerHTML=x;
}
}
</script>
</body>
</html>Listagem 3. Prompt em JavaScript
O resultado gerado deverá ser o mesmo que nas Figuras 3 e 4.
Pulando linha no alert
Além das opções mostradas nesse tutorial, existe também a possibilidade de pularmos linha em nosso alert em JavaScript, para isso basta usar o “\n”, como podemos ver na Listagem 4.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial de Alert em JavaScript - Linha de Código</title>
<script>
function funcao1()
{
alert("Eu sou um\nAlert!");
}
</script>
</head>
<body>
<input type="button" onclick="funcao1()" value="Exibir Alert" />
</body>
</html>Listagem 4. Pulando linha no alert
O resultado será o exibido na Figura 5.
jQuery UI Dialog
Como alguns browsers possuem uma função de bloquear o alert em JavaScript, existe uma forma alternativa de proporcionar essa experiência ao usuário, ela é o Dialog do jQuery UI, ela é uma biblioteca que basicamente faz o mesmo efeito do alert, só que com algumas funcionalidades a mais como animações, etc.
Primeiro faça o download do jQuery UI no site oficial e coloque os arquivos baixados na mesma pasta da sua página.
Abaixo irei colocar o código-fonte do plugin implementado e depois o link de download dos arquivos utilizados. O código é bem simples e de fácil entendimento, qualquer dúvida podem ficar a vontade de comentar o artigo que irei ajudar com o maior prazer.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial de Alert em JavaScript - Linha de Código</title>
<link type="text/css"
href="jqueryui/css/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
<script type="text/JavaScript"
src="jqueryui/js/jquery-1.8.2.min.js"></script>
<script type="text/JavaScript"
src="jqueryui/js/jquery-ui-1.8.24.custom.min.js"></script>
<script type="text/JavaScript">
$(function(){
// Dialog
$("#dialog").dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$("#dialog_link").click(function(){
$("#dialog").dialog("open");
return false;
});
//hover states on the static widgets
$("#dialog_link, ul#icons li").hover(
function() { $(this).addClass("ui-state-hover"); },
function() { $(this).removeClass("ui-state-hover"); }
);
});
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
#dialog_link {padding: .4em 1em .4em 20px;text-decoration:
none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position:
absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>
</head>
<body>
<!-- Dialog NOTE: Dialog is not generated by UI in this demo
so it can be visually styled in themeroller-->
<h2 class="demoHeaders">Dialog</h2>
<p><a href="#" id="dialog_link"
class="ui-state-default ui-corner-all"><span
class="ui-icon ui-icon-newwin"></span>Abrir Dialog</a></p>
<!-- ui-dialog -->
<div id="dialog" title="Aqui você coloca o título">
<p>Texto que fica dentro do dialog</p>
</div>
</body>
</html>Listagem 5. jQuery UI Dialog
Neste tutorial vimos como trabalhar com os diversos tipos de alert em JavaScript de uma forma simples e objetiva, além de vermos também como implementar o jQuery UI Dialog.
Espero que tenham gostado e até o próximo tutorial.
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo