WEBVTT

00:00:00.461 --> 00:00:05.742
Agora quero mostrá-los mais uma coisa
que você pode fazer o objeto evento

00:00:05.742 --> 00:00:09.936
Esta página que eu fiz responde
a eterna questão

00:00:09.936 --> 00:00:12.150
"O que Noes disse?"

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

00:00:16.599 --> 00:00:20.589
Se você clicar no link,
você será levado a um arquivo mp3

00:00:20.589 --> 00:00:25.163
que deve tocar no navegador e
responder esta questão para você.

00:00:25.163 --> 00:00:30.009
No entanto, eu não quero que o usuário
precise deixar a página.

00:00:30.009 --> 00:00:33.445
Você deve ouvir diretamente na página.

00:00:33.445 --> 00:00:37.891
Podemos fazer isso com JavaScript
tocando uma tag 

00:00:37.891 --> 00:00:40.957
assim que o usuário clicar no link.

00:00:40.957 --> 00:00:45.109
Primeiro, vamos guardar o link
em uma variável.

00:00:45.109 --> 00:00:48.078
(escrevendo)

00:00:55.770 --> 00:00:58.099
Agora vamos definir uma função de retorno.

00:00:58.099 --> 00:01:03.735
Esta será uma interessante.

00:01:03.735 --> 00:01:10.165
Então, na função de retorno, nós queremos
criar uma tag audio dinamicamente

00:01:10.165 --> 00:01:12.033
(escrevendo)

00:01:15.816 --> 00:01:19.825
E esta é uma ótima nova tag 
disponível no navegadores modernos.

00:01:19.825 --> 00:01:26.104
E então audio.src igual--
e vamos configurá-lo igual a

00:01:26.104 --> 00:01:32.563
este 'href' aqui--
a tag audio é bem parecida com a tag image

00:01:32.563 --> 00:01:37.335
E então vamos também dize
'audioEl.autoplay = true',

00:01:37.335 --> 00:01:40.333
isto fará ele tocar assim que
nós adicionarmos à página.

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

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

00:01:45.574 --> 00:01:48.064
uma vez que não estamos mesmo vendo ele.

00:01:48.064 --> 00:01:52.295
Agora, quando eles clicam, deve ser criado
uma áudio, configurar a fonte,

00:01:52.295 --> 00:01:55.387
configurar para autoplay, e
adicioná-lo à página.

00:01:55.387 --> 00:01:59.444
Finalmente, nós certificamo-nos
que o ouvinte do evento é chamado

00:01:59.444 --> 00:02:01.376
quando o link é clicado.

00:02:01.376 --> 00:02:03.723
(escrevendo)

00:02:08.283 --> 00:02:12.951
...e então nós passamos no nome
da função.

00:02:12.951 --> 00:02:17.385
Ok, você sabe o que fazer:
Pausa na conversa e tente.

00:02:17.385 --> 00:02:19.729
hmmmm

00:02:19.729 --> 00:02:21.110
O que aconteceu?

00:02:21.110 --> 00:02:26.337
Para mim, o som toca--
bem baixo, um resmungo de Oh Noes--

00:02:26.337 --> 00:02:29.789
mas o link ainda abre num nova janela.

00:02:29.789 --> 00:02:33.476
Idealmente, uma vez tocado o som
o navegador não vai mais

00:02:33.476 --> 00:02:37.548
tentar abrir o link porque ele já ouviu

00:02:37.548 --> 00:02:42.920
A forma de fazer isso é dizer ao navegador
para cancelar o comportamento padrão.

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

00:02:47.148 --> 00:02:50.321
o navegador leva o usuário até este link.

00:02:50.321 --> 00:02:54.226
Mas se nós sobrescrevermos a forma
como o link funciona, no JavaScript,

00:02:54.226 --> 00:02:58.004
As vezes não queremos que o navegador
navegue para o link.

00:02:58.004 --> 00:03:02.731
Nós podemos dizer para ele parar usando
um método na propriedade 'event'

00:03:02.731 --> 00:03:05.299
chamado 'preventDefault()'.

00:03:05.299 --> 00:03:09.897
Então precisamos referenciar o objeto
que nós passamos

00:03:09.897 --> 00:03:15.830
e então, aqui dentro, nós dizemos:
'e.preventDefault();'

00:03:15.830 --> 00:03:19.420
Isto deve dizer ao navegador
para evitar o comportamento padrão

00:03:19.420 --> 00:03:21.399
associado com este evento.

00:03:21.399 --> 00:03:25.995
Agora vamos parar um pouco e 
tentar novamente

00:03:25.995 --> 00:03:28.385
Você só ouviu o som, certo?

00:03:28.385 --> 00:03:30.949
Esta é uma experiência de usuário
bem melhor.

00:03:30.949 --> 00:03:34.959
E isto é o que é conhecido como
"melhoria progressiva"--

00:03:34.959 --> 00:03:39.514
iniciando uma página web como HTML com
o comportamento padrão do navegador

00:03:39.514 --> 00:03:44.650
então melhorando com JavaScript para
obter uma experiência melhor.

00:03:44.650 --> 00:03:48.361
Você vai querer usar este 'prevendDefault'
quando você estiver

00:03:48.361 --> 00:03:50.445
anexando ouvidores de clicks nos links.

00:03:50.445 --> 00:03:54.447
E você pode também se deparar usando
no processamento de formulários,

00:03:54.447 --> 00:03:57.485
uma vez que o navegador tem alguns
comportamentos padrões lá,

00:03:57.485 --> 00:03:59.264
enviando para o servidor.

00:03:59.264 --> 00:04:02.640
É importante manter a experiência 
do usuário em mente,

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

00:04:05.660 --> 00:04:08.463
entenda como deixá-la melhor.

00:04:08.463 --> 00:04:10.596
Nós não podemos ensinar 
tudo para você aqui,

00:04:10.596 --> 00:04:13.929
mas a internet tem centenas 
de respostas pra você.

00:04:13.929 --> 00:04:16.121
Legendado por Francis Pires