1
00:00:00,000 --> 00:00:03,840
>> [MUSIC PLAYING]

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

3
00:00:05,770 --> 00:00:08,690
>> Doug LLOYD: Jadi sekarang kita sudah tua
pro pada pemrograman web, kan?

4
00:00:08,690 --> 00:00:12,140
Dan kita telah membahas beberapa
bahasa dalam video individu.

5
00:00:12,140 --> 00:00:14,690
Dan sekarang mari kita lakukan satu lagi, JavaScript.

6
00:00:14,690 --> 00:00:17,370
>> Pertama kabar baik, JavaScript
adalah pemrograman modern

7
00:00:17,370 --> 00:00:21,410
bahasa seperti PHP yang
sintaks berasal dari C,

8
00:00:21,410 --> 00:00:22,830
jadi itu adalah tempat yang baik untuk memulai.

9
00:00:22,830 --> 00:00:25,880
Ini tentang setua PHP, juga,
yang telah sekitar 20 tahun.

10
00:00:25,880 --> 00:00:28,600
Itu diciptakan sekitar
waktu yang sama seperti PHP.

11
00:00:28,600 --> 00:00:32,240
Dan JavaScript sebenarnya cukup
mendasar untuk pengalaman pengguna

12
00:00:32,240 --> 00:00:32,740
dari web.

13
00:00:32,740 --> 00:00:34,448
Bahkan, ada
tiga bahasa yang saya

14
00:00:34,448 --> 00:00:38,480
akan mengatakan semacam membentuk
pengalaman pengguna berinteraksi

15
00:00:38,480 --> 00:00:42,650
dengan website, html,
css, dan JavaScript.

16
00:00:42,650 --> 00:00:46,030
Dan jadi sekarang mari kita bicara
sedikit tentang JavaScript.

17
00:00:46,030 --> 00:00:50,301
>> Kabar buruk, meskipun, dengan JavaScript adalah
bahwa ia menetapkan banyak aturan untuk dirinya sendiri,

18
00:00:50,301 --> 00:00:51,300
dan kemudian istirahat mereka.

19
00:00:51,300 --> 00:00:54,010
Dan JavaScript sebenarnya dapat
jenis menantang untuk belajar,

20
00:00:54,010 --> 00:00:57,000
karena itu tidak seperti C dan
PHP, yang sangat terstruktur

21
00:00:57,000 --> 00:01:00,270
dan memiliki aturan yang sangat kaku
untuk bagaimana hal bisa bekerja.

22
00:01:00,270 --> 00:01:03,690
JavaScript memiliki jenis
dari mendapatkan begitu fleksibel

23
00:01:03,690 --> 00:01:06,650
bahwa mungkin hal-hal yang tidak akan
bekerja dengan cara kita mengharapkan mereka untuk,

24
00:01:06,650 --> 00:01:09,830
dan mungkin kita benar-benar tidak bisa belajar
bahasa pemrograman pertama kami

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

26
00:01:10,769 --> 00:01:12,810
Jadi mungkin karena tidak
mengatur sendiri aturan apapun,

27
00:01:12,810 --> 00:01:15,754
dan itu tidak benar-benar
menegakkan kebiasaan coding yang baik.

28
00:01:15,754 --> 00:01:18,170
Tapi sekarang kita sudah mudah-mudahan dikembangkan
beberapa coding kebiasaan baik,

29
00:01:18,170 --> 00:01:21,470
dan jadi kita bisa mulai untuk terjun
dalam JavaScript sedikit.

30
00:01:21,470 --> 00:01:25,750
>> Untuk menulis JavaScript, mirip dengan pembukaan
up file C dengan C ekstensi dot

31
00:01:25,750 --> 00:01:29,770
atau file PHP dengan ekstensi dot PHP,
semua yang perlu kita lakukan adalah membuka file

32
00:01:29,770 --> 00:01:31,764
dengan ekstensi file dot js.

33
00:01:31,764 --> 00:01:34,430
Kita tidak perlu untuk memiliki kerusakan khusus
pembatas seperti yang kami lakukan di PHP.

34
00:01:34,430 --> 00:01:36,750
Itu semacam sudut
braket tanda tanya PHP

35
00:01:36,750 --> 00:01:40,300
bahwa kita terbiasa itu, cara
kami memberitahu browser kita bahwa apa yang kita miliki adalah

36
00:01:40,300 --> 00:01:43,502
JavaScript adalah dengan termasuk
dalam sebuah tag html,

37
00:01:43,502 --> 00:01:46,210
dan kita akan melihat sedikit tentang
bagaimana melakukan itu hanya sesaat.

38
00:01:46,210 --> 00:01:48,210
>> Hal lain yang membuat
JavaScript yang berbeda,

39
00:01:48,210 --> 00:01:50,580
meskipun, adalah bahwa ia berjalan sisi klien.

40
00:01:50,580 --> 00:01:53,430
Jadi ingat dengan PHP yang
kita tidak pernah bisa benar-benar melihat

41
00:01:53,430 --> 00:01:57,041
PHP yang digarisbawahi website.

42
00:01:57,041 --> 00:01:59,040
Jika kita pernah dilihat
sumber halaman, kita hanya akan

43
00:01:59,040 --> 00:02:02,830
melihat html yang
dihasilkan oleh PHP itu.

44
00:02:02,830 --> 00:02:04,900
Tapi JavaScript berjalan sisi klien.

45
00:02:04,900 --> 00:02:06,710
Anda JavaScript berjalan pada komputer Anda.

46
00:02:06,710 --> 00:02:09,050
Dan itulah mengapa Anda dapat melakukan
hal seperti menambah blocker.

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

48
00:02:09,550 --> 00:02:12,704
Memblokir iklan biasanya dilakukan oleh
membunuh semua JavaScript

49
00:02:12,704 --> 00:02:14,370
yang berjalan pada situs web tertentu.

50
00:02:14,370 --> 00:02:19,000
Dan karena itu harus
berjalan di sisi mesin klien Anda,

51
00:02:19,000 --> 00:02:21,910
Anda hanya dapat menghentikan
JavaScript untuk menjalankan sepenuhnya.

52
00:02:21,910 --> 00:02:27,030
Itu juga berarti bahwa ketika Anda menggunakan
website yang mencakup JavaScript,

53
00:02:27,030 --> 00:02:32,450
Anda harus mengirim sumber JavaScript
kode sebagai bagian dari respon http Anda

54
00:02:32,450 --> 00:02:34,159
untuk klien ketika mereka memintanya.

55
00:02:34,159 --> 00:02:35,950
Dan sehingga Anda tidak mungkin
ingin menggunakan JavaScript

56
00:02:35,950 --> 00:02:38,395
melakukan hal-hal yang benar-benar sensitif
seperti informasi lewat

57
00:02:38,395 --> 00:02:41,020
tentang sandi pengguna 'kembali dan
sebagainya, karena mereka benar-benar

58
00:02:41,020 --> 00:02:45,610
akan menerima semua kode sumber,
bukan hanya html yang dihasilkan,

59
00:02:45,610 --> 00:02:49,030
seperti akan menjadi kasus dengan mengatakan PHP.

60
00:02:49,030 --> 00:02:51,620
>> Jadi bagaimana kita termasuk JavaScript
di html kita untuk memulai dengan?

61
00:02:51,620 --> 00:02:54,520
Nah, mirip dengan CSS, sebenarnya,
adalah semacam bagaimana kita melakukannya di sini.

62
00:02:54,520 --> 00:02:56,190
Dengan CSS kita memiliki tag gaya.

63
00:02:56,190 --> 00:03:00,760
Dan dalam tag gaya,
kita dapat mendefinisikan sebuah style sheet CSS.

64
00:03:00,760 --> 00:03:03,450
Demikian pula dengan JavaScript
dapat kita membuka tag script,

65
00:03:03,450 --> 00:03:06,660
tag html lain kita tidak
berbicara tentang dalam video html kita,

66
00:03:06,660 --> 00:03:09,720
dan menulis JavaScript di
antara tag script.

67
00:03:09,720 --> 00:03:13,960
Juga meskipun, seperti CSS, kita
bisa link di luar file CSS

68
00:03:13,960 --> 00:03:15,900
dan menarik mereka ke dalam program kami seperti itu.

