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. laugh

Veja Também:

Artigos Relacionados a categoria: JavaScript

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 10h12 RESPONDER
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 15h12 RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

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

Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite e veja agora mesmo e tenha um site de qualidade para o seu negócio!

[contato]
Ver o Portfólio Agora