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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: Selle video, tahtsime
kutsuda välja eraldi tähelepanu

3
00:00:07,230 --> 00:00:09,110
väga erilist
element JavaScript

4
00:00:09,110 --> 00:00:11,350
et te võite leida mugav
Kui sa oled hakanud

5
00:00:11,350 --> 00:00:15,750
tööd manipuleerides veebilehti ja
muutuva sisu oma veebilehel

6
00:00:15,750 --> 00:00:16,460
lennult.

7
00:00:16,460 --> 00:00:19,450
Ja see mõiste
Dokumendi Object Model.

8
00:00:19,450 --> 00:00:23,030
Nii nagu me nägime meie video
JavaScript objektid on väga paindlik.

9
00:00:23,030 --> 00:00:24,750
>> Ja nad võivad sisaldada erinevates valdkondades.

10
00:00:24,750 --> 00:00:28,075
Ja kuigi me ei lähe palju
detail, nende valdkondade või omadused,

11
00:00:28,075 --> 00:00:30,200
et meil oleks ilmselt rohkem
asjakohaselt nimetame neid

12
00:00:30,200 --> 00:00:33,915
kontekstis objekti isegi
Neil omadused võivad olla muud esemed.

13
00:00:33,915 --> 00:00:36,210
Ja sees nende objektide
võib olla muid esemeid.

14
00:00:36,210 --> 00:00:39,630
>> Sul on see väga suur objekt
palju muud objektid

15
00:00:39,630 --> 00:00:43,550
sees on, mis sorti
loob see idee suur puu.

16
00:00:43,550 --> 00:00:47,540
Nüüd dokumendi eesmärk on
Väga eriline objekt JavaScript

17
00:00:47,540 --> 00:00:52,580
mis korraldab kogu oma veebi
lehekülje all selline vihmavari

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

19
00:00:53,470 --> 00:00:56,770
Ja nii seest dokumendi
objekti on esemeid,

20
00:00:56,770 --> 00:00:59,630
pea ja keha oma veebilehel.

21
00:00:59,630 --> 00:01:03,760
>> Toas neist on teistest
esemeid, jne, jne,

22
00:01:03,760 --> 00:01:08,411
kuni kogu oma veebilehel on
korraldati see suur objekt.

23
00:01:08,411 --> 00:01:09,660
Mis on tagurpidi siin, eks?

24
00:01:09,660 --> 00:01:12,170
Noh, me teame, kuidas töötada
esemetega JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Nii et kui meil on objekt, mis
viitab kogu meie veebilehel, et

26
00:01:15,840 --> 00:01:19,590
tähendab helistades õige
meetodeid manipuleerida, et objekti

27
00:01:19,590 --> 00:01:22,360
või muuta teatavaid
tema omaduste me

28
00:01:22,360 --> 00:01:25,500
saab muuta elemendid
Meie lehel programmiliselt

29
00:01:25,500 --> 00:01:30,210
kasutades JavaScript asemel
koodi asju, ütleme, HTML.

30
00:01:30,210 --> 00:01:33,760
Nii et siin on näide
väga lihtne veebileht, eks?

31
00:01:33,760 --> 00:01:35,850
See sai HTML sildid, pea.

32
00:01:35,850 --> 00:01:37,979
>> Toas on pealkiri, tere.

33
00:01:37,979 --> 00:01:38,770
Siis mul on keha.

34
00:01:38,770 --> 00:01:40,686
Toas, et mul on
kolm erinevat asja.

35
00:01:40,686 --> 00:01:44,170
Mul on H2 header tag,
Lõigu ja link.

36
00:01:44,170 --> 00:01:45,920
See on väga lihtne veebilehele.

37
00:01:45,920 --> 00:01:48,590
>> Noh, mis võib dokumendi
vastuväiteid selle välja?

38
00:01:48,590 --> 00:01:50,700
Noh, see on natuke
hirmutav võibolla alguses.

39
00:01:50,700 --> 00:01:52,510
Aga see on tõesti ainult üks suur puu.

40
00:01:52,510 --> 00:01:54,890
Ja juurteni see dokument.

41
00:01:54,890 --> 00:02:00,030
>> Toas dokumendi on teine
objekti viidates HTML minu lehele.

42
00:02:00,030 --> 00:02:02,660
Ja HTML minu leheküljel on see kõik.

43
00:02:02,660 --> 00:02:06,900
Ja siis sisemust HTML
objekti, mul on peas objekti,

