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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: I denne videoen, ønsket vi
å ringe ut separat oppmerksomhet

3
00:00:07,230 --> 00:00:09,110
til en meget spesiell
element av Javascript

4
00:00:09,110 --> 00:00:11,350
som du kan finne nyttig
når du starter

5
00:00:11,350 --> 00:00:15,750
å arbeide på å manipulere websider og
endre innholdet på nettsiden din

6
00:00:15,750 --> 00:00:16,460
på sparket.

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

8
00:00:19,450 --> 00:00:23,030
Så som vi så i vår video på
Javascript, objekter er svært fleksibel.

9
00:00:23,030 --> 00:00:24,750
>> Og de kan inneholde ulike felt.

10
00:00:24,750 --> 00:00:28,075
Og selv om vi ikke gå inn i en masse
detalj, disse feltene eller eiendom,

11
00:00:28,075 --> 00:00:30,200
at vi ville trolig mer
hensiktsmessig kaller dem

12
00:00:30,200 --> 00:00:33,915
i forbindelse med en gjenstand, selv
disse egenskapene kan være andre gjenstander.

13
00:00:33,915 --> 00:00:36,210
Og innsiden av disse objektene
kan være andre objekter.

14
00:00:36,210 --> 00:00:39,630
>> Du har denne veldig stort objekt
med en rekke andre gjenstander

15
00:00:39,630 --> 00:00:43,550
innsiden av den, som liksom
skaper denne ideen om et stort tre.

16
00:00:43,550 --> 00:00:47,540
Nå er den dokumentobjekt en
meget spesiell gjenstand i Javascript

17
00:00:47,540 --> 00:00:52,580
som organiserer hele nett
side under denne slags paraply

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

19
00:00:53,470 --> 00:00:56,770
Og så på innsiden av dokumentet
objektet er objekter som presenterer

20
00:00:56,770 --> 00:00:59,630
hode og kropp på websiden din.

21
00:00:59,630 --> 00:01:03,760
>> Innsiden av disse er andre
objekter, et cetera, et cetera,

22
00:01:03,760 --> 00:01:08,411
til hele web-side har
vært organisert i denne store objekt.

23
00:01:08,411 --> 00:01:09,660
Hva er oppsiden her, ikke sant?

24
00:01:09,660 --> 00:01:12,170
Vel, vi vet hvordan man skal arbeide
med objekter i Javascript.

25
00:01:12,170 --> 00:01:15,840
>> Så hvis vi har et objekt som
refererer til hele vår nettside, som

26
00:01:15,840 --> 00:01:19,590
betyr at ved å ringe den riktige
metoder for å manipulere dette objektet

27
00:01:19,590 --> 00:01:22,360
eller endre visse
av sine eiendommer, vi

28
00:01:22,360 --> 00:01:25,500
kan endre elementene
vår side programma

29
00:01:25,500 --> 00:01:30,210
ved hjelp av Javascript i stedet for å
å kode ting med, si, HTML.

30
00:01:30,210 --> 00:01:33,760
Så her er et eksempel på en
veldig enkel nettside, ikke sant?

31
00:01:33,760 --> 00:01:35,850
Det fikk HTML-koder, et hode.

32
00:01:35,850 --> 00:01:37,979
>> Innsiden av det er en tittel, hallo verden.

33
00:01:37,979 --> 00:01:38,770
Da har jeg en kropp.

34
00:01:38,770 --> 00:01:40,686
Innsiden av det, har jeg
tre forskjellige ting.

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

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

37
00:01:45,920 --> 00:01:48,590
>> Vel, hva som kan dokumentet
objekt for dette ser ut?

38
00:01:48,590 --> 00:01:50,700
Vel, det er en liten
skummelt kanskje først.

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

40
00:01:52,510 --> 00:01:54,890
Og på selve roten av det er dokument.

41
00:01:54,890 --> 00:02:00,030
>> Innsiden av dokumentet er en annen
objekt henviser til HTML på siden min.

42
00:02:00,030 --> 00:02:02,660
Og HTML av siden min er alt dette.

43
00:02:02,660 --> 00:02:06,900
Og deretter innsiden av HTML
objekt, har jeg et hode objekt,

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

45
00:02:09,000 --> 00:02:11,009
>> Og inni der,
Jeg har en tittel objekt.

46
00:02:11,009 --> 00:02:15,620
Og inne på det, jeg har en annen
innvende at er bare hello world.

