1
00:00:00,000 --> 00:00:03,840
>> [MUZYKI]

2
00:00:03,840 --> 00:00:05,770

3
00:00:05,770 --> 00:00:08,690
>> DOUG LLOYD: Więc teraz jesteśmy starzy
plusy w programowaniu WWW, prawda?

4
00:00:08,690 --> 00:00:12,140
I omówiliśmy kilka
języki w poszczególnych filmów.

5
00:00:12,140 --> 00:00:14,690
A teraz zróbmy jedną więcej, JavaScript.

6
00:00:14,690 --> 00:00:17,370
>> Pierwsza dobra wiadomość, JavaScript
to nowoczesny programowania

7
00:00:17,370 --> 00:00:21,410
język podobnie jak PHP, którego
Składnia pochodzi z C,

8
00:00:21,410 --> 00:00:22,830
tak, że to dobre miejsce, aby rozpocząć.

9
00:00:22,830 --> 00:00:25,880
Chodzi o tak stare jak PHP, jak również,
że już około 20 lat.

10
00:00:25,880 --> 00:00:28,600
Wynaleziony wokół
w tym samym czasie, jak PHP.

11
00:00:28,600 --> 00:00:32,240
I JavaScript jest rzeczywiście bardzo
podstawą doświadczenia użytkownika

12
00:00:32,240 --> 00:00:32,740
z sieci.

13
00:00:32,740 --> 00:00:34,448
W rzeczywistości istnieją
trzy języki, że

14
00:00:34,448 --> 00:00:38,480
powiedziałbym rodzaju składają się na
doświadczenie użytkownika do interakcji

15
00:00:38,480 --> 00:00:42,650
ze strony internetowej, html,
CSS i JavaScript.

16
00:00:42,650 --> 00:00:46,030
A więc teraz porozmawiajmy
Trochę o JavaScript.

17
00:00:46,030 --> 00:00:50,301
>> Zła wiadomość, chociaż, z JavaScript jest
że ustawia wiele przepisów dla siebie,

18
00:00:50,301 --> 00:00:51,300
a następnie rozkłada je.

19
00:00:51,300 --> 00:00:54,010
I JavaScript w rzeczywistości może być
rodzaju wyzwanie, aby dowiedzieć się,

20
00:00:54,010 --> 00:00:57,000
bo to w przeciwieństwie do C i
PHP, które są bardzo zorganizowany

21
00:00:57,000 --> 00:01:00,270
i mają bardzo sztywne zasady
na jak rzeczy mogą pracować.

22
00:01:00,270 --> 00:01:03,690
JavaScript ma rodzaj
od zdobyć tak elastyczne

23
00:01:03,690 --> 00:01:06,650
że być może sprawy nie idą do
działa tak spodziewamy się,

24
00:01:06,650 --> 00:01:09,830
a może tak naprawdę nie może się nauczyć
nasz pierwszy język programowania

25
00:01:09,830 --> 00:01:10,769
jako JavaScript.

26
00:01:10,769 --> 00:01:12,810
Więc może dlatego, że nie
postawiła sobie jakieś zasady,

27
00:01:12,810 --> 00:01:15,754
i to naprawdę nie robi
egzekwowania dobrych nawyków kodowania.

28
00:01:15,754 --> 00:01:18,170
Ale mam nadzieję, że teraz mamy opracowane
kilka dobrych nawyków kodowania,

29
00:01:18,170 --> 00:01:21,470
i tak możemy zacząć wypad
w JavaScript trochę.

30
00:01:21,470 --> 00:01:25,750
>> Aby napisać JavaScript, podobny do otwarcia
się w pliku C z kropką C rozszerzenia

31
00:01:25,750 --> 00:01:29,770
lub plik z rozszerzeniem PHP dot PHP,
wszystko, co musisz zrobić, to otworzyć plik

32
00:01:29,770 --> 00:01:31,764
z kropką js rozszerzenia pliku.

33
00:01:31,764 --> 00:01:34,430
Nie musimy mieć jakieś specjalne
ograniczniki jak my w PHP.

34
00:01:34,430 --> 00:01:36,750
Tego rodzaju kąta
Uchwyt znak zapytania PHP

35
00:01:36,750 --> 00:01:40,300
że jesteśmy przyzwyczajeni do z, że, w drodze
opowiemy naszą przeglądarkę, że to, co mamy jest

36
00:01:40,300 --> 00:01:43,502
JavaScript jest tym
że w tagu html,

37
00:01:43,502 --> 00:01:46,210
i zobaczymy trochę o
jak to zrobić za chwilę.

38
00:01:46,210 --> 00:01:48,210
>> Inną rzeczą, która sprawia,
JavaScript inaczej,

39
00:01:48,210 --> 00:01:50,580
jednak jest to, że działa po stronie klienta.

40
00:01:50,580 --> 00:01:53,430
Więc przypomnieć w PHP, które
nie mogliśmy naprawdę zobaczyć

41
00:01:53,430 --> 00:01:57,041
PHP, który podkreślił, stronę internetową.

42
00:01:57,041 --> 00:01:59,040
Jeśli kiedykolwiek oglądane
źródło strony, my by tylko

43
00:01:59,040 --> 00:02:02,830
zobacz html, który był
generowane przez ten PHP.

44
00:02:02,830 --> 00:02:04,900
Ale JavaScript działa po stronie klienta.

45
00:02:04,900 --> 00:02:06,710
JavaScript działa na komputerze.

46
00:02:06,710 --> 00:02:09,050
I dlatego możesz zrobić
rzeczy jak dodać blokery.

47
00:02:09,050 --> 00:02:09,550
Dobrze?

48
00:02:09,550 --> 00:02:12,704
Blokowanie reklam jest zwykle wykonywane przez
zabijając wszystkich JavaScript

49
00:02:12,704 --> 00:02:14,370
która działa na danej stronie.

50
00:02:14,370 --> 00:02:19,000
A ponieważ to musiałoby
uruchomić na swojej stronie klienta maszyna,

51
00:02:19,000 --> 00:02:21,910
można po prostu zatrzymać
JavaScript do prowadzenia w całości.

52
00:02:21,910 --> 00:02:27,030
Oznacza to również, że podczas korzystania z
strona internetowa, która zawiera JavaScript,

53
00:02:27,030 --> 00:02:32,450
musisz wysłać źródło JavaScript
Kod jako część odpowiedzi http

54
00:02:32,450 --> 00:02:34,159
do klienta, gdy o to poproszą.

55
00:02:34,159 --> 00:02:35,950
A więc nie może
chcesz używać JavaScript

56
00:02:35,950 --> 00:02:38,395
zrobić naprawdę delikatne rzeczy
jak informacje przechodzącej

57
00:02:38,395 --> 00:02:41,020
o hasła użytkowników tyłu i
dalej, bo są naprawdę

58
00:02:41,020 --> 00:02:45,610
będzie otrzymywać wszystkie kodu źródłowego,
nie tylko html, który jest generowany,

59
00:02:45,610 --> 00:02:49,030
takich jak byłoby w przypadku powiedzmy PHP.

60
00:02:49,030 --> 00:02:51,620
>> Jak więc to JavaScript
w naszym html zacząć?

61
00:02:51,620 --> 00:02:54,520
Cóż, podobnie jak CSS, w rzeczywistości,
jest swego rodzaju, jak to zrobić tutaj.

62
00:02:54,520 --> 00:02:56,190
Z CSS mamy tagów stylu.

63
00:02:56,190 --> 00:03:00,760
I wewnątrz tych tagów stylu,
możemy zdefiniować arkusz stylów CSS.

64
00:03:00,760 --> 00:03:03,450
Podobnie z JavaScript
możemy otworzyć tagów skryptu,

65
00:03:03,450 --> 00:03:06,660
kolejny tag html my nie
rozmawiać w naszym html wideo

66
00:03:06,660 --> 00:03:09,720
i pisać JavaScript w
między tymi tagami skryptu.

67
00:03:09,720 --> 00:03:13,960
Także jednak, jak CSS, możemy
może łączyć się poza plików CSS

68
00:03:13,960 --> 00:03:15,900
i pociągnij je do naszego programu w ten sposób.

