1
00:00:00,210 --> 00:00:02,150
OK wrócimy.

2
00:00:02,400 --> 00:00:10,520
Powrót na wstępie javascript Wspomniałem, że jednym z istotnych powodów do nauki JavaScript to, że możemy używać go, aby nasze strony interaktywne.

3
00:00:10,680 --> 00:00:17,920
To w jaki sposób możemy uruchomić kod, gdy użytkownik kliknie przycisk lub wpisać coś w lub uderza klawisz strzałki lub cokolwiek robią.

4
00:00:18,090 --> 00:00:24,880
Możemy mieć jakiś odpowiedni kod, który jest wykonywany w danym momencie nie tylko wykonywany na samym początku strony.

5
00:00:25,410 --> 00:00:28,290
Tak więc, aby to zrobić musimy porozmawiać o wydarzeniach DOM.

6
00:00:28,320 --> 00:00:31,250
Więc ten film będzie wstępem do wydarzeń DOM.

7
00:00:31,260 --> 00:00:36,300
Koncepcyjnie proces ustalania ich i wówczas również składnię.

8
00:00:36,300 --> 00:00:38,660
Tak jak już wspomniałem wydarzenia są wszędzie.

9
00:00:38,670 --> 00:00:47,330
Pomyśl o tym, kiedy interakcję ze strony różnych rzeczy, które dzieją się możesz kliknąć na takie rzeczy jak przycisku można najechać kursorem na link i coś może pop-up.

10
00:00:47,370 --> 00:00:50,320
Można przeciągać i upuszczać elementy na niektórych stronach.

11
00:00:50,550 --> 00:00:56,650
Może chcesz mieć kod, który biegnie od użytkownik kliknie dwukrotnie a właściwie ta strona ma kilka przykładów.

12
00:00:56,670 --> 00:01:03,550
Ten slajd dot com jest to strona internetowa, a ja uderzenia klawiszy strzałek w lewo iw prawo do zmiany slajdów.

13
00:01:03,690 --> 00:01:10,050
Tak więc niektóre kodu polega na uruchomieniu kiedy uderzy lewy klawisz strzałki lub klawisz strzałki w prawo lub po kliknięciu tutaj.

14
00:01:10,590 --> 00:01:16,860
To również wydarzenie i to robi coś jest uruchomiony jakiś kod, który się zmienia bieżący slajd.

15
00:01:16,950 --> 00:01:20,930
Więc chodzi o to wydarzenia są wszędzie i są naprawdę ekscytujące.

16
00:01:20,920 --> 00:01:35,070
To jeden z moich ulubionych tematów, które uczą, bo teraz możemy uczynić nasze strony internetowe interaktywne możemy wziąć rzeczy manipulacji, które byliśmy poznawania zmieniających kolory zmieniając tekst, a następnie możemy faktycznie, że gdy coś się dzieje, w szczególności.

17
00:01:35,070 --> 00:01:38,340
Więc to naprawdę otwiera możliwości manipulowania akademiku.

18
00:01:38,370 --> 00:01:49,050
To, w jaki sposób zamierzamy tworzyć gry, jak to zrobimy formą Walidatory Tic Tac Toe mamy zamiar zrobić naprawdę fajna gra wyboru koloru, a wszystko wynika z tych wydarzeń.

19
00:01:49,050 --> 00:02:07,590
Więc sposób, że wydarzenia te działają jest to, że tak naprawdę dołączyć je do konkretnych elementów więc wybrać element podobny do pierwszego przycisku lub drugiego H-1 lub wejście tam gdzie typ jest równa do tekstu, a potem dołączyć detektor zdarzeń do wybrany element.

20
00:02:07,920 --> 00:02:21,990
Więc jako przykład możemy słuchać za kliknięcie przycisku możemy słuchać na zdarzenie najechania w sprawie H1 możemy słuchać za kluczowy prasowej w przypadku wprowadzania tekstu i porozmawiamy więcej o różnicach między tymi wydarzeniami.

21
00:02:21,990 --> 00:02:30,170
Jest tak wiele różnych rodzajów zdarzeń w JavaScript, ale co ważne jest to, że musimy mieć imprezę, która jest nasłuchiwała na danym elemencie.

22
00:02:30,180 --> 00:02:34,890
Tak jak wcześniej, kiedy będę mówić o zaznaczyć, a następnie manipulować, że nadal obowiązuje.

23
00:02:34,920 --> 00:02:43,740
Musimy wybrać coś, a następnie manipulacji, co dzieje się nam dodać detektor zdarzeń do tej rzeczy, które wybraliśmy.

