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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: Í þetta myndband, við vildum
að kalla út sérstakt athygli

3
00:00:07,230 --> 00:00:09,110
að mjög sérstakur
þáttur JavaScript

4
00:00:09,110 --> 00:00:11,350
að þú gætir fundið vel
þegar þú ert að byrja

5
00:00:11,350 --> 00:00:15,750
að vinna á að notfæra vefsíðum og
breyta innihaldi vefsíðu þinni

6
00:00:15,750 --> 00:00:16,460
á flugu.

7
00:00:16,460 --> 00:00:19,450
Og það er hugmyndin um
Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Svo eins og við sáum í vídeó okkar á
JavaScript, eru hlutir mjög sveigjanlegur.

9
00:00:23,030 --> 00:00:24,750
>> Og þeir geta innihaldið ýmsum sviðum.

10
00:00:24,750 --> 00:00:28,075
Og þó að við ekki fara inn a einhver fjöldi af
smáatriðum, þessir sviðum eða eiginleikar,

11
00:00:28,075 --> 00:00:30,200
að við myndum sennilega meira
viðeigandi kalla þá

12
00:00:30,200 --> 00:00:33,915
í samhengi við hlut, jafnvel
þessir eiginleikar geta verið aðrir hlutir.

13
00:00:33,915 --> 00:00:36,210
Og inni á þeim hlutum
getur verið öðrum hlutum.

14
00:00:36,210 --> 00:00:39,630
>> Þú hefur þetta mjög stór hlut
með fullt af öðrum hlutum

15
00:00:39,630 --> 00:00:43,550
inni af því, sem eins konar
skapar þessa hugmynd af stóru tré.

16
00:00:43,550 --> 00:00:47,540
Nú er skjalið mótmæla er
mjög sérstakt hlut í JavaScript

17
00:00:47,540 --> 00:00:52,580
sem skipuleggur allt um vefinn
síðu undir þessa tegund af regnhlíf

18
00:00:52,580 --> 00:00:53,470
á hlut.

19
00:00:53,470 --> 00:00:56,770
Og svo inni í skjalinu
Markmið eru hlutir sem valda

20
00:00:56,770 --> 00:00:59,630
höfuð og líkama vefsíðu þinni.

21
00:00:59,630 --> 00:01:03,760
>> Inni þeirra eru annað
hluti, et cetera, et cetera,

22
00:01:03,760 --> 00:01:08,411
þar allt vefur blaðsíða hefur
verið skipulögð í þessum stóra hlut.

23
00:01:08,411 --> 00:01:09,660
Hvað er kosti hér, ekki satt?

24
00:01:09,660 --> 00:01:12,170
Jæja, við vitum hvernig á að vinna
með hluti í JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Svo ef við höfum hlutur sem
er átt við okkar allan vefsíðu, sem

26
00:01:15,840 --> 00:01:19,590
þýðir með því að hringja rétt
aðferðir til að vinna að mótmæla

27
00:01:19,590 --> 00:01:22,360
eða breyta víst
eiginleika þess, við

28
00:01:22,360 --> 00:01:25,500
Hægt er að breyta þætti
síðu okkar kerfisbundið

29
00:01:25,500 --> 00:01:30,210
nota JavaScript stað þess að hafa
að kóða eitthvað með, segjum, HTML.

30
00:01:30,210 --> 00:01:33,760
Svo er hér dæmi um a
mjög einfaldur vefur blaðsíða, ekki satt?

31
00:01:33,760 --> 00:01:35,850
Það fékk HTML tags, höfuð.

32
00:01:35,850 --> 00:01:37,979
>> Inni það er titill, halló heimur.

33
00:01:37,979 --> 00:01:38,770
Þá hef ég líkama.

34
00:01:38,770 --> 00:01:40,686
Inni sem, ég hef
þrjár mismunandi hlutir.

35
00:01:40,686 --> 00:01:44,170
Ég er með h2 haus tag,
málsgrein, og tengill.

36
00:01:44,170 --> 00:01:45,920
Þetta er mjög einfaldur vefur blaðsíða.

37
00:01:45,920 --> 00:01:48,590
>> Jæja, hvað gæti skjalið
mótmæla fyrir þetta útlit eins og?

38
00:01:48,590 --> 00:01:50,700
Jæja, það er lítið
skelfilegur kannski í fyrstu.

39
00:01:50,700 --> 00:01:52,510
En það er í raun bara stór tré.

40
00:01:52,510 --> 00:01:54,890
Og við rætur hennar er skjal.

41
00:01:54,890 --> 00:02:00,030
>> Inni skjalið er annar
Markmið vísa til HTML á síðuna mína.

