1
00:00:00,766 --> 00:00:04,892
Mam tu stronę z portretem Winstona.
Robi się zimno,

2
00:00:05,034 --> 00:00:08,753
w dodatku Winston się starzeje,
więc chciałby mieć brodę.

3
00:00:08,853 --> 00:00:12,376
Mogłabym narysować ją sama,
ale będzie fajniej,

4
00:00:12,543 --> 00:00:16,346
jeśli brodę będą dorabiać
użytkownicy. Taką, jak zechcą:

5
00:00:16,525 --> 00:00:19,899
długą, a może parodniowy zarost...

6
00:00:21,014 --> 00:00:22,175
Jak to zrobić?

7
00:00:23,550 --> 00:00:29,001
Jeden sposób - to dodać nasłuch
zdarzenia do "mouseMove" na obrazie.

8
00:00:29,125 --> 00:00:31,094
Funkcja zostanie przywołana zawsze,

9
00:00:31,194 --> 00:00:34,472
gdy użytkownik przesunie myszkę
po twarzy Winstona.

10
00:00:34,614 --> 00:00:38,034
Zróbmy to,
korzystając z nowo nabytej wiedzy.

11
00:00:38,169 --> 00:00:41,241
Krok pierwszy
- to znaleźć element, obraz.

12
00:00:41,440 --> 00:00:44,442
"var face = document"...

13
00:00:44,626 --> 00:00:48,413
"getElementById("face")".

14
00:00:48,513 --> 00:00:50,433
Ładne ID!

15
00:00:50,570 --> 00:00:53,847
Krok drugi:
zdefiniować wywołanie zwrotne.

16
00:00:54,056 --> 00:00:58,374
Zaczniemy od czegoś prostego,
żeby zobaczyć, czy działa,

17
00:00:58,534 --> 00:01:01,563
a potem sprawimy,
że funkcja będzie robić więcej.

18
00:01:01,663 --> 00:01:06,441
"document.getElementById("message")"...

19
00:01:06,583 --> 00:01:11,959
".textContent + = "mooove".

20
00:01:12,059 --> 00:01:13,267
Dobrze.

21
00:01:13,410 --> 00:01:17,904
Krok ostatni - to połączyć to z tym,

22
00:01:18,046 --> 00:01:22,012
dla pewności, że funkcja zostanie
przywołana po zdarzeniu "mouseMove".

23
00:01:22,198 --> 00:01:27,802
Napiszemy więc: "face.
addEventListener("mousemove"),

24
00:01:27,944 --> 00:01:32,338
a potem dodamy nazwę funkcji,
"onMouseMove".

25
00:01:32,438 --> 00:01:34,319
Teraz zatrzymajcie film

26
00:01:34,429 --> 00:01:39,150
i spróbujcie przesunąć myszkę
po twarzy Winstona. Widzicie tekst?

27
00:01:39,250 --> 00:01:40,686
Okej.

28
00:01:40,857 --> 00:01:44,071
Miejmy nadzieję,
że widzieliście, jak to działa.

29
00:01:44,241 --> 00:01:47,313
Ale nie to ma robić
nasz detektor zdarzeń.

30
00:01:47,413 --> 00:01:50,178
Chcemy, by rysował, a nie pisał tekst.

31
00:01:50,385 --> 00:01:53,452
Jak się rysuje
na stronie internetowej?

32
00:01:53,656 --> 00:01:56,642
Możemy wpisać tag "canvas"

33
00:01:56,742 --> 00:02:00,937
i rysować na nim piksele,
jak w programach z Processing JS.

34
00:02:01,079 --> 00:02:03,383
Ale my rysujemy tylko brodę,

35
00:02:03,554 --> 00:02:06,733
czyli czarne kropki.

36
00:02:06,910 --> 00:02:10,437
Stworzymy więc "div"
dla każdej kropki

37
00:02:10,550 --> 00:02:13,909
i umieścimy je za pomocą
pozycjonowania absolutnego.

38
00:02:14,078 --> 00:02:18,298
Pokażę to na przykładzie
jednego włoska.

39
00:02:18,398 --> 00:02:21,458
Zrobię "div" z klasą "broda".

40
00:02:21,558 --> 00:02:25,654
I mam dobre CSS
do nadania stylu tej brodzie.

41
00:02:25,796 --> 00:02:28,491
Wpiszę to tutaj.

