Recebendo valores do usuário via Formulário input no JavaScript

Neste tutorial de nosso Curso de JavaScript, vamos aprender como receber qualquer tipo de dados do usuário, usando um formulário do tipo input e usar esses dados em nossos códigos de JavaScript.

Esta ideia será bastante usada em nossa seção de testes e laços, pois nossos scripts vão ficar 'conversando' bastante com os usuários de nosso site, ok?

Ler este tutorial em PDF: Apostila de JavaScript

Formulário de input - Receber dados do usuário no JS

Vamos criar uma página simples, que pede qualquer valor ou dado para o visitante da página (pode ser um caractere, string maior, número inteiro ou mesmo um flutuante ) e em seguida salve essa informação em uma variável chamada valor.

Por fim, vamos exibir o valor digitado em uma janelinha de alert.
Primeiro, o código. Em seguida, vamos explicar melhor cada trecho, veja:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   <input id="textinput" name="textinput" value="" type="text">
   <button onclick="enviar()">Confirmar</button>

   <script type="text/javascript">
    function enviar(){
        var valor = document.getElementById("textinput").value;
        alert("Você digitou: " + valor);
    }
   </script>

 </head>
</html>

O resultado é o seguinte (digite algo no campo e clique no botão):

Código JavaScript comentado

A caixinha é uma espécie de formulário, especificamente do tipo input, onde é possível o usuário digitar o que quiser.

Veja: Formulários em HTML

Para fazer um formulário desse, usamos a tag <input> do HTML (faça o curso HTML Progressivo antes ou durante este curso de JavaScript).

O primeiro atributo é o id (identificação), e é muito importante ter uma uma identificação única, pois vamos usar os dados desse formulário através de sua id.

Também usamos o atribut name, value (string vazia, é o que aparece inicialmente no formulário) e deixamos bem claro que o tipo de formulário é de texto, type="text", até aí tudo bem e tranquilo, coisa do HTML.

Depois, usamos a tag <button> para criar um botão na página.
Tem um atributo nela, o onclick (ao clicar) e entre aspas está escrito enviar()

Isso quer dizer o seguinte: quando o usuário clicar (onclick) no botão, ele deve chamar a função enviar(), função do JavaScript.

Função nada mais é que um trecho de código que faz coisas específicas. Em breve estudaremos bem mais a fundo as funções em JS.

Agora vem o nosso código JavaScript.
Ele tem apenas uma coisa: a função enviar()

Essa função simplesmente vai no documento (document) e pega um elemento pelo id (getElementById), especificamente o elemento textinput (nosso formulário input), copia seu valor (.value) e atribui a variável valor.

E prontinho, agora a variável valor pegou o que você digitou no formulário de input.
Em seguida, simplesmente exibimos isso em uma janelinha de alert.

Bem simples e bacana, não?