42
00:02:00,030 --> 00:02:02,660
Og HTML á síðuna mína er þetta allt.

43
00:02:02,660 --> 00:02:06,900
Og þá inni í HTML
hlut, ég er með höfuð hlut,

44
00:02:06,900 --> 00:02:09,000
sem vísar til allt þar.

45
00:02:09,000 --> 00:02:11,009
>> Og inni þar,
Ég hef titil hlut.

46
00:02:11,009 --> 00:02:15,620
Og inni þar, ég hef annað
hlut sem er bara halló heimur.

47
00:02:15,620 --> 00:02:18,020
Ég gæti hafa líkama minn
fulltrúa svona.

48
00:02:18,020 --> 00:02:22,850
>> Inni af líkama mínum, ég hef h2
Markmið og p mótmæla fyrir lið

49
00:02:22,850 --> 00:02:25,270
og a hlutur fyrir tengil.

50
00:02:25,270 --> 00:02:29,660
Og svo þetta allt stigveldi
má fulltrúa sem stór tré

51
00:02:29,660 --> 00:02:31,990
með fullt af minni Little
það koma út af því.

52
00:02:31,990 --> 00:02:33,740
Nú, auðvitað, þegar
við erum forritun, við

53
00:02:33,740 --> 00:02:35,560
held ekki af hlutum eins og stór tré.

54
00:02:35,560 --> 00:02:37,980
Við viljum sjá raunverulegt
númer tengd atriði.

55
00:02:37,980 --> 00:02:40,790
>> Og sem betur fer, við getum
nota verktaki verkfæri okkar

56
00:02:40,790 --> 00:02:46,080
að raunverulega taka a líta á
skjal mótmæla þessari vefsíðu er.

57
00:02:46,080 --> 00:02:48,150
Og við skulum gera það.

58
00:02:48,150 --> 00:02:49,580
Þannig að ég hef opnað vafra flipa.

59
00:02:49,580 --> 00:02:51,540
>> Og ég hef opnað Developer Tools.

60
00:02:51,540 --> 00:02:54,460
Og í myndbandið á JavaScript, ég
nefna að hugga er ekki

61
00:02:54,460 --> 00:02:56,770
Aðeins einhvers staðar þar
við að prenta upplýsingar,

62
00:02:56,770 --> 00:02:59,560
það er líka staður þar sem
við getum inntak upplýsinga.

63
00:02:59,560 --> 00:03:01,380
Í þessu samhengi, hvað
Ég ætla að segja er

64
00:03:01,380 --> 00:03:05,720
Mig langar að fá aftur
skjalið hlutir,

65
00:03:05,720 --> 00:03:07,502
svo ég geti byrjað að hafa a líta á það.

66
00:03:07,502 --> 00:03:08,460
Svo hvernig gæti ég gert þetta?

67
00:03:08,460 --> 00:03:10,740
Jæja, ef ég vil
skipuleggja það virkilega fallega,

68
00:03:10,740 --> 00:03:16,317
Ég ætla að segja console.dir, D-I-R.
Nú nota ég console.log að prenta bara

69
00:03:16,317 --> 00:03:17,400
út eitthvað mjög einfalt.

70
00:03:17,400 --> 00:03:20,450
En ef ég vil að skipuleggja þetta
hierarchically eins hlut,

71
00:03:20,450 --> 00:03:23,800
Ég vil það konar byggð
eins og skipulag skrá.

72
00:03:23,800 --> 00:03:27,400
>> Svo ég vil console.dir skjal.

73
00:03:27,400 --> 00:03:28,430
Ég ætla að ýta á Enter.

74
00:03:28,430 --> 00:03:32,350
Og rétt fyrir neðan það núna,
og ég ætla að stækka hér,

75
00:03:32,350 --> 00:03:36,000
Ég hef fengið þessa svar skjal
með smá ör við hliðina á henni.

76
00:03:36,000 --> 00:03:39,470
Nú, þegar ég opna þetta ör,
það er að fara til vera a einhver fjöldi af efni.

77
00:03:39,470 --> 00:03:42,560
>> En við erum að fara að hunsa mikið
af því og bara svona fókus

78
00:03:42,560 --> 00:03:46,250
á mikilvægustu hluti, þannig að við
getur byrjað að sigla þessu skjali.

79
00:03:46,250 --> 00:03:50,125
There 'a einhver fjöldi fleiri til DOM en
bara foreldri hnúður og barn hnúður.

80
00:03:50,125 --> 00:03:51,500
There 'a einhver fjöldi af viðbót efni.

81
00:03:51,500 --> 00:03:52,280
>> Þannig að ég ætla að opna þetta upp.