42
00:02:30,024 --> 00:02:31,812
Poprawmy to.

43
00:02:31,968 --> 00:02:36,688
Jak widać - czarne tło,
5 pikseli na 5...

44
00:02:36,860 --> 00:02:40,658
Broda powinna być okrągła.

45
00:02:40,814 --> 00:02:44,568
Używamy schematu
pozycjonowania absolutnego.

46
00:02:45,256 --> 00:02:48,391
Teraz "div" pojawia się pod obrazem.

47
00:02:48,521 --> 00:02:51,316
Jak zrobić, by pokazało się na twarzy?

48
00:02:51,565 --> 00:02:53,615
Stosujemy pozycjonowanie absolutne,

49
00:02:53,755 --> 00:02:57,098
czyli powinniśmy użyć
własności "top" i "left",

50
00:02:57,225 --> 00:03:01,765
by określić,
gdzie ma się znaleźć broda.

51
00:03:01,918 --> 00:03:04,064
Napiszmy: "top: 80px",

52
00:03:04,222 --> 00:03:07,756
a potem "left:15px".

53
00:03:07,891 --> 00:03:08,940
Pięknie!

54
00:03:09,916 --> 00:03:13,886
Skoro to działa w HTML,
niech zadziała też w JavaScript,

55
00:03:14,006 --> 00:03:18,912
by użytkownik dynamicznie tworzył "div"
za każdym razem, gdy poruszy myszką.

56
00:03:19,012 --> 00:03:23,128
Wracamy do funkcji
wywołania zwrotnego.

57
00:03:23,250 --> 00:03:25,217
Po pierwsze, tworzymy "div",

58
00:03:25,354 --> 00:03:30,986
co możemy zrobić funkcją
"document.createElement()".

59
00:03:31,086 --> 00:03:33,577
Teraz będzie to "div".

60
00:03:33,717 --> 00:03:36,154
Po drugie, dodajemy tę klasę:

61
00:03:36,276 --> 00:03:39,289
beard.className = "beard".

62
00:03:39,405 --> 00:03:42,284
Mamy więc "div",
które unosi się w przestrzeni.

63
00:03:42,420 --> 00:03:45,906
Ostatni krok
- przyłączyć to do treści.

64
00:03:47,170 --> 00:03:50,202
No dobrze.
Zrobiliśmy w JavaScript to,

65
00:03:50,384 --> 00:03:53,996
co wcześniej w HTML,
więc HTML możemy już skasować.

66
00:03:55,357 --> 00:03:58,840
Zatrzymajcie odtwarzanie
i kliknijcie na Winstona.

67
00:03:59,002 --> 00:04:00,681
Zobaczcie, co się stanie.

68
00:04:02,671 --> 00:04:07,269
Widzieliście, że pokazał się zarost?
A próbowaliście kliknąć kilka razy?

69
00:04:07,381 --> 00:04:11,219
Jeśli tak, to zauważyliście,
że 2. kliknięcie niczego nie zmieniło,

70
00:04:11,352 --> 00:04:13,678
a przynajmniej tak wam się zdawało.

71
00:04:13,770 --> 00:04:18,182
To dlatego, że każde "div"
ma te same właściwości "góra" i "lewo".

72
00:04:18,250 --> 00:04:21,178
Nowe wersje zbierają się na starych.

73
00:04:21,313 --> 00:04:26,149
Chcemy, żeby "div" pokazywało się tam,
gdzie akurat jest myszka użytkownika.

74
00:04:26,249 --> 00:04:29,831
Ale jak się tego dowiemy?

75
00:04:30,896 --> 00:04:34,575
Otóż przeglądarka
zapisuje wiele informacji,

76
00:04:34,623 --> 00:04:38,198
gdy nastąpi zdarzenie użytkownika.
Np. gdzie to się stało.

77
00:04:38,306 --> 00:04:40,391
Przeglądarka podaje tę informację,

78
00:04:40,458 --> 00:04:43,009
gdy przywoła
funkcję z detektora zdarzeń.

79
00:04:43,109 --> 00:04:46,859
Ale skąd weźmiemy
te fantastyczne informacje?

80
00:04:47,047 --> 00:04:50,063
Dla podpowiedzi - jedna litera.

81
00:04:51,665 --> 00:04:56,054
"e" to obiekt
z informacjami o zdarzeniu.

