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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: En ĉi tiu video, ni volis
voki apartan atenton

3
00:00:07,230 --> 00:00:09,110
al tre aparta
elemento de Ĝavoskripto

4
00:00:09,110 --> 00:00:11,350
ke vi eble trovos oportuna
kiam vi komencas

5
00:00:11,350 --> 00:00:15,750
labori sur manipulanta retpaĝoj kaj
ŝanĝante la enhavon de via retpaĝo

6
00:00:15,750 --> 00:00:16,460
sur la muŝo.

7
00:00:16,460 --> 00:00:19,450
Kaj tio estas la nocio de
la Dokumento Object Model.

8
00:00:19,450 --> 00:00:23,030
Do kiel ni vidis en nia vídeo sur
Ĝavoskripto, celoj estas tre fleksebla.

9
00:00:23,030 --> 00:00:24,750
>> Ili povas enhavi diversajn kampojn.

10
00:00:24,750 --> 00:00:28,075
Kaj kvankam ni ne eniris multajn
detalo, tiuj kampoj aŭ proprietoj,

11
00:00:28,075 --> 00:00:30,200
ke ni versxajne pli
taŭge nomi ilin

12
00:00:30,200 --> 00:00:33,915
en la kunteksto de objekto, eĉ
tiuj propraĵoj povas esti aliaj objektoj.

13
00:00:33,915 --> 00:00:36,210
Kaj ene de tiuj objektoj
povas esti aliaj objektoj.

14
00:00:36,210 --> 00:00:39,630
>> Vi havas tiun tre granda objekto
kun multaj aliaj objektoj

15
00:00:39,630 --> 00:00:43,550
interne de ĝi, kiun ia
kreas tiun ideon de granda arbo.

16
00:00:43,550 --> 00:00:47,540
Nun, la dokumento objekto estas
tre specialan celon en JavaScript

17
00:00:47,540 --> 00:00:52,580
kiu organizas via tuta retejo
paĝo sub ĉi tia ombrelo

18
00:00:52,580 --> 00:00:53,470
de objekto.

19
00:00:53,470 --> 00:00:56,770
Kaj tiel ene de la dokumento
objekto estas celoj prezentado

20
00:00:56,770 --> 00:00:59,630
la kapo kaj korpo de via retpaĝo.

21
00:00:59,630 --> 00:01:03,760
>> Ene de tiuj estas aliaj
objektoj, kaj tiel plu, kaj tiel plu,

22
00:01:03,760 --> 00:01:08,411
ĝis via tuta retpaĝo havas
estis organizita en tiu granda objekto.

23
00:01:08,411 --> 00:01:09,660
Kio estas la upside tie, ĉu ne?

24
00:01:09,660 --> 00:01:12,170
Nu, ni scipovas labori
kun objektoj en JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Do se ni havas objekton ke
rilatas al nia tuta retpaĝo, ke

26
00:01:15,840 --> 00:01:19,590
signifas nomante la korekta
metodoj manipuli tiun objekton

27
00:01:19,590 --> 00:01:22,360
aŭ modifi iujn
de liaj proprietoj, ni

28
00:01:22,360 --> 00:01:25,500
povas ŝanĝi la elementojn de
nia paĝo programmatically

29
00:01:25,500 --> 00:01:30,210
uzante JavaScript anstataŭ havi
kodigi aferoj kun, ekzemple, HTML.

30
00:01:30,210 --> 00:01:33,760
Do jen ekzemplo de
tre simpla retpaĝo, ĉu ne?

31
00:01:33,760 --> 00:01:35,850
Oni alvenis HTML etikedoj, kapo.

32
00:01:35,850 --> 00:01:37,979
>> Ene de tie estas titolo, saluton mondo.

33
00:01:37,979 --> 00:01:38,770
Tiam mi havas korpon.

34
00:01:38,770 --> 00:01:40,686
Ene de tio, mi havas
tri malsamaj aferoj.

35
00:01:40,686 --> 00:01:44,170
Mi havas h2 kaplinio etikedo,
alineon, kaj ligilo.

36
00:01:44,170 --> 00:01:45,920
Tio estas tre simpla retpaĝo.

37
00:01:45,920 --> 00:01:48,590
>> Nu, kio povus la dokumenton
kontesti por tiu aspektas?

38
00:01:48,590 --> 00:01:50,700
Nu, estas iom
timiga eble unue.

39
00:01:50,700 --> 00:01:52,510
Sed estas vere nur granda arbo.

40
00:01:52,510 --> 00:01:54,890
Kaj ĉe la radiko de ĝi estas dokumento.

41
00:01:54,890 --> 00:02:00,030
>> Ene de la dokumento estas alia
objekto raportante al la HTML de mia paĝo.