82
00:03:52,280 --> 00:03:54,610
Og það er allt fullt
af efni sem birtist.

83
00:03:54,610 --> 00:03:59,000
En allt sem ég hugsa um er
hérna, barn hnútar.

84
00:03:59,000 --> 00:04:00,410
Skulum opna það upp.

85
00:04:00,410 --> 00:04:03,810
>> Inni þar sem ég sé
eitthvað kunnuglegt, HTML.

86
00:04:03,810 --> 00:04:07,670
Svo inni skjals okkar
eitt stig niður, HTML.

87
00:04:07,670 --> 00:04:08,550
Ég opna það upp.

88
00:04:08,550 --> 00:04:10,380
Hvað erum við að búast?

89
00:04:10,380 --> 00:04:13,760
>> Ef þú manst úr myndinni okkar,
hvað eigum við að finna inni í HTML?

90
00:04:13,760 --> 00:04:17,275
Hvaða tveir hnútar eru fyrir neðan það í trénu?

91
00:04:17,275 --> 00:04:17,899
Við skulum finna út.

92
00:04:17,899 --> 00:04:18,940
Við opna HTML.

93
00:04:18,940 --> 00:04:22,079
Við förum niður í hnúta barn hennar.

94
00:04:22,079 --> 00:04:23,440
>> Skjóta að opna.

95
00:04:23,440 --> 00:04:25,990
Það er höfuð og líkama.

96
00:04:25,990 --> 00:04:28,540
Og við getum opna höfuð.

97
00:04:28,540 --> 00:04:30,460
Fara á hnúta barn hennar.

98
00:04:30,460 --> 00:04:31,460
Jæja, það er titillinn.

99
00:04:31,460 --> 00:04:33,293
>> Og við gátum farið á og
á svona að eilífu.

100
00:04:33,293 --> 00:04:34,770
Við gætum gert þetta með líkama eins og heilbrigður.

101
00:04:34,770 --> 00:04:40,090
En það er leið fyrir okkur til að líta á
skjalið skipulagt sem stór hlut.

102
00:04:40,090 --> 00:04:42,610
Og ef við lítum á er stór
hlutur sem lítur mikið

103
00:04:42,610 --> 00:04:47,480
eins kóða, sem þýðir að við getum byrjað
að vinna þetta stóra hlut með

104
00:04:47,480 --> 00:04:51,220
kóða til að breyta því sem okkar
website lítur út og finnst eins og.

105
00:04:51,220 --> 00:04:54,920
>> Svo er það mjög öflugt tæki
við höfum yfir að ráða okkar núna.

106
00:04:54,920 --> 00:04:57,360
Svo eins og við sáum bara er
skjal mótmæla sjálft

107
00:04:57,360 --> 00:05:01,392
og öllum hlutum inni í honum
hafa eiginleika og aðferðir, bara

108
00:05:01,392 --> 00:05:04,100
eins og allir aðrir hlutir sem við höfum
verið að vinna með í JavaScript.

109
00:05:04,100 --> 00:05:08,370
En við getum notað þá eiginleika og
nota þessar aðferðir til að raða á bora niður

110
00:05:08,370 --> 00:05:10,900
frá stóru skjali og fá
lægra og lægra og lægra,

111
00:05:10,900 --> 00:05:13,360
fínni og fínni korn
smáatriðum, þar til við

112
00:05:13,360 --> 00:05:17,510
fá að mjög ákveðin stykki af okkar
Vefsíða sem við viljum breyta.

113
00:05:17,510 --> 00:05:22,700
>> Og þegar við uppfærum eiginleika sem
Document Object eða hringdu þær aðferðir,

114
00:05:22,700 --> 00:05:24,450
það gæti gerst á vefsíðu okkar.

115
00:05:24,450 --> 00:05:28,420
Og við þurfum ekki að gera eitthvað hressandi
að hafa þær breytingar taka gildi.

116
00:05:28,420 --> 00:05:33,160
>> Og það er laglegur kaldur getu til að
hafa þegar við erum að vinna með kóða.

117
00:05:33,160 --> 00:05:37,185
Svo hvaða ert sumir af þessum eiginleika
sem eru hluti af skjalinu mótmæla?

118
00:05:37,185 --> 00:05:40,100
Jæja, sá þig líklega
par af þeim mjög fljótt

119
00:05:40,100 --> 00:05:42,700
eins og við vorum zipping
gegnum risastór skjal

120
00:05:42,700 --> 00:05:45,150
mótmæla við sáum bara í vafranum.

121
00:05:45,150 --> 00:05:48,420
>> En a par af þessum eiginleika
gæti verið hluti eins innri HTML.