47
00:02:15,620 --> 00:02:18,020
Jeg kunne ha kroppen min
representert som dette.

48
00:02:18,020 --> 00:02:22,850
>> Innsiden av kroppen min, jeg har en h2
objekt og en p-objekt for avsnitt

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

50
00:02:25,270 --> 00:02:29,660
Og så dette hele hierarkiet
kan representeres som et stort tre

51
00:02:29,660 --> 00:02:31,990
med mye mindre lite
ting kommer ut av det.

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

53
00:02:33,740 --> 00:02:35,560
tenker ikke på ting som et stort tre.

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

55
00:02:37,980 --> 00:02:40,790
>> Og heldigvis, kan vi
bruker våre utviklerverktøy

56
00:02:40,790 --> 00:02:46,080
å faktisk ta en titt på
Document Object dette nettstedet.

57
00:02:46,080 --> 00:02:48,150
Og la oss gjøre det.

58
00:02:48,150 --> 00:02:49,580
Så jeg har åpnet opp en fane nettleser.

59
00:02:49,580 --> 00:02:51,540
>> Og jeg har åpnet opp utviklerverktøy.

60
00:02:51,540 --> 00:02:54,460
Og i videoen min på Javascript, jeg
nevnes at konsollen er ikke

61
00:02:54,460 --> 00:02:56,770
bare et sted der
vi skrive ut informasjon,

62
00:02:56,770 --> 00:02:59,560
det er også et sted der
vi kan legge inn informasjon.

63
00:02:59,560 --> 00:03:01,380
I denne sammenheng, hvilken
Jeg kommer til å si er

64
00:03:01,380 --> 00:03:05,720
Jeg ønsker å komme tilbake
dokument objekter,

65
00:03:05,720 --> 00:03:07,502
så jeg kan begynne å ta en titt på det.

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

67
00:03:08,460 --> 00:03:10,740
Vel, hvis jeg ønsker å
organisere det virkelig pent,

68
00:03:10,740 --> 00:03:16,317
Jeg kommer til å si console.dir, D-I-R.
Nå bruker jeg console.log å bare print

69
00:03:16,317 --> 00:03:17,400
ut noe veldig enkelt.

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

71
00:03:20,450 --> 00:03:23,800
Jeg vil ha den slags strukturert
som en katalogstruktur.

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

73
00:03:27,400 --> 00:03:28,430
Jeg kommer til å treffe på Enter.

74
00:03:28,430 --> 00:03:32,350
Og rett nedenfor det nå,
og jeg skal zoome inn her,

75
00:03:32,350 --> 00:03:36,000
Jeg har fått dette svaret dokumentet
med en liten pil ved siden av seg.

76
00:03:36,000 --> 00:03:39,470
Nå, når jeg åpner denne pilen,
det kommer til å bli en masse ting.

77
00:03:39,470 --> 00:03:42,560
>> Men vi kommer til å ignorere mye
av det og bare slags fokus

78
00:03:42,560 --> 00:03:46,250
på den viktigste delen, så vi
kan begynne å navigere dette dokumentet.

79
00:03:46,250 --> 00:03:50,125
Det er mye mer til DOM enn
bare foreldre noder og barn noder.

80
00:03:50,125 --> 00:03:51,500
Det er mye av hjelpe ting.

81
00:03:51,500 --> 00:03:52,280
>> Så jeg kommer til å åpne opp dette.

82
00:03:52,280 --> 00:03:54,610
Og det er en hel masse
av ting som dukker opp.

83
00:03:54,610 --> 00:03:59,000
Men alt jeg bryr meg om er
akkurat her, barnet noder.

84
00:03:59,000 --> 00:04:00,410
La oss åpne den opp.

85
00:04:00,410 --> 00:04:03,810
>> Innsiden av det jeg ser
noe kjent, HTML.

86
00:04:03,810 --> 00:04:07,670
Så innsiden av våre dokumenter
ett nivå ned, HTML.

87
00:04:07,670 --> 00:04:08,550
Jeg åpner det opp.

88
00:04:08,550 --> 00:04:10,380
Hva er det vi forventer?

89
00:04:10,380 --> 00:04:13,760
>> Hvis du husker fra vår diagram,
hva skal vi finne på innsiden av HTML?

90
00:04:13,760 --> 00:04:17,275
Hvilke to noder er under den i treet?

