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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: In deze video, we wilden
te roepen apart aandacht

3
00:00:07,230 --> 00:00:09,110
een zeer specifieke
element van JavaScript

4
00:00:09,110 --> 00:00:11,350
dat u misschien handig vinden
wanneer je begint

5
00:00:11,350 --> 00:00:15,750
om te werken aan het manipuleren van webpagina's en
de inhoud van uw webpagina te veranderen

6
00:00:15,750 --> 00:00:16,460
on the fly.

7
00:00:16,460 --> 00:00:19,450
En dat is het begrip
het Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Dus zoals we zagen in onze video-on-
JavaScript, objecten zeer flexibel zijn.

9
00:00:23,030 --> 00:00:24,750
>> En ze kunnen verschillende velden bevatten.

10
00:00:24,750 --> 00:00:28,075
En hoewel we niet in een veel te gaan
detail, die velden of eigenschappen,

11
00:00:28,075 --> 00:00:30,200
dat we zouden waarschijnlijk meer
ze adequaat te bellen

12
00:00:30,200 --> 00:00:33,915
in het kader van een voorwerp, zelfs
die eigenschappen kunnen andere objecten.

13
00:00:33,915 --> 00:00:36,210
En de binnenkant van deze objecten
kunnen andere objecten.

14
00:00:36,210 --> 00:00:39,630
>> Je hebt dit zeer groot object
met een heleboel andere objecten

15
00:00:39,630 --> 00:00:43,550
erin dat soort
schept dit idee van een grote boom.

16
00:00:43,550 --> 00:00:47,540
Nu, het document object is een
heel bijzonder object in JavaScript

17
00:00:47,540 --> 00:00:52,580
die je hele web organiseert
pagina onder dit soort paraplu

18
00:00:52,580 --> 00:00:53,470
een object.

19
00:00:53,470 --> 00:00:56,770
Zo binnenkant van het document
voorwerp zijn objecten presenteren

20
00:00:56,770 --> 00:00:59,630
het hoofd en het lichaam van uw webpagina.

21
00:00:59,630 --> 00:01:03,760
>> Binnenkant van die andere
voorwerpen, et cetera, et cetera,

22
00:01:03,760 --> 00:01:08,411
totdat je hele webpagina heeft
georganiseerd in deze grote object.

23
00:01:08,411 --> 00:01:09,660
Wat is de kop hier, toch?

24
00:01:09,660 --> 00:01:12,170
Nou, we weten hoe we werken
met objecten in JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Dus als we een object dat
verwijst naar onze hele webpagina, die

26
00:01:15,840 --> 00:01:19,590
betekent dat door te bellen naar de juiste
methoden voor dat object te manipuleren

27
00:01:19,590 --> 00:01:22,360
of wijziging van bepaalde
zijn eigenschappen, we

28
00:01:22,360 --> 00:01:25,500
kunnen de elementen van verandering
onze pagina programmatisch

29
00:01:25,500 --> 00:01:30,210
met behulp van JavaScript in plaats van
om dingen met bijvoorbeeld HTML-code.

30
00:01:30,210 --> 00:01:33,760
Dus hier is een voorbeeld van een
zeer eenvoudige webpagina, toch?

31
00:01:33,760 --> 00:01:35,850
Het heeft HTML-tags, een hoofd.

32
00:01:35,850 --> 00:01:37,979
>> Binnenkant van er is een titel, hallo wereld.

33
00:01:37,979 --> 00:01:38,770
Dan heb ik een lichaam.

34
00:01:38,770 --> 00:01:40,686
Binnenkant van dat, ik heb
drie verschillende dingen.

35
00:01:40,686 --> 00:01:44,170
Ik heb een h2 header-tag,
een paragraaf, en een link.

36
00:01:44,170 --> 00:01:45,920
Dit is een zeer eenvoudige webpagina.

37
00:01:45,920 --> 00:01:48,590
>> Nou, wat zou het document
object voor deze eruit?

38
00:01:48,590 --> 00:01:50,700
Nou, het is een beetje
eng misschien op het eerste.

39
00:01:50,700 --> 00:01:52,510
Maar het is eigenlijk gewoon een grote boom.

40
00:01:52,510 --> 00:01:54,890
En aan de wortel van het document.

41
00:01:54,890 --> 00:02:00,030
>> Binnen in het document is een
object verwijzen naar de HTML van mijn pagina.

