Artigo: Alert em Javascript - Gigasystems

JavaScript

Em por

No artigo irei lhes apresentar 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.

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:

  • Alert (alerta)
  • Confirm (confirmação)
  • Prompt (caixa de entrada)

Alert em Javascript

O alert é uma das mais simples caixas de diálogo de se fazer, 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 (ok) 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:

<!DOCTYPE html>
<html>
<head>
<title>Alert em Javascript</title>
<script>
function funcao()
{
   alert("Hello Word!");
}
</script>
</head>
<body>
<input type="button" onclick="funcao()" value="Exibir Alert" />
</body>
</html>

O resultado do código acima deve ser o mesmo que abaixo.

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.

Para entendermos melhor vejamos o código javascript da função:

<!DOCTYPE html>
<html>
<head>
<title> Alert em Javascript</title>
</head>
<body>
<p>Clique no botão para exibir a caixa de confirmação.</p>
<button onclick="funcao()">Clique aqui</button>
<p id="demo"></p>
<script>
function funcao()
{
var x;
//recebemos o valor do botão pressionado ok ou cancelar em uma variavel
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>

Clique no botão para exibir a caixa de confirmação.

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 abaixo iremos criar uma caixa de prompt onde o usuário deverá digitar a sua idade e a mesma será exibida para ele depois.

Para entendermos melhor vejamos o código javascript da função: 

<!DOCTYPE html>
<html>
<head>
<title>Alertas</title>
</head>
<body>
<p>Clique para exibir.</p>
<button onclick="myFunction()">Clique aqui</button> 
<p id="Alerta"></p>
<script>
function myFunction()
{
var x;
//recebemos nossa entrada em uma variavel
var idade=prompt("Digite sua idade:");
if (idade!=null)
  {
//concatemos a frase a ser exibida
  x="Idade: " + idade + " anos.";
//mostramos na tela
  document.getElementById("Alerta").innerHTML=x;
  }
}
</script>
</body>
</html>

O seu resultado deverá ser como este abaixo.

Obs: 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”.

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.

<!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').click(function(){
                    $('#dialog').dialog('open');
                    return false;
                });        
                $('#dialog_link, ul#icons li').hover(
                    function() { $(this).addClass('ui-state-hover'); },
                    function() { $(this).removeClass('ui-state-hover'); }
                );
            });
        </script>
        <style type="text/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>
        <h2 class="demoHeaders">Clique no Botão</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>

No tutorial de hoje 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.

Para fazer o download do exemplo do jQuery UI Dialog, basta clicar no link a seguir: Exemplo de Alert em Javascript usando jQuery Ui.

Dúvidas, críticas ou sugestões comentem abaixo. =)

Olá, deixe seu comentário para Alert em Javascript

Já temos 2 comentário(s). DEIXE O SEU :)
Clayton

Clayton

Muito bom e legal, só que onde coloco esses códigos? No index? Se é um tutorial de veria ter explicado tudo né......
★☆☆☆☆DIA 14.12.15 10h12RESPONDER
N/A
Enviando Comentário Fechar :/
Leonardo Martins

Leonardo Martins

Olá Clayton, que bom que você gostou, quanto a sua dúvida, os códigos você pode por onde você desejar, não tem lugar ou página, tudo vai depender de sua aplicação com está ou conforme for a necessidade, e está sim explicado como realizar os alerts. Obrigado e bons estudos!
★☆☆☆☆DIA 15.12.15 15h12RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

Veja Também:

Artigos Relacionados a categoria: JavaScript

Soluções

...CURTIU? AINDA NÃO VIU NOSSO PORTFÓLIO?


Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite, veja agora mesmo nossos Cases de Sucesso e tenha seu site nos padrões atuais preparado para maioria dos dispositivos e navegadores.