42
00:02:00,030 --> 00:02:02,660
Kaj la HTML de mia paĝo estas ĉio ĉi.

43
00:02:02,660 --> 00:02:06,900
Kaj poste ene de la HTML
objekto, mi havas kapon objekto,

44
00:02:06,900 --> 00:02:09,000
kiu rilatas al ĉiu tie.

45
00:02:09,000 --> 00:02:11,009
>> Kaj ene de tie,
Mi havas titolon objekto.

46
00:02:11,009 --> 00:02:15,620
Kaj ene de tie, mi havas alian
kontesti ke estas nur saluton mondo.

47
00:02:15,620 --> 00:02:18,020
Mi povus havi mian korpon
reprezentitaj kiel tiu.

48
00:02:18,020 --> 00:02:22,850
>> Ene de mia korpo, mi havas h2
objekto kaj p objekto por paragrafo

49
00:02:22,850 --> 00:02:25,270
kaj oni al objekto por ligilon.

50
00:02:25,270 --> 00:02:29,660
Kaj do ĉi tiu tuta hierarkio
povas esti prezentita kiel granda arbo

51
00:02:29,660 --> 00:02:31,990
kun multaj malgrandaj iom
estontajxoj el ĝi.

52
00:02:31,990 --> 00:02:33,740
Nun, kompreneble, kiam
ni programado, ni

53
00:02:33,740 --> 00:02:35,560
ne pensu pri aĵoj kiel granda arbo.

54
00:02:35,560 --> 00:02:37,980
Ni volas vidi fakta
Kodo Rilataj aferoj.

55
00:02:37,980 --> 00:02:40,790
>> Kaj feliĉe, ni povas
uzi nian programisto iloj

56
00:02:40,790 --> 00:02:46,080
efektive rigardu
tiu retejo la dokumenton objekto.

57
00:02:46,080 --> 00:02:48,150
Kaj ni faras tion.

58
00:02:48,150 --> 00:02:49,580
Do mi malfermis retumilo langeto.

59
00:02:49,580 --> 00:02:51,540
>> Kaj mi malfermis Developer Tools.

60
00:02:51,540 --> 00:02:54,460
Kaj en mia video sur Ĝavoskripto,
menciis ke la konzolo ne estas

61
00:02:54,460 --> 00:02:56,770
nur someplace kie
ni presi informo,

62
00:02:56,770 --> 00:02:59,560
ĝi estas ankaŭ loko kie
ni povas enigo informo.

63
00:02:59,560 --> 00:03:01,380
En tiu kunteksto, kion
Mi tuj diros estas

64
00:03:01,380 --> 00:03:05,720
Mi ŝatus reiri
la dokumenton objektoj,

65
00:03:05,720 --> 00:03:07,502
do mi povas komenci havi rigardon ĉe ĝi.

66
00:03:07,502 --> 00:03:08,460
Do kiel povus mi tion faras?

67
00:03:08,460 --> 00:03:10,740
Nu, se mi volas
organizi vere bele,

68
00:03:10,740 --> 00:03:16,317
Mi tuj diru console.dir, D-mi-R.
Nun, mi uzas console.log al nur presita

69
00:03:16,317 --> 00:03:17,400
el io tre simpla.

70
00:03:17,400 --> 00:03:20,450
Sed se mi volas organizi ĉi
hierarkie kiel objekto,

71
00:03:20,450 --> 00:03:23,800
Mi volas ĝin ia strukturita
kiel dosierujo strukturo.

72
00:03:23,800 --> 00:03:27,400
>> Do mi volas console.dir dokumento.

73
00:03:27,400 --> 00:03:28,430
Mi tuj batis Enter.

74
00:03:28,430 --> 00:03:32,350
Kaj ĝuste sub ĝi nun,
kaj Mi zomi tie,

75
00:03:32,350 --> 00:03:36,000
Mi havas tiun respondon dokumenton
kun iom sago apud ĝi.

76
00:03:36,000 --> 00:03:39,470
Nun, kiam mi malfermas tiun sagon,
Tie tuj estos multe da taskoj.

77
00:03:39,470 --> 00:03:42,560
>> Sed ni tuj ignori multajn
el gxi kaj nur speco de fokuso

78
00:03:42,560 --> 00:03:46,250
sur la plej gravan parton, tiel ni
povas komenci navigi ĉi dokumento.

79
00:03:46,250 --> 00:03:50,125
Estas multe pli al la DOM ol
nur patro nodoj kaj infanaj verticoj.

80
00:03:50,125 --> 00:03:51,500
Ekzistas multe de helpaj stuff.

81
00:03:51,500 --> 00:03:52,280
>> Do mi tuj malfermos ĉi supre.