42
00:02:00,030 --> 00:02:02,660
En de HTML van mijn pagina is dit alles.

43
00:02:02,660 --> 00:02:06,900
En vervolgens in de HTML
voorwerp, ik heb een hoofd object,

44
00:02:06,900 --> 00:02:09,000
die verwijst naar alles wat er.

45
00:02:09,000 --> 00:02:11,009
>> En binnen daar,
Ik heb een titel object.

46
00:02:11,009 --> 00:02:15,620
En de binnenkant van daar, ik heb een andere
object dat is gewoon hallo wereld.

47
00:02:15,620 --> 00:02:18,020
Ik kon mijn lichaam
vertegenwoordigd als deze.

48
00:02:18,020 --> 00:02:22,850
>> Binnenkant van mijn lichaam, ik heb een h2
object en een p object voor paragraaf

49
00:02:22,850 --> 00:02:25,270
en een een object voor een link.

50
00:02:25,270 --> 00:02:29,660
En dus is deze hele hiërarchie
kan worden voorgesteld als een grote boom

51
00:02:29,660 --> 00:02:31,990
met veel kleinere kleine
dingen die uit het.

52
00:02:31,990 --> 00:02:33,740
Nu, natuurlijk, wanneer
we programmeren we

53
00:02:33,740 --> 00:02:35,560
niet denken aan zaken als een grote boom.

54
00:02:35,560 --> 00:02:37,980
We willen zien werkelijke
code gerelateerde dingen.

55
00:02:37,980 --> 00:02:40,790
>> En gelukkig, we kunnen
Gebruik onze developer tools

56
00:02:40,790 --> 00:02:46,080
om daadwerkelijk een kijkje nemen op
deze website document object.

57
00:02:46,080 --> 00:02:48,150
En laten we dat doen.

58
00:02:48,150 --> 00:02:49,580
Dus ik heb een tabblad browser geopend.

59
00:02:49,580 --> 00:02:51,540
>> En ik heb Developer Tools opengesteld.

60
00:02:51,540 --> 00:02:54,460
En in mijn video over JavaScript, I
vermeld dat de console niet

61
00:02:54,460 --> 00:02:56,770
alleen ergens waar
we printen informatie

62
00:02:56,770 --> 00:02:59,560
het is ook een plek waar
we kunnen gegevens invoeren.

63
00:02:59,560 --> 00:03:01,380
In deze context, wat
Ik ga zeggen is

64
00:03:01,380 --> 00:03:05,720
Ik zou graag terug te krijgen
de documentobjecten,

65
00:03:05,720 --> 00:03:07,502
dus ik kan beginnen met een kijkje op het hebben.

66
00:03:07,502 --> 00:03:08,460
Dus hoe kan ik dit doen?

67
00:03:08,460 --> 00:03:10,740
Nou, als ik wil
organiseren echt mooi,

68
00:03:10,740 --> 00:03:16,317
Ik ga zeggen console.dir, D-I-R.
Nu gebruik ik console.log gewoon printen

69
00:03:16,317 --> 00:03:17,400
iets heel eenvoudig.

70
00:03:17,400 --> 00:03:20,450
Maar als ik wil dit te organiseren
hiërarchisch als een object,

71
00:03:20,450 --> 00:03:23,800
Ik wil het soort van gestructureerde
zoals een mappenstructuur.

72
00:03:23,800 --> 00:03:27,400
>> Dus ik wil document console.dir.

73
00:03:27,400 --> 00:03:28,430
Ik ga druk op Enter.

74
00:03:28,430 --> 00:03:32,350
En rechts onder het nu,
en ik zal hier in te zoomen,

75
00:03:32,350 --> 00:03:36,000
Ik heb dit antwoord document gekregen
met een kleine pijl naast het.

76
00:03:36,000 --> 00:03:39,470
Nu, als ik deze pijl te openen,
Er gaat een heleboel dingen zijn.

77
00:03:39,470 --> 00:03:42,560
>> Maar we gaan veel te negeren
van het en gewoon een soort van aandacht

78
00:03:42,560 --> 00:03:46,250
het belangrijkste onderdeel, dus
kan beginnen om dit document te navigeren.

79
00:03:46,250 --> 00:03:50,125
Er is veel meer aan de DOM dan
gewoon ouder knooppunten en onderliggende knooppunten.

80
00:03:50,125 --> 00:03:51,500
Er is veel aanvullende spullen.

81
00:03:51,500 --> 00:03:52,280
>> Dus ik ga dit openen.