91
00:04:17,275 --> 00:04:17,899
La oss finne det ut.

92
00:04:17,899 --> 00:04:18,940
Vi åpner opp HTML.

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

94
00:04:22,079 --> 00:04:23,440
>> Pop som kan åpnes.

95
00:04:23,440 --> 00:04:25,990
Det er hodet og kroppen.

96
00:04:25,990 --> 00:04:28,540
Og vi kan åpne opp hodet.

97
00:04:28,540 --> 00:04:30,460
Gå til sine barn noder.

98
00:04:30,460 --> 00:04:31,460
Vel, det er tittelen.

99
00:04:31,460 --> 00:04:33,293
>> Og vi kunne gå videre og
på denne måten for alltid.

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

101
00:04:34,770 --> 00:04:40,090
Men det er en måte for oss å se på
dokumentet organisert som et stort objekt.

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

103
00:04:42,610 --> 00:04:47,480
som kode, som betyr at vi kan begynne
å manipulere denne store objekt ved hjelp

104
00:04:47,480 --> 00:04:51,220
kode for å endre hva vår
nettsiden ser ut og føles.

105
00:04:51,220 --> 00:04:54,920
>> Så det er en ganske kraftig verktøy
vi har til rådighet nå.

106
00:04:54,920 --> 00:04:57,360
Så som vi nettopp så, den
Document Object selv

107
00:04:57,360 --> 00:05:01,392
og alle objektene på innsiden av det
har egenskaper og metoder, bare

108
00:05:01,392 --> 00:05:04,100
som alle andre objekt som vi har
jobbet med i Javascript.

109
00:05:04,100 --> 00:05:08,370
Men vi kan bruke disse egenskapene og
bruke disse metodene for å slags bore ned

110
00:05:08,370 --> 00:05:10,900
fra den store dokumentet og få
lavere og lavere og lavere,

111
00:05:10,900 --> 00:05:13,360
finere og finere korn
detalj, før vi

112
00:05:13,360 --> 00:05:17,510
komme til en meget bestemt del av vår
nettside som vi ønsker å endre.

113
00:05:17,510 --> 00:05:22,700
>> Og når vi oppdaterer egenskapene til
Document Object eller ring disse metodene,

114
00:05:22,700 --> 00:05:24,450
ting kan skje på vår nettside.

115
00:05:24,450 --> 00:05:28,420
Og vi trenger ikke å gjøre noe forfriskende
å ha disse endringene trer i kraft.

116
00:05:28,420 --> 00:05:33,160
>> Og det er en ganske kul evne til å
har når vi jobber med kode.

117
00:05:33,160 --> 00:05:37,185
Så hva er noen av disse egenskapene
som er en del av et dokument objekt?

118
00:05:37,185 --> 00:05:40,100
Vel, har du sannsynligvis sett en
par av dem veldig raskt

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

120
00:05:42,700 --> 00:05:45,150
objekt vi nettopp så i nettleseren.

121
00:05:45,150 --> 00:05:48,420
>> Men et par av disse egenskapene
kan være ting som indre HTML.

122
00:05:48,420 --> 00:05:52,950
Og du kan selv hente meg
bruker dette i Javascript-video

123
00:05:52,950 --> 00:05:54,950
helt på slutten når jeg
snakket om hendelser.

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

125
00:05:56,125 --> 00:05:59,030
Vel, det er akkurat hva som er
i mellom kodene.

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

127
00:06:01,590 --> 00:06:05,390
tag, hvis vi hadde holdt det gående i
som eksempel et øyeblikk siden,

128
00:06:05,390 --> 00:06:08,020
ville ha vært hello world.

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

130
00:06:10,140 --> 00:06:12,370
Andre egenskaper
inkluderer nodenavnet, som

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

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

133
00:06:19,100 --> 00:06:23,790
>> Husker at vi kan spesial indikere
spesifikke elementer i vår HTML

134
00:06:23,790 --> 00:06:27,510
med en ID-attributt, som vanligvis
kommer godt med i sammenheng med CSS,

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

136
00:06:29,000 --> 00:06:33,217
Foreldrenoden, som er en referanse til
hva som er rett opp over meg i DOM.

137
00:06:33,217 --> 00:06:35,800
Og barnet noder, som er en
referanse til hva som er ned under meg.

