Artigos JavaScript Alert em JavaScript

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 em JavaScript
Figura 1. Alert em JavaScript

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.

Confirmação em JavaScript
Figura 2. Confirmação em JavaScript

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.

Confirmação em JavaScript
Figura 3. Prompt em JavaScript
Resultado do Prompt em JavaScript
Figura 4. Resultado do Prompt em JavaScript

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.

Pulando linha no alert
Figura 5. Pulando linha no alert

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.