[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.55,0:00:05.45,Default,,0000,0000,0000,,Um formulário é uma maneira de uma webpage\Nenviar informações para um servidor.
Dialogue: 0,0:00:05.45,0:00:09.95,Default,,0000,0000,0000,,Nós não deixamos a webpages aqui no\NKhan Academy interagir com os servers
Dialogue: 0,0:00:09.95,0:00:11.39,Default,,0000,0000,0000,,por motivos de segurança.
Dialogue: 0,0:00:11.39,0:00:13.65,Default,,0000,0000,0000,,Então nós não ensinamos formulários aqui.
Dialogue: 0,0:00:13.65,0:00:17.10,Default,,0000,0000,0000,,Mas, agora que você está aprendendo \NJavaScript para manipular webpages,
Dialogue: 0,0:00:17.10,0:00:20.55,Default,,0000,0000,0000,,vou mostrar como usar JavaScript para\Nprocessar elementos de formulários
Dialogue: 0,0:00:20.55,0:00:23.07,Default,,0000,0000,0000,,em vez de ter que enviá-los\Npara um servidor.
Dialogue: 0,0:00:23.07,0:00:28.10,Default,,0000,0000,0000,,Eu configurei elementos de formulário\Naqui para descobrir o nome do usuário,
Dialogue: 0,0:00:28.10,0:00:30.04,Default,,0000,0000,0000,,e a sua linguagem.
Dialogue: 0,0:00:30.04,0:00:34.03,Default,,0000,0000,0000,,E eu quero que a webpage diga "olá" \Npara o usuário em sua linguagem
Dialogue: 0,0:00:34.03,0:00:36.67,Default,,0000,0000,0000,,uma vez que ele aperte nesse botão.
Dialogue: 0,0:00:36.67,0:00:41.46,Default,,0000,0000,0000,,O primeiro passo é guardar o \Nelemento botão em uma variável.
Dialogue: 0,0:00:41.46,0:00:49.31,Default,,0000,0000,0000,,Então nós iremos dizer:\N`document.getElementById("button")`.
Dialogue: 0,0:00:49.31,0:00:53.19,Default,,0000,0000,0000,,O próximo passar é definir \Na função de listner do evento.
Dialogue: 0,0:00:53.19,0:00:57.88,Default,,0000,0000,0000,,`var onButtonClick = function() {`\N
Dialogue: 0,0:00:57.88,0:01:03.77,Default,,0000,0000,0000,,e então, dentro daqui, nós iremos apenas \Ncomeçar anexando uma mensagem.
Dialogue: 0,0:01:03.77,0:01:08.38,Default,,0000,0000,0000,,Então, \N`document.getElementById("message")`,
Dialogue: 0,0:01:08.38,0:01:10.71,Default,,0000,0000,0000,,nós temos uma pequenina \Nmensagem legal "div".
Dialogue: 0,0:01:10.71,0:01:20.71,Default,,0000,0000,0000,,E nós iremos apenas: `textContent +=\N"Você me clicou! Muito obrigado!"`
Dialogue: 0,0:01:20.71,0:01:23.16,Default,,0000,0000,0000,,Um "div" muito grato!
Dialogue: 0,0:01:23.16,0:01:28.80,Default,,0000,0000,0000,,Finalmente, terceiro passo, nós iremos\Nadicionar o evento listner para o botão
Dialogue: 0,0:01:28.80,0:01:31.71,Default,,0000,0000,0000,,para que isto possa chamar \Na função quando for clicado.
Dialogue: 0,0:01:31.71,0:01:36.49,Default,,0000,0000,0000,,então,`("click", onButtonClick)`.
Dialogue: 0,0:01:36.49,0:01:42.96,Default,,0000,0000,0000,,Pause o tutorial agora, e veja por conta \Nprópria, que ele funciona como o esperado.
Dialogue: 0,0:01:42.96,0:01:47.18,Default,,0000,0000,0000,,Agora, vamos fazê-lo dizer alguma coisa\Ncom base no que há no formulário.
Dialogue: 0,0:01:47.18,0:01:52.85,Default,,0000,0000,0000,,Precisamos descobrir como conseguir o que\No usuário digitou no campo "name".
Dialogue: 0,0:01:52.85,0:01:55.83,Default,,0000,0000,0000,,Vamos fazer uma variável para isso.
Dialogue: 0,0:01:55.83,0:02:04.77,Default,,0000,0000,0000,,Então,\N`var name = document.getElementById`,
Dialogue: 0,0:02:04.77,0:02:07.34,Default,,0000,0000,0000,,desde que isso possui uma ID,
Dialogue: 0,0:02:07.34,0:02:11.32,Default,,0000,0000,0000,,então nós colocamos ela lá.
Dialogue: 0,0:02:11.32,0:02:17.12,Default,,0000,0000,0000,,Vamos fazer um novo "string" para \Nas saudações, e unir o nosso disso,
Dialogue: 0,0:02:17.12,0:02:22.72,Default,,0000,0000,0000,,então `var greeting = "Heyaz"`,\Nessa é minha saudação favorita,
Dialogue: 0,0:02:22.72,0:02:24.20,Default,,0000,0000,0000,,` + name`.
Dialogue: 0,0:02:24.20,0:02:30.35,Default,,0000,0000,0000,,Okay, então nós temos uma "string", e mais\No que estiver armazenado na variável.
Dialogue: 0,0:02:30.35,0:02:38.77,Default,,0000,0000,0000,,E agora, este aqui, o conteúdo do texto,\Nrealmente deve ser `greeting` .
Dialogue: 0,0:02:38.77,0:02:41.69,Default,,0000,0000,0000,,Vamos ver, isso parece certo
Dialogue: 0,0:02:41.69,0:02:44.90,Default,,0000,0000,0000,,encontramos a entrada do nome,\Nfizemos uma "string" de saudações,
Dialogue: 0,0:02:44.90,0:02:47.73,Default,,0000,0000,0000,,e nós anexamos isso a um "div".
Dialogue: 0,0:02:47.73,0:02:53.03,Default,,0000,0000,0000,,Pause o tutorial, e veja \Nse isso funcionou.
Dialogue: 0,0:02:53.03,0:02:55.63,Default,,0000,0000,0000,,Não é bem assim , né?
Dialogue: 0,0:02:55.63,0:03:01.88,Default,,0000,0000,0000,,Você viu "Heyaz [object Object]", ou\N"Heyaz object Element"?
Dialogue: 0,0:03:01.88,0:03:04.76,Default,,0000,0000,0000,,Assumir que o seu "nome" não é um Objeto
Dialogue: 0,0:03:04.76,0:03:08.07,Default,,0000,0000,0000,,e sem ofensa , se for,\Nisso é um ótimo nome--
Dialogue: 0,0:03:08.07,0:03:10.51,Default,,0000,0000,0000,,isso significa que algo está errado.
Dialogue: 0,0:03:10.51,0:03:13.70,Default,,0000,0000,0000,,Nós esperamos ver o que você digitou.
Dialogue: 0,0:03:13.70,0:03:16.48,Default,,0000,0000,0000,,Mas nós vemos "object".
Dialogue: 0,0:03:16.48,0:03:20.68,Default,,0000,0000,0000,,Isso significa que a variável "name" está \Napontando para um objeto,
Dialogue: 0,0:03:20.68,0:03:23.58,Default,,0000,0000,0000,,e não a "string" que nós esperávamos \Nque estivesse apontando.
Dialogue: 0,0:03:23.58,0:03:26.65,Default,,0000,0000,0000,,Talvez você já tenha \Ndescoberto o problema.
Dialogue: 0,0:03:26.65,0:03:31.88,Default,,0000,0000,0000,,Nós armazenamos todo o elemento de \Nobjeto, dentro da variável "name".
Dialogue: 0,0:03:31.88,0:03:34.99,Default,,0000,0000,0000,,E o elemento de um objeto \Né um grande objeto
Dialogue: 0,0:03:34.99,0:03:37.10,Default,,0000,0000,0000,,com muita informação sobre o elemento:
Dialogue: 0,0:03:37.10,0:03:39.53,Default,,0000,0000,0000,,todos os seus atributos, \Ntodos os seus métodos.
Dialogue: 0,0:03:39.53,0:03:43.47,Default,,0000,0000,0000,,Para encontrar o que o usuário digitou, \Nnós temos que acessar uma propriedade
Dialogue: 0,0:03:43.47,0:03:46.21,Default,,0000,0000,0000,,particular dos elementos: o valor.
Dialogue: 0,0:03:46.21,0:03:51.92,Default,,0000,0000,0000,,E eu vou digitar `.value`,\Nque deve concertar isso.
Dialogue: 0,0:03:51.92,0:03:56.18,Default,,0000,0000,0000,,Pause o tutorial, e tente novamente.
Dialogue: 0,0:03:56.18,0:03:57.98,Default,,0000,0000,0000,,Funcionou, certo?
Dialogue: 0,0:03:57.98,0:04:01.91,Default,,0000,0000,0000,,Agora, esse é um erro comum, então \Npreste atenção em relação a isso.
Dialogue: 0,0:04:01.91,0:04:05.01,Default,,0000,0000,0000,,Eu quero lhe mostrar mais um erro comum.
Dialogue: 0,0:04:05.01,0:04:13.96,Default,,0000,0000,0000,,Eu vou pegar essa linha daqui, \Ne mover para fora da função.
Dialogue: 0,0:04:13.96,0:04:22.74,Default,,0000,0000,0000,,Agora, pause o tutorial, digite a entrada\Ne pressione o botão.
Dialogue: 0,0:04:22.74,0:04:25.100,Default,,0000,0000,0000,,Se ele quebrou da maneira que deveria,\Nentão você deve ter visto,
Dialogue: 0,0:04:25.100,0:04:28.05,Default,,0000,0000,0000,,uma "string" vazia para o seu nome.
Dialogue: 0,0:04:28.05,0:04:29.69,Default,,0000,0000,0000,,Descobriu o porquê?
Dialogue: 0,0:04:29.69,0:04:33.94,Default,,0000,0000,0000,,Você deve pensar com cuidado sobre\Ncada linha que é executada.
Dialogue: 0,0:04:33.94,0:04:37.10,Default,,0000,0000,0000,,No código atual, o navegador\Ncarrega a página,
Dialogue: 0,0:04:37.10,0:04:39.77,Default,,0000,0000,0000,,e executa o JavaScript linha por linha.
Dialogue: 0,0:04:39.77,0:04:42.93,Default,,0000,0000,0000,,Primeiro, guarda o \Nelemento botão na variável.
Dialogue: 0,0:04:42.93,0:04:46.82,Default,,0000,0000,0000,,Em seguida, armazena o valor do\No elemento de entrada na variável.
Dialogue: 0,0:04:46.82,0:04:50.46,Default,,0000,0000,0000,,Porém, armazena o valor no \Ntempo que a página carrega,
Dialogue: 0,0:04:50.46,0:04:52.46,Default,,0000,0000,0000,,o qual estará vazio.
Dialogue: 0,0:04:52.46,0:04:56.32,Default,,0000,0000,0000,,Em seguida, ele define uma função \Ne atribui o evento listner (que ouve).
Dialogue: 0,0:04:56.32,0:05:00.42,Default,,0000,0000,0000,,Quando o listner é chamado, o "name" \Nainda está a mesma "string"
Dialogue: 0,0:05:00.42,0:05:02.88,Default,,0000,0000,0000,,que estava quando a página foi carregada.
Dialogue: 0,0:05:02.88,0:05:06.20,Default,,0000,0000,0000,,Assim, o listner nunca descobre\Na última coisa que o usuário digitou.
Dialogue: 0,0:05:06.20,0:05:08.53,Default,,0000,0000,0000,,E por isso essa linha de código
Dialogue: 0,0:05:08.53,0:05:13.19,Default,,0000,0000,0000,,deve ficar no interior dessa\Nfunção evento listner,
Dialogue: 0,0:05:13.19,0:05:18.76,Default,,0000,0000,0000,,então ele encontra o valor no tempo\Nem que o evento ocorre.
Dialogue: 0,0:05:18.76,0:05:21.94,Default,,0000,0000,0000,,Vamos adicionar um código para \Nolhar o valor da linguagem agora,
Dialogue: 0,0:05:21.94,0:05:24.41,Default,,0000,0000,0000,,para ter certeza que você está \Nrealmente entendendo isso.
Dialogue: 0,0:05:24.41,0:05:29.60,Default,,0000,0000,0000,,Dentro do listner, eu irei armazenar \Na linguagem dentro da variável "lang".
Dialogue: 0,0:05:31.77,0:05:34.55,Default,,0000,0000,0000,,Ugh, olhe essa indentação, está horrível.
Dialogue: 0,0:05:34.55,0:05:36.89,Default,,0000,0000,0000,,Vamos alinhar isso.
Dialogue: 0,0:05:36.89,0:05:38.84,Default,,0000,0000,0000,,Okay, então...
Dialogue: 0,0:05:38.84,0:05:41.45,Default,,0000,0000,0000,,[digitando]
Dialogue: 0,0:05:46.77,0:05:51.23,Default,,0000,0000,0000,,E você irá notar que eu estou nomeando \Nminhas variáveis iguais as minhas IDs,
Dialogue: 0,0:05:51.23,0:05:55.29,Default,,0000,0000,0000,,mais isso é apenas o que eu estou fazendo,\Nvocê não precisar fazer o mesmo.
Dialogue: 0,0:05:55.29,0:05:59.79,Default,,0000,0000,0000,,Agora, quero exibir uma mensagem diferente\Nbaseada na linguagem que eles encolheram.
Dialogue: 0,0:05:59.79,0:06:03.63,Default,,0000,0000,0000,,Observe o valor não é o que é mostrado\Nno drop-down.
Dialogue: 0,0:06:03.63,0:06:06.88,Default,,0000,0000,0000,,É o valor atribuído no HTML.
Dialogue: 0,0:06:06.88,0:06:11.25,Default,,0000,0000,0000,,Então "lang" deve ser "en", "es" ou "plt".
Dialogue: 0,0:06:11.25,0:06:17.21,Default,,0000,0000,0000,,então isso significa que:\N`if (lang === "es")`,
Dialogue: 0,0:06:17.21,0:06:23.68,Default,,0000,0000,0000,,então a saudação deverá ser "Hola",
Dialogue: 0,0:06:23.68,0:06:26.81,Default,,0000,0000,0000,,Vamos em frente e fazer \Nessa variável de saudação aqui.
Dialogue: 0,0:06:26.81,0:06:35.10,Default,,0000,0000,0000,,Então a saudação \Nserá "Hola, " mais o nome.
Dialogue: 0,0:06:35.10,0:06:41.22,Default,,0000,0000,0000,,E se a linguagem por igual a "plt",\Na velha e boa "Pig Latin",
Dialogue: 0,0:06:41.22,0:06:48.54,Default,,0000,0000,0000,,a saudação deverá ser,\N"Ello-hey, " mais o nome.
Dialogue: 0,0:06:48.54,0:06:53.17,Default,,0000,0000,0000,,e então nós podemos utilizar \Num "else" para o nosso Inglês.
Dialogue: 0,0:06:53.17,0:06:55.37,Default,,0000,0000,0000,,Eu vou apenas mover isso para dentro.
Dialogue: 0,0:06:55.37,0:06:56.80,Default,,0000,0000,0000,,Muito bem.
Dialogue: 0,0:06:56.80,0:07:00.37,Default,,0000,0000,0000,,Ooh, e se você quiser um desafio bônus,
Dialogue: 0,0:07:00.37,0:07:03.84,Default,,0000,0000,0000,,tente fazer um conversor \N"Pig Latin" para nomes,
Dialogue: 0,0:07:03.84,0:07:07.68,Default,,0000,0000,0000,,para que a saudação inteira, \Ninclusive o nome, seja traduzida.
Dialogue: 0,0:07:07.68,0:07:10.01,Default,,0000,0000,0000,,Isso seria bem legal.
Dialogue: 0,0:07:10.01,0:07:13.30,Default,,0000,0000,0000,,Agora pause o tutorial, \Ncoloque o seu nome,
Dialogue: 0,0:07:13.30,0:07:19.10,Default,,0000,0000,0000,,escolha uma linguagem diferente e tente.
Dialogue: 0,0:07:19.10,0:07:20.24,Default,,0000,0000,0000,,Legal, né?
Dialogue: 0,0:07:20.24,0:07:24.49,Default,,0000,0000,0000,,Existem várias coisas que você pode fazer\Ncom entradas de formulário e JavaScript:
Dialogue: 0,0:07:24.49,0:07:27.67,Default,,0000,0000,0000,,jogos de palavra, jogos de \Nnúmeros, contador de histórias...
Dialogue: 0,0:07:27.67,0:07:30.03,Default,,0000,0000,0000,,e se você tiver um server \Nfora do Khan Academy,
Dialogue: 0,0:07:30.03,0:07:33.45,Default,,0000,0000,0000,,você pode utilizar o JavaScript para \Npré-processar o formato de saída
Dialogue: 0,0:07:33.45,0:07:35.36,Default,,0000,0000,0000,,antes de mandar para o servidor.
Dialogue: 0,0:07:35.36,0:07:38.52,Default,,0000,0000,0000,,Exitem muito mais eventos que você\Npode usar com um formulário,
Dialogue: 0,0:07:38.52,0:07:40.70,Default,,0000,0000,0000,,como pressionar teclas e eventos de foco.
Dialogue: 0,0:07:40.70,0:07:44.15,Default,,0000,0000,0000,,Apenas se lembre de olhar \Npara o valor de entrada,
Dialogue: 0,0:07:44.15,0:07:47.29,Default,,0000,0000,0000,,e conferir o valor na hora certa.
Dialogue: 0,0:07:47.29,0:07:50.03,Default,,0000,0000,0000,,Você pegará a prática nisso \Nno próximo desafio,
Dialogue: 0,0:07:50.11,0:07:52.21,Default,,0000,0000,0000,,o qual é o meu favorito.
Dialogue: 0,0:07:52.32,0:07:53.87,Default,,0000,0000,0000,,[Legendado por Gabriel Mello Fernandes]\N[Revisado por Paulo Trentin]