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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: I den här videon, vi ville
ropa separat uppmärksamhet

3
00:00:07,230 --> 00:00:09,110
till en mycket speciell
del av JavaScript

4
00:00:09,110 --> 00:00:11,350
att du kanske tycker är smidiga
när du börjar

5
00:00:11,350 --> 00:00:15,750
att arbeta på att manipulera webbsidor och
ändra innehållet på din webbsida

6
00:00:15,750 --> 00:00:16,460
i farten.

7
00:00:16,460 --> 00:00:19,450
Och det är begreppet
Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Så som vi såg i vår video på
JavaScript objekt är mycket flexibla.

9
00:00:23,030 --> 00:00:24,750
>> Och de kan innehålla olika områden.

10
00:00:24,750 --> 00:00:28,075
Och även om vi inte gå in i en hel del
detalj, de områden eller fastigheter,

11
00:00:28,075 --> 00:00:30,200
att vi skulle förmodligen mer
lämpligt kallar dem

12
00:00:30,200 --> 00:00:33,915
inom ramen för ett objekt, även
dessa egenskaper kan finnas andra föremål.

13
00:00:33,915 --> 00:00:36,210
Och insidan av dessa objekt
kan vara andra föremål.

14
00:00:36,210 --> 00:00:39,630
>> Du har redan mycket stort objekt
med en mängd andra föremål

15
00:00:39,630 --> 00:00:43,550
insidan av det, vilket slags
skapar idén om ett stort träd.

16
00:00:43,550 --> 00:00:47,540
Nu är dokumentobjektet en
mycket speciella objekt i JavaScript

17
00:00:47,540 --> 00:00:52,580
som organiserar hela din webb
sida under denna typ av paraply

18
00:00:52,580 --> 00:00:53,470
av ett objekt.

19
00:00:53,470 --> 00:00:56,770
Och så insidan av dokumentet
objekt är objekt som presenterar

20
00:00:56,770 --> 00:00:59,630
huvudet och kroppen på din webbsida.

21
00:00:59,630 --> 00:01:03,760
>> Insidan av dessa är andra
objekt, et cetera, et cetera,

22
00:01:03,760 --> 00:01:08,411
tills hela din webbsida har
organiserats i detta stora objekt.

23
00:01:08,411 --> 00:01:09,660
Vad är det upp här, eller hur?

24
00:01:09,660 --> 00:01:12,170
Tja, vi vet hur man arbetar
med objekt i JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Så om vi har ett objekt som
hänvisar till hela vår webbsida, som

26
00:01:15,840 --> 00:01:19,590
innebär genom att ringa rätt
metoder för att manipulera objektet

27
00:01:19,590 --> 00:01:22,360
eller ändra vissa
av dess egenskaper, vi

28
00:01:22,360 --> 00:01:25,500
kan ändra elementen i
vår sida programmatiskt

29
00:01:25,500 --> 00:01:30,210
med hjälp av JavaScript i stället för att ha
att koda saker med, säg, HTML.

30
00:01:30,210 --> 00:01:33,760
Så här är ett exempel på en
mycket enkel webbsida, eller hur?

31
00:01:33,760 --> 00:01:35,850
Det har fått HTML-taggar, ett huvud.

32
00:01:35,850 --> 00:01:37,979
>> Inuti finns det en titel, hallå världen.

33
00:01:37,979 --> 00:01:38,770
Sen har jag en kropp.

34
00:01:38,770 --> 00:01:40,686
Insidan av detta har jag
tre olika saker.

35
00:01:40,686 --> 00:01:44,170
Jag har en h2 sidhuvudtagg,
ett stycke, och en länk.

36
00:01:44,170 --> 00:01:45,920
Detta är en mycket enkel webbsida.

37
00:01:45,920 --> 00:01:48,590
>> Tja, vad kan dokumentet
invända detta ut?

38
00:01:48,590 --> 00:01:50,700
Tja, det är lite
skrämmande kanske först.

39
00:01:50,700 --> 00:01:52,510
Men det är egentligen bara ett stort träd.

40
00:01:52,510 --> 00:01:54,890
Och vid själva roten av det är handling.

41
00:01:54,890 --> 00:02:00,030
>> Inne i dokumentet är en annan
objekt hänvisar till HTML min sida.