44
00:02:06,900 --> 00:02:09,000
mis viitab kõik olemas.

45
00:02:09,000 --> 00:02:11,009
>> Ja sees on,
Mul on pealkiri objekti.

46
00:02:11,009 --> 00:02:15,620
Ja sees on, mul on teine
vastuväiteid, mis on lihtsalt tere.

47
00:02:15,620 --> 00:02:18,020
Oleksin võinud minu keha
esindatud niimoodi.

48
00:02:18,020 --> 00:02:22,850
>> Toas mu keha on mul h2
objekti ja p objekti lõikes

49
00:02:22,850 --> 00:02:25,270
ja A objekti link.

50
00:02:25,270 --> 00:02:29,660
Ja nii see kogu hierarhia
võib olla esindatud suur puu

51
00:02:29,660 --> 00:02:31,990
palju väiksem vähe
asjad tulevad välja.

52
00:02:31,990 --> 00:02:33,740
Nüüd muidugi, kui
me programmeerimine, me

53
00:02:33,740 --> 00:02:35,560
ei usu asju nagu suur puu.

54
00:02:35,560 --> 00:02:37,980
Me tahame näha tegelikku
koodi seotud asju.

55
00:02:37,980 --> 00:02:40,790
>> Ja õnneks saame
kasutada meie arendaja tööriistad

56
00:02:40,790 --> 00:02:46,080
tegelikult vaatleme
Selle veebilehe dokumendi objekti.

57
00:02:46,080 --> 00:02:48,150
Ja olgem teha.

58
00:02:48,150 --> 00:02:49,580
Nii et ma olen avanud brauseri tab.

59
00:02:49,580 --> 00:02:51,540
>> Ja ma olen avanud Developer Tools.

60
00:02:51,540 --> 00:02:54,460
Ja minu video JavaScript, ma
mainitud, et konsool ei ole

61
00:02:54,460 --> 00:02:56,770
ainult kuskil kus
Me printida info

62
00:02:56,770 --> 00:02:59,560
see on ka koht, kus
saame infot sisestada.

63
00:02:59,560 --> 00:03:01,380
Selles kontekstis, mida
Ma ütlen on

64
00:03:01,380 --> 00:03:05,720
Tahaksin saada tagasi
Dokumendi objektid

65
00:03:05,720 --> 00:03:07,502
nii et ma ei hakka on pilk see.

66
00:03:07,502 --> 00:03:08,460
Niisiis, kuidas võiks seda teha?

67
00:03:08,460 --> 00:03:10,740
Noh, kui ma tahan
korraldab ta tõesti kenasti,

68
00:03:10,740 --> 00:03:16,317
Ma ütlen console.dir, D-I-R.
Nüüd ma kasutan console.log lihtsalt print

69
00:03:16,317 --> 00:03:17,400
välja midagi väga lihtne.

70
00:03:17,400 --> 00:03:20,450
Aga kui ma tahan korraldada selle
hierarhiliselt nagu objekti,

71
00:03:20,450 --> 00:03:23,800
Ma tahan, et see mingi struktureeritud
nagu kataloogide struktuur.

72
00:03:23,800 --> 00:03:27,400
>> Nii et ma tahan console.dir dokument.

73
00:03:27,400 --> 00:03:28,430
Ma lähen Enter.

74
00:03:28,430 --> 00:03:32,350
Ja just selle all nüüd,
ja ma suumida siin

75
00:03:32,350 --> 00:03:36,000
Mul see vastus dokument
vähe noolt ta.

76
00:03:36,000 --> 00:03:39,470
Nüüd, kui ma avada see nool,
seal saab olema palju asju.

77
00:03:39,470 --> 00:03:42,560
>> Aga me ei kavatse ignoreerida palju
seda ja lihtsalt selline fookuses

78
00:03:42,560 --> 00:03:46,250
kõige tähtsam osa, nii et me
võib alata liikuda selles dokumendis.

79
00:03:46,250 --> 00:03:50,125
Seal on palju rohkem DOM kui
lihtsalt vanem sõlmed ja tütartippu.

80
00:03:50,125 --> 00:03:51,500
Seal on palju lisateenuste kraami.

81
00:03:51,500 --> 00:03:52,280
>> Nii et ma lähen avada selle üles.

82
00:03:52,280 --> 00:03:54,610
Ja seal on palju
asju, mis hüppab.

83
00:03:54,610 --> 00:03:59,000
Aga ma hoolin
siinsamas, tütartippu.

