0:00:00.552,0:00:05.452
Um formulário é uma maneira de uma webpage[br]enviar informações para um servidor.

0:00:05.452,0:00:09.953
Nós não deixamos a webpages aqui no[br]Khan Academy interagir com os servers

0:00:09.953,0:00:11.392
por motivos de segurança.

0:00:11.392,0:00:13.648
Então nós não ensinamos formulários aqui.

0:00:13.648,0:00:17.097
Mas, agora que você está aprendendo [br]JavaScript para manipular webpages,

0:00:17.097,0:00:20.550
vou mostrar como usar JavaScript para[br]processar elementos de formulários

0:00:20.550,0:00:23.074
em vez de ter que enviá-los[br]para um servidor.

0:00:23.074,0:00:28.096
Eu configurei elementos de formulário[br]aqui para descobrir o nome do usuário,

0:00:28.096,0:00:30.045
e a sua linguagem.

0:00:30.045,0:00:34.027
E eu quero que a webpage diga "olá" [br]para o usuário em sua linguagem

0:00:34.027,0:00:36.666
uma vez que ele aperte nesse botão.

0:00:36.666,0:00:41.457
O primeiro passo é guardar o [br]elemento botão em uma variável.

0:00:41.457,0:00:49.307
Então nós iremos dizer:[br]`document.getElementById("button")`.

0:00:49.307,0:00:53.192
O próximo passar é definir [br]a função de listner do evento.

0:00:53.192,0:00:57.885
`var onButtonClick = function() {`[br]

0:00:57.885,0:01:03.770
e então, dentro daqui, nós iremos apenas [br]começar anexando uma mensagem.

0:01:03.770,0:01:08.379
Então, [br]`document.getElementById("message")`,

0:01:08.379,0:01:10.709
nós temos uma pequenina [br]mensagem legal "div".

0:01:10.709,0:01:20.707
E nós iremos apenas: `textContent +=[br]"Você me clicou! Muito obrigado!"`

0:01:20.707,0:01:23.161
Um "div" muito grato!

0:01:23.161,0:01:28.796
Finalmente, terceiro passo, nós iremos[br]adicionar o evento listner para o botão

0:01:28.796,0:01:31.711
para que isto possa chamar [br]a função quando for clicado.

0:01:31.711,0:01:36.491
então,`("click", onButtonClick)`.

0:01:36.491,0:01:42.959
Pause o tutorial agora, e veja por conta [br]própria, que ele funciona como o esperado.

0:01:42.959,0:01:47.181
Agora, vamos fazê-lo dizer alguma coisa[br]com base no que há no formulário.

0:01:47.181,0:01:52.850
Precisamos descobrir como conseguir o que[br]o usuário digitou no campo "name".

0:01:52.850,0:01:55.834
Vamos fazer uma variável para isso.

0:01:55.834,0:02:04.770
Então,[br]`var name = document.getElementById`,

0:02:04.770,0:02:07.337
desde que isso possui uma ID,

0:02:07.337,0:02:11.322
então nós colocamos ela lá.

0:02:11.322,0:02:17.115
Vamos fazer um novo "string" para [br]as saudações, e unir o nosso disso,

0:02:17.115,0:02:22.720
então `var greeting = "Heyaz"`,[br]essa é minha saudação favorita,

0:02:22.720,0:02:24.203
` + name`.

0:02:24.203,0:02:30.351
Okay, então nós temos uma "string", e mais[br]o que estiver armazenado na variável.

0:02:30.351,0:02:38.772
E agora, este aqui, o conteúdo do texto,[br]realmente deve ser `greeting` .

0:02:38.772,0:02:41.688
Vamos ver, isso parece certo

0:02:41.688,0:02:44.899
encontramos a entrada do nome,[br]fizemos uma "string" de saudações,

0:02:44.899,0:02:47.732
e nós anexamos isso a um "div".

0:02:47.732,0:02:53.032
Pause o tutorial, e veja [br]se isso funcionou.

