WEBVTT

00:00:00.552 --> 00:00:05.452
Um formulário é uma maneira de uma webpage
enviar informações para um servidor.

00:00:05.452 --> 00:00:09.953
Nós não deixamos a webpages aqui no
Khan Academy interagir com os servers

00:00:09.953 --> 00:00:11.392
por motivos de segurança.

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

00:00:13.648 --> 00:00:17.097
Mas, agora que você está aprendendo 
JavaScript para manipular webpages,

00:00:17.097 --> 00:00:20.550
vou mostrar como usar JavaScript para
processar elementos de formulários

00:00:20.550 --> 00:00:23.074
em vez de ter que enviá-los
para um servidor.

00:00:23.074 --> 00:00:28.096
Eu configurei elementos de formulário
aqui para descobrir o nome do usuário,

00:00:28.096 --> 00:00:30.045
e a sua linguagem.

00:00:30.045 --> 00:00:34.027
E eu quero que a webpage diga "olá" 
para o usuário em sua linguagem

00:00:34.027 --> 00:00:36.666
uma vez que ele aperte nesse botão.

00:00:36.666 --> 00:00:41.457
O primeiro passo é guardar o 
elemento botão em uma variável.

00:00:41.457 --> 00:00:49.307
Então nós iremos dizer:
`document.getElementById("button")`.

00:00:49.307 --> 00:00:53.192
O próximo passar é definir 
a função de listner do evento.

00:00:53.192 --> 00:00:57.885
`var onButtonClick = function() {`


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

00:01:03.770 --> 00:01:08.379
Então, 
`document.getElementById("message")`,

00:01:08.379 --> 00:01:10.709
nós temos uma pequenina 
mensagem legal "div".

00:01:10.709 --> 00:01:20.707
E nós iremos apenas: `textContent +=
"Você me clicou! Muito obrigado!"`

00:01:20.707 --> 00:01:23.161
Um "div" muito grato!

00:01:23.161 --> 00:01:28.796
Finalmente, terceiro passo, nós iremos
adicionar o evento listner para o botão

00:01:28.796 --> 00:01:31.711
para que isto possa chamar 
a função quando for clicado.

00:01:31.711 --> 00:01:36.491
então,`("click", onButtonClick)`.

00:01:36.491 --> 00:01:42.959
Pause o tutorial agora, e veja por conta 
própria, que ele funciona como o esperado.

00:01:42.959 --> 00:01:47.181
Agora, vamos fazê-lo dizer alguma coisa
com base no que há no formulário.

00:01:47.181 --> 00:01:52.850
Precisamos descobrir como conseguir o que
o usuário digitou no campo "name".

00:01:52.850 --> 00:01:55.834
Vamos fazer uma variável para isso.

00:01:55.834 --> 00:02:04.770
Então,
`var name = document.getElementById`,

00:02:04.770 --> 00:02:07.337
desde que isso possui uma ID,

00:02:07.337 --> 00:02:11.322
então nós colocamos ela lá.

00:02:11.322 --> 00:02:17.115
Vamos fazer um novo "string" para 
as saudações, e unir o nosso disso,

00:02:17.115 --> 00:02:22.720
então `var greeting = "Heyaz"`,
essa é minha saudação favorita,

00:02:22.720 --> 00:02:24.203
` + name`.

00:02:24.203 --> 00:02:30.351
Okay, então nós temos uma "string", e mais
o que estiver armazenado na variável.

00:02:30.351 --> 00:02:38.772
E agora, este aqui, o conteúdo do texto,
realmente deve ser `greeting` .

00:02:38.772 --> 00:02:41.688
Vamos ver, isso parece certo

00:02:41.688 --> 00:02:44.899
encontramos a entrada do nome,
fizemos uma "string" de saudações,

00:02:44.899 --> 00:02:47.732
e nós anexamos isso a um "div".

00:02:47.732 --> 00:02:53.032
Pause o tutorial, e veja 
se isso funcionou.