82
00:03:52,280 --> 00:03:54,610
En er is een heleboel
dingen die opduikt.

83
00:03:54,610 --> 00:03:59,000
Maar alles wat ik zorg over is
hier, kind knooppunten.

84
00:03:59,000 --> 00:04:00,410
Laten we open die omhoog.

85
00:04:00,410 --> 00:04:03,810
>> Binnen daar zie ik
iets bekends, HTML.

86
00:04:03,810 --> 00:04:07,670
Dus binnen onze document
een niveau lager, HTML.

87
00:04:07,670 --> 00:04:08,550
Ik open dat op.

88
00:04:08,550 --> 00:04:10,380
Wat moeten we verwachten?

89
00:04:10,380 --> 00:04:13,760
>> Misschien herinner je je van ons diagram,
wat moeten we binnen van HTML?

90
00:04:13,760 --> 00:04:17,275
Welke twee knooppunten eronder in de boom?

91
00:04:17,275 --> 00:04:17,899
Laten we het uitzoeken.

92
00:04:17,899 --> 00:04:18,940
We openen HTML.

93
00:04:18,940 --> 00:04:22,079
We gaan naar haar kind knooppunten.

94
00:04:22,079 --> 00:04:23,440
>> Pop die geopend.

95
00:04:23,440 --> 00:04:25,990
Er zijn hoofd en lichaam.

96
00:04:25,990 --> 00:04:28,540
En we kunnen het openstellen van de kop.

97
00:04:28,540 --> 00:04:30,460
Ga naar haar kind knooppunten.

98
00:04:30,460 --> 00:04:31,460
Nou, er is de titel.

99
00:04:31,460 --> 00:04:33,293
>> En we konden gaan en
op deze manier altijd.

100
00:04:33,293 --> 00:04:34,770
We kunnen dit doen met lichaam.

101
00:04:34,770 --> 00:04:40,090
Maar er is een manier voor ons om naar te kijken
het document georganiseerd als een groot object.

102
00:04:40,090 --> 00:04:42,610
En als we kijken naar een grote
object dat veel lijkt

103
00:04:42,610 --> 00:04:47,480
zoals de code, dat betekent dat we kunnen beginnen
om deze grote object te manipuleren met behulp van

104
00:04:47,480 --> 00:04:51,220
code om wat te veranderen onze
website eruit ziet en voelt.

105
00:04:51,220 --> 00:04:54,920
>> Dus dat is een vrij krachtig hulpmiddel
we tot onze beschikking hebben nu.

106
00:04:54,920 --> 00:04:57,360
Dus als we net zagen, de
document object zelf

107
00:04:57,360 --> 00:05:01,392
en alle voorwerpen erin
hebben eigenschappen en methoden, net

108
00:05:01,392 --> 00:05:04,100
net als elk ander object dat we hebben
gewerkt met in JavaScript.

109
00:05:04,100 --> 00:05:08,370
Maar we kunnen die eigenschappen gebruiken en
Gebruik deze methoden om een ​​soort van drill down

110
00:05:08,370 --> 00:05:10,900
van de grote document en krijg
lager en lager en lager,

111
00:05:10,900 --> 00:05:13,360
fijner en fijner granen
detail, totdat we

112
00:05:13,360 --> 00:05:17,510
naar een specifiek stuk onze
webpagina die we willen veranderen.

113
00:05:17,510 --> 00:05:22,700
>> En als we de eigenschappen van de update
Document Object of bel die methoden,

114
00:05:22,700 --> 00:05:24,450
dingen kunnen gebeuren op onze website.

115
00:05:24,450 --> 00:05:28,420
En we hebben geen behoefte aan een verfrissende doen
om deze veranderingen door te voeren.

116
00:05:28,420 --> 00:05:33,160
>> En dat is een vrij koel vermogen
hebben wanneer we werken met een code.

117
00:05:33,160 --> 00:05:37,185
Dus wat zijn sommige van deze eigenschappen
die deel uitmaken van een document object?

118
00:05:37,185 --> 00:05:40,100
Nou, je waarschijnlijk zag een
paar van hen heel snel

119
00:05:40,100 --> 00:05:42,700
als we waren zippen
door middel van de reus document

120
00:05:42,700 --> 00:05:45,150
object dat we net zagen in de webbrowser.

121
00:05:45,150 --> 00:05:48,420
>> Maar een aantal van deze eigenschappen
misschien dingen als innerlijke HTML.