69
00:03:15,900 --> 00:03:18,280
Z CSS możemy również,
przepraszam, z JavaScript

70
00:03:18,280 --> 00:03:23,240
możemy również określić źródło
atrybutem tagu script

71
00:03:23,240 --> 00:03:25,720
połączyć w JavaScript
oddzielnie, więc nie

72
00:03:25,720 --> 00:03:27,680
napisać go w
między znaczniki skryptów, możemy

73
00:03:27,680 --> 00:03:29,600
można połączyć go za pomocą
że tagu skrypt, jak również.

74
00:03:29,600 --> 00:03:33,230
I tak jak w przypadku z CSS gdzie
zalecamy, że to był prawdopodobnie

75
00:03:33,230 --> 00:03:36,090
w najlepszym interesie, aby napisać
Twój CSS w oddzielnym pliku w przypadku

76
00:03:36,090 --> 00:03:38,500
trzeba go zmienić,
podobnie nie polecamy

77
00:03:38,500 --> 00:03:40,720
że piszesz swoje
JavaScript w osobnych plikach

78
00:03:40,720 --> 00:03:45,460
i używać źródło tagów skryptu
przypisują zawiązać JavaScript

79
00:03:45,460 --> 00:03:49,520
do swojej html, strony internetowej.

80
00:03:49,520 --> 00:03:52,610
>> Zmienne tak JavaScript, będziemy
zacząć mówić o składni tutaj.

81
00:03:52,610 --> 00:03:53,600
A my przejść
tego rodzaju szybko,

82
00:03:53,600 --> 00:03:56,640
ponieważ zrobiliśmy to w PHP, więc
to powinny być całkiem znajomo.

83
00:03:56,640 --> 00:03:59,490
Tak więc zmienne w JavaScript są
Bardzo podobny do PHP zmienne.

84
00:03:59,490 --> 00:04:03,270
Nie ma specyfikacja typu, oraz
kiedy wprowadzić zmienną,

85
00:04:03,270 --> 00:04:05,070
można poprzedzić je słowa kluczowego var.

86
00:04:05,070 --> 00:04:07,750
W PHP chcemy coś zrobić
tak, znak dolara x.

87
00:04:07,750 --> 00:04:09,950
To, jak wskazano
zmienna, ale nie,

88
00:04:09,950 --> 00:04:12,060
nie wspominając o typ
zmiennej w ogóle.

89
00:04:12,060 --> 00:04:15,124
Chcemy powiedzieć coś takiego
Znak dolara x równa 44 w PHP.

90
00:04:15,124 --> 00:04:17,040
Jeśli byliśmy robi
samo w JavaScript,

91
00:04:17,040 --> 00:04:19,589
powiedzielibyśmy var x jest równa 44.

92
00:04:19,589 --> 00:04:22,780
Więc var jest rodzaj naszej drodze
wprowadzania zmiennej.

93
00:04:22,780 --> 00:04:26,850
To może nieco bardziej intuicyjny
niż dolara zmiennej znak.

94
00:04:26,850 --> 00:04:29,080
>> Ponownie, ponieważ nie ma
typy danych, możemy to zrobić

95
00:04:29,080 --> 00:04:34,490
z dowolnego typu danych, łańcuchy,
coś jeszcze w całości byłoby var.

96
00:04:34,490 --> 00:04:37,260
Warunkowe, wszystkie nasze
starzy przyjaciele z C i PHP

97
00:04:37,260 --> 00:04:41,640
są nadal dostępne, więc mamy, jeśli,
else if, else, switch i pytanie

98
00:04:41,640 --> 00:04:42,240
znak dwukropka.

99
00:04:42,240 --> 00:04:45,890
Przełącznik pozostała tak elastyczne, jak to
był w PHP, ale wszystkie z nich jesteś

100
00:04:45,890 --> 00:04:46,930
zaznajomieni z teraz.

101
00:04:46,930 --> 00:04:49,900
I podobnie z pętli są
stare faworyci chwilę,

102
00:04:49,900 --> 00:04:52,700
Do While, i wciąż dla nas dostępne.

103
00:04:52,700 --> 00:04:55,880
Więc już wiemy, wiele z
Podstawowym rodzajem JavaScript od podstaw

104
00:04:55,880 --> 00:05:01,800
tylko z racji konieczności sporo
wiedzy teraz o C i PHP.

105
00:05:01,800 --> 00:05:03,670
>> Co z funkcji w JavaScript?

106
00:05:03,670 --> 00:05:08,199
Cóż, podobna do PHP każda funkcja jest
wprowadzone z kluczowych funkcji.

107
00:05:08,199 --> 00:05:10,740
Mówisz funkcję, a następnie
zaczynają definiować swoją funkcję.

108
00:05:10,740 --> 00:05:12,531
Co znajduje się w trochę inny
o JavaScript,

109
00:05:12,531 --> 00:05:15,700
choć jest zdolność do
co nazywa anonimowa funkcja.

110
00:05:15,700 --> 00:05:18,880
Tak można zdefiniować funkcje
że nie mają nazwy.

111
00:05:18,880 --> 00:05:21,222
To jest coś, czego
naprawdę nie widział.

112
00:05:21,222 --> 00:05:23,430
Będziemy naprawdę używają pojęcia
anonimowego funkcji

113
00:05:23,430 --> 00:05:27,880
nieco później w tym
wideo, ponieważ będziesz

114
00:05:27,880 --> 00:05:31,530
zrobić trochę więcej sensu w kontekście
kiedy widzimy go w danej sytuacji

115
00:05:31,530 --> 00:05:33,120
że już wykonane tutaj.

116
00:05:33,120 --> 00:05:35,710
Ale niech tylko spojrzeć
na jakim prostego kodu JavaScript

117
00:05:35,710 --> 00:05:37,850
Funkcja może wyglądać.

118
00:05:37,850 --> 00:05:40,610
>> Więc Poszedłem dalej i
otworzyłem CS50 IDE

119
00:05:40,610 --> 00:05:43,690
i już uruchomić Apache
aby rozpocząć mój serwer działa.

120
00:05:43,690 --> 00:05:46,800
I mam tego pliku
otwarte nazywa home.html.

121
00:05:46,800 --> 00:05:48,330
I będę powiększyć trochę tutaj.

122
00:05:48,330 --> 00:05:52,090
A w zasadzie, można zobaczyć
Home.html jest tylko kilka przycisków.

123
00:05:52,090 --> 00:05:55,291
A ja twierdzę na szczycie tutaj
że jest to sekcja JavaScript

124
00:05:55,291 --> 00:05:55,790
przybory.

125
00:05:55,790 --> 00:05:59,490
Więc jest kilka przycisków tutaj,
ale co te przyciski rzeczywiście zrobić?

126
00:05:59,490 --> 00:06:03,662
>> Cóż, musimy udać się do mojego IED,
i ja home.html otworzyć tutaj.

127
00:06:03,662 --> 00:06:05,620
Na samym początku,
tutaj gdzie jestem powiązanie

128
00:06:05,620 --> 00:06:07,500
we wszystkich moich plików źródłowych JavaScriptu.

129
00:06:07,500 --> 00:06:08,000
Dobrze?

130
00:06:08,000 --> 00:06:12,440
Więc mam anonymous.js, clock.js,
Używam atrybut źródłowy

131
00:06:12,440 --> 00:06:14,440
z tagu skrypt do łączenia się w pliku.

132
00:06:14,440 --> 00:06:18,660
Więc nie pisałem żadnej
JavaScript bezpośrednio w tym pliku,

133
00:06:18,660 --> 00:06:21,790
ale ja wyciągnął we wszystkich
JavaScript pisałem osobno.

134
00:06:21,790 --> 00:06:24,540
A jeśli przewijać tutaj, to
powinno wszystko wyglądać nieco znajomo

135
00:06:24,540 --> 00:06:27,090
z odrobiną nowej składni.

136
00:06:27,090 --> 00:06:32,655
Mamy tu tag nagłówek
funkcje, a następnie przycisk.

137
00:06:32,655 --> 00:06:35,530
Mam wejście, które jest przycisk typu,
i najwyraźniej po kliknięciu go,