00:02:53.032 --> 00:02:55.632
Não é bem assim , né?

00:02:55.632 --> 00:03:01.877
Você viu "Heyaz [object Object]", ou
"Heyaz object Element"?

00:03:01.877 --> 00:03:04.761
Assumir que o seu "nome" não é um Objeto

00:03:04.761 --> 00:03:08.073
e sem ofensa , se for,
isso é um ótimo nome--

00:03:08.073 --> 00:03:10.508
isso significa que algo está errado.

00:03:10.508 --> 00:03:13.704
Nós esperamos ver o que você digitou.

00:03:13.704 --> 00:03:16.482
Mas nós vemos "object".

00:03:16.482 --> 00:03:20.682
Isso significa que a variável "name" está 
apontando para um objeto,

00:03:20.682 --> 00:03:23.581
e não a "string" que nós esperávamos 
que estivesse apontando.

00:03:23.581 --> 00:03:26.647
Talvez você já tenha 
descoberto o problema.

00:03:26.647 --> 00:03:31.885
Nós armazenamos todo o elemento de 
objeto, dentro da variável "name".

00:03:31.885 --> 00:03:34.987
E o elemento de um objeto 
é um grande objeto

00:03:34.987 --> 00:03:37.095
com muita informação sobre o elemento:

00:03:37.095 --> 00:03:39.532
todos os seus atributos, 
todos os seus métodos.

00:03:39.532 --> 00:03:43.472
Para encontrar o que o usuário digitou, 
nós temos que acessar uma propriedade

00:03:43.472 --> 00:03:46.211
particular dos elementos: o valor.

00:03:46.211 --> 00:03:51.918
E eu vou digitar `.value`,
que deve concertar isso.

00:03:51.918 --> 00:03:56.177
Pause o tutorial, e tente novamente.

00:03:56.177 --> 00:03:57.984
Funcionou, certo?

00:03:57.984 --> 00:04:01.913
Agora, esse é um erro comum, então 
preste atenção em relação a isso.

00:04:01.913 --> 00:04:05.007
Eu quero lhe mostrar mais um erro comum.

00:04:05.007 --> 00:04:13.960
Eu vou pegar essa linha daqui, 
e mover para fora da função.

00:04:13.960 --> 00:04:22.740
Agora, pause o tutorial, digite a entrada
e pressione o botão.

00:04:22.740 --> 00:04:25.997
Se ele quebrou da maneira que deveria,
então você deve ter visto,

00:04:25.997 --> 00:04:28.050
uma "string" vazia para o seu nome.

00:04:28.050 --> 00:04:29.693
Descobriu o porquê?

00:04:29.693 --> 00:04:33.937
Você deve pensar com cuidado sobre
cada linha que é executada.

00:04:33.937 --> 00:04:37.098
No código atual, o navegador
carrega a página,

00:04:37.098 --> 00:04:39.770
e executa o JavaScript linha por linha.

00:04:39.770 --> 00:04:42.928
Primeiro, guarda o 
elemento botão na variável.

00:04:42.928 --> 00:04:46.817
Em seguida, armazena o valor do
o elemento de entrada na variável.

00:04:46.817 --> 00:04:50.460
Porém, armazena o valor no 
tempo que a página carrega,

00:04:50.460 --> 00:04:52.465
o qual estará vazio.

00:04:52.465 --> 00:04:56.320
Em seguida, ele define uma função 
e atribui o evento listner (que ouve).

00:04:56.320 --> 00:05:00.421
Quando o listner é chamado, o "name" 
ainda está a mesma "string"

00:05:00.421 --> 00:05:02.877
que estava quando a página foi carregada.

00:05:02.877 --> 00:05:06.201
Assim, o listner nunca descobre
a última coisa que o usuário digitou.

00:05:06.201 --> 00:05:08.529
E por isso essa linha de código

00:05:08.529 --> 00:05:13.190
deve ficar no interior dessa
função evento listner,

