Um formulário é uma maneira de uma webpage
enviar informações para um servidor.

Nós não deixamos a webpages aqui no
Khan Academy interagir com os servers

por motivos de segurança.

Então nós não ensinamos formulários aqui.

Mas, agora que você está aprendendo 
JavaScript para manipular webpages,

vou mostrar como usar JavaScript para
processar elementos de formulários

em vez de ter que enviá-los
para um servidor.

Eu configurei elementos de formulário
aqui para descobrir o nome do usuário,

e a sua linguagem.

E eu quero que a webpage diga "olá" 
para o usuário em sua linguagem

uma vez que ele aperte nesse botão.

O primeiro passo é guardar o 
elemento botão em uma variável.

Então nós iremos dizer:
`document.getElementById("button")`.

O próximo passar é definir 
a função de listner do evento.

`var onButtonClick = function() {`

e então, dentro daqui, nós iremos apenas 
começar anexando uma mensagem.

Então, 
`document.getElementById("message")`,

nós temos uma pequenina 
mensagem legal "div".

E nós iremos apenas: `textContent +=
"Você me clicou! Muito obrigado!"`

Um "div" muito grato!

Finalmente, terceiro passo, nós iremos
adicionar o evento listner para o botão

para que isto possa chamar 
a função quando for clicado.

então,`("click", onButtonClick)`.

Pause o tutorial agora, e veja por conta 
própria, que ele funciona como o esperado.

Agora, vamos fazê-lo dizer alguma coisa
com base no que há no formulário.

Precisamos descobrir como conseguir o que
o usuário digitou no campo "name".

Vamos fazer uma variável para isso.

Então,
`var name = document.getElementById`,

desde que isso possui uma ID,

então nós colocamos ela lá.

Vamos fazer um novo "string" para 
as saudações, e unir o nosso disso,

então `var greeting = "Heyaz"`,
essa é minha saudação favorita,

` + name`.

Okay, então nós temos uma "string", e mais
o que estiver armazenado na variável.

E agora, este aqui, o conteúdo do texto,
realmente deve ser `greeting` .

Vamos ver, isso parece certo

encontramos a entrada do nome,
fizemos uma "string" de saudações,

e nós anexamos isso a um "div".

Pause o tutorial, e veja 
se isso funcionou.

Não é bem assim , né?

Você viu "Heyaz [object Object]", ou
"Heyaz object Element"?

Assumir que o seu "nome" não é um Objeto

e sem ofensa , se for,
isso é um ótimo nome--

isso significa que algo está errado.

Nós esperamos ver o que você digitou.

Mas nós vemos "object".

Isso significa que a variável "name" está 
apontando para um objeto,

e não a "string" que nós esperávamos 
que estivesse apontando.

Talvez você já tenha 
descoberto o problema.

Nós armazenamos todo o elemento de 
objeto, dentro da variável "name".

E o elemento de um objeto 
é um grande objeto

com muita informação sobre o elemento:

todos os seus atributos, 
todos os seus métodos.

Para encontrar o que o usuário digitou, 
nós temos que acessar uma propriedade

particular dos elementos: o valor.

E eu vou digitar `.value`,
que deve concertar isso.

Pause o tutorial, e tente novamente.

Funcionou, certo?

Agora, esse é um erro comum, então 
preste atenção em relação a isso.

Eu quero lhe mostrar mais um erro comum.

Eu vou pegar essa linha daqui, 
e mover para fora da função.

Agora, pause o tutorial, digite a entrada
e pressione o botão.

Se ele quebrou da maneira que deveria,
então você deve ter visto,

uma "string" vazia para o seu nome.

Descobriu o porquê?

Você deve pensar com cuidado sobre
cada linha que é executada.

No código atual, o navegador
carrega a página,

e executa o JavaScript linha por linha.

Primeiro, guarda o 
elemento botão na variável.

Em seguida, armazena o valor do
o elemento de entrada na variável.

Porém, armazena o valor no 
tempo que a página carrega,

o qual estará vazio.

Em seguida, ele define uma função 
e atribui o evento listner (que ouve).

Quando o listner é chamado, o "name" 
ainda está a mesma "string"

que estava quando a página foi carregada.

Assim, o listner nunca descobre
a última coisa que o usuário digitou.

E por isso essa linha de código

deve ficar no interior dessa
função evento listner,

então ele encontra o valor no tempo
em que o evento ocorre.

Vamos adicionar um código para 
olhar o valor da linguagem agora,

para ter certeza que você está 
realmente entendendo isso.

Dentro do listner, eu irei armazenar 
a linguagem dentro da variável "lang".

Ugh, olhe essa indentação, está horrível.

Vamos alinhar isso.

Okay, então...

[digitando]

E você irá notar que eu estou nomeando 
minhas variáveis iguais as minhas IDs,

mais isso é apenas o que eu estou fazendo,
você não precisar fazer o mesmo.

Agora, quero exibir uma mensagem diferente
baseada na linguagem que eles encolheram.

Observe o valor não é o que é mostrado
no drop-down.

É o valor atribuído no HTML.

Então "lang" deve ser "en", "es" ou "plt".

então isso significa que:
`if (lang === "es")`,

então a saudação deverá ser "Hola",

Vamos em frente e fazer 
essa variável de saudação aqui.

Então a saudação 
será "Hola, " mais o nome.

E se a linguagem por igual a "plt",
a velha e boa "Pig Latin",

a saudação deverá ser,
"Ello-hey, " mais o nome.

e então nós podemos utilizar 
um "else" para o nosso Inglês.

Eu vou apenas mover isso para dentro.

Muito bem.

Ooh, e se você quiser um desafio bônus,

tente fazer um conversor 
"Pig Latin" para nomes,

para que a saudação inteira, 
inclusive o nome, seja traduzida.

Isso seria bem legal.

Agora pause o tutorial, 
coloque o seu nome,

escolha uma linguagem diferente e tente.

Legal, né?

Existem várias coisas que você pode fazer
com entradas de formulário e JavaScript:

jogos de palavra, jogos de 
números, contador de histórias...

e se você tiver um server 
fora do Khan Academy,

você pode utilizar o JavaScript para 
pré-processar o formato de saída

antes de mandar para o servidor.

Exitem muito mais eventos que você
pode usar com um formulário,

como pressionar teclas e eventos de foco.

Apenas se lembre de olhar 
para o valor de entrada,

e conferir o valor na hora certa.

Você pegará a prática nisso 
no próximo desafio,

o qual é o meu favorito.

[Legendado por Gabriel Mello Fernandes]
[Revisado por Paulo Trentin]