1
00:00:00,000 --> 00:00:04,439

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: Dalam video ini, kami mahu
untuk memanggil perhatian berasingan

3
00:00:07,230 --> 00:00:09,110
kepada yang tertentu
unsur JavaScript

4
00:00:09,110 --> 00:00:11,350
yang anda mungkin dapati berguna
apabila anda memulakan

5
00:00:11,350 --> 00:00:15,750
untuk bekerja pada memanipulasi laman web dan
mengubah kandungan laman web anda

6
00:00:15,750 --> 00:00:16,460
dengan cepat.

7
00:00:16,460 --> 00:00:19,450
Dan itulah tanggapan
Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Jadi seperti yang kita lihat dalam video kami di
JavaScript, objek adalah sangat fleksibel.

9
00:00:23,030 --> 00:00:24,750
>> Dan mereka boleh mengandungi pelbagai bidang.

10
00:00:24,750 --> 00:00:28,075
Dan walaupun kita tidak pergi ke dalam banyak
terperinci, bidang-bidang atau harta,

11
00:00:28,075 --> 00:00:30,200
yang kita lakukan mungkin lebih
sewajarnya memanggil mereka

12
00:00:30,200 --> 00:00:33,915
dalam konteks objek, walaupun
mereka sifat-sifat boleh menjadi objek lain.

13
00:00:33,915 --> 00:00:36,210
Dan di dalam objek
boleh menjadi objek lain.

14
00:00:36,210 --> 00:00:39,630
>> Anda mempunyai objek yang sangat besar ini
dengan banyak objek lain

15
00:00:39,630 --> 00:00:43,550
di dalamnya, yang semacam
mencipta idea ini pokok besar.

16
00:00:43,550 --> 00:00:47,540
Sekarang, objek dokumen itu ialah suatu
objek yang sangat istimewa dalam JavaScript

17
00:00:47,540 --> 00:00:52,580
yang menganjurkan keseluruhan web anda
halaman di bawah ini jenis payung

18
00:00:52,580 --> 00:00:53,470
objek.

19
00:00:53,470 --> 00:00:56,770
Dan sebagainya dalam dokumen
objek objek menyampaikan

20
00:00:56,770 --> 00:00:59,630
kepala dan badan atas laman web anda.

21
00:00:59,630 --> 00:01:03,760
>> Dalam orang-orang yang lain
objek, dan sebagainya, dan sebagainya,

22
00:01:03,760 --> 00:01:08,411
sehingga halaman web keseluruhan anda mempunyai
dianjurkan dalam objek ini besar.

23
00:01:08,411 --> 00:01:09,660
Apa yang terbalik di sini, bukan?

24
00:01:09,660 --> 00:01:12,170
Baik, kita tahu bagaimana untuk bekerja
dengan objek dalam JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Jadi, jika kita mempunyai objek yang
merujuk ke laman web keseluruhan kami, yang

26
00:01:15,840 --> 00:01:19,590
bermakna dengan memanggil yang betul
kaedah untuk memanipulasi objek yang

27
00:01:19,590 --> 00:01:22,360
atau mengubah suai tertentu
hartanah, kami

28
00:01:22,360 --> 00:01:25,500
boleh menukar unsur-unsur
halaman kami pengaturcaraan

29
00:01:25,500 --> 00:01:30,210
menggunakan JavaScript daripada harus
untuk kod perkara dengan, katakan, HTML.

30
00:01:30,210 --> 00:01:33,760
Jadi di sini adalah satu contoh
sangat mudah laman web, bukan?

31
00:01:33,760 --> 00:01:35,850
Ia mempunyai tag HTML, kepala.

32
00:01:35,850 --> 00:01:37,979
>> Di dalam terdapat tajuk, hello dunia.

33
00:01:37,979 --> 00:01:38,770
Kemudian saya mempunyai badan yang.

34
00:01:38,770 --> 00:01:40,686
Di dalam itu, saya mempunyai
tiga perkara yang berbeza.

35
00:01:40,686 --> 00:01:44,170
Saya mempunyai tag header h2,
perenggan, dan pautan.

36
00:01:44,170 --> 00:01:45,920
Ini adalah halaman web yang sangat mudah.

37
00:01:45,920 --> 00:01:48,590
>> Nah, apa yang mungkin dokumen
membantah untuk melihat ini seperti?

38
00:01:48,590 --> 00:01:50,700
Nah, ia sedikit
menakutkan mungkin pada mulanya.

39
00:01:50,700 --> 00:01:52,510
Tetapi ia adalah benar-benar hanya pokok besar.

40
00:01:52,510 --> 00:01:54,890
Dan pada akar yang sangat ia adalah dokumen.

41
00:01:54,890 --> 00:02:00,030
>> Di dalam dokumen itu adalah satu lagi
objek merujuk kepada HTML halaman saya.

42
00:02:00,030 --> 00:02:02,660
Dan HTML halaman saya ialah semua ini.

43
00:02:02,660 --> 00:02:06,900
Dan kemudian di dalam HTML
objek, saya mempunyai objek kepala,

