Recebendo Dados e Informações do Usuário - Método prompt()

Neste tutorial de nosso Curso de JavaScript, vamos aprender como receber dados, informações do usuário. Ou seja, vamos aprender como salvar em variáveis algo que o usuário forneça (digitando, por exemplo). Isso será feito através do método prompt().

Tutorial anterior: Atribuindo e Acessando Valores de Variáveis

Troca de Informações em Programação

O que acontece quando você liga o computador?
Ele abre o navegador? O editor de texto? Começa a tocar uma música?

A reposta é: depende.
O que vai acontecer depende do que o usuário fizer. Especificamente, sua máquina reage de acordo com o que você fizer.

Se clicar no Chrome ou Firefox, vai abrir o navegador.
Se clicar no Excel, abre o editor de planilhas.
Etc etc

Clicar...abrir...digitar...isso tudo são informações que o usuário repassa para o computador.
Ele recebe, checa e toma uma atitude dependendo do que você fez.

É isso que vamos aprender agora: receber dados, informações do usuário, armazenar em variáveis e usar elas para algum propósito, em JavaScript!

O método prompt() do JavaScript

Exite muuuuuitas maneiras de receber dados do usuário, em JS, que está acessando sua página.
Vamos ensinar uma maneira agora, através do método prompt().

Mais adiante, em nosso curso, vamos te explicar melhor e com mais calma o que é um método, e vamos aprender até fazer os nossos. Por hora, imagine que método é, basicamente, um comando.

Vamos usar o comando prompt() para capturar algo que o usuário vai digitar.
O formato do uso é o seguinte:

variavel = prompt("Texto que vai aparecer:")

Ao fazer isso, vai aparecer uma janela quando o usuário entre no seu site, e nessa janela tem escrito "Texto que vai aparecer" e um campo para o usuário digitar algo.

Após digitar e dar enter (ou clicar em OK), o que ele digitou vai virar uma string, armazenada na variável variavel.

Exemplo de uso do prompt()

Crie uma página web que pergunte o nome do usuário, salve ele numa variável e depois exiba uma mensagem de boas vindas na página.

Vamos armazenar o que o usuário digitar na variável nome.
Em seguida, usamos o método document.write() para exibir o que tem dentro dessa variável.

Veja como ficou nosso código JavaScript:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var nome = prompt("Digite seu nome: ")
    document.write("Bem vindo, ", nome);
   </script>

 </head>
</html>

O resultado deve ser o seguinte:
Salvar o que a pessoa digitou - Método prompt()

Mensagem no documento HTML:
Curso de JavaScript online grátis com certificado

Exemplo de uso do prompt()

Crie uma página HTML com um script em JS que pergunta a idade do usuário e armazena em uma variável. Depois, exiba: "Você tem x anos", onde 'x' é o número que o usuário forneceu.

Essa mensagem não deve ser exibida no documento HTML e sim numa pop-up do tipo alert.

Aqui, a ideia é a mesma do exemplo anterior, porém ao invés de usar document.write() vamos usar o comando alert():

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var idade = prompt("Qual sua idade: ");
    alert("Você tem " + idade + " anos de idade");
   </script>

 </head>
</html>


Note que usamos o símbolo de + para 'unir' as strings dentro do comando alert.
Tutorial de JavaScript online grátis

Simples e bacana, não?
Certamente você já acessou algum sistema que exibia esses tipos de mensagens, agora você fez isso.

Parabéns, já é um verdadeiro programador JavaScript!
Vamos seguir adiante em nosso curso.

Nenhum comentário:

Postar um comentário