Pokażę jeszcze jedną rzecz, którą można
zrobić z obiektem "event" (zdarzenie).

Moja strona odpowiada
na odwieczne pytanie:

"Co mówi Koleżka-O-Nie?".

A dokładniej:

"Jak brzmiałby jego głos,
gdybyście mogli go słyszeć?".

Kliknięcie na link odeśle was
do pliku mp3;

powinien otworzyć się w przeglądarce
i odpowiedzieć na to palące pytanie.

Tylko że ja nie chcę,
by użytkownik musiał opuszczać stronę.

Powinniśmy słyszeć głos
bezpośrednio na stronie.

Możemy to zrobić za pomocą JavaScript,

wykonując tag "audio",
gdy użytkownik kliknie na link.

Najpierw umieśćmy link w zmiennej:

"var ohnoesEl ="...

"document.getElementById("ohnoes").

A teraz zdefiniujmy wywołanie zwrotne.
Będzie ciekawe!

To wywołanie zwrotne

ma dynamicznie tworzyć tag audio:

var audioEl =
document.createElement("audio")...

to jest nowy tag dostępny
w nowoczesnych przeglądarkach.

Piszemy: "audio.src ="

i damy tu "href" stąd.

Tag audio przypomina tagi obrazu.

Dopiszemy także
"audioEl.autoplay = true",

więc gdy tylko dodamy tag,
zacznie się odtwarzanie.

I w końcu dodajemy to do strony.

Nie ma znaczenia, w którym miejscu,
bo nie będzie wizualizacji.

Gdy użytkownik kliknie, program ma
stworzyć audio, określić źródło,

wykonać autoodtwarzanie
i dodać to do strony.

Na koniec upewnijmy się,
że przy kliknięciu na link

zostaje przywołany detektor zdarzeń:

ohnoesEl.addEventlistener("click")...

i wpiszemy nazwę funkcji.

No dobrze. Wiecie, co teraz:

przerwijcie odtwarzanie
i wypróbujcie program.

Co się wydarzyło?

U mnie odtworzył się dźwięk

- głębokie, niskie pomruki Koleżki...

ale link wciąż otwiera się
w nowym oknie.

Idealnie, po odtworzeniu dźwięku

przeglądarka nie powinna
kierować użytkownika do linku,

bo dźwięk został odsłuchany.

W tym celu musimy
zawiadomić przeglądarkę,

żeby anulowała zachowanie domyślne.

Bo domyślnie,
gdy użytkownik kliknie na link,

przeglądarka do niego kieruje.

Jeśli jednak zmieniliśmy
działanie linku poprzez JavaScript...

często nie chcemy,
by przeglądarka kierowała do linku.

Każemy jej przestać.

Potraktujemy własność "event" w sposób,
który nazywa się "preventDefault()".

Musimy zrobić odniesienie

do obiektu zdarzenia,
który wprowadzamy.

Wewnątrz piszemy:

"e.preventDefault()".

To ma poinformować przeglądarkę,

by nie wykonywała domyślnych kroków
kojarzonych z tym zdarzeniem.

Przerwijcie odtwarzanie
i wypróbujcie program.

Usłyszeliście dźwięk, tak?

To przyjemniejsze
doświadczenie dla użytkownika.

Tak zwane "progresywne wzbogacanie".

Strona zaczyna działać w HTML,

z domyślnym zachowaniem przeglądarki,

ale potem wzbogacamy ją
za pomocą JavaScript.

Często będziecie chcieli
używać "preventDefault",

łącząc detektor
zdarzeń klikania z linkami.

Używajcie tego
podczas przetwarzania formularzy,

bo przeglądarka też
może zachowywać się domyślnie,

przekazując informacje do serwera.

Ważne, żeby pamiętać
o wygodzie użytkownika.

Jeśli wasza strona
nie jest pod tym względem optymalna,

wymyślajcie, jak to zmienić.

Nie zdołamy tu
nauczyć was wszystkiego,

ale w Internecie
czeka tysiące odpowiedzi!