82
00:03:52,280 --> 00:03:54,610
Kaj ekzistas tuta amaso
de aĵoj kiuj krevas supre.

83
00:03:54,610 --> 00:03:59,000
Sed ne gravas al mi pri estas
ĉi tie, infanaj verticoj.

84
00:03:59,000 --> 00:04:00,410
Ni malfermu ke ĝis.

85
00:04:00,410 --> 00:04:03,810
>> Ene de tie mi vidas
io familiara, HTML.

86
00:04:03,810 --> 00:04:07,670
Do ene de nia dokumenton
unu nivelon malsupren, HTML.

87
00:04:07,670 --> 00:04:08,550
Mi malfermu ke ĝis.

88
00:04:08,550 --> 00:04:10,380
Kion ni atendas?

89
00:04:10,380 --> 00:04:13,760
>> Se vi memoras de diagramo,
kion ni trovas ene de HTML?

90
00:04:13,760 --> 00:04:17,275
Kion du nodoj estas sub ĝi en la arbo?

91
00:04:17,275 --> 00:04:17,899
Ni trovu.

92
00:04:17,899 --> 00:04:18,940
Ni malfermu HTML.

93
00:04:18,940 --> 00:04:22,079
Ni iru en lian infanon nodoj.

94
00:04:22,079 --> 00:04:23,440
>> Pop ke malferma.

95
00:04:23,440 --> 00:04:25,990
Ekzistas kapo kaj korpo.

96
00:04:25,990 --> 00:04:28,540
Kaj ni povas malfermi la kapo.

97
00:04:28,540 --> 00:04:30,460
Iru al liaj infanaj verticoj.

98
00:04:30,460 --> 00:04:31,460
Nu, Tie estas la titolo.

99
00:04:31,460 --> 00:04:33,293
>> Kaj ni povus daŭrigi kaj
sur kiel tiu ĉiam.

100
00:04:33,293 --> 00:04:34,770
Ni povus fari tion kun korpo tiel.

101
00:04:34,770 --> 00:04:40,090
Sed ekzistas maniero por ni por rigardi
la dokumenton organizita kiel granda objekto.

102
00:04:40,090 --> 00:04:42,610
Kaj se ni rigardas estas granda
objekto kiu aspektas multe

103
00:04:42,610 --> 00:04:47,480
kiel kodo, kiu signifas, ke ni povas starti
manipuli tiun grandan objekton uzante

104
00:04:47,480 --> 00:04:51,220
kodo ŝanĝi kion nia
retejo aspektas kaj sentas.

105
00:04:51,220 --> 00:04:54,920
>> Do jen bela potenca ilo
ni havos je nia dispono nun.

106
00:04:54,920 --> 00:04:57,360
Do kiel ni ĵus vidis, la
dokumenton objekton mem

107
00:04:57,360 --> 00:05:01,392
kaj ĉiujn la objektoj ene de gxi
havi proprietojn kaj metodoj, simple

108
00:05:01,392 --> 00:05:04,100
kiel iu ajn alia objekto, kiujn ni
laboris kun en JavaScript.

109
00:05:04,100 --> 00:05:08,370
Sed ni povas uzi tiujn proprietojn kaj
uzi tiujn metodojn al ia bori malsupren

110
00:05:08,370 --> 00:05:10,900
el la granda dokumento kaj akiri
pli kaj pli kaj pli malalten,

111
00:05:10,900 --> 00:05:13,360
pli fajna kaj pli fajna grenoj
de detalo, ĝis ni

112
00:05:13,360 --> 00:05:17,510
akiri al tre specifa peco de nia
retpaĝo kiun ni volas ŝanĝi.

113
00:05:17,510 --> 00:05:22,700
>> Kaj kiam ni ĝisdatigi propraĵoj de la
Dokumenti Objekto aŭ voki la metodoj,

114
00:05:22,700 --> 00:05:24,450
aferoj povus okazi sur nia retpaĝo.

115
00:05:24,450 --> 00:05:28,420
Kaj ni ne bezonas fari neniun refreŝiga
havi tiujn ŝanĝojn efektiviĝos.

116
00:05:28,420 --> 00:05:33,160
>> Kaj tio estas sufiĉe freŝa kapablo
havi kiam ni laboras kun kodo.

117
00:05:33,160 --> 00:05:37,185
Do kio estas kelkaj el tiuj propraĵoj
kiuj estas parto de dokumento objekto?

118
00:05:37,185 --> 00:05:40,100
Nu, vi probable vidis
paro de ili vere rapide

119
00:05:40,100 --> 00:05:42,700
kaj ni estis zipping
tra la giganto dokumenton

