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

2
00:00:06,269 --> 00:00:10,193
Moja strona odpowiada
na odwieczne pytanie:

3
00:00:10,266 --> 00:00:12,075
"Co mówi Koleżka-O-Nie?".

4
00:00:12,158 --> 00:00:13,815
A dokładniej:

5
00:00:13,918 --> 00:00:17,159
"Jak brzmiałby jego głos,
gdybyście mogli go słyszeć?".

6
00:00:17,241 --> 00:00:20,662
Kliknięcie na link odeśle was
do pliku mp3;

7
00:00:20,762 --> 00:00:25,611
powinien otworzyć się w przeglądarce
i odpowiedzieć na to palące pytanie.

8
00:00:25,698 --> 00:00:29,976
Tylko że ja nie chcę,
by użytkownik musiał opuszczać stronę.

9
00:00:30,601 --> 00:00:33,715
Powinniśmy słyszeć głos
bezpośrednio na stronie.

10
00:00:33,792 --> 00:00:36,130
Możemy to zrobić za pomocą JavaScript,

11
00:00:36,195 --> 00:00:40,031
wykonując tag "audio",
gdy użytkownik kliknie na link.

12
00:00:41,295 --> 00:00:45,348
Najpierw umieśćmy link w zmiennej:

13
00:00:45,424 --> 00:00:47,958
"var ohnoesEl ="...

14
00:00:48,073 --> 00:00:54,102
"document.getElementById("ohnoes").

15
00:00:56,099 --> 00:01:00,882
A teraz zdefiniujmy wywołanie zwrotne.
Będzie ciekawe!

16
00:01:04,048 --> 00:01:06,571
To wywołanie zwrotne

17
00:01:06,681 --> 00:01:10,449
ma dynamicznie tworzyć tag audio:

18
00:01:10,498 --> 00:01:15,813
var audioEl =
document.createElement("audio")...

19
00:01:15,913 --> 00:01:20,139
to jest nowy tag dostępny
w nowoczesnych przeglądarkach.

20
00:01:20,204 --> 00:01:23,545
Piszemy: "audio.src ="

21
00:01:23,645 --> 00:01:27,657
i damy tu "href" stąd.

22
00:01:28,677 --> 00:01:32,090
Tag audio przypomina tagi obrazu.

23
00:01:33,112 --> 00:01:36,969
Dopiszemy także
"audioEl.autoplay = true",

24
00:01:37,069 --> 00:01:40,258
więc gdy tylko dodamy tag,
zacznie się odtwarzanie.

25
00:01:40,358 --> 00:01:42,793
I w końcu dodajemy to do strony.

26
00:01:44,187 --> 00:01:48,181
Nie ma znaczenia, w którym miejscu,
bo nie będzie wizualizacji.

27
00:01:48,228 --> 00:01:52,319
Gdy użytkownik kliknie, program ma
stworzyć audio, określić źródło,

28
00:01:52,401 --> 00:01:55,626
wykonać autoodtwarzanie
i dodać to do strony.

29
00:01:55,758 --> 00:01:58,736
Na koniec upewnijmy się,
że przy kliknięciu na link

30
00:01:58,836 --> 00:02:01,393
zostaje przywołany detektor zdarzeń:

31
00:02:01,483 --> 00:02:07,454
ohnoesEl.addEventlistener("click")...

32
00:02:08,429 --> 00:02:11,842
i wpiszemy nazwę funkcji.

33
00:02:12,887 --> 00:02:15,269
No dobrze. Wiecie, co teraz:

34
00:02:15,369 --> 00:02:18,857
przerwijcie odtwarzanie
i wypróbujcie program.

35
00:02:19,668 --> 00:02:20,863
Co się wydarzyło?

36
00:02:20,963 --> 00:02:23,197
U mnie odtworzył się dźwięk

37
00:02:23,266 --> 00:02:26,471
- głębokie, niskie pomruki Koleżki...

38
00:02:26,622 --> 00:02:29,884
ale link wciąż otwiera się
w nowym oknie.

39
00:02:29,984 --> 00:02:31,953
Idealnie, po odtworzeniu dźwięku

40
00:02:32,053 --> 00:02:35,364
przeglądarka nie powinna
kierować użytkownika do linku,

41
00:02:35,457 --> 00:02:37,530
bo dźwięk został odsłuchany.

42
00:02:37,629 --> 00:02:40,449
W tym celu musimy
zawiadomić przeglądarkę,

43
00:02:40,557 --> 00:02:43,166
żeby anulowała zachowanie domyślne.

44
00:02:43,266 --> 00:02:47,253
Bo domyślnie,
gdy użytkownik kliknie na link,

45
00:02:47,385 --> 00:02:50,457
przeglądarka do niego kieruje.

46
00:02:50,544 --> 00:02:54,149
Jeśli jednak zmieniliśmy
działanie linku poprzez JavaScript...

47
00:02:54,242 --> 00:02:58,127
często nie chcemy,
by przeglądarka kierowała do linku.

48
00:02:58,227 --> 00:03:00,511
Każemy jej przestać.

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

50
00:03:05,318 --> 00:03:07,686
Musimy zrobić odniesienie

51
00:03:07,720 --> 00:03:10,155
do obiektu zdarzenia,
który wprowadzamy.

52
00:03:10,206 --> 00:03:11,652
Wewnątrz piszemy:

53
00:03:11,702 --> 00:03:14,531
"e.preventDefault()".

54
00:03:15,804 --> 00:03:17,657
To ma poinformować przeglądarkę,

55
00:03:17,757 --> 00:03:21,545
by nie wykonywała domyślnych kroków
kojarzonych z tym zdarzeniem.

56
00:03:21,621 --> 00:03:24,358
Przerwijcie odtwarzanie
i wypróbujcie program.

57
00:03:26,169 --> 00:03:28,468
Usłyszeliście dźwięk, tak?

58
00:03:28,534 --> 00:03:31,455
To przyjemniejsze
doświadczenie dla użytkownika.

59
00:03:31,555 --> 00:03:34,658
Tak zwane "progresywne wzbogacanie".

60
00:03:35,256 --> 00:03:37,385
Strona zaczyna działać w HTML,

61
00:03:37,425 --> 00:03:39,932
z domyślnym zachowaniem przeglądarki,

62
00:03:40,032 --> 00:03:44,036
ale potem wzbogacamy ją
za pomocą JavaScript.

63
00:03:45,023 --> 00:03:47,813
Często będziecie chcieli
używać "preventDefault",

64
00:03:47,913 --> 00:03:50,451
łącząc detektor
zdarzeń klikania z linkami.

65
00:03:50,477 --> 00:03:54,753
Używajcie tego
podczas przetwarzania formularzy,

66
00:03:54,815 --> 00:03:57,679
bo przeglądarka też
może zachowywać się domyślnie,

67
00:03:57,779 --> 00:03:59,838
przekazując informacje do serwera.

68
00:03:59,938 --> 00:04:02,834
Ważne, żeby pamiętać
o wygodzie użytkownika.

69
00:04:03,368 --> 00:04:07,105
Jeśli wasza strona
nie jest pod tym względem optymalna,

70
00:04:07,169 --> 00:04:09,010
wymyślajcie, jak to zmienić.

71
00:04:09,071 --> 00:04:11,621
Nie zdołamy tu
nauczyć was wszystkiego,

72
00:04:11,721 --> 00:04:14,653
ale w Internecie
czeka tysiące odpowiedzi!