138
00:06:35,530 --> 00:06:38,130
Mam zamiar zadzwonić niektóre
funkcję alarmu datę.

139
00:06:38,130 --> 00:06:41,792
I w ten sposób możemy coś w rodzaju pomieszania
trochę JavaScript i HTML.

140
00:06:41,792 --> 00:06:44,500
Oni rzeczywiście odgrywają bardzo ładnie
razem, a więc wyraźnie, gdy

141
00:06:44,500 --> 00:06:48,730
I kliknij na ten przycisk, zamierzam
wywołać jakąś datę alarmu funkcja.

142
00:06:48,730 --> 00:06:53,660
I podobnie mają zdefiniowałem zachowań
dla wszystkich innych przycisków,

143
00:06:53,660 --> 00:06:56,440
są na tej stronie home.html,
które będziemy wracać

144
00:06:56,440 --> 00:06:59,172
aby w trakcie tego obrazu.

145
00:06:59,172 --> 00:07:00,880
Ale wróćmy się
tu i spójrz

146
00:07:00,880 --> 00:07:03,850
w clock.js, który jest
Plik JavaScript że

147
00:07:03,850 --> 00:07:07,370
napisał, że ma tę pierwszą funkcję
mamy zamiar przyjrzeć.

148
00:07:07,370 --> 00:07:11,630
Jak widać, zaczynam mój JavaScript
funkcjonować w funkcję słów kluczowych,

149
00:07:11,630 --> 00:07:14,560
i dałem to można sobie
nazwa, to się nazywa alert data.

150
00:07:14,560 --> 00:07:18,710
Wewnątrz tam, podobno stworzyć
Nowa zmienna lokalna o nazwie aktualna data.

151
00:07:18,710 --> 00:07:21,500
A ja zamierzam przypisywać
równego z nową datą.

152
00:07:21,500 --> 00:07:24,430
I mogliśmy dostać się do wielu
szczegółowo, co jest data,

153
00:07:24,430 --> 00:07:27,060
i naprawdę JavaScript jest tak
duże, że nie możemy ewentualnie

154
00:07:27,060 --> 00:07:28,330
pokrycie wszystko w jednym filmie.

155
00:07:28,330 --> 00:07:32,220
Ale wystarczy powiedzieć, to będzie
aby powrócić do mnie element danych, które

156
00:07:32,220 --> 00:07:35,470
oddaje aktualną datę i godzinę.

157
00:07:35,470 --> 00:07:39,100
Jestem przechowywania, że ​​w zmiennej, że jestem
najwyraźniej zamiar ostrzec aktualną datę.

158
00:07:39,100 --> 00:07:41,300
>> Cóż, co robi alert
data aktualna wyglądać?

159
00:07:41,300 --> 00:07:46,460
Rzućmy okiem na samym pliku
kopii w ciągu w oknie przeglądarki.

160
00:07:46,460 --> 00:07:49,551
Więc znowu, jest to przycisk, że
są związane z tym, o nazwie funkcji.

161
00:07:49,551 --> 00:07:51,800
I kliknij go tam i
zobacz, co się stało, jest informowany.

162
00:07:51,800 --> 00:07:56,140
To pojawiło się tego rodzaju skrzynki z informacją
mi, że obecny czas jest najwyraźniej

163
00:07:56,140 --> 00:07:59,370
to 4 listopada w
10:43:43 rano.

164
00:07:59,370 --> 00:08:02,345
A jeśli kliknij go ponownie, teraz
to kilka sekund później, prawda?

165
00:08:02,345 --> 00:08:03,720
Więc to wszystko, ta funkcja działa.

166
00:08:03,720 --> 00:08:07,670
Po kliknięciu tego przycisku, to
wyskakuje komunikat ostrzegawczy do mnie.

167
00:08:07,670 --> 00:08:13,806

168
00:08:13,806 --> 00:08:15,690
Więc tak naprawdę nie
zbyt wiele funkcji

169
00:08:15,690 --> 00:08:19,110
że różni się od PHP,
tylko trochę nowej składni

170
00:08:19,110 --> 00:08:22,500
że pochodzi z pracy z JavaScript.

171
00:08:22,500 --> 00:08:24,650
>> Tablice w JavaScript są
całkiem proste.

172
00:08:24,650 --> 00:08:27,200
Aby zadeklarować tablicę, należy użyć
składnia nawiasy kwadratowe

173
00:08:27,200 --> 00:08:30,090
że jesteśmy zaznajomieni z z PHP.

174
00:08:30,090 --> 00:08:33,432
I podobnie jak PHP, możemy
Można również mieszać typów danych.

175
00:08:33,432 --> 00:08:35,140
Więc ta tablica, zarówno
z tych tablic byłoby

176
00:08:35,140 --> 00:08:36,960
być w pełni uzasadnione JavaScript.

177
00:08:36,960 --> 00:08:42,500
Jeden to wszystkie liczby całkowite, i jeden, który
Miesza się różne typy danych.

178
00:08:42,500 --> 00:08:45,020
>> Co znajduje się w coś zupełnie innego
w JavaScript, mimo?

179
00:08:45,020 --> 00:08:47,020
To pojęcie obiektu.

180
00:08:47,020 --> 00:08:50,240
Więc być może słyszałeś o
programowania obiektowego.

181
00:08:50,240 --> 00:08:53,370
Nie robimy go dużo w CS50,
ale zrobimy trochę nim

182
00:08:53,370 --> 00:08:55,670
tutaj w kontekście JavaScript.

183
00:08:55,670 --> 00:08:59,100
Teraz JavaScript ma zdolność do
zachowywać się jako programowania obiektowego

184
00:08:59,100 --> 00:09:02,615
język, ale to nie to samo
wyłącznie obiekt zorientowany

185
00:09:02,615 --> 00:09:03,490
język programowania.

186
00:09:03,490 --> 00:09:05,281
A to znów przychodzi
z powrotem, dlaczego powiedziałem,

187
00:09:05,281 --> 00:09:10,610
może być bardzo trudne, aby dowiedzieć się,
JavaScript jako pierwszy programowania

188
00:09:10,610 --> 00:09:13,890
język, ponieważ nie
bardzo pasuje do konkretnego paradygmatu.

189
00:09:13,890 --> 00:09:16,430
>> C Z drugiej strony jest
funkcjonalny język programowania.

190
00:09:16,430 --> 00:09:22,270
Jeśli chcemy, funkcje są
rodzaj wielkiego bossa człowieka, prawda?

191
00:09:22,270 --> 00:09:24,410
Dyktować, co
dzieje się wszystko inne.

192
00:09:24,410 --> 00:09:26,600
Chcemy zmienić zmienne,
możemy wywoływać funkcje.

193
00:09:26,600 --> 00:09:28,220
Robimy rzeczy do funkcji.

194
00:09:28,220 --> 00:09:31,250
Przedmioty zamiast w sposób
języka obiektowego,

195
00:09:31,250 --> 00:09:35,937
obiekty rodzaj stać się gwiazdą i
funkcje stają się jakby drugorzędne.

196
00:09:35,937 --> 00:09:38,270
Ale to, co jest obiektem, co
Jest to pojęcie obiektu?

197
00:09:38,270 --> 00:09:40,880
Cóż, jeśli to pomoże, myślę
o tym w pierwszym rodzaju

198
00:09:40,880 --> 00:09:44,540
od jak struktura C lub struktury
że nauczyliśmy się wcześniej.

199
00:09:44,540 --> 00:09:47,430
W C, struktura zawiera
liczba pól,

200
00:09:47,430 --> 00:09:51,174
a może teraz może zacząć
zadzwoń do tych pól właściwości.

201
00:09:51,174 --> 00:09:53,590
Ale właściwości nigdy nie
stanąć na własnych, prawda?

202
00:09:53,590 --> 00:09:56,410
Jeśli I określają strukturę samochodu
tak z następujących dwóch

203
00:09:56,410 --> 00:10:00,750
pola lub właściwości, jeden an
całkowita za rok samochodu

204
00:10:00,750 --> 00:10:04,290
a kolejne 10 znaków
Łańcuch do modelu samochodu,