44
00:02:06,900 --> 00:02:09,000
yang merujuk kepada segala-galanya ada.

45
00:02:09,000 --> 00:02:11,009
>> Dan di dalam sana,
Saya mempunyai objek tajuk.

46
00:02:11,009 --> 00:02:15,620
Dan di dalam sana, saya mempunyai satu lagi
membantah itu hanya dunia hello.

47
00:02:15,620 --> 00:02:18,020
Saya boleh mempunyai badan saya
diwakili seperti ini.

48
00:02:18,020 --> 00:02:22,850
>> Di dalam badan saya, saya mempunyai h2 yang
objek dan p objek perenggan

49
00:02:22,850 --> 00:02:25,270
dan objek untuk pautan.

50
00:02:25,270 --> 00:02:29,660
Dan sebagainya keseluruhan hierarki ini
boleh diwakili sebagai pokok besar

51
00:02:29,660 --> 00:02:31,990
dengan banyak lebih kecil
perkara-perkara yang keluar daripadanya.

52
00:02:31,990 --> 00:02:33,740
Kini, sudah tentu, apabila
kita pengaturcaraan, kita

53
00:02:33,740 --> 00:02:35,560
tidak memikirkan perkara-perkara seperti pokok besar.

54
00:02:35,560 --> 00:02:37,980
Kita mahu melihat yang sebenar
perkara yang berkaitan kod.

55
00:02:37,980 --> 00:02:40,790
>> Dan nasib baik, kita boleh
menggunakan alat pemaju kami

56
00:02:40,790 --> 00:02:46,080
untuk benar-benar mengambil lihat
objek dokumen laman web ini.

57
00:02:46,080 --> 00:02:48,150
Dan mari kita berbuat demikian.

58
00:02:48,150 --> 00:02:49,580
Jadi saya telah membuka tab penyemak imbas.

59
00:02:49,580 --> 00:02:51,540
>> Dan saya telah membuka Alat Pembangun.

60
00:02:51,540 --> 00:02:54,460
Dan dalam video saya JavaScript, saya
menyebut bahawa konsol tidak

61
00:02:54,460 --> 00:02:56,770
hanya kurang lebih di mana
kita mencetak maklumat,

62
00:02:56,770 --> 00:02:59,560
ia juga tempat di mana
kita boleh maklumat input.

63
00:02:59,560 --> 00:03:01,380
Dalam konteks ini, apa yang
Saya akan katakan adalah

64
00:03:01,380 --> 00:03:05,720
Saya ingin kembali
objek dokumen,

65
00:03:05,720 --> 00:03:07,502
jadi saya boleh mula kita lihat ia.

66
00:03:07,502 --> 00:03:08,460
Jadi bagaimana saya boleh melakukan ini?

67
00:03:08,460 --> 00:03:10,740
Nah, jika saya mahu
menganjurkan ia benar-benar baik,

68
00:03:10,740 --> 00:03:16,317
Saya akan mengatakan console.dir, D-I-R.
Sekarang, saya menggunakan console.log hanya cetak

69
00:03:16,317 --> 00:03:17,400
sesuatu yang sangat mudah.

70
00:03:17,400 --> 00:03:20,450
Tetapi jika saya ingin menganjurkan ini
hierarki seperti objek,

71
00:03:20,450 --> 00:03:23,800
Saya mahu ia semacam berstruktur
seperti struktur direktori.

72
00:03:23,800 --> 00:03:27,400
>> Jadi saya mahu console.dir dokumen.

73
00:03:27,400 --> 00:03:28,430
Saya akan tekan Enter.

74
00:03:28,430 --> 00:03:32,350
Dan kanan di bawah sekarang,
dan saya akan zum masuk sini,

75
00:03:32,350 --> 00:03:36,000
Saya telah mendapat dokumen sambutan ini
dengan anak panah kecil di sebelahnya.

76
00:03:36,000 --> 00:03:39,470
Kini, apabila saya membuka anak panah ini,
ada akan menjadi banyak perkara.

77
00:03:39,470 --> 00:03:42,560
>> Tetapi kita akan mengabaikan banyak
daripadanya dan hanya jenis tumpuan

78
00:03:42,560 --> 00:03:46,250
pada bahagian yang paling penting, jadi kami
boleh mula mengemudi dokumen ini.

79
00:03:46,250 --> 00:03:50,125
Ada banyak lagi untuk DOM daripada
nod dan nod kanak-kanak hanya ibu bapa.

80
00:03:50,125 --> 00:03:51,500
Ada banyak perkara sampingan.

81
00:03:51,500 --> 00:03:52,280
>> Jadi saya akan membuka ini.

82
00:03:52,280 --> 00:03:54,610
Dan ada banyak keseluruhan
barangan yang timbul.

83
00:03:54,610 --> 00:03:59,000
Tetapi apa yang saya mengambil berat tentang adalah
di sini, nod kanak-kanak.

84
00:03:59,000 --> 00:04:00,410
Mari kita membuka bahawa sehingga.