122
00:05:48,420 --> 00:05:52,950
En je zou zelfs kunnen herinneren me
het gebruik van deze in de JavaScript-video

123
00:05:52,950 --> 00:05:54,950
aan het einde, toen ik
sprak over de gebeurtenissen.

124
00:05:54,950 --> 00:05:56,125
Wat was deze innerlijke HTML?

125
00:05:56,125 --> 00:05:59,030
Nou, het is gewoon wat
tussen de labels.

126
00:05:59,030 --> 00:06:01,590
>> En zo de binnenste HTML,
bijvoorbeeld de titel

127
00:06:01,590 --> 00:06:05,390
tag, als we hadden gehouden gaan in
dat bijvoorbeeld een moment geleden,

128
00:06:05,390 --> 00:06:08,020
wereld zou zijn geweest hallo.

129
00:06:08,020 --> 00:06:10,140
Dat was de titel van onze pagina.

130
00:06:10,140 --> 00:06:12,370
Overige eigenschappen
onder het knooppunt naam, die

131
00:06:12,370 --> 00:06:15,810
is de naam van een HTML
element zoals titel.

132
00:06:15,810 --> 00:06:19,100
ID, de ID
attribuut van een HTML-element.

133
00:06:19,100 --> 00:06:23,790
>> Bedenk dat we speciaal kan aangeven
specifieke elementen van onze HTML

134
00:06:23,790 --> 00:06:27,510
een ID-kenmerk, die meestal
komt goed van pas in het kader van CSS,

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

136
00:06:29,000 --> 00:06:33,217
Bovenliggende knooppunt, dat een verwijzing naar
wat is er net boven mij in de DOM.

137
00:06:33,217 --> 00:06:35,800
En onderliggende knooppunten, die een
verwijzing naar wat er beneden mij.

138
00:06:35,800 --> 00:06:37,950
En we zagen een heleboel van die
gewoon op zoek door.

139
00:06:37,950 --> 00:06:42,970
Kind knooppunten, dat is hoe we kregen
lager en lager in de boom.

140
00:06:42,970 --> 00:06:46,590
>> Attributen, dat is gewoon een array
van attributen van het HTML-element.

141
00:06:46,590 --> 00:06:50,270
Dus een voorbeeld attributen macht
zijn als u een beeld tag,

142
00:06:50,270 --> 00:06:54,090
het heeft gewoonlijk een bron kenmerk,
misschien een hoogte en een breedte attribuut.

143
00:06:54,090 --> 00:06:57,120
En dus dat zou slechts een array zijn
van alle bijbehorende attributen

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

145
00:06:59,300 --> 00:07:04,140
>> Stijl is een ander dat
vertegenwoordigt de CSS-

146
00:07:04,140 --> 00:07:06,050
styling van een bepaald element.

147
00:07:06,050 --> 00:07:08,310
En verderop in deze
video, zullen we specifiek

148
00:07:08,310 --> 00:07:14,592
leverage stijl om een ​​paar te maken
van wijzigingen op onze website.

149
00:07:14,592 --> 00:07:15,800
Dus dat zijn een aantal eigenschappen.

150
00:07:15,800 --> 00:07:17,591
>> En er zijn ook een aantal
methoden die we kunnen

151
00:07:17,591 --> 00:07:22,450
Gebruik ook sneller misschien isoleren
elementen van de Document Object.

152
00:07:22,450 --> 00:07:26,730
Misschien, de meest veelzijdige
Deze zijn getElementById.

153
00:07:26,730 --> 00:07:31,190
Dus ik zou zoiets zeggen, want
vergeet niet het is een methode van het Document

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

155
00:07:34,880 --> 00:07:39,820
>> En de binnenkant van de haakjes, specificeren
een HTML-element met een bepaalde ID

156
00:07:39,820 --> 00:07:42,330
attribuut dat ik eerder heb
set, en ik zal onmiddellijk

157
00:07:42,330 --> 00:07:46,685
ga recht op dat element
van de totale website.

158
00:07:46,685 --> 00:07:49,310
Dus ik hoef niet te misschien boren
beneden door elke laag.

159
00:07:49,310 --> 00:07:52,841
Ik kan gewoon gebruik maken van deze methode om het te vinden,
soort als een hittezoekende raket,

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

161
00:07:53,340 --> 00:07:56,300
Het gaat gewoon en vindt
precies wat hij zoekt.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName is
zeer vergelijkbaar in de geest.

