0:00:00.921,0:00:06.169
Pokażę jeszcze jedną rzecz, którą można[br]zrobić z obiektem "event" (zdarzenie).

0:00:06.269,0:00:10.193
Moja strona odpowiada[br]na odwieczne pytanie:

0:00:10.266,0:00:12.075
"Co mówi Koleżka-O-Nie?".

0:00:12.158,0:00:13.815
A dokładniej:

0:00:13.918,0:00:17.159
"Jak brzmiałby jego głos,[br]gdybyście mogli go słyszeć?".

0:00:17.241,0:00:20.662
Kliknięcie na link odeśle was[br]do pliku mp3;

0:00:20.762,0:00:25.611
powinien otworzyć się w przeglądarce[br]i odpowiedzieć na to palące pytanie.

0:00:25.698,0:00:29.976
Tylko że ja nie chcę,[br]by użytkownik musiał opuszczać stronę.

0:00:30.601,0:00:33.715
Powinniśmy słyszeć głos[br]bezpośrednio na stronie.

0:00:33.792,0:00:36.130
Możemy to zrobić za pomocą JavaScript,

0:00:36.195,0:00:40.031
wykonując tag "audio",[br]gdy użytkownik kliknie na link.

0:00:41.295,0:00:45.348
Najpierw umieśćmy link w zmiennej:

0:00:45.424,0:00:47.958
"var ohnoesEl ="...

0:00:48.073,0:00:54.102
"document.getElementById("ohnoes").

0:00:56.099,0:01:00.882
A teraz zdefiniujmy wywołanie zwrotne.[br]Będzie ciekawe!

0:01:04.048,0:01:06.571
To wywołanie zwrotne

0:01:06.681,0:01:10.449
ma dynamicznie tworzyć tag audio:

0:01:10.498,0:01:15.813
var audioEl =[br]document.createElement("audio")...

0:01:15.913,0:01:20.139
to jest nowy tag dostępny[br]w nowoczesnych przeglądarkach.

0:01:20.204,0:01:23.545
Piszemy: "audio.src ="

0:01:23.645,0:01:27.657
i damy tu "href" stąd.

0:01:28.677,0:01:32.090
Tag audio przypomina tagi obrazu.

0:01:33.112,0:01:36.969
Dopiszemy także[br]"audioEl.autoplay = true",

0:01:37.069,0:01:40.258
więc gdy tylko dodamy tag,[br]zacznie się odtwarzanie.

0:01:40.358,0:01:42.793
I w końcu dodajemy to do strony.

0:01:44.187,0:01:48.181
Nie ma znaczenia, w którym miejscu,[br]bo nie będzie wizualizacji.

0:01:48.228,0:01:52.319
Gdy użytkownik kliknie, program ma[br]stworzyć audio, określić źródło,

0:01:52.401,0:01:55.626
wykonać autoodtwarzanie[br]i dodać to do strony.

0:01:55.758,0:01:58.736
Na koniec upewnijmy się,[br]że przy kliknięciu na link

0:01:58.836,0:02:01.393
zostaje przywołany detektor zdarzeń:

0:02:01.483,0:02:07.454
ohnoesEl.addEventlistener("click")...

0:02:08.429,0:02:11.842
i wpiszemy nazwę funkcji.

0:02:12.887,0:02:15.269
No dobrze. Wiecie, co teraz:

0:02:15.369,0:02:18.857
przerwijcie odtwarzanie[br]i wypróbujcie program.

0:02:19.668,0:02:20.863
Co się wydarzyło?

0:02:20.963,0:02:23.197
U mnie odtworzył się dźwięk

0:02:23.266,0:02:26.471
- głębokie, niskie pomruki Koleżki...

0:02:26.622,0:02:29.884
ale link wciąż otwiera się[br]w nowym oknie.

0:02:29.984,0:02:31.953
Idealnie, po odtworzeniu dźwięku

0:02:32.053,0:02:35.364
przeglądarka nie powinna[br]kierować użytkownika do linku,

0:02:35.457,0:02:37.530
bo dźwięk został odsłuchany.

0:02:37.629,0:02:40.449
W tym celu musimy[br]zawiadomić przeglądarkę,

0:02:40.557,0:02:43.166
żeby anulowała zachowanie domyślne.

0:02:43.266,0:02:47.253
Bo domyślnie,[br]gdy użytkownik kliknie na link,

0:02:47.385,0:02:50.457
przeglądarka do niego kieruje.

0:02:50.544,0:02:54.149
Jeśli jednak zmieniliśmy[br]działanie linku poprzez JavaScript...

0:02:54.242,0:02:58.127
często nie chcemy,[br]by przeglądarka kierowała do linku.

0:02:58.227,0:03:00.511
Każemy jej przestać.

0:03:00.613,0:03:05.248
Potraktujemy własność "event" w sposób,[br]który nazywa się "preventDefault()".

0:03:05.318,0:03:07.686
Musimy zrobić odniesienie

0:03:07.720,0:03:10.155
do obiektu zdarzenia,[br]który wprowadzamy.

0:03:10.206,0:03:11.652
Wewnątrz piszemy:

0:03:11.702,0:03:14.531
"e.preventDefault()".

0:03:15.804,0:03:17.657
To ma poinformować przeglądarkę,

0:03:17.757,0:03:21.545
by nie wykonywała domyślnych kroków[br]kojarzonych z tym zdarzeniem.

0:03:21.621,0:03:24.358
Przerwijcie odtwarzanie[br]i wypróbujcie program.

0:03:26.169,0:03:28.468
Usłyszeliście dźwięk, tak?

0:03:28.534,0:03:31.455
To przyjemniejsze[br]doświadczenie dla użytkownika.

0:03:31.555,0:03:34.658
Tak zwane "progresywne wzbogacanie".

0:03:35.256,0:03:37.385
Strona zaczyna działać w HTML,

0:03:37.425,0:03:39.932
z domyślnym zachowaniem przeglądarki,

0:03:40.032,0:03:44.036
ale potem wzbogacamy ją[br]za pomocą JavaScript.

0:03:45.023,0:03:47.813
Często będziecie chcieli[br]używać "preventDefault",

0:03:47.913,0:03:50.451
łącząc detektor[br]zdarzeń klikania z linkami.

0:03:50.477,0:03:54.753
Używajcie tego[br]podczas przetwarzania formularzy,

0:03:54.815,0:03:57.679
bo przeglądarka też[br]może zachowywać się domyślnie,

0:03:57.779,0:03:59.838
przekazując informacje do serwera.

0:03:59.938,0:04:02.834
Ważne, żeby pamiętać[br]o wygodzie użytkownika.

0:04:03.368,0:04:07.105
Jeśli wasza strona[br]nie jest pod tym względem optymalna,

0:04:07.169,0:04:09.010
wymyślajcie, jak to zmienić.

0:04:09.071,0:04:11.621
Nie zdołamy tu[br]nauczyć was wszystkiego,

0:04:11.721,0:04:14.653
ale w Internecie[br]czeka tysiące odpowiedzi!