0:02:53.032,0:02:55.632
Não é bem assim , né?

0:02:55.632,0:03:01.877
Você viu "Heyaz [object Object]", ou[br]"Heyaz object Element"?

0:03:01.877,0:03:04.761
Assumir que o seu "nome" não é um Objeto

0:03:04.761,0:03:08.073
e sem ofensa , se for,[br]isso é um ótimo nome--

0:03:08.073,0:03:10.508
isso significa que algo está errado.

0:03:10.508,0:03:13.704
Nós esperamos ver o que você digitou.

0:03:13.704,0:03:16.482
Mas nós vemos "object".

0:03:16.482,0:03:20.682
Isso significa que a variável "name" está [br]apontando para um objeto,

0:03:20.682,0:03:23.581
e não a "string" que nós esperávamos [br]que estivesse apontando.

0:03:23.581,0:03:26.647
Talvez você já tenha [br]descoberto o problema.

0:03:26.647,0:03:31.885
Nós armazenamos todo o elemento de [br]objeto, dentro da variável "name".

0:03:31.885,0:03:34.987
E o elemento de um objeto [br]é um grande objeto

0:03:34.987,0:03:37.095
com muita informação sobre o elemento:

0:03:37.095,0:03:39.532
todos os seus atributos, [br]todos os seus métodos.

0:03:39.532,0:03:43.472
Para encontrar o que o usuário digitou, [br]nós temos que acessar uma propriedade

0:03:43.472,0:03:46.211
particular dos elementos: o valor.

0:03:46.211,0:03:51.918
E eu vou digitar `.value`,[br]que deve concertar isso.

0:03:51.918,0:03:56.177
Pause o tutorial, e tente novamente.

0:03:56.177,0:03:57.984
Funcionou, certo?

0:03:57.984,0:04:01.913
Agora, esse é um erro comum, então [br]preste atenção em relação a isso.

0:04:01.913,0:04:05.007
Eu quero lhe mostrar mais um erro comum.

0:04:05.007,0:04:13.960
Eu vou pegar essa linha daqui, [br]e mover para fora da função.

0:04:13.960,0:04:22.740
Agora, pause o tutorial, digite a entrada[br]e pressione o botão.

0:04:22.740,0:04:25.997
Se ele quebrou da maneira que deveria,[br]então você deve ter visto,

0:04:25.997,0:04:28.050
uma "string" vazia para o seu nome.

0:04:28.050,0:04:29.693
Descobriu o porquê?

0:04:29.693,0:04:33.937
Você deve pensar com cuidado sobre[br]cada linha que é executada.

0:04:33.937,0:04:37.098
No código atual, o navegador[br]carrega a página,

0:04:37.098,0:04:39.770
e executa o JavaScript linha por linha.

0:04:39.770,0:04:42.928
Primeiro, guarda o [br]elemento botão na variável.

0:04:42.928,0:04:46.817
Em seguida, armazena o valor do[br]o elemento de entrada na variável.

0:04:46.817,0:04:50.460
Porém, armazena o valor no [br]tempo que a página carrega,

0:04:50.460,0:04:52.465
o qual estará vazio.

0:04:52.465,0:04:56.320
Em seguida, ele define uma função [br]e atribui o evento listner (que ouve).

0:04:56.320,0:05:00.421
Quando o listner é chamado, o "name" [br]ainda está a mesma "string"

0:05:00.421,0:05:02.877
que estava quando a página foi carregada.

0:05:02.877,0:05:06.201
Assim, o listner nunca descobre[br]a última coisa que o usuário digitou.

0:05:06.201,0:05:08.529
E por isso essa linha de código

0:05:08.529,0:05:13.190
deve ficar no interior dessa[br]função evento listner,

0:05:13.190,0:05:18.757
então ele encontra o valor no tempo[br]em que o evento ocorre.

