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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: I denne video, vi ønskede
at kalde separat opmærksomhed

3
00:00:07,230 --> 00:00:09,110
til en meget særlig
element i JavaScript

4
00:00:09,110 --> 00:00:11,350
at du kan finde praktisk
når du starter

5
00:00:11,350 --> 00:00:15,750
til at arbejde på at manipulere websider og
ændre indholdet på din webside

6
00:00:15,750 --> 00:00:16,460
om flyve.

7
00:00:16,460 --> 00:00:19,450
Og det er begrebet
Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Så som vi så i vores video på
JavaScript, objekter er meget fleksible.

9
00:00:23,030 --> 00:00:24,750
>> Og de kan indeholde forskellige områder.

10
00:00:24,750 --> 00:00:28,075
Og selvom vi ikke gå ind i en masse
detalje, disse områder eller egenskaber,

11
00:00:28,075 --> 00:00:30,200
at vi ville sandsynligvis mere
passende kalde dem

12
00:00:30,200 --> 00:00:33,915
i forbindelse med et objekt, selv
disse egenskaber kan være andre objekter.

13
00:00:33,915 --> 00:00:36,210
Og inde i disse objekter
kan være andre objekter.

14
00:00:36,210 --> 00:00:39,630
>> Du har denne meget store objekt
med en masse andre objekter

15
00:00:39,630 --> 00:00:43,550
inde i den, hvilken slags
skaber denne idé om et stort træ.

16
00:00:43,550 --> 00:00:47,540
Nu dokumentet objektet er en
meget speciel objekt i JavaScript

17
00:00:47,540 --> 00:00:52,580
der organiserer hele din web
side under denne slags paraply

18
00:00:52,580 --> 00:00:53,470
af et objekt.

19
00:00:53,470 --> 00:00:56,770
Og så indersiden af ​​dokumentet
objekt er objekter præsenterer

20
00:00:56,770 --> 00:00:59,630
hoved og krop på din webside.

21
00:00:59,630 --> 00:01:03,760
>> Inde i dem er andre
genstande, et cetera, et cetera,

22
00:01:03,760 --> 00:01:08,411
indtil hele din webside har
været organiseret i denne store objekt.

23
00:01:08,411 --> 00:01:09,660
Hvad er opadrettede her, ikke?

24
00:01:09,660 --> 00:01:12,170
Tja, vi ved, hvordan man arbejder
med objekter i JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Så hvis vi har et objekt,
refererer til hele vores hjemmeside, at

26
00:01:15,840 --> 00:01:19,590
betyder ved at kalde den korrekte
metoder til at manipulere det pågældende objekt

27
00:01:19,590 --> 00:01:22,360
eller ændring af visse
af dens egenskaber, vi

28
00:01:22,360 --> 00:01:25,500
kan ændre elementerne i
vores side programmeringsmæssigt

29
00:01:25,500 --> 00:01:30,210
ved hjælp af JavaScript i stedet for at
at kode ting med, siger, HTML.

30
00:01:30,210 --> 00:01:33,760
Så her er et eksempel på en
meget simpel webside, right?

31
00:01:33,760 --> 00:01:35,850
Det har fået HTML-tags, et hoved.

32
00:01:35,850 --> 00:01:37,979
>> Inde i der er en titel, hej verden.

33
00:01:37,979 --> 00:01:38,770
Så jeg har en krop.

34
00:01:38,770 --> 00:01:40,686
Inde i det, jeg har
tre forskellige ting.

35
00:01:40,686 --> 00:01:44,170
Jeg har en h2 header tag,
et afsnit, og et link.

36
00:01:44,170 --> 00:01:45,920
Dette er en meget enkel webside.

37
00:01:45,920 --> 00:01:48,590
>> Nå, hvad kunne dokumentet
objekt for denne se ud?

38
00:01:48,590 --> 00:01:50,700
Tja, det er lidt
skræmmende måske i første omgang.

39
00:01:50,700 --> 00:01:52,510
Men det er egentlig bare et stort træ.

40
00:01:52,510 --> 00:01:54,890
Og på selve roden af ​​det er dokument.

41
00:01:54,890 --> 00:02:00,030
>> Inde i dokumentet er en anden
objekt refererer til HTML på min side.

42
00:02:00,030 --> 00:02:02,660
Og HTML på min side er alt dette.