00:05:13.190 --> 00:05:18.757
então ele encontra o valor no tempo
em que o evento ocorre.

00:05:18.757 --> 00:05:21.938
Vamos adicionar um código para 
olhar o valor da linguagem agora,

00:05:21.938 --> 00:05:24.414
para ter certeza que você está 
realmente entendendo isso.

00:05:24.414 --> 00:05:29.599
Dentro do listner, eu irei armazenar 
a linguagem dentro da variável "lang".

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

00:05:34.546 --> 00:05:36.891
Vamos alinhar isso.

00:05:36.891 --> 00:05:38.842
Okay, então...

00:05:38.842 --> 00:05:41.453
[digitando]

00:05:46.773 --> 00:05:51.234
E você irá notar que eu estou nomeando 
minhas variáveis iguais as minhas IDs,

00:05:51.234 --> 00:05:55.291
mais isso é apenas o que eu estou fazendo,
você não precisar fazer o mesmo.

00:05:55.291 --> 00:05:59.787
Agora, quero exibir uma mensagem diferente
baseada na linguagem que eles encolheram.

00:05:59.787 --> 00:06:03.627
Observe o valor não é o que é mostrado
no drop-down.

00:06:03.627 --> 00:06:06.880
É o valor atribuído no HTML.

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

00:06:11.250 --> 00:06:17.212
então isso significa que:
`if (lang === "es")`,

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

00:06:23.684 --> 00:06:26.809
Vamos em frente e fazer 
essa variável de saudação aqui.

00:06:26.809 --> 00:06:35.105
Então a saudação 
será "Hola, " mais o nome.

00:06:35.105 --> 00:06:41.218
E se a linguagem por igual a "plt",
a velha e boa "Pig Latin",

00:06:41.218 --> 00:06:48.538
a saudação deverá ser,
"Ello-hey, " mais o nome.

00:06:48.538 --> 00:06:53.167
e então nós podemos utilizar 
um "else" para o nosso Inglês.

00:06:53.167 --> 00:06:55.366
Eu vou apenas mover isso para dentro.

00:06:55.366 --> 00:06:56.799
Muito bem.

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

00:07:00.374 --> 00:07:03.840
tente fazer um conversor 
"Pig Latin" para nomes,

00:07:03.840 --> 00:07:07.678
para que a saudação inteira, 
inclusive o nome, seja traduzida.

00:07:07.678 --> 00:07:10.009
Isso seria bem legal.

00:07:10.009 --> 00:07:13.295
Agora pause o tutorial, 
coloque o seu nome,

00:07:13.295 --> 00:07:19.098
escolha uma linguagem diferente e tente.

00:07:19.098 --> 00:07:20.239
Legal, né?

00:07:20.239 --> 00:07:24.491
Existem várias coisas que você pode fazer
com entradas de formulário e JavaScript:

00:07:24.491 --> 00:07:27.666
jogos de palavra, jogos de 
números, contador de histórias...

00:07:27.666 --> 00:07:30.029
e se você tiver um server 
fora do Khan Academy,

00:07:30.029 --> 00:07:33.447
você pode utilizar o JavaScript para 
pré-processar o formato de saída

00:07:33.447 --> 00:07:35.361
antes de mandar para o servidor.

00:07:35.361 --> 00:07:38.522
Exitem muito mais eventos que você
pode usar com um formulário,

00:07:38.522 --> 00:07:40.701
como pressionar teclas e eventos de foco.

00:07:40.701 --> 00:07:44.152
Apenas se lembre de olhar 
para o valor de entrada,

00:07:44.152 --> 00:07:47.289
e conferir o valor na hora certa.

00:07:47.289 --> 00:07:50.031
Você pegará a prática nisso 
no próximo desafio,

00:07:50.113 --> 00:07:52.210
o qual é o meu favorito.

00:07:52.320 --> 00:07:53.873
[Legendado por Gabriel Mello Fernandes]
[Revisado por Paulo Trentin]