122
00:05:48,420 --> 00:05:52,950
Og þú gætir jafnvel muna mig
nota þetta í JavaScript vídeó

123
00:05:52,950 --> 00:05:54,950
aftast þegar ég
var að tala um atburði.

124
00:05:54,950 --> 00:05:56,125
Hvað var þessi innri HTML?

125
00:05:56,125 --> 00:05:59,030
Jæja, það er bara það sem er
á milli tags.

126
00:05:59,030 --> 00:06:01,590
>> Og svo innri HTML,
til dæmis, of the title

127
00:06:01,590 --> 00:06:05,390
tag, ef við hefðum haldið áfram í
sem dæmi í smá stund síðan,

128
00:06:05,390 --> 00:06:08,020
hefði verið halló heimur.

129
00:06:08,020 --> 00:06:10,140
Það var titill á síðu okkar.

130
00:06:10,140 --> 00:06:12,370
Aðrar eignir
fela í sér nafn hnút, sem

131
00:06:12,370 --> 00:06:15,810
er nafn á HTML
þáttur svo sem titil.

132
00:06:15,810 --> 00:06:19,100
ID, sem er auðkenni
eigindi af HTML frumefni.

133
00:06:19,100 --> 00:06:23,790
>> Muna að við getum sérstaklega bent
sérstakar þætti HTML okkar

134
00:06:23,790 --> 00:06:27,510
með ID eiginleiki, sem oftast
kemur sér vel í tengslum við CSS,

135
00:06:27,510 --> 00:06:29,000
sérstaklega.

136
00:06:29,000 --> 00:06:33,217
Móðurhnútur, sem er tilvísun í
hvað er bara upp fyrir ofan mig í DOM.

137
00:06:33,217 --> 00:06:35,800
Og hnúður barn, sem er
tilvísun í það sem er niður fyrir neðan mig.

138
00:06:35,800 --> 00:06:37,950
Og við sáum mikið af því
bara að horfa í gegnum.

139
00:06:37,950 --> 00:06:42,970
Barn hnúður, það er hvernig við fengum
lægra og lægra í trénu.

140
00:06:42,970 --> 00:06:46,590
>> Eiginleika, það er bara array
af eiginleikum HTML frumefni.

141
00:06:46,590 --> 00:06:50,270
Svo dæmi um eiginleika gæti
vera ef þú ert með mynd tag,

142
00:06:50,270 --> 00:06:54,090
það hefur yfirleitt fengið eigindi,
kannski hæð og breidd eiginleiki.

143
00:06:54,090 --> 00:06:57,120
Og svo það væri bara að vera fylki
af öllum eiginleikum sem tengjast

144
00:06:57,120 --> 00:06:59,300
með því HTML frumefni.

145
00:06:59,300 --> 00:07:04,140
>> Style er annað sem
er tákna CSS

146
00:07:04,140 --> 00:07:06,050
hönnun tiltekins frumefnis.

147
00:07:06,050 --> 00:07:08,310
Og síðar í þessari
video, munum við sérstaklega

148
00:07:08,310 --> 00:07:14,592
Nýttu stíl til að gera nokkrar
um breytingar á heimasíðu okkar.

149
00:07:14,592 --> 00:07:15,800
Þeir eru sumir eiginleikar.

150
00:07:15,800 --> 00:07:17,591
>> Og það eru einnig nokkur
aðferðir sem við getum

151
00:07:17,591 --> 00:07:22,450
nota einnig hraðar kannski einangra
þættir Document Object.

152
00:07:22,450 --> 00:07:26,730
Kannski mest fjölhæfur
þessara viðburða eru getElementById.

153
00:07:26,730 --> 00:07:31,190
Svo ég gæti sagt eitthvað eins, því
muna það er aðferð til að skjalinu

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

155
00:07:34,880 --> 00:07:39,820
>> Og inni þessara sviga tilgreina
HTML þáttur með sérstakri ID

156
00:07:39,820 --> 00:07:42,330
eiginleiki sem ég hef áður
sett, og ég ætla strax

157
00:07:42,330 --> 00:07:46,685
fara rétt að því frumefni
af heildar website.

158
00:07:46,685 --> 00:07:49,310
Svo ég þarf ekki að kannski bora
niður í gegnum hvert einasta lag.

159
00:07:49,310 --> 00:07:52,841
Ég get bara notað þessa aðferð til að finna það,
tegund af eins og hita að reyna eldflaugum,

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

161
00:07:53,340 --> 00:07:56,300
Það fer bara og finnur
nákvæmlega það sem það er að leita að.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName er
mjög svipuð í anda.

163
00:07:59,290 --> 00:08:02,500
Kannski myndi þetta að finna allar
djörf merki eða öll p tags