43
00:02:02,660 --> 00:02:06,900
Og derefter inde i HTML
objekt, jeg har et hoved objekt,

44
00:02:06,900 --> 00:02:09,000
som henviser til alt der.

45
00:02:09,000 --> 00:02:11,009
>> Og inde i der,
Jeg har en titel objekt.

46
00:02:11,009 --> 00:02:15,620
Og inde i der, jeg har en anden
objekt det er bare hej verden.

47
00:02:15,620 --> 00:02:18,020
Jeg kunne have min krop
repræsenteret som denne.

48
00:02:18,020 --> 00:02:22,850
>> Inde i min krop, jeg har en h2
objekt, og en p objekt for punkt

49
00:02:22,850 --> 00:02:25,270
og en a genstand for et link.

50
00:02:25,270 --> 00:02:29,660
Og så dette hele hierarki
kan repræsenteres som et stort træ

51
00:02:29,660 --> 00:02:31,990
med masser af mindre lidt
ting kommer ud af det.

52
00:02:31,990 --> 00:02:33,740
Nu, selvfølgelig, når
vi programmering, vi

53
00:02:33,740 --> 00:02:35,560
ikke tænke på ting som et stort træ.

54
00:02:35,560 --> 00:02:37,980
Vi ønsker at se faktiske
kode relaterede ting.

55
00:02:37,980 --> 00:02:40,790
>> Og heldigvis kan vi
bruge vores udviklingsværktøjer

56
00:02:40,790 --> 00:02:46,080
til rent faktisk at tage et kig på
denne hjemmeside dokument objekt.

57
00:02:46,080 --> 00:02:48,150
Og lad os gøre det.

58
00:02:48,150 --> 00:02:49,580
Så jeg har åbnet en fane browser.

59
00:02:49,580 --> 00:02:51,540
>> Og jeg har åbnet Developer Tools.

60
00:02:51,540 --> 00:02:54,460
Og i min video på JavaScript, jeg
nævnes, at konsollen ikke er

61
00:02:54,460 --> 00:02:56,770
kun et sted, hvor
Vi udskrive oplysninger,

62
00:02:56,770 --> 00:02:59,560
det er også et sted, hvor
vi kan indtaste oplysninger.

63
00:02:59,560 --> 00:03:01,380
I denne forbindelse, hvilket
Jeg har tænkt mig at sige, er

64
00:03:01,380 --> 00:03:05,720
Jeg vil gerne komme tilbage
dokumentet objekter,

65
00:03:05,720 --> 00:03:07,502
så jeg kan begynde at få et kig på det.

66
00:03:07,502 --> 00:03:08,460
Så hvordan kan jeg gøre dette?

67
00:03:08,460 --> 00:03:10,740
Tja, hvis jeg ønsker at
organisere det virkelig pænt,

68
00:03:10,740 --> 00:03:16,317
Jeg har tænkt mig at sige console.dir, D-I-R.
Nu bruger jeg console.log til bare udskrive

69
00:03:16,317 --> 00:03:17,400
ud af noget meget enkelt.

70
00:03:17,400 --> 00:03:20,450
Men hvis jeg ønsker at organisere denne
hierarkisk som et objekt,

71
00:03:20,450 --> 00:03:23,800
Jeg vil have det slags struktureret
som en mappestruktur.

72
00:03:23,800 --> 00:03:27,400
>> Så jeg vil gerne console.dir dokument.

73
00:03:27,400 --> 00:03:28,430
Jeg har tænkt mig at trykke Enter.

74
00:03:28,430 --> 00:03:32,350
Og lige under det nu,
og jeg vil zoome ind her,

75
00:03:32,350 --> 00:03:36,000
Jeg har fået dette svar dokument
med en lille pil ved siden af ​​den.

76
00:03:36,000 --> 00:03:39,470
Nu, når jeg åbner denne pil,
Der kommer til at være en masse ting.

77
00:03:39,470 --> 00:03:42,560
>> Men vi kommer til at se bort fra en masse
af det og bare lidt fokus

78
00:03:42,560 --> 00:03:46,250
på den vigtigste del, så vi
kan begynde at navigere dette dokument.

79
00:03:46,250 --> 00:03:50,125
Der er meget mere til DOM end
bare forælder noder og underordnede noder.

80
00:03:50,125 --> 00:03:51,500
Der er en masse underordnet ting.

81
00:03:51,500 --> 00:03:52,280
>> Så jeg har tænkt mig at åbne denne op.