120
00:05:42,700 --> 00:05:45,150
objekto ni ĵus vidis en la retumilo.

121
00:05:45,150 --> 00:05:48,420
>> Sed kelkaj tiuj propraĵoj
povus esti aĵoj kiel interna HTML.

122
00:05:48,420 --> 00:05:52,950
Kaj eble vi eĉ memoras min
uzante ĉi en la Javascript video

123
00:05:52,950 --> 00:05:54,950
ĉe la fino mem, kiam mi
parolis pri eventoj.

124
00:05:54,950 --> 00:05:56,125
Kio estis tiu interna HTML?

125
00:05:56,125 --> 00:05:59,030
Nu, estas nur kio estas
en inter la etikedoj.

126
00:05:59,030 --> 00:06:01,590
>> Kaj tiel la interna HTML,
ekzemple, de la titolo

127
00:06:01,590 --> 00:06:05,390
etikedo, se ni konstante en
ke ekzemple antaŭ momento,

128
00:06:05,390 --> 00:06:08,020
estus estinta saluton mondo.

129
00:06:08,020 --> 00:06:10,140
Tio estis la titolo de nia paĝo.

130
00:06:10,140 --> 00:06:12,370
Aliaj propraĵoj
inkluzivas noda nomo, kiun

131
00:06:12,370 --> 00:06:15,810
estas la nomo de HTML
elemento kiel ekzemple titolo.

132
00:06:15,810 --> 00:06:19,100
ID, kiu estas la ID
atributo de HTML elemento.

133
00:06:19,100 --> 00:06:23,790
>> Memoru ke ni povas speciale indiki
specifaj elementoj de nia HTML

134
00:06:23,790 --> 00:06:27,510
kun ID atributo, kiu kutime
venas en oportuna en la kunteksto de CSS,

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

136
00:06:29,000 --> 00:06:33,217
Parent nodo, kio estas referenco al
kio estas ĵus super mi en la DOM.

137
00:06:33,217 --> 00:06:35,800
Kaj infanaj verticoj, kio estas
referenco al kio estas malsupre mi.

138
00:06:35,800 --> 00:06:37,950
Kaj ni vidis multajn ke
nur rigardanta tra.

139
00:06:37,950 --> 00:06:42,970
Infanaj verticoj, tiel estas kiel ni akiris
pli kaj pli malsupren sur la arbo.

140
00:06:42,970 --> 00:06:46,590
>> Atributoj, tio estas nur tabelo
de atributoj de la HTML elemento.

141
00:06:46,590 --> 00:06:50,270
Do ekzemplo de atributoj povus
se vi havas dosieron etikedo,

142
00:06:50,270 --> 00:06:54,090
ĝi kutime havas fonton atributo,
eble alteco kaj larĝeco atributo.

143
00:06:54,090 --> 00:06:57,120
Kaj tial ke nur estus tabelo
de ĉiuj atributoj asociitaj

144
00:06:57,120 --> 00:06:59,300
kun tiu HTML elemento.

145
00:06:59,300 --> 00:07:04,140
>> Stilo estas alia ke
does reprezenti la CSS

146
00:07:04,140 --> 00:07:06,050
stilo de aparta elemento.

147
00:07:06,050 --> 00:07:08,310
Kaj pli poste en ĉi
video, ni konkrete

148
00:07:08,310 --> 00:07:14,592
levilforton stilon por fari duon
de ŝanĝoj al nia retejo.

149
00:07:14,592 --> 00:07:15,800
Do tiuj estas iuj propraĵoj.

150
00:07:15,800 --> 00:07:17,591
>> Estas ankaux kelkaj
metodoj kiujn ni povas

151
00:07:17,591 --> 00:07:22,450
uzi ankaŭ pli rapide eble izoli
elementoj de la Dokumento Object.

152
00:07:22,450 --> 00:07:26,730
Eble, la plej diverstalentaj
el tiuj estantaj getElementById.

153
00:07:26,730 --> 00:07:31,190
Do mi povus diri ion kiel, ĉar
memoru ĝi estas metodo de la Dokumento

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

155
00:07:34,880 --> 00:07:39,820
>> Kaj ene de tiuj krampoj, specifi
HTML elemento kun aparta ID

156
00:07:39,820 --> 00:07:42,330
atribui ke mi havas antaŭe
fiksita, kaj mi tuj

157
00:07:42,330 --> 00:07:46,685
iri rajton al tiu elemento
de la entuta retejo.

158
00:07:46,685 --> 00:07:49,310
Do mi ne devas eble bori
malsupren tra ĉiu ununura tavolo.

159
00:07:49,310 --> 00:07:52,841
Mi povas nur uzi tiun metodon por trovi ŝin,
ia kiel varmo serĉanta misilo,

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