164
00:08:02,500 --> 00:08:05,920
og gefa mér upp á fjölbreytta öllu
að ég gæti þá unnið með.

165
00:08:05,920 --> 00:08:12,080
appendChild bætir eitthvað
eitt stig niður í trénu.

166
00:08:12,080 --> 00:08:16,440
>> Svo ég get bætt heilt nýtt
þáttur eitt stig lægri.

167
00:08:16,440 --> 00:08:19,700
Eða ég get fjarlægja stak sem er
eitt stig lægri eins vel ef ég vil

168
00:08:19,700 --> 00:08:22,870
til að eyða einhverju úr vefsíðu mína.

169
00:08:22,870 --> 00:08:28,480
Nú, fljótur kóðun huga og fljótleg
höfuðverkur sparnaður mið, vonandi.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- sem d er lágstafir.

171
00:08:31,670 --> 00:08:36,950
Ég get ekki sagt þér hversu oft ég hef
notað getElementById og eignfærð

172
00:08:36,950 --> 00:08:38,336
D það.

173
00:08:38,336 --> 00:08:39,460
Vegna þess að það er mjög algeng.

174
00:08:39,460 --> 00:08:42,990
Ef við skrifa orðið ID, það er
yfirleitt höfuðborg I höfuðborg D.

175
00:08:42,990 --> 00:08:44,240
Og númerið mitt bara virkar ekki.

176
00:08:44,240 --> 00:08:45,630
Og ég get ekki fundið út hvers vegna.

177
00:08:45,630 --> 00:08:49,490
Þetta er virkilega, virkilega, virkilega
Algeng villa að allir gerir,

178
00:08:49,490 --> 00:08:51,890
jafnvel sérfræðingar sem hafa
verið að gera þetta að eilífu.

179
00:08:51,890 --> 00:08:55,410
Svo bara vera meðvitaður, getElementById,
sem d er lágstafir.

180
00:08:55,410 --> 00:09:00,080
Og vonandi, að spara þér nokkrar
mínútur að minnsta kosti hugarangur.

181
00:09:00,080 --> 00:09:02,204
>> Svo hvað þýðir þetta allt að segja okkur?

182
00:09:02,204 --> 00:09:03,120
Við höfum þessar aðferðir.

183
00:09:03,120 --> 00:09:04,161
Við höfum þessa eiginleika.

184
00:09:04,161 --> 00:09:06,610
Nú, ef við byrjum frá
skjal, skjal.

185
00:09:06,610 --> 00:09:10,220
hvað getum við nú fengið að einhverju
Eitt stykki af vefsíðu okkar

186
00:09:10,220 --> 00:09:14,870
sem við viljum nota JavaScript
bara með því að boða til þessara aðferðir

187
00:09:14,870 --> 00:09:19,940
og fá meira eignir
sem við finnum á ýmsum stöðum.

188
00:09:19,940 --> 00:09:24,890
>> Þetta getur orðið wordy, þetta
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
kannski hafa langa tag nafn,
kannski þú fleiri símtöl síðar.

190
00:09:28,560 --> 00:09:31,230
Það getur fengið smá wordy.

191
00:09:31,230 --> 00:09:34,480
Og sem forritari, og þú hefur
líklega séð í mörgum af þessum myndböndum,

192
00:09:34,480 --> 00:09:36,600
við gerum ekki eins wordy hluti.

193
00:09:36,600 --> 00:09:38,520
>> Við eins og að vera fær um að gera hlutina hratt.

194
00:09:38,520 --> 00:09:42,640
Þannig að við viljum meira
nákvæm leið til að segja eitthvað.

195
00:09:42,640 --> 00:09:46,270
Þannig að þetta tegund af leiðir til
hugmynd um eitthvað sem kallast jQuery.

196
00:09:46,270 --> 00:09:49,170
Nú er jQuery ekki JavaScript.

197
00:09:49,170 --> 00:09:50,350
Það er ekki hluti af JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Það er bókasafn sem var skrifuð
af sumum JavaScript forritari

199
00:09:54,790 --> 00:09:57,060
um 10 árum síðan.

200
00:09:57,060 --> 00:10:01,300
Og markmið hennar er að einfalda þetta það er
kallaði viðskiptavinur hlið forskriftarþarfir, sem

201
00:10:01,300 --> 00:10:04,310
er í grundvallaratriðum það sem við vorum bara
að tala um með DOM misnotkun.

202
00:10:04,310 --> 00:10:11,090
Og svo ef ég vildi breyta
bakgrunnslit vefsíðu mína, kannski

203
00:10:11,090 --> 00:10:11,980
sérstakur Div.

