1
00:00:00,552 --> 00:00:05,452
Um formulário é uma maneira de uma webpage
enviar informações para um servidor.

2
00:00:05,452 --> 00:00:09,953
Nós não deixamos a webpages aqui no
Khan Academy interagir com os servers

3
00:00:09,953 --> 00:00:11,392
por motivos de segurança.

4
00:00:11,392 --> 00:00:13,648
Então nós não ensinamos formulários aqui.

5
00:00:13,648 --> 00:00:17,097
Mas, agora que você está aprendendo 
JavaScript para manipular webpages,

6
00:00:17,097 --> 00:00:20,550
vou mostrar como usar JavaScript para
processar elementos de formulários

7
00:00:20,550 --> 00:00:23,074
em vez de ter que enviá-los
para um servidor.

8
00:00:23,074 --> 00:00:28,096
Eu configurei elementos de formulário
aqui para descobrir o nome do usuário,

9
00:00:28,096 --> 00:00:30,045
e a sua linguagem.

10
00:00:30,045 --> 00:00:34,027
E eu quero que a webpage diga "olá" 
para o usuário em sua linguagem

11
00:00:34,027 --> 00:00:36,666
uma vez que ele aperte nesse botão.

12
00:00:36,666 --> 00:00:41,457
O primeiro passo é guardar o 
elemento botão em uma variável.

13
00:00:41,457 --> 00:00:49,307
Então nós iremos dizer:
`document.getElementById("button")`.

14
00:00:49,307 --> 00:00:53,192
O próximo passar é definir 
a função de listner do evento.

15
00:00:53,192 --> 00:00:57,885
`var onButtonClick = function() {`


16
00:00:57,885 --> 00:01:03,770
e então, dentro daqui, nós iremos apenas 
começar anexando uma mensagem.

17
00:01:03,770 --> 00:01:08,379
Então, 
`document.getElementById("message")`,

18
00:01:08,379 --> 00:01:10,709
nós temos uma pequenina 
mensagem legal "div".

19
00:01:10,709 --> 00:01:20,707
E nós iremos apenas: `textContent +=
"Você me clicou! Muito obrigado!"`

20
00:01:20,707 --> 00:01:23,161
Um "div" muito grato!

21
00:01:23,161 --> 00:01:28,796
Finalmente, terceiro passo, nós iremos
adicionar o evento listner para o botão

22
00:01:28,796 --> 00:01:31,711
para que isto possa chamar 
a função quando for clicado.

23
00:01:31,711 --> 00:01:36,491
então,`("click", onButtonClick)`.

24
00:01:36,491 --> 00:01:42,959
Pause o tutorial agora, e veja por conta 
própria, que ele funciona como o esperado.

25
00:01:42,959 --> 00:01:47,181
Agora, vamos fazê-lo dizer alguma coisa
com base no que há no formulário.

26
00:01:47,181 --> 00:01:52,850
Precisamos descobrir como conseguir o que
o usuário digitou no campo "name".

27
00:01:52,850 --> 00:01:55,834
Vamos fazer uma variável para isso.

28
00:01:55,834 --> 00:02:04,770
Então,
`var name = document.getElementById`,

29
00:02:04,770 --> 00:02:07,337
desde que isso possui uma ID,

30
00:02:07,337 --> 00:02:11,322
então nós colocamos ela lá.

31
00:02:11,322 --> 00:02:17,115
Vamos fazer um novo "string" para 
as saudações, e unir o nosso disso,

32
00:02:17,115 --> 00:02:22,720
então `var greeting = "Heyaz"`,
essa é minha saudação favorita,

33
00:02:22,720 --> 00:02:24,203
` + name`.

34
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.

35
00:02:30,351 --> 00:02:38,772
E agora, este aqui, o conteúdo do texto,
realmente deve ser `greeting` .

36
00:02:38,772 --> 00:02:41,688
Vamos ver, isso parece certo

37
00:02:41,688 --> 00:02:44,899
encontramos a entrada do nome,
fizemos uma "string" de saudações,

38
00:02:44,899 --> 00:02:47,732
e nós anexamos isso a um "div".

39
00:02:47,732 --> 00:02:53,032
Pause o tutorial, e veja 
se isso funcionou.

40
00:02:53,032 --> 00:02:55,632
Não é bem assim , né?

