Processamento de formulários com eventos (Versão Vídeo)

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]