205
00:10:04,290 --> 00:10:07,150
Mogę powiedzieć coś takiego,
Mogę zadeklarować nową zmienną

206
00:10:07,150 --> 00:10:10,080
typu struct samochodu herbie.

207
00:10:10,080 --> 00:10:13,730
I wtedy mogę coś powiedzieć
jak herbie.year równa jeden tysięcy dziewięćset sześćdziesięciutrzy,

208
00:10:13,730 --> 00:10:15,850
i herbie.model równa Beetle.

209
00:10:15,850 --> 00:10:17,000
Dobrze.

210
00:10:17,000 --> 00:10:19,680
Używam pól w
Kontekst strukturze

211
00:10:19,680 --> 00:10:22,290
ale nigdy nie mogłem po prostu
powiedzieć coś takiego.

212
00:10:22,290 --> 00:10:22,790
Dobrze?

213
00:10:22,790 --> 00:10:26,836
Nie mogę korzystać z nazwy pola
niezależnie od konstrukcji.

214
00:10:26,836 --> 00:10:28,210
To coś w rodzaju podstawowej rzeczy.

215
00:10:28,210 --> 00:10:32,990
>> Więc pola jest
podstawą struktur C

216
00:10:32,990 --> 00:10:39,050
są bardzo podobne do właściwości bycia
fundamentalne znaczenie dla obiektów JavaScript.

217
00:10:39,050 --> 00:10:42,080
Ale co sprawia, że ​​ich
szczególnie interesujące

218
00:10:42,080 --> 00:10:46,230
jest to, że obiekty mogą również mieć co
nazywane są metody, które są naprawdę

219
00:10:46,230 --> 00:10:50,730
tylko wyobraźnia słowo funkcji
są właściwe do obiektu, jak również.

220
00:10:50,730 --> 00:10:55,340
Więc jest to funkcja, która może być tylko
nazywa się w ramach przedmiotu.

221
00:10:55,340 --> 00:10:59,200
Tylko obiekt, który został zdefiniowany
ta funkcja wewnątrz ITS,

222
00:10:59,200 --> 00:11:02,020
jeśli uważasz, że około
struktura, funkcja

223
00:11:02,020 --> 00:11:05,720
jest zdefiniowana wewnątrz tych definiowania
nawiasy klamrowe struktury.

224
00:11:05,720 --> 00:11:07,980
Więc to oznacza tylko coś
ze strukturą.

225
00:11:07,980 --> 00:11:10,960
I to jest coś w rodzaju tego, co robimy
tutaj z obiektów i metod.

226
00:11:10,960 --> 00:11:13,580
Jest to w zasadzie to, że jesteśmy
określanie funkcję

227
00:11:13,580 --> 00:11:16,670
ma sens tylko na zasadzie
dany obiekt, a więc

228
00:11:16,670 --> 00:11:19,440
nazwać sposobu przedmiotu.

229
00:11:19,440 --> 00:11:23,180
I nigdy nie możemy nazwać
Funkcja niezależna od obiektu,

230
00:11:23,180 --> 00:11:29,260
podobnie jak nie możemy powiedzieć, rok lub modelu
niezależna od struktury w C

231
00:11:29,260 --> 00:11:32,300
>> Programowania, tak funkcjonalne
paradygmaty wyglądać tak.

232
00:11:32,300 --> 00:11:35,450
Funkcji, a następnie, gdy mijamy
w obiekcie jako parametr.

233
00:11:35,450 --> 00:11:38,650
W programowania obiektowego
języków, ten rodzaj wystąpią

234
00:11:38,650 --> 00:11:43,464
odwrócone, i myślimy o
to tak, object.function.

235
00:11:43,464 --> 00:11:45,380
Więc to rodzaj tej kropki
Operator ponownie sugerując

236
00:11:45,380 --> 00:11:49,540
że jest to jakiś rodzaj nieruchomości
lub atrybut samego obiektu.

237
00:11:49,540 --> 00:11:53,240
Ale to, co obiekt
zorientowany język programowania

238
00:11:53,240 --> 00:11:57,150
może zrobić, aby funkcję
zadzwonić na metodzie, ponownie, co

239
00:11:57,150 --> 00:12:00,260
jest po prostu specjalne słowo dla funkcji
które jest nieodłącznym obiektu.

240
00:12:00,260 --> 00:12:03,440
To co, że
składnia może wyglądać.

241
00:12:03,440 --> 00:12:09,360
A więc zaczynamy widzieć niektórzy
W tym kontekście JavaScript.

242
00:12:09,360 --> 00:12:12,470
>> Można również pomyśleć o obiekcie
coś w rodzaju tablicy asocjacyjnej,

243
00:12:12,470 --> 00:12:14,160
których nie znamy z PHP.

244
00:12:14,160 --> 00:12:17,720
Pamiętaj tablica asocjacyjna pozwala
nam na pary wartość klucza, zamiast

245
00:12:17,720 --> 00:12:23,040
posiadania indeksy 0, jeden, dwa, trzy
i tak dalej, jak jesteśmy przyzwyczajeni z C

246
00:12:23,040 --> 00:12:23,940
tablice.

247
00:12:23,940 --> 00:12:27,472
Tablice asocjacyjne mogą map
słowa, takie jak w filmie, PHP,

248
00:12:27,472 --> 00:12:29,180
rozmawialiśmy o
polewy pizzy.

249
00:12:29,180 --> 00:12:31,180
I tak mieliśmy tablicę
zwane pizze, a my

250
00:12:31,180 --> 00:12:36,670
miał ser był kluczowy i $ 8.99 był
wartość, a następnie był kluczowym pepperoni,

251
00:12:36,670 --> 00:12:39,190
$ 9.99 była wartość, i tak dalej.

252
00:12:39,190 --> 00:12:43,300
I tak, możemy również pomyśleć o
obiekt rodzaj podobny do stowarzyszeniowej

253
00:12:43,300 --> 00:12:43,840
szyk.

254
00:12:43,840 --> 00:12:47,020
I tak ta składnia tutaj
by utworzyć nowy obiekt

255
00:12:47,020 --> 00:12:50,950
nazywa herbie z dwoma
Właściwości środku.

256
00:12:50,950 --> 00:12:57,310
Rok, który ma wartość 1963,
i model, który jest przypisany ciąg

257
00:12:57,310 --> 00:12:58,140
Chrząszcz.

258
00:12:58,140 --> 00:13:01,770
>> I tutaj odnotować, że używam
pojedyncze cudzysłowy w JavaScript.

259
00:13:01,770 --> 00:13:05,570
Możesz użyć pojedyncze lub podwójne cudzysłowy
kiedy mówisz strun.

260
00:13:05,570 --> 00:13:07,772
To tylko konwencjonalnie
zdarza się, że większość czasu

261
00:13:07,772 --> 00:13:10,230
kiedy piszesz JavaScript,
po prostu użyć apostrofów.

262
00:13:10,230 --> 00:13:15,050
Ale mogę użyć cudzysłowia tutaj, i
to byłoby perfekcyjnie, jak również.

263
00:13:15,050 --> 00:13:17,470
>> Tak, pamiętam, jak w
PHP mieliśmy tego pojęcia

264
00:13:17,470 --> 00:13:22,730
z pętli For Each, która nam pozwoli
do przechodzenia przez wszystkie wartości klucza

265
00:13:22,730 --> 00:13:25,270
pary asocjacyjną
tablica, bo

266
00:13:25,270 --> 00:13:29,050
nie ma tego zdolność do iterację
przez 0, jeden, dwa, trzy, cztery,

267
00:13:29,050 --> 00:13:30,710
i tak dalej?

268
00:13:30,710 --> 00:13:35,010
JavaScript ma coś bardzo podobnego,
ale to nie nazywa się dla każdej pętli,

269
00:13:35,010 --> 00:13:38,960
to się nazywa w pętli.

270
00:13:38,960 --> 00:13:42,890
Więc gdybym powiedział do mnie
tego, na klucz var w obiekcie,

271
00:13:42,890 --> 00:13:48,670
to jakby podobna do stwierdzenia,
dla każdego coś jako coś.