69
00:03:15,900 --> 00:03:18,280
Dengan CSS kita juga bisa,
permisi, dengan JavaScript

70
00:03:18,280 --> 00:03:23,240
kami juga dapat menentukan sumber
atribut dari tag script

71
00:03:23,240 --> 00:03:25,720
link di JavaScript
secara terpisah, sehingga Anda tidak

72
00:03:25,720 --> 00:03:27,680
harus menulis dalam
antara tag script, kita

73
00:03:27,680 --> 00:03:29,600
dapat link dalam menggunakan
bahwa tag script juga.

74
00:03:29,600 --> 00:03:33,230
Dan seperti halnya dengan kasus dengan CSS mana
kami merekomendasikan bahwa itu mungkin

75
00:03:33,230 --> 00:03:36,090
dalam kepentingan terbaik Anda untuk menulis
CSS Anda dalam file terpisah dalam kasus

76
00:03:36,090 --> 00:03:38,500
Anda perlu mengubah itu,
sama kita merekomendasikan

77
00:03:38,500 --> 00:03:40,720
yang Anda tulis Anda
JavaScript dalam file terpisah

78
00:03:40,720 --> 00:03:45,460
dan menggunakan sumber tag script
atribut untuk mengikat Anda JavaScript

79
00:03:45,460 --> 00:03:49,520
ke html Anda, halaman web Anda.

80
00:03:49,520 --> 00:03:52,610
>> Variabel Jadi JavaScript, kita akan
mulai berbicara tentang sintaks di sini.

81
00:03:52,610 --> 00:03:53,600
Dan kita akan pergi melalui
semacam ini dengan cepat,

82
00:03:53,600 --> 00:03:56,640
karena kita sudah melakukan ini di PHP, sehingga
ini semua harus cukup familiar.

83
00:03:56,640 --> 00:03:59,490
Jadi variabel dalam JavaScript adalah
sangat mirip dengan PHP variabel.

84
00:03:59,490 --> 00:04:03,270
Tidak ada jenis specifier, dan
ketika Anda memperkenalkan sebuah variabel,

85
00:04:03,270 --> 00:04:05,070
Anda awalan dengan kata kunci var.

86
00:04:05,070 --> 00:04:07,750
Dalam PHP kita akan melakukan sesuatu
seperti ini, tanda dolar x.

87
00:04:07,750 --> 00:04:09,950
Itulah cara kita ditunjukkan
variabel, tapi tidak ada, kita

88
00:04:09,950 --> 00:04:12,060
tidak menyebutkan jenis
variabel sama sekali.

89
00:04:12,060 --> 00:04:15,124
Kami akan mengatakan sesuatu seperti
Dolar tanda x sama dengan 44 di PHP.

90
00:04:15,124 --> 00:04:17,040
Jika kita melakukan
hal yang sama di JavaScript,

91
00:04:17,040 --> 00:04:19,589
kita akan mengatakan var x sama dengan 44.

92
00:04:19,589 --> 00:04:22,780
Jadi var adalah semacam cara kami
memperkenalkan variabel.

93
00:04:22,780 --> 00:04:26,850
Itu mungkin sedikit lebih intuitif
hanya variabel tanda dolar.

94
00:04:26,850 --> 00:04:29,080
>> Sekali lagi, karena tidak ada
jenis data, kita bisa melakukan ini

95
00:04:29,080 --> 00:04:34,490
dengan jenis data, string,
hal lain semua akan var.

96
00:04:34,490 --> 00:04:37,260
Conditional, semua kami
teman-teman lama dari C dan PHP

97
00:04:37,260 --> 00:04:41,640
masih tersedia, sehingga kita memiliki jika,
lain jika, lain, saklar dan pertanyaan

98
00:04:41,640 --> 00:04:42,240
mark usus.

99
00:04:42,240 --> 00:04:45,890
Beralih tersisa sebagai fleksibel karena
adalah PHP, tapi semua ini Anda

100
00:04:45,890 --> 00:04:46,930
akrab dengan sekarang.

101
00:04:46,930 --> 00:04:49,900
Dan sama dengan loop
favorit lama sementara,

102
00:04:49,900 --> 00:04:52,700
dilakukan sementara, dan untuk tetap tersedia bagi kita.

103
00:04:52,700 --> 00:04:55,880
Jadi sudah kita ketahui banyak
dasar JavaScript semacam fundamental

104
00:04:55,880 --> 00:05:01,800
hanya berdasarkan memiliki cukup sedikit
pengetahuan sekarang tentang C dan PHP.

105
00:05:01,800 --> 00:05:03,670
>> Bagaimana fungsi dalam JavaScript?

106
00:05:03,670 --> 00:05:08,199
Nah, mirip dengan PHP setiap fungsi adalah
diperkenalkan dengan fungsi kunci.

107
00:05:08,199 --> 00:05:10,740
Anda mengatakan fungsi, dan kemudian Anda
mulai mendefinisikan fungsi Anda.

108
00:05:10,740 --> 00:05:12,531
Apa yang berbeda sedikit
tentang JavaScript,

109
00:05:12,531 --> 00:05:15,700
meskipun adalah kemampuan untuk memiliki
apa yang disebut fungsi anonim.

110
00:05:15,700 --> 00:05:18,880
Jadi Anda dapat menentukan fungsi
yang tidak memiliki nama.

111
00:05:18,880 --> 00:05:21,222
Ini adalah sesuatu yang kita
benar-benar belum pernah melihat sebelumnya.

112
00:05:21,222 --> 00:05:23,430
Kami benar-benar akan menggunakan konsep
dari fungsi anonim

113
00:05:23,430 --> 00:05:27,880
sedikit kemudian di ini
video, karena akan

114
00:05:27,880 --> 00:05:31,530
membuat sedikit lebih masuk akal dalam konteks
ketika kita melihatnya dalam situasi tertentu

115
00:05:31,530 --> 00:05:33,120
bahwa saya telah dibuat di sini.

116
00:05:33,120 --> 00:05:35,710
Tapi mari kita coba lihat
pada apa JavaScript sederhana

117
00:05:35,710 --> 00:05:37,850
Fungsi mungkin terlihat seperti.

118
00:05:37,850 --> 00:05:40,610
>> Jadi saya telah pergi ke depan dan
membuka IDE CS50 saya

119
00:05:40,610 --> 00:05:43,690
dan saya sudah menjalankan Apache
untuk memulai server saya berjalan.

120
00:05:43,690 --> 00:05:46,800
Dan saya memiliki file ini
terbuka yang disebut home.html.

121
00:05:46,800 --> 00:05:48,330
Dan aku akan memperbesar sedikit di sini.

122
00:05:48,330 --> 00:05:52,090
Dan pada dasarnya, Anda dapat melihat
Home.html adalah hanya sekelompok tombol.

123
00:05:52,090 --> 00:05:55,291
Dan aku mengklaim di atas sini
bahwa ini adalah bagian JavaScript

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

125
00:05:55,790 --> 00:05:59,490
Jadi ada sekelompok tombol di sini,
tapi apa yang tombol ini benar-benar melakukan?

126
00:05:59,490 --> 00:06:03,662
>> Yah, kita akan kepala ke IED saya,
dan saya telah home.html membuka sini.

127
00:06:03,662 --> 00:06:05,620
Pada awal,
di sinilah aku menghubungkan

128
00:06:05,620 --> 00:06:07,500
di semua file source JavaScript saya.

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

130
00:06:08,000 --> 00:06:12,440
Jadi saya punya anonymous.js, clock.js,
Saya menggunakan atribut sumber

131
00:06:12,440 --> 00:06:14,440
dari tag script untuk link dalam file.

132
00:06:14,440 --> 00:06:18,660
Jadi saya tidak menulis apapun
JavaScript langsung ke file ini,

133
00:06:18,660 --> 00:06:21,790
tapi aku sudah ditarik semua
JavaScript Aku sudah menulis secara terpisah.

134
00:06:21,790 --> 00:06:24,540
Dan jika kita gulir ke bawah sini, ini
semua harus terlihat agak akrab

135
00:06:24,540 --> 00:06:27,090
dengan sedikit sintaks baru.

136
00:06:27,090 --> 00:06:32,655
Kita miliki di sini tag header untuk
fungsi dan kemudian tombol.