82
00:03:52,280 --> 00:03:54,610
Og der er en hel masse
af ting, der popper op.

83
00:03:54,610 --> 00:03:59,000
Men alt jeg holder af, er
lige her, barn noder.

84
00:03:59,000 --> 00:04:00,410
Lad os åbne det op.

85
00:04:00,410 --> 00:04:03,810
>> Inde i der jeg ser
noget velkendt, HTML.

86
00:04:03,810 --> 00:04:07,670
Så inde i vores dokument
et niveau ned, HTML.

87
00:04:07,670 --> 00:04:08,550
Jeg åbner det op.

88
00:04:08,550 --> 00:04:10,380
Hvad forventer vi?

89
00:04:10,380 --> 00:04:13,760
>> Hvis du husker fra vores diagram,
hvad skal vi finde inde i HTML?

90
00:04:13,760 --> 00:04:17,275
Hvad to knuder er under det i træet?

91
00:04:17,275 --> 00:04:17,899
Lad os finde ud af.

92
00:04:17,899 --> 00:04:18,940
Vi åbner op HTML.

93
00:04:18,940 --> 00:04:22,079
Vi går ned til sine underordnede noder.

94
00:04:22,079 --> 00:04:23,440
>> Pop, der kan åbnes.

95
00:04:23,440 --> 00:04:25,990
Der er hoved og krop.

96
00:04:25,990 --> 00:04:28,540
Og vi kan åbne op for hovedet.

97
00:04:28,540 --> 00:04:30,460
Gå til dets undernoder.

98
00:04:30,460 --> 00:04:31,460
Tja, der er titlen.

99
00:04:31,460 --> 00:04:33,293
>> Og vi kunne blive ved og
på denne måde for evigt.

100
00:04:33,293 --> 00:04:34,770
Vi kunne gøre dette med kroppen også.

101
00:04:34,770 --> 00:04:40,090
Men der er en måde for os at se på
dokumentet organiseret som en stor genstand.

102
00:04:40,090 --> 00:04:42,610
Og hvis vi ser på er en stor
objekt, der ser meget

103
00:04:42,610 --> 00:04:47,480
lignende kode, der betyder, at vi kan begynde
til at håndtere denne store objekt ved hjælp

104
00:04:47,480 --> 00:04:51,220
kode til at ændre, hvad vores
hjemmeside ser ud og føles.

105
00:04:51,220 --> 00:04:54,920
>> Så det er en temmelig stærkt værktøj
vi har til vores rådighed nu.

106
00:04:54,920 --> 00:04:57,360
Så som vi lige har set, den
dokument objektet selv

107
00:04:57,360 --> 00:05:01,392
og alle de objekter inde i det
har egenskaber og metoder, lige

108
00:05:01,392 --> 00:05:04,100
som enhver anden genstand, som vi har
arbejdet med i JavaScript.

109
00:05:04,100 --> 00:05:08,370
Men vi kan bruge disse egenskaber, og
bruge disse metoder til at slags bore ned

110
00:05:08,370 --> 00:05:10,900
fra stort dokument og få
lavere og lavere og lavere,

111
00:05:10,900 --> 00:05:13,360
finere korn
af detaljer, indtil vi

112
00:05:13,360 --> 00:05:17,510
komme til et meget specifikt stykke af vores
webside, som vi ønsker at ændre.

113
00:05:17,510 --> 00:05:22,700
>> Og når vi opdaterer egenskaber af
Document Object eller ring disse metoder,

114
00:05:22,700 --> 00:05:24,450
ting kan ske på vores hjemmeside.

115
00:05:24,450 --> 00:05:28,420
Og vi behøver ikke at gøre nogen forfriskende
at få disse ændringer træder i kraft.

116
00:05:28,420 --> 00:05:33,160
>> Og det er en temmelig cool evne til at
have, når vi arbejder med kode.

117
00:05:33,160 --> 00:05:37,185
Så hvad er nogle af disse egenskaber
der er en del af et dokument objekt?

118
00:05:37,185 --> 00:05:40,100
Nå, sandsynligvis så dig en
par af dem virkelig hurtigt

119
00:05:40,100 --> 00:05:42,700
som vi zipping
gennem den gigantiske dokument

120
00:05:42,700 --> 00:05:45,150
objekt vi lige har set i webbrowseren.