272
00:13:48,670 --> 00:13:53,850
Ale ja tu robię jest iteracji
przez wszystkie klucze mojego obiektu.

273
00:13:53,850 --> 00:13:56,070
Wewnątrz i kręcone
szelki tam, chciałbym

274
00:13:56,070 --> 00:14:03,410
używać obiektów klucz nawiasach kwadratowych odnieść
wartości w tym klucza lokalizacji.

275
00:14:03,410 --> 00:14:05,400
>> Alternatywnie istnieje
jeszcze inne podejście.

276
00:14:05,400 --> 00:14:10,880
Jeśli po prostu tylko dbają o
wartości, co mogę powiedzieć o klucz obiektu,

277
00:14:10,880 --> 00:14:12,360
i wystarczy użyć przycisku wewnątrz.

278
00:14:12,360 --> 00:14:17,240
Tak na klucz var w obiekcie, mam
używać nawiasów kwadratowych obiektu

279
00:14:17,240 --> 00:14:19,340
Klucz wewnątrz pętli.

280
00:14:19,340 --> 00:14:24,580
Aby uzyskać klucz var obiektu, mogę
wystarczy użyć przycisku wewnątrz pętli,

281
00:14:24,580 --> 00:14:29,040
bo jestem po prostu specjalnie
mówić o tam wartości.

282
00:14:29,040 --> 00:14:32,630
>> Więc być może bierze
spojrzeć na różnicę

283
00:14:32,630 --> 00:14:35,670
wystarczy, aby szybko pokazać,
Różnica między czterema

284
00:14:35,670 --> 00:14:40,730
i za razem z bardzo specyficznym
tablica, które tu mamy, tydzień tablica.

285
00:14:40,730 --> 00:14:43,616
Więc muszę znaleźć nową tablicę
że wypełnione siedmiu strunach,

286
00:14:43,616 --> 00:14:46,240
Poniedziałek wtorek środa,
Czwartek, piątek, sobota, niedziela.

287
00:14:46,240 --> 00:14:50,530
I chcę teraz iteracji
dzięki tej tablicy,

288
00:14:50,530 --> 00:14:53,090
drukowanie pewne informacje.

289
00:14:53,090 --> 00:14:58,780
Jeśli używam w pętli
wydrukować informacje,

290
00:14:58,780 --> 00:15:00,710
co myślicie mam zamiar dostać?

291
00:15:00,710 --> 00:15:01,710
Cóż, rzućmy okiem.

292
00:15:01,710 --> 00:15:05,300
I zanim się przeskoczyć
z okna mojej przeglądarki,

293
00:15:05,300 --> 00:15:08,090
po prostu wiem, że
console.log jest jakby jednym

294
00:15:08,090 --> 00:15:10,630
sposób robi druku F w JavaScript.

295
00:15:10,630 --> 00:15:12,040
Ale co to jest konsola?

296
00:15:12,040 --> 00:15:14,940
Dobrze, że to, co mamy zamiar
iść przyjrzeć się teraz.

297
00:15:14,940 --> 00:15:16,850
>> OK, więc wracamy tutaj
w oknie mojej przeglądarki,

298
00:15:16,850 --> 00:15:19,410
i mam zamiar otworzyć
do moich narzędzi programistycznych.

299
00:15:19,410 --> 00:15:22,290
Ponownie, jestem po prostu uderzając F12
otwarcie narzędzia programistyczne.

300
00:15:22,290 --> 00:15:25,670
I zauważ, że tu, w
top wybrałem konsolę.

301
00:15:25,670 --> 00:15:28,480
Jest to więc pojęcie
z konsoli dewelopera,

302
00:15:28,480 --> 00:15:30,500
i pozwoli nam
drukowania informacji na zewnątrz,

303
00:15:30,500 --> 00:15:33,000
coś jak terminal, ale
jak zobaczymy nieco później,

304
00:15:33,000 --> 00:15:37,720
możemy również wpisać informacje
współdziałać z naszej strony internetowej.

305
00:15:37,720 --> 00:15:42,320
Mam zamiar przybliżyć trochę tu,
i będę teraz kliknij w teście.

306
00:15:42,320 --> 00:15:45,230
I cztery w test-- nie będę
pokazać kod dla niego w tej chwili,

307
00:15:45,230 --> 00:15:47,479
ale dostaniesz go, jeśli
pobrać kod źródłowy, który

308
00:15:47,479 --> 00:15:50,380
wiąże się z tym video--
jest tak, że w pętli

309
00:15:50,380 --> 00:15:52,610
że widzieliśmy tylko
Drugi temu na slajdzie.

310
00:15:52,610 --> 00:15:54,810
>> Więc będę kliknięcie, że
przycisk, a tu,

311
00:15:54,810 --> 00:15:58,440
oto co jest drukowane w
Konsola, 0, jeden, dwa, trzy, cztery, pięć,

312
00:15:58,440 --> 00:15:58,940
sześć.

313
00:15:58,940 --> 00:16:02,490
Nie drukuje informacje
wewnątrz tych miejscach tablicy,

314
00:16:02,490 --> 00:16:05,180
dlatego, że zastosowano w pętli.

315
00:16:05,180 --> 00:16:10,670
I wewnątrz ciała pętli, I
po prostu wydrukować klucz klucz nie sprzeciwiają.

316
00:16:10,670 --> 00:16:18,600
Ale jeśli teraz wyczyścić konsolę, a ja
przełączyć się do testu, a cztery z testu

317
00:16:18,600 --> 00:16:22,500
Mówię używać do pętli
zamiast i wydrukować klucz,

318
00:16:22,500 --> 00:16:28,079
gdy klikam, że teraz jestem uzyskiwanie
Rzeczywiste elementy wewnątrz mojego obiektu

319
00:16:28,079 --> 00:16:29,120
czy moja tablica w tym przypadku.

320
00:16:29,120 --> 00:16:31,760
Moja tablica dni tygodnia.

321
00:16:31,760 --> 00:16:33,480
I drukowane poniedziałek,
Wtorek środa.

322
00:16:33,480 --> 00:16:36,930
Tak, że jest różnica między
W pętli for, które wypisuje

323
00:16:36,930 --> 00:16:43,410
tylko klucze, jeśli po prostu użyć klawisza
Wewnątrz korpusu pętli

324
00:16:43,410 --> 00:16:46,850
i do pętli, która drukuje
na wartości, jeśli używasz tylko

325
00:16:46,850 --> 00:16:48,870
Kluczem do wnętrza ciała pętli.

326
00:16:48,870 --> 00:16:52,380
>> Dobrze, jak możemy teraz zacząć
łączenia ciągów i może mieszać

327
00:16:52,380 --> 00:16:57,220
niektóre zmienne z interpolacją
jak byliśmy w stanie zrobić w PHP?

328
00:16:57,220 --> 00:16:59,410
Cóż, jesteśmy całkiem znajomo
z tego z PHP.

329
00:16:59,410 --> 00:17:04,109
To w jaki sposób to zrobić przy użyciu
kropka łączenia ciągów.

330
00:17:04,109 --> 00:17:06,260
W JavaScript, chociaż,
faktycznie użyć czegoś

331
00:17:06,260 --> 00:17:09,290
zwany operator plus, które
to może nawet trochę więcej

332
00:17:09,290 --> 00:17:10,470
Intuicyjny, prawda?

333
00:17:10,470 --> 00:17:12,609
Dodajemy kilka
strun razem.

334
00:17:12,609 --> 00:17:14,520
Warto więc wrócić
i zobaczyć, co to

335
00:17:14,520 --> 00:17:18,693
będzie drukować, jeśli chcemy, aby wydrukować
wszystkie informacje, w tym tygodniu tablicy.

336
00:17:18,693 --> 00:17:20,859
W porządku, więc w ramach tutaj
w ramach łańcuchów znaków,

337
00:17:20,859 --> 00:17:24,822
Mam dwie opcje, budynek ciąg
V1 i V2 to ciąg budynków.

338
00:17:24,822 --> 00:17:26,530
I zobaczymy, dlaczego
trzeba V2 w drugim.

339
00:17:26,530 --> 00:17:28,610
Ale będę kliknij
Ciąg budynku V1, które