137
00:06:32,655 --> 00:06:35,530
Saya memiliki masukan yang tombol jenis,
dan ternyata ketika saya klik,

138
00:06:35,530 --> 00:06:38,130
Aku akan memanggil beberapa
berfungsi tanggal peringatan.

139
00:06:38,130 --> 00:06:41,792
Dan ini adalah bagaimana kita bisa semacam mencampur
sedikit JavaScript dan html.

140
00:06:41,792 --> 00:06:44,500
Mereka benar-benar bermain cukup baik
bersama-sama, dan begitu rupanya ketika

141
00:06:44,500 --> 00:06:48,730
Saya klik pada tombol ini, saya akan
untuk memanggil beberapa fungsi tanggal peringatan.

142
00:06:48,730 --> 00:06:53,660
Dan juga memiliki aku didefinisikan perilaku
untuk semua tombol lain yang

143
00:06:53,660 --> 00:06:56,440
adalah pada halaman home.html,
yang kita akan selalu kembali

144
00:06:56,440 --> 00:06:59,172
untuk selama video ini.

145
00:06:59,172 --> 00:07:00,880
Tapi mari kita kembali ke atas
di sini dan kita lihat

146
00:07:00,880 --> 00:07:03,850
di clock.js, yang merupakan
File JavaScript yang saya

147
00:07:03,850 --> 00:07:07,370
menulis yang memiliki fungsi pertama ini
kita akan melihat pada.

148
00:07:07,370 --> 00:07:11,630
Seperti yang Anda lihat, saya mulai saya JavaScript
berfungsi dengan fungsi kunci,

149
00:07:11,630 --> 00:07:14,560
dan saya sudah diberi satu ini sebuah
Nama, itu disebut tanggal peringatan.

150
00:07:14,560 --> 00:07:18,710
Di dalam sana, saya tampaknya membuat
variabel lokal baru yang disebut tanggal saat ini.

151
00:07:18,710 --> 00:07:21,500
Dan aku akan menetapkan
sederajat ke tanggal baru.

152
00:07:21,500 --> 00:07:24,430
Dan kita bisa masuk ke banyak
rinci seperti apa kencan adalah,

153
00:07:24,430 --> 00:07:27,060
dan benar-benar JavaScript begitu
besar bahwa kita tidak mungkin dapat

154
00:07:27,060 --> 00:07:28,330
mencakup semuanya dalam satu video.

155
00:07:28,330 --> 00:07:32,220
Tapi cukup untuk mengatakan, ini akan
untuk kembali ke saya item data yang

156
00:07:32,220 --> 00:07:35,470
merangkum tanggal dan waktu.

157
00:07:35,470 --> 00:07:39,100
Saya menyimpan bahwa dalam sebuah variabel yang aku
tampaknya akan memberitahukan tanggal saat ini.

158
00:07:39,100 --> 00:07:41,300
>> Nah, apa peringatan
tanggal saat terlihat seperti?

159
00:07:41,300 --> 00:07:46,460
Mari kita lihat file itu sendiri
kembali atas di jendela browser.

160
00:07:46,460 --> 00:07:49,551
Jadi sekali lagi, ini adalah tombol yang saya
telah terikat, fungsi bernama ini.

161
00:07:49,551 --> 00:07:51,800
Dan saya klik sana dan
lihat apa yang terjadi, itu disiagakan.

162
00:07:51,800 --> 00:07:56,140
Itu muncul semacam ini kotak memberitahu
saya bahwa waktu saat ini, rupanya

163
00:07:56,140 --> 00:07:59,370
itu 4 November di
10:43:43 pagi.

164
00:07:59,370 --> 00:08:02,345
Dan jika saya klik lagi, sekarang
itu beberapa detik kemudian, kan?

165
00:08:02,345 --> 00:08:03,720
Jadi itu semua fungsi ini tidak.

166
00:08:03,720 --> 00:08:07,670
Ketika saya klik tombol ini,
muncul pesan peringatan kepada saya.

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

168
00:08:13,806 --> 00:08:15,690
Jadi ada benar-benar tidak
terlalu banyak untuk fungsi

169
00:08:15,690 --> 00:08:19,110
yang berbeda dari PHP,
hanya sedikit sintaks baru

170
00:08:19,110 --> 00:08:22,500
yang datang dengan bekerja dengan JavaScript.

171
00:08:22,500 --> 00:08:24,650
>> Array dalam JavaScript adalah
cukup sederhana.

172
00:08:24,650 --> 00:08:27,200
Untuk mendeklarasikan array, Anda menggunakan
sintaks kurung

173
00:08:27,200 --> 00:08:30,090
bahwa kita akrab dengan dari PHP.

174
00:08:30,090 --> 00:08:33,432
Dan mirip dengan PHP, kita
juga dapat mencampur jenis data.

175
00:08:33,432 --> 00:08:35,140
Jadi array ini, baik
array ini akan

176
00:08:35,140 --> 00:08:36,960
menjadi sah JavaScript.

177
00:08:36,960 --> 00:08:42,500
Satu yang semua bilangan bulat, dan salah satu yang
dicampur up jenis data yang berbeda.

178
00:08:42,500 --> 00:08:45,020
>> Apa sesuatu yang sangat berbeda
dalam JavaScript, meskipun?

179
00:08:45,020 --> 00:08:47,020
Itulah gagasan dari sebuah objek.

180
00:08:47,020 --> 00:08:50,240
Jadi mungkin Anda pernah mendengar tentang
pemrograman berorientasi objek.

181
00:08:50,240 --> 00:08:53,370
Kami tidak melakukan banyak hal di CS50,
tapi kami akan melakukan sedikit itu

182
00:08:53,370 --> 00:08:55,670
di sini dalam konteks JavaScript.

183
00:08:55,670 --> 00:08:59,100
Sekarang JavaScript memiliki kemampuan untuk
berperilaku sebagai pemrograman berorientasi objek

184
00:08:59,100 --> 00:09:02,615
bahasa, tetapi tidak sendiri
eksklusif berorientasi obyek

185
00:09:02,615 --> 00:09:03,490
bahasa pemrograman.

186
00:09:03,490 --> 00:09:05,281
Dan ini lagi datang
kembali ke mengapa saya mengatakan, itu

187
00:09:05,281 --> 00:09:10,610
bisa sangat menantang untuk belajar
JavaScript sebagai pemrograman pertama Anda

188
00:09:10,610 --> 00:09:13,890
bahasa, karena tidak
benar-benar sesuai paradigma tertentu.

189
00:09:13,890 --> 00:09:16,430
>> C di sisi lain adalah
bahasa pemrograman fungsional.

190
00:09:16,430 --> 00:09:22,270
Jika kita ingin, fungsi yang
semacam bos pria besar, kan?

191
00:09:22,270 --> 00:09:24,410
Mereka mendikte apa
terjadi segala sesuatu yang lain.

192
00:09:24,410 --> 00:09:26,600
Kami ingin mengubah variabel,
kita sebut fungsi.

193
00:09:26,600 --> 00:09:28,220
Kami melakukan hal-hal untuk fungsi.

194
00:09:28,220 --> 00:09:31,250
Objek sebaliknya, dalam
objek bahasa berorientasi,

195
00:09:31,250 --> 00:09:35,937
benda semacam menjadi bintang dan
fungsi menjadi semacam sekunder.

196
00:09:35,937 --> 00:09:38,270
Tapi apa adalah obyek, apa
adalah gagasan dari sebuah objek?

197
00:09:38,270 --> 00:09:40,880
Nah, jika itu membantu, berpikir
tentang hal itu di semacam pertama

198
00:09:40,880 --> 00:09:44,540
seperti struktur C atau struct
bahwa kita telah belajar tentang sebelum.

199
00:09:44,540 --> 00:09:47,430
Dalam C, struktur mengandung
sejumlah bidang,

200
00:09:47,430 --> 00:09:51,174
dan mungkin sekarang kita mungkin mulai
menyebut bidang ini properti.

201
00:09:51,174 --> 00:09:53,590
Tapi sifat pernah benar-benar
berdiri sendiri, bukan?

202
00:09:53,590 --> 00:09:56,410
Jika saya mendefinisikan struktur untuk mobil
seperti ini dengan dua berikut