138
00:06:35,800 --> 00:06:37,950
Og vi så mye av det
bare se gjennom.

139
00:06:37,950 --> 00:06:42,970
Ordnede noder, det er hvordan vi fikk
lavere og lavere inn i treet.

140
00:06:42,970 --> 00:06:46,590
>> Attributter, det er bare en matrise
av attributter av HTML-elementet.

141
00:06:46,590 --> 00:06:50,270
Så et eksempel på attributter kanskje
være hvis du har en bildekode,

142
00:06:50,270 --> 00:06:54,090
Det har vanligvis en kilde attributt,
kanskje en høyde og en bredde attributt.

143
00:06:54,090 --> 00:06:57,120
Og så det ville bare være en matrise
av alle de attributter tilhørende

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

145
00:06:59,300 --> 00:07:04,140
>> Stil er en annen som
representerer CSS

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

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

148
00:07:08,310 --> 00:07:14,592
innflytelse stil å gjøre et par
av endringer i vår nettside.

149
00:07:14,592 --> 00:07:15,800
Så de er noen egenskaper.

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

151
00:07:17,591 --> 00:07:22,450
bruke til også raskere kanskje isolere
elementer av Document Object.

152
00:07:22,450 --> 00:07:26,730
Kanskje den mest allsidige
av disse blir getElementById.

153
00:07:26,730 --> 00:07:31,190
Så jeg kan si noe sånt, fordi
husk at det er en metode for dokument

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

155
00:07:34,880 --> 00:07:39,820
>> Og innsiden av disse parentes angir
et HTML-element med en bestemt ID

156
00:07:39,820 --> 00:07:42,330
tilskriver at jeg har tidligere
satt, og jeg vil umiddelbart

157
00:07:42,330 --> 00:07:46,685
gå rett til det elementet
av den samlede nettsiden.

158
00:07:46,685 --> 00:07:49,310
Så jeg trenger ikke å kanskje bore
ned gjennom hvert enkelt lag.

159
00:07:49,310 --> 00:07:52,841
Jeg kan bare bruke denne metoden for å finne det,
liksom som en varmesøkende rakett,

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

161
00:07:53,340 --> 00:07:56,300
Det går bare og finner
nøyaktig hva den ser etter.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName er
svært like i ånden.

163
00:07:59,290 --> 00:08:02,500
Kanskje dette ville finne alle de
fet koder eller alle p tags

164
00:08:02,500 --> 00:08:05,920
og gi meg en rekke alt
at jeg da kunne jobbe med.

165
00:08:05,920 --> 00:08:12,080
appendChild tilfører noe
ett nivå ned i treet.

166
00:08:12,080 --> 00:08:16,440
>> Så jeg kan legge til en hel ny
element ett nivå lavere.

167
00:08:16,440 --> 00:08:19,700
Eller jeg kan fjerne et element som er
ett nivå lavere samt hvis jeg vil

168
00:08:19,700 --> 00:08:22,870
å slette noe fra min nettside.

169
00:08:22,870 --> 00:08:28,480
Nå, en rask koding notat og en rask
hodepine sparer notat, forhåpentligvis.

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

171
00:08:31,670 --> 00:08:36,950
Jeg kan ikke fortelle deg hvor mange ganger jeg har
brukte getElementById og kapitalisert

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

173
00:08:38,336 --> 00:08:39,460
Fordi det er veldig vanlig.

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

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

176
00:08:44,240 --> 00:08:45,630
Og jeg kan ikke finne ut hvorfor.

177
00:08:45,630 --> 00:08:49,490
Dette er en virkelig, virkelig, virkelig
vanlig feil som alle gjør,

178
00:08:49,490 --> 00:08:51,890
selv eksperter som har
vært å gjøre dette for alltid.

179
00:08:51,890 --> 00:08:55,410
Så bare vær oppmerksom, getElementById,
at d er små bokstaver.

180
00:08:55,410 --> 00:09:00,080
Og forhåpentligvis, sparer du flere
minutter ved minst av hjertesorg.

181
00:09:00,080 --> 00:09:02,204
>> Så hva betyr alt dette fortelle oss?

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

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

184
00:09:04,161 --> 00:09:06,610
Nå, hvis vi begynner fra
dokument, dokumentet.

185
00:09:06,610 --> 00:09:10,220
uansett, kan vi nå få til noe
enkelt stykke vår nettside

