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