204
00:10:11,980 --> 00:10:15,325
>> Hérna, ég er greinilega að fá
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Og ég vil setja bakgrunnslit þess.

206
00:10:16,950 --> 00:10:20,720
Ef ég er bara með hreint JavaScript
með Document Object Model,

207
00:10:20,720 --> 00:10:23,990
það er mikið af efni, ekki satt?
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
>> Whew.

211
00:10:28,050 --> 00:10:30,110
Það var mikið að segja.

212
00:10:30,110 --> 00:10:31,720
Það er mikið að slá líka.

213
00:10:31,720 --> 00:10:35,760
Og svo í jQuery, getum við kannski sagt
þetta svolítið meira concisely.

214
00:10:35,760 --> 00:10:39,350
The viðskipti burt vera það er kannski svolítið
aðeins meira dulinn allt í einu,

215
00:10:39,350 --> 00:10:39,850
ekki satt?

216
00:10:39,850 --> 00:10:43,580
>> Að minnsta kosti lengi er dálítið meira
útskýrandi um hvað við erum að gera.

217
00:10:43,580 --> 00:10:49,947
Þetta dollaramerki, sviga,
einn vitna, kjötkássa, colorDiv, ekki satt?

218
00:10:49,947 --> 00:10:50,780
Hvað þýðir það?

219
00:10:50,780 --> 00:10:53,640
Jæja, það er í rauninni bara
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> En það er einmitt svona styttingin
leið til að gera það með því að nota jQuery.

221
00:10:58,700 --> 00:11:01,380
Við skulum bara taka a líta nú
á nokkra mismunandi vegu

222
00:11:01,380 --> 00:11:04,520
að ég skuli í raun
nota þetta skjal mótmæla

223
00:11:04,520 --> 00:11:06,807
Model til að vinna stykki á síðuna mína.

224
00:11:06,807 --> 00:11:09,140
Einkum við erum að fara
til að vinna á að notfæra

225
00:11:09,140 --> 00:11:14,090
litur tiltekið
Div, colorDiv, á vefsíðu.

226
00:11:14,090 --> 00:11:15,299
Svo skulum taka a líta á það.

227
00:11:15,299 --> 00:11:15,798
Allt í lagi.

228
00:11:15,798 --> 00:11:16,700
Þannig að ég er á síðunni.

229
00:11:16,700 --> 00:11:20,750
Það heitir test.html þegar þú sækir
þetta ef þú vilt að tinker með þetta.

230
00:11:20,750 --> 00:11:24,730
Og ég hef fengið fullt af
hnappa á síðunni.

231
00:11:24,730 --> 00:11:27,730
Og ég er að segja einstaka aðgerðir
fyrir lit bakgrunnur, fjólublátt, grænt,

232
00:11:27,730 --> 00:11:31,330
appelsínugulur, rauður, blár, eitt fall
fyrir bakgrunnslit, atburður dýraþjálfari

233
00:11:31,330 --> 00:11:34,360
fyrir lit bakgrunnur, og nota jQuery.

234
00:11:34,360 --> 00:11:38,147
Hvað er ég að tala um
þegar ég er að gera þetta?

235
00:11:38,147 --> 00:11:39,230
Þannig að við höfum séð á hnappana.

236
00:11:39,230 --> 00:11:41,521
Nú, við skulum taka a líta á
sumir af the uppspretta merkjamál hér.

237
00:11:41,521 --> 00:11:44,770
Við munum byrja með test.html.

238
00:11:44,770 --> 00:11:48,100
Svo einstaka aðgerðir til bakgrunni
litur er það sem ég hef slegið hér.

239
00:11:48,100 --> 00:11:49,350
Láta mig fletta svolítið.

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

241
00:11:56,170 --> 00:11:58,820
>> Og þú munt taka eftir að ég
að skilgreina þessa hnappa

242
00:11:58,820 --> 00:12:03,990
að segja þegar þessi hnappur er smellt
hringja í virka snúa fjólublátt.

243
00:12:03,990 --> 00:12:06,670
Þegar þessi hnappur er að smella, heldur
kalla virka verða græn,

244
00:12:06,670 --> 00:12:08,710
snúa appelsína, snúa rauður, blá.

245
00:12:08,710 --> 00:12:11,880
Þú getur sennilega giska á að þetta
er kannski ekki sú besta hönnun

246
00:12:11,880 --> 00:12:12,460
vit, ekki satt?

247
00:12:12,460 --> 00:12:16,490
>> Það væri gott ef ég gæti
hafa fleiri almenna nálgun.

248
00:12:16,490 --> 00:12:19,570
Jæja, fyrst við munum taka a líta
á hvað þessir fimm aðgerðir eru

