[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.46,0:00:05.74,Default,,0000,0000,0000,,Agora quero mostrá-los mais uma coisa\Nque você pode fazer o objeto evento
Dialogue: 0,0:00:05.74,0:00:09.94,Default,,0000,0000,0000,,Esta página que eu fiz responde\Na eterna questão
Dialogue: 0,0:00:09.94,0:00:12.15,Default,,0000,0000,0000,,"O que Noes disse?"
Dialogue: 0,0:00:12.15,0:00:16.60,Default,,0000,0000,0000,,Ou, mais específico, como ele soaria\Nse você pudesse ouvi-lo
Dialogue: 0,0:00:16.60,0:00:20.59,Default,,0000,0000,0000,,Se você clicar no link,\Nvocê será levado a um arquivo mp3
Dialogue: 0,0:00:20.59,0:00:25.16,Default,,0000,0000,0000,,que deve tocar no navegador e\Nresponder esta questão para você.
Dialogue: 0,0:00:25.16,0:00:30.01,Default,,0000,0000,0000,,No entanto, eu não quero que o usuário\Nprecise deixar a página.
Dialogue: 0,0:00:30.01,0:00:33.44,Default,,0000,0000,0000,,Você deve ouvir diretamente na página.
Dialogue: 0,0:00:33.44,0:00:37.89,Default,,0000,0000,0000,,Podemos fazer isso com JavaScript\Ntocando uma tag 
Dialogue: 0,0:00:37.89,0:00:40.96,Default,,0000,0000,0000,,assim que o usuário clicar no link.
Dialogue: 0,0:00:40.96,0:00:45.11,Default,,0000,0000,0000,,Primeiro, vamos guardar o link\Nem uma variável.
Dialogue: 0,0:00:45.11,0:00:48.08,Default,,0000,0000,0000,,(escrevendo)
Dialogue: 0,0:00:55.77,0:00:58.10,Default,,0000,0000,0000,,Agora vamos definir uma função de retorno.
Dialogue: 0,0:00:58.10,0:01:03.74,Default,,0000,0000,0000,,Esta será uma interessante.
Dialogue: 0,0:01:03.74,0:01:10.16,Default,,0000,0000,0000,,Então, na função de retorno, nós queremos\Ncriar uma tag audio dinamicamente
Dialogue: 0,0:01:10.16,0:01:12.03,Default,,0000,0000,0000,,(escrevendo)
Dialogue: 0,0:01:15.82,0:01:19.82,Default,,0000,0000,0000,,E esta é uma ótima nova tag \Ndisponível no navegadores modernos.
Dialogue: 0,0:01:19.82,0:01:26.10,Default,,0000,0000,0000,,E então audio.src igual--\Ne vamos configurá-lo igual a
Dialogue: 0,0:01:26.10,0:01:32.56,Default,,0000,0000,0000,,este 'href' aqui--\Na tag audio é bem parecida com a tag image
Dialogue: 0,0:01:32.56,0:01:37.34,Default,,0000,0000,0000,,E então vamos também dize\N'audioEl.autoplay = true',
Dialogue: 0,0:01:37.34,0:01:40.33,Default,,0000,0000,0000,,isto fará ele tocar assim que\Nnós adicionarmos à página.
Dialogue: 0,0:01:40.33,0:01:42.95,Default,,0000,0000,0000,,E finalmente, nós adicionamos à página.
Dialogue: 0,0:01:42.95,0:01:45.57,Default,,0000,0000,0000,,E, de fato, não importa onde eu coloco ele
Dialogue: 0,0:01:45.57,0:01:48.06,Default,,0000,0000,0000,,uma vez que não estamos mesmo vendo ele.
Dialogue: 0,0:01:48.06,0:01:52.30,Default,,0000,0000,0000,,Agora, quando eles clicam, deve ser criado\Numa áudio, configurar a fonte,
Dialogue: 0,0:01:52.30,0:01:55.39,Default,,0000,0000,0000,,configurar para autoplay, e\Nadicioná-lo à página.
Dialogue: 0,0:01:55.39,0:01:59.44,Default,,0000,0000,0000,,Finalmente, nós certificamo-nos\Nque o ouvinte do evento é chamado
Dialogue: 0,0:01:59.44,0:02:01.38,Default,,0000,0000,0000,,quando o link é clicado.
Dialogue: 0,0:02:01.38,0:02:03.72,Default,,0000,0000,0000,,(escrevendo)
Dialogue: 0,0:02:08.28,0:02:12.95,Default,,0000,0000,0000,,...e então nós passamos no nome\Nda função.
Dialogue: 0,0:02:12.95,0:02:17.38,Default,,0000,0000,0000,,Ok, você sabe o que fazer:\NPausa na conversa e tente.
Dialogue: 0,0:02:17.38,0:02:19.73,Default,,0000,0000,0000,,hmmmm
Dialogue: 0,0:02:19.73,0:02:21.11,Default,,0000,0000,0000,,O que aconteceu?
Dialogue: 0,0:02:21.11,0:02:26.34,Default,,0000,0000,0000,,Para mim, o som toca--\Nbem baixo, um resmungo de Oh Noes--
Dialogue: 0,0:02:26.34,0:02:29.79,Default,,0000,0000,0000,,mas o link ainda abre num nova janela.
Dialogue: 0,0:02:29.79,0:02:33.48,Default,,0000,0000,0000,,Idealmente, uma vez tocado o som\No navegador não vai mais
Dialogue: 0,0:02:33.48,0:02:37.55,Default,,0000,0000,0000,,tentar abrir o link porque ele já ouviu
Dialogue: 0,0:02:37.55,0:02:42.92,Default,,0000,0000,0000,,A forma de fazer isso é dizer ao navegador\Npara cancelar o comportamento padrão.
Dialogue: 0,0:02:42.92,0:02:47.15,Default,,0000,0000,0000,,Você vê, por padrão, quando um link é clicaodo
Dialogue: 0,0:02:47.15,0:02:50.32,Default,,0000,0000,0000,,o navegador leva o usuário até este link.
Dialogue: 0,0:02:50.32,0:02:54.23,Default,,0000,0000,0000,,Mas se nós sobrescrevermos a forma\Ncomo o link funciona, no JavaScript,
Dialogue: 0,0:02:54.23,0:02:58.00,Default,,0000,0000,0000,,As vezes não queremos que o navegador\Nnavegue para o link.
Dialogue: 0,0:02:58.00,0:03:02.73,Default,,0000,0000,0000,,Nós podemos dizer para ele parar usando\Num método na propriedade 'event'
Dialogue: 0,0:03:02.73,0:03:05.30,Default,,0000,0000,0000,,chamado 'preventDefault()'.
Dialogue: 0,0:03:05.30,0:03:09.90,Default,,0000,0000,0000,,Então precisamos referenciar o objeto\Nque nós passamos
Dialogue: 0,0:03:09.90,0:03:15.83,Default,,0000,0000,0000,,e então, aqui dentro, nós dizemos:\N'e.preventDefault();'
Dialogue: 0,0:03:15.83,0:03:19.42,Default,,0000,0000,0000,,Isto deve dizer ao navegador\Npara evitar o comportamento padrão
Dialogue: 0,0:03:19.42,0:03:21.40,Default,,0000,0000,0000,,associado com este evento.
Dialogue: 0,0:03:21.40,0:03:25.100,Default,,0000,0000,0000,,Agora vamos parar um pouco e \Ntentar novamente
Dialogue: 0,0:03:25.100,0:03:28.38,Default,,0000,0000,0000,,Você só ouviu o som, certo?
Dialogue: 0,0:03:28.38,0:03:30.95,Default,,0000,0000,0000,,Esta é uma experiência de usuário\Nbem melhor.
Dialogue: 0,0:03:30.95,0:03:34.96,Default,,0000,0000,0000,,E isto é o que é conhecido como\N"melhoria progressiva"--
Dialogue: 0,0:03:34.96,0:03:39.51,Default,,0000,0000,0000,,iniciando uma página web como HTML com\No comportamento padrão do navegador
Dialogue: 0,0:03:39.51,0:03:44.65,Default,,0000,0000,0000,,então melhorando com JavaScript para\Nobter uma experiência melhor.
Dialogue: 0,0:03:44.65,0:03:48.36,Default,,0000,0000,0000,,Você vai querer usar este 'prevendDefault'\Nquando você estiver
Dialogue: 0,0:03:48.36,0:03:50.44,Default,,0000,0000,0000,,anexando ouvidores de clicks nos links.
Dialogue: 0,0:03:50.44,0:03:54.45,Default,,0000,0000,0000,,E você pode também se deparar usando\Nno processamento de formulários,
Dialogue: 0,0:03:54.45,0:03:57.48,Default,,0000,0000,0000,,uma vez que o navegador tem alguns\Ncomportamentos padrões lá,
Dialogue: 0,0:03:57.48,0:03:59.26,Default,,0000,0000,0000,,enviando para o servidor.
Dialogue: 0,0:03:59.26,0:04:02.64,Default,,0000,0000,0000,,É importante manter a experiência \Ndo usuário em mente,
Dialogue: 0,0:04:02.64,0:04:05.66,Default,,0000,0000,0000,,e se ela não for ótima na sua página,
Dialogue: 0,0:04:05.66,0:04:08.46,Default,,0000,0000,0000,,entenda como deixá-la melhor.
Dialogue: 0,0:04:08.46,0:04:10.60,Default,,0000,0000,0000,,Nós não podemos ensinar \Ntudo para você aqui,
Dialogue: 0,0:04:10.60,0:04:13.93,Default,,0000,0000,0000,,mas a internet tem centenas \Nde respostas pra você.
Dialogue: 0,0:04:13.93,0:04:16.12,Default,,0000,0000,0000,,Legendado por Francis Pires