85
00:04:00,410 --> 00:04:03,810
>> Dalam sana saya melihat
sesuatu yang biasa, HTML.

86
00:04:03,810 --> 00:04:07,670
Jadi di dalam dokumen kami
satu tahap ke bawah, HTML.

87
00:04:07,670 --> 00:04:08,550
Saya membuka bahawa sehingga.

88
00:04:08,550 --> 00:04:10,380
Apa yang kita jangkakan?

89
00:04:10,380 --> 00:04:13,760
>> Jika anda ingat dari gambarajah kami,
apa yang patut kita dapati di dalam HTML?

90
00:04:13,760 --> 00:04:17,275
Apakah dua nod adalah di bawah dalam pokok itu?

91
00:04:17,275 --> 00:04:17,899
Mari kita mengetahui.

92
00:04:17,899 --> 00:04:18,940
Kita membuka HTML.

93
00:04:18,940 --> 00:04:22,079
Kami turun ke nod kanak-kanak itu.

94
00:04:22,079 --> 00:04:23,440
>> Pop yang boleh dibuka.

95
00:04:23,440 --> 00:04:25,990
Ada kepala dan badan.

96
00:04:25,990 --> 00:04:28,540
Dan kita boleh membuka kepala.

97
00:04:28,540 --> 00:04:30,460
Pergi ke nod kanak-kanak itu.

98
00:04:30,460 --> 00:04:31,460
Nah, ada tajuk.

99
00:04:31,460 --> 00:04:33,293
>> Dan kita boleh pergi pada dan
seperti ini selama-lamanya.

100
00:04:33,293 --> 00:04:34,770
Kita boleh melakukan ini dengan badan juga.

101
00:04:34,770 --> 00:04:40,090
Tetapi ada satu cara bagi kita untuk melihat
dokumen itu dianjurkan sebagai objek besar.

102
00:04:40,090 --> 00:04:42,610
Dan jika kita melihat adalah besar
objek yang kelihatan banyak

103
00:04:42,610 --> 00:04:47,480
seperti kod, ini bermakna bahawa kita boleh mula
untuk memanipulasi objek ini besar menggunakan

104
00:04:47,480 --> 00:04:51,220
kod untuk mengubah apa yang kami
laman web kelihatan dan berasa seperti.

105
00:04:51,220 --> 00:04:54,920
>> Jadi itulah alat yang cukup kuat
kita ada di tangan kita sekarang.

106
00:04:54,920 --> 00:04:57,360
Jadi seperti yang kita hanya melihat, yang
objek dokumen itu sendiri

107
00:04:57,360 --> 00:05:01,392
dan semua objek di dalamnya
mempunyai ciri-ciri dan kaedah, hanya

108
00:05:01,392 --> 00:05:04,100
seperti mana-mana objek lain yang kami telah
telah bekerja dengan dalam JavaScript.

109
00:05:04,100 --> 00:05:08,370
Tetapi kita boleh menggunakan sifat-sifat dan
menggunakan orang-orang kaedah untuk jenis mengesan

110
00:05:08,370 --> 00:05:10,900
daripada dokumen besar dan mendapatkan
rendah dan lebih rendah dan lebih rendah,

111
00:05:10,900 --> 00:05:13,360
lebih halus dan lebih halus bijirin
terperinci, sehingga kita

112
00:05:13,360 --> 00:05:17,510
sampai ke bahagian yang sangat khusus kami
Laman web yang kita mahu tukar.

113
00:05:17,510 --> 00:05:22,700
>> Dan apabila kita mengemaskini sifat-sifat
Dokumen Objek atau memanggil orang-orang kaedah,

114
00:05:22,700 --> 00:05:24,450
perkara yang mungkin berlaku di laman web kami.

115
00:05:24,450 --> 00:05:28,420
Dan kita tidak perlu melakukan apa-apa yang menyegarkan
untuk mempunyai perubahan tersebut berkuat kuasa.

116
00:05:28,420 --> 00:05:33,160
>> Dan itulah kemampuan yang cukup sejuk untuk
ada apabila kita bekerja dengan kod.

117
00:05:33,160 --> 00:05:37,185
Jadi apa yang adalah beberapa sifat-sifat ini
yang merupakan sebahagian daripada objek dokumen?

118
00:05:37,185 --> 00:05:40,100
Nah, anda mungkin melihat seorang
beberapa daripada mereka benar-benar cepat

119
00:05:40,100 --> 00:05:42,700
seperti yang kita telah zipping
melalui dokumen gergasi

120
00:05:42,700 --> 00:05:45,150
objek kita hanya melihat dalam pelayar web.

121
00:05:45,150 --> 00:05:48,420
>> Tetapi beberapa sifat-sifat ini
mungkin perkara seperti HTML dalam.

122
00:05:48,420 --> 00:05:52,950
Dan anda juga mungkin ingat saya
menggunakan ini dalam video JavaScript

123
00:05:52,950 --> 00:05:54,950
pada akhir sangat apabila saya
bercakap tentang peristiwa.

124
00:05:54,950 --> 00:05:56,125
Apakah HTML dalaman ini?