24
00:02:43,740 --> 00:02:49,400
Jest jeszcze jedna metoda, w szczególności, że będziemy używać cały czas, który jest nazywany detektor zdarzeń dodatek.

25
00:02:49,650 --> 00:03:03,070
Więc co detektora zdarzeń jest to, co używamy raz zaznaczyć element podobny do pierwszego przycisku lub typu wejścia, ponieważ hasło i mamy coś wybrany wówczas nazywamy dodać detektor zdarzeń na nim i dajemy dwa argumenty.

26
00:03:03,330 --> 00:03:06,950
Pierwszym z nich jest typ zdarzenia, które chcemy słuchać.

27
00:03:07,350 --> 00:03:12,790
I drugi argument jest kod, który chcemy uruchomić, kiedy to zdarzenie.

28
00:03:13,260 --> 00:03:14,330
Tak oto przykład.

29
00:03:14,400 --> 00:03:22,060
Ja wybierając pierwszy przycisk na stronie, nie ma większego znaczenia, gdzie przycisk jest i jak wygląda ani nic po prostu dowolny przycisk.

30
00:03:22,350 --> 00:03:30,540
A potem mam przycisku na nasłuchiwania zdarzeń kliknięcia dzwoni, a następnie drugi argument to funkcja, która przechodzi przez całą drogę tutaj.

31
00:03:30,750 --> 00:03:33,690
A ten kod nie jest uruchamiany od razu.

32
00:03:33,690 --> 00:03:35,910
Pamiętaj, to jest nazywany oddzwaniania.

33
00:03:35,910 --> 00:03:38,140
Ten kod nie jest uruchamiany natychmiast.

34
00:03:38,430 --> 00:03:42,000
Jest prowadzony tylko raz to zdarzenie pożary.

35
00:03:42,000 --> 00:03:46,390
Więc po kliknięciu na przycisk javascript idzie wzywa go z powrotem.

36
00:03:46,440 --> 00:03:51,630
Funkcja ta mówi, hej, to twoja chwila, aby błyszczeć i wrócić tutaj gotowe niech wykona ci.

37
00:03:51,630 --> 00:03:56,040
A potem, że kod jest uruchamiany, a my się nie radził zalogować ktoś kliknij przycisk.

38
00:03:56,250 --> 00:04:05,290
Tak więc funkcja ta będzie działać zawsze, gdy przycisk jest szybko przejechać z konkretnym przyciskiem, że wybrana kliknięciu.

39
00:04:05,910 --> 00:04:07,540
Więc oto inny przykład.

40
00:04:07,830 --> 00:04:26,910
Ten przypadek mam znak tu guzik i akapitu i wybrane oboje z selektorem Kery i zapisać je zarówno do zmiennych, a następnie wszystko, co możemy zrobić, to dodać kliknij słuchacza tak, przycisk nie dodać detektor zdarzenia kliknięcia a potem Drugim argumentem jest to, że funkcja zwrotna.

41
00:04:26,910 --> 00:04:42,260
A co mamy zamiar zrobić, że gdy kliknięciu przycisku zmienia się treść akapitów tekstu, aby być kimś, kliknij przycisk i można zobaczyć po kliknięciu tego przycisku zmienia się od nikogo kliknięciu mnie i ktoś musi kliknąć przycisk.

42
00:04:42,930 --> 00:04:50,790
Więc teraz mam zamiar zrobić szybki pokaz używając naszą stronę demo Dom zacznijmy od podejmowania tego H-1 jest tutaj.

43
00:04:50,810 --> 00:04:53,700
Zmień kolor, gdy użytkownik kliknie na nim.

44
00:04:53,780 --> 00:04:58,310
Tak więc, aby to zrobić musimy zacząć zawsze wybierając H-1.

45
00:04:58,810 --> 00:05:00,510
Więc mamy kilka opcji tam.

46
00:05:00,530 --> 00:05:09,070
Zamierzam po prostu użyć queery dokument selektora, że ​​selektor zapytanie H-1 upewnić, mamy go.

47
00:05:09,310 --> 00:05:10,460
W porządku.

48
00:05:10,460 --> 00:05:14,920
Potem wystarczy napisać H-1, które dodają detektor zdarzeń.

49
00:05:15,010 --> 00:05:16,790
Pamiętaj, że to dwa argumenty.

50
00:05:16,940 --> 00:05:19,910
Pierwszy z nich to wydarzenie, że jesteśmy nasłuchując.