121
00:05:45,150 --> 00:05:48,420
>> Men et par af disse egenskaber
kunne være ting som indre HTML.

122
00:05:48,420 --> 00:05:52,950
Og du kan endda huske mig
ved hjælp af denne i JavaScript video

123
00:05:52,950 --> 00:05:54,950
til allersidst, når jeg
talte om begivenhederne.

124
00:05:54,950 --> 00:05:56,125
Hvad var denne indre HTML?

125
00:05:56,125 --> 00:05:59,030
Tja, det er bare, hvad der er
i mellem tags.

126
00:05:59,030 --> 00:06:01,590
>> Og så den indre HTML,
for eksempel af den i overskriften

127
00:06:01,590 --> 00:06:05,390
tag, hvis vi havde holdt går i
at eksempelvis et øjeblik siden,

128
00:06:05,390 --> 00:06:08,020
ville have været Hello world.

129
00:06:08,020 --> 00:06:10,140
Det var titlen på vores side.

130
00:06:10,140 --> 00:06:12,370
Andre egenskaber
omfatter node navn, som

131
00:06:12,370 --> 00:06:15,810
er navnet på en HTML
element, såsom titlen.

132
00:06:15,810 --> 00:06:19,100
ID, som er ID
attribut af et HTML-element.

133
00:06:19,100 --> 00:06:23,790
>> Husk på, at vi specielt kan indikere
specifikke elementer i vores HTML

134
00:06:23,790 --> 00:06:27,510
med en id-attribut, som normalt
kommer i handy i forbindelse med CSS,

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

136
00:06:29,000 --> 00:06:33,217
Forældreknudepunktet, som er en henvisning til
hvad der er lige op over mig i DOM.

137
00:06:33,217 --> 00:06:35,800
Og child noder, som er en
henvisning til, hvad der er ned under mig.

138
00:06:35,800 --> 00:06:37,950
Og vi så en masse, der
bare at kigge igennem.

139
00:06:37,950 --> 00:06:42,970
Barn noder, det er, hvordan vi fik
lavere og lavere ned i træet.

140
00:06:42,970 --> 00:06:46,590
>> Attributter, det er bare et array
af attributter af HTML-element.

141
00:06:46,590 --> 00:06:50,270
Så et eksempel på egenskaber måske
være, hvis du har et billede tag,

142
00:06:50,270 --> 00:06:54,090
det som regel er en kilde attribut,
måske en højde og en bredde attribut.

143
00:06:54,090 --> 00:06:57,120
Og så ville blot være et array
af alle de attributter knyttet

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

145
00:06:59,300 --> 00:07:04,140
>> Style er en anden, der
betyder repræsenterer CSS

146
00:07:04,140 --> 00:07:06,050
styling af et bestemt element.

147
00:07:06,050 --> 00:07:08,310
Og senere i denne
video, vil vi specifikt

148
00:07:08,310 --> 00:07:14,592
gearing stil at gøre et par
af ændringer i vores hjemmeside.

149
00:07:14,592 --> 00:07:15,800
Så dem er nogle egenskaber.

150
00:07:15,800 --> 00:07:17,591
>> Og der er også nogle
metoder, som vi kan

151
00:07:17,591 --> 00:07:22,450
bruger også hurtigere måske isolere
elementer af Document Object.

152
00:07:22,450 --> 00:07:26,730
Måske den mest alsidige
af disse er getElementById.

153
00:07:26,730 --> 00:07:31,190
Så jeg kan sige noget lignende, fordi
husk det er en metode af dokumentet

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

155
00:07:34,880 --> 00:07:39,820
>> Og inde i disse parenteser, angiver
et HTML-element med et bestemt ID

156
00:07:39,820 --> 00:07:42,330
attribut, at jeg har tidligere
sæt, og jeg vil straks

157
00:07:42,330 --> 00:07:46,685
gå lige til dette element
af den samlede hjemmeside.

158
00:07:46,685 --> 00:07:49,310
Så jeg behøver ikke at måske bore
ned gennem hvert enkelt lag.

159
00:07:49,310 --> 00:07:52,841
Jeg kan bare bruge denne metode til at finde det,
lidt ligesom en varme søger missil,

160
00:07:52,841 --> 00:07:53,340
højre?

161
00:07:53,340 --> 00:07:56,300
Det bare går og finder
præcis, hvad det er på udkig efter.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName er
meget ens i ånd.

