JavaScript

Em 30/01/2015 às 08:01h por Leonardo

Alert em Javascript

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 4 comentário(s). DEIXE O SEU :)

Eder Pereira

Muito bom, teria neste codigo acrescentar para alterar o laber do botão "OK" para "Confirmar"?
Eder Pereira
Email: edermeto@gmail.com

★★★★★DIA 30.04.21 10h310 GOSTEI :)RESPONDER

N/A

Ngoma Fortuna

Fantástico! Este é o site (na verdade vou mais pelo blog, até segunda opinião) que eu proucurava, didática acessível e objectiva, conteúdo de qualidade sem falar do design. Vou morar neste site e aprender tudo que poder e sem demorá me me cadastrar no newslatter para receber vossas novidades.
Ngoma angolano

★★★★★DIA 01.04.20 07h501 GOSTEI :)RESPONDER

Marcos Martins

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 09h120 GOSTEI :)RESPONDER

N/A

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 14h120 GOSTEI :)RESPONDER

N/A