42
00:02:00,030 --> 00:02:02,660
Och HTML min sida är allt detta.

43
00:02:02,660 --> 00:02:06,900
Och sedan inne i HTML
objekt, jag har ett huvud objekt,

44
00:02:06,900 --> 00:02:09,000
som hänvisar till allting där.

45
00:02:09,000 --> 00:02:11,009
>> Och inne i det,
Jag har en titel objekt.

46
00:02:11,009 --> 00:02:15,620
Och inne i det, jag har en annan
invända att det är just hallå världen.

47
00:02:15,620 --> 00:02:18,020
Jag kunde ha min kropp
representerade så här.

48
00:02:18,020 --> 00:02:22,850
>> Insidan av min kropp, jag har en h2
objekt och ett p objekt för punkt

49
00:02:22,850 --> 00:02:25,270
och en en föremål för en länk.

50
00:02:25,270 --> 00:02:29,660
Och så hela denna hierarki
kan representeras som ett stort träd

51
00:02:29,660 --> 00:02:31,990
med massor av mindre lite
saker som kommer ut ur det.

52
00:02:31,990 --> 00:02:33,740
Nu, naturligtvis, när
vi programmering, vi

53
00:02:33,740 --> 00:02:35,560
inte tänka på saker som ett stort träd.

54
00:02:35,560 --> 00:02:37,980
Vi vill se aktuell
kod relaterade saker.

55
00:02:37,980 --> 00:02:40,790
>> Och lyckligtvis, vi kan
använda våra utvecklingsverktyg

56
00:02:40,790 --> 00:02:46,080
att faktiskt ta en titt på
denna webbplats dokumentobjekt.

57
00:02:46,080 --> 00:02:48,150
Och låt oss göra det.

58
00:02:48,150 --> 00:02:49,580
Så jag har öppnat upp en flik webbläsare.

59
00:02:49,580 --> 00:02:51,540
>> Och jag har öppnat upp Utvecklingsverktyg.

60
00:02:51,540 --> 00:02:54,460
Och i min video på JavaScript, jag
nämnde att konsolen inte

61
00:02:54,460 --> 00:02:56,770
endast någonstans där
vi skriva ut information,

62
00:02:56,770 --> 00:02:59,560
det är också en plats där
vi kan mata in information.

63
00:02:59,560 --> 00:03:01,380
I detta sammanhang, vad
Jag kommer att säga är

64
00:03:01,380 --> 00:03:05,720
Jag skulle vilja komma tillbaka
dokumentobjekt,

65
00:03:05,720 --> 00:03:07,502
så jag kan börja titta på det.

66
00:03:07,502 --> 00:03:08,460
Så hur kan jag göra detta?

67
00:03:08,460 --> 00:03:10,740
Tja, om jag vill
organisera det verkligen snyggt,

68
00:03:10,740 --> 00:03:16,317
Jag kommer att säga console.dir, D-I-R.
Nu använder jag console.log bara print

69
00:03:16,317 --> 00:03:17,400
ut något mycket enkelt.

70
00:03:17,400 --> 00:03:20,450
Men om jag vill organisera detta
hierarkiskt som ett objekt,

71
00:03:20,450 --> 00:03:23,800
Jag vill ha det slags strukturerad
som en katalogstruktur.

72
00:03:23,800 --> 00:03:27,400
>> Så jag vill console.dir dokument.

73
00:03:27,400 --> 00:03:28,430
Jag kommer att slå Enter.

74
00:03:28,430 --> 00:03:32,350
Och just under den nu,
och jag ska zooma in här,

75
00:03:32,350 --> 00:03:36,000
Jag har fått detta svar dokument
med en liten pil bredvid det.

76
00:03:36,000 --> 00:03:39,470
Nu, när jag öppnar den här pilen,
det kommer att bli en hel del saker.

77
00:03:39,470 --> 00:03:42,560
>> Men vi kommer att ignorera en hel del
av det och bara typ av fokus

78
00:03:42,560 --> 00:03:46,250
på den viktigaste delen, så vi
kan börja navigera detta dokument.

79
00:03:46,250 --> 00:03:50,125
Det finns mycket mer att DOM än
bara förälder noder och underordnade noder.