203
00:09:56,410 --> 00:10:00,750
ladang atau properti, salah satu yang
bilangan bulat untuk tahun mobil

204
00:10:00,750 --> 00:10:04,290
dan lain 10 karakter
tali untuk model mobil,

205
00:10:04,290 --> 00:10:07,150
Saya dapat mengatakan sesuatu seperti ini,
Saya dapat mendeklarasikan variabel baru

206
00:10:07,150 --> 00:10:10,080
jenis herbie struct mobil.

207
00:10:10,080 --> 00:10:13,730
Dan kemudian saya bisa mengatakan sesuatu
seperti herbie.year sama 1963,

208
00:10:13,730 --> 00:10:15,850
dan herbie.model sama Beetle.

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

210
00:10:17,000 --> 00:10:19,680
Saya menggunakan bidang dalam
konteks struktur,

211
00:10:19,680 --> 00:10:22,290
tapi aku tidak pernah bisa hanya
mengatakan sesuatu seperti ini.

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

213
00:10:22,790 --> 00:10:26,836
Saya tidak dapat menggunakan nama field
independen dari struktur.

214
00:10:26,836 --> 00:10:28,210
Ini semacam hal yang mendasar.

215
00:10:28,210 --> 00:10:32,990
>> Jadi bidang yang
mendasar untuk struktur C

216
00:10:32,990 --> 00:10:39,050
sangat mirip dengan sifat yang
mendasar untuk objek JavaScript.

217
00:10:39,050 --> 00:10:42,080
Tapi apa yang membuat mereka
sangat menarik

218
00:10:42,080 --> 00:10:46,230
adalah bahwa benda juga dapat memiliki apa yang
metode yang disebut, yang benar-benar

219
00:10:46,230 --> 00:10:50,730
hanya sebuah kata mewah untuk fungsi-fungsi yang
melekat ke objek juga.

220
00:10:50,730 --> 00:10:55,340
Jadi fungsi yang hanya dapat
disebut dalam konteks obyek.

221
00:10:55,340 --> 00:10:59,200
Hanya sebuah objek yang telah didefinisikan
fungsi ini dalam nya,

222
00:10:59,200 --> 00:11:02,020
jika Anda berpikir tentang
struct, fungsi

223
00:11:02,020 --> 00:11:05,720
didefinisikan dalam mereka mendefinisikan
kurung kurawal struktur.

224
00:11:05,720 --> 00:11:07,980
Sehingga hanya berarti sesuatu
untuk struktur.

225
00:11:07,980 --> 00:11:10,960
Dan itulah semacam apa yang kita lakukan
di sini dengan objek dan metode.

226
00:11:10,960 --> 00:11:13,580
Itu pada dasarnya seperti kami
mendefinisikan fungsi yang

227
00:11:13,580 --> 00:11:16,670
hanya masuk akal pada
objek tertentu, dan jadi kami

228
00:11:16,670 --> 00:11:19,440
menyebut bahwa metode objek.

229
00:11:19,440 --> 00:11:23,180
Dan kita tidak pernah bisa menyebut bahwa
fungsi independen dari objek,

230
00:11:23,180 --> 00:11:29,260
seperti kita tidak bisa mengatakan tahun atau model
independen dari struct di C.

231
00:11:29,260 --> 00:11:32,300
>> Pemrograman sehingga fungsional
paradigma terlihat seperti ini.

232
00:11:32,300 --> 00:11:35,450
Fungsi dan kemudian ketika Anda melewati
di objek sebagai parameter.

233
00:11:35,450 --> 00:11:38,650
Dalam pemrograman berorientasi objek
bahasa, ini semacam mendapat

234
00:11:38,650 --> 00:11:43,464
membalik, dan kami akan berpikir tentang
itu suka ini, object.function.

235
00:11:43,464 --> 00:11:45,380
Jadi semacam itu dot
Operator lagi menyiratkan

236
00:11:45,380 --> 00:11:49,540
bahwa itu semacam properti
atau atribut dari obyek itu sendiri.

237
00:11:49,540 --> 00:11:53,240
Tapi ini adalah apa obyek
bahasa pemrograman berorientasi

238
00:11:53,240 --> 00:11:57,150
mungkin lakukan untuk membuat fungsi
memanggil metode, sekali lagi, yang

239
00:11:57,150 --> 00:12:00,260
hanya kata khusus untuk fungsi
yang melekat pada suatu objek.

240
00:12:00,260 --> 00:12:03,440
Ini adalah apa yang
sintaks mungkin terlihat seperti.

241
00:12:03,440 --> 00:12:09,360
Dan jadi kita akan mulai melihat beberapa
ini dalam konteks JavaScript.

242
00:12:09,360 --> 00:12:12,470
>> Anda juga dapat berpikir tentang obyek
semacam seperti array asosiatif,

243
00:12:12,470 --> 00:12:14,160
yang kita kenal dari PHP.

244
00:12:14,160 --> 00:12:17,720
Ingat array asosiatif memungkinkan
kita untuk memiliki pasangan nilai kunci, bukan

245
00:12:17,720 --> 00:12:23,040
memiliki indeks 0, satu, dua, tiga,
dan sebagainya seperti kita terbiasa dari C

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

247
00:12:23,940 --> 00:12:27,472
Array asosiatif dapat memetakan
kata-kata, seperti dalam video PHP,

248
00:12:27,472 --> 00:12:29,180
kami berbicara tentang
topping pizza.

249
00:12:29,180 --> 00:12:31,180
Dan jadi kami harus array
disebut pizza, dan kami

250
00:12:31,180 --> 00:12:36,670
memiliki keju adalah kunci dan $ 8,99 adalah
nilai, dan kemudian pepperoni adalah kunci,

251
00:12:36,670 --> 00:12:39,190
$ 9,99 adalah nilai, dan sebagainya.

252
00:12:39,190 --> 00:12:43,300
Dan kita juga bisa berpikir tentang
obyek semacam mirip dengan asosiatif

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

254
00:12:43,840 --> 00:12:47,020
Dan sintaks ini di sini
akan membuat objek baru

255
00:12:47,020 --> 00:12:50,950
disebut herbie dengan dua
sifat di dalamnya.

256
00:12:50,950 --> 00:12:57,310
Tahun yang ditugaskan nilai 1963,
dan model, yang ditugaskan string

257
00:12:57,310 --> 00:12:58,140
Kumbang.

258
00:12:58,140 --> 00:13:01,770
>> Dan perhatikan di sini bahwa saya menggunakan
tanda kutip tunggal dalam JavaScript.

259
00:13:01,770 --> 00:13:05,570
Anda dapat menggunakan satu atau dua tanda kutip
ketika Anda sedang berbicara tentang string.

260
00:13:05,570 --> 00:13:07,772
Ini hanya konvensional
kasus yang paling kali

261
00:13:07,772 --> 00:13:10,230
ketika Anda sedang menulis JavaScript,
Anda hanya menggunakan tanda kutip tunggal.

262
00:13:10,230 --> 00:13:15,050
Tapi aku bisa menggunakan tanda kutip ganda di sini, dan
yang akan baik-baik saja juga.

263
00:13:15,050 --> 00:13:17,470
>> Jadi ingat bagaimana di
PHP kami punya gagasan ini

264
00:13:17,470 --> 00:13:22,730
dari masing-masing loop yang akan memungkinkan kita
untuk iterate atas semua nilai kunci

265
00:13:22,730 --> 00:13:25,270
pasang sebuah asosiatif
array, karena kita

266
00:13:25,270 --> 00:13:29,050
tidak memiliki kemampuan untuk iterate
melalui 0, satu, dua, tiga, empat,

267
00:13:29,050 --> 00:13:30,710
dan sebagainya?

268
00:13:30,710 --> 00:13:35,010
JavaScript memiliki sesuatu yang sangat mirip,
tapi itu tidak disebut untuk setiap loop,

269
00:13:35,010 --> 00:13:38,960
itu disebut dalam loop.

270
00:13:38,960 --> 00:13:42,890
Jadi jika saya berkata kepada saya seperti
ini, untuk kunci var di objek,

271
00:13:42,890 --> 00:13:48,670
itu semacam mirip dengan mengatakan
untuk setiap sesuatu sebagai sesuatu.