340
00:17:28,610 --> 00:17:30,360
jest kod byliśmy
po prostu przyjrzeć się,

341
00:17:30,360 --> 00:17:32,980
console.log z wszystkich plusów.

342
00:17:32,980 --> 00:17:35,910
Zobaczymy, czy tym wydruków
z czego oczekujemy.

343
00:17:35,910 --> 00:17:39,939
>> Poniedziałek jest dniem numer 01 tygodnia,
Wtorek jest dzień numer 11 tygodnia.

344
00:17:39,939 --> 00:17:41,730
Cóż, co starałem
zrobić tam dostać

345
00:17:41,730 --> 00:17:46,280
to wydrukować poniedziałek jest liczba dni
jeden, wtorek jest dzień numer dwa.

346
00:17:46,280 --> 00:17:50,140
Ale wydaje się, że jestem
Zawsze wydrukowanie jednego.

347
00:17:50,140 --> 00:17:51,260
Cóż, to dlaczego?

348
00:17:51,260 --> 00:17:55,600
Cóż, okazuje się, przyjrzeć
w tym małym fragmencie kodu tutaj.

349
00:17:55,600 --> 00:18:00,160
Zauważ, że używamy plus
operator w dwóch kontekstach.

350
00:18:00,160 --> 00:18:03,221
>> I tak oto, gdzie być może rzeczy
że mamy rodzaju mówili,

351
00:18:03,221 --> 00:18:03,970
Och, to jest tak wielki.

352
00:18:03,970 --> 00:18:05,910
My nie zajmujemy się już typów danych.

353
00:18:05,910 --> 00:18:08,220
Ale tu, gdzie fakt,
że tracimy typy danych

354
00:18:08,220 --> 00:18:10,960
w rzeczywistości może być nieco
problem dla nas.

355
00:18:10,960 --> 00:18:16,260
Teraz, operator Plus służy do
łączenia ciągów i dodać numery

356
00:18:16,260 --> 00:18:19,550
razem JavaScript ma
aby jego najdokładniej

357
00:18:19,550 --> 00:18:22,030
co do tego, co chcę to zrobić dla mnie.

358
00:18:22,030 --> 00:18:23,900
I w tym przypadku, to domyślacie źle.

359
00:18:23,900 --> 00:18:29,340
Po prostu łączone dni, co byłoby
0, jeden, dwa, trzy, cztery, pięć lub sześć

360
00:18:29,340 --> 00:18:32,060
a potem po prostu łączone
które następnie łączone jeden i.

361
00:18:32,060 --> 00:18:35,020
To faktycznie nie dodać je razem.

362
00:18:35,020 --> 00:18:37,320
I tak te języki,
PHP i JavaScript,

363
00:18:37,320 --> 00:18:39,196
że abstrahuje się
to pojęcie typów,

364
00:18:39,196 --> 00:18:40,820
nie masz do czynienia z nim już.

365
00:18:40,820 --> 00:18:43,600
Nie mają jeszcze typy pod maską.

366
00:18:43,600 --> 00:18:46,780
I możemy, w sytuacjach,
w ten sposób, wykorzystać ten fakt

367
00:18:46,780 --> 00:18:49,240
mówiąc coś
jak może być to, co

368
00:18:49,240 --> 00:18:53,210
mówi JavaScript, przez
sposób traktują to jako liczba całkowita,

369
00:18:53,210 --> 00:18:57,100
nie traktować go jako ciąg znaków, nawet
choć jesteśmy zmieszanie sznurki

370
00:18:57,100 --> 00:18:58,940
i całkowite tutaj.

371
00:18:58,940 --> 00:19:02,204
>> To tylko jedna z tych rzeczy
że wydaje się tak wielka, w kontekście

372
00:19:02,204 --> 00:19:04,120
że nie mamy do
już do czynienia z typami,

373
00:19:04,120 --> 00:19:05,828
ale czasem będziesz
uruchomić w sytuacji

374
00:19:05,828 --> 00:19:09,110
dokładnie tak, jak to, gdzie fakt, że
nie masz kontroli nad typów

375
00:19:09,110 --> 00:19:11,220
może obrócić się przeciwko tobie
jeśli nie jesteś ostrożny.

376
00:19:11,220 --> 00:19:18,285
I tak, jeśli wracamy na IDE, jestem
zamierza usunąć konsolę ponownie,

377
00:19:18,285 --> 00:19:20,660
i mam zamiar kliknąć ciąg
Budynek wersja dwa, które

378
00:19:20,660 --> 00:19:23,052
gdzie używam tego parse int funkcji.

379
00:19:23,052 --> 00:19:25,260
Teraz jest drukowanie
informacje, że spodziewam.

380
00:19:25,260 --> 00:19:29,330
Numer jeden dzień w poniedziałek, wtorek
Jest dni liczba dwóch, i tak dalej.

381
00:19:29,330 --> 00:19:31,170
>> Więc porozmawiajmy o funkcji ponownie.

382
00:19:31,170 --> 00:19:34,790
Obiecałam, że mówimy o anonimowość
funkcje, a teraz kontekst, że

383
00:19:34,790 --> 00:19:36,360
nadeszła.

384
00:19:36,360 --> 00:19:39,980
Zanim więc zrobić, porozmawiajmy ponownie
o macierzach tylko na sekundę.

385
00:19:39,980 --> 00:19:42,120
Więc tablice są specjalne
Przypadek obiektu.

386
00:19:42,120 --> 00:19:45,180
W rzeczywistości, wszystko w
JavaScript jest rzeczywiście obiekt.

387
00:19:45,180 --> 00:19:47,190
Więc funkcje są
Szczególnym przypadkiem obiektu,

388
00:19:47,190 --> 00:19:49,770
liczby całkowite są specjalnym
Sprawa obiektu,

389
00:19:49,770 --> 00:19:52,152
ale tablice specjalnie
mają szereg metod.

390
00:19:52,152 --> 00:19:55,110
Pamiętaj, dlatego, że są przedmioty,
mogą one mieć właściwości i metody.

391
00:19:55,110 --> 00:19:58,600
Mają szereg metod
mogą być stosowane do tych przedmiotów.

392
00:19:58,600 --> 00:20:01,197
Jest to metoda o nazwie
rozmiar, array.size,

393
00:20:01,197 --> 00:20:03,030
który powróci do
Ci jak można się spodziewać

394
00:20:03,030 --> 00:20:05,120
liczba elementów w tablicy.

395
00:20:05,120 --> 00:20:08,480
Array.pop, coś jak
nasze pojęcie pstrykaliśmy

396
00:20:08,480 --> 00:20:11,110
stosu, jeśli przypomnieć
z naszej stosy wideo

397
00:20:11,110 --> 00:20:13,810
usuwa ostatni element tablicy.

398
00:20:13,810 --> 00:20:17,110
Array.push dodaje nowy element
do końca tablicy.

399
00:20:17,110 --> 00:20:20,910
Array.shift jest rodzajem
jak DQ, to spawów się

400
00:20:20,910 --> 00:20:23,610
to pierwszy element tablicy.

401
00:20:23,610 --> 00:20:27,549
>> Ale jest też inny szczególny
Metoda tablicy nazywa mapę.

402
00:20:27,549 --> 00:20:29,340
I to jest swego rodzaju
ciekawa koncepcja.

403
00:20:29,340 --> 00:20:30,930
Więc co jest idea mapie?

404
00:20:30,930 --> 00:20:33,880
Będziesz w rzeczywistości zobaczyć
w kilku innych językach

405
00:20:33,880 --> 00:20:38,550
a my nie mówimy o
rodzaj kartografów map tutaj,

406
00:20:38,550 --> 00:20:41,480
mówimy o funkcję mapowania.

407
00:20:41,480 --> 00:20:44,110
W kontekście jesteśmy
mówić o tutaj, mapa

408
00:20:44,110 --> 00:20:47,950
Jest to specjalny nam praca
może wykonywać na tablicy

409
00:20:47,950 --> 00:20:51,630
do zastosowania szczególną funkcję
na każdy element tablicy.