80
00:03:50,125 --> 00:03:51,500
Det finns en hel del sido grejer.

81
00:03:51,500 --> 00:03:52,280
>> Så jag kommer att öppna upp detta.

82
00:03:52,280 --> 00:03:54,610
Och det finns en hel del
saker som dyker upp.

83
00:03:54,610 --> 00:03:59,000
Men allt jag bryr mig om är
just här, underordnade noder.

84
00:03:59,000 --> 00:04:00,410
Vi öppnar upp det.

85
00:04:00,410 --> 00:04:03,810
>> Inuti det ser jag
något välbekant, HTML.

86
00:04:03,810 --> 00:04:07,670
Så insidan av vårt dokument
en nivå ner, HTML.

87
00:04:07,670 --> 00:04:08,550
Jag öppnar den upp.

88
00:04:08,550 --> 00:04:10,380
Vad förväntar vi oss?

89
00:04:10,380 --> 00:04:13,760
>> Om ni minns från vårt diagram,
vad ska vi hitta inne i HTML?

90
00:04:13,760 --> 00:04:17,275
Vilka två noder under den i trädet?

91
00:04:17,275 --> 00:04:17,899
Låt oss ta reda på.

92
00:04:17,899 --> 00:04:18,940
Vi öppnar upp HTML.

93
00:04:18,940 --> 00:04:22,079
Vi går ner till sina underordnade noder.

94
00:04:22,079 --> 00:04:23,440
>> Pop som kan öppnas.

95
00:04:23,440 --> 00:04:25,990
Det finns huvud och kropp.

96
00:04:25,990 --> 00:04:28,540
Och vi kan öppna upp huvudet.

97
00:04:28,540 --> 00:04:30,460
Gå till sina underordnade noder.

98
00:04:30,460 --> 00:04:31,460
Tja, det är titeln.

99
00:04:31,460 --> 00:04:33,293
>> Och vi kunde gå på och
så här för evigt.

100
00:04:33,293 --> 00:04:34,770
Vi kan göra detta med kroppen också.

101
00:04:34,770 --> 00:04:40,090
Men det är ett sätt för oss att titta på
dokumentet organiserad som en stor objekt.

102
00:04:40,090 --> 00:04:42,610
Och om vi tittar på är en stor
objekt som ser en hel del

103
00:04:42,610 --> 00:04:47,480
som kod, innebär det att vi kan börja
att manipulera denna stora objekt med

104
00:04:47,480 --> 00:04:51,220
kod för att ändra vad vår
webbplats ser ut och känns.

105
00:04:51,220 --> 00:04:54,920
>> Så det är en ganska kraftfullt verktyg
vi har till vårt förfogande nu.

106
00:04:54,920 --> 00:04:57,360
Så när vi såg bara den
dokumentobjektet själv

107
00:04:57,360 --> 00:05:01,392
och alla de objekt inuti det
har egenskaper och metoder, bara

108
00:05:01,392 --> 00:05:04,100
precis som alla andra objekt som vi har
arbetat med i JavaScript.

109
00:05:04,100 --> 00:05:08,370
Men vi kan använda dessa egenskaper och
använda dessa metoder för att sorts borra ner

110
00:05:08,370 --> 00:05:10,900
från stora dokument och få
lägre och lägre och lägre,

111
00:05:10,900 --> 00:05:13,360
finare och finare korn
detalj, tills vi

112
00:05:13,360 --> 00:05:17,510
komma till en mycket specifik del av vår
webbsida som vi vill förändra.

113
00:05:17,510 --> 00:05:22,700
>> Och när vi uppdaterar egenskaper hos
Document Object eller ring dessa metoder,

114
00:05:22,700 --> 00:05:24,450
saker kan hända på vår hemsida.

115
00:05:24,450 --> 00:05:28,420
Och vi behöver inte göra något uppfriskande
att dessa ändringar träder i kraft.

116
00:05:28,420 --> 00:05:33,160
>> Och det är en ganska cool förmåga att
har när vi arbetar med koden.

117
00:05:33,160 --> 00:05:37,185
Så vad är några av dessa egenskaper
som är en del av ett dokumentobjekt?

118
00:05:37,185 --> 00:05:40,100
Tja, såg du förmodligen en
par av dem verkligen snabbt