272
00:13:48,670 --> 00:13:53,850
Tapi semua aku lakukan di sini adalah iterasi
melalui semua kunci dari objek saya.

273
00:13:53,850 --> 00:13:56,070
Dan dalam keriting yang
kawat gigi di sana, saya akan

274
00:13:56,070 --> 00:14:03,410
menggunakan objek kunci kurung persegi untuk merujuk
dengan nilai pada lokasi kunci.

275
00:14:03,410 --> 00:14:05,400
>> Atau, ada
bahkan pendekatan lain.

276
00:14:05,400 --> 00:14:10,880
Jika saya hanya hanya peduli tentang
nilai-nilai, bisa saya katakan untuk kunci objek,

277
00:14:10,880 --> 00:14:12,360
dan hanya menggunakan kunci dalam.

278
00:14:12,360 --> 00:14:17,240
Jadi untuk kunci var di objek, saya punya
menggunakan objek kurung

279
00:14:17,240 --> 00:14:19,340
kunci di dalam lingkaran.

280
00:14:19,340 --> 00:14:24,580
Untuk kunci var objek, saya bisa
hanya menggunakan kunci dalam lingkaran,

281
00:14:24,580 --> 00:14:29,040
karena aku hanya khusus
berbicara tentang nilai-nilai di sana.

282
00:14:29,040 --> 00:14:32,630
>> Jadi mari kita mungkin mengambil
melihat perbedaan

283
00:14:32,630 --> 00:14:35,670
hanya untuk cepat menunjukkan
perbedaan antara empat

284
00:14:35,670 --> 00:14:40,730
dan untuk dari dengan sangat spesifik
array, yang kita miliki di sini, seminggu array.

285
00:14:40,730 --> 00:14:43,616
Jadi saya harus menemukan sebuah array baru
bahwa saya diisi dengan tujuh senar,

286
00:14:43,616 --> 00:14:46,240
Senin Selasa Rabu,
Kamis, Jumat, Sabtu, Minggu.

287
00:14:46,240 --> 00:14:50,530
Dan aku ingin sekarang beralih
melalui array ini,

288
00:14:50,530 --> 00:14:53,090
mencetak informasi tertentu.

289
00:14:53,090 --> 00:14:58,780
Jika saya menggunakan untuk di lingkaran
untuk mencetak informasi,

290
00:14:58,780 --> 00:15:00,710
apa yang Anda pikir saya akan mendapatkan?

291
00:15:00,710 --> 00:15:01,710
Nah, mari kita lihat.

292
00:15:01,710 --> 00:15:05,300
Dan sebelum kita melompati
ke jendela browser saya,

293
00:15:05,300 --> 00:15:08,090
hanya tahu bahwa
console.log adalah semacam satu

294
00:15:08,090 --> 00:15:10,630
cara melakukan F cetak dalam JavaScript.

295
00:15:10,630 --> 00:15:12,040
Tapi apa konsol?

296
00:15:12,040 --> 00:15:14,940
Nah, itulah yang akan kita
untuk pergi melihat di sekarang.

297
00:15:14,940 --> 00:15:16,850
>> OK, jadi kita kembali ke sini
di jendela browser saya,

298
00:15:16,850 --> 00:15:19,410
dan aku akan membuka
up alat pengembang saya.

299
00:15:19,410 --> 00:15:22,290
Sekali lagi, aku hanya memukul F12
untuk membuka alat pengembang.

300
00:15:22,290 --> 00:15:25,670
Dan perhatikan bahwa di sini di
atas saya telah memilih konsol.

301
00:15:25,670 --> 00:15:28,480
Jadi ini adalah gagasan
dari konsol pengembang,

302
00:15:28,480 --> 00:15:30,500
dan itu akan memungkinkan kita untuk
mencetak informasi keluar,

303
00:15:30,500 --> 00:15:33,000
semacam seperti terminal, tapi
Anda akan melihat sedikit kemudian,

304
00:15:33,000 --> 00:15:37,720
kami juga dapat mengetik informasi di
untuk berinteraksi dengan halaman web kami.

305
00:15:37,720 --> 00:15:42,320
Aku akan memperbesar sedikit di sini,
dan aku akan sekarang klik untuk di tes.

306
00:15:42,320 --> 00:15:45,230
Dan empat di test-- Aku tidak akan
menunjukkan kode untuk itu sekarang,

307
00:15:45,230 --> 00:15:47,479
tetapi Anda akan mendapatkannya jika Anda
mendownload kode sumber yang

308
00:15:47,479 --> 00:15:50,380
dikaitkan dengan video-- ini
Hanya saja untuk di lingkaran

309
00:15:50,380 --> 00:15:52,610
yang kita lihat hanya
detik yang lalu pada slide.

310
00:15:52,610 --> 00:15:54,810
>> Jadi aku akan klik yang
tombol, dan di sini,

311
00:15:54,810 --> 00:15:58,440
inilah yang telah dicetak dalam
konsol, 0, satu, dua, tiga, empat, lima,

312
00:15:58,440 --> 00:15:58,940
enam.

313
00:15:58,940 --> 00:16:02,490
Saya tidak mencetak informasi
dalam lokasi tersebut array,

314
00:16:02,490 --> 00:16:05,180
karena saya digunakan untuk dalam lingkaran.

315
00:16:05,180 --> 00:16:10,670
Dan di dalam tubuh loop, saya
hanya dicetak kunci tidak keberatan kunci.

316
00:16:10,670 --> 00:16:18,600
Tapi kalau aku sekarang jelas konsol saya, dan saya
beralih ke untuk tes, dan empat uji

317
00:16:18,600 --> 00:16:22,500
Saya katakan saya gunakan untuk loop
sebaliknya dan mencetak kunci,

318
00:16:22,500 --> 00:16:28,079
jika saya klik itu, sekarang aku mendapatkan
elemen aktual dalam objek saya

319
00:16:28,079 --> 00:16:29,120
atau array saya dalam kasus ini.

320
00:16:29,120 --> 00:16:31,760
Array saya dari hari Minggu.

321
00:16:31,760 --> 00:16:33,480
Aku dicetak Senin,
Selasa Rabu.

322
00:16:33,480 --> 00:16:36,930
Jadi itulah perbedaan antara
untuk dalam lingkaran, yang mencetak

323
00:16:36,930 --> 00:16:43,410
hanya kunci jika Anda hanya menggunakan kunci
dalam tubuh loop,

324
00:16:43,410 --> 00:16:46,850
dan untuk loop, yang mencetak
out nilai jika Anda menggunakan hanya

325
00:16:46,850 --> 00:16:48,870
kunci di dalam tubuh loop.

326
00:16:48,870 --> 00:16:52,380
>> Baiklah, bagaimana kita sekarang mulai
menggabungkan string dan mungkin mencampur

327
00:16:52,380 --> 00:16:57,220
beberapa variabel dengan interpolasi
seperti kami mampu melakukan di PHP?

328
00:16:57,220 --> 00:16:59,410
Nah, kita cukup akrab
dengan ini dari PHP.

329
00:16:59,410 --> 00:17:04,109
Ini adalah bagaimana kita akan melakukannya dengan menggunakan
dot operator untuk menggabungkan string.

330
00:17:04,109 --> 00:17:06,260
Dalam JavaScript, meskipun,
kita benar-benar menggunakan sesuatu

331
00:17:06,260 --> 00:17:09,290
disebut operator ditambah, yang
adalah mungkin bahkan sedikit lebih

332
00:17:09,290 --> 00:17:10,470
intuitif, kan?

333
00:17:10,470 --> 00:17:12,609
Kami menambahkan bunch
string bersama-sama.

334
00:17:12,609 --> 00:17:14,520
Jadi mari kita kembali
lebih dan melihat apa ini

335
00:17:14,520 --> 00:17:18,693
akan mencetak jika kita mencoba untuk mencetak
semua informasi dalam minggu array.

336
00:17:18,693 --> 00:17:20,859
Baiklah, jadi di bawah sini
di bawah string,

337
00:17:20,859 --> 00:17:24,822
Saya memiliki dua pilihan, bangunan tali
V1 dan kemudian membangun tali V2.