51
00:05:20,060 --> 00:05:24,050
A my spędzić trochę więcej czasu rozmawiając o różnych wydarzeniach z różnych opcji.

52
00:05:24,050 --> 00:05:30,050
Na razie jesteśmy po prostu robi kliknięcie, a drugi to kod chcemy uruchomić, gdy użytkownik kliknie.

53
00:05:30,310 --> 00:05:37,060
Więc funkcja i po prostu zacząć naprawdę proste i po prostu zrobić alert, gdy użytkownik kliknie.

54
00:05:37,160 --> 00:05:44,330
Więc zrobimy alert każdy został kliknięty podobnie jak ten.

55
00:05:44,750 --> 00:05:46,990
A teraz naciśnij Enter.

56
00:05:47,120 --> 00:05:48,700
Nic się nie zmienia od razu.

57
00:05:49,190 --> 00:05:52,910
Ale teraz, gdy klikam na jednej więc będę zamknąć to.

58
00:05:52,910 --> 00:05:54,570
Gdybym kliknąć w dowolnym miejscu na stronie.

59
00:05:54,590 --> 00:05:56,400
Abstrahując od H-1, nic się nie dzieje.

60
00:05:56,620 --> 00:06:01,150
Jak tylko kliknąć H-1 choć mówi mi H-1 była prawidłowa.

61
00:06:01,430 --> 00:06:02,510
Więc to jest bardzo ważne.

62
00:06:02,500 --> 00:06:15,290
To odnosi się tylko do H-1, ale to nie znaczy, mogę iść tu i kliknij, bo pamiętam, czy mogę sprawdzić tego H-1 przechodzi przez całą drogę w poprzek ekranu.

63
00:06:15,500 --> 00:06:30,190
Więc po prostu coś, aby pamiętać, że w porządku dla nas w tej sprawie, ale to pojawiają się od czasu do czasu, gdzie rzeczy zachowują się nieco inaczej niż może chcesz je i trzeba je wykorzystać CSSA może skrócić etap jeden lub zmienić słuchacz i tak.

64
00:06:30,640 --> 00:06:35,130
Więc zamiast po prostu alarmując Spróbujmy zrobić coś innego.

65
00:06:35,330 --> 00:06:54,260
A jeśli po prostu wciskamy strzałkę w górę wydarzenie Dodaj słuchacza przyciskiem myszy i zmienić kod tutaj i zrobić coś jak H-1, że styl tła równa i zróbmy Orange tło i nacisnąć enter.

66
00:06:54,250 --> 00:07:06,030
Znowu nic się nie zmieni, ale od razu po kliknięciu zwrócić uwagę na to, co się dzieje, pierwszą rzeczą, która się dzieje, że wciąż mówi w pogotowiu, że H-1 został kliknięty.

67
00:07:06,170 --> 00:07:10,360
A potem, kiedy zamknę że następnie zmienia się pomarańczowa.

68
00:07:10,730 --> 00:07:14,840
Więc morał jest to, że możemy mieć więcej niż jednego słuchacza na danym elemencie.

69
00:07:14,840 --> 00:07:28,890
Gdy klikniemy na tym H-1 pierwszy słuchacz, który dodaliśmy słuchał za kliknięcie i pobiegł alert, a następnie dodaliśmy kolejny słuchacz potem, że też słuchał za kliknięcie, ale zmienił kolor tła.

70
00:07:28,910 --> 00:07:31,200
Więc kiedy klikam oboje uciekać.

71
00:07:31,390 --> 00:07:42,190
I to zawsze będzie się działo teraz, gdy kliknę ponownie pojawia się alarm i jego zmieniła kolor na pomarańczowy oczywiście nie widzisz, bo było już pomarańczowe, ale musisz mi zaufać.

72
00:07:42,290 --> 00:07:45,000
Utrzymuje zmieniając go na pomarańczowy kółko kółko.

73
00:07:45,670 --> 00:07:48,560
OK, ja mam zamiar odświeżyć i pozbyć się tego wszystkiego.

74
00:07:48,590 --> 00:07:52,720
Chcę też zrobić szybki pokaz dodając słuchacza do ul.

75
00:07:52,880 --> 00:08:04,300
Więc zróbmy selektor zapytania zrzutu dokument UL i pamiętać, że mamy trzy sojuszników zamiast jednego ul.

76
00:08:04,490 --> 00:08:08,500
Więc mam zamiar pokazać, co dzieje się, gdy możemy ustawić go na elemencie nadrzędnym takiego.

77
00:08:08,510 --> 00:08:11,850
No a ja nie zamierzam użyć zmiennej tylko będzie to zrobić tutaj.