163
00:07:59,290 --> 00:08:02,500
Måske ville finde alle de
fed tags eller alle de p tags

164
00:08:02,500 --> 00:08:05,920
og give mig en vifte af alt
at jeg så kunne arbejde med.

165
00:08:05,920 --> 00:08:12,080
appendChild tilføjer noget
et niveau ned i træet.

166
00:08:12,080 --> 00:08:16,440
>> Så jeg kan tilføje en hel ny
element et niveau lavere.

167
00:08:16,440 --> 00:08:19,700
Eller jeg kan fjerne et element, der er
et niveau lavere så godt, hvis jeg vil have

168
00:08:19,700 --> 00:08:22,870
at slette noget fra min webside.

169
00:08:22,870 --> 00:08:28,480
Nu en hurtig kodning note og en hurtig
hovedpine besparelse note, forhåbentlig.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- d er små bogstaver.

171
00:08:31,670 --> 00:08:36,950
Jeg kan ikke fortælle dig, hvor mange gange jeg har
Brugte getElementById og kapitaliserede

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

173
00:08:38,336 --> 00:08:39,460
Fordi det er virkelig almindeligt.

174
00:08:39,460 --> 00:08:42,990
Hvis vi skriver ordet id, er det
normalt kapital I hovedstaden D.

175
00:08:42,990 --> 00:08:44,240
Og min kode bare ikke fungerer.

176
00:08:44,240 --> 00:08:45,630
Og jeg kan ikke finde ud af hvorfor.

177
00:08:45,630 --> 00:08:49,490
Dette er en virkelig, virkelig, virkelig
fælles fejl, som alle gør,

178
00:08:49,490 --> 00:08:51,890
selv eksperter, der har
gjort det for evigt.

179
00:08:51,890 --> 00:08:55,410
Så bare være klar, getElementById,
at d er små bogstaver.

180
00:08:55,410 --> 00:09:00,080
Og forhåbentlig, der sparer dig flere
minutter ved mindst hjertesorg.

181
00:09:00,080 --> 00:09:02,204
>> Så hvad betyder alt dette fortælle os?

182
00:09:02,204 --> 00:09:03,120
Vi har disse metoder.

183
00:09:03,120 --> 00:09:04,161
Vi har disse egenskaber.

184
00:09:04,161 --> 00:09:06,610
Nu, hvis vi starter fra
dokument, dokument.

185
00:09:06,610 --> 00:09:10,220
uanset hvad, kan vi nu komme til enhver
enkelt stykke af vores webside

186
00:09:10,220 --> 00:09:14,870
at vi ønsker at bruge JavaScript
lige ved at kalde disse metoder

187
00:09:14,870 --> 00:09:19,940
og udnytte de egenskaber,
at vi finder på forskellige steder.

188
00:09:19,940 --> 00:09:24,890
>> Dette kan få ordrige Dette
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
måske har en lang mærke navn,
måske du gøre flere opkald senere.

190
00:09:28,560 --> 00:09:31,230
Ting kan få lidt ordrige.

191
00:09:31,230 --> 00:09:34,480
Og som programmører, som du har
formentlig ses i mange af disse videoer,

192
00:09:34,480 --> 00:09:36,600
vi ikke kan lide ordrige ting.

193
00:09:36,600 --> 00:09:38,520
>> Vi kan lide at være i stand til at gøre tingene hurtigt.

194
00:09:38,520 --> 00:09:42,640
Så vi vil gerne have en mere
kortfattet måde at sige noget.

195
00:09:42,640 --> 00:09:46,270
Så denne slags fører til
begrebet noget, der hedder jQuery.

196
00:09:46,270 --> 00:09:49,170
Nu jQuery er ikke JavaScript.

197
00:09:49,170 --> 00:09:50,350
Det er ikke en del af JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Det er et bibliotek, der blev skrevet
af nogle JavaScript programmører

199
00:09:54,790 --> 00:09:57,060
omkring 10 år siden.

200
00:09:57,060 --> 00:10:01,300
Og målet er at forenkle det, hvad er
kaldet klient side scripting, som

201
00:10:01,300 --> 00:10:04,310
er dybest set, hvad vi var bare
taler om med DOM manipulationer.

202
00:10:04,310 --> 00:10:11,090
Og så hvis jeg ønskede at ændre
baggrundsfarve på min webside, måske

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