338
00:17:24,822 --> 00:17:26,530
Dan kita akan melihat mengapa kami
perlu V2 dalam detik.

339
00:17:26,530 --> 00:17:28,610
Tapi aku akan klik
tali bangunan V1, yang

340
00:17:28,610 --> 00:17:30,360
adalah kode kami
hanya mengambil melihat,

341
00:17:30,360 --> 00:17:32,980
yang console.log dengan semua plus.

342
00:17:32,980 --> 00:17:35,910
Mari kita lihat apakah cetakan ini
apa yang kita harapkan.

343
00:17:35,910 --> 00:17:39,939
>> Senin adalah hari jumlah 01 minggu,
Selasa adalah hari nomor 11 dalam seminggu.

344
00:17:39,939 --> 00:17:41,730
Nah, apa yang saya coba
untuk melakukan ada mendapatkan

345
00:17:41,730 --> 00:17:46,280
untuk mencetak Senin adalah jumlah hari
satu, Selasa adalah hari nomor dua.

346
00:17:46,280 --> 00:17:50,140
Tapi sepertinya aku
selalu mencetak satu.

347
00:17:50,140 --> 00:17:51,260
Nah, kenapa begitu?

348
00:17:51,260 --> 00:17:55,600
Nah, ternyata, melihat lagi
di potongan kecil kode ini di sini.

349
00:17:55,600 --> 00:18:00,160
Perhatikan bahwa kita menggunakan ditambah
operator dalam dua konteks yang berbeda.

350
00:18:00,160 --> 00:18:03,221
>> Dan di sinilah mungkin hal
bahwa kita sudah jenis telah mengatakan,

351
00:18:03,221 --> 00:18:03,970
oh, itu begitu besar.

352
00:18:03,970 --> 00:18:05,910
Kami tidak berurusan dengan tipe data lagi.

353
00:18:05,910 --> 00:18:08,220
Tapi di sinilah fakta
bahwa kita kehilangan tipe data

354
00:18:08,220 --> 00:18:10,960
sebenarnya dapat sedikit
dari masalah bagi kita.

355
00:18:10,960 --> 00:18:16,260
Sekarang bahwa operator ditambah digunakan untuk
menggabungkan string dan menambahkan nomor

356
00:18:16,260 --> 00:18:19,550
bersama-sama, JavaScript memiliki
untuk membuat tebakan yang terbaik

357
00:18:19,550 --> 00:18:22,030
untuk apa yang saya ingin lakukan untuk saya.

358
00:18:22,030 --> 00:18:23,900
Dan dalam hal ini, itu salah menebak.

359
00:18:23,900 --> 00:18:29,340
Ini hari hanya bersambung, yang akan
0, satu, dua, tiga, empat, lima, atau enam,

360
00:18:29,340 --> 00:18:32,060
dan kemudian hanya concatenated
itu dan kemudian concatenated satu.

361
00:18:32,060 --> 00:18:35,020
Itu tidak benar-benar menambahkan mereka bersama-sama.

362
00:18:35,020 --> 00:18:37,320
Dan bahasa ini,
PHP dan JavaScript,

363
00:18:37,320 --> 00:18:39,196
yang abstrak pergi
Gagasan ini jenis,

364
00:18:39,196 --> 00:18:40,820
Anda tidak harus berurusan dengan itu lagi.

365
00:18:40,820 --> 00:18:43,600
Mereka masih memiliki jenis di bawah tenda.

366
00:18:43,600 --> 00:18:46,780
Dan kita bisa, dalam situasi
seperti ini, memanfaatkan fakta bahwa

367
00:18:46,780 --> 00:18:49,240
dengan mengatakan sesuatu
seperti mungkin ini yang

368
00:18:49,240 --> 00:18:53,210
memberitahu JavaScript, oleh
cara, memperlakukan ini sebagai integer,

369
00:18:53,210 --> 00:18:57,100
tidak memperlakukannya sebagai string, bahkan
meskipun kita mencampur bersama-sama string

370
00:18:57,100 --> 00:18:58,940
dan bilangan bulat di sini.

371
00:18:58,940 --> 00:19:02,204
>> Ini hanya salah satu dari hal-hal
yang tampaknya begitu besar dalam konteks

372
00:19:02,204 --> 00:19:04,120
bahwa kita tidak perlu
berurusan dengan jenis lagi,

373
00:19:04,120 --> 00:19:05,828
tapi kadang-kadang Anda akan
mengalami situasi

374
00:19:05,828 --> 00:19:09,110
persis seperti ini di mana fakta bahwa
Anda tidak memiliki kontrol atas jenis

375
00:19:09,110 --> 00:19:11,220
dapat menjadi bumerang pada Anda
jika Anda tidak hati-hati.

376
00:19:11,220 --> 00:19:18,285
Dan jika kita pop kembali ke IDE, aku
akan membersihkan konsol saya lagi,

377
00:19:18,285 --> 00:19:20,660
dan aku akan klik string yang
bangunan versi dua, yang

378
00:19:20,660 --> 00:19:23,052
adalah di mana saya menggunakan fungsi mengurai int.

379
00:19:23,052 --> 00:19:25,260
Sekarang itu mencetak
informasi yang saya harapkan.

380
00:19:25,260 --> 00:19:29,330
Senin nomor satu hari, Selasa
adalah hari ke dua, dan seterusnya.

381
00:19:29,330 --> 00:19:31,170
>> Jadi mari kita bicara tentang fungsi lagi.

382
00:19:31,170 --> 00:19:34,790
Aku berjanji kita akan bicara tentang anonim
fungsi, dan sekarang konteks untuk itu

383
00:19:34,790 --> 00:19:36,360
akhirnya tiba.

384
00:19:36,360 --> 00:19:39,980
Jadi sebelum kita melakukannya, mari kita bicara lagi
tentang array sesaat.

385
00:19:39,980 --> 00:19:42,120
Jadi array khusus
kasus obyek.

386
00:19:42,120 --> 00:19:45,180
Bahkan, segala sesuatu di
JavaScript sebenarnya obyek.

387
00:19:45,180 --> 00:19:47,190
Jadi fungsi adalah
kasus khusus dari suatu objek,

388
00:19:47,190 --> 00:19:49,770
bilangan bulat yang khusus
kasus obyek,

389
00:19:49,770 --> 00:19:52,152
tapi array khusus
memiliki sejumlah metode.

390
00:19:52,152 --> 00:19:55,110
Ingat karena mereka benda-benda,
mereka dapat memiliki properti dan metode.

391
00:19:55,110 --> 00:19:58,600
Mereka memiliki sejumlah metode yang
dapat diterapkan untuk benda-benda.

392
00:19:58,600 --> 00:20:01,197
Ada metode yang disebut
ukuran, array.size,

393
00:20:01,197 --> 00:20:03,030
yang akan kembali ke
Anda seperti yang Anda harapkan

394
00:20:03,030 --> 00:20:05,120
jumlah elemen dalam array Anda.

395
00:20:05,120 --> 00:20:08,480
array.pop, semacam seperti
Gagasan kami bermunculan off

396
00:20:08,480 --> 00:20:11,110
stack, jika Anda ingat
dari tumpukan video kami,

397
00:20:11,110 --> 00:20:13,810
menghapus elemen terakhir dari array.

398
00:20:13,810 --> 00:20:17,110
array.push menambahkan elemen baru
ke akhir array.

399
00:20:17,110 --> 00:20:20,910
array.shift adalah semacam
seperti DQ, itu splices keluar

400
00:20:20,910 --> 00:20:23,610
elemen pertama dari array.

401
00:20:23,610 --> 00:20:27,549
>> Tapi ada juga khusus lain
metode array disebut peta.

402
00:20:27,549 --> 00:20:29,340
Dan ini adalah semacam
konsep menarik.

403
00:20:29,340 --> 00:20:30,930
Jadi apa adalah gagasan peta?

404
00:20:30,930 --> 00:20:33,880
Anda benar-benar akan melihat ini
dalam beberapa bahasa lain,

405
00:20:33,880 --> 00:20:38,550
dan kita tidak berbicara tentang
semacam kartografer peta di sini,

406
00:20:38,550 --> 00:20:41,480
kita sedang berbicara tentang fungsi pemetaan.