163
00:07:59,290 --> 00:08:02,500
Misschien is dit zou al het vinden
bold markeringen of alle p labels

164
00:08:02,500 --> 00:08:05,920
en geef me een reeks van alles
dat ik dan kon werken.

165
00:08:05,920 --> 00:08:12,080
appendChild voegt iets
een niveau lager in de boom.

166
00:08:12,080 --> 00:08:16,440
>> Dus ik kan een hele nieuwe toe te voegen
element één niveau lager.

167
00:08:16,440 --> 00:08:19,700
Of ik kan een element dat is te verwijderen
Een niveau lager en als ik wil

168
00:08:19,700 --> 00:08:22,870
iets van mijn website verwijderen.

169
00:08:22,870 --> 00:08:28,480
Nu, een snelle codering noot en een snelle
hoofdpijn besparen nota, hopelijk.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- de d kleine letters.

171
00:08:31,670 --> 00:08:36,950
Ik kan je niet vertellen hoeveel keer ik heb
gebruikte getElementById en gekapitaliseerde

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

173
00:08:38,336 --> 00:08:39,460
Want het is echt gemeen.

174
00:08:39,460 --> 00:08:42,990
Als we schrijven het woord ID, het is
meestal kapitaal I kapitaal D.

175
00:08:42,990 --> 00:08:44,240
En mijn code werkt gewoon niet.

176
00:08:44,240 --> 00:08:45,630
En ik kan niet achterhalen waarom.

177
00:08:45,630 --> 00:08:49,490
Dit is echt, echt, echt
voorkomende fout dat iedereen maakt,

178
00:08:49,490 --> 00:08:51,890
zelfs deskundigen die moeten
is dit altijd doen.

179
00:08:51,890 --> 00:08:55,410
Dus gewoon bewust, getElementById,
dat d kleine letters.

180
00:08:55,410 --> 00:09:00,080
En hopelijk, dat bespaart u een aantal
minuten op zijn minst van hartzeer.

181
00:09:00,080 --> 00:09:02,204
>> Dus wat heeft dit alles ons vertellen?

182
00:09:02,204 --> 00:09:03,120
We hebben deze methoden.

183
00:09:03,120 --> 00:09:04,161
We hebben deze eigenschappen.

184
00:09:04,161 --> 00:09:06,610
Nu, als we uitgaan van
document, document.

185
00:09:06,610 --> 00:09:10,220
wat dan ook, we kunnen nu aan een
enkel stuk van onze website

186
00:09:10,220 --> 00:09:14,870
dat willen we met behulp van JavaScript
gewoon door te bellen deze methoden

187
00:09:14,870 --> 00:09:19,940
en gebruik te maken van de eigenschappen
dat er op diverse locaties.

188
00:09:19,940 --> 00:09:24,890
>> Dit kan krijgen langdradig, dit
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
misschien een lange tag naam,
misschien meer gesprekken wil je later.

190
00:09:28,560 --> 00:09:31,230
Dingen kunnen een beetje langdradig.

191
00:09:31,230 --> 00:09:34,480
En zoals programmeurs, als je hebt
waarschijnlijk gezien in veel van deze video's,

192
00:09:34,480 --> 00:09:36,600
we niet langdradig dingen.

193
00:09:36,600 --> 00:09:38,520
>> We willen in staat zijn om dingen te snel te doen.

194
00:09:38,520 --> 00:09:42,640
Dus we zouden een meer willen
beknopte manier om iets te zeggen.

195
00:09:42,640 --> 00:09:46,270
Dus dit soort leidt tot de
notie van iets genaamd jQuery.

196
00:09:46,270 --> 00:09:49,170
Nu jQuery is niet JavaScript.

197
00:09:49,170 --> 00:09:50,350
Het is geen onderdeel van JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Het is een bibliotheek die werd geschreven
door sommige JavaScript-programmeurs

199
00:09:54,790 --> 00:09:57,060
ongeveer 10 jaar geleden.

200
00:09:57,060 --> 00:10:01,300
En zijn doel is om dit wat te vereenvoudigen
riep client-side scripting, die

201
00:10:01,300 --> 00:10:04,310
is eigenlijk wat we waren net
over met DOM manipulaties.

202
00:10:04,310 --> 00:10:11,090
En dus als ik wilde het te wijzigen
achtergrondkleur van mijn webpagina, misschien

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

