[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.56,0:00:03.45,Default,,0000,0000,0000,,Tenho essa página \Ncom uma foto do Winston.
Dialogue: 0,0:00:03.45,0:00:06.56,Default,,0000,0000,0000,,Está ficando frio aqui,\Ne o Winston está ficando velho.
Dialogue: 0,0:00:06.56,0:00:08.65,Default,,0000,0000,0000,,Ele gostaria de ter uma barba.
Dialogue: 0,0:00:08.65,0:00:10.70,Default,,0000,0000,0000,,Eu mesma poderia desenhar a barba.
Dialogue: 0,0:00:10.70,0:00:13.91,Default,,0000,0000,0000,,Mas acho que seria mais legal se \No usuário pudesse desenhar a barba
Dialogue: 0,0:00:13.91,0:00:16.41,Default,,0000,0000,0000,,no Winston ele mesmo,\Nentretanto eles querem que seja
Dialogue: 0,0:00:16.41,0:00:20.38,Default,,0000,0000,0000,,uma barba grande, com parte \Npor fazer, o que eles quiserem
Dialogue: 0,0:00:20.38,0:00:22.71,Default,,0000,0000,0000,,Como podemos fazer isso ?
Dialogue: 0,0:00:22.71,0:00:28.69,Default,,0000,0000,0000,,Um modo é adicionar um evento de captura\Npara o evento "mouseMove" na imagem.
Dialogue: 0,0:00:28.69,0:00:33.03,Default,,0000,0000,0000,,Assim nossa função seria executada \Nsempre que o usuário mover o mouse
Dialogue: 0,0:00:33.03,0:00:34.39,Default,,0000,0000,0000,,sobre do rosto.
Dialogue: 0,0:00:34.39,0:00:37.61,Default,,0000,0000,0000,,Vamos fazer isso, usando \No que acabamos de aprender.
Dialogue: 0,0:00:37.61,0:00:41.41,Default,,0000,0000,0000,,O primeiro passo é achar \No elemento, a imagem.
Dialogue: 0,0:00:41.41,0:00:45.04,Default,,0000,0000,0000,,[Digitando]
Dialogue: 0,0:00:47.01,0:00:50.28,Default,,0000,0000,0000,,..."face", já que estou usando esse Id.
Dialogue: 0,0:00:50.28,0:00:53.87,Default,,0000,0000,0000,,O segundo passo é definir a \Nfunção que será executada.
Dialogue: 0,0:00:53.87,0:00:58.27,Default,,0000,0000,0000,,E vamos começar com uma bem simples \Nsó pra ter certeza de que funciona,
Dialogue: 0,0:00:58.27,0:01:01.55,Default,,0000,0000,0000,,e iremos implementá-la melhor depois.
Dialogue: 0,0:01:01.55,0:01:05.35,Default,,0000,0000,0000,,[digitando]
Dialogue: 0,0:01:11.72,0:01:13.18,Default,,0000,0000,0000,,Ok.
Dialogue: 0,0:01:13.18,0:01:17.79,Default,,0000,0000,0000,,E o último passo é \Nconectar isso a isso,
Dialogue: 0,0:01:17.79,0:01:22.64,Default,,0000,0000,0000,,para saber que a função foi executada\Nquando o 'mouseMove' for capturado.
Dialogue: 0,0:01:22.64,0:01:27.85,Default,,0000,0000,0000,,Então escreveremos \N'face.addEventListener("mousemove",'
Dialogue: 0,0:01:27.85,0:01:32.07,Default,,0000,0000,0000,,e então passar o \Nnome da função, `onMouseMove`.
Dialogue: 0,0:01:32.07,0:01:36.59,Default,,0000,0000,0000,,Agora, pare o passo-a-passo, e tente \Nmover seu mouse sobre o rosto.
Dialogue: 0,0:01:36.59,0:01:38.40,Default,,0000,0000,0000,,Você viu a mensagem?
Dialogue: 0,0:01:39.88,0:01:43.86,Default,,0000,0000,0000,,Ok, espero que você tenha visto\Nassim o evento está funcionando.
Dialogue: 0,0:01:43.86,0:01:47.34,Default,,0000,0000,0000,,Mas não é isso que \Nqueremos que o nosso faça.
Dialogue: 0,0:01:47.34,0:01:50.45,Default,,0000,0000,0000,,Queremos que ele \Ndesenhe, não escreva um texto.
Dialogue: 0,0:01:50.45,0:01:53.36,Default,,0000,0000,0000,,Como podemos \Ndesenhar em uma página?
Dialogue: 0,0:01:53.36,0:01:58.47,Default,,0000,0000,0000,,Poderiámos usar a tag "" e \Ndesenhar alguns pixels nela, como fazemos
Dialogue: 0,0:01:58.47,0:02:00.73,Default,,0000,0000,0000,,com programa ProcessingJS aqui.
Dialogue: 0,0:02:00.73,0:02:06.50,Default,,0000,0000,0000,,Mas só estamos desenhando a barba,\Nque é um monte de pontos pretos.
Dialogue: 0,0:02:06.50,0:02:11.57,Default,,0000,0000,0000,,Então podíamos apenas criar uma \Npara cada ponto, e posicionar a 
Dialogue: 0,0:02:11.57,0:02:13.55,Default,,0000,0000,0000,,com um posicionamento "absolute".
Dialogue: 0,0:02:13.55,0:02:18.31,Default,,0000,0000,0000,,Deixe-me mostrar como fazer isso\Ncom um folículo de barba
Dialogue: 0,0:02:18.31,0:02:24.52,Default,,0000,0000,0000,,Vou criar a  com a classe \N"beard", e associar um CSS a ele.
Dialogue: 0,0:02:24.52,0:02:29.38,Default,,0000,0000,0000,,Pra criar o estilo da \Nbarba, que colaremos aqui.
Dialogue: 0,0:02:29.74,0:02:31.75,Default,,0000,0000,0000,,Deixe-me arrumar isso.
Dialogue: 0,0:02:31.75,0:02:36.47,Default,,0000,0000,0000,,Como você pode ver nossa barba é \Num fundo negro, de 5 por 5 pixels,
Dialogue: 0,0:02:36.47,0:02:40.52,Default,,0000,0000,0000,,é preciso uma borda com um raio de \N2 pixels para fazer esse ponto redondo,
Dialogue: 0,0:02:40.52,0:02:44.68,Default,,0000,0000,0000,,e está usando um esquema \Nde posicionamento absoluto.
Dialogue: 0,0:02:44.68,0:02:48.49,Default,,0000,0000,0000,,Normalmente, a \Naparece embaixo do imagem.
Dialogue: 0,0:02:48.49,0:02:51.47,Default,,0000,0000,0000,,Como fazemos para que ela \Napareça encima do rosto ?
Dialogue: 0,0:02:51.47,0:02:55.27,Default,,0000,0000,0000,,Estamos usando posicionamento,\Nabsoluto, ou seja, devemos usar
Dialogue: 0,0:02:55.27,0:02:59.83,Default,,0000,0000,0000,,as propriedades `top` e `left`\Npara dizer exatamente oque deve
Dialogue: 0,0:02:59.83,0:03:02.07,Default,,0000,0000,0000,,ser posicionado,\Nagora está como absoluto.
Dialogue: 0,0:03:02.07,0:03:07.92,Default,,0000,0000,0000,,Vamos mudar para \N`top: 80px;`, e `left:15px;`.
Dialogue: 0,0:03:07.92,0:03:09.42,Default,,0000,0000,0000,,Lindo.
Dialogue: 0,0:03:09.42,0:03:13.75,Default,,0000,0000,0000,,Agora que temos isso funcionando em HTML,\Nvamos fazer isso funcionar em JavaScript,
Dialogue: 0,0:03:13.75,0:03:18.86,Default,,0000,0000,0000,,De modo que o usuário crie dinamicamente \Nessa  toda vez que mover o mouse.
Dialogue: 0,0:03:18.86,0:03:22.78,Default,,0000,0000,0000,,Voltemos para a \Nnossa função JavaScript.
Dialogue: 0,0:03:22.78,0:03:25.53,Default,,0000,0000,0000,,A primeira coisa é criar a ,
Dialogue: 0,0:03:25.53,0:03:31.41,Default,,0000,0000,0000,,Que podemos fazer com a função\N"document.createElement()"
Dialogue: 0,0:03:31.41,0:03:33.59,Default,,0000,0000,0000,,Isso será uma .
Dialogue: 0,0:03:33.59,0:03:39.58,Default,,0000,0000,0000,,A segunda coisa a fazer é incluir \Nessa classe: "beard.className = "beard";".
Dialogue: 0,0:03:39.58,0:03:42.20,Default,,0000,0000,0000,,Então temos essa \N, flutuando pelo espaço.
Dialogue: 0,0:03:42.20,0:03:47.07,Default,,0000,0000,0000,,Passo final, fixá-la no corpo.
Dialogue: 0,0:03:47.07,0:03:52.10,Default,,0000,0000,0000,,Certo, basicamente fizemos em JavaScript\No que tinhamos feito em HTML,
Dialogue: 0,0:03:52.10,0:03:54.67,Default,,0000,0000,0000,,Agora podemos apagar esse HTML.
Dialogue: 0,0:03:55.36,0:03:58.76,Default,,0000,0000,0000,,Agora você deve pausar o passo-a-passo\Ne tentar clicar no Winston.
Dialogue: 0,0:03:58.76,0:04:00.31,Default,,0000,0000,0000,,Veja o que acontece.
Dialogue: 0,0:04:02.41,0:04:04.93,Default,,0000,0000,0000,,Você viu um folículo de barba aparecer?
Dialogue: 0,0:04:04.93,0:04:07.19,Default,,0000,0000,0000,,E você tentar clicar várias vezes ?
Dialogue: 0,0:04:07.19,0:04:11.09,Default,,0000,0000,0000,,Se sim, provavelmente percebeu que \No segundo click não fez nada.
Dialogue: 0,0:04:11.09,0:04:13.52,Default,,0000,0000,0000,,Ou pelo menos pareceu que não fez nada.
Dialogue: 0,0:04:13.52,0:04:17.86,Default,,0000,0000,0000,,Isso porque todas as  tem o mesmo\Nvalor para "top" e "left",
Dialogue: 0,0:04:17.86,0:04:21.08,Default,,0000,0000,0000,,Então as novas somente são \Nempilhadas uma encima da outra.
Dialogue: 0,0:04:21.08,0:04:25.49,Default,,0000,0000,0000,,Queremos que a  seja \Ncriada onde tiver um click.
Dialogue: 0,0:04:25.49,0:04:30.39,Default,,0000,0000,0000,,Como descobrimos \Nonde o mouse está ?
Dialogue: 0,0:04:30.39,0:04:34.32,Default,,0000,0000,0000,,Como se sabe, o navegador\Ngrava muitas informações.
Dialogue: 0,0:04:34.32,0:04:38.08,Default,,0000,0000,0000,,Cada vez que qualquer evento \Nde usuário ocorre, como a localização.
Dialogue: 0,0:04:38.08,0:04:41.02,Default,,0000,0000,0000,,E o navegador te passa essa\Ninformação toda vez
Dialogue: 0,0:04:41.02,0:04:43.22,Default,,0000,0000,0000,,chamando sua função do evento listner.
Dialogue: 0,0:04:43.22,0:04:46.80,Default,,0000,0000,0000,,Mas onde, como, podemos \Nobter essa informação incrível ?
Dialogue: 0,0:04:46.80,0:04:51.41,Default,,0000,0000,0000,,Vou digitar uma letra, \Npra te dar dica.
Dialogue: 0,0:04:51.41,0:04:56.07,Default,,0000,0000,0000,,Esse 'e' aqui, é o objeto de \Ninformação do evento.
Dialogue: 0,0:04:56.07,0:04:59.61,Default,,0000,0000,0000,,E o navegador envia isso como o \Nprimeiro argumento sempre que chama
Dialogue: 0,0:04:59.61,0:05:02.13,Default,,0000,0000,0000,,uma função que capta eventos.
Dialogue: 0,0:05:02.13,0:05:06.02,Default,,0000,0000,0000,,Não precisávamos disso antes, então não \Nme preocupei com a lista de argumentos.
Dialogue: 0,0:05:06.02,0:05:09.00,Default,,0000,0000,0000,,Mas agora que vamos usá-la,\NVou dar um nome a ela para ficar
Dialogue: 0,0:05:09.00,0:05:11.51,Default,,0000,0000,0000,,mais fácil referenciar dentro da função.
Dialogue: 0,0:05:11.51,0:05:15.12,Default,,0000,0000,0000,,Em JavaScript, uma função pode ser\Nchamada com qualquer quantidade
Dialogue: 0,0:05:15.12,0:05:18.59,Default,,0000,0000,0000,,de argumentos, mesmo se a função \Nnão fizer referência a nenhum deles.
Dialogue: 0,0:05:18.59,0:05:22.70,Default,,0000,0000,0000,,Então sempre estamos recebendo essa \Ninformação, apenas não sabíamos disso.
Dialogue: 0,0:05:22.70,0:05:28.28,Default,,0000,0000,0000,,Agora vou imprimir a mensagem \N`e`:`console.log(e)`.
Dialogue: 0,0:05:28.28,0:05:32.16,Default,,0000,0000,0000,,Pare o passo-a-passo, clique no\NWinston e verifique seu console.
Dialogue: 0,0:05:32.16,0:05:34.41,Default,,0000,0000,0000,,Você deverá ver o objeto \Nde evento na tela,
Dialogue: 0,0:05:34.41,0:05:37.15,Default,,0000,0000,0000,,e navegar por todas as\Npropriedades dele.
Dialogue: 0,0:05:38.58,0:05:43.27,Default,,0000,0000,0000,,Há duas propriedades do evento em \Nparticular que estamos muito interessados.
Dialogue: 0,0:05:43.27,0:05:45.59,Default,,0000,0000,0000,,"clientX" e "clientY".
Dialogue: 0,0:05:45.59,0:05:49.31,Default,,0000,0000,0000,,Elas gravam as coordenadas x e y\Ndo evento, e é isso que nós vamos usar.
Dialogue: 0,0:05:49.31,0:05:51.16,Default,,0000,0000,0000,,para posicionar a barba.
Dialogue: 0,0:05:51.16,0:06:02.02,Default,,0000,0000,0000,,vamos configurar o começo da barba igual a\N"e.clientY", mais "px", por unidades.
Dialogue: 0,0:06:02.02,0:06:10.32,Default,,0000,0000,0000,,E a esquerda igual a "e.clientX", \Nmais "px" por unidades.
Dialogue: 0,0:06:10.32,0:06:14.32,Default,,0000,0000,0000,,Agora pause e tente o mouse\Nsobre a imagem.
Dialogue: 0,0:06:14.32,0:06:16.03,Default,,0000,0000,0000,,Desenhe a barba do Winston.
Dialogue: 0,0:06:17.97,0:06:19.45,Default,,0000,0000,0000,,Bem legal, não ?
Dialogue: 0,0:06:19.45,0:06:23.16,Default,,0000,0000,0000,,Aposto que você pensou em um monte \Nde desenhos legais que você pode fazer,
Dialogue: 0,0:06:23.16,0:06:25.56,Default,,0000,0000,0000,,usando "clientX" e "clientY".
Dialogue: 0,0:06:25.56,0:06:28.79,Default,,0000,0000,0000,,E como você pode ver no console,\Ntem monte de outras propriedades
Dialogue: 0,0:06:28.79,0:06:31.25,Default,,0000,0000,0000,,No objeto de evento que você\Ntambém pode usar.
Dialogue: 0,0:06:31.25,0:06:35.35,Default,,0000,0000,0000,,O mais últil, creio, que\Nos referentes ao teclado.
Dialogue: 0,0:06:35.35,0:06:38.15,Default,,0000,0000,0000,,Então você pode descobrir \Nque teclas o usuário pressionou.
Dialogue: 0,0:06:38.15,0:06:40.54,Default,,0000,0000,0000,,quando ocorreu o evento,\Ne usar isso para fazer uma
Dialogue: 0,0:06:40.54,0:06:44.35,Default,,0000,0000,0000,,interface acessível por teclado, \Nou um jogo bem divertido.
Dialogue: 0,0:06:44.35,0:06:47.21,Default,,0000,0000,0000,,Mais uma coisa.
Dialogue: 0,0:06:47.21,0:06:49.70,Default,,0000,0000,0000,,Você não precisa chamar o \Nargumento de "e".
Dialogue: 0,0:06:49.70,0:06:57.31,Default,,0000,0000,0000,,Isso é típico, mas ele também pode ser \Nchamado de "evt", ou "event".
Dialogue: 0,0:06:57.31,0:07:00.60,Default,,0000,0000,0000,,Não importa como você chama \Nisso, desde que se refira ao
Dialogue: 0,0:07:00.60,0:07:03.70,Default,,0000,0000,0000,,ao primeiro argumento que o \Nnavegador passa para a sua função,
Dialogue: 0,0:07:03.70,0:07:09.48,Default,,0000,0000,0000,,e desde que você faça a referência\Ndo mesmo modo depois.
Dialogue: 0,0:07:09.48,0:07:13.11,Default,,0000,0000,0000,,Se você está tendo problema com \Nisso, use o log do console para
Dialogue: 0,0:07:13.11,0:07:15.80,Default,,0000,0000,0000,,depurar a aplicação e entender\No que está acontecendo.
Dialogue: 0,0:07:15.80,0:07:17.62,Default,,0000,0000,0000,,Quando você é um desenvolvedor web,
Dialogue: 0,0:07:17.62,0:07:21.54,Default,,0000,0000,0000,,O console é o seu \Nmelhor amigo use-o!
Dialogue: 0,0:07:21.54,0:07:23.00,Default,,0000,0000,0000,,[Legendado por Valter Bigeli]\N[Revisado por Paulo Trentin]