84
00:03:59,000 --> 00:04:00,410
Avame selle üles.

85
00:04:00,410 --> 00:04:03,810
>> Toas on Näen
midagi tuttav, HTML.

86
00:04:03,810 --> 00:04:07,670
Nii sees meie dokumenti
ühe taseme alla, HTML.

87
00:04:07,670 --> 00:04:08,550
Ma avan, et üles.

88
00:04:08,550 --> 00:04:10,380
Mida me oodanud?

89
00:04:10,380 --> 00:04:13,760
>> Kui te mäletate meie diagramm,
mida me peaksime leidma sees HTML?

90
00:04:13,760 --> 00:04:17,275
Mis kaks tipud on alla see puu?

91
00:04:17,275 --> 00:04:17,899
Uurime välja.

92
00:04:17,899 --> 00:04:18,940
Me avada HTML.

93
00:04:18,940 --> 00:04:22,079
Me läheme oma tütartippu.

94
00:04:22,079 --> 00:04:23,440
>> Pop, et avatud.

95
00:04:23,440 --> 00:04:25,990
Ei pea ja keha.

96
00:04:25,990 --> 00:04:28,540
Ja me saame avada pea.

97
00:04:28,540 --> 00:04:30,460
Mine oma lapse sõlmed.

98
00:04:30,460 --> 00:04:31,460
Noh, seal on pealkiri.

99
00:04:31,460 --> 00:04:33,293
>> Ja me võiks minna ja
niimoodi igavesti.

100
00:04:33,293 --> 00:04:34,770
Me võiksime seda teha keha samuti.

101
00:04:34,770 --> 00:04:40,090
Aga seal on nii, et meid vaadata
Dokumendi korraldatud suur objekt.

102
00:04:40,090 --> 00:04:42,610
Ja kui me vaatame, on suur
objekt, mis tundub palju

103
00:04:42,610 --> 00:04:47,480
nagu kood, mis tähendab, et saame alustada
manipuleerida see suur objekt kasutades

104
00:04:47,480 --> 00:04:51,220
koodi muuta seda, mida meie
veebileht näeb välja nagu.

105
00:04:51,220 --> 00:04:54,920
>> Nii et on üsna võimas vahend
meil meie käsutuses nüüd.

106
00:04:54,920 --> 00:04:57,360
Nii nagu me just nägin, siis
dokumendi objekt ise

107
00:04:57,360 --> 00:05:01,392
ja kõik objektid sees on
on omadused ja meetodid, vaid

108
00:05:01,392 --> 00:05:04,100
nagu iga muu objekt, mis me oleme
töötanud JavaScript.

109
00:05:04,100 --> 00:05:08,370
Kuid me ei kasuta neid omadusi ja
neid meetodeid kasutama, et mingisugune drill down

110
00:05:08,370 --> 00:05:10,900
suurelt dokument ja saada
madalam ja väiksem ja väiksem,

111
00:05:10,900 --> 00:05:13,360
peenem ja peenem tera
üksikasjalikult, kuni me

112
00:05:13,360 --> 00:05:17,510
saada väga konkreetne tükk meie
veebilehe, et me tahame muuta.

113
00:05:17,510 --> 00:05:22,700
>> Ja kui me värskendame omadused
Dokumendi eesmärk või helistage need meetodid,

114
00:05:22,700 --> 00:05:24,450
asju võib juhtuda meie veebilehel.

115
00:05:24,450 --> 00:05:28,420
Ja me ei pea tegema muud värskendav
on need muudatused jõustuvad.

116
00:05:28,420 --> 00:05:33,160
>> Ja see on päris lahe oskus
on, kui me töötame koos koodiga.

117
00:05:33,160 --> 00:05:37,185
Millised on mõned neist omadustest
mis on osa dokumendist objekti?

118
00:05:37,185 --> 00:05:40,100
Noh, siis ilmselt nägi
Paar neist tõesti kiiresti

119
00:05:40,100 --> 00:05:42,700
kui olime zipping
läbi hiiglane dokument

120
00:05:42,700 --> 00:05:45,150
objekti me lihtsalt nägin veebilehitsejat.

121
00:05:45,150 --> 00:05:48,420
>> Aga paar neist omadustest
Võib olla asjad sisemine HTML.

122
00:05:48,420 --> 00:05:52,950
Ja võite isegi meenutada mind
kasutades seda JavaScripti video

123
00:05:52,950 --> 00:05:54,950
päris lõpus, kui ma
rääkis sündmused.