204
00:10:11,980 --> 00:10:15,325
>> Hier, ik ben blijkbaar krijgen
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
En ik wil de achtergrondkleur.

206
00:10:16,950 --> 00:10:20,720
Als ik alleen met behulp van pure JavaScript
met behulp van de Document Object Model,

207
00:10:20,720 --> 00:10:23,990
dat is een heleboel dingen, toch?
document.getElementById

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

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

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

211
00:10:28,050 --> 00:10:30,110
Dat was een veel te zeggen.

212
00:10:30,110 --> 00:10:31,720
Het is een stuk te typen, ook.

213
00:10:31,720 --> 00:10:35,760
En zo in jQuery, kunnen we misschien zeggen:
dit een beetje meer bondig.

214
00:10:35,760 --> 00:10:39,350
De afweging die het is misschien een beetje
beetje cryptisch ineens,

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

216
00:10:39,850 --> 00:10:43,580
>> Tenminste het lang duurt een beetje
verklarend als aan wat we doen.

217
00:10:43,580 --> 00:10:49,947
Dit dollarteken, haakjes,
enkel citaat, hash, colorDiv, toch?

218
00:10:49,947 --> 00:10:50,780
Wat betekent dat?

219
00:10:50,780 --> 00:10:53,640
Nou, dat is eigenlijk gewoon
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Maar het is dit soort steno
manier van doen met behulp van jQuery.

221
00:10:58,700 --> 00:11:01,380
Laten we nu een kijkje nemen
een paar verschillende manieren

222
00:11:01,380 --> 00:11:04,520
opdat ik eigenlijk
Gebruik deze Document Object

223
00:11:04,520 --> 00:11:06,807
Model om stukken van mijn site te manipuleren.

224
00:11:06,807 --> 00:11:09,140
In het bijzonder, we gaan
te werken op de manipulatie

225
00:11:09,140 --> 00:11:14,090
de kleur van een bepaalde
Div, colorDiv, op een webpagina.

226
00:11:14,090 --> 00:11:15,299
Dus laten we eens kijken naar dat.

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

228
00:11:15,798 --> 00:11:16,700
Dus ik ben op een pagina.

229
00:11:16,700 --> 00:11:20,750
Het heet test.html wanneer u downloaden
dit als u wilt sleutelen aan dit.

230
00:11:20,750 --> 00:11:24,730
En ik heb een heleboel gekregen
knoppen op deze pagina.

231
00:11:24,730 --> 00:11:27,730
En ik afzonderlijke functies te zeggen
voor de achtergrond kleur, paars, groen,

232
00:11:27,730 --> 00:11:31,330
oranje, rood, blauw, een enkele functie
voor de achtergrond kleur, event handler

233
00:11:31,330 --> 00:11:34,360
voor de achtergrond kleur, en met behulp van jQuery.

234
00:11:34,360 --> 00:11:38,147
Wat ben ik het over
als ik dit doe?

235
00:11:38,147 --> 00:11:39,230
Dus hebben we de knoppen gezien.

236
00:11:39,230 --> 00:11:41,521
Laten we nu eens een kijkje nemen op
sommige van de broncode in.

237
00:11:41,521 --> 00:11:44,770
We beginnen met test.html.

238
00:11:44,770 --> 00:11:48,100
Zodat afzonderlijke functies voor de achtergrond
kleur is wat ik hier heb getypt.

239
00:11:48,100 --> 00:11:49,350
Laat me schuiven een beetje.

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

241
00:11:56,170 --> 00:11:58,820
>> En je zult merken dat ik
hebben deze knoppen gedefinieerd

242
00:11:58,820 --> 00:12:03,990
te zeggen wanneer deze knop wordt geklikt,
bellen met de functie paars.

243
00:12:03,990 --> 00:12:06,670
Wanneer deze knop wordt geklikt, plaats,
bellen met de functie groen,

244
00:12:06,670 --> 00:12:08,710
draaien oranje, rood, blauw.

245
00:12:08,710 --> 00:12:11,880
U kunt wel raden dat dit
is misschien niet het beste ontwerp

246
00:12:11,880 --> 00:12:12,460
gevoel, toch?

247
00:12:12,460 --> 00:12:16,490
>> Het zou mooi zijn als ik kon
hebben een meer algemene aanpak.

248
00:12:16,490 --> 00:12:19,570
Nou, ten eerste gaan we een kijkje nemen
wat die vijf functies

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