125
00:05:56,125 --> 00:05:59,030
Nah, ia hanya apa yang
di antara tag.

126
00:05:59,030 --> 00:06:01,590
>> Dan sebagainya HTML dalam,
sebagai contoh, tajuk

127
00:06:01,590 --> 00:06:05,390
tag, jika kita terus berjalan di
bahawa contoh masa yang lalu,

128
00:06:05,390 --> 00:06:08,020
akan menjadi hello dunia.

129
00:06:08,020 --> 00:06:10,140
Itu adalah tajuk laman kami.

130
00:06:10,140 --> 00:06:12,370
Harta-harta lain
termasuk nama nod, yang

131
00:06:12,370 --> 00:06:15,810
adalah nama HTML
elemen seperti tajuk.

132
00:06:15,810 --> 00:06:19,100
ID, yang merupakan ID
sifat suatu elemen HTML.

133
00:06:19,100 --> 00:06:23,790
>> Ingat bahawa kita khas boleh menunjukkan
unsur khusus HTML kami

134
00:06:23,790 --> 00:06:27,510
dengan sifat ID, yang biasanya
amat berguna dalam konteks CSS,

135
00:06:27,510 --> 00:06:29,000
secara khusus.

136
00:06:29,000 --> 00:06:33,217
Nod induk, iaitu merujuk kepada
apa yang hanya sehingga atas saya dalam DOM.

137
00:06:33,217 --> 00:06:35,800
Dan nodus kanak-kanak, yang merupakan
merujuk kepada apa yang turun di bawah saya.

138
00:06:35,800 --> 00:06:37,950
Dan kita melihat banyak yang
hanya melihat melalui.

139
00:06:37,950 --> 00:06:42,970
Nod Anak, itulah bagaimana kita mendapat
rendah dan lebih rendah ke dalam pokok itu.

140
00:06:42,970 --> 00:06:46,590
>> Sifat-sifat, itu hanya array
daripada sifat-sifat unsur HTML.

141
00:06:46,590 --> 00:06:50,270
Jadi satu contoh sifat-sifat yang mungkin
menjadi jika anda mempunyai tag imej,

142
00:06:50,270 --> 00:06:54,090
ia biasanya mempunyai sifat sumber,
mungkin ketinggian dan satu sifat yang lebar.

143
00:06:54,090 --> 00:06:57,120
Dan sebagainya yang hanya akan menjadi array
semua sifat-sifat yang berkaitan

144
00:06:57,120 --> 00:06:59,300
dengan elemen HTML.

145
00:06:59,300 --> 00:07:04,140
>> Gaya adalah perasaan yang terdapat
tidak mewakili CSS

146
00:07:04,140 --> 00:07:06,050
gaya elemen tertentu.

147
00:07:06,050 --> 00:07:08,310
Dan kemudian di dalam ini
video, kami akan secara khusus

148
00:07:08,310 --> 00:07:14,592
gaya pengaruh untuk membuat pasangan
perubahan kepada laman web kami.

149
00:07:14,592 --> 00:07:15,800
Jadi mereka adalah beberapa ciri-ciri.

150
00:07:15,800 --> 00:07:17,591
>> Dan terdapat juga beberapa
kaedah yang kita boleh

151
00:07:17,591 --> 00:07:22,450
gunakan untuk juga lebih cepat mungkin mengasingkan
unsur-unsur Objek Dokumen.

152
00:07:22,450 --> 00:07:26,730
Mungkin, yang paling serba boleh
ini menjadi getElementById.

153
00:07:26,730 --> 00:07:31,190
Jadi saya boleh berkata sesuatu seperti, kerana
ingat ia adalah satu kaedah Dokumen

154
00:07:31,190 --> 00:07:34,880
Membantah, document.getElementByID.

155
00:07:34,880 --> 00:07:39,820
>> Dan di dalam orang-orang kurungan, menentukan
elemen HTML ID tertentu

156
00:07:39,820 --> 00:07:42,330
sifat yang saya ada sebelum ini
ditetapkan, dan saya akan segera

157
00:07:42,330 --> 00:07:46,685
pergi hak untuk elemen yang
laman web secara keseluruhan.

158
00:07:46,685 --> 00:07:49,310
Jadi, saya tidak perlu mungkin menggerudi
ke bawah melalui setiap lapisan tunggal.

159
00:07:49,310 --> 00:07:52,841
Saya hanya boleh menggunakan kaedah ini untuk mencari,
jenis seperti peluru berpandu seeking haba,

160
00:07:52,841 --> 00:07:53,340
bukan?

161
00:07:53,340 --> 00:07:56,300
Ia hanya pergi dan mendapati
apa yang ia cari.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName adalah
hampir sama dalam semangat.

163
00:07:59,290 --> 00:08:02,500
Mungkin ini akan mendapati semua
tag berani atau semua p tag

164
00:08:02,500 --> 00:08:05,920
dan memberikan saya pelbagai segala-galanya
bahawa saya kemudiannya boleh bekerja dengan.