124
00:05:54,950 --> 00:05:56,125
Mis oli selle sisemise HTML?

125
00:05:56,125 --> 00:05:59,030
Noh, see on just see, mida on
vahel sildid.

126
00:05:59,030 --> 00:06:01,590
>> Ja nii sisemine HTML,
näiteks pealkirja

127
00:06:01,590 --> 00:06:05,390
tag, kui oleksime elus hoida
et näiteks hetk tagasi,

128
00:06:05,390 --> 00:06:08,020
oleks tere.

129
00:06:08,020 --> 00:06:10,140
See pealkiri oli meie lehele.

130
00:06:10,140 --> 00:06:12,370
Muud omadused
lisada sõlme nimi, mis

131
00:06:12,370 --> 00:06:15,810
on nimi HTML
element nagu pealkiri.

132
00:06:15,810 --> 00:06:19,100
ID, mis on ID
atribuut HTML element.

133
00:06:19,100 --> 00:06:23,790
>> Tuletame meelde, et saame spetsiaalselt näitavad
konkreetsete elementide meie HTML

134
00:06:23,790 --> 00:06:27,510
ID-atribuudi, mis tavaliselt
on käepärane kontekstis CSS,

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

136
00:06:29,000 --> 00:06:33,217
Vanem sõlme, mis on viide
Mis on lihtsalt ülevalt mind DOM.

137
00:06:33,217 --> 00:06:35,800
Ja tütartippu, mis on
viide, mis on allapoole mind.

138
00:06:35,800 --> 00:06:37,950
Ja me nägime palju, et
lihtsalt vaatasin läbi.

139
00:06:37,950 --> 00:06:42,970
Lapse sõlmed, see on, kuidas me saime
alandab tüvesse.

140
00:06:42,970 --> 00:06:46,590
>> Omadused, mis on lihtsalt massiivi
atribuute HTML element.

141
00:06:46,590 --> 00:06:50,270
Nii näiteks atribuutide might
olla, kui sul on pilt tag,

142
00:06:50,270 --> 00:06:54,090
see on tavaliselt allikas atribuut,
võibolla kõrgus ja laius atribuut.

143
00:06:54,090 --> 00:06:57,120
Ja nii, et oleks lihtsalt massiivi
Kõike atribuutidega seotud

144
00:06:57,120 --> 00:06:59,300
selle HTML element.

145
00:06:59,300 --> 00:07:04,140
>> Stiil on veel üks, et
ei esinda CSS

146
00:07:04,140 --> 00:07:06,050
stiil teatud element.

147
00:07:06,050 --> 00:07:08,310
Ja hiljem selles
video, siis me eriti

148
00:07:08,310 --> 00:07:14,592
võimendav stiili teha paar
muudatusi meie veebilehel.

149
00:07:14,592 --> 00:07:15,800
Nii et need on mõned omadused.

150
00:07:15,800 --> 00:07:17,591
>> Ja on ka mõned
meetodeid, et suudame

151
00:07:17,591 --> 00:07:22,450
kasutada ka kiiremini võibolla isoleerida
elemendid Document Object.

152
00:07:22,450 --> 00:07:26,730
Ehk kõige mitmekülgsem
neist on getElementByld.

153
00:07:26,730 --> 00:07:31,190
Nii et ma võiks öelda midagi sellist, sest
mäletan, et see on meetod dokumendi

154
00:07:31,190 --> 00:07:34,880
Objekti, document.getElementById.

155
00:07:34,880 --> 00:07:39,820
>> Ja sees need sulgudesse, täpsustada
HTML element konkreetse ID

156
00:07:39,820 --> 00:07:42,330
atribuut, et olen varem
määrata, ja ma kohe

157
00:07:42,330 --> 00:07:46,685
lähen kohe, et element
üldise veebilehel.

158
00:07:46,685 --> 00:07:49,310
Nii et ma ei pea äkki puurida
ette läbi iga kihi.

159
00:07:49,310 --> 00:07:52,841
Ma lihtsalt kasutada seda meetodit, et leida see,
omamoodi nagu soojus seeking rakett,

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

161
00:07:53,340 --> 00:07:56,300
See lihtsalt läheb ja leiab
täpselt, mida see otsinud.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName on
väga sarnase sisuga.

163
00:07:59,290 --> 00:08:02,500
Võib-olla see leiaks kõik
rasvases silte või kõik p silte

164
00:08:02,500 --> 00:08:05,920
ja anna mulle hulgaliselt kõike
et ma võiks siis töötada.