250
00:12:24,400 --> 00:12:27,250
groen, oranje, rood,
en blauw, respectievelijk.

251
00:12:27,250 --> 00:12:30,930
Dus, niet bijzonder het beste ontwerp.

252
00:12:30,930 --> 00:12:33,390
>> De volgende reeks knoppen
Ik heb is dat ik heb geschreven

253
00:12:33,390 --> 00:12:36,380
een functie genaamd
kleur die blijkbaar

254
00:12:36,380 --> 00:12:38,960
accepteert een string als argument.

255
00:12:38,960 --> 00:12:40,290
Dus dit is een beetje beter.

256
00:12:40,290 --> 00:12:43,840
Paars, groen, oranje, rood,
blue is nu een argument.

257
00:12:43,840 --> 00:12:46,230
Dus ik heb geschreven een meer algemeen
Indien JavaScript-functie,

258
00:12:46,230 --> 00:12:47,771
die zoiets zou kunnen zien.

259
00:12:47,771 --> 00:12:48,680
Ik passeren in.

260
00:12:48,680 --> 00:12:52,090
Deze functie veranderen van kleur is
verwacht een argument genoemd kleur.

261
00:12:52,090 --> 00:12:54,970
En ik zeg stel de
achtergrondkleur op kleur.

262
00:12:54,970 --> 00:12:58,390
Dus hier staat wat ik hier heb.

263
00:12:58,390 --> 00:12:59,770
Dus dat is een beetje beter.

264
00:12:59,770 --> 00:13:02,740
>> Maar ik zou in staat zijn om
beter doen dan dat.

265
00:13:02,740 --> 00:13:06,140
Als we naar beneden gaan om een ​​kijkje te nemen
op het evenement handler situatie,

266
00:13:06,140 --> 00:13:07,860
nu al deze oproepen hetzelfde uitzien.

267
00:13:07,860 --> 00:13:10,340
Misschien herinner je je voor onze
bespreking van event handlers,

268
00:13:10,340 --> 00:13:15,770
Ik kan informatie over welke van krijgen
deze knoppen werd geklikt en dat gebruiken.

269
00:13:15,770 --> 00:13:19,560
>> En zo in event.JavaScript, ik heb
schriftelijke kleur veranderen evenement, dat

270
00:13:19,560 --> 00:13:21,110
cijfers uit welke knop is geklikt.

271
00:13:21,110 --> 00:13:23,250
Dat is de trigger object lijn.

272
00:13:23,250 --> 00:13:25,240
En dan hier, het wordt echt langdradig.

273
00:13:25,240 --> 00:13:27,420
Maar wat ik doe is dat ik ben
instellen van de achtergrond

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

275
00:13:30,340 --> 00:13:34,170
Dat is de tekst in
tussen de knop labels.

276
00:13:34,170 --> 00:13:36,500
>> En dan heb ik blijkbaar
in te stellen naar kleine letters.

277
00:13:36,500 --> 00:13:40,780
En dat is hoe ik een hele kan omzetten
string naar kleine letters in met behulp van JavaScript

278
00:13:40,780 --> 00:13:42,940
die methode naar kleine letters.

279
00:13:42,940 --> 00:13:46,570
Want als ik een kleur,
als ik probeer te doen hier,

280
00:13:46,570 --> 00:13:48,260
de kleur heeft om alle kleine letters zijn.

281
00:13:48,260 --> 00:13:50,920
>> Maar de knop die ik had,
Als we nog eens kijken,

282
00:13:50,920 --> 00:13:55,890
merken dat de tekst er is
geschreven met een hoofdletter P paars.

283
00:13:55,890 --> 00:13:59,140
En vervolgens bij de
bottom hier, ik blijkbaar

284
00:13:59,140 --> 00:14:02,630
proberen en doen dit met behulp van jQuery ook.

285
00:14:02,630 --> 00:14:06,000
En in dit geval, ik ben niet echt
aanroep van een functie helemaal.

286
00:14:06,000 --> 00:14:11,430
Ik heb net gezegd de klasse die ik ben
met behulp van deze knop is een jQ knop.

287
00:14:11,430 --> 00:14:12,360
Dat is het.

288
00:14:12,360 --> 00:14:14,950
>> Dus hoe jQuery weet wat ik doe?

289
00:14:14,950 --> 00:14:18,740
Nou, dit is een van de voordelen
slash nadelen van jQuery.