165
00:08:05,920 --> 00:08:12,080
appendChild menambah sesuatu
satu tahap ke bawah di pokok itu.

166
00:08:12,080 --> 00:08:16,440
>> Jadi saya boleh menambah keseluruhan baru
elemen satu tahap yang lebih rendah.

167
00:08:16,440 --> 00:08:19,700
Atau saya boleh mengeluarkan unsur itulah
satu tahap yang lebih rendah dan juga jika saya mahu

168
00:08:19,700 --> 00:08:22,870
untuk memadam sesuatu dari laman web saya.

169
00:08:22,870 --> 00:08:28,480
Sekarang, komen pengekodan yang cepat dan cepat
sakit kepala penjimatan nota, mudah-mudahan.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- d adalah huruf kecil.

171
00:08:31,670 --> 00:08:36,950
Saya tidak boleh memberitahu anda berapa banyak kali saya mempunyai
digunakan getElementById dan modal yang mencukupi

172
00:08:36,950 --> 00:08:38,336
d di sana.

173
00:08:38,336 --> 00:08:39,460
Oleh kerana ia benar-benar sama.

174
00:08:39,460 --> 00:08:42,990
Jika kita menulis ID perkataan, ia
biasanya ibu saya modal D.

175
00:08:42,990 --> 00:08:44,240
Dan kod saya hanya tidak berfungsi.

176
00:08:44,240 --> 00:08:45,630
Dan saya tidak dapat memikirkan mengapa.

177
00:08:45,630 --> 00:08:49,490
Ini adalah benar-benar, benar-benar, benar-benar
bug umum bahawa semua orang membuat,

178
00:08:49,490 --> 00:08:51,890
juga pakar-pakar yang mempunyai
telah melakukan ini selama-lamanya.

179
00:08:51,890 --> 00:08:55,410
Jadi hanya sedar, getElementById,
d yang kecil.

180
00:08:55,410 --> 00:09:00,080
Dan mudah-mudahan, yang menjimatkan anda beberapa
minit sekurang-kurangnya sakit hati.

181
00:09:00,080 --> 00:09:02,204
>> Jadi, apa yang semua ini kepada kita?

182
00:09:02,204 --> 00:09:03,120
Kami mempunyai kaedah ini.

183
00:09:03,120 --> 00:09:04,161
Kami mempunyai sifat-sifat ini.

184
00:09:04,161 --> 00:09:06,610
Sekarang, jika kita bermula dari
dokumen, dokumen.

185
00:09:06,610 --> 00:09:10,220
apa sahaja, kita kini boleh ke mana-mana
sekeping laman web kami

186
00:09:10,220 --> 00:09:14,870
yang kita mahu menggunakan JavaScript
hanya dengan memanggil ini kaedah

187
00:09:14,870 --> 00:09:19,940
dan menggunakan sifat-sifat
yang kita dapati di pelbagai lokasi.

188
00:09:19,940 --> 00:09:24,890
>> Ini boleh mendapatkan panjang lebar, ini
document.getElementByID,

189
00:09:24,890 --> 00:09:28,560
mungkin mempunyai tag nama yang panjang,
mungkin anda melakukan lebih banyak panggilan di kemudian hari.

190
00:09:28,560 --> 00:09:31,230
Perkara yang boleh mendapatkan sedikit panjang lebar.

191
00:09:31,230 --> 00:09:34,480
Dan sebagai pengatur cara, seperti yang anda telah
mungkin dilihat dalam banyak video ini,

192
00:09:34,480 --> 00:09:36,600
kita tidak suka perkara yang panjang lebar.

193
00:09:36,600 --> 00:09:38,520
>> Kami suka untuk dapat melakukan sesuatu dengan cepat.

194
00:09:38,520 --> 00:09:42,640
Oleh itu, kita mahu yang lebih
cara ringkas untuk mengatakan sesuatu.

195
00:09:42,640 --> 00:09:46,270
Jadi seperti ini membawa kepada
tanggapan sesuatu yang dipanggil jQuery.

196
00:09:46,270 --> 00:09:49,170
Sekarang jQuery tidak JavaScript.

197
00:09:49,170 --> 00:09:50,350
Ia bukan sebahagian daripada JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Ia adalah perpustakaan yang ditulis
oleh beberapa pengaturcara JavaScript

199
00:09:54,790 --> 00:09:57,060
kira-kira 10 tahun yang lalu.

200
00:09:57,060 --> 00:10:01,300
Dan matlamatnya adalah untuk memudahkan ini apa yang
dipanggil pelanggan skrip sampingan, yang

201
00:10:01,300 --> 00:10:04,310
pada asasnya apa yang kami cuba
bercakap mengenai dengan manipulasi DOM.

202
00:10:04,310 --> 00:10:11,090
Dan jadi jika saya mahu mengubah suai
warna latar belakang laman web saya, mungkin

203
00:10:11,090 --> 00:10:11,980
yang Div tertentu.

204
00:10:11,980 --> 00:10:15,325
>> Di sini, saya nampaknya semakin
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Dan saya mahu untuk menetapkan warna latar belakang.