161
00:07:53,340 --> 00:07:56,300
Ĝi ĵus iras kaj trovas
ĝuste kio ĝi estas serĉanta.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName estas
tre simila en spirito.

163
00:07:59,290 --> 00:08:02,500
Eble ĉi trovus ĉiujn
aŭdaca etikedoj aŭ ĉiuj de la p-etikedoj

164
00:08:02,500 --> 00:08:05,920
kaj donu al mi aron de ĉio
ke mi povus tiam labori kun.

165
00:08:05,920 --> 00:08:12,080
appendChild aldonas ion
unu nivelon malsupren en la arbo.

166
00:08:12,080 --> 00:08:16,440
>> Do mi povas aldoni tutan novan
elemento unu nivelon pli malalta.

167
00:08:16,440 --> 00:08:19,700
Aŭ mi povas forigi elementon tio
unu nivelon pli malalta tiel se mi volas

168
00:08:19,700 --> 00:08:22,870
forigi ion de mia retpaĝo.

169
00:08:22,870 --> 00:08:28,480
Nun, rapida kodigo noton kaj rapida
kapdoloro savanta noto, espereble.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- la d estas minuskla.

171
00:08:31,670 --> 00:08:36,950
Mi ne povas diri al vi kiom da fojoj mi devas
uzita getElementById kaj majuskloj

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

173
00:08:38,336 --> 00:08:39,460
Ĉar ĝi estas vere oftaj.

174
00:08:39,460 --> 00:08:42,990
Se ni skribas la vorton ID, ĝi estas
kutime ĉefurbo Mi ĉefurbo D.

175
00:08:42,990 --> 00:08:44,240
Kaj mia kodo simple ne funkcias.

176
00:08:44,240 --> 00:08:45,630
Kaj mi ne povas diveni kial.

177
00:08:45,630 --> 00:08:49,490
Jen vere, vere, vere
komuna cimon ke ĉiuj faras,

178
00:08:49,490 --> 00:08:51,890
eĉ spertuloj kiuj havas
estis farante tion por ĉiam.

179
00:08:51,890 --> 00:08:55,410
Do nur konscii, getElementById,
ke d estas minuskla.

180
00:08:55,410 --> 00:09:00,080
Kaj espereble, ke savas vin pluraj
minutoj almenaŭ de aflikton.

181
00:09:00,080 --> 00:09:02,204
>> Do kion signifas ĉio ĉi diru al ni?

182
00:09:02,204 --> 00:09:03,120
Ni havas tiujn metodojn.

183
00:09:03,120 --> 00:09:04,161
Ni havas tiujn trajtojn.

184
00:09:04,161 --> 00:09:06,610
Nun, se ni komencos de
dokumento, dokumento.

185
00:09:06,610 --> 00:09:10,220
ajn, ni povas nun akiri al ajna
ununura peco de nia retpaĝo

186
00:09:10,220 --> 00:09:14,870
ke ni volas uzi JavaScript
nur nomante tiujn metodojn

187
00:09:14,870 --> 00:09:19,940
kaj ekspluatanta la propraĵoj
ke ni trovos en diversaj lokoj.

188
00:09:19,940 --> 00:09:24,890
>> Tio povas akiri wordy, ĉi
document.getElementByID,

189
00:09:24,890 --> 00:09:28,560
eble havas longan etikedo nomon
eble vi fari pli vokoj poste.

190
00:09:28,560 --> 00:09:31,230
Aĵoj povas akiri iom wordy.

191
00:09:31,230 --> 00:09:34,480
Kaj kiel programistoj, kiel vi havas
verŝajne vidis en multaj de ĉi tiuj vídeos,

192
00:09:34,480 --> 00:09:36,600
ni ne ŝatas wordy aferojn.

193
00:09:36,600 --> 00:09:38,520
>> Ni ŝatus esti kapabla fari aferojn rapide.

194
00:09:38,520 --> 00:09:42,640
Do ni ŝatus pli
konciza maniero diri ion.

195
00:09:42,640 --> 00:09:46,270
Do tiu speco de kondukoj al la
nocio de io nomata jQuery.

196
00:09:46,270 --> 00:09:49,170
Nun jQuery ne Javascript.

197
00:09:49,170 --> 00:09:50,350
Ĝi ne estas parto de Ĝavoskripto.

198
00:09:50,350 --> 00:09:54,790
>> Estas biblioteko kiu estis skribita
de iu Javascript programistoj

199
00:09:54,790 --> 00:09:57,060
proksimume antaŭ 10 jaroj.

200
00:09:57,060 --> 00:10:01,300
Kaj lia celo estas simpligi ĉi kio estas
nomita kliento flanko scripting, kio

