Usando propriedades de Evento (Versão Vídeo )

Essa é a gravação desse vídeo do passo-a-passo postado para faciliar a criação de legendas.
Por favor assista passo-a-passo interativo na Khan Academy, onde você parar o vídeo e editar o código
e ver em uma resolução melhor:
http://www.khanacademy.org/computer-programming

Tenho essa página
com uma foto do Winston.

Está ficando frio aqui,
e o Winston está ficando velho.

Ele gostaria de ter uma barba.

Eu mesma poderia desenhar a barba.

Mas acho que seria mais legal se
o usuário pudesse desenhar a barba

no Winston ele mesmo,
entretanto eles querem que seja

uma barba grande, com parte
por fazer, o que eles quiserem

Como podemos fazer isso ?

Um modo é adicionar um evento de captura
para o evento "mouseMove" na imagem.

Assim nossa função seria executada
sempre que o usuário mover o mouse

sobre do rosto.

Vamos fazer isso, usando
o que acabamos de aprender.

O primeiro passo é achar
o elemento, a imagem.

[Digitando]

..."face", já que estou usando esse Id.

O segundo passo é definir a
função que será executada.

E vamos começar com uma bem simples
só pra ter certeza de que funciona,

e iremos implementá-la melhor depois.

[digitando]

Ok.

E o último passo é
conectar isso a isso,

para saber que a função foi executada
quando o 'mouseMove' for capturado.

Então escreveremos
'face.addEventListener("mousemove",'

e então passar o
nome da função, `onMouseMove`.

Agora, pare o passo-a-passo, e tente
mover seu mouse sobre o rosto.

Você viu a mensagem?

Ok, espero que você tenha visto
assim o evento está funcionando.

Mas não é isso que
queremos que o nosso faça.

Queremos que ele
desenhe, não escreva um texto.

Como podemos
desenhar em uma página?

Poderiámos usar a tag "" e
desenhar alguns pixels nela, como fazemos

com programa ProcessingJS aqui.

Mas só estamos desenhando a barba,
que é um monte de pontos pretos.

Então podíamos apenas criar uma
para cada ponto, e posicionar a

com um posicionamento "absolute".

Deixe-me mostrar como fazer isso
com um folículo de barba

Vou criar a com a classe
"beard", e associar um CSS a ele.

Pra criar o estilo da
barba, que colaremos aqui.

Deixe-me arrumar isso.

Como você pode ver nossa barba é
um fundo negro, de 5 por 5 pixels,

é preciso uma borda com um raio de
2 pixels para fazer esse ponto redondo,

e está usando um esquema
de posicionamento absoluto.

Normalmente, a
aparece embaixo do imagem.

Como fazemos para que ela
apareça encima do rosto ?

Estamos usando posicionamento,
absoluto, ou seja, devemos usar

as propriedades `top` e `left`
para dizer exatamente oque deve

ser posicionado,
agora está como absoluto.

Vamos mudar para
`top: 80px;`, e `left:15px;`.

Lindo.

Agora que temos isso funcionando em HTML,
vamos fazer isso funcionar em JavaScript,

De modo que o usuário crie dinamicamente
essa toda vez que mover o mouse.

Voltemos para a
nossa função JavaScript.

A primeira coisa é criar a ,

Que podemos fazer com a função
"document.createElement()"

Isso será uma .

A segunda coisa a fazer é incluir
essa classe: "beard.className = "beard";".

Então temos essa
, flutuando pelo espaço.

Passo final, fixá-la no corpo.

Certo, basicamente fizemos em JavaScript
o que tinhamos feito em HTML,

Agora podemos apagar esse HTML.

Agora você deve pausar o passo-a-passo
e tentar clicar no Winston.

Veja o que acontece.

Você viu um folículo de barba aparecer?

E você tentar clicar várias vezes ?

Se sim, provavelmente percebeu que
o segundo click não fez nada.

Ou pelo menos pareceu que não fez nada.

Isso porque todas as tem o mesmo
valor para "top" e "left",

Então as novas somente são
empilhadas uma encima da outra.

Queremos que a seja
criada onde tiver um click.

Como descobrimos
onde o mouse está ?

Como se sabe, o navegador
grava muitas informações.

Cada vez que qualquer evento
de usuário ocorre, como a localização.

E o navegador te passa essa
informação toda vez

chamando sua função do evento listner.

Mas onde, como, podemos
obter essa informação incrível ?

Vou digitar uma letra,
pra te dar dica.

Esse 'e' aqui, é o objeto de
informação do evento.

E o navegador envia isso como o
primeiro argumento sempre que chama

uma função que capta eventos.

Não precisávamos disso antes, então não
me preocupei com a lista de argumentos.

Mas agora que vamos usá-la,
Vou dar um nome a ela para ficar

mais fácil referenciar dentro da função.

Em JavaScript, uma função pode ser
chamada com qualquer quantidade

de argumentos, mesmo se a função
não fizer referência a nenhum deles.

Então sempre estamos recebendo essa
informação, apenas não sabíamos disso.

Agora vou imprimir a mensagem
`e`:`console.log(e)`.

Pare o passo-a-passo, clique no
Winston e verifique seu console.

Você deverá ver o objeto
de evento na tela,

e navegar por todas as
propriedades dele.

Há duas propriedades do evento em
particular que estamos muito interessados.

"clientX" e "clientY".

Elas gravam as coordenadas x e y
do evento, e é isso que nós vamos usar.

para posicionar a barba.

vamos configurar o começo da barba igual a
"e.clientY", mais "px", por unidades.

E a esquerda igual a "e.clientX",
mais "px" por unidades.

Agora pause e tente o mouse
sobre a imagem.

Desenhe a barba do Winston.

Bem legal, não ?

Aposto que você pensou em um monte
de desenhos legais que você pode fazer,

usando "clientX" e "clientY".

E como você pode ver no console,
tem monte de outras propriedades

No objeto de evento que você
também pode usar.

O mais últil, creio, que
os referentes ao teclado.

Então você pode descobrir
que teclas o usuário pressionou.

quando ocorreu o evento,
e usar isso para fazer uma

interface acessível por teclado,
ou um jogo bem divertido.

Mais uma coisa.

Você não precisa chamar o
argumento de "e".

Isso é típico, mas ele também pode ser
chamado de "evt", ou "event".

Não importa como você chama
isso, desde que se refira ao

ao primeiro argumento que o
navegador passa para a sua função,

e desde que você faça a referência
do mesmo modo depois.

Se você está tendo problema com
isso, use o log do console para

depurar a aplicação e entender
o que está acontecendo.

Quando você é um desenvolvedor web,

O console é o seu
melhor amigo use-o!

[Legendado por Valter Bigeli]
[Revisado por Paulo Trentin]