206
00:10:16,950 --> 00:10:20,720
Jika saya hanya menggunakan tulen JavaScript
menggunakan Document Object Model,

207
00:10:20,720 --> 00:10:23,990
itulah banyak perkara, bukan?
document.getElementByID

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor = hijau.

209
00:10:25,531 --> 00:10:27,260

210
00:10:27,260 --> 00:10:28,050
>> Huh.

211
00:10:28,050 --> 00:10:30,110
Itu adalah banyak untuk mengatakan.

212
00:10:30,110 --> 00:10:31,720
Ia banyak menaip, juga.

213
00:10:31,720 --> 00:10:35,760
Dan sebagainya dalam jQuery, kita mungkin boleh mengatakan
ini sedikit lebih ringkas.

214
00:10:35,760 --> 00:10:39,350
Perdagangan luar yang ia mungkin sedikit
sedikit lebih samar tiba-tiba,

215
00:10:39,350 --> 00:10:39,850
bukan?

216
00:10:39,850 --> 00:10:43,580
>> Sekurang-kurangnya masa panjang adalah sedikit lebih
Penjelasan tentang apa yang kami lakukan.

217
00:10:43,580 --> 00:10:49,947
Ini tanda dolar, kurungan,
petikan tunggal, hash, colorDiv, bukan?

218
00:10:49,947 --> 00:10:50,780
Apa maksudnya?

219
00:10:50,780 --> 00:10:53,640
Nah, itu pada dasarnya hanya
document.getElementByID colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Tetapi ia seperti ini trengkas
cara melakukannya menggunakan jQuery.

221
00:10:58,700 --> 00:11:01,380
Mari kita lihat sekarang
pada beberapa cara yang berbeza

222
00:11:01,380 --> 00:11:04,520
sehingga aku dapat sebenarnya
menggunakan Document Object ini

223
00:11:04,520 --> 00:11:06,807
Model untuk memanipulasi keping laman saya.

224
00:11:06,807 --> 00:11:09,140
Khususnya, kita akan
untuk bekerja pada memanipulasi

225
00:11:09,140 --> 00:11:14,090
warna tertentu
Div, colorDiv, pada laman web.

226
00:11:14,090 --> 00:11:15,299
Jadi mari kita lihat itu.

227
00:11:15,299 --> 00:11:15,798
Baiklah.

228
00:11:15,798 --> 00:11:16,700
Jadi saya pada halaman.

229
00:11:16,700 --> 00:11:20,750
Ia dipanggil test.html apabila anda memuat turun
ini jika anda mahu untuk bermain-main dengan ini.

230
00:11:20,750 --> 00:11:24,730
Dan saya telah mendapat sekumpulan
butang pada halaman ini.

231
00:11:24,730 --> 00:11:27,730
Dan saya katakan fungsi individu
untuk warna latar belakang, ungu, hijau,

232
00:11:27,730 --> 00:11:31,330
oren, merah, biru, satu fungsi tunggal
untuk warna latar belakang, pengendali acara

233
00:11:31,330 --> 00:11:34,360
untuk warna latar belakang, dan menggunakan jQuery.

234
00:11:34,360 --> 00:11:38,147
Apa yang saya bercakap tentang
apabila saya melakukan ini?

235
00:11:38,147 --> 00:11:39,230
Oleh itu, kita telah melihat butang.

236
00:11:39,230 --> 00:11:41,521
Sekarang, mari kita lihat pada
beberapa kod sumber di sini.

237
00:11:41,521 --> 00:11:44,770
Kami akan bermula dengan test.html.

238
00:11:44,770 --> 00:11:48,100
Fungsi yang individu untuk latar belakang
warna adalah apa yang saya telah ditaip di sini.

239
00:11:48,100 --> 00:11:49,350
Biar saya tatal sedikit.

240
00:11:49,350 --> 00:11:56,170

241
00:11:56,170 --> 00:11:58,820
>> Dan anda akan melihat bahawa saya
telah ditakrifkan butang ini

242
00:11:58,820 --> 00:12:03,990
untuk mengatakan apabila butang ini diklik,
memanggil fungsi menghidupkan ungu.

243
00:12:03,990 --> 00:12:06,670
Apabila butang ini klik, sebaliknya,
memanggil fungsi yang bertukar hijau,

244
00:12:06,670 --> 00:12:08,710
bertukar oren, menjadi merah, bertukar menjadi biru.

245
00:12:08,710 --> 00:12:11,880
Anda mungkin boleh meneka bahawa ini
mungkin tidak reka bentuk yang terbaik

246
00:12:11,880 --> 00:12:12,460
rasa, bukan?

247
00:12:12,460 --> 00:12:16,490
>> Akan lebih baik jika saya boleh
mempunyai pendekatan yang lebih umum.

248
00:12:16,490 --> 00:12:19,570
Well, pertama kita akan melihat dengan
apa yang mereka lima fungsi adalah

249
00:12:19,570 --> 00:12:24,400
document.getElementByID
colorDiv.style.background = ungu,