78
00:08:12,130 --> 00:08:14,640
Adamant słuchaczem.

79
00:08:15,250 --> 00:08:16,140
Kliknij.

80
00:08:16,550 --> 00:08:17,930
Więc to jest pierwszy argument.

81
00:08:17,930 --> 00:08:25,560
Drugim z nich jest funkcja, że ​​chcemy działać podobnie jak ten.

82
00:08:25,880 --> 00:08:27,410
I mam zamiar zacząć.

83
00:08:27,680 --> 00:08:35,720
Zróbmy konsolę, że dziennik były kliknięć dobrze i wiem co.

84
00:08:35,810 --> 00:08:37,210
To jest strona bierna.

85
00:08:37,250 --> 00:08:38,050
Kiepski pomysł.

86
00:08:38,300 --> 00:08:39,270
Zróbmy.

87
00:08:39,460 --> 00:08:43,550
Kliknąłeś UL o wiele lepiej.

88
00:08:43,880 --> 00:08:44,520
OK.

89
00:08:44,720 --> 00:08:48,430
Więc trzymajmy konsolę otwarte i niech kliknij na ul.

90
00:08:48,980 --> 00:08:50,420
Ale w jaki sposób możemy kliknąć na oleju.

91
00:08:50,450 --> 00:08:53,090
Ponieważ również ma trzy sojuszników w jej wnętrzu.

92
00:08:53,120 --> 00:08:55,290
UL jest cała ta sprawa tutaj.

93
00:08:55,320 --> 00:09:00,890
Tak więc każdy szybkie nie ma znaczenia, który sojusznikiem Jestem po prostu wszędzie w studni.

94
00:09:01,040 --> 00:09:02,820
Widać tutaj, zwiększając liczbę.

95
00:09:02,930 --> 00:09:07,150
Wszelkie szybki na dołek to będzie wykonywać ten dziennik konsoli kropka.

96
00:09:08,120 --> 00:09:14,290
Warto więc odświeżyć jeszcze raz i tym razem powiedzmy, że chcę zmienić samego sojusznika.

97
00:09:14,300 --> 00:09:17,540
Gdy klikam na indywidualne sojusznika chcę coś się wydarzy.

98
00:09:17,960 --> 00:09:19,400
Istnieje kilka sposobów, aby to uczynić.

99
00:09:19,420 --> 00:09:26,360
I mamy zamiar uruchomić tylko z jednym, który jest najprostszym dołączenie jednego słuchacza do każdego sojusznika jako heads-up.

100
00:09:26,360 --> 00:09:32,940
Co będziemy robić w końcu jest dołączenie jednego słuchacza do UL, a następnie wewnątrz tego słuchacza.

101
00:09:32,990 --> 00:09:39,250
Jedziemy do wykrycia, które leżą wewnątrz specjalnie UL został kliknięty na wszystkich z jednym Lessner.

102
00:09:39,250 --> 00:09:55,570
Na razie jednak mamy zamiar dodania osobnego słuchacza do każdego leżą więc musimy zacząć od wyboru sojuszników, aby nasi sojusznicy równa dokument dot queery selektor wszystkie sojusznikiem pilnuje mamy je wszystkie.

103
00:09:55,570 --> 00:09:59,040
No dobrze, co musimy zrobić dla pętli.

104
00:09:59,210 --> 00:10:02,190
Tak na var i jest równa zeru.

105
00:10:02,410 --> 00:10:04,880
Pamiętaj, że powiedziałem, że będziemy robić to cały czas.

106
00:10:04,880 --> 00:10:14,740
Więc mniej niż sojuszników, że długość ja plus Plus tak po prostu.

107
00:10:15,050 --> 00:10:20,600
A potem wewnątrz tutaj jesteśmy rzeczywiście będzie dodać detektor do poszczególnych sojusznika.

108
00:10:20,840 --> 00:10:21,940
Tak, że wygląda następująco.

109
00:10:21,960 --> 00:10:39,220
Elyse I tak, że daje nam konkretną sojusznikiem i detektor zdarzenia kliknięcia funkcji wystarczy tak i zrobił to trochę.

110
00:10:39,770 --> 00:10:41,920
A następnie kod, który chcemy uruchomić.

111
00:10:42,320 --> 00:10:49,250
Zmieńmy kolor sojusznika, który został kliknięty się i niech po prostu go zmienić się fioletowy.

112
00:10:49,250 --> 00:10:51,250
Więc mamy kilka różnych opcji.