186
00:09:10,220 --> 00:09:14,870
at vi ønsker å bruke Javascript
bare ved å kalle disse metodene

187
00:09:14,870 --> 00:09:19,940
og utnytte egenskapene
at vi finner på forskjellige steder.

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

189
00:09:24,890 --> 00:09:28,560
kanskje har en lang kodenavn,
kanskje du gjør flere samtaler senere.

190
00:09:28,560 --> 00:09:31,230
Ting kan bli litt ordrike.

191
00:09:31,230 --> 00:09:34,480
Og som programmerere, som du har
sikkert sett i mange av disse videoene,

192
00:09:34,480 --> 00:09:36,600
vi liker ikke ordrike ting.

193
00:09:36,600 --> 00:09:38,520
>> Vi liker å være i stand til å gjøre ting raskt.

194
00:09:38,520 --> 00:09:42,640
Så vi ønsker en mer
konsis måte å si noe.

195
00:09:42,640 --> 00:09:46,270
Så denne typen fører til
oppfatningen av noe som kalles jQuery.

196
00:09:46,270 --> 00:09:49,170
Nå jQuery er ikke Javascript.

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

198
00:09:50,350 --> 00:09:54,790
>> Det er et bibliotek som ble skrevet
av noen Javascript programmerere

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

200
00:09:57,060 --> 00:10:01,300
Og målet er å forenkle denne hva som er
kalt klientsiden scripting, som

201
00:10:01,300 --> 00:10:04,310
er egentlig hva vi var bare
snakker om med DOM manipulasjoner.

202
00:10:04,310 --> 00:10:11,090
Og så hvis jeg ønsket å endre
bakgrunnsfargen på min nettside, kanskje

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

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

205
00:10:15,325 --> 00:10:16,950
Og jeg ønsker å sette sin bakgrunnsfarge.

206
00:10:16,950 --> 00:10:20,720
Hvis jeg bare bruker ren Javascript
hjelp av Document Object Model,

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

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

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

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

211
00:10:28,050 --> 00:10:30,110
Det var mye å si.

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

213
00:10:31,720 --> 00:10:35,760
Og så i jQuery, kan vi kanskje si
dette litt mer presist.

214
00:10:35,760 --> 00:10:39,350
Handelen av er det kanskje litt
litt mer kryptisk plutselig,

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

216
00:10:39,850 --> 00:10:43,580
>> I det minste den lange er litt mer
forklarende om hva vi holder på med.

217
00:10:43,580 --> 00:10:49,947
Dette dollartegn, parenteser,
enkelt sitat, hasj, colorDiv, ikke sant?

218
00:10:49,947 --> 00:10:50,780
Hva betyr det?

219
00:10:50,780 --> 00:10:53,640
Vel, det er i utgangspunktet bare
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Men det er denne typen stenografi
måte å gjøre det ved hjelp av jQuery.

221
00:10:58,700 --> 00:11:01,380
La oss bare ta en titt nå
ved et par forskjellige måter

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

223
00:11:04,520 --> 00:11:06,807
Modellen å manipulere stykker av nettstedet mitt.

224
00:11:06,807 --> 00:11:09,140
Spesielt skal vi
å være i arbeid på å manipulere

225
00:11:09,140 --> 00:11:14,090
fargen på en spesiell
Div, colorDiv, på en nettside.

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

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

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 kalles test.html når du laster ned
dette hvis du ønsker å tinker med dette.

230
00:11:20,750 --> 00:11:24,730
Og jeg har en haug med
knappene på denne siden.

231
00:11:24,730 --> 00:11:27,730
Og jeg sier enkeltfunksjoner
for bakgrunnsfarge, lilla, grønn,

232
00:11:27,730 --> 00:11:31,330
oransje, rød, blå, en enkel funksjon
for bakgrunnsfarge, hendelsesbehandling

233
00:11:31,330 --> 00:11:34,360
for bakgrunnsfarge, og bruker jQuery.

234
00:11:34,360 --> 00:11:38,147
Hva jeg snakker om
når jeg gjør dette?

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

236
00:11:39,230 --> 00:11:41,521
Nå, la oss ta en titt på
noen av kildekoden her.

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

238
00:11:44,770 --> 00:11:48,100
Så enkelte funksjoner for bakgrunn
Fargen er hva jeg har skrevet her.

239
00:11:48,100 --> 00:11:49,350
La meg bla litt.

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