249
00:12:19,570 --> 00:12:24,400
document.getElementById
colorDiv.style.background = fjólublár,

250
00:12:24,400 --> 00:12:27,250
grænn, appelsínugulur, rauður,
og blár, hver um sig.

251
00:12:27,250 --> 00:12:30,930
Svo, ekki sérstaklega bestu hönnun.

252
00:12:30,930 --> 00:12:33,390
>> Næsta sett af hnöppum
Ég hef er að ég hef skrifað

253
00:12:33,390 --> 00:12:36,380
einn valkost sem heitir
breyta lit sem virðist

254
00:12:36,380 --> 00:12:38,960
tekur streng sem rök hennar.

255
00:12:38,960 --> 00:12:40,290
Þannig að þetta er svolítið betur.

256
00:12:40,290 --> 00:12:43,840
Fjólublár, grænn, appelsínugulur, rauður,
blár er nú rök.

257
00:12:43,840 --> 00:12:46,230
Þannig að ég hef skrifað meira almennt
Málið JavaScript virka,

258
00:12:46,230 --> 00:12:47,771
sem gæti litið eitthvað svona.

259
00:12:47,771 --> 00:12:48,680
Ég er liggur í.

260
00:12:48,680 --> 00:12:52,090
Þessi aðgerð breyta lit er
von rök kallast litur.

261
00:12:52,090 --> 00:12:54,970
Og ég er að segja stillt
bakgrunnslit að lita.

262
00:12:54,970 --> 00:12:58,390
Svo hér táknar það sem ég hef fengið hér.

263
00:12:58,390 --> 00:12:59,770
Svo er það dálítið betur.

264
00:12:59,770 --> 00:13:02,740
>> En ég gæti verið fær um að
gera betur en það.

265
00:13:02,740 --> 00:13:06,140
Ef við förum niður til að kíkja
á atburði dýraþjálfari aðstæðum,

266
00:13:06,140 --> 00:13:07,860
nú er allt þessir kallar líta eins.

267
00:13:07,860 --> 00:13:10,340
Ef þú manst að okkar
umfjöllun um atburði dýraþjálfari,

268
00:13:10,340 --> 00:13:15,770
Ég get fengið upplýsingar um hvaða
Þessir takkar var smellt og nota það.

269
00:13:15,770 --> 00:13:19,560
>> Og svo í event.JavaScript, hef ég
skrifað breyta lit atburður, sem

270
00:13:19,560 --> 00:13:21,110
tölur út hver hnappur sem smellt.

271
00:13:21,110 --> 00:13:23,250
Það er kveikt mótmæla línu.

272
00:13:23,250 --> 00:13:25,240
Og þá hér, verður þetta virkilega wordy.

273
00:13:25,240 --> 00:13:27,420
En það sem ég er að gera er ég
setja bakgrunn

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

275
00:13:30,340 --> 00:13:34,170
Það er textinn í
milli hnappinn tags.

276
00:13:34,170 --> 00:13:36,500
>> Og þá hef ég greinilega
að setja það til lágstafir.

277
00:13:36,500 --> 00:13:40,780
Og það er hvernig ég get umbreyta heilt
band til lágstafir í JavaScript með

278
00:13:40,780 --> 00:13:42,940
sem aðferð til lágstafir.

279
00:13:42,940 --> 00:13:46,570
Vegna þess að þegar ég setti lit,
eins og ég er að reyna að gera hér,

280
00:13:46,570 --> 00:13:48,260
liturinn þarf að vera allt lágstafir.

281
00:13:48,260 --> 00:13:50,920
>> En hnappur sem ég hafði,
ef við tökum aðra líta,

282
00:13:50,920 --> 00:13:55,890
eftir því að textinn er
skrifað með höfuðborg P fyrir fjólublátt.

283
00:13:55,890 --> 00:13:59,140
Og þá á mjög
botn hér, hef greinilega

284
00:13:59,140 --> 00:14:02,630
reyna að gera þetta með því að nota jQuery eins og heilbrigður.

285
00:14:02,630 --> 00:14:06,000
Og í þessu tilfelli, ég er í raun ekki
hringja í virka yfirleitt.

286
00:14:06,000 --> 00:14:11,430
Ég hef bara sagt bekknum að ég
að nota í þessu hnapp er jQ hnappinn.

287
00:14:11,430 --> 00:14:12,360
Það er það.

288
00:14:12,360 --> 00:14:14,950
>> Svo hvernig hjartarskinn jQuery vita hvað ég er að gera?

289
00:14:14,950 --> 00:14:18,740
Jæja, þetta er einn af þeim kostum
rista galla jQuery.

