Java Script: fevereiro 2017

sexta-feira, 17 de fevereiro de 2017

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>

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>