241
00:11:56,170 --> 00:11:58,820
>> Og du vil merke at jeg
har definert disse knappene

242
00:11:58,820 --> 00:12:03,990
å si når denne knappen klikkes,
kaller funksjonen slår lilla.

243
00:12:03,990 --> 00:12:06,670
Når denne knappen klikk, heller,
kaller funksjonen blir grønne,

244
00:12:06,670 --> 00:12:08,710
bli oransje, røde, blir blå.

245
00:12:08,710 --> 00:12:11,880
Du kan sikkert gjette at dette
er kanskje ikke den beste designen

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

247
00:12:12,460 --> 00:12:16,490
>> Det ville være fint om jeg kunne
har en mer generell tilnærming.

248
00:12:16,490 --> 00:12:19,570
Vel, først vil vi ta en titt
på hva disse fem funksjonene 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ønn, oransje, rød,
og blå, henholdsvis.

251
00:12:27,250 --> 00:12:30,930
Så, ikke spesielt best design.

252
00:12:30,930 --> 00:12:33,390
>> Den neste sett med knapper
Jeg har det jeg har skrevet

253
00:12:33,390 --> 00:12:36,380
en enkelt funksjon kalt
endre farge som tilsynelatende

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

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

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

257
00:12:43,840 --> 00:12:46,230
Så jeg har skrevet en mer generell
case Javascript-funksjonen,

258
00:12:46,230 --> 00:12:47,771
som kan se omtrent slik ut.

259
00:12:47,771 --> 00:12:48,680
Jeg har bestått i.

260
00:12:48,680 --> 00:12:52,090
Denne funksjonen endrer farge er
forventer et argument kalt farge.

261
00:12:52,090 --> 00:12:54,970
Og jeg sier innstille
bakgrunnsfarge for å farge.

262
00:12:54,970 --> 00:12:58,390
Så her representerer det jeg har her.

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

264
00:12:59,770 --> 00:13:02,740
>> Men jeg kan være i stand til å
gjøre det bedre enn det.

265
00:13:02,740 --> 00:13:06,140
Hvis vi går ned for å ta en titt
på arrangementet handler situasjon,

266
00:13:06,140 --> 00:13:07,860
Nå er alle disse samtalene ser det samme.

267
00:13:07,860 --> 00:13:10,340
Hvis du husker for vår
diskusjon om hendelsesbehandlinger,

268
00:13:10,340 --> 00:13:15,770
Jeg kan få informasjon om hvilke av
disse knappene ble klikket og bruke det.

269
00:13:15,770 --> 00:13:19,560
>> Og så i event.JavaScript, har jeg
skrevet endre farge arrangementet, som

270
00:13:19,560 --> 00:13:21,110
finner ut hvilken knapp ble klikket.

271
00:13:21,110 --> 00:13:23,250
Det er trigger objektet linje.

272
00:13:23,250 --> 00:13:25,240
Og så her, det blir veldig ordrike.

273
00:13:25,240 --> 00:13:27,420
Men det jeg gjør er at jeg er
sette bakgrunnen

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

275
00:13:30,340 --> 00:13:34,170
Det er teksten i
mellom knappen koder.

276
00:13:34,170 --> 00:13:36,500
>> Og da jeg tydeligvis har
å sette den til små bokstaver.

277
00:13:36,500 --> 00:13:40,780
Og det er hvordan jeg kan konvertere en hel
strengen til små bokstaver i Javascript hjelp

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

279
00:13:42,940 --> 00:13:46,570
Fordi når jeg satt en farge,
så jeg prøver å gjøre her,

280
00:13:46,570 --> 00:13:48,260
fargen må være små bokstaver.

281
00:13:48,260 --> 00:13:50,920
>> Men på knappen som jeg hadde,
hvis vi tar en titt,

282
00:13:50,920 --> 00:13:55,890
Legg merke til at teksten er det
skrevet med stor P for lilla.

283
00:13:55,890 --> 00:13:59,140
Og så i det
bunn her, jeg tilsynelatende

284
00:13:59,140 --> 00:14:02,630
prøve og gjøre dette ved hjelp av jQuery også.

285
00:14:02,630 --> 00:14:06,000
Og i dette tilfellet, er jeg faktisk ikke
kalle en funksjon i det hele tatt.

