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]