407
00:20:41,480 --> 00:20:44,110
Dalam konteks kita
bicarakan di sini, peta

408
00:20:44,110 --> 00:20:47,950
adalah operasi kami khusus
dapat melakukan pada array

409
00:20:47,950 --> 00:20:51,630
untuk menerapkan fungsi tertentu
untuk setiap elemen array itu.

410
00:20:51,630 --> 00:20:55,190
dan jadi kita akan mengatakan di
hal ini, mungkin array.map,

411
00:20:55,190 --> 00:21:00,330
dan di dalamnya, kita melewati
dalam peta adalah fungsi yang kita inginkan

412
00:21:00,330 --> 00:21:02,430
untuk diterapkan ke setiap elemen tunggal.

413
00:21:02,430 --> 00:21:07,299
Jadi itu semacam analog dengan menggunakan
loop untuk iterate atas setiap elemen

414
00:21:07,299 --> 00:21:09,340
dan menerapkan tertentu
berfungsi untuk setiap elemen,

415
00:21:09,340 --> 00:21:14,830
hanya JavaScript telah ini dibangun pada
gagasan pemetaan yang dapat diterapkan.

416
00:21:14,830 --> 00:21:19,700
Dan ini adalah konteks yang bagus untuk
berbicara tentang fungsi anonim.

417
00:21:19,700 --> 00:21:22,370
>> Jadi katakanlah kita memiliki
array ini bilangan bulat.

418
00:21:22,370 --> 00:21:25,370
Ini disebut nums, dan itu punya lima
hal di dalamnya, satu, dua, tiga, empat,

419
00:21:25,370 --> 00:21:26,410
lima.

420
00:21:26,410 --> 00:21:30,620
Sekarang saya ingin memetakan beberapa
fungsi untuk array ini.

421
00:21:30,620 --> 00:21:34,337
Saya ingin memiliki fungsi berlaku
untuk setiap elemen array.

422
00:21:34,337 --> 00:21:37,420
Nah, mari kita mengatakan bahwa apa yang saya ingin
lakukan hanyalah melipatgandakan semua elemen.

423
00:21:37,420 --> 00:21:42,520
Apa yang saya bisa lakukan hanya menggunakan satu lingkaran
untuk var saya sama dengan 0, saya kurang dari

424
00:21:42,520 --> 00:21:47,390
atau sama dengan 4, saya ditambah, ditambah, dan
kemudian dobel setiap nomor tunggal.

425
00:21:47,390 --> 00:21:49,580
Tapi saya juga bisa melakukan sesuatu seperti ini.

426
00:21:49,580 --> 00:21:53,420
Saya dapat mengatakan nums sebelumnya
satu dua tiga empat lima,

427
00:21:53,420 --> 00:21:58,310
sekarang, meskipun, saya ingin Anda untuk
menerapkan pemetaan ke array ini

428
00:21:58,310 --> 00:22:00,400
di mana saya ingin Anda
untuk menggandakan setiap nomor.

429
00:22:00,400 --> 00:22:02,540
Dan itulah
apa yang terjadi di sini.

430
00:22:02,540 --> 00:22:06,870
Tapi perhatikan apa yang saya lewat
sebagai argumen untuk memetakan.

431
00:22:06,870 --> 00:22:09,080
Ini adalah fungsi anonim.

432
00:22:09,080 --> 00:22:11,140
Dan melihat saya belum diberikan
fungsi ini nama,

433
00:22:11,140 --> 00:22:13,290
Aku hanya diberikan itu daftar parameter.

434
00:22:13,290 --> 00:22:16,370
Dan jadi ini adalah contoh
dari fungsi anonim.

435
00:22:16,370 --> 00:22:21,270
>> Kita umumnya tidak akan menyebut ini
Fungsi luar konteks peta.

436
00:22:21,270 --> 00:22:24,110
Kami mendefinisikan sebagai parameter
untuk memetakan, dan jadi kita tidak benar-benar

437
00:22:24,110 --> 00:22:27,910
harus memiliki nama untuk itu jika
Satu-satunya hal yang peduli tentang adalah peta

438
00:22:27,910 --> 00:22:30,339
dan itu didefinisikan tepat
ada dalam peta.

439
00:22:30,339 --> 00:22:31,880
Dan jadi ini adalah fungsi anonim.

440
00:22:31,880 --> 00:22:34,680
Kami belum bisa
untuk melakukan hal ini sebelumnya.

441
00:22:34,680 --> 00:22:38,400
Petakan beberapa fungsi yang
menerima satu parameter, num,

442
00:22:38,400 --> 00:22:41,890
dan apa fungsi yang melakukan
adalah kembali Bil kali 2.

443
00:22:41,890 --> 00:22:45,330
Dan setelah ini
pemetaan telah diterapkan,

444
00:22:45,330 --> 00:22:50,090
ini sekarang apa nums terlihat
seperti, dua, empat, enam, delapan, 10.

445
00:22:50,090 --> 00:22:52,090
Dan kami akan mampir ke saya
jendela browser dan hanya

446
00:22:52,090 --> 00:22:55,240
Lihatlah ini
benar-benar cepat juga.

447
00:22:55,240 --> 00:22:58,000
>> Jadi saya memiliki tombol lain di sini
di halaman rumah saya disebut ganda.

448
00:22:58,000 --> 00:23:03,570
Dan ketika saya klik ganda, dan memberitahu
saya sebelum itu adalah salah satu, dua, tiga, empat,

449
00:23:03,570 --> 00:23:07,250
lima setelah dua, empat, enam, delapan, 10.

450
00:23:07,250 --> 00:23:11,930
Dan jika aku kembali dan klik ganda
lagi, dua, empat, enam, delapan, 10.

451
00:23:11,930 --> 00:23:17,400
Dan kemudian setelah, empat,
delapan, 12, 16, dan kemudian 20.

452
00:23:17,400 --> 00:23:20,440
Dan apa yang saya lakukan dalam fungsi ini?

453
00:23:20,440 --> 00:23:25,210
Nah, jika kita hanya mampir ke IDE, dan
Aku menarik fungsi anonim saya, di sini

454
00:23:25,210 --> 00:23:28,780
on line tujuh sampai 13, aku
melakukan sedikit pekerjaan yang mewah di sini,

455
00:23:28,780 --> 00:23:32,240
tapi aku hanya mencetak
apa yang saat ini dalam array.

456
00:23:32,240 --> 00:23:36,580
Kemudian pada baris 16, 17,
dan 18, ada peta saya.

457
00:23:36,580 --> 00:23:40,930
Di sinilah aku menerapkan penggandaan ini
fungsi untuk setiap elemen tunggal.

458
00:23:40,930 --> 00:23:43,530
Dan kemudian sedikit lebih bawah,
Aku hanya melakukan hal yang sama

459
00:23:43,530 --> 00:23:46,640
Saya melakukan sebelumnya, kecuali sekarang aku
mencetak isi array

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

461
00:23:48,167 --> 00:23:50,500
Tapi semua saya lakukan di sini adalah
hanya menggunakan fungsi anonim

462
00:23:50,500 --> 00:23:53,640
untuk memetakan di seluruh array.

463
00:23:53,640 --> 00:23:58,466
>> Jadi satu topik besar untuk berbicara tentang di
JavaScript adalah gagasan dari suatu peristiwa.

464
00:23:58,466 --> 00:24:01,590
Sebuah acara adalah sesuatu yang hanya terjadi
ketika pengguna berinteraksi dengan web Anda

465
00:24:01,590 --> 00:24:04,715
Halaman, jadi mungkin mereka klik sesuatu,
atau mungkin halaman tersebut selesai loading,

466
00:24:04,715 --> 00:24:07,200
atau mungkin mereka sudah pindah
mouse mereka atas sesuatu,

467
00:24:07,200 --> 00:24:09,290
atau mereka telah mengetik sesuatu
dalam field input.

468
00:24:09,290 --> 00:24:14,260
Semua hal ini merupakan peristiwa
yang terjadi pada halaman web kami.

469
00:24:14,260 --> 00:24:17,460
Dan JavaScript memiliki
kemampuan untuk mendukung sesuatu

470
00:24:17,460 --> 00:24:21,760
disebut sebuah event handler, yang
adalah fungsi callback yang