204
00:10:11,980 --> 00:10:15,325
>> Her, jeg tilsyneladende får
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Og jeg ønsker at indstille sin baggrundsfarve.

206
00:10:16,950 --> 00:10:20,720
Hvis jeg bare har tænkt at bruge ren JavaScript
ved hjælp af Document Object Model,

207
00:10:20,720 --> 00:10:23,990
der er en masse ting, ikke?
document.getElementById

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

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

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

211
00:10:28,050 --> 00:10:30,110
Det var en masse at sige.

212
00:10:30,110 --> 00:10:31,720
Det er en masse at skrive, også.

213
00:10:31,720 --> 00:10:35,760
Og så i jQuery, kan vi måske sige
dette lidt mere præcist.

214
00:10:35,760 --> 00:10:39,350
Afvejningen være det er måske lidt
lidt mere kryptisk pludselig,

215
00:10:39,350 --> 00:10:39,850
højre?

216
00:10:39,850 --> 00:10:43,580
>> Mindst en lang er en smule mere
forklarende om, hvad vi laver.

217
00:10:43,580 --> 00:10:49,947
Denne dollartegn, parenteser,
enkelt tilbud, hash, colorDiv, ikke?

218
00:10:49,947 --> 00:10:50,780
Hvad betyder det?

219
00:10:50,780 --> 00:10:53,640
Tja, det er dybest set bare
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Men det er den slags stenografi
måde at gøre det ved hjælp af jQuery.

221
00:10:58,700 --> 00:11:01,380
Lad os bare tage et kig nu
på et par forskellige måder

222
00:11:01,380 --> 00:11:04,520
at jeg kan faktisk
bruge dette Document Object

223
00:11:04,520 --> 00:11:06,807
Model til at manipulere stykker af min hjemmeside.

224
00:11:06,807 --> 00:11:09,140
Især vil vi
at arbejde på at manipulere

225
00:11:09,140 --> 00:11:14,090
farven på en bestemt
Div, colorDiv, på en webside.

226
00:11:14,090 --> 00:11:15,299
Så lad os tage et kig på det.

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

228
00:11:15,798 --> 00:11:16,700
Så jeg er på en side.

229
00:11:16,700 --> 00:11:20,750
Det hedder test.html når du henter
dette, hvis du ønsker at rode med dette.

230
00:11:20,750 --> 00:11:24,730
Og jeg har fået en masse
knapperne på denne side.

231
00:11:24,730 --> 00:11:27,730
Og jeg siger individuelle funktioner
til baggrundsfarve, lilla, grøn,

232
00:11:27,730 --> 00:11:31,330
orange, rød, blå, en enkelt funktion
til baggrundsfarve, event handler

233
00:11:31,330 --> 00:11:34,360
til baggrundsfarve, og ved hjælp jQuery.

234
00:11:34,360 --> 00:11:38,147
Hvad jeg taler om
når jeg gør det?

235
00:11:38,147 --> 00:11:39,230
Så vi har set på knapperne.

236
00:11:39,230 --> 00:11:41,521
Lad os nu tage et kig på
nogle af kildekoden her.

237
00:11:41,521 --> 00:11:44,770
Vi begynder med test.html.

238
00:11:44,770 --> 00:11:48,100
Så individuelle funktioner til baggrunden
farve er, hvad jeg har skrevet her.

239
00:11:48,100 --> 00:11:49,350
Lad mig rulle en lille smule.

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

241
00:11:56,170 --> 00:11:58,820
>> Og du vil opdage, at jeg
har defineret disse knapper

242
00:11:58,820 --> 00:12:03,990
at sige, når denne knap er klikket,
kalde funktionen dreje lilla.

243
00:12:03,990 --> 00:12:06,670
Når denne knap er at klikke snarere,
kalder funktionen bliver grøn,

244
00:12:06,670 --> 00:12:08,710
bliver orange, røde, drej blå.

245
00:12:08,710 --> 00:12:11,880
Du kan sikkert gætte på, at dette
er måske ikke det bedste design

246
00:12:11,880 --> 00:12:12,460
mening, ikke?

247
00:12:12,460 --> 00:12:16,490
>> Det ville være rart, hvis jeg kunne
har en mere generel tilgang.

248
00:12:16,490 --> 00:12:19,570
Nå, først vil vi tage et kig
hvad disse fem funktioner er

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

250
00:12:24,400 --> 00:12:27,250
grøn, orange, rød,
og blå hhv.