165
00:08:05,920 --> 00:08:12,080
appendChild lisab midagi
ühe taseme alla puu.

166
00:08:12,080 --> 00:08:16,440
>> Nii võin ka kogu uus
element ühe taseme madalam.

167
00:08:16,440 --> 00:08:19,700
Või ma ei saa eemaldada element, mis on
ühe taseme alumise kui ka siis, kui ma tahan

168
00:08:19,700 --> 00:08:22,870
kustutada midagi minu veebilehele.

169
00:08:22,870 --> 00:08:28,480
Nüüd, kiire kodeerimine märkuse ja kiire
peavalu säästa märkus, loodetavasti.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- d on väiketähed.

171
00:08:31,670 --> 00:08:36,950
Ma ei saa öelda, mitu korda ma pean
Kasutatud getElementByld ja kapitaliseeritud

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

173
00:08:38,336 --> 00:08:39,460
Sest see on tõesti levinud.

174
00:08:39,460 --> 00:08:42,990
Kui me kirjutame sõna ID, see on
Tavaliselt kapital Ma kapitali D.

175
00:08:42,990 --> 00:08:44,240
Ja minu kood lihtsalt ei tööta.

176
00:08:44,240 --> 00:08:45,630
Ja ma ei saa aru, miks.

177
00:08:45,630 --> 00:08:49,490
See on tõesti, tõesti, tõesti
ühine viga, mida kõik teeb,

178
00:08:49,490 --> 00:08:51,890
isegi eksperdid, kes on
teinud seda igavesti.

179
00:08:51,890 --> 00:08:55,410
Nii lihtsalt teadma, getElementByld,
et d on väiketähed.

180
00:08:55,410 --> 00:09:00,080
Ja loodetavasti mis säästab mitu
minut vähemalt südamevalu.

181
00:09:00,080 --> 00:09:02,204
>> Mida see kõik meile öelda?

182
00:09:02,204 --> 00:09:03,120
Meil on need meetodid.

183
00:09:03,120 --> 00:09:04,161
Meil on need omadused.

184
00:09:04,161 --> 00:09:06,610
Nüüd, kui me alustada
dokument, dokumendi.

185
00:09:06,610 --> 00:09:10,220
mida iganes, saame nüüd saada ükskõik
ühes tükis meie kodulehelt

186
00:09:10,220 --> 00:09:14,870
et me tahame kasutades JavaScript
lihtsalt helistades need meetodid

187
00:09:14,870 --> 00:09:19,940
ja võimendades omadused
et leiame eri paigus.

188
00:09:19,940 --> 00:09:24,890
>> See võib saada paljusõnaline see
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
äkki on pikk sildi nimi
äkki sa rohkem kõnesid hiljem.

190
00:09:28,560 --> 00:09:31,230
Asjad saavad natuke paljusõnaline.

191
00:09:31,230 --> 00:09:34,480
Ja nagu programmeerijad, kui olete
ilmselt näha palju neid videoid

192
00:09:34,480 --> 00:09:36,600
meile ei meeldi paljusõnaline asju.

193
00:09:36,600 --> 00:09:38,520
>> Meile meeldib, et oleks võimalik teha asju kiiremini.

194
00:09:38,520 --> 00:09:42,640
Nii et me tahaksime rohkem
lühike tee midagi öelda.

195
00:09:42,640 --> 00:09:46,270
Nii selline viib olukorrani,
Mõiste midagi, mida nimetatakse jQuery.

196
00:09:46,270 --> 00:09:49,170
Nüüd jQuery ei ole JavaScript.

197
00:09:49,170 --> 00:09:50,350
See ei ole osa JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> See on raamatukogu, mis oli kirjutatud
Mõned JavaScript programmeerijad

199
00:09:54,790 --> 00:09:57,060
umbes 10 aastat tagasi.

200
00:09:57,060 --> 00:10:01,300
Ja selle eesmärk on lihtsustada seda, mis on
nimetatakse kliendi skript, mis

201
00:10:01,300 --> 00:10:04,310
on põhimõtteliselt mida me olime lihtsalt
räägime DOM töötlusi.

202
00:10:04,310 --> 00:10:11,090
Ja nii kui ma tahtsin muuta
taustavärvi minu veebilehele, võibolla

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

204
00:10:11,980 --> 00:10:15,325
>> Siin, ma ilmselt saan
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Ja ma tahan, et määrata oma taustavärvi.