250
00:12:24,400 --> 00:12:27,250
hijau, oren, merah,
dan biru, masing-masing.

251
00:12:27,250 --> 00:12:30,930
Jadi, tidak terutamanya reka bentuk yang terbaik.

252
00:12:30,930 --> 00:12:33,390
>> Set seterusnya butang
Saya adalah saya telah menulis

253
00:12:33,390 --> 00:12:36,380
fungsi tunggal dipanggil
menukar warna yang nampaknya

254
00:12:36,380 --> 00:12:38,960
menerima rentetan sebagai hujah.

255
00:12:38,960 --> 00:12:40,290
Jadi ini adalah sedikit lebih baik.

256
00:12:40,290 --> 00:12:43,840
Ungu, hijau, oren, merah,
biru kini pertengkaran.

257
00:12:43,840 --> 00:12:46,230
Oleh itu, saya telah menulis yang lebih umum
kes JavaScript fungsi,

258
00:12:46,230 --> 00:12:47,771
yang mungkin kelihatan seperti ini.

259
00:12:47,771 --> 00:12:48,680
Saya lulus dalam.

260
00:12:48,680 --> 00:12:52,090
Ini perubahan warna berfungsi
menjangkakan hujah dipanggil warna.

261
00:12:52,090 --> 00:12:54,970
Dan saya katakan menetapkan
warna latar belakang untuk warna.

262
00:12:54,970 --> 00:12:58,390
Jadi di sini mewakili apa yang saya dapat di sini.

263
00:12:58,390 --> 00:12:59,770
Jadi itu sedikit lebih baik.

264
00:12:59,770 --> 00:13:02,740
>> Tetapi saya mungkin dapat
melakukan lebih baik daripada itu.

265
00:13:02,740 --> 00:13:06,140
Jika kita turun untuk melihat dengan
pada keadaan pengendali peristiwa,

266
00:13:06,140 --> 00:13:07,860
kini semua panggilan ini kelihatan sama.

267
00:13:07,860 --> 00:13:10,340
Jika anda masih ingat untuk kami
perbincangan mengenai pengendali acara,

268
00:13:10,340 --> 00:13:15,770
Saya boleh mendapatkan maklumat tentang mana-mana
butang ini diklik dan menggunakannya.

269
00:13:15,770 --> 00:13:19,560
>> Dan sebagainya dalam event.JavaScript, saya telah
ditulis peristiwa perubahan warna, yang

270
00:13:19,560 --> 00:13:21,110
angka butang yang diklik.

271
00:13:21,110 --> 00:13:23,250
Itulah garis pencetus objek.

272
00:13:23,250 --> 00:13:25,240
Dan kemudian di sini, ia akan benar-benar panjang lebar.

273
00:13:25,240 --> 00:13:27,420
Tetapi apa yang saya lakukan ialah saya
menetapkan latar belakang

274
00:13:27,420 --> 00:13:30,340
warna untuk triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Itulah teks dalam
antara tag butang.

276
00:13:34,170 --> 00:13:36,500
>> Dan kemudian saya nampaknya mempunyai
untuk menetapkan ia kepada huruf kecil.

277
00:13:36,500 --> 00:13:40,780
Dan itulah bagaimana saya boleh menukar keseluruhan yang
rentetan kepada huruf kecil dalam JavaScript menggunakan

278
00:13:40,780 --> 00:13:42,940
kaedah yang kepada huruf kecil.

279
00:13:42,940 --> 00:13:46,570
Kerana apabila saya menetapkan warna,
kerana saya cuba lakukan di sini,

280
00:13:46,570 --> 00:13:48,260
warna yang telah menjadi semua huruf kecil.

281
00:13:48,260 --> 00:13:50,920
>> Tetapi butang yang saya,
jika kita lihat satu lagi,

282
00:13:50,920 --> 00:13:55,890
melihat bahawa teks yang ada
ditulis dengan modal P secara ungu.

283
00:13:55,890 --> 00:13:59,140
Dan kemudian sekurang-
bawah di sini, saya nampaknya

284
00:13:59,140 --> 00:14:02,630
mencuba dan melakukan ini dengan menggunakan jQuery juga.

285
00:14:02,630 --> 00:14:06,000
Dan dalam kes ini, saya tidak benar-benar
memanggil fungsi sama sekali.

286
00:14:06,000 --> 00:14:11,430
Saya baru sahaja berkata kelas bahawa saya
menggunakan untuk butang ini butang JQ.

287
00:14:11,430 --> 00:14:12,360
Itu sahaja.

288
00:14:12,360 --> 00:14:14,950
>> Jadi bagaimana jQuery tahu apa yang saya buat?

289
00:14:14,950 --> 00:14:18,740
Nah, ini adalah salah satu kelebihan
mengurangkan keburukan jQuery.

290
00:14:18,740 --> 00:14:21,560
Ia boleh membenarkan saya untuk melakukan perkara-perkara
sangat ringkas, tetapi mungkin tidak

291
00:14:21,560 --> 00:14:22,570
sebagai gerak hati.