290
00:14:18,740 --> 00:14:21,560
Het kan mij toe om dingen te doen
zeer beknopt, maar misschien niet

291
00:14:21,560 --> 00:14:22,570
als intuïtief.

292
00:14:22,570 --> 00:14:25,570
Misschien die andere drie maken
beetje voelen wat ik doe.

293
00:14:25,570 --> 00:14:29,010
Hier, hoewel, wat is er aan de hand?

294
00:14:29,010 --> 00:14:31,940
>> Blijkbaar creëren
een anonieme functie

295
00:14:31,940 --> 00:14:36,790
die wordt geladen wanneer mijn document
is klaar, dus document.ready,

296
00:14:36,790 --> 00:14:38,760
een functie gaat gebeuren.

297
00:14:38,760 --> 00:14:40,490
Kortom, wanneer is een document klaar is?

298
00:14:40,490 --> 00:14:42,310
Het is toen mijn pagina is geladen.

299
00:14:42,310 --> 00:14:46,540
>> Dus zodra mijn pagina is geladen, de
volgende functie staat altijd klaar.

300
00:14:46,540 --> 00:14:54,310
Het zegt, als een object van het type jQButton,
of als de klasse jQButton is geklikt,

301
00:14:54,310 --> 00:14:55,570
deze functie uit te voeren.

302
00:14:55,570 --> 00:14:59,360
Dus hier is twee anonieme functies,
een gedefinieerd binnen de andere.

303
00:14:59,360 --> 00:15:03,930
>> Dus mijn hele context
hier tot nu toe is mijn pagina

304
00:15:03,930 --> 00:15:06,520
wanneer het laadt het deze functie noemt.

305
00:15:06,520 --> 00:15:09,740
En deze functie wacht
voor een knop te worden geklikt.

306
00:15:09,740 --> 00:15:14,490
En wanneer een knop wordt geklikt, JQ
knop specifiek wordt geklikt,

307
00:15:14,490 --> 00:15:17,150
het op deze andere gesprekken
functie, die gaat

308
00:15:17,150 --> 00:15:21,250
de achtergrond set
kleur colorDiv te

309
00:15:21,250 --> 00:15:25,990
wat tekst tussen de labels.

310
00:15:25,990 --> 00:15:28,050
>> Dit is het begrip
welke knop is geklikt.

311
00:15:28,050 --> 00:15:31,230
Maar voor de rest, dit is een soort van
gedraagt ​​vergelijkbaar met een event.

312
00:15:31,230 --> 00:15:34,460
Het is gewoon dezelfde manier als ik
zou dit uit te drukken in jQuery.

313
00:15:34,460 --> 00:15:36,790
Nogmaals, het is waarschijnlijk een
veel meer intimiderend.

314
00:15:36,790 --> 00:15:40,840
Het is niet zo duidelijk als
iets als event.js,

315
00:15:40,840 --> 00:15:45,080
dat is misschien een beetje meer
breedsprakig, maar een beetje minder

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

317
00:15:46,000 --> 00:15:51,460
>> Maar als we pop terug naar mijn browser
venster, als ik begin clicking-- goed,

318
00:15:51,460 --> 00:15:52,690
dat veranderde tot paars.

319
00:15:52,690 --> 00:15:54,450
Dit is groen met het string methode.

320
00:15:54,450 --> 00:15:56,500
Dit is oranje met behulp van de event handler.

321
00:15:56,500 --> 00:15:58,300
>> Dit is rood met behulp van jQuery, toch?

322
00:15:58,300 --> 00:16:01,270
Ze gedragen zich allemaal precies hetzelfde.

323
00:16:01,270 --> 00:16:06,509
Ze doen het gewoon met behulp van verschillende
zal het probleem op te lossen.

324
00:16:06,509 --> 00:16:08,550
Er is veel meer aan
jQuery dan zijn we zeker

325
00:16:08,550 --> 00:16:10,050
gaan praten over deze video.

326
00:16:10,050 --> 00:16:15,410
Maar als je meer wilt weten, kunt u
ga naar de jQuery soort documentatie

327
00:16:15,410 --> 00:16:19,710
en leren nogal een beetje meer over
Deze zeer flexibel bibliotheek, die

328
00:16:19,710 --> 00:16:22,550
is zeer geschikt voor het doen van client-side
scripting zoals wat we deden

329
00:16:22,550 --> 00:16:26,240
om het uiterlijk te manipuleren
en feel van onze website

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

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

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

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