206
00:10:16,950 --> 00:10:20,720
Kui ma lihtsalt puhta JavaScript
abil Document Object Model,

207
00:10:20,720 --> 00:10:23,990
et on palju asju, eks?
document.getElementById

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

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

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

211
00:10:28,050 --> 00:10:30,110
See oli palju öelda.

212
00:10:30,110 --> 00:10:31,720
See on palju kirjutada, liiga.

213
00:10:31,720 --> 00:10:35,760
Ja nii jQuery, saame äkki öelda
see natuke rohkem lühidalt.

214
00:10:35,760 --> 00:10:39,350
Kompromiss on see võib-olla veidi
natuke rohkem segasena äkki,

215
00:10:39,350 --> 00:10:39,850
õige?

216
00:10:39,850 --> 00:10:43,580
>> Vähemalt pikk on natuke rohkem
selgituseks, et mida me teeme.

217
00:10:43,580 --> 00:10:49,947
See dollari märk, sulgudes
ülakoma, hash, colorDiv, eks?

218
00:10:49,947 --> 00:10:50,780
Mida see tähendab?

219
00:10:50,780 --> 00:10:53,640
Noh, see on põhimõtteliselt ainult
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Aga see on selline stenografist
viis seda teha kasutades jQuery.

221
00:10:58,700 --> 00:11:01,380
Võtame pilk nüüd
at paar erinevalt

222
00:11:01,380 --> 00:11:04,520
et ma võiks tegelikult
kasutada seda Document Object

223
00:11:04,520 --> 00:11:06,807
Mudel manipuleerida tükki minu koduleheküljel.

224
00:11:06,807 --> 00:11:09,140
Eelkõige me läheme
tuleb tööd manipuleerimine

225
00:11:09,140 --> 00:11:14,090
värvi konkreetse
Div, colorDiv, veebilehele.

226
00:11:14,090 --> 00:11:15,299
Võtame pilk seda.

227
00:11:15,299 --> 00:11:15,798
Hästi.

228
00:11:15,798 --> 00:11:16,700
Nii et ma olen lehel.

229
00:11:16,700 --> 00:11:20,750
Seda nimetatakse test.html kui sa alla laadida
see, kui soovid käpard seda.

230
00:11:20,750 --> 00:11:24,730
Ja mul on kamp
nupud sellel lehel.

231
00:11:24,730 --> 00:11:27,730
Ja ma räägin üksikute funktsioonide
tausta värvi, lilla, roheline,

232
00:11:27,730 --> 00:11:31,330
oranž, punane, sinine, ühe funktsiooni
tausta värvi, sündmus

233
00:11:31,330 --> 00:11:34,360
tausta värvi, ja kasutades jQuery.

234
00:11:34,360 --> 00:11:38,147
Mida ma räägin
kui ma teen seda?

235
00:11:38,147 --> 00:11:39,230
Nii oleme näinud nuppe.

236
00:11:39,230 --> 00:11:41,521
Nüüd võtame pilk
mõned lähtekoodi siin.

237
00:11:41,521 --> 00:11:44,770
Hakkame koos test.html.

238
00:11:44,770 --> 00:11:48,100
Nii üksikute funktsioonide tausta
värv on see, mida ma olen kirjutatud siin.

239
00:11:48,100 --> 00:11:49,350
Lubage mul kerida natuke.

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

241
00:11:56,170 --> 00:11:58,820
>> Ja märkad, et ma
on määratletud need nupud

242
00:11:58,820 --> 00:12:03,990
öelda, kui seda nupule vajutamist,
helistada funktsiooni sisselülitamiseks lilla.

243
00:12:03,990 --> 00:12:06,670
Kui seda nuppu klõpsata pigem
helistada funktsioon roheliseks,

244
00:12:06,670 --> 00:12:08,710
oranžiks, punaseks, siniseks.

245
00:12:08,710 --> 00:12:11,880
Sa ilmselt ära, et see
ei pruugi olla parim disain

246
00:12:11,880 --> 00:12:12,460
mõttes, eks?

247
00:12:12,460 --> 00:12:16,490
>> Oleks tore, kui suutsin
on üldisemat lähenemisviisi.

248
00:12:16,490 --> 00:12:19,570
Noh, esiteks me vaatleme
millised need viis funktsioone

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

250
00:12:24,400 --> 00:12:27,250
roheline, oranž, punane,
ja sinine võrra.

251
00:12:27,250 --> 00:12:30,930
Niisiis, ei ole eriti parima disaini.