292
00:14:22,570 --> 00:14:25,570
Mungkin ketiga-tiga yang lain membuat
sedikit lebih rasa apa yang saya lakukan.

293
00:14:25,570 --> 00:14:29,010
Di sini, walaupun, apa yang berlaku?

294
00:14:29,010 --> 00:14:31,940
>> Rupa-rupanya, mewujudkan
fungsi tanpa nama

295
00:14:31,940 --> 00:14:36,790
yang beban apabila dokumen saya
bersedia, jadi document.ready,

296
00:14:36,790 --> 00:14:38,760
beberapa fungsi yang akan berlaku.

297
00:14:38,760 --> 00:14:40,490
Pada asasnya, apabila adalah dokumen yang bersedia?

298
00:14:40,490 --> 00:14:42,310
Ia adalah apabila halaman saya telah dimuatkan.

299
00:14:42,310 --> 00:14:46,540
>> Jadi sebaik sahaja halaman saya telah dimuatkan,
berikut fungsi sentiasa bersedia.

300
00:14:46,540 --> 00:14:54,310
Ia mengatakan, jika suatu objek jenis jQButton,
atau jika kelas jQButton telah diklik,

301
00:14:54,310 --> 00:14:55,570
melaksanakan fungsi ini.

302
00:14:55,570 --> 00:14:59,360
Jadi di sini adalah dua fungsi tanpa nama,
salah ditakrifkan dalam yang lain.

303
00:14:59,360 --> 00:15:03,930
>> Maka segenap konteks saya
di sini setakat ini adalah halaman saya

304
00:15:03,930 --> 00:15:06,520
apabila ia memuatkan ia memerlukan fungsi ini.

305
00:15:06,520 --> 00:15:09,740
Dan fungsi ini sedang menunggu
untuk butang yang akan diklik.

306
00:15:09,740 --> 00:15:14,490
Dan apabila butang diklik, JQ
butang khusus diklik,

307
00:15:14,490 --> 00:15:17,150
ia memerlukan ini lain
fungsi, yang akan

308
00:15:17,150 --> 00:15:21,250
untuk menetapkan latar belakang
warna colorDiv menjadi

309
00:15:21,250 --> 00:15:25,990
apa sahaja teks adalah di antara tag.

310
00:15:25,990 --> 00:15:28,050
>> Ini adalah tanggapan
butang yang diklik.

311
00:15:28,050 --> 00:15:31,230
Tetapi jika tidak, ini adalah jenis
berkelakuan serupa dengan peristiwa.

312
00:15:31,230 --> 00:15:34,460
Ia hanya cara yang sama saya
akan menyatakan ini dalam jQuery.

313
00:15:34,460 --> 00:15:36,790
Sekali lagi, ia mungkin
banyak lagi menakutkan.

314
00:15:36,790 --> 00:15:40,840
Ia bukan seperti yang jelas
sesuatu seperti event.js,

315
00:15:40,840 --> 00:15:45,080
yang mungkin sedikit lebih
banyak cakap, tetapi sedikit kurang

316
00:15:45,080 --> 00:15:46,000
menakutkan.

317
00:15:46,000 --> 00:15:51,460
>> Tetapi jika kita pop kembali ke penyemak imbas saya
tingkap, jika saya mula clicking-- baik,

318
00:15:51,460 --> 00:15:52,690
yang ditukar kepada ungu.

319
00:15:52,690 --> 00:15:54,450
Ini adalah hijau menggunakan kaedah tali.

320
00:15:54,450 --> 00:15:56,500
Ini adalah oren menggunakan pengendali acara tersebut.

321
00:15:56,500 --> 00:15:58,300
>> Ini adalah merah menggunakan jQuery, bukan?

322
00:15:58,300 --> 00:16:01,270
Mereka semua berkelakuan sama.

323
00:16:01,270 --> 00:16:06,509
Mereka hanya melakukannya menggunakan berbeza
pendekatan untuk menyelesaikan masalah tersebut.

324
00:16:06,509 --> 00:16:08,550
Ada banyak lagi yang
jQuery maka kita pasti

325
00:16:08,550 --> 00:16:10,050
akan bercakap tentang dalam video ini.

326
00:16:10,050 --> 00:16:15,410
Tetapi jika anda ingin mengetahui lebih lanjut, anda boleh
pergi ke jenis jQuery dokumentasi

327
00:16:15,410 --> 00:16:19,710
dan belajar agak sedikit lebih lanjut mengenai
perpustakaan sangat fleksibel ini, yang

328
00:16:19,710 --> 00:16:22,550
besar untuk melakukan sebelah pelanggan
skrip seperti apa yang kami lakukan

329
00:16:22,550 --> 00:16:26,240
untuk memanipulasi rupa
dan rasa laman web kami

330
00:16:26,240 --> 00:16:28,750
dengan Document Object Model.

331
00:16:28,750 --> 00:16:29,650
Saya Doug Lloyd.

332
00:16:29,650 --> 00:16:31,930
Ini adalah CS50.

333
00:16:31,930 --> 00:16:34,022