251
00:12:27,250 --> 00:12:30,930
Så ikke særlig det bedste design.

252
00:12:30,930 --> 00:12:33,390
>> Det næste sæt knapper
Jeg har er jeg har skrevet

253
00:12:33,390 --> 00:12:36,380
en enkelt funktion kaldet
ændre farve, der tilsyneladende

254
00:12:36,380 --> 00:12:38,960
accepterer en streng som sit argument.

255
00:12:38,960 --> 00:12:40,290
Så dette er en lille smule bedre.

256
00:12:40,290 --> 00:12:43,840
Lilla, grøn, orange, rød,
blå er nu et argument.

257
00:12:43,840 --> 00:12:46,230
Så jeg har skrevet en mere generel
tilfælde JavaScript-funktion,

258
00:12:46,230 --> 00:12:47,771
som kunne se noget som dette.

259
00:12:47,771 --> 00:12:48,680
Jeg passerer i.

260
00:12:48,680 --> 00:12:52,090
Denne funktion skifter farve er
forventer et argument kaldet farve.

261
00:12:52,090 --> 00:12:54,970
Og jeg siger indstille
baggrundsfarve til farve.

262
00:12:54,970 --> 00:12:58,390
Så her repræsenterer, hvad jeg har her.

263
00:12:58,390 --> 00:12:59,770
Så det er lidt bedre.

264
00:12:59,770 --> 00:13:02,740
>> Men jeg kan måske
gøre det bedre end det.

265
00:13:02,740 --> 00:13:06,140
Hvis vi går ned for at tage et kig
ved arrangementet handleren situationen,

266
00:13:06,140 --> 00:13:07,860
nu alle disse opkald ser det samme.

267
00:13:07,860 --> 00:13:10,340
Hvis du husker for vores
diskussion om hændelseshandlere,

268
00:13:10,340 --> 00:13:15,770
Jeg kan få oplysninger om, hvilke af
disse knapper blev klikket og bruge det.

269
00:13:15,770 --> 00:13:19,560
>> Og så i event.JavaScript, jeg har
skriftlig ændre farve begivenhed, som

270
00:13:19,560 --> 00:13:21,110
tal ud hvilken knap blev klikket.

271
00:13:21,110 --> 00:13:23,250
Det er på aftrækkeren objekt linje.

272
00:13:23,250 --> 00:13:25,240
Og så her, det bliver rigtig ordrige.

273
00:13:25,240 --> 00:13:27,420
Men hvad jeg gør, er jeg er
indstilling af baggrunden

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

275
00:13:30,340 --> 00:13:34,170
Det er teksten i
mellem knappens tags.

276
00:13:34,170 --> 00:13:36,500
>> Og så er jeg åbenbart har
at sætte den til små bogstaver.

277
00:13:36,500 --> 00:13:40,780
Og det er sådan jeg kan konvertere en hel
streng til små bogstaver i JavaScript ved hjælp

278
00:13:40,780 --> 00:13:42,940
denne metode til små bogstaver.

279
00:13:42,940 --> 00:13:46,570
Fordi når jeg indstille en farve,
som jeg forsøger at gøre her,

280
00:13:46,570 --> 00:13:48,260
farven skal være små bogstaver.

281
00:13:48,260 --> 00:13:50,920
>> Men den knap, jeg havde,
hvis vi tager et andet udseende,

282
00:13:50,920 --> 00:13:55,890
bemærke, at teksten er der
skrevet med en kapital P for lilla.

283
00:13:55,890 --> 00:13:59,140
Og så på den meget
bund her, jeg åbenbart

284
00:13:59,140 --> 00:14:02,630
forsøge at gøre dette ved hjælp af jQuery så godt.

285
00:14:02,630 --> 00:14:06,000
Og i dette tilfælde, er jeg faktisk ikke
kalde en funktion på alle.

286
00:14:06,000 --> 00:14:11,430
Jeg har lige sagt klassen, at jeg er
bruger til denne knap er en jQ knap.

287
00:14:11,430 --> 00:14:12,360
Det er det.

288
00:14:12,360 --> 00:14:14,950
>> Så hvordan gør jQuery ved, hvad jeg gør?

289
00:14:14,950 --> 00:14:18,740
Nå, det er en af ​​fordelene
skråstreg ulemper ved jQuery.