201
00:10:01,300 --> 00:10:04,310
estas esence kion ni ĵus
parolas kun DOM manipuladoj.

202
00:10:04,310 --> 00:10:11,090
Kaj do se mi volis modifi la
fonkoloro de mia retpaĝo, eble

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

204
00:10:11,980 --> 00:10:15,325
>> Ĉi tie, mi ŝajne ricevas
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Kaj mi volas agordi lian fonkoloro.

206
00:10:16,950 --> 00:10:20,720
Se mi simple uzante puran Ĝavoskripto
uzante la Document Object Model,

207
00:10:20,720 --> 00:10:23,990
ke estas multe da taskoj, dekstra?
document.getElementByID

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

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
Tio estis multe diri.

212
00:10:30,110 --> 00:10:31,720
Estas multa tajpi, tro.

213
00:10:31,720 --> 00:10:35,760
Kaj tiel en jQuery, ni povas eble diri
ĉi iom pli koncize.

214
00:10:35,760 --> 00:10:39,350
La komerco ekstere estanta ĝi estas eble iom
iom pli kripta subite,

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

216
00:10:39,850 --> 00:10:43,580
>> Almenaŭ la longa estas iom pli
klariga kiel al kion ni faras.

217
00:10:43,580 --> 00:10:49,947
Ĉi dolaro signo, krampoj,
sola citaĵo, hash, colorDiv, dekstra?

218
00:10:49,947 --> 00:10:50,780
Kion tio signifas?

219
00:10:50,780 --> 00:10:53,640
Nu, tio estas esence nur
document.getElementByID colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Sed estas ĉi tia stenografio
maniero fari ĝin uzante jQuery.

221
00:10:58,700 --> 00:11:01,380
Ni simple rigardu nun
ĉe kelkaj malsamaj manieroj

222
00:11:01,380 --> 00:11:04,520
Por ke mi reale
uzi ĉi Dokumento Objekto

223
00:11:04,520 --> 00:11:06,807
Modelo manipuli pecojn de mia paĝaro.

224
00:11:06,807 --> 00:11:09,140
En aparta, ni tuj
esti laboranta sur manipulanta

225
00:11:09,140 --> 00:11:14,090
la koloro de aparta
Div, colorDiv, en retpaĝo.

226
00:11:14,090 --> 00:11:15,299
Do ni rigardu tion.

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

228
00:11:15,798 --> 00:11:16,700
Do mi estas en paĝo.

229
00:11:16,700 --> 00:11:20,750
Ĝi nomiĝas test.html kiam vi elŝutas
ĉi se vi volas toquetear ĉi.

230
00:11:20,750 --> 00:11:24,730
Kaj mi havas faskon da
butonojn sur ĉi tiu paĝo.

231
00:11:24,730 --> 00:11:27,730
Kaj mi diras individuaj funkcioj
por fona koloro, purpura, verda,

232
00:11:27,730 --> 00:11:31,330
oranĝa, ruĝa, blua, unu nura funkcio
por fonkoloro, okazaĵo traktilo

233
00:11:31,330 --> 00:11:34,360
por fona koloro kaj uzante jQuery.

234
00:11:34,360 --> 00:11:38,147
Kion mi parolas
kiam mi faras tion?

235
00:11:38,147 --> 00:11:39,230
Do ni vidis la butonoj.

236
00:11:39,230 --> 00:11:41,521
Nun, ni rigardu
iuj de la fontkodo tie.

237
00:11:41,521 --> 00:11:44,770
Ni komencu kun test.html.

238
00:11:44,770 --> 00:11:48,100
Do individuaj funkcioj por fono
koloro estas kion mi tajpis ĉi tie.

239
00:11:48,100 --> 00:11:49,350
Lasu min rulumi iomete.

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

241
00:11:56,170 --> 00:11:58,820
>> Kaj vi rimarkos ke mi
difinis tiujn butonojn

242
00:11:58,820 --> 00:12:03,990
diri kiam la butono estas klakita,
vokas la funkcion turni purpura.

243
00:12:03,990 --> 00:12:06,670
Kiam tiun butonon estas klaki prefere
vokas la funkcion turnas verda,

244
00:12:06,670 --> 00:12:08,710
turni oranĝo, turni ruĝa, turnu blua.

245
00:12:08,710 --> 00:12:11,880
Vi versxajne povas diveni ke ĉi
eble ne la plej bona dezajno

246
00:12:11,880 --> 00:12:12,460
senco, ĉu ne?

247
00:12:12,460 --> 00:12:16,490
>> Estus agrable, se mi povus
havas pli ĝeneralan aliron.

