1
00:00:00,640 --> 00:00:05,503
Zrobiłam tę "nudną stronę"
do zabawy.

2
00:00:05,603 --> 00:00:08,312
Na razie rzeczywiście jest nudna!

3
00:00:08,460 --> 00:00:10,611
Nie zawiera żadnej treści,

4
00:00:10,747 --> 00:00:15,905
a ten przycisk
nie reaguje na kliknięcie.

5
00:00:16,075 --> 00:00:18,692
Sprawmy, żeby był interaktywny.

6
00:00:18,773 --> 00:00:20,236
Gdy użytkownik klika,

7
00:00:20,282 --> 00:00:24,055
tekst na przycisku
powinien się zmienić.

8
00:00:24,169 --> 00:00:29,977
Pierwszy krok - to znaleźć element,
który ma prowadzić nasłuch zdarzeń.

9
00:00:30,092 --> 00:00:32,506
W tym przypadku - to przycisk.

10
00:00:32,630 --> 00:00:35,294
Rozpoznaje kliknięcie.

11
00:00:35,443 --> 00:00:39,543
Stworzymy zmienną "clickerButton"

12
00:00:39,627 --> 00:00:44,884
i użyjemy polecenia
"document.getElementById",

13
00:00:45,473 --> 00:00:49,162
żeby pozyskało element
i przechowywało go w tej zmiennej.

14
00:00:49,300 --> 00:00:53,196
Następny krok
- to zdefiniować funkcję,

15
00:00:53,301 --> 00:00:57,783
która będzie przywołana
zaraz po zdarzeniu "kliknięcie".

16
00:00:57,875 --> 00:01:01,695
Nazwę ją "onButtonClick"
(kliknięcie w przycisk)...

17
00:01:02,722 --> 00:01:06,678
i... umieszczę tu
tylko pustą funkcję...

18
00:01:06,815 --> 00:01:12,005
no i muszę zawrzeć coś wewnątrz.
Bo funkcja nie zrobi nic ciekawego.

19
00:01:12,143 --> 00:01:16,602
Żeby zmienić tekst na przycisku,
możemy użyć zmiennej "clickerButton"

20
00:01:16,739 --> 00:01:19,598
i ustalić "textContent"
(zawartość tekstową).

21
00:01:19,689 --> 00:01:23,142
"No, no! Kliknęliście na mnie!".

22
00:01:23,279 --> 00:01:25,658
Przycisk się ucieszył!

23
00:01:26,889 --> 00:01:32,810
Kodu jest mało, ale później zrobimy coś
skomplikowanego. Gdy to zacznie działać.

24
00:01:32,910 --> 00:01:37,547
Kody, które do tej pory pisaliśmy,
tylko definiowały zmienne.

25
00:01:37,616 --> 00:01:41,865
Nadal więc nie ma reakcji
na kliknięcie na przycisk.

26
00:01:42,007 --> 00:01:44,888
Ostateczny krok,
który to wszystko połączy,

27
00:01:45,048 --> 00:01:46,788
to powiedzieć przeglądarce,

28
00:01:46,855 --> 00:01:50,132
że ma przywołać
zdefiniowaną przez nas funkcję,

29
00:01:50,262 --> 00:01:54,590
kiedy tylko nastąpi
kliknięcie na przycisk.

30
00:01:54,721 --> 00:01:58,909
Zrobimy to, przywołując "add event
listener" (dodaj detektor zdarzeń)

31
00:01:59,065 --> 00:02:00,581
na elemencie "przycisk".

32
00:02:00,757 --> 00:02:05,945
Piszemy:
"clickerButton.addeventlistener".

33
00:02:06,084 --> 00:02:10,681
Musimy wprowadzić dwa argumenty.

34
00:02:10,750 --> 00:02:14,582
Pierwszy to nazwa zdarzenia:
"kliknięcie",

35
00:02:14,706 --> 00:02:18,135
a drugi - to funkcja,
którą chcemy przywołać,

36
00:02:18,227 --> 00:02:21,664
gdy dochodzi do kliknięcia:
"onButtonClick".

37
00:02:22,961 --> 00:02:26,610
Teraz zatrzymajcie film
i kliknijcie na przycisk.

38
00:02:28,909 --> 00:02:32,021
Udało się? Mam nadzieję!
U mnie - tak.

39
00:02:32,926 --> 00:02:38,151
Pomówmy więcej o działaniu tej funkcji,
bo sprawa jest dość skomplikowana.

40
00:02:38,281 --> 00:02:42,307
Nazywamy tę funkcję "eventListener"
(detektorem zdarzeń),

41
00:02:42,420 --> 00:02:46,881
lub "callback" (wywołaniem zwrotnym),
bo w ten sposób jej używamy.

42
00:02:47,016 --> 00:02:50,852
Życzymy sobie, by była
przywoływana tylko po zdarzeniu.

43
00:02:50,904 --> 00:02:55,658
Na ogół nie chcemy, by była
przywoływana podczas ładowania strony.

44
00:02:55,797 --> 00:02:58,236
A gdybyśmy tego chcieli,

45
00:02:58,336 --> 00:03:01,928
musielibyśmy dodać
taki wiersz na dole.

46
00:03:03,739 --> 00:03:06,148
Zwróćcie uwagę na nawiasy.