410
00:20:51,630 --> 00:20:55,190
i tak powiedzielibyśmy w
w tym przypadku, może array.map,

411
00:20:55,190 --> 00:21:00,330
i wewnątrz niego, przekazujemy
na mapie jest funkcją, że chcemy

412
00:21:00,330 --> 00:21:02,430
do stosowania do każdego elementu.

413
00:21:02,430 --> 00:21:07,299
Więc jest to rodzaj analogiczne do korzystania z
pętla iteracyjne nad każdym elementem

414
00:21:07,299 --> 00:21:09,340
i zastosowanie konkretnego
funkcję do każdego elementu

415
00:21:09,340 --> 00:21:14,830
Ten właśnie JavaScript został zbudowany w
Pojęcie odwzorowania, które mogą być stosowane.

416
00:21:14,830 --> 00:21:19,700
I to jest wielki kontekst do
mówić o funkcji anonimowej.

417
00:21:19,700 --> 00:21:22,370
>> Więc powiedzmy, że mamy
ta tablica liczb całkowitych.

418
00:21:22,370 --> 00:21:25,370
To się nazywa Nums, i to ma pięć
rzeczy w nim, jeden, dwa, trzy, cztery,

419
00:21:25,370 --> 00:21:26,410
pięciu.

420
00:21:26,410 --> 00:21:30,620
Teraz chcę map niektóre
Funkcja na tej tablicy.

421
00:21:30,620 --> 00:21:34,337
Chcę mieć funkcja zastosowanie
dla każdego elementu macierzy.

422
00:21:34,337 --> 00:21:37,420
Cóż, powiedzmy, że to, co chcę
zrobić, to po prostu podwoić wszystkie elementy.

423
00:21:37,420 --> 00:21:42,520
Co mogę zrobić, to użyć pętli
dla var I jest równa 0, to jest mniej niż

424
00:21:42,520 --> 00:21:47,390
lub równy 4, I plus plus, oraz
następnie dwukrotnie każdy numer.

425
00:21:47,390 --> 00:21:49,580
Ale mogę też zrobić coś takiego.

426
00:21:49,580 --> 00:21:53,420
Mogę powiedzieć Nums dawniej
jeden dwa trzy cztery pięć,

427
00:21:53,420 --> 00:21:58,310
Teraz jednak chciałbym do
zastosowanie mapowania na tej tablicy

428
00:21:58,310 --> 00:22:00,400
gdzie będę taki jak ty
podwoić każdy numer.

429
00:22:00,400 --> 00:22:02,540
I to jest dokładnie
co sie tu dzieje.

430
00:22:02,540 --> 00:22:06,870
Zauważmy jednak, co mi przechodzi
jako argument do map.

431
00:22:06,870 --> 00:22:09,080
To jest anonimowa funkcja.

432
00:22:09,080 --> 00:22:11,140
I zauważyć, że nie dały
funkcja ta nazwa,

433
00:22:11,140 --> 00:22:13,290
Mam tylko dałeś mu listę parametrów.

434
00:22:13,290 --> 00:22:16,370
I tak to jest przykład
anonimowego funkcji.

435
00:22:16,370 --> 00:22:21,270
>> Zazwyczaj nie nazwałbym tego
Funkcja poza kontekstem mapie.

436
00:22:21,270 --> 00:22:24,110
Jesteśmy określając ją jako parametr
mapować, i tak naprawdę nie

437
00:22:24,110 --> 00:22:27,910
trzeba mieć nazwę dla niego, jeśli
Jedyną rzeczą, która dba o to mapa

438
00:22:27,910 --> 00:22:30,339
i jest to zdefiniowane w prawo
tam w środku mapy.

439
00:22:30,339 --> 00:22:31,880
I tak to jest anonimowa funkcja.

440
00:22:31,880 --> 00:22:34,680
Nie byliśmy w stanie
to zrobić wcześniej.

441
00:22:34,680 --> 00:22:38,400
Mapa niektórych funkcji, które
przyjmuje jeden parametr, num,

442
00:22:38,400 --> 00:22:41,890
i to, co robi, że funkcja
jest powrót Num razy 2.

443
00:22:41,890 --> 00:22:45,330
I tak, po tym
mapowania został zastosowany,

444
00:22:45,330 --> 00:22:50,090
to co teraz Nums wygląd
jak, dwa, cztery, sześć, osiem, dziesięć.

445
00:22:50,090 --> 00:22:52,090
A my pop do mojego
okno przeglądarki i po prostu

446
00:22:52,090 --> 00:22:55,240
spójrz na to
bardzo szybko, jak dobrze.

447
00:22:55,240 --> 00:22:58,000
>> Więc mam tu inny przycisk
na mojej stronie internetowej o nazwie dwukrotnie.

448
00:22:58,000 --> 00:23:03,570
A kiedy kliknij dwukrotnie, i to mówi
mnie, zanim to był jeden, dwa, trzy, cztery,

449
00:23:03,570 --> 00:23:07,250
pięć po dwa, cztery, sześć, osiem, 10.

450
00:23:07,250 --> 00:23:11,930
A jeśli wrócę i kliknij dwukrotnie
raz, dwa, cztery, sześć, osiem, 10.

451
00:23:11,930 --> 00:23:17,400
A potem, cztery,
Osiem, 12, 16, i 20.

452
00:23:17,400 --> 00:23:20,440
I co ja robię w tej funkcji?

453
00:23:20,440 --> 00:23:25,210
Cóż, jeśli tylko pojawi się na IDE, oraz
I wyciągnąć moją anonimową funkcję, tutaj

454
00:23:25,210 --> 00:23:28,780
na linii siedmiu do 13, jestem
robi trochę fantazyjne pracy tutaj,

455
00:23:28,780 --> 00:23:32,240
ale ja tylko drukowanie
co jest obecnie w tablicy.

456
00:23:32,240 --> 00:23:36,580
Następnie na linii 16, 17,
i 18, nie moja mapa.

457
00:23:36,580 --> 00:23:40,930
To gdzie ja stosowania tego podwojenie
Funkcja do każdego elementu.

458
00:23:40,930 --> 00:23:43,530
A potem trochę dalej w dół,
Jestem po prostu robi to samo

459
00:23:43,530 --> 00:23:46,640
Robiłem wcześniej, lecz teraz jestem
drukowanie zawartości tablicy

460
00:23:46,640 --> 00:23:48,167
potem.

461
00:23:48,167 --> 00:23:50,500
Ale to wszystko zrobiłem tutaj jest
wystarczy użyć anonimową funkcję

462
00:23:50,500 --> 00:23:53,640
do mapowania w ramach całej tablicy.

463
00:23:53,640 --> 00:23:58,466
>> Więc jeszcze jeden duży temat rozmawiać w
JavaScript jest pojęcie zdarzenia.

464
00:23:58,466 --> 00:24:01,590
Zdarzenie to coś, co po prostu się dzieje
gdy użytkownik wchodzi w interakcję z sieci

465
00:24:01,590 --> 00:24:04,715
Strona, więc może coś się kliknąć,
a może zakończeniu ładowania strony,

466
00:24:04,715 --> 00:24:07,200
a może oni przeniesione
ich myszy nad czymś,

467
00:24:07,200 --> 00:24:09,290
lub ich wpisaniu czegoś
w polu wprowadzania.

468
00:24:09,290 --> 00:24:14,260
Wszystkie te rzeczy są wydarzenia
które występują na naszej stronie internetowej.

469
00:24:14,260 --> 00:24:17,460
I JavaScript ma
Możliwość wspierania coś

470
00:24:17,460 --> 00:24:21,760
nazywany obsługi zdarzeń, które
jest funkcja zwrotna, że

471
00:24:21,760 --> 00:24:23,329
reaguje na zdarzenia html.

472
00:24:23,329 --> 00:24:24,620
A co to jest funkcja zwrotna?

473
00:24:24,620 --> 00:24:27,328
Cóż, to na ogół tylko kolejny
nazwa dla funkcji anonimowej.

474
00:24:27,328 --> 00:24:30,170
Jest to funkcja, która
reaguje na zdarzenie.

475
00:24:30,170 --> 00:24:34,130
I tu dochodzimy do
Pomysł wiązania pewnych funkcji