286
00:14:06,000 --> 00:14:11,430
Jeg har nettopp sagt klassen at jeg er
hjelp for denne knappen er en jQ knapp.

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

288
00:14:12,360 --> 00:14:14,950
>> Så hvordan jQuery vet hva jeg gjør?

289
00:14:14,950 --> 00:14:18,740
Vel, dette er en av fordelene
slash ulemper med jQuery.

290
00:14:18,740 --> 00:14:21,560
Det kan tillate meg å gjøre ting
veldig konsist, men kanskje ikke

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

292
00:14:22,570 --> 00:14:25,570
Kanskje de tre andre gjør en
litt mer fornemme hva jeg gjør.

293
00:14:25,570 --> 00:14:29,010
Her, men hva er det som skjer?

294
00:14:29,010 --> 00:14:31,940
>> Angivelig, skaper
en anonym funksjon

295
00:14:31,940 --> 00:14:36,790
som laster når dokumentet mitt
er klar, så document.ready,

296
00:14:36,790 --> 00:14:38,760
noen funksjon kommer til å skje.

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

298
00:14:40,490 --> 00:14:42,310
Det er når min side er lastet.

299
00:14:42,310 --> 00:14:46,540
>> Så så snart siden min har lagt inn,
Følgende funksjon er alltid klar.

300
00:14:46,540 --> 00:14:54,310
Det sier, hvis et objekt av typen jQButton,
eller hvis klassen jQButton har blitt klikket,

301
00:14:54,310 --> 00:14:55,570
utføre denne funksjonen.

302
00:14:55,570 --> 00:14:59,360
Så her er to anonyme funksjoner,
en definert på innsiden av den andre.

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

304
00:15:03,930 --> 00:15:06,520
når den laster det kaller denne funksjonen.

305
00:15:06,520 --> 00:15:09,740
Og denne funksjonen venter
for en knapp for å bli klikket på.

306
00:15:09,740 --> 00:15:14,490
Og når en knapp klikkes, jQ
knappen spesifikt klikkes,

307
00:15:14,490 --> 00:15:17,150
det kaller denne andre
funksjon, som går

308
00:15:17,150 --> 00:15:21,250
å sette bakgrunns
Fargen colorDiv å være

309
00:15:21,250 --> 00:15:25,990
teksten som står i mellom kodene.

310
00:15:25,990 --> 00:15:28,050
>> Dette er forestillingen om
hvilken knapp ble klikket.

311
00:15:28,050 --> 00:15:31,230
Men ellers er denne typen
oppfører ligner på en hendelse.

312
00:15:31,230 --> 00:15:34,460
Det er akkurat samme måte som jeg
ville uttrykke dette i jQuery.

313
00:15:34,460 --> 00:15:36,790
Igjen, er det sannsynligvis en
mye mer skremmende.

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

315
00:15:40,840 --> 00:15:45,080
som er kanskje litt mer
ordrik, men litt mindre

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

317
00:15:46,000 --> 00:15:51,460
>> Men hvis vi komme tilbake over til nettleseren min
vindu, hvis jeg begynner clicking-- godt,

318
00:15:51,460 --> 00:15:52,690
som endret til lilla.

319
00:15:52,690 --> 00:15:54,450
Dette er grønn med streng metode.

320
00:15:54,450 --> 00:15:56,500
Dette er oransje med hendelsesbehandling.

321
00:15:56,500 --> 00:15:58,300
>> Dette er rød bruker jQuery, ikke sant?

322
00:15:58,300 --> 00:16:01,270
De oppfører seg akkurat det samme.

323
00:16:01,270 --> 00:16:06,509
De bare gjør det ved hjelp av ulike
tilnærminger for å løse problemet.

324
00:16:06,509 --> 00:16:08,550
Det er mye mer å
jQuery da er vi sikkert

325
00:16:08,550 --> 00:16:10,050
skal snakke om i denne videoen.

326
00:16:10,050 --> 00:16:15,410
Men hvis du ønsker å vite mer, kan du
gå til jQuery slags dokumentasjon

327
00:16:15,410 --> 00:16:19,710
og lære mye mer om
dette svært fleksibel biblioteket, som

328
00:16:19,710 --> 00:16:22,550
er stor for å gjøre klientsiden
scripting for eksempel hva vi gjorde

329
00:16:22,550 --> 00:16:26,240
å manipulere utseendet
og følelsen av vår nettside

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
Dette er CS50.

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