0:05:18.757,0:05:21.938
Vamos adicionar um código para [br]olhar o valor da linguagem agora,

0:05:21.938,0:05:24.414
para ter certeza que você está [br]realmente entendendo isso.

0:05:24.414,0:05:29.599
Dentro do listner, eu irei armazenar [br]a linguagem dentro da variável "lang".

0:05:31.769,0:05:34.546
Ugh, olhe essa indentação, está horrível.

0:05:34.546,0:05:36.891
Vamos alinhar isso.

0:05:36.891,0:05:38.842
Okay, então...

0:05:38.842,0:05:41.453
[digitando]

0:05:46.773,0:05:51.234
E você irá notar que eu estou nomeando [br]minhas variáveis iguais as minhas IDs,

0:05:51.234,0:05:55.291
mais isso é apenas o que eu estou fazendo,[br]você não precisar fazer o mesmo.

0:05:55.291,0:05:59.787
Agora, quero exibir uma mensagem diferente[br]baseada na linguagem que eles encolheram.

0:05:59.787,0:06:03.627
Observe o valor não é o que é mostrado[br]no drop-down.

0:06:03.627,0:06:06.880
É o valor atribuído no HTML.

0:06:06.880,0:06:11.250
Então "lang" deve ser "en", "es" ou "plt".

0:06:11.250,0:06:17.212
então isso significa que:[br]`if (lang === "es")`,

0:06:17.212,0:06:23.684
então a saudação deverá ser "Hola",

0:06:23.684,0:06:26.809
Vamos em frente e fazer [br]essa variável de saudação aqui.

0:06:26.809,0:06:35.105
Então a saudação [br]será "Hola, " mais o nome.

0:06:35.105,0:06:41.218
E se a linguagem por igual a "plt",[br]a velha e boa "Pig Latin",

0:06:41.218,0:06:48.538
a saudação deverá ser,[br]"Ello-hey, " mais o nome.

0:06:48.538,0:06:53.167
e então nós podemos utilizar [br]um "else" para o nosso Inglês.

0:06:53.167,0:06:55.366
Eu vou apenas mover isso para dentro.

0:06:55.366,0:06:56.799
Muito bem.

0:06:56.799,0:07:00.374
Ooh, e se você quiser um desafio bônus,

0:07:00.374,0:07:03.840
tente fazer um conversor [br]"Pig Latin" para nomes,

0:07:03.840,0:07:07.678
para que a saudação inteira, [br]inclusive o nome, seja traduzida.

0:07:07.678,0:07:10.009
Isso seria bem legal.

0:07:10.009,0:07:13.295
Agora pause o tutorial, [br]coloque o seu nome,

0:07:13.295,0:07:19.098
escolha uma linguagem diferente e tente.

0:07:19.098,0:07:20.239
Legal, né?

0:07:20.239,0:07:24.491
Existem várias coisas que você pode fazer[br]com entradas de formulário e JavaScript:

0:07:24.491,0:07:27.666
jogos de palavra, jogos de [br]números, contador de histórias...

0:07:27.666,0:07:30.029
e se você tiver um server [br]fora do Khan Academy,

0:07:30.029,0:07:33.447
você pode utilizar o JavaScript para [br]pré-processar o formato de saída

0:07:33.447,0:07:35.361
antes de mandar para o servidor.

0:07:35.361,0:07:38.522
Exitem muito mais eventos que você[br]pode usar com um formulário,

0:07:38.522,0:07:40.701
como pressionar teclas e eventos de foco.

0:07:40.701,0:07:44.152
Apenas se lembre de olhar [br]para o valor de entrada,

0:07:44.152,0:07:47.289
e conferir o valor na hora certa.

0:07:47.289,0:07:50.031
Você pegará a prática nisso [br]no próximo desafio,

0:07:50.113,0:07:52.210
o qual é o meu favorito.

0:07:52.320,0:07:53.873
[Legendado por Gabriel Mello Fernandes][br][Revisado por Paulo Trentin]