119
00:05:40,100 --> 00:05:42,700
som vi zippa
genom den gigantiska dokument

120
00:05:42,700 --> 00:05:45,150
objekt vi bara såg i webbläsaren.

121
00:05:45,150 --> 00:05:48,420
>> Men ett par av dessa egenskaper
kan vara saker som inre HTML.

122
00:05:48,420 --> 00:05:52,950
Och du kanske ens minns mig
att använda detta i JavaScript video

123
00:05:52,950 --> 00:05:54,950
i slutet när jag
talade om händelser.

124
00:05:54,950 --> 00:05:56,125
Vad var det inre HTML?

125
00:05:56,125 --> 00:05:59,030
Tja, det är bara vad som är
i mellan taggarna.

126
00:05:59,030 --> 00:06:01,590
>> Och så inner HTML,
exempelvis av den i rubriken

127
00:06:01,590 --> 00:06:05,390
tagg, om vi hade hållit gå i
det exemplet för en stund sedan,

128
00:06:05,390 --> 00:06:08,020
skulle ha varit hello world.

129
00:06:08,020 --> 00:06:10,140
Det var titeln på vår sida.

130
00:06:10,140 --> 00:06:12,370
Andra egenskaper
inkluderar nodnamn, som

131
00:06:12,370 --> 00:06:15,810
är namnet på en HTML
element såsom titel.

132
00:06:15,810 --> 00:06:19,100
ID, som är ID
attribut av ett HTML-element.

133
00:06:19,100 --> 00:06:23,790
>> Minns att vi speciellt kan indikera
specifika delar av vår HTML

134
00:06:23,790 --> 00:06:27,510
med ett ID-attribut, som vanligtvis
kommer väl till pass i samband med CSS,

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

136
00:06:29,000 --> 00:06:33,217
Ordnad nod, som är en referens till
vad är bara upp över mig i DOM.

137
00:06:33,217 --> 00:06:35,800
Och underordnade noder, som är en
hänvisning till vad som finns nedanför mig.

138
00:06:35,800 --> 00:06:37,950
Och vi såg en hel del att
bara titta igenom.

139
00:06:37,950 --> 00:06:42,970
Ordnade noder, det är hur vi fick
lägre och lägre in i trädet.

140
00:06:42,970 --> 00:06:46,590
>> Attribut, det är bara en array
av attribut av HTML-element.

141
00:06:46,590 --> 00:06:50,270
Så ett exempel på attribut kanske
vara om du har en bild-tagg,

142
00:06:50,270 --> 00:06:54,090
det oftast har en källa attribut
kanske en höjd och en bredd attribut.

143
00:06:54,090 --> 00:06:57,120
Och så det skulle bara vara en array
av alla de egenskaper som förknippas

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

145
00:06:59,300 --> 00:07:04,140
>> Style är en annan som
inte representerar CSS

146
00:07:04,140 --> 00:07:06,050
styling av ett visst element.

147
00:07:06,050 --> 00:07:08,310
Och senare i denna
video, vi ska särskilt

148
00:07:08,310 --> 00:07:14,592
hävstång stil för att göra ett par
förändringar till vår hemsida.

149
00:07:14,592 --> 00:07:15,800
Så de är några egenskaper.

150
00:07:15,800 --> 00:07:17,591
>> Och det finns också en del
Metoder som vi kan

151
00:07:17,591 --> 00:07:22,450
använder också snabbare kanske isolera
delar av Document Object.

152
00:07:22,450 --> 00:07:26,730
Kanske den mest mångsidiga
av dessa är getElementById.

153
00:07:26,730 --> 00:07:31,190
Så jag kan säga något i stil med eftersom
kom ihåg det är en metod av dokumentet

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

155
00:07:34,880 --> 00:07:39,820
>> Och inne i dessa parenteser anger
ett HTML-element med en särskild ID

156
00:07:39,820 --> 00:07:42,330
attribut som jag har tidigare
set, och jag ska genast

157
00:07:42,330 --> 00:07:46,685
gå rätt till det elementet
av den totala webbplats.

158
00:07:46,685 --> 00:07:49,310
Så jag behöver inte kanske borra
ner genom varje enskilt lager.

