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:
Mensagem no documento HTML:
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.
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.
Mais que beleza de tutorial!
ResponderExcluirmas*
Excluircorrigiu errado
Excluirtipo de artigo que dou valor e acho massa: sem enrolação
ResponderExcluirMuito bom, simples e direto. Parabéns
ResponderExcluirOtimo Tutorial valeo a pena ver ate o final.
ResponderExcluirParabens!
Tiro dado bugio deitado
ResponderExcluir