252
00:12:30,930 --> 00:12:33,390
>> Järgmine nuppude
Mul on, olen kirjutanud

253
00:12:33,390 --> 00:12:36,380
ühe funktsiooni nimetatakse
värvi muuta, et ilmselt

254
00:12:36,380 --> 00:12:38,960
aktsepteerib stringi oma väidet.

255
00:12:38,960 --> 00:12:40,290
Nii et see on natuke parem.

256
00:12:40,290 --> 00:12:43,840
Purple, roheline, oranž, punane,
sinine on nüüd argument.

257
00:12:43,840 --> 00:12:46,230
Nii et ma olen kirjutanud üldisema
Juhul JavaScript funktsioon,

258
00:12:46,230 --> 00:12:47,771
mis võib välja midagi sellist.

259
00:12:47,771 --> 00:12:48,680
Ma möödaminnes.

260
00:12:48,680 --> 00:12:52,090
See funktsioon muutus värv on
ootab argumendina nimetatakse värvi.

261
00:12:52,090 --> 00:12:54,970
Ja ma räägin määrata
taustavärvi värvi.

262
00:12:54,970 --> 00:12:58,390
Nii et siin on, mida ma olen saanud siin.

263
00:12:58,390 --> 00:12:59,770
Nii et natuke parem.

264
00:12:59,770 --> 00:13:02,740
>> Aga ma võiks olla võimalik
teha paremini.

265
00:13:02,740 --> 00:13:06,140
Kui me läheme heita
Üritusel handler olukord,

266
00:13:06,140 --> 00:13:07,860
nüüd kõik need kõned tunduvad sama.

267
00:13:07,860 --> 00:13:10,340
Kui te mäletate meie
arutelu sündmuse käitleja,

268
00:13:10,340 --> 00:13:15,770
Ma saan informatsiooni, mis on
Nende nuppude klõpsatud ja kasutada seda.

269
00:13:15,770 --> 00:13:19,560
>> Ja nii event.JavaScript, ma olen
kirjaliku muudavad värvi sündmus, mis

270
00:13:19,560 --> 00:13:21,110
arvud, mis nuppu klõpsatud.

271
00:13:21,110 --> 00:13:23,250
See on trigger objekti line.

272
00:13:23,250 --> 00:13:25,240
Ja siis siin, see saab tõesti paljusõnaline.

273
00:13:25,240 --> 00:13:27,420
Aga mida ma teen on ma olen
milles taustal

274
00:13:27,420 --> 00:13:30,340
värvi triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
See tekst
vahel nuppu sildid.

276
00:13:34,170 --> 00:13:36,500
>> Ja siis ma ilmselt ei
seada väiketähed.

277
00:13:36,500 --> 00:13:40,780
Ja see, kuidas ma saan teisendada kogu
string väiketäheliseks JavaScript kasutades

278
00:13:40,780 --> 00:13:42,940
Selle meetodi väiketähed.

279
00:13:42,940 --> 00:13:46,570
Sest kui ma määrata värvi,
kui ma üritan teha siin,

280
00:13:46,570 --> 00:13:48,260
värv peab olema väiketähtedega.

281
00:13:48,260 --> 00:13:50,920
>> Aga nupule, et mul oli,
kui me võtame teise ilme,

282
00:13:50,920 --> 00:13:55,890
märkate, et teksti on
kirjutatud suure algustähega P lilla.

283
00:13:55,890 --> 00:13:59,140
Ja siis on väga
alumine siin, ma ilmselt

284
00:13:59,140 --> 00:14:02,630
proovida ja teha seda kasutades jQuery samuti.

285
00:14:02,630 --> 00:14:06,000
Ja sel juhul, ma ei ole tegelikult
Funktsioonide üldse.

286
00:14:06,000 --> 00:14:11,430
Ma olen lihtsalt ütles klassi, et ma olen
kasutades selleks nuppu on jQ nuppu.

287
00:14:11,430 --> 00:14:12,360
Nii see on.

288
00:14:12,360 --> 00:14:14,950
>> Niisiis, kuidas jQuery tean, mida ma teen?

289
00:14:14,950 --> 00:14:18,740
Hästi, see on üks eeliseid
kaldkriips puudused jQuery.

290
00:14:18,740 --> 00:14:21,560
See võimaldab mul teha asju
väga lühidalt, kuid võib-olla mitte

291
00:14:21,560 --> 00:14:22,570
kui intuitiivselt.