113
00:10:51,290 --> 00:10:54,600
Co muszę zrobić, to znaleźć w sojusznika, który został kliknięty.

114
00:10:54,800 --> 00:11:05,320
Więc może to zrobić sojusznikom I choć nie jest to naprawdę świetne rozwiązanie, ponieważ nie jest znacznie łatwiejszy sposób zrobić to, co jest użycie tego słowa kluczowego.

115
00:11:05,680 --> 00:11:23,100
Więc wewnątrz słuchacza słowo kluczowe odnosi się do elementu, który został kliknął lub elementu, który został unosił się nad lub elementu, który klawisz nacisnąć wystąpiły u gdziekolwiek element, który przechodzi tuż przed na razie cokolwiek, co jest zaznaczone jest, co to odnosi się do.

116
00:11:23,140 --> 00:11:30,640
Mogę więc napisać ten styl dot że kolor równa fioletowy.

117
00:11:31,000 --> 00:11:33,140
I rzeczywiście jest to coś bardziej oczywiste.

118
00:11:33,230 --> 00:11:34,150
Jest to mała czcionka.

119
00:11:34,150 --> 00:11:36,670
Więc zróbmy różowy tak po prostu.

120
00:11:37,040 --> 00:11:38,500
I wciśnij enter.

121
00:11:38,500 --> 00:11:46,020
Nic nie dzieje się od razu, ale jeśli kliknę sojusznika widać, że zmienia się różowe.

122
00:11:47,410 --> 00:11:53,960
A jeśli Ciągle klikając ciągle się zmienia na różowy po prostu nie można powiedzieć.

123
00:11:54,080 --> 00:12:03,670
Więc ten wzór tu wybierając kilka rzeczy zapętlenie poprzez nich z osobna i dodanie detektora zdarzeń do każdego z nich jest naprawdę bardzo powszechne.

124
00:12:03,710 --> 00:12:11,170
Jedziemy zobaczyć to cały czas w ciągu najbliższych kilku projektów, które podejmujemy.

125
00:12:11,270 --> 00:12:20,830
Ostatnią rzeczą, będę tu wspomnieć, jest to, że nie zawsze trzeba używać anonimowego funkcji tak jak my tutaj, gdzie piszesz funkcji z nawiasami i nie dać mu nazwę.

126
00:12:20,990 --> 00:12:22,330
Nie musisz tego robić.

127
00:12:22,370 --> 00:12:25,790
Można zadeklarować nazwie funkcji oddzielnie tak jak ja tutaj.

128
00:12:26,090 --> 00:12:33,890
Tekst zmiany funkcji, a następnie wszystko, co musimy zrobić, to powiedzieć, że przycisk dodać detektor zdarzeń lub kliknij a następnie dajemy go zmienić tekst.

129
00:12:34,070 --> 00:12:39,890
Zauważ, że nie mamy nawiasy potem bo od razu uruchomić funkcję, która jest nie to, co chcemy.

130
00:12:40,180 --> 00:12:51,100
Więc jesteśmy tylko przejazdem wartość tej funkcji jesteśmy przechodzącej treść w zasadzie do tego szybkiego słuchacza i mówiąc oto funkcję chcę Ci uruchomić, gdy użytkownik kliknie przycisk.

131
00:12:51,190 --> 00:12:52,810
Ale nie uruchomić go jeszcze.

132
00:12:52,820 --> 00:12:55,350
Więc te dwa będą działać dokładnie tak samo.

133
00:12:55,370 --> 00:12:57,030
To tylko kwestia preferencji.

134
00:12:57,190 --> 00:13:00,830
W większości przypadków istnieją pewne różnice, które mogą spotykamy później.

135
00:13:00,880 --> 00:13:02,980
Chciałbym zdecydowanie wolą używać.

136
00:13:03,230 --> 00:13:10,160
Czas tylko wtedy, gdy nie będę używać anonimowego funkcji jest gdybym musiał ponownie użyć tego kodu gdzieś indziej poza słuchacza zegara.

137
00:13:10,150 --> 00:13:22,600
Więc gdybym chciał, aby go uruchomić się indywidualnie lub Chciałem go uruchomić zamiast innego szybkiego słuchacza, a nie powielanie tej funkcji dałbym mu nazwę, a następnie powielić tylko nazwę, gdzie używam go dwukrotnie.

138
00:13:23,060 --> 00:13:30,650
OK, więc następnym aż będziesz miał okazję zrobić kilka szybkich ćwiczeń z wykorzystaniem szybkie Wisner, a niektóre z rzeczy, których nauczyłem się w ciągu ostatnich kilku filmów.