82
00:04:56,142 --> 00:04:58,771
Przeglądarka wysyła go
jako 1. argument,

83
00:04:58,871 --> 00:05:01,822
gdy nastąpi wywołanie zwrotne
detektora zdarzeń.

84
00:05:01,922 --> 00:05:06,170
Nie potrzebowaliśmy tego przedtem,
więc nie pisałam list argumentów.

85
00:05:06,259 --> 00:05:08,788
Ale skoro będziemy
tego używać, nadam nazwę,

86
00:05:08,921 --> 00:05:11,727
żeby było łatwo
rozpoznać to w funkcji.

87
00:05:11,805 --> 00:05:15,621
Pamiętacie, że w JS można przywołać
funkcję z wieloma argumentami,

88
00:05:15,721 --> 00:05:18,809
nawet jeśli funkcja
z żadnego nie korzysta.

89
00:05:18,970 --> 00:05:22,989
Zawsze otrzymywaliśmy te informacje,
tylko o tym nie wiedzieliśmy.

90
00:05:23,097 --> 00:05:28,632
Teraz loguję "e": console.log(e).

91
00:05:28,709 --> 00:05:32,300
Zatrzymajcie film, kliknijcie
na Winstona i zobaczcie konsolę.

92
00:05:32,392 --> 00:05:37,317
Powinien tam być zalogowany obiekt
zdarzenia. Można przejrzeć właściwości.

93
00:05:38,648 --> 00:05:43,516
Są tu dwie właściwości,
które szczególnie nas interesują:

94
00:05:43,662 --> 00:05:45,745
"clientX" i "clientY".

95
00:05:45,858 --> 00:05:47,984
Zapisują "x" i "y" zdarzenia.

96
00:05:48,084 --> 00:05:51,189
Użyjemy tego,
próbując pozycjonować brodę.

97
00:05:51,316 --> 00:05:54,591
Niech góra brody

98
00:05:54,754 --> 00:05:59,189
równa się "e.clientY",

99
00:05:59,258 --> 00:06:02,608
plus "px" - "piksel", czyli jednostka.

100
00:06:02,719 --> 00:06:06,387
A lewa strona to:

101
00:06:06,556 --> 00:06:10,149
"e.clientX" plus jednostka.

102
00:06:11,345 --> 00:06:14,469
Teraz przerwijcie
i spróbujcie pojeździć myszką.

103
00:06:14,569 --> 00:06:16,503
Narysujcie Winstonowi brodę.

104
00:06:18,090 --> 00:06:21,820
Fajnie, co?
Pewnie już wyobrażacie sobie zabawę

105
00:06:21,930 --> 00:06:25,451
i malowanie w aplikacjach
za pomocą "clientX" i "clientY".

106
00:06:25,569 --> 00:06:31,292
Jak widzieliście, w konsoli jest sporo
innych własności obiektu zdarzenia.

107
00:06:31,381 --> 00:06:35,319
Najpraktyczniejsze są
te związane z klawiaturą.

108
00:06:35,441 --> 00:06:39,360
Znajdziecie klawisze, które wciskał
użytkownik w chwili zdarzenia

109
00:06:39,523 --> 00:06:44,863
i użyjecie ich do stworzenia interfejsu
dostępnego z klawiatury lub fajnej gry.

110
00:06:44,936 --> 00:06:47,301
Och, i jeszcze jedno.

111
00:06:47,421 --> 00:06:50,226
Nie musicie nazywać
tego argumentu "e".

112
00:06:50,349 --> 00:06:53,322
To typowe,
ale niektórzy projektanci stron

113
00:06:53,477 --> 00:06:57,518
piszą "evt" lub "event".

114
00:06:57,703 --> 00:07:01,651
Nieważne, jaką wybierzecie nazwę,
oby odnosiła się do 1. argumentu,

115
00:07:01,752 --> 00:07:07,618
który przeglądarka wprowadza w funkcję,
a potem wy możecie się do tego odwołać.

116
00:07:10,196 --> 00:07:11,589
Jeśli macie z tym kłopot,

117
00:07:11,713 --> 00:07:15,768
użyjcie polecenia "console.log",
by debugować.

118
00:07:15,861 --> 00:07:21,388
Jeśli jesteście projektantem stron,
konsola to wasza przyjaciółka!