290
00:14:18,740 --> 00:14:21,560
Det kan tillade mig at gøre ting
meget præcist, men måske ikke

291
00:14:21,560 --> 00:14:22,570
som intuitivt.

292
00:14:22,570 --> 00:14:25,570
Måske de andre tre gøre en
lidt mere fornemme, hvad jeg laver.

293
00:14:25,570 --> 00:14:29,010
Her, selv om, hvad der foregår?

294
00:14:29,010 --> 00:14:31,940
>> Tilsyneladende skaber
en anonym funktion

295
00:14:31,940 --> 00:14:36,790
at belastninger, når mit dokument
er klar, så document.ready,

296
00:14:36,790 --> 00:14:38,760
nogle funktion kommer til at ske.

297
00:14:38,760 --> 00:14:40,490
Dybest set, når er et dokument klar?

298
00:14:40,490 --> 00:14:42,310
Det er da min side er indlæst.

299
00:14:42,310 --> 00:14:46,540
>> Så så snart min side er indlæst, det
følgende funktion er altid klar.

300
00:14:46,540 --> 00:14:54,310
Den siger, hvis et objekt af typen jQButton,
eller hvis klassen jQButton er blevet klikket,

301
00:14:54,310 --> 00:14:55,570
udføre denne funktion.

302
00:14:55,570 --> 00:14:59,360
Så her er to anonyme funktioner,
er defineret inde i den anden.

303
00:14:59,360 --> 00:15:03,930
>> Så hele min kontekst
her hidtil er min side

304
00:15:03,930 --> 00:15:06,520
når den indlæser den kalder denne funktion.

305
00:15:06,520 --> 00:15:09,740
Og denne funktion venter
for en knap for at blive klikket.

306
00:15:09,740 --> 00:15:14,490
Og når en knap der klikkes, jQ
knap specifikt klikkes,

307
00:15:14,490 --> 00:15:17,150
det kalder denne anden
funktion, som vil

308
00:15:17,150 --> 00:15:21,250
at indstille baggrunden
farve colorDiv at være

309
00:15:21,250 --> 00:15:25,990
uanset hvad tekst er i mellem tags.

310
00:15:25,990 --> 00:15:28,050
>> Dette er begrebet
hvilken knap blev klikket.

311
00:15:28,050 --> 00:15:31,230
Men ellers, det er en slags
opfører ligner en begivenhed.

312
00:15:31,230 --> 00:15:34,460
Det er bare på samme måde, jeg
ville udtrykke dette i jQuery.

313
00:15:34,460 --> 00:15:36,790
Igen, det er sandsynligvis en
meget mere skræmmende.

314
00:15:36,790 --> 00:15:40,840
Det er ikke så klar som
noget som event.js,

315
00:15:40,840 --> 00:15:45,080
der er måske en lille smule mere
verbose, men en lille smule mindre

316
00:15:45,080 --> 00:15:46,000
skræmmende.

317
00:15:46,000 --> 00:15:51,460
>> Men hvis vi pop tilbage over til min browser
vindue, hvis jeg begynder clicking-- godt,

318
00:15:51,460 --> 00:15:52,690
der ændres til lilla.

319
00:15:52,690 --> 00:15:54,450
Dette er grøn ved hjælp af strengen metode.

320
00:15:54,450 --> 00:15:56,500
Dette er orange ved hjælp af event handler.

321
00:15:56,500 --> 00:15:58,300
>> Dette er rød ved hjælp af jQuery, ikke?

322
00:15:58,300 --> 00:16:01,270
De alle opfører sig nøjagtig det samme.

323
00:16:01,270 --> 00:16:06,509
De gør det bare ved hjælp af forskellige
tilgange til at løse problemet.

324
00:16:06,509 --> 00:16:08,550
Der er meget mere til
jQuery så er vi helt sikkert

325
00:16:08,550 --> 00:16:10,050
vil tale om i denne video.

326
00:16:10,050 --> 00:16:15,410
Men hvis du ønsker at vide mere, kan du
gå til jQuery slags dokumentation

327
00:16:15,410 --> 00:16:19,710
og lære en hel del mere om
denne meget fleksible bibliotek, som

328
00:16:19,710 --> 00:16:22,550
er fantastisk til at gøre klientsiden
scripting såsom hvad vi foretog

329
00:16:22,550 --> 00:16:26,240
at manipulere udseendet
og fornemmelsen af ​​vores hjemmeside

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

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

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

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