WEBVTT

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

00:00:06.269 --> 00:00:10.193
Moja strona odpowiada
na odwieczne pytanie:

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

00:00:12.158 --> 00:00:13.815
A dokładniej:

00:00:13.918 --> 00:00:17.159
"Jak brzmiałby jego głos,
gdybyście mogli go słyszeć?".

00:00:17.241 --> 00:00:20.662
Kliknięcie na link odeśle was
do pliku mp3;

00:00:20.762 --> 00:00:25.611
powinien otworzyć się w przeglądarce
i odpowiedzieć na to palące pytanie.

00:00:25.698 --> 00:00:29.976
Tylko że ja nie chcę,
by użytkownik musiał opuszczać stronę.

00:00:30.601 --> 00:00:33.715
Powinniśmy słyszeć głos
bezpośrednio na stronie.

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

00:00:36.195 --> 00:00:40.031
wykonując tag "audio",
gdy użytkownik kliknie na link.

00:00:41.295 --> 00:00:45.348
Najpierw umieśćmy link w zmiennej:

00:00:45.424 --> 00:00:47.958
"var ohnoesEl ="...

00:00:48.073 --> 00:00:54.102
"document.getElementById("ohnoes").

00:00:56.099 --> 00:01:00.882
A teraz zdefiniujmy wywołanie zwrotne.
Będzie ciekawe!

00:01:04.048 --> 00:01:06.571
To wywołanie zwrotne

00:01:06.681 --> 00:01:10.449
ma dynamicznie tworzyć tag audio:

00:01:10.498 --> 00:01:15.813
var audioEl =
document.createElement("audio")...

00:01:15.913 --> 00:01:20.139
to jest nowy tag dostępny
w nowoczesnych przeglądarkach.

00:01:20.204 --> 00:01:23.545
Piszemy: "audio.src ="

00:01:23.645 --> 00:01:27.657
i damy tu "href" stąd.

00:01:28.677 --> 00:01:32.090
Tag audio przypomina tagi obrazu.

00:01:33.112 --> 00:01:36.969
Dopiszemy także
"audioEl.autoplay = true",

00:01:37.069 --> 00:01:40.258
więc gdy tylko dodamy tag,
zacznie się odtwarzanie.

00:01:40.358 --> 00:01:42.793
I w końcu dodajemy to do strony.

00:01:44.187 --> 00:01:48.181
Nie ma znaczenia, w którym miejscu,
bo nie będzie wizualizacji.

00:01:48.228 --> 00:01:52.319
Gdy użytkownik kliknie, program ma
stworzyć audio, określić źródło,

00:01:52.401 --> 00:01:55.626
wykonać autoodtwarzanie
i dodać to do strony.

00:01:55.758 --> 00:01:58.736
Na koniec upewnijmy się,
że przy kliknięciu na link

00:01:58.836 --> 00:02:01.393
zostaje przywołany detektor zdarzeń:

00:02:01.483 --> 00:02:07.454
ohnoesEl.addEventlistener("click")...

00:02:08.429 --> 00:02:11.842
i wpiszemy nazwę funkcji.

00:02:12.887 --> 00:02:15.269
No dobrze. Wiecie, co teraz:

00:02:15.369 --> 00:02:18.857
przerwijcie odtwarzanie
i wypróbujcie program.

00:02:19.668 --> 00:02:20.863
Co się wydarzyło?

00:02:20.963 --> 00:02:23.197
U mnie odtworzył się dźwięk

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

00:02:26.622 --> 00:02:29.884
ale link wciąż otwiera się
w nowym oknie.

00:02:29.984 --> 00:02:31.953
Idealnie, po odtworzeniu dźwięku

00:02:32.053 --> 00:02:35.364
przeglądarka nie powinna
kierować użytkownika do linku,

00:02:35.457 --> 00:02:37.530
bo dźwięk został odsłuchany.

00:02:37.629 --> 00:02:40.449
W tym celu musimy
zawiadomić przeglądarkę,

00:02:40.557 --> 00:02:43.166
żeby anulowała zachowanie domyślne.

00:02:43.266 --> 00:02:47.253
Bo domyślnie,
gdy użytkownik kliknie na link,

00:02:47.385 --> 00:02:50.457
przeglądarka do niego kieruje.

00:02:50.544 --> 00:02:54.149
Jeśli jednak zmieniliśmy
działanie linku poprzez JavaScript...

00:02:54.242 --> 00:02:58.127
często nie chcemy,
by przeglądarka kierowała do linku.

00:02:58.227 --> 00:03:00.511
Każemy jej przestać.

00:03:00.613 --> 00:03:05.248
Potraktujemy własność "event" w sposób,
który nazywa się "preventDefault()".

00:03:05.318 --> 00:03:07.686
Musimy zrobić odniesienie

00:03:07.720 --> 00:03:10.155
do obiektu zdarzenia,
który wprowadzamy.

00:03:10.206 --> 00:03:11.652
Wewnątrz piszemy:

00:03:11.702 --> 00:03:14.531
"e.preventDefault()".

00:03:15.804 --> 00:03:17.657
To ma poinformować przeglądarkę,

00:03:17.757 --> 00:03:21.545
by nie wykonywała domyślnych kroków
kojarzonych z tym zdarzeniem.

00:03:21.621 --> 00:03:24.358
Przerwijcie odtwarzanie
i wypróbujcie program.

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

00:03:28.534 --> 00:03:31.455
To przyjemniejsze
doświadczenie dla użytkownika.

00:03:31.555 --> 00:03:34.658
Tak zwane "progresywne wzbogacanie".

00:03:35.256 --> 00:03:37.385
Strona zaczyna działać w HTML,

00:03:37.425 --> 00:03:39.932
z domyślnym zachowaniem przeglądarki,

00:03:40.032 --> 00:03:44.036
ale potem wzbogacamy ją
za pomocą JavaScript.

00:03:45.023 --> 00:03:47.813
Często będziecie chcieli
używać "preventDefault",

00:03:47.913 --> 00:03:50.451
łącząc detektor
zdarzeń klikania z linkami.

00:03:50.477 --> 00:03:54.753
Używajcie tego
podczas przetwarzania formularzy,

00:03:54.815 --> 00:03:57.679
bo przeglądarka też
może zachowywać się domyślnie,

00:03:57.779 --> 00:03:59.838
przekazując informacje do serwera.

00:03:59.938 --> 00:04:02.834
Ważne, żeby pamiętać
o wygodzie użytkownika.

00:04:03.368 --> 00:04:07.105
Jeśli wasza strona
nie jest pod tym względem optymalna,

00:04:07.169 --> 00:04:09.010
wymyślajcie, jak to zmienić.

00:04:09.071 --> 00:04:11.621
Nie zdołamy tu
nauczyć was wszystkiego,

00:04:11.721 --> 00:04:14.653
ale w Internecie
czeka tysiące odpowiedzi!