0:00:00.461,0:00:05.742
Agora quero mostrá-los mais uma coisa[br]que você pode fazer o objeto evento

0:00:05.742,0:00:09.936
Esta página que eu fiz responde[br]a eterna questão

0:00:09.936,0:00:12.150
"O que Noes disse?"

0:00:12.150,0:00:16.599
Ou, mais específico, como ele soaria[br]se você pudesse ouvi-lo

0:00:16.599,0:00:20.589
Se você clicar no link,[br]você será levado a um arquivo mp3

0:00:20.589,0:00:25.163
que deve tocar no navegador e[br]responder esta questão para você.

0:00:25.163,0:00:30.009
No entanto, eu não quero que o usuário[br]precise deixar a página.

0:00:30.009,0:00:33.445
Você deve ouvir diretamente na página.

0:00:33.445,0:00:37.891
Podemos fazer isso com JavaScript[br]tocando uma tag

0:00:37.891,0:00:40.957
assim que o usuário clicar no link.

0:00:40.957,0:00:45.109
Primeiro, vamos guardar o link[br]em uma variável.

0:00:45.109,0:00:48.078
(escrevendo)

0:00:55.770,0:00:58.099
Agora vamos definir uma função de retorno.

0:00:58.099,0:01:03.735
Esta será uma interessante.

0:01:03.735,0:01:10.165
Então, na função de retorno, nós queremos[br]criar uma tag audio dinamicamente

0:01:10.165,0:01:12.033
(escrevendo)

0:01:15.816,0:01:19.825
E esta é uma ótima nova tag [br]disponível no navegadores modernos.

0:01:19.825,0:01:26.104
E então audio.src igual--[br]e vamos configurá-lo igual a

0:01:26.104,0:01:32.563
este 'href' aqui--[br]a tag audio é bem parecida com a tag image

0:01:32.563,0:01:37.335
E então vamos também dize[br]'audioEl.autoplay = true',

0:01:37.335,0:01:40.333
isto fará ele tocar assim que[br]nós adicionarmos à página.

0:01:40.333,0:01:42.953
E finalmente, nós adicionamos à página.

0:01:42.953,0:01:45.574
E, de fato, não importa onde eu coloco ele

0:01:45.574,0:01:48.064
uma vez que não estamos mesmo vendo ele.

0:01:48.064,0:01:52.295
Agora, quando eles clicam, deve ser criado[br]uma áudio, configurar a fonte,

0:01:52.295,0:01:55.387
configurar para autoplay, e[br]adicioná-lo à página.

0:01:55.387,0:01:59.444
Finalmente, nós certificamo-nos[br]que o ouvinte do evento é chamado

0:01:59.444,0:02:01.376
quando o link é clicado.

0:02:01.376,0:02:03.723
(escrevendo)

0:02:08.283,0:02:12.951
...e então nós passamos no nome[br]da função.

0:02:12.951,0:02:17.385
Ok, você sabe o que fazer:[br]Pausa na conversa e tente.

0:02:17.385,0:02:19.729
hmmmm

0:02:19.729,0:02:21.110
O que aconteceu?

0:02:21.110,0:02:26.337
Para mim, o som toca--[br]bem baixo, um resmungo de Oh Noes--

0:02:26.337,0:02:29.789
mas o link ainda abre num nova janela.

0:02:29.789,0:02:33.476
Idealmente, uma vez tocado o som[br]o navegador não vai mais

0:02:33.476,0:02:37.548
tentar abrir o link porque ele já ouviu

0:02:37.548,0:02:42.920
A forma de fazer isso é dizer ao navegador[br]para cancelar o comportamento padrão.

0:02:42.920,0:02:47.148
Você vê, por padrão, quando um link é clicaodo

0:02:47.148,0:02:50.321
o navegador leva o usuário até este link.

0:02:50.321,0:02:54.226
Mas se nós sobrescrevermos a forma[br]como o link funciona, no JavaScript,

0:02:54.226,0:02:58.004
As vezes não queremos que o navegador[br]navegue para o link.

0:02:58.004,0:03:02.731
Nós podemos dizer para ele parar usando[br]um método na propriedade 'event'

0:03:02.731,0:03:05.299
chamado 'preventDefault()'.

0:03:05.299,0:03:09.897
Então precisamos referenciar o objeto[br]que nós passamos

0:03:09.897,0:03:15.830
e então, aqui dentro, nós dizemos:[br]'e.preventDefault();'

0:03:15.830,0:03:19.420
Isto deve dizer ao navegador[br]para evitar o comportamento padrão

0:03:19.420,0:03:21.399
associado com este evento.

0:03:21.399,0:03:25.995
Agora vamos parar um pouco e [br]tentar novamente

0:03:25.995,0:03:28.385
Você só ouviu o som, certo?

0:03:28.385,0:03:30.949
Esta é uma experiência de usuário[br]bem melhor.

0:03:30.949,0:03:34.959
E isto é o que é conhecido como[br]"melhoria progressiva"--

0:03:34.959,0:03:39.514
iniciando uma página web como HTML com[br]o comportamento padrão do navegador

0:03:39.514,0:03:44.650
então melhorando com JavaScript para[br]obter uma experiência melhor.

0:03:44.650,0:03:48.361
Você vai querer usar este 'prevendDefault'[br]quando você estiver

0:03:48.361,0:03:50.445
anexando ouvidores de clicks nos links.

0:03:50.445,0:03:54.447
E você pode também se deparar usando[br]no processamento de formulários,

0:03:54.447,0:03:57.485
uma vez que o navegador tem alguns[br]comportamentos padrões lá,

0:03:57.485,0:03:59.264
enviando para o servidor.

0:03:59.264,0:04:02.640
É importante manter a experiência [br]do usuário em mente,

0:04:02.640,0:04:05.660
e se ela não for ótima na sua página,

0:04:05.660,0:04:08.463
entenda como deixá-la melhor.

0:04:08.463,0:04:10.596
Nós não podemos ensinar [br]tudo para você aqui,

0:04:10.596,0:04:13.929
mas a internet tem centenas [br]de respostas pra você.

0:04:13.929,0:04:16.121
Legendado por Francis Pires