248
00:12:16,490 --> 00:12:19,570
Nu, unue ni rigardu
ĉe kio tiuj kvin funkcioj estas

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

250
00:12:24,400 --> 00:12:27,250
verda, oranĝa, ruĝa,
kaj blua, respektive.

251
00:12:27,250 --> 00:12:30,930
Do, ne estas precipe la bona dezajno.

252
00:12:30,930 --> 00:12:33,390
>> La venonta aro de butonoj
Mi estas mi skribis

253
00:12:33,390 --> 00:12:36,380
sola funkcio nomita
ŝanĝi koloro kiu ŝajne

254
00:12:36,380 --> 00:12:38,960
Akceptas ĉenon kiel ĝia argumento.

255
00:12:38,960 --> 00:12:40,290
Do tiu estas iomete pli bona.

256
00:12:40,290 --> 00:12:43,840
Purpura, verda, oranĝa, ruĝa,
blua nun estas argumento.

257
00:12:43,840 --> 00:12:46,230
Do mi skribis pli ĝenerala
kazo Javascript funkcio,

258
00:12:46,230 --> 00:12:47,771
kiu eble aspektas tiel.

259
00:12:47,771 --> 00:12:48,680
Mi pasante en.

260
00:12:48,680 --> 00:12:52,090
Tiu funkcio ŝanĝo koloro estas
atendante argumento nomita koloro.

261
00:12:52,090 --> 00:12:54,970
Kaj mi diras starigis la
fonkoloro al koloro.

262
00:12:54,970 --> 00:12:58,390
Do tie reprezentas kio mi havas ĉi tie.

263
00:12:58,390 --> 00:12:59,770
Do tio estas iom pli bone.

264
00:12:59,770 --> 00:13:02,740
>> Sed mi eble povos
Pli bone ol tio.

265
00:13:02,740 --> 00:13:06,140
Se ni iras, por rigardi
ĉe la okazaĵo traktilo situacio,

266
00:13:06,140 --> 00:13:07,860
nun ĉiuj tiuj alvokoj aspektas same.

267
00:13:07,860 --> 00:13:10,340
Se vi memoras nian
diskuto sur okazaĵo manipuladores,

268
00:13:10,340 --> 00:13:15,770
Mi povas akiri informojn pri kiu el
tiuj butonoj estis klakita kaj uzi tiun.

269
00:13:15,770 --> 00:13:19,560
>> Kaj tiel en event.JavaScript, mi havas
skribita ŝanĝo koloro okazaĵo, kiu

270
00:13:19,560 --> 00:13:21,110
figuroj el kiu butono estis klakita.

271
00:13:21,110 --> 00:13:23,250
Jen la ellasilon objekto linio.

272
00:13:23,250 --> 00:13:25,240
Kaj tiam tie, ĝi ricevas vere wordy.

273
00:13:25,240 --> 00:13:27,420
Sed kion mi faras estas mi
fiksanta la fono

274
00:13:27,420 --> 00:13:30,340
koloro al triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Jen la teksto en
inter la butono etikedoj.

276
00:13:34,170 --> 00:13:36,500
>> Kaj tiam mi ŝajne havas
por restarigi gxin al minuskla.

277
00:13:36,500 --> 00:13:40,780
Kaj tiel estas kiel mi povas konverti tutan
ŝnuro al minuskla en JavaScript uzanta

278
00:13:40,780 --> 00:13:42,940
ke telefono al minuskla.

279
00:13:42,940 --> 00:13:46,570
Ĉar kiam Mi starigis koloron,
kiel mi provas fari tie,

280
00:13:46,570 --> 00:13:48,260
la koloro devas esti ĉiuj minuskle.

281
00:13:48,260 --> 00:13:50,920
>> Sed la butono kiun mi havis,
se ni prenas alian aspekton,

282
00:13:50,920 --> 00:13:55,890
rimarki ke la teksto estas
skribita kun majuskla P por purpura.

283
00:13:55,890 --> 00:13:59,140
Kaj tiam ĉe la tre
fundo tie, mi ŝajne

284
00:13:59,140 --> 00:14:02,630
klopodi fari tion uzante jQuery tiel.

285
00:14:02,630 --> 00:14:06,000
Kaj en ĉi tiu kazo, mi ne vere
nomante funkcio ajn.

286
00:14:06,000 --> 00:14:11,430
Mi ĵus diris la klaso kiu mi estas
Uzante por tiu butono estas JQ butonon.

287
00:14:11,430 --> 00:14:12,360
Jen ĝi.

288
00:14:12,360 --> 00:14:14,950
>> Do kiel jQuery scias kion mi faras?

289
00:14:14,950 --> 00:14:18,740
Nu, tiu estas unu el la avantaĝoj
oblikvo malavantaĝoj de jQuery.