159
00:07:49,310 --> 00:07:52,841
Jag kan bara använda den här metoden för att hitta det,
ungefär som en värmesökande missil,

160
00:07:52,841 --> 00:07:53,340
höger?

161
00:07:53,340 --> 00:07:56,300
Det går och finner bara
exakt vad det är du letar efter.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName är
mycket i samma anda.

163
00:07:59,290 --> 00:08:02,500
Kanske detta skulle hitta alla
fetstil taggar eller alla av p-taggar

164
00:08:02,500 --> 00:08:05,920
och ge mig en rad allt
att jag då kunde arbeta med.

165
00:08:05,920 --> 00:08:12,080
appendChild tillför något
en nivå i trädet.

166
00:08:12,080 --> 00:08:16,440
>> Så jag kan lägga till en helt ny
elementet en lägre nivå.

167
00:08:16,440 --> 00:08:19,700
Eller jag kan ta bort ett element som är
en lägre nivå samt om jag vill

168
00:08:19,700 --> 00:08:22,870
att ta bort något från min webbsida.

169
00:08:22,870 --> 00:08:28,480
Nu, en snabb kodning anteckning och en snabb
huvudvärk spara notera, förhoppningsvis.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- d är gemener.

171
00:08:31,670 --> 00:08:36,950
Jag kan inte säga hur många gånger jag har
Begagnade getElementById och aktiverade

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

173
00:08:38,336 --> 00:08:39,460
Eftersom det är verkligen vanligt.

174
00:08:39,460 --> 00:08:42,990
Om vi ​​skriver ordet ID, är det
vanligtvis kapital kapital D.

175
00:08:42,990 --> 00:08:44,240
Och min kod bara fungerar inte.

176
00:08:44,240 --> 00:08:45,630
Och jag kan inte räkna ut varför.

177
00:08:45,630 --> 00:08:49,490
Detta är en riktigt, riktigt, riktigt
gemensamma bugg som alla gör,

178
00:08:49,490 --> 00:08:51,890
även experter som har
gjort detta för evigt.

179
00:08:51,890 --> 00:08:55,410
Så bara vara medvetna om, getElementById,
att d är gemener.

180
00:08:55,410 --> 00:09:00,080
Och förhoppningsvis sparar du flera
minuter åtminstone av hjärtesorg.

181
00:09:00,080 --> 00:09:02,204
>> Så vad betyder allt detta berätta?

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

183
00:09:03,120 --> 00:09:04,161
Vi har dessa egenskaper.

184
00:09:04,161 --> 00:09:06,610
Nu, om vi utgår från
dokument, dokument.

185
00:09:06,610 --> 00:09:10,220
vad som helst, vi kan nu komma till någon
enda stycke vår hemsida

186
00:09:10,220 --> 00:09:14,870
att vi vill att använda JavaScript
bara genom att kalla dessa metoder

187
00:09:14,870 --> 00:09:19,940
och utnyttja egenskaperna
att vi hittar på olika platser.

188
00:09:19,940 --> 00:09:24,890
>> Detta kan få ordrika detta
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
kanske har en lång taggnamn,
kanske du gör flera samtal senare.

190
00:09:28,560 --> 00:09:31,230
Saker kan få lite ordrik.

191
00:09:31,230 --> 00:09:34,480
Och som programmerare, som du har
förmodligen sett i många av dessa filmer,

192
00:09:34,480 --> 00:09:36,600
Vi gillar inte ordrik saker.

193
00:09:36,600 --> 00:09:38,520
>> Vi vill att snabbt kunna göra saker.

194
00:09:38,520 --> 00:09:42,640
Så vi vill ha en mer
koncist sätt att säga något.

195
00:09:42,640 --> 00:09:46,270
Så denna typ av leder till
begreppet något som kallas jQuery.

196
00:09:46,270 --> 00:09:49,170
Nu jQuery är inte JavaScript.

197
00:09:49,170 --> 00:09:50,350
Det är inte en del av JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Det är ett bibliotek som skrevs
av vissa JavaScript programmerare

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

200
00:09:57,060 --> 00:10:01,300
Och dess mål är att förenkla denna vad
kallas klientsidan scripting, som

201
00:10:01,300 --> 00:10:04,310
är i princip vad vi var bara
talar om med DOM manipulationer.