47
00:03:06,255 --> 00:03:09,585
Pamiętajcie: za pomocą nawiasów
przywołujemy funkcję.

48
00:03:09,685 --> 00:03:11,541
Jeśli je zostawimy tak, jak są,

49
00:03:11,641 --> 00:03:15,512
nie przywołamy funkcji,
tylko odniesiemy się do niej.

50
00:03:15,599 --> 00:03:18,995
To właśnie robimy,
gdy wprowadzamy to jako argument.

51
00:03:19,075 --> 00:03:21,042
Po prostu mówimy przeglądarce:

52
00:03:21,142 --> 00:03:25,501
"Tu jest funkcja, którą masz
przywołać później, ale nie teraz".

53
00:03:27,353 --> 00:03:32,439
Pamiętajcie, żeby nie dawać nawiasów
po nazwie funkcji tutaj,

54
00:03:32,485 --> 00:03:37,849
bo wtedy będziecie tylko wprowadzać
wartość zwrotną funkcji, nie funkcję.

55
00:03:37,940 --> 00:03:42,075
Gdybym przypadkiem to zrobiła,
tekst na przycisku zmieniłby się

56
00:03:42,170 --> 00:03:44,762
podczas ładowania,
ale później już nie.

57
00:03:44,862 --> 00:03:48,778
Żeby to naprawić, usuwam nawiasy,
które przypadkowo dodałam,

58
00:03:48,878 --> 00:03:52,734
i teraz moja funkcja
zostaje przywołana tylko kliknięciem.

59
00:03:53,855 --> 00:03:56,425
Inny sposób,
w który możemy to osiągnąć,

60
00:03:56,525 --> 00:04:02,509
to wprowadzić do metody
funkcję anonimową.

61
00:04:02,602 --> 00:04:06,015
Taka funkcja nie ma nazwy.

62
00:04:06,089 --> 00:04:10,264
Piszemy po prostu "inline".

63
00:04:10,387 --> 00:04:15,001
Skopiuję i wkleję wiersz
"addEventListener"

64
00:04:15,098 --> 00:04:20,202
i pokażę wam tę opcję obok,
żebyście zobaczyli, o co mi chodzi.

65
00:04:20,380 --> 00:04:22,537
Skasuję nazwę funkcji tutaj

66
00:04:22,637 --> 00:04:26,165
i zastąpię ją funkcją z definicją.

67
00:04:26,265 --> 00:04:29,885
Wklejam to tutaj.

68
00:04:31,185 --> 00:04:34,329
Dobrze. Te dwie linie kodu

69
00:04:34,429 --> 00:04:37,779
robią dokładnie to samo.

70
00:04:37,879 --> 00:04:39,707
No, prawie.

71
00:04:39,817 --> 00:04:44,235
Obie wprowadzają funkcję
z tym samym kodem wewnątrz.

72
00:04:44,344 --> 00:04:48,275
Różnica polega na tym, że pierwsza
wprowadza nazwaną funkcję,

73
00:04:48,323 --> 00:04:50,152
którą określiliśmy powyżej,

74
00:04:50,244 --> 00:04:54,823
a druga definiuje
funkcję anonimową "inline",

75
00:04:54,977 --> 00:04:58,237
jednocześnie z uruchomieniem jej.

76
00:04:58,361 --> 00:04:59,939
Obie metody się sprawdzają.

77
00:05:00,008 --> 00:05:02,764
Wielu projektantów stron
woli funkcje nazwane,

78
00:05:02,866 --> 00:05:06,874
bo kod jest czytelniejszy
i nieco łatwiejszy do debugowania.

79
00:05:07,005 --> 00:05:09,863
Możecie przywołać nazwane funkcje sami

80
00:05:09,963 --> 00:05:13,353
- kiedy indziej lub w związku
z innymi zdarzeniami.

81
00:05:13,453 --> 00:05:17,569
Od was zależy, czego użyjecie.
Nie stosujcie obu metod naraz,

82
00:05:17,669 --> 00:05:21,712
bo przeglądarka przywoła
obie funkcje, gdy nastąpi kliknięcie.

83
00:05:21,799 --> 00:05:25,892
A nie ma sensu
przywoływać tej funkcji dwa razy.

84
00:05:25,992 --> 00:05:29,096
Skasuję wersję z funkcją anonimową,

85
00:05:29,231 --> 00:05:30,907
bo wolę pierwszy sposób.

86
00:05:32,112 --> 00:05:35,305
Możecie dużo zrobić,
umiejąc dodawać detektory zdarzeń.

87
00:05:35,405 --> 00:05:37,873
Dodacie je w innych częściach strony,

88
00:05:38,012 --> 00:05:41,635
będziecie nasłuchiwać zdarzeń...
O tym - następnym razem.

89
00:05:41,693 --> 00:05:45,814
I możecie modyfikować DOM
na wszystkie sposoby, które już znacie.

90
00:05:45,924 --> 00:05:49,715
Nie ograniczajcie się do elementu,
z którym zaszła interakcja.

91
00:05:49,811 --> 00:05:52,502
Możecie modyfikować
wszystko na stronie.

92
00:05:52,646 --> 00:05:55,845
Wypróbujcie to.
Przekonajcie się, co można zrobić.