-
Agora quero mostrá-los mais uma coisa
que você pode fazer o objeto evento
-
Esta página que eu fiz responde
a eterna questão
-
"O que Noes disse?"
-
Ou, mais específico, como ele soaria
se você pudesse ouvi-lo
-
Se você clicar no link,
você será levado a um arquivo mp3
-
que deve tocar no navegador e
responder esta questão para você.
-
No entanto, eu não quero que o usuário
precise deixar a página.
-
Você deve ouvir diretamente na página.
-
Podemos fazer isso com JavaScript
tocando uma tag
-
assim que o usuário clicar no link.
-
Primeiro, vamos guardar o link
em uma variável.
-
(escrevendo)
-
Agora vamos definir uma função de retorno.
-
Esta será uma interessante.
-
Então, na função de retorno, nós queremos
criar uma tag audio dinamicamente
-
(escrevendo)
-
E esta é uma ótima nova tag
disponível no navegadores modernos.
-
E então audio.src igual--
e vamos configurá-lo igual a
-
este 'href' aqui--
a tag audio é bem parecida com a tag image
-
E então vamos também dize
'audioEl.autoplay = true',
-
isto fará ele tocar assim que
nós adicionarmos à página.
-
E finalmente, nós adicionamos à página.
-
E, de fato, não importa onde eu coloco ele
-
uma vez que não estamos mesmo vendo ele.
-
Agora, quando eles clicam, deve ser criado
uma áudio, configurar a fonte,
-
configurar para autoplay, e
adicioná-lo à página.
-
Finalmente, nós certificamo-nos
que o ouvinte do evento é chamado
-
quando o link é clicado.
-
(escrevendo)
-
...e então nós passamos no nome
da função.
-
Ok, você sabe o que fazer:
Pausa na conversa e tente.
-
hmmmm
-
O que aconteceu?
-
Para mim, o som toca--
bem baixo, um resmungo de Oh Noes--
-
mas o link ainda abre num nova janela.
-
Idealmente, uma vez tocado o som
o navegador não vai mais
-
tentar abrir o link porque ele já ouviu
-
A forma de fazer isso é dizer ao navegador
para cancelar o comportamento padrão.
-
Você vê, por padrão, quando um link é clicaodo
-
o navegador leva o usuário até este link.
-
Mas se nós sobrescrevermos a forma
como o link funciona, no JavaScript,
-
As vezes não queremos que o navegador
navegue para o link.
-
Nós podemos dizer para ele parar usando
um método na propriedade 'event'
-
chamado 'preventDefault()'.
-
Então precisamos referenciar o objeto
que nós passamos
-
e então, aqui dentro, nós dizemos:
'e.preventDefault();'
-
Isto deve dizer ao navegador
para evitar o comportamento padrão
-
associado com este evento.
-
Agora vamos parar um pouco e
tentar novamente
-
Você só ouviu o som, certo?
-
Esta é uma experiência de usuário
bem melhor.
-
E isto é o que é conhecido como
"melhoria progressiva"--
-
iniciando uma página web como HTML com
o comportamento padrão do navegador
-
então melhorando com JavaScript para
obter uma experiência melhor.
-
Você vai querer usar este 'prevendDefault'
quando você estiver
-
anexando ouvidores de clicks nos links.
-
E você pode também se deparar usando
no processamento de formulários,
-
uma vez que o navegador tem alguns
comportamentos padrões lá,
-
enviando para o servidor.
-
É importante manter a experiência
do usuário em mente,
-
e se ela não for ótima na sua página,
-
entenda como deixá-la melhor.
-
Nós não podemos ensinar
tudo para você aqui,
-
mas a internet tem centenas
de respostas pra você.
-
Legendado por Francis Pires