476
00:24:34,130 --> 00:24:38,060
do konkretnego atrybutu html.

477
00:24:38,060 --> 00:24:41,420
Większość elementów html mają
Wsparcie dla atrybutu

478
00:24:41,420 --> 00:24:45,170
że nie mówić o w html
wideo czegoś takiego na kliknięcie

479
00:24:45,170 --> 00:24:50,540
lub przy aktywowaniu lub na obciążenia,
wszystkie z tych zdarzeń

480
00:24:50,540 --> 00:24:53,120
które można następnie napisać funkcje
że umowa z tych wydarzeń

481
00:24:53,120 --> 00:24:56,090
gdy te zdarzenia
wystąpić na swojej stronie internetowej.

482
00:24:56,090 --> 00:24:59,170
>> I tak może twój html
wygląda tak.

483
00:24:59,170 --> 00:25:02,240
I mam tutaj dwa przyciski,
jeden przycisk i przycisk dwa,

484
00:25:02,240 --> 00:25:04,620
i tu mam obecnie
zdefiniowane nic,

485
00:25:04,620 --> 00:25:11,170
ale to jest, gdy atrybut
kliknięcie jest najwyraźniej częścią mojego tagu html.

486
00:25:11,170 --> 00:25:15,220
Więc najwyraźniej kiedy zdefiniować, co jest
dzieje się wewnątrz tego atrybutu,

487
00:25:15,220 --> 00:25:18,590
to będzie jakiś JavaScript
Funkcja, która reaguje na zdarzenie

488
00:25:18,590 --> 00:25:24,360
przypuszczalnie z kliknięciu na
Przycisk przycisk jeden lub dwa.

489
00:25:24,360 --> 00:25:28,580
>> Co to za fajne jest to, my
może napisać ogólny obsługi zdarzeń.

490
00:25:28,580 --> 00:25:32,370
I tego zdarzenia będzie
utworzyć obiekt zdarzenia.

491
00:25:32,370 --> 00:25:37,000
A obiekt zdarzenia powie nam
który z dwóch przycisków został kliknięty.

492
00:25:37,000 --> 00:25:38,064
Teraz, jak to działa?

493
00:25:38,064 --> 00:25:39,730
Cóż, może to wyglądać mniej więcej tak.

494
00:25:39,730 --> 00:25:44,860
Więc będziemy najpierw zdefiniować nasze przyciski
mieć odpowiedź na oddzwonienie

495
00:25:44,860 --> 00:25:47,470
Funkcja, która będzie nazywana
po kliknięciu przycisku,

496
00:25:47,470 --> 00:25:49,520
zadzwonimy alert zdarzeń nazwę.

497
00:25:49,520 --> 00:25:53,320
I zawiadomienia w obu przypadkach których jesteśmy
przekazując w ten parametr zdarzenia.

498
00:25:53,320 --> 00:25:55,460
Tak nazywamy tę funkcję
lub gdy funkcja ta

499
00:25:55,460 --> 00:26:00,330
jest wyzwalany przez zaistnienia zdarzenia,
to będzie stworzyć ten obiekt zdarzenia

500
00:26:00,330 --> 00:26:03,300
i przekazać ją jako
Parametr ostrzega nazwę.

501
00:26:03,300 --> 00:26:07,270
I że obiekt zdarzenia jest
będzie zawierać informacje

502
00:26:07,270 --> 00:26:09,800
o który przycisk został kliknięty.

503
00:26:09,800 --> 00:26:11,580
A jak to zrobić?

504
00:26:11,580 --> 00:26:13,654
Cóż, może to wyglądać mniej więcej tak.

505
00:26:13,654 --> 00:26:15,570
Więc teraz, w moim oddzielne
Plik JavaScript, mógłbym

506
00:26:15,570 --> 00:26:17,420
znaleźć tego
Funkcja ostrzegania Nazwa, która

507
00:26:17,420 --> 00:26:19,500
ponownie przyjmuje ten parametr zdarzenia.

508
00:26:19,500 --> 00:26:24,640
I to tutaj jest, gdzie jestem wykrywania
który przycisk został wyzwolony,

509
00:26:24,640 --> 00:26:28,100
var spustu wynosi imprezę
Element źródłowy kropka.

510
00:26:28,100 --> 00:26:33,150
Co było źródłem, które stworzył
Ten obiekt zdarzenia, który został przekazany w?

511
00:26:33,150 --> 00:26:36,390
Czy to był jeden przycisk czy był to przycisk dwa?

512
00:26:36,390 --> 00:26:40,710
>> I to tutaj wszystko robię to
drukowanie trigger.innerhtml.

513
00:26:40,710 --> 00:26:43,860
No cóż, w tym przypadku, w tym
Kontekst, trigger.innerhtml

514
00:26:43,860 --> 00:26:45,940
jest tylko to, co jest napisane na przycisku.

515
00:26:45,940 --> 00:26:48,830
Tak się składa, jeśli skaczemy
powrót na sekundę, które

516
00:26:48,830 --> 00:26:51,670
za co w między tymi tagami przycisków.

517
00:26:51,670 --> 00:26:54,150
To będzie jeden przycisk lub przycisk dwa.

518
00:26:54,150 --> 00:26:57,320
I rzućmy okiem na
jak to będzie obsługi zdarzeń

519
00:26:57,320 --> 00:27:01,080
wyglądać, gdybyśmy mieli to działa w praktyce.

520
00:27:01,080 --> 00:27:03,850
>> Więc przede wszystkim, masz
otworzyły events.js,

521
00:27:03,850 --> 00:27:06,517
które jest plik JavaScript, gdzie
Mam zdefiniowane tej funkcji.

522
00:27:06,517 --> 00:27:08,558
I jak widać, jest to
prawie dokładnie to, co

523
00:27:08,558 --> 00:27:10,230
właśnie zobaczyłem na slajdzie drugi temu.

524
00:27:10,230 --> 00:27:14,890
I pójdę ponad do
Strona główna używaliśmy.

525
00:27:14,890 --> 00:27:17,660
I tu mam przycisk
jeden przycisk i dwa.

526
00:27:17,660 --> 00:27:19,820
A ja kliknąć jeden przycisk.

527
00:27:19,820 --> 00:27:23,930
Kliknąłeś przycisk jeden, jeśli Ciebie
widać tu, w pogotowiu.

528
00:27:23,930 --> 00:27:25,810
OK.

529
00:27:25,810 --> 00:27:28,980
Kliknij przycisk dwa, ci
kliknięciu na przycisk dwa.

530
00:27:28,980 --> 00:27:32,150
>> Więc oba przyciski mają
samo wywołanie funkcji, prawda?

531
00:27:32,150 --> 00:27:35,840
Oboje byli alert Nazwa
wydarzenie, ale to obiekt zdarzenia

532
00:27:35,840 --> 00:27:41,900
które zostanie utworzone, gdy klikamy na
mówi nam, który przycisk został kliknięty.

533
00:27:41,900 --> 00:27:44,650
Nie trzeba pisać dwóch oddzielnych
funkcje lub umowa o konieczności

534
00:27:44,650 --> 00:27:46,470
do przekazania żadnych dodatkowych informacji.

535
00:27:46,470 --> 00:27:48,220
My tylko opierając się na
co JavaScript będzie

536
00:27:48,220 --> 00:27:53,772
zrobić dla nas, która jest stworzenie, które
rodzaj obiektu zdarzenia w naszym imieniu.

537
00:27:53,772 --> 00:27:56,730
Jest dużo więcej do JavaScriptu niż
co omówiliśmy w tym filmie,

538
00:27:56,730 --> 00:27:58,521
ale o nich
fundamentalna powinna cię

539
00:27:58,521 --> 00:28:00,690
dość długi sposoby
uczenia się wszystko, co będzie

540
00:28:00,690 --> 00:28:04,030
musisz wiedzieć o tym
ciekawy język.

541
00:28:04,030 --> 00:28:05,000
Jestem Doug Lloyd.

542
00:28:05,000 --> 00:28:07,010
To CS50.

543
00:28:07,010 --> 00:28:09,181