202
00:10:04,310 --> 00:10:11,090
Och så om jag ville ändra
bakgrundsfärg på min webbsida, kanske

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

204
00:10:11,980 --> 00:10:15,325
>> Här, jag tydligen få
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Och jag vill ställa sin bakgrundsfärg.

206
00:10:16,950 --> 00:10:20,720
Om jag bara använda ren JavaScript
med Document Object Model,

207
00:10:20,720 --> 00:10:23,990
det är en massa saker, eller hur?
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
>> Whew.

211
00:10:28,050 --> 00:10:30,110
Det var en hel del att säga.

212
00:10:30,110 --> 00:10:31,720
Det är en hel del att skriva, också.

213
00:10:31,720 --> 00:10:35,760
Och så i jQuery, kan vi kanske säga
detta lite mer koncist.

214
00:10:35,760 --> 00:10:39,350
Kompromissen att det kanske är lite
lite mer kryptiska helt plötsligt,

215
00:10:39,350 --> 00:10:39,850
höger?

216
00:10:39,850 --> 00:10:43,580
>> Åtminstone den långa är lite mer
förklarande vad vi gör.

217
00:10:43,580 --> 00:10:49,947
Denna dollartecken, parenteser,
enda anbud, hash, colorDiv, eller hur?

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

219
00:10:50,780 --> 00:10:53,640
Tja, det är i princip bara
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Men det är denna typ av stenografi
sätt att göra det med hjälp av jQuery.

221
00:10:58,700 --> 00:11:01,380
Låt oss bara ta en titt nu
på ett par olika sätt

222
00:11:01,380 --> 00:11:04,520
att jag kanske faktiskt
Använd denna Document Object

223
00:11:04,520 --> 00:11:06,807
Modell för att manipulera delar av min webbplats.

224
00:11:06,807 --> 00:11:09,140
Framför allt kommer vi
att de arbetar för att manipulera

225
00:11:09,140 --> 00:11:14,090
färgen av en viss
Div, colorDiv, på en webbsida.

226
00:11:14,090 --> 00:11:15,299
Så låt oss ta en titt på det.

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

228
00:11:15,798 --> 00:11:16,700
Så jag är på en sida.

229
00:11:16,700 --> 00:11:20,750
Det kallas test.html när du laddar ner
detta om du vill att mixtra med detta.

230
00:11:20,750 --> 00:11:24,730
Och jag har ett gäng
knapparna på den här sidan.

231
00:11:24,730 --> 00:11:27,730
Och jag säger enskilda funktioner
för bakgrundsfärg, lila, grönt,

232
00:11:27,730 --> 00:11:31,330
orange, röd, blå, en enda funktion
för bakgrundsfärg, händelsehanterare

233
00:11:31,330 --> 00:11:34,360
för bakgrundsfärg, och använder jQuery.

234
00:11:34,360 --> 00:11:38,147
Vad jag talar om
när jag gör det här?

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

236
00:11:39,230 --> 00:11:41,521
Nu ska vi ta en titt på
några av källkoden här.

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

238
00:11:44,770 --> 00:11:48,100
Så individuella funktioner för bakgrunds
färg är vad jag har skrivit här.

239
00:11:48,100 --> 00:11:49,350
Låt mig rulla lite.

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

241
00:11:56,170 --> 00:11:58,820
>> Och du kommer att märka att jag
har definierat dessa knappar

242
00:11:58,820 --> 00:12:03,990
att säga när denna knapp klickas,
anropa funktionen vända lila.

243
00:12:03,990 --> 00:12:06,670
När denna knapp är att klicka, snarare
anropa funktionen blir grön,

244
00:12:06,670 --> 00:12:08,710
sväng apelsin, blir röda, blå.

245
00:12:08,710 --> 00:12:11,880
Du kan nog gissa att detta
är kanske inte den bästa designen

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

247
00:12:12,460 --> 00:12:16,490
>> Det skulle vara trevligt om jag kunde
har en mer allmän strategi.

248
00:12:16,490 --> 00:12:19,570
Tja, först ska vi ta en titt
på vad dessa fem funktioner är

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

250
00:12:24,400 --> 00:12:27,250
grönt, orange, rött,
och blått, respektive.