41
00:02:55,632 --> 00:03:01,877
Você viu "Heyaz [object Object]", ou
"Heyaz object Element"?

42
00:03:01,877 --> 00:03:04,761
Assumir que o seu "nome" não é um Objeto

43
00:03:04,761 --> 00:03:08,073
e sem ofensa , se for,
isso é um ótimo nome--

44
00:03:08,073 --> 00:03:10,508
isso significa que algo está errado.

45
00:03:10,508 --> 00:03:13,704
Nós esperamos ver o que você digitou.

46
00:03:13,704 --> 00:03:16,482
Mas nós vemos "object".

47
00:03:16,482 --> 00:03:20,682
Isso significa que a variável "name" está 
apontando para um objeto,

48
00:03:20,682 --> 00:03:23,581
e não a "string" que nós esperávamos 
que estivesse apontando.

49
00:03:23,581 --> 00:03:26,647
Talvez você já tenha 
descoberto o problema.

50
00:03:26,647 --> 00:03:31,885
Nós armazenamos todo o elemento de 
objeto, dentro da variável "name".

51
00:03:31,885 --> 00:03:34,987
E o elemento de um objeto 
é um grande objeto

52
00:03:34,987 --> 00:03:37,095
com muita informação sobre o elemento:

53
00:03:37,095 --> 00:03:39,532
todos os seus atributos, 
todos os seus métodos.

54
00:03:39,532 --> 00:03:43,472
Para encontrar o que o usuário digitou, 
nós temos que acessar uma propriedade

55
00:03:43,472 --> 00:03:46,211
particular dos elementos: o valor.

56
00:03:46,211 --> 00:03:51,918
E eu vou digitar `.value`,
que deve concertar isso.

57
00:03:51,918 --> 00:03:56,177
Pause o tutorial, e tente novamente.

58
00:03:56,177 --> 00:03:57,984
Funcionou, certo?

59
00:03:57,984 --> 00:04:01,913
Agora, esse é um erro comum, então 
preste atenção em relação a isso.

60
00:04:01,913 --> 00:04:05,007
Eu quero lhe mostrar mais um erro comum.

61
00:04:05,007 --> 00:04:13,960
Eu vou pegar essa linha daqui, 
e mover para fora da função.

62
00:04:13,960 --> 00:04:22,740
Agora, pause o tutorial, digite a entrada
e pressione o botão.

63
00:04:22,740 --> 00:04:25,997
Se ele quebrou da maneira que deveria,
então você deve ter visto,

64
00:04:25,997 --> 00:04:28,050
uma "string" vazia para o seu nome.

65
00:04:28,050 --> 00:04:29,693
Descobriu o porquê?

66
00:04:29,693 --> 00:04:33,937
Você deve pensar com cuidado sobre
cada linha que é executada.

67
00:04:33,937 --> 00:04:37,098
No código atual, o navegador
carrega a página,

68
00:04:37,098 --> 00:04:39,770
e executa o JavaScript linha por linha.

69
00:04:39,770 --> 00:04:42,928
Primeiro, guarda o 
elemento botão na variável.

70
00:04:42,928 --> 00:04:46,817
Em seguida, armazena o valor do
o elemento de entrada na variável.

71
00:04:46,817 --> 00:04:50,460
Porém, armazena o valor no 
tempo que a página carrega,

72
00:04:50,460 --> 00:04:52,465
o qual estará vazio.

73
00:04:52,465 --> 00:04:56,320
Em seguida, ele define uma função 
e atribui o evento listner (que ouve).

74
00:04:56,320 --> 00:05:00,421
Quando o listner é chamado, o "name" 
ainda está a mesma "string"

75
00:05:00,421 --> 00:05:02,877
que estava quando a página foi carregada.

76
00:05:02,877 --> 00:05:06,201
Assim, o listner nunca descobre
a última coisa que o usuário digitou.

77
00:05:06,201 --> 00:05:08,529
E por isso essa linha de código

78
00:05:08,529 --> 00:05:13,190
deve ficar no interior dessa
função evento listner,

79
00:05:13,190 --> 00:05:18,757
então ele encontra o valor no tempo
em que o evento ocorre.

80
00:05:18,757 --> 00:05:21,938
Vamos adicionar um código para 
olhar o valor da linguagem agora,