292
00:14:22,570 --> 00:14:25,570
Võib-olla need teised kolm teha
natuke rohkem tunda, mida ma teen.

293
00:14:25,570 --> 00:14:29,010
Siin küll, mis toimub?

294
00:14:29,010 --> 00:14:31,940
>> Ilmselt luua
anonüümne funktsioon

295
00:14:31,940 --> 00:14:36,790
et koormusi, kui minu dokumenti
on valmis, nii document.ready,

296
00:14:36,790 --> 00:14:38,760
mõned funktsiooni juhtub.

297
00:14:38,760 --> 00:14:40,490
Põhimõtteliselt, kui on dokument valmis?

298
00:14:40,490 --> 00:14:42,310
See on siis, kui mu lehel on koormatud.

299
00:14:42,310 --> 00:14:46,540
>> Nii kiiresti minu leheküljel on käivitunud,
järgmine funktsioon on alati valmis.

300
00:14:46,540 --> 00:14:54,310
Ta ütleb, kui objekti tüübiga jQButton,
või kui klassi jQButton on klõpsatud,

301
00:14:54,310 --> 00:14:55,570
täidab seda funktsiooni.

302
00:14:55,570 --> 00:14:59,360
Nii et siin on kaks anonüümset funktsioone,
üks kindlaksmääratud sisemust muud.

303
00:14:59,360 --> 00:15:03,930
>> Nii et minu kogu kontekstis
Siin on siiani minu leheküljel

304
00:15:03,930 --> 00:15:06,520
laadimisel ta nimetab seda funktsiooni.

305
00:15:06,520 --> 00:15:09,740
Ja see funktsioon on ootamas
jaoks nuppu klõpsatud.

306
00:15:09,740 --> 00:15:14,490
Ja kui klõpsad nupule, jQ
nuppu spetsiaalselt klõpsamisel

307
00:15:14,490 --> 00:15:17,150
see nõuab see muu
funktsioon, mis läheb

308
00:15:17,150 --> 00:15:21,250
tegemaks tausta
Värvi colorDiv olla

309
00:15:21,250 --> 00:15:25,990
mis iganes teksti on vahel sildid.

310
00:15:25,990 --> 00:15:28,050
>> See on mõiste
mis nupuga klõpsanud.

311
00:15:28,050 --> 00:15:31,230
Aga muidu, see on omamoodi
käituvad sarnaselt sündmus.

312
00:15:31,230 --> 00:15:34,460
See on lihtsalt nii nagu mina
väljendab seda jQuery.

313
00:15:34,460 --> 00:15:36,790
Jällegi, see on ilmselt
palju hirmutada.

314
00:15:36,790 --> 00:15:40,840
See ei ole nii selge
midagi event.js,

315
00:15:40,840 --> 00:15:45,080
mis on võib-olla natuke rohkem
paljusõnaline, kuid natuke vähem

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

317
00:15:46,000 --> 00:15:51,460
>> Aga kui me hüpata tagasi üle minu brauser
aken, kui ma hakkan clicking-- hästi,

318
00:15:51,460 --> 00:15:52,690
mis muutis lilla.

319
00:15:52,690 --> 00:15:54,450
See on roheline kasutades stringi meetod.

320
00:15:54,450 --> 00:15:56,500
See on oranž abil korral käitleja.

321
00:15:56,500 --> 00:15:58,300
>> See on punane kasutades jQuery, eks?

322
00:15:58,300 --> 00:16:01,270
Nad kõik käituvad täpselt sama.

323
00:16:01,270 --> 00:16:06,509
Nad lihtsalt teevad seda, kasutades erinevaid
läheneb probleemi lahendada.

324
00:16:06,509 --> 00:16:08,550
Seal on palju rohkem
jQuery siis me kindlasti

325
00:16:08,550 --> 00:16:10,050
räägime selle video.

326
00:16:10,050 --> 00:16:15,410
Aga kui sa tahad rohkem teada, siis saab
minna jQuery omamoodi dokumentatsioon

327
00:16:15,410 --> 00:16:19,710
ja õppida üsna natuke rohkem
see väga paindlik raamatukogu, mis

328
00:16:19,710 --> 00:16:22,550
on suurepärane teeme kliendi poolel
skriptimine nagu me teeme

329
00:16:22,550 --> 00:16:26,240
manipuleerida ilme
ja tunda meie kodulehelt

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

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

332
00:16:29,650 --> 00:16:31,930
See on CS50.

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