251
00:12:27,250 --> 00:12:30,930
Så, inte särskilt den bästa designen.

252
00:12:30,930 --> 00:12:33,390
>> Nästa uppsättning knappar
Jag har är att jag har skrivit

253
00:12:33,390 --> 00:12:36,380
en enda funktion som kallas
ändra färg som tydligen

254
00:12:36,380 --> 00:12:38,960
accepterar en sträng som dess argument.

255
00:12:38,960 --> 00:12:40,290
Så det här är lite bättre.

256
00:12:40,290 --> 00:12:43,840
Lila, grön, orange, röd,
blått är nu ett argument.

257
00:12:43,840 --> 00:12:46,230
Så jag har skrivit en mer allmän
fallet JavaScript-funktion,

258
00:12:46,230 --> 00:12:47,771
som kan se ut så här.

259
00:12:47,771 --> 00:12:48,680
Jag passerar.

260
00:12:48,680 --> 00:12:52,090
Denna funktion ändrar färg är
förväntar sig ett argument som kallas färg.

261
00:12:52,090 --> 00:12:54,970
Och jag säger ange
bakgrundsfärgen till färgen.

262
00:12:54,970 --> 00:12:58,390
Så här representerar vad jag har här.

263
00:12:58,390 --> 00:12:59,770
Så det är lite bättre.

264
00:12:59,770 --> 00:13:02,740
>> Men jag skulle kunna
göra bättre än så.

265
00:13:02,740 --> 00:13:06,140
Om vi ​​går ner för att ta en titt
vid händelsehanteraren situationen,

266
00:13:06,140 --> 00:13:07,860
nu alla dessa samtal ser likadana ut.

267
00:13:07,860 --> 00:13:10,340
Om ni minns för vår
diskussion om händelsehanterare,

268
00:13:10,340 --> 00:13:15,770
Jag kan få information om vilka av
dessa knappar klickade och använda den.

269
00:13:15,770 --> 00:13:19,560
>> Och så i event.JavaScript, jag har
skriftligt ändrar färg händelse, som

270
00:13:19,560 --> 00:13:21,110
listar ut vilken knapp du klickade.

271
00:13:21,110 --> 00:13:23,250
Det är avtryckaren objektlinjen.

272
00:13:23,250 --> 00:13:25,240
Och sedan här, det blir verkligen ordrik.

273
00:13:25,240 --> 00:13:27,420
Men vad jag gör är att jag är
sätta bakgrunds

274
00:13:27,420 --> 00:13:30,340
färg till triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Det är texten i
mellan knapp taggar.

276
00:13:34,170 --> 00:13:36,500
>> Och så har jag tydligen
att ställa in den till gemener.

277
00:13:36,500 --> 00:13:40,780
Och det är hur jag kan konvertera en hel
sträng till gemener i JavaScript genom att använda

278
00:13:40,780 --> 00:13:42,940
denna metod till gemener.

279
00:13:42,940 --> 00:13:46,570
För när jag ställa in en färg,
som jag försöker göra här,

280
00:13:46,570 --> 00:13:48,260
färgen måste skrivas med gemener.

281
00:13:48,260 --> 00:13:50,920
>> Men den knapp som jag hade,
Om vi ​​tar en titt,

282
00:13:50,920 --> 00:13:55,890
märker att texten finns
skriven med ett kapital P för lila.

283
00:13:55,890 --> 00:13:59,140
Och sedan i mycket
botten här, jag tydligen

284
00:13:59,140 --> 00:14:02,630
försöka göra detta med hjälp av jQuery också.

285
00:14:02,630 --> 00:14:06,000
Och i detta fall, jag är faktiskt inte
anropa en funktion alls.

286
00:14:06,000 --> 00:14:11,430
Jag har just sagt den klass som jag
med användning av den här knappen är en jQ knapp.

287
00:14:11,430 --> 00:14:12,360
Det är allt.

288
00:14:12,360 --> 00:14:14,950
>> Så hur jQuery vet vad jag gör?

289
00:14:14,950 --> 00:14:18,740
Nåväl, detta är en av fördelarna
slash nackdelar med jQuery.

290
00:14:18,740 --> 00:14:21,560
Det kan tillåta mig att göra saker
mycket kortfattat, men kanske inte

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