471
00:24:21,760 --> 00:24:23,329
merespon sebuah event html.

472
00:24:23,329 --> 00:24:24,620
Dan apa fungsi callback?

473
00:24:24,620 --> 00:24:27,328
Nah, itu umumnya hanya lain
nama untuk fungsi anonim.

474
00:24:27,328 --> 00:24:30,170
Ini fungsi yang
merespon suatu peristiwa.

475
00:24:30,170 --> 00:24:34,130
Dan ini adalah di mana kita datang ke
Ide mengikat fungsi tertentu

476
00:24:34,130 --> 00:24:38,060
untuk atribut html tertentu.

477
00:24:38,060 --> 00:24:41,420
Kebanyakan elemen html
dukungan untuk atribut

478
00:24:41,420 --> 00:24:45,170
bahwa kita tidak berbicara tentang di html
video untuk sesuatu seperti di klik

479
00:24:45,170 --> 00:24:50,540
atau di hover atau pada beban,
semua peristiwa ini

480
00:24:50,540 --> 00:24:53,120
yang kemudian dapat menulis fungsi
yang berhubungan dengan kejadian-kejadian

481
00:24:53,120 --> 00:24:56,090
ketika peristiwa-peristiwa
terjadi pada halaman web Anda.

482
00:24:56,090 --> 00:24:59,170
>> Dan jadi mungkin html Anda
terlihat seperti ini.

483
00:24:59,170 --> 00:25:02,240
Dan saya memiliki dua tombol di sini,
tombol satu dan tombol dua,

484
00:25:02,240 --> 00:25:04,620
dan di sini saya punya saat ini
tidak didefinisikan,

485
00:25:04,620 --> 00:25:11,170
tapi ini adalah di mana atribut pada
klik tampaknya bagian dari tag html saya.

486
00:25:11,170 --> 00:25:15,220
Jadi rupanya ketika saya mendefinisikan apa
terjadi di dalam atribut itu,

487
00:25:15,220 --> 00:25:18,590
itu akan menjadi beberapa JavaScript
fungsi yang merespon acara

488
00:25:18,590 --> 00:25:24,360
mungkin mengklik
Tombol satu atau dua tombol.

489
00:25:24,360 --> 00:25:28,580
>> Apa jenis keren tentang ini adalah kita
dapat menulis event handler generik.

490
00:25:28,580 --> 00:25:32,370
Dan acara ini akan Handler
membuat objek acara.

491
00:25:32,370 --> 00:25:37,000
Dan objek acara akan memberitahu kita
yang mana dari dua tombol diklik.

492
00:25:37,000 --> 00:25:38,064
Sekarang bagaimana itu bekerja?

493
00:25:38,064 --> 00:25:39,730
Nah, mungkin terlihat seperti ini.

494
00:25:39,730 --> 00:25:44,860
Jadi pertama-tama kita akan menentukan tombol kami
untuk memiliki respon callback

495
00:25:44,860 --> 00:25:47,470
fungsi yang akan dipanggil
ketika tombol diklik,

496
00:25:47,470 --> 00:25:49,520
kami akan memanggil event nama peringatan.

497
00:25:49,520 --> 00:25:53,320
Dan melihat di kedua kasus kami
lewat di parameter acara ini.

498
00:25:53,320 --> 00:25:55,460
Jadi kita sebut fungsi ini
atau ketika fungsi ini

499
00:25:55,460 --> 00:26:00,330
dipicu oleh peristiwa yang terjadi,
itu akan membuat objek acara ini

500
00:26:00,330 --> 00:26:03,300
dan menyebarkannya sebagai
parameter untuk mengingatkan nama.

501
00:26:03,300 --> 00:26:07,270
Dan bahwa objek acara adalah
akan mengandung informasi

502
00:26:07,270 --> 00:26:09,800
tentang yang tombol diklik.

503
00:26:09,800 --> 00:26:11,580
Dan bagaimana cara melakukannya?

504
00:26:11,580 --> 00:26:13,654
Nah, mungkin terlihat seperti ini.

505
00:26:13,654 --> 00:26:15,570
Jadi sekarang di saya terpisah
File JavaScript, aku mungkin

506
00:26:15,570 --> 00:26:17,420
harus menemukan ini
Fungsi nama waspada, yang

507
00:26:17,420 --> 00:26:19,500
lagi menerima bahwa parameter event.

508
00:26:19,500 --> 00:26:24,640
Dan kemudian di sini adalah di mana aku mendeteksi
tombol yang dipicu,

509
00:26:24,640 --> 00:26:28,100
var memicu sama acara
elemen sumber dot.

510
00:26:28,100 --> 00:26:33,150
Apa sumber yang diciptakan
objek acara ini yang disahkan di?

511
00:26:33,150 --> 00:26:36,390
Apakah itu tombol satu atau itu tombol dua?

512
00:26:36,390 --> 00:26:40,710
>> Dan kemudian di sini semua saya lakukan adalah
mencetak trigger.innerhtml.

513
00:26:40,710 --> 00:26:43,860
Nah, dalam hal ini, dalam hal ini
konteks, trigger.innerhtml

514
00:26:43,860 --> 00:26:45,940
hanya apa yang tertulis pada tombol.

515
00:26:45,940 --> 00:26:48,830
Kebetulan jika kita melompat
kembali untuk kedua, yang akan

516
00:26:48,830 --> 00:26:51,670
menjadi apa yang ada di antara mereka tag tombol.

517
00:26:51,670 --> 00:26:54,150
Ini akan menjadi tombol satu atau dua tombol.

518
00:26:54,150 --> 00:26:57,320
Dan mari kita lihat
bagaimana event handler ini akan

519
00:26:57,320 --> 00:27:01,080
terlihat jika kita memiliki berjalan dalam praktek.

520
00:27:01,080 --> 00:27:03,850
>> Jadi pertama-tama, Anda sudah
membuka events.js,

521
00:27:03,850 --> 00:27:06,517
yang merupakan file JavaScript mana
Aku telah menetapkan fungsi ini.

522
00:27:06,517 --> 00:27:08,558
Dan seperti yang Anda lihat, itu
cukup banyak persis apa

523
00:27:08,558 --> 00:27:10,230
kita hanya melihat pada slide kedua lalu.

524
00:27:10,230 --> 00:27:14,890
Dan aku akan pergi ke
halaman rumah kami telah menggunakan.

525
00:27:14,890 --> 00:27:17,660
Dan saya miliki di sini tombol
satu dan dua tombol.

526
00:27:17,660 --> 00:27:19,820
Dan aku akan klik pada tombol satu.

527
00:27:19,820 --> 00:27:23,930
Anda klik pada tombol satu, jika Anda
bisa melihat di sini, di waspada.

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

529
00:27:25,810 --> 00:27:28,980
Klik pada tombol dua, Anda
mengklik tombol dua.

530
00:27:28,980 --> 00:27:32,150
>> Jadi kedua tombol memiliki
fungsi panggilan yang sama, kan?

531
00:27:32,150 --> 00:27:35,840
Mereka berdua adalah nama peringatan
acara, tapi objek acara ini

532
00:27:35,840 --> 00:27:41,900
yang akan dibuat ketika kita klik
itu memberitahu kita tombol yang diklik.

533
00:27:41,900 --> 00:27:44,650
Kami tidak harus menulis dua terpisah
fungsi atau kesepakatan dengan memiliki

534
00:27:44,650 --> 00:27:46,470
untuk menyampaikan informasi tambahan.

535
00:27:46,470 --> 00:27:48,220
Kami hanya mengandalkan
apa JavaScript akan

536
00:27:48,220 --> 00:27:53,772
lakukan untuk kita, yang adalah untuk menciptakan
semacam acara objek atas nama kami.

537
00:27:53,772 --> 00:27:56,730
Ada lebih banyak untuk JavaScript dari
apa yang telah kita bahas dalam video ini,

538
00:27:56,730 --> 00:27:58,521
tetapi memiliki ini
mendasar harus mendapatkan Anda

539
00:27:58,521 --> 00:28:00,690
cukup cara lama untuk
belajar segala sesuatu yang Anda akan

540
00:28:00,690 --> 00:28:04,030
perlu tahu tentang ini
bahasa yang menarik.

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

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

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