290
00:14:18,740 --> 00:14:21,560
Það er hægt að leyfa mér að gera hlutina
mjög concisely, en kannski ekki

291
00:14:21,560 --> 00:14:22,570
eins innsæi.

292
00:14:22,570 --> 00:14:25,570
Kannski þeir hinir þrír gera
aðeins meira vit hvað ég er að gera.

293
00:14:25,570 --> 00:14:29,010
Hér, þó, hvað er að gerast?

294
00:14:29,010 --> 00:14:31,940
>> Apparently, búa
nafnlaus aðgerð

295
00:14:31,940 --> 00:14:36,790
sem hleðst þegar skjal minn
er tilbúinn, svo document.ready,

296
00:14:36,790 --> 00:14:38,760
sumir virka er að fara að gerast.

297
00:14:38,760 --> 00:14:40,490
Í grundvallaratriðum, þegar er skjal tilbúið?

298
00:14:40,490 --> 00:14:42,310
Það er þegar mín síða hefur hlaðinn.

299
00:14:42,310 --> 00:14:46,540
>> Svo um leið og mín síða hefur hlaðinn,
Eftirfarandi aðgerðir er alltaf tilbúin.

300
00:14:46,540 --> 00:14:54,310
Það segir, ef hlut af tegundinni jQButton,
eða ef flokkur jQButton hefur verið smellt

301
00:14:54,310 --> 00:14:55,570
framkvæma þessa aðgerð.

302
00:14:55,570 --> 00:14:59,360
Svo er hér í tvo nafnlaus virka,
það sama og skilgreint innan í öðrum.

303
00:14:59,360 --> 00:15:03,930
>> Svo öllu samhengi minni
hér svo langt er mín síða

304
00:15:03,930 --> 00:15:06,520
þegar það sækir það kallar þessa aðgerð.

305
00:15:06,520 --> 00:15:09,740
Og þessi aðgerð er að bíða
fyrir hnappinn til að smella.

306
00:15:09,740 --> 00:15:14,490
Og þegar smellt er á, jQ
hnappur sérstaklega er smellt

307
00:15:14,490 --> 00:15:17,150
það kallar þetta hitt
virka, sem er að fara

308
00:15:17,150 --> 00:15:21,250
að setja bakgrunn
litur colorDiv að vera

309
00:15:21,250 --> 00:15:25,990
Textinn er á milli tags.

310
00:15:25,990 --> 00:15:28,050
>> Þetta er hugmyndin um
hver hnappur sem smellt.

311
00:15:28,050 --> 00:15:31,230
En annars, þetta er tegund af
atferlis svipað atburði.

312
00:15:31,230 --> 00:15:34,460
Það er bara sama og ég
myndi tjá þetta í jQuery.

313
00:15:34,460 --> 00:15:36,790
Aftur, það er líklega
miklu meira ógnvekjandi.

314
00:15:36,790 --> 00:15:40,840
Það er ekki eins skýr og
eitthvað eins event.js,

315
00:15:40,840 --> 00:15:45,080
sem er kannski svolítið meira
fjölorður, en svolítið minna

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

317
00:15:46,000 --> 00:15:51,460
>> En ef við skjóta aftur yfir til vafranum mínum
glugga, ef ég byrja clicking-- vel,

318
00:15:51,460 --> 00:15:52,690
sem breytt í fjólublátt.

319
00:15:52,690 --> 00:15:54,450
Þetta er grænt með band aðferð.

320
00:15:54,450 --> 00:15:56,500
Þetta er appelsínugulur með atburð dýraþjálfari.

321
00:15:56,500 --> 00:15:58,300
>> Þetta er rauður með jQuery, ekki satt?

322
00:15:58,300 --> 00:16:01,270
Þeir allir hegða sér nákvæmlega sama.

323
00:16:01,270 --> 00:16:06,509
Þeir gera bara það með öðruvísi
aðferðir til að leysa vandamál.

324
00:16:06,509 --> 00:16:08,550
There 'a einhver fjöldi fleiri til
jQuery þá erum við vissulega

325
00:16:08,550 --> 00:16:10,050
að fara að tala um í þessu myndbandi.

326
00:16:10,050 --> 00:16:15,410
En ef þú vilt læra meira, þú getur
fara í jQuery konar gögnum

327
00:16:15,410 --> 00:16:19,710
og læra töluvert meira um
þetta mjög sveigjanlegt bókasafn, sem

328
00:16:19,710 --> 00:16:22,550
er frábært fyrir að gera viðskiptavinur hlið
forskriftarþarfir eins og það sem við vorum að gera

329
00:16:22,550 --> 00:16:26,240
að vinna útlit
og feel af vefsíðu okkar

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

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

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

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