1
00:00:00,461 --> 00:00:05,742
Agora quero mostrá-los mais uma coisa
que você pode fazer o objeto evento

2
00:00:05,742 --> 00:00:09,936
Esta página que eu fiz responde
a eterna questão

3
00:00:09,936 --> 00:00:12,150
"O que Noes disse?"

4
00:00:12,150 --> 00:00:16,599
Ou, mais específico, como ele soaria
se você pudesse ouvi-lo

5
00:00:16,599 --> 00:00:20,589
Se você clicar no link,
você será levado a um arquivo mp3

6
00:00:20,589 --> 00:00:25,163
que deve tocar no navegador e
responder esta questão para você.

7
00:00:25,163 --> 00:00:30,009
No entanto, eu não quero que o usuário
precise deixar a página.

8
00:00:30,009 --> 00:00:33,445
Você deve ouvir diretamente na página.

9
00:00:33,445 --> 00:00:37,891
Podemos fazer isso com JavaScript
tocando uma tag 

10
00:00:37,891 --> 00:00:40,957
assim que o usuário clicar no link.

11
00:00:40,957 --> 00:00:45,109
Primeiro, vamos guardar o link
em uma variável.

12
00:00:45,109 --> 00:00:48,078
(escrevendo)

13
00:00:55,770 --> 00:00:58,099
Agora vamos definir uma função de retorno.

14
00:00:58,099 --> 00:01:03,735
Esta será uma interessante.

15
00:01:03,735 --> 00:01:10,165
Então, na função de retorno, nós queremos
criar uma tag audio dinamicamente

16
00:01:10,165 --> 00:01:12,033
(escrevendo)

17
00:01:15,816 --> 00:01:19,825
E esta é uma ótima nova tag 
disponível no navegadores modernos.

18
00:01:19,825 --> 00:01:26,104
E então audio.src igual--
e vamos configurá-lo igual a

19
00:01:26,104 --> 00:01:32,563
este 'href' aqui--
a tag audio é bem parecida com a tag image

20
00:01:32,563 --> 00:01:37,335
E então vamos também dize
'audioEl.autoplay = true',

21
00:01:37,335 --> 00:01:40,333
isto fará ele tocar assim que
nós adicionarmos à página.

22
00:01:40,333 --> 00:01:42,953
E finalmente, nós adicionamos à página.

23
00:01:42,953 --> 00:01:45,574
E, de fato, não importa onde eu coloco ele

24
00:01:45,574 --> 00:01:48,064
uma vez que não estamos mesmo vendo ele.

25
00:01:48,064 --> 00:01:52,295
Agora, quando eles clicam, deve ser criado
uma áudio, configurar a fonte,

26
00:01:52,295 --> 00:01:55,387
configurar para autoplay, e
adicioná-lo à página.

27
00:01:55,387 --> 00:01:59,444
Finalmente, nós certificamo-nos
que o ouvinte do evento é chamado

28
00:01:59,444 --> 00:02:01,376
quando o link é clicado.

29
00:02:01,376 --> 00:02:03,723
(escrevendo)

30
00:02:08,283 --> 00:02:12,951
...e então nós passamos no nome
da função.

31
00:02:12,951 --> 00:02:17,385
Ok, você sabe o que fazer:
Pausa na conversa e tente.

32
00:02:17,385 --> 00:02:19,729
hmmmm

33
00:02:19,729 --> 00:02:21,110
O que aconteceu?

34
00:02:21,110 --> 00:02:26,337
Para mim, o som toca--
bem baixo, um resmungo de Oh Noes--

35
00:02:26,337 --> 00:02:29,789
mas o link ainda abre num nova janela.

36
00:02:29,789 --> 00:02:33,476
Idealmente, uma vez tocado o som
o navegador não vai mais

37
00:02:33,476 --> 00:02:37,548
tentar abrir o link porque ele já ouviu

38
00:02:37,548 --> 00:02:42,920
A forma de fazer isso é dizer ao navegador
para cancelar o comportamento padrão.

39
00:02:42,920 --> 00:02:47,148
Você vê, por padrão, quando um link é clicaodo

40
00:02:47,148 --> 00:02:50,321
o navegador leva o usuário até este link.

41
00:02:50,321 --> 00:02:54,226
Mas se nós sobrescrevermos a forma
como o link funciona, no JavaScript,

42
00:02:54,226 --> 00:02:58,004
As vezes não queremos que o navegador
navegue para o link.

43
00:02:58,004 --> 00:03:02,731
Nós podemos dizer para ele parar usando
um método na propriedade 'event'

44
00:03:02,731 --> 00:03:05,299
chamado 'preventDefault()'.

45
00:03:05,299 --> 00:03:09,897
Então precisamos referenciar o objeto
que nós passamos

46
00:03:09,897 --> 00:03:15,830
e então, aqui dentro, nós dizemos:
'e.preventDefault();'

47
00:03:15,830 --> 00:03:19,420
Isto deve dizer ao navegador
para evitar o comportamento padrão

48
00:03:19,420 --> 00:03:21,399
associado com este evento.

49
00:03:21,399 --> 00:03:25,995
Agora vamos parar um pouco e 
tentar novamente

50
00:03:25,995 --> 00:03:28,385
Você só ouviu o som, certo?

51
00:03:28,385 --> 00:03:30,949
Esta é uma experiência de usuário
bem melhor.

52
00:03:30,949 --> 00:03:34,959
E isto é o que é conhecido como
"melhoria progressiva"--

53
00:03:34,959 --> 00:03:39,514
iniciando uma página web como HTML com
o comportamento padrão do navegador

54
00:03:39,514 --> 00:03:44,650
então melhorando com JavaScript para
obter uma experiência melhor.

55
00:03:44,650 --> 00:03:48,361
Você vai querer usar este 'prevendDefault'
quando você estiver

56
00:03:48,361 --> 00:03:50,445
anexando ouvidores de clicks nos links.

57
00:03:50,445 --> 00:03:54,447
E você pode também se deparar usando
no processamento de formulários,

58
00:03:54,447 --> 00:03:57,485
uma vez que o navegador tem alguns
comportamentos padrões lá,

59
00:03:57,485 --> 00:03:59,264
enviando para o servidor.

60
00:03:59,264 --> 00:04:02,640
É importante manter a experiência 
do usuário em mente,

61
00:04:02,640 --> 00:04:05,660
e se ela não for ótima na sua página,

62
00:04:05,660 --> 00:04:08,463
entenda como deixá-la melhor.

63
00:04:08,463 --> 00:04:10,596
Nós não podemos ensinar 
tudo para você aqui,

64
00:04:10,596 --> 00:04:13,929
mas a internet tem centenas 
de respostas pra você.

65
00:04:13,929 --> 00:04:16,121
Legendado por Francis Pires