81
00:05:21,938 --> 00:05:24,414
para ter certeza que você está 
realmente entendendo isso.

82
00:05:24,414 --> 00:05:29,599
Dentro do listner, eu irei armazenar 
a linguagem dentro da variável "lang".

83
00:05:31,769 --> 00:05:34,546
Ugh, olhe essa indentação, está horrível.

84
00:05:34,546 --> 00:05:36,891
Vamos alinhar isso.

85
00:05:36,891 --> 00:05:38,842
Okay, então...

86
00:05:38,842 --> 00:05:41,453
[digitando]

87
00:05:46,773 --> 00:05:51,234
E você irá notar que eu estou nomeando 
minhas variáveis iguais as minhas IDs,

88
00:05:51,234 --> 00:05:55,291
mais isso é apenas o que eu estou fazendo,
você não precisar fazer o mesmo.

89
00:05:55,291 --> 00:05:59,787
Agora, quero exibir uma mensagem diferente
baseada na linguagem que eles encolheram.

90
00:05:59,787 --> 00:06:03,627
Observe o valor não é o que é mostrado
no drop-down.

91
00:06:03,627 --> 00:06:06,880
É o valor atribuído no HTML.

92
00:06:06,880 --> 00:06:11,250
Então "lang" deve ser "en", "es" ou "plt".

93
00:06:11,250 --> 00:06:17,212
então isso significa que:
`if (lang === "es")`,

94
00:06:17,212 --> 00:06:23,684
então a saudação deverá ser "Hola",

95
00:06:23,684 --> 00:06:26,809
Vamos em frente e fazer 
essa variável de saudação aqui.

96
00:06:26,809 --> 00:06:35,105
Então a saudação 
será "Hola, " mais o nome.

97
00:06:35,105 --> 00:06:41,218
E se a linguagem por igual a "plt",
a velha e boa "Pig Latin",

98
00:06:41,218 --> 00:06:48,538
a saudação deverá ser,
"Ello-hey, " mais o nome.

99
00:06:48,538 --> 00:06:53,167
e então nós podemos utilizar 
um "else" para o nosso Inglês.

100
00:06:53,167 --> 00:06:55,366
Eu vou apenas mover isso para dentro.

101
00:06:55,366 --> 00:06:56,799
Muito bem.

102
00:06:56,799 --> 00:07:00,374
Ooh, e se você quiser um desafio bônus,

103
00:07:00,374 --> 00:07:03,840
tente fazer um conversor 
"Pig Latin" para nomes,

104
00:07:03,840 --> 00:07:07,678
para que a saudação inteira, 
inclusive o nome, seja traduzida.

105
00:07:07,678 --> 00:07:10,009
Isso seria bem legal.

106
00:07:10,009 --> 00:07:13,295
Agora pause o tutorial, 
coloque o seu nome,

107
00:07:13,295 --> 00:07:19,098
escolha uma linguagem diferente e tente.

108
00:07:19,098 --> 00:07:20,239
Legal, né?

109
00:07:20,239 --> 00:07:24,491
Existem várias coisas que você pode fazer
com entradas de formulário e JavaScript:

110
00:07:24,491 --> 00:07:27,666
jogos de palavra, jogos de 
números, contador de histórias...

111
00:07:27,666 --> 00:07:30,029
e se você tiver um server 
fora do Khan Academy,

112
00:07:30,029 --> 00:07:33,447
você pode utilizar o JavaScript para 
pré-processar o formato de saída

113
00:07:33,447 --> 00:07:35,361
antes de mandar para o servidor.

114
00:07:35,361 --> 00:07:38,522
Exitem muito mais eventos que você
pode usar com um formulário,

115
00:07:38,522 --> 00:07:40,701
como pressionar teclas e eventos de foco.

116
00:07:40,701 --> 00:07:44,152
Apenas se lembre de olhar 
para o valor de entrada,

117
00:07:44,152 --> 00:07:47,289
e conferir o valor na hora certa.

118
00:07:47,289 --> 00:07:50,031
Você pegará a prática nisso 
no próximo desafio,

119
00:07:50,113 --> 00:07:52,210
o qual é o meu favorito.

120
00:07:52,320 --> 00:07:53,873
[Legendado por Gabriel Mello Fernandes]
[Revisado por Paulo Trentin]