290
00:14:18,740 --> 00:14:21,560
Ĝi povas permesi ke mi faru aferojn
tre koncize, sed eble ne

291
00:14:21,560 --> 00:14:22,570
kiel intuicie.

292
00:14:22,570 --> 00:14:25,570
Eble tiuj aliaj tri faras
iom pli sentita kion mi faras.

293
00:14:25,570 --> 00:14:29,010
Ĉi tie, tamen, kio okazas?

294
00:14:29,010 --> 00:14:31,940
>> Ŝajne, kreante
anonima funkcio

295
00:14:31,940 --> 00:14:36,790
ke ŝarĝoj kiam mia dokumenton
estas preta, do document.ready,

296
00:14:36,790 --> 00:14:38,760
iu funkcio okazos.

297
00:14:38,760 --> 00:14:40,490
Esence, kiam estas dokumento preta?

298
00:14:40,490 --> 00:14:42,310
Estas kiam mia paĝo estas ŝarĝita.

299
00:14:42,310 --> 00:14:46,540
>> Tuj, kiam mia paĝo estas ŝarĝita, la
sekvante funkcio estas ĉiam preta.

300
00:14:46,540 --> 00:14:54,310
Ĝi diras, se celo de tipo jQButton,
aŭ se klaso jQButton estis klakita,

301
00:14:54,310 --> 00:14:55,570
ekzekuti ĉi tiu funkcio.

302
00:14:55,570 --> 00:14:59,360
Do jen du anonimaj funkcioj,
unu difinita ene de la alia.

303
00:14:59,360 --> 00:15:03,930
>> Do mia tuta kunteksto
tie tiom for estas mia paĝo

304
00:15:03,930 --> 00:15:06,520
kiam ŝarĝas nomas tiun funkcion.

305
00:15:06,520 --> 00:15:09,740
Kaj ĉi tiu funkcio estas atendanta
cxar butonon esti klakis.

306
00:15:09,740 --> 00:15:14,490
Kiam butono estas klakita, JQ
butono specife klakis,

307
00:15:14,490 --> 00:15:17,150
ĝi nomas ĉi aliaj
funkcio, kiu iras

308
00:15:17,150 --> 00:15:21,250
agordi la fonon
koloro de colorDiv esti

309
00:15:21,250 --> 00:15:25,990
ajn teksto en inter la etikedoj.

310
00:15:25,990 --> 00:15:28,050
>> Tio estas la nocio de
kiu butono estis klakita.

311
00:15:28,050 --> 00:15:31,230
Sed alie, tiu estas speco de
kondutas simila al okazaĵo.

312
00:15:31,230 --> 00:15:34,460
Estas nur la sama vojo mi
esprimus tion en jQuery.

313
00:15:34,460 --> 00:15:36,790
Denove, ĝi estas verŝajne
multe pli timiganta.

314
00:15:36,790 --> 00:15:40,840
Ĝi ne estas tiel klara kiel
io kiel event.js,

315
00:15:40,840 --> 00:15:45,080
kiu estas eble iomete pli
parolema, sed iomete malpli

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

317
00:15:46,000 --> 00:15:51,460
>> Sed se ni pop reen inte al mia retumilo
fenestro, se mi komencas clicking-- bone,

318
00:15:51,460 --> 00:15:52,690
kiu ŝanĝis al purpuro.

319
00:15:52,690 --> 00:15:54,450
Tiu estas verda uzante la ĉenon metodo.

320
00:15:54,450 --> 00:15:56,500
Jen oranĝo uzante la eventa traktilo.

321
00:15:56,500 --> 00:15:58,300
>> Tiu estas ruĝa uzante jQuery, dekstra?

322
00:15:58,300 --> 00:16:01,270
Ili ĉiuj konduti ĝuste la sama.

323
00:16:01,270 --> 00:16:06,509
Ili simple fari ĝin uzante malsamajn
alproksimiĝas solvi la problemon.

324
00:16:06,509 --> 00:16:08,550
Estas multe pli al
jQuery tiam ni certe

325
00:16:08,550 --> 00:16:10,050
tuj parolos pri en tiu video.

326
00:16:10,050 --> 00:16:15,410
Sed se vi volas lerni pli, vi povas
iri al la jQuery ia dokumentado

327
00:16:15,410 --> 00:16:19,710
kaj lerni tre iom pli pri
ĉi tre fleksebla bibliotekon, kiu

328
00:16:19,710 --> 00:16:22,550
estas granda por faranta kliento flanko
scripting kiaj kion ni faris

329
00:16:22,550 --> 00:16:26,240
manipuli la rigardon
kaj senti de nia retpaĝo

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

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

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

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