292
00:14:22,570 --> 00:14:25,570
Kanske de andra tre gör en
lite mer känna vad jag gör.

293
00:14:25,570 --> 00:14:29,010
Här, dock är vad som händer?

294
00:14:29,010 --> 00:14:31,940
>> Tydligen, skapar
en anonym funktion

295
00:14:31,940 --> 00:14:36,790
som laddas när mitt dokument
är klar, så document.ready,

296
00:14:36,790 --> 00:14:38,760
någon funktion som kommer att hända.

297
00:14:38,760 --> 00:14:40,490
I grund och botten, när är ett dokument redo?

298
00:14:40,490 --> 00:14:42,310
Det är när min sida har laddats.

299
00:14:42,310 --> 00:14:46,540
>> Så snart som min sida har laddats, den
Följande funktion är alltid redo.

300
00:14:46,540 --> 00:14:54,310
Det säger, om ett objekt av typen jQButton,
eller om klass jQButton har klickat,

301
00:14:54,310 --> 00:14:55,570
utför denna funktion.

302
00:14:55,570 --> 00:14:59,360
Så här är två anonyma funktioner,
en definierad inuti den andra.

303
00:14:59,360 --> 00:15:03,930
>> Så hela mitt sammanhang
här hittills är min sida

304
00:15:03,930 --> 00:15:06,520
när den laddar man kallar denna funktion.

305
00:15:06,520 --> 00:15:09,740
Och denna funktion väntar
för en knapp som skall klickas.

306
00:15:09,740 --> 00:15:14,490
Och när en knapp klickas, jQ
knappen specifikt klickas,

307
00:15:14,490 --> 00:15:17,150
Det kallar detta andra
funktion, som kommer

308
00:15:17,150 --> 00:15:21,250
för att ställa in bakgrunden
färgen på colorDiv vara

309
00:15:21,250 --> 00:15:25,990
vilken text är mellan taggarna.

310
00:15:25,990 --> 00:15:28,050
>> Detta är begreppet
vilken knapp du klickade.

311
00:15:28,050 --> 00:15:31,230
Men annars är den här sortens
beter liknar en händelse.

312
00:15:31,230 --> 00:15:34,460
Det är precis samma sätt som jag
skulle uttrycka detta i jQuery.

313
00:15:34,460 --> 00:15:36,790
Återigen, det är förmodligen en
mycket mer hotfull.

314
00:15:36,790 --> 00:15:40,840
Det är inte så tydlig som
något liknande event.js,

315
00:15:40,840 --> 00:15:45,080
som är kanske lite mer
mångordig, men lite mindre

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

317
00:15:46,000 --> 00:15:51,460
>> Men om vi pop tillbaka över till min webbläsare
fönstret, om jag börjar clicking-- bra,

318
00:15:51,460 --> 00:15:52,690
som ändrats till lila.

319
00:15:52,690 --> 00:15:54,450
Detta är grön med strängen metoden.

320
00:15:54,450 --> 00:15:56,500
Detta är orange med hjälp av händelsehanterare.

321
00:15:56,500 --> 00:15:58,300
>> Detta är röd med hjälp av jQuery, eller hur?

322
00:15:58,300 --> 00:16:01,270
De alla beter sig exakt likadant.

323
00:16:01,270 --> 00:16:06,509
De gör det bara med hjälp av olika
tillvägagångssätt för att lösa problemet.

324
00:16:06,509 --> 00:16:08,550
Det finns mycket mer att
jQuery vi då är säkert

325
00:16:08,550 --> 00:16:10,050
kommer att tala om i den här videon.

326
00:16:10,050 --> 00:16:15,410
Men om du vill lära dig mer, kan du
gå till jQuery slags dokumentation

327
00:16:15,410 --> 00:16:19,710
och lära sig en hel del mer om
denna mycket böjlig bibliotek, som

328
00:16:19,710 --> 00:16:22,550
är bra för att göra klientsidan
skript som vad vi gjorde

329
00:16:22,550 --> 00:16:26,240
att manipulera utseendet
och känslan av vår hemsida

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

331
00:16:28,750 --> 00:16:29,650
Jag är Doug Lloyd.

332
00:16:29,650 --> 00:16:31,930
Detta är CS50.

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