Javascript alert Programacao WEb "Partilhando"
- 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
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
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
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
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
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
Espero que tenham gostado e até o próximo tutorial.
Links Úteis
- Como NÃO escrever código: Programar não é apenas escrever código que funcione. É importante escrever códigos legíveis, organizados e eficientes.
- Armazenamento de dados no Cordova: Criando uma aplicação de lembretes: Aprenda a utilizar o IndexedDB em aplicações Cordova para armazenar informações localmente.
- Base de dados de estados e cidades: Baixe agora uma base de dados de estados e cidades brasileiros no formato SQL para incorporar ao seu projeto.
Saiba mais sobre JavaScript ;)
- JavaScript Tutorial: Neste artigo veremos como utilizar o código javascript em nossas aplicações web e websites.
- Guias de referência JavaScript: JavaScript é uma linguagem de programação amplamente utilizada no desenvolvimento web, tanto no front-end, em conjunto com HTML e CSS, quanto no back-end, com Node.js.
- Trabalhando com eventos em JavaScript: Veja nesse artigo como trabalhar com alguns tipos de eventos na linguagem JavaScript.
Comentários
Enviar um comentário
De seu comentario acerca desta aula, sua dica, sua critica ou sugestao para que eu possa melhorar o conteudo deste Blog. Obrigado Pela Atencao dispensada boa aula a todos.