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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: V tomto videu, sme chceli
zavolať samostatnú pozornosť

3
00:00:07,230 --> 00:00:09,110
k veľmi špecifický
prvok JavaScriptu

4
00:00:09,110 --> 00:00:11,350
že by ste mohli nájsť šikovný
keď začínate

5
00:00:11,350 --> 00:00:15,750
pracovať na manipuláciu webové stránky a
zmena obsahu svoje webové stránky

6
00:00:15,750 --> 00:00:16,460
v reálnom čase.

7
00:00:16,460 --> 00:00:19,450
A to je pojem
Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Tak ako sme videli v našom videu na
JavaScript, objekty sú veľmi flexibilné.

9
00:00:23,030 --> 00:00:24,750
>> A môžu obsahovať rôzne polia.

10
00:00:24,750 --> 00:00:28,075
A aj keď sme nešli do veľa
detail, tieto polia alebo vlastnosti,

11
00:00:28,075 --> 00:00:30,200
že by sme pravdepodobne viac
primerane volať

12
00:00:30,200 --> 00:00:33,915
v rámci objektu, a to aj
Tieto vlastnosti môžu byť iné predmety.

13
00:00:33,915 --> 00:00:36,210
A vo vnútri týchto objektov
môžu byť iné predmety.

14
00:00:36,210 --> 00:00:39,630
>> Máte tento veľmi veľký objekt
s mnohých iných objektov

15
00:00:39,630 --> 00:00:43,550
vnútri nej, aký typ
vytvorí tento predstavu o veľký strom.

16
00:00:43,550 --> 00:00:47,540
Teraz, objekt dokument je
veľmi zvláštne objekt v JavaScripte

17
00:00:47,540 --> 00:00:52,580
že organizuje celý svoj web
strana v rámci tohto druhu dáždnika

18
00:00:52,580 --> 00:00:53,470
objektu.

19
00:00:53,470 --> 00:00:56,770
A tak vo vnútri dokumentu
Predmetom sú predmety predstavujúce

20
00:00:56,770 --> 00:00:59,630
hlava a telo svoje webové stránky.

21
00:00:59,630 --> 00:01:03,760
>> Vnútri z nich sú iné
objektov, a tak ďalej, a tak ďalej,

22
00:01:03,760 --> 00:01:08,411
kým sa celá vaša webová stránka má
boli organizované v tomto veľkom objekte.

23
00:01:08,411 --> 00:01:09,660
Čo je hore tu, že jo?

24
00:01:09,660 --> 00:01:12,170
No, vieme, ako pracovať
s objektmi v JavaScriptu.

25
00:01:12,170 --> 00:01:15,840
>> Takže ak máme objekt, ktorý
odkazuje na celú našu webovú stránku, ktorá

26
00:01:15,840 --> 00:01:19,590
znamená volaním správny
Metódy pre manipuláciu tento objekt

27
00:01:19,590 --> 00:01:22,360
alebo zmeniť určité
jeho vlastnosti, sme

28
00:01:22,360 --> 00:01:25,500
môže zmeniť prvky
Naša stránka programovo

29
00:01:25,500 --> 00:01:30,210
pomocou JavaScriptu namiesto toho,
kódovať veci s, povedzme, HTML.

30
00:01:30,210 --> 00:01:33,760
Tak tu je príklad
veľmi jednoduchá webová stránka, že?

31
00:01:33,760 --> 00:01:35,850
Má to HTML tagy, hlavu.

32
00:01:35,850 --> 00:01:37,979
>> Vnútri je titul, Hello World.

33
00:01:37,979 --> 00:01:38,770
Potom mám telo.

34
00:01:38,770 --> 00:01:40,686
Vnútri to, mám
tri rôzne veci.

35
00:01:40,686 --> 00:01:44,170
Mám tag h2 hlavičky,
odsek, a odkaz.

36
00:01:44,170 --> 00:01:45,920
Jedná sa o veľmi jednoduchú webovú stránku.

37
00:01:45,920 --> 00:01:48,590
>> No, čo by mohlo tento dokument
objekt pre tento vyzerať?

38
00:01:48,590 --> 00:01:50,700
No, je to trochu
desivý snáď na prvom mieste.

39
00:01:50,700 --> 00:01:52,510
Ale je to naozaj len veľký strom.

40
00:01:52,510 --> 00:01:54,890
A na samom koreňa toho je dokument.

41
00:01:54,890 --> 00:02:00,030
>> Vnútri tohto dokumentu je ďalší
objekt s odkazom na HTML mojej stránky.

42
00:02:00,030 --> 00:02:02,660
A HTML mojej strany je to všetko.

43
00:02:02,660 --> 00:02:06,900
A potom vnútri HTML
objekt, mám objekt hlavy,

44
00:02:06,900 --> 00:02:09,000
ktorý sa odvoláva na všetko, čo tam.

45
00:02:09,000 --> 00:02:11,009
>> A vnútornej časti tam,
Mám titulnej objekt.

46
00:02:11,009 --> 00:02:15,620
A vnútri tam, mám ďalší
namietajú, že je to práve hello world.

47
00:02:15,620 --> 00:02:18,020
Mohol by som mať svoje telo
zastúpené takto.

48
00:02:18,020 --> 00:02:22,850
>> Vnútri moje telo, mám h2
objekt a p objekt pre odsek

49
00:02:22,850 --> 00:02:25,270
a objekt na odkaz.

50
00:02:25,270 --> 00:02:29,660
A tak to celé hierarchie
môže byť reprezentovaný ako veľký strom

51
00:02:29,660 --> 00:02:31,990
s množstvom menších Krtkom
veci z neho vychádza.

52
00:02:31,990 --> 00:02:33,740
Teraz, samozrejme, ak
sme programovanie, my

53
00:02:33,740 --> 00:02:35,560
si nemyslím, že o veci, ako veľký strom.

54
00:02:35,560 --> 00:02:37,980
Chceme vidieť skutočné
kódu v súvislosti veci.

55
00:02:37,980 --> 00:02:40,790
>> A našťastie, môžeme
používať naše nástroje pre vývojárov

56
00:02:40,790 --> 00:02:46,080
skutočne sa pozrieť na
Táto webová stránka je Document Object.

57
00:02:46,080 --> 00:02:48,150
A poďme to urobiť.

58
00:02:48,150 --> 00:02:49,580
Takže som otvorila kartu prehliadača.

59
00:02:49,580 --> 00:02:51,540
>> A ja som otvoril Developer Tools.

60
00:02:51,540 --> 00:02:54,460
A v mojom videu na JavaScripte, ja
uvedené, že konzola nie je

61
00:02:54,460 --> 00:02:56,770
len niekam, kde
tlačíme informácií,

62
00:02:56,770 --> 00:02:59,560
je to tiež miesto, kde
môžeme vstupné informácie.

63
00:02:59,560 --> 00:03:01,380
V tejto súvislosti, čo
Chystám sa povedať, je

64
00:03:01,380 --> 00:03:05,720
Chcel by som sa dostať späť
objekty dokument,

65
00:03:05,720 --> 00:03:07,502
takže môžem začať sa pozrieť na to.

66
00:03:07,502 --> 00:03:08,460
Tak ako by som mohol urobiť?

67
00:03:08,460 --> 00:03:10,740
No, keď chcem
usporiadať je naozaj pekne,

68
00:03:10,740 --> 00:03:16,317
Chystám sa povedať console.dir, D-I-R.
Teraz, ja používam console.log sa stačí vytlačiť

69
00:03:16,317 --> 00:03:17,400
out niečo veľmi jednoduché.

70
00:03:17,400 --> 00:03:20,450
Ale ak chcem zorganizovať
hierarchicky ako objekt,

71
00:03:20,450 --> 00:03:23,800
Chcem, aby to nejako štruktúrovaná
ako adresárovej štruktúry.

72
00:03:23,800 --> 00:03:27,400
>> Takže chcem, aby console.dir dokumentu.

73
00:03:27,400 --> 00:03:28,430
Budem stlačte Enter.

74
00:03:28,430 --> 00:03:32,350
A práve pod ním teraz,
a ja priblížiť tu,

75
00:03:32,350 --> 00:03:36,000
Mám tento dokument odpovede
s malou šípkou vedľa nej.

76
00:03:36,000 --> 00:03:39,470
Teraz, keď otvorím na túto šípku,
tam to bude veľa vecí.

77
00:03:39,470 --> 00:03:42,560
>> Ale budeme ignorovať veľa
na to a len tak zo zamerania

78
00:03:42,560 --> 00:03:46,250
na najdôležitejšia časť, takže sme
môže začať navigovať tento dokument.

79
00:03:46,250 --> 00:03:50,125
Je tu oveľa viac, než DOM
len rodič uzly a podriadené uzly.

80
00:03:50,125 --> 00:03:51,500
Je tu veľa doplnkových vecí.

81
00:03:51,500 --> 00:03:52,280
>> Takže ja idem otvoriť toto hore.

82
00:03:52,280 --> 00:03:54,610
A je tu oveľa
z vecí, ktoré sa objavia.

83
00:03:54,610 --> 00:03:59,000
Ale všetko ma zaujíma, je
tu, podriadené uzly.

84
00:03:59,000 --> 00:04:00,410
Poďme otvoriť, že až.

85
00:04:00,410 --> 00:04:03,810
>> Vnútri tam vidím
čosi spájalo, HTML.

86
00:04:03,810 --> 00:04:07,670
Takže v našej dokumente
o jednu úroveň dole, HTML.

87
00:04:07,670 --> 00:04:08,550
Otvorím, že až.

88
00:04:08,550 --> 00:04:10,380
Čo sme očakávali?

89
00:04:10,380 --> 00:04:13,760
>> Ak si spomínate z nášho diagramu,
Čo by sme mali nájsť vo vnútri HTML?

90
00:04:13,760 --> 00:04:17,275
Aké dvoma uzlami sú pod ním v strome?

91
00:04:17,275 --> 00:04:17,899
Poďme zistiť.

92
00:04:17,899 --> 00:04:18,940
Otvárame HTML.

93
00:04:18,940 --> 00:04:22,079
Ideme dole na svojich podriadených uzly.

94
00:04:22,079 --> 00:04:23,440
>> Pop, že otvorené.

95
00:04:23,440 --> 00:04:25,990
Je tam hlava a telo.

96
00:04:25,990 --> 00:04:28,540
A môžeme otvoriť hlavu.

97
00:04:28,540 --> 00:04:30,460
Prejsť na svojich podriadených uzly.

98
00:04:30,460 --> 00:04:31,460
No, je tu titul.

99
00:04:31,460 --> 00:04:33,293
>> A mohli by sme pokračovať ďalej a
takhle navždy.

100
00:04:33,293 --> 00:04:34,770
Mohli by sme to urobiť s telom rovnako.

101
00:04:34,770 --> 00:04:40,090
Ale existuje spôsob, ako pre nás pozrieť sa na
dokument organizovaná ako veľký objekt.

102
00:04:40,090 --> 00:04:42,610
A ak sa pozrieme na je veľký
Objekt, ktorý vyzerá veľa

103
00:04:42,610 --> 00:04:47,480
ako je kód, to znamená, že môžeme začať
Pre manipuláciu s touto veľkou objekt s použitím

104
00:04:47,480 --> 00:04:51,220
Kód zmeniť to, čo naše
webové stránky vyzerá a cíti sa ako.

105
00:04:51,220 --> 00:04:54,920
>> Tak to je celkom mocný nástroj
máme k dispozícii teraz.

106
00:04:54,920 --> 00:04:57,360
Tak, ako sme práve videli sa
Dokument samotného objektu

107
00:04:57,360 --> 00:05:01,392
a všetky objekty vnútri neho
majú vlastnosti a metódy, rovnako

108
00:05:01,392 --> 00:05:04,100
rovnako ako akýkoľvek iný objekt, ktorý sme
pracoval s v JavaScriptu.

109
00:05:04,100 --> 00:05:08,370
Ale môžeme použiť tieto vlastnosti a
použiť tieto metódy pre druh drill down

110
00:05:08,370 --> 00:05:10,900
z veľkého dokumentu a získať
nižšie a nižšie a nižšie,

111
00:05:10,900 --> 00:05:13,360
jemnejšie a jemnejšie zrná
detailu, kým sme

112
00:05:13,360 --> 00:05:17,510
dostať sa do veľmi špecifický kus nášho
webové stránky, ktoré chceme zmeniť.

113
00:05:17,510 --> 00:05:22,700
>> A keď sme aktualizáciu vlastností
Document Object alebo volajte na tieto metódy,

114
00:05:22,700 --> 00:05:24,450
čo sa môže stať na našej webovej stránke.

115
00:05:24,450 --> 00:05:28,420
A my nemusíme robiť žiadne osviežujúci
mať tieto zmeny prejavia.

116
00:05:28,420 --> 00:05:33,160
>> A to je celkom v pohode schopnosť
majú, keď pracujeme s kódom.

117
00:05:33,160 --> 00:05:37,185
Takže aké sú niektoré z týchto vlastností
ktoré sú súčasťou objektu dokumentu?

118
00:05:37,185 --> 00:05:40,100
No, pravdepodobne ste videli
Pár z nich sa naozaj rýchlo

119
00:05:40,100 --> 00:05:42,700
ako sme boli zips
cez obrie dokumentu

120
00:05:42,700 --> 00:05:45,150
Objekt sme práve videli vo webovom prehliadači.

121
00:05:45,150 --> 00:05:48,420
>> Ale niekoľko týchto vlastností
by mohlo byť veci, ako je vnútorný HTML.

122
00:05:48,420 --> 00:05:52,950
A možno mi dokonca spomenúť
pomocou tohto vo videu JavaScript

123
00:05:52,950 --> 00:05:54,950
na samom konci, keď som
hovoril o udalostiach.

124
00:05:54,950 --> 00:05:56,125
Čo to bolo za vnútornú HTML?

125
00:05:56,125 --> 00:05:59,030
No, to je práve to, čo je
medzi tagy.

126
00:05:59,030 --> 00:06:01,590
>> A tak sa vnútorný HTML,
napríklad, z titulu

127
00:06:01,590 --> 00:06:05,390
tag, keby sme ďalej v
Napríklad, že pred chvíľou,

128
00:06:05,390 --> 00:06:08,020
by bolo hello world.

129
00:06:08,020 --> 00:06:10,140
To bol názov našej stránke.

130
00:06:10,140 --> 00:06:12,370
Ostatné vlastnosti
obsahovať meno uzla, ktorý

131
00:06:12,370 --> 00:06:15,810
je názov formátu HTML
element, ako je názov.

132
00:06:15,810 --> 00:06:19,100
ID, ktorý je ID
atribút prvku HTML.

133
00:06:19,100 --> 00:06:23,790
>> Pripomeňme, že môžeme špeciálne indikovať
špecifické prvky našej HTML

134
00:06:23,790 --> 00:06:27,510
s atribútom ID, ktoré zvyčajne
príde vhod v súvislosti s CSS,

135
00:06:27,510 --> 00:06:29,000
konkrétne.

136
00:06:29,000 --> 00:06:33,217
Parent uzol, čo je odkaz na
to, čo je práve hore nado mnou v DOM.

137
00:06:33,217 --> 00:06:35,800
A podriadené uzly, čo je
odkaz na to, čo je dole podo mnou.

138
00:06:35,800 --> 00:06:37,950
A my sme videli veľa, ktorý
len sa pozerá skrz.

139
00:06:37,950 --> 00:06:42,970
Podriadené uzly, to je, ako sme sa dostali
nižšie a nižšie do stromu.

140
00:06:42,970 --> 00:06:46,590
>> Atribúty, to je len pole
atribútov prvku HTML.

141
00:06:46,590 --> 00:06:50,270
Takže príklad vlastností by mohol
byť, ak máte značku obrazu,

142
00:06:50,270 --> 00:06:54,090
zvyčajne má atribút zdroje,
možná výška a šírka, atribút.

143
00:06:54,090 --> 00:06:57,120
A tak, že by jednoducho byť polia
zo všetkých atribútov súvisiacich

144
00:06:57,120 --> 00:06:59,300
s tým prvku HTML.

145
00:06:59,300 --> 00:07:04,140
>> Štýl je ešte jeden, ktorý
sa predstavujú CSS

146
00:07:04,140 --> 00:07:06,050
styling z určitého prvku.

147
00:07:06,050 --> 00:07:08,310
A neskôr v tomto
Video, budeme konkrétne

148
00:07:08,310 --> 00:07:14,592
leverage štýl, aby sa pár
o zmenách na našich stránkach.

149
00:07:14,592 --> 00:07:15,800
To sú len niektoré vlastnosti.

150
00:07:15,800 --> 00:07:17,591
>> A tam sú tiež niektoré
Metódy, ktoré môžeme

151
00:07:17,591 --> 00:07:22,450
používajú aj rýchlejšie možná izolovať
prvky objektu dokumentu.

152
00:07:22,450 --> 00:07:26,730
Možno, že najuniverzálnejší
títo byť getElementById.

153
00:07:26,730 --> 00:07:31,190
A tak by som mohol povedať niečo také, pretože
pamätajte, že je to spôsob dokumente

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

155
00:07:34,880 --> 00:07:39,820
>> A vo vnútri týchto zátvoriek, špecifikujte
HTML prvok s konkrétnym ID

156
00:07:39,820 --> 00:07:42,330
atribút, ktorý som predtým
set, a budem hneď

157
00:07:42,330 --> 00:07:46,685
ísť priamo k tomuto prvku
z celkovej webové stránky.

158
00:07:46,685 --> 00:07:49,310
Takže ja nemusím snáď vŕtať
dole cez každú vrstvu.

159
00:07:49,310 --> 00:07:52,841
Môžem len použiť túto metódu nájsť to,
niečo ako tepelne navádzaná raketa,

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

161
00:07:53,340 --> 00:07:56,300
Je to len ide a zistí,
presne to, čo hľadá.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName je
veľmi podobné duchu.

163
00:07:59,290 --> 00:08:02,500
Možno, že by si všetky
odvážne tagy alebo všetky p tagov

164
00:08:02,500 --> 00:08:05,920
a daj mi rad všetkého
že by som potom mohol pracovať.

165
00:08:05,920 --> 00:08:12,080
appendChild pridáva niečo
o jednu úroveň dole v strome.

166
00:08:12,080 --> 00:08:16,440
>> Tak som sa môže pridať celý nový
element o jednu úroveň nižšie.

167
00:08:16,440 --> 00:08:19,700
Alebo sa môže odstrániť prvok, ktorý je
jeden stupeň nižšia, aj keď budem chcieť

168
00:08:19,700 --> 00:08:22,870
vymazať niečo z mojej webovej stránky.

169
00:08:22,870 --> 00:08:28,480
Teraz, rýchly kódovanie poznámku a rýchly
ukladanie bolesť hlavy na vedomie, dúfajme.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- d je malá.

171
00:08:31,670 --> 00:08:36,950
Nemôžem vám povedať, koľkokrát mám
Použité getElementById a kapitalizované

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

173
00:08:38,336 --> 00:08:39,460
Vzhľadom k tomu, je to naozaj bežné.

174
00:08:39,460 --> 00:08:42,990
Ak budeme napísať slovo ID, je to
Obvykle kapitál Aj kapitál D.

175
00:08:42,990 --> 00:08:44,240
A môj kód jednoducho nefunguje.

176
00:08:44,240 --> 00:08:45,630
A nemôžem prísť na to prečo.

177
00:08:45,630 --> 00:08:49,490
To je naozaj, naozaj, naozaj
Spoločný chyba, ktorá každý robí,

178
00:08:49,490 --> 00:08:51,890
ani odborníci, ktoré majú
robia to navždy.

179
00:08:51,890 --> 00:08:55,410
Takže jednoducho byť vedomí, getElementById,
že d je malé písmená.

180
00:08:55,410 --> 00:09:00,080
A dúfajme, že vám ušetrí niekoľko
minút aspoň zármutku.

181
00:09:00,080 --> 00:09:02,204
>> Takže čo to všetko nám to hovorí?

182
00:09:02,204 --> 00:09:03,120
Máme tieto metódy.

183
00:09:03,120 --> 00:09:04,161
Máme tieto vlastnosti.

184
00:09:04,161 --> 00:09:06,610
Teraz, keď sme sa začať od
dokument, dokument.

185
00:09:06,610 --> 00:09:10,220
čo môžeme teraz dostať na akýkoľvek
jediný kus našej webovej stránke

186
00:09:10,220 --> 00:09:14,870
že chceme pomocou JavaScriptu
len tým, že volanie týchto metód

187
00:09:14,870 --> 00:09:19,940
a využitie vlastností
, Aby sme našli na rôznych miestach.

188
00:09:19,940 --> 00:09:24,890
>> To môže dostať rozvláčny, to
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
Možno majú dlhý názov značky,
Možno robíte viac hovorov neskôr.

190
00:09:28,560 --> 00:09:31,230
Veci sa môžu dostať trochu rozvláčny.

191
00:09:31,230 --> 00:09:34,480
A ako programátori, ako ste
pravdepodobne videli v mnohých z týchto videí,

192
00:09:34,480 --> 00:09:36,600
sa nám nepáči rozvláčne veci.

193
00:09:36,600 --> 00:09:38,520
>> Sme radi, aby mohli rýchlo robiť veci.

194
00:09:38,520 --> 00:09:42,640
Takže by sme chceli viac
stručné spôsob, ako povedať niečo.

195
00:09:42,640 --> 00:09:46,270
Takže tento druh vedie k
Pojem takzvaný jQuery.

196
00:09:46,270 --> 00:09:49,170
Teraz jQuery nie je JavaScript.

197
00:09:49,170 --> 00:09:50,350
Nie je to súčasť JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> To je knižnica, ktorá bola napísaná
niektorými programátorov JavaScript

199
00:09:54,790 --> 00:09:57,060
asi pred 10 rokmi.

200
00:09:57,060 --> 00:10:01,300
A jeho cieľom je zjednodušiť to, čo je
volal na strane klienta skriptovanie, ktorý

201
00:10:01,300 --> 00:10:04,310
je v podstate to, čo sme boli len
hovorí o DOM s manipuláciou.

202
00:10:04,310 --> 00:10:11,090
A tak, keď som chcel upraviť
farba pozadia mojej webovej stránky, možno

203
00:10:11,090 --> 00:10:11,980
špecifický Div.

204
00:10:11,980 --> 00:10:15,325
>> Tu, ja som vraj stále
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
A ja chcem nastaviť jeho farbu pozadia.

206
00:10:16,950 --> 00:10:20,720
Či ja som len s použitím čistého JavaScript
pomocou Document Object Model,

207
00:10:20,720 --> 00:10:23,990
to je veľa vecí, že jo?
document.getElementById

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

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

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

211
00:10:28,050 --> 00:10:30,110
To bolo veľa čo povedať.

212
00:10:30,110 --> 00:10:31,720
Je to veľa písať, taky.

213
00:10:31,720 --> 00:10:35,760
A tak v jQuery, môžeme snáď povedať,
to trochu výstižnejšie.

214
00:10:35,760 --> 00:10:39,350
Obchod off je to je to možno trochu
trochu viac mystický naraz,

215
00:10:39,350 --> 00:10:39,850
v poriadku?

216
00:10:39,850 --> 00:10:43,580
>> Aspoň dlhá je trochu viac
vysvetľujúce, čo robíme.

217
00:10:43,580 --> 00:10:49,947
Tento znak dolára, zátvorky,
apostrof, hash, colorDiv, že jo?

218
00:10:49,947 --> 00:10:50,780
Čo to znamená?

219
00:10:50,780 --> 00:10:53,640
No, to je v podstate len
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Ale je to taký druh skratky
spôsob, ako to urobiť pomocou jQuery.

221
00:10:58,700 --> 00:11:01,380
Poďme stačí sa pozrieť teraz
v niekoľkými rôznymi spôsobmi

222
00:11:01,380 --> 00:11:04,520
že by som mohol skutočne
Použitie tohto objektu dokumentu

223
00:11:04,520 --> 00:11:06,807
Model manipulovať kúsky mojich stránkach.

224
00:11:06,807 --> 00:11:09,140
Najmä, ideme
bude pracovať na manipuláciu

225
00:11:09,140 --> 00:11:14,090
farba zvláštne
Div, colorDiv, na webovej stránke.

226
00:11:14,090 --> 00:11:15,299
Takže poďme sa pozrieť na to.

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

228
00:11:15,798 --> 00:11:16,700
Takže som na stránke.

229
00:11:16,700 --> 00:11:20,750
Je to tzv test.html keď si stiahnete
ak chcete pohrať s tým.

230
00:11:20,750 --> 00:11:24,730
A ja mám veľa
Tlačidlá na tejto stránke.

231
00:11:24,730 --> 00:11:27,730
A ja hovorím jednotlivých funkcií
pre farbu pozadia, fialová, zelená,

232
00:11:27,730 --> 00:11:31,330
oranžová, červená, modrá, jeden jediný funkčný
pre farbu pozadia, obslužná rutina udalosti

233
00:11:31,330 --> 00:11:34,360
na farbu pozadia, a pomocou jQuery.

234
00:11:34,360 --> 00:11:38,147
Čo som hovoril o
keď toto robím?

235
00:11:38,147 --> 00:11:39,230
Takže sme videli tlačidla.

236
00:11:39,230 --> 00:11:41,521
A teraz, poďme sa pozrieť na
niektoré zdrojového kódu tu.

237
00:11:41,521 --> 00:11:44,770
Začneme s test.html.

238
00:11:44,770 --> 00:11:48,100
Takže jednotlivé funkcie pre pozadie
farba je to, čo som tu napísal.

239
00:11:48,100 --> 00:11:49,350
Dovoľte mi, aby som posunúť trochu.

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

241
00:11:56,170 --> 00:11:58,820
>> A všimnite si, že ja
definovali tieto tlačidlá

242
00:11:58,820 --> 00:12:03,990
povedať, kedy sa kliknutí na toto tlačidlo,
volanie funkcie sfarbí do fialova.

243
00:12:03,990 --> 00:12:06,670
Ak je toto tlačidlo kliknite, skôr,
volanie funkcie zozelenie,

244
00:12:06,670 --> 00:12:08,710
sfarbí do oranžova, sčervená, zmodrie.

245
00:12:08,710 --> 00:12:11,880
Môžete si asi tušíte, že tento
možno nie je najlepší návrh

246
00:12:11,880 --> 00:12:12,460
zmysel, že jo?

247
00:12:12,460 --> 00:12:16,490
>> Bolo by pekné, keby som mohol
majú všeobecnejší prístup.

248
00:12:16,490 --> 00:12:19,570
No, v prvom budeme sa pozrieť
na to, čo tých päť funkcie

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

250
00:12:24,400 --> 00:12:27,250
zelená, oranžová, červená,
a modrej, v danom poradí.

251
00:12:27,250 --> 00:12:30,930
Takže, nijako zvlášť najlepší návrh.

252
00:12:30,930 --> 00:12:33,390
>> Ďalšiu sadu tlačidiel
Som sa som napísal

253
00:12:33,390 --> 00:12:36,380
jeden funkcia volaná
zmeniť farbu, ktorá zjavne

254
00:12:36,380 --> 00:12:38,960
prijíma reťazec ako svoj argument.

255
00:12:38,960 --> 00:12:40,290
Tak to je trochu lepšie.

256
00:12:40,290 --> 00:12:43,840
Fialová, zelená, oranžová, červená,
modrá je teraz argument.

257
00:12:43,840 --> 00:12:46,230
Tak som napísal na všeobecnejšie
Prípad funkcie JavaScript

258
00:12:46,230 --> 00:12:47,771
ktorý by mohol vyzerať nejako takto.

259
00:12:47,771 --> 00:12:48,680
Som odovzdaním.

260
00:12:48,680 --> 00:12:52,090
Táto zmena funkcie farba je
očakáva argument s názvom farba.

261
00:12:52,090 --> 00:12:54,970
A ja hovorím nastaviť
farba pozadia na farbu.

262
00:12:54,970 --> 00:12:58,390
Tak tu predstavuje to, čo som sa sem dostal.

263
00:12:58,390 --> 00:12:59,770
Takže je to o niečo lepšie.

264
00:12:59,770 --> 00:13:02,740
>> Ale ja som mohol
lepšie ako to.

265
00:13:02,740 --> 00:13:06,140
Ak by sme ísť dole, aby sa pozrieť
na spracovanie udalostí situácii,

266
00:13:06,140 --> 00:13:07,860
Teraz všetky tieto hovory vyzerajú rovnako.

267
00:13:07,860 --> 00:13:10,340
Ak si spomínate na našu
diskusia o spracovanie udalostí,

268
00:13:10,340 --> 00:13:15,770
Môžem získať informácie o tom, ktoré z
tieto tlačidlá bola klepli a použiť.

269
00:13:15,770 --> 00:13:19,560
>> A tak v event.JavaScript, som
písomná zmena farby udalosť, ktorá

270
00:13:19,560 --> 00:13:21,110
zistí, ktoré tlačidlo bol klepli.

271
00:13:21,110 --> 00:13:23,250
To je spúšťací objekt online.

272
00:13:23,250 --> 00:13:25,240
A potom tu, to dostane naozaj rozvláčny.

273
00:13:25,240 --> 00:13:27,420
Ale to, čo robím, je, že som
Nastavenie pozadia

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

275
00:13:30,340 --> 00:13:34,170
To je text
Medzi tlačidlo tagy.

276
00:13:34,170 --> 00:13:36,500
>> A potom som zrejme musieť
nastavte ju na malé písmená.

277
00:13:36,500 --> 00:13:40,780
A to je to, ako môžem previesť celý
reťazec na malé písmená v JavaScripte pomocou

278
00:13:40,780 --> 00:13:42,940
že spôsob, ako malé písmená.

279
00:13:42,940 --> 00:13:46,570
Pretože keď som nastaviť farbu,
ako som sa snaží robiť tu,

280
00:13:46,570 --> 00:13:48,260
farba musí byť malými písmenami.

281
00:13:48,260 --> 00:13:50,920
>> Ale tlačidlo, ktoré som mal,
ak by sme sa znovu pozrieť,

282
00:13:50,920 --> 00:13:55,890
Všimnite si, že text je tu
písaný s veľkým P pre fialovej.

283
00:13:55,890 --> 00:13:59,140
A potom u veľmi
tu dole, ja očividne

284
00:13:59,140 --> 00:14:02,630
pokúsiť sa to urobiť pomocou jQuery rovnako.

285
00:14:02,630 --> 00:14:06,000
A v tomto prípade, ja nie som v skutočnosti
volanie funkcie vôbec.

286
00:14:06,000 --> 00:14:11,430
Práve som povedal, triedu, že som
použitím tohto tlačidla je tlačidlo JQ.

287
00:14:11,430 --> 00:14:12,360
To je ono.

288
00:14:12,360 --> 00:14:14,950
>> Ako teda jQuery viem, čo robím?

289
00:14:14,950 --> 00:14:18,740
No, to je jedna z výhod
lomítko nevýhody jQuery.

290
00:14:18,740 --> 00:14:21,560
Môže mi dovoľte, aby som sa robiť veci
Veľmi stručne, ale možno nie

291
00:14:21,560 --> 00:14:22,570
ako intuitívne.

292
00:14:22,570 --> 00:14:25,570
Možno, že tie ďalšie tri urobiť
trochu viac vycítiť, čo robím.

293
00:14:25,570 --> 00:14:29,010
Tu, aj keď, čo sa deje?

294
00:14:29,010 --> 00:14:31,940
>> Zdá sa, že vytvára
anonymné funkcie

295
00:14:31,940 --> 00:14:36,790
že zaťaženie vždy, keď môj dokument
je pripravený, tak document.ready,

296
00:14:36,790 --> 00:14:38,760
niektoré funkcie sa stane.

297
00:14:38,760 --> 00:14:40,490
V podstate, keď je dokument pripravený?

298
00:14:40,490 --> 00:14:42,310
Je to, keď moja stránka načítaná.

299
00:14:42,310 --> 00:14:46,540
>> Takže akonáhle moja stránka načítanie
Nasledujúce funkcie je vždy pripravený.

300
00:14:46,540 --> 00:14:54,310
To hovorí, ak je objekt typu jQButton,
alebo ak trieda jQButton bol stlačili,

301
00:14:54,310 --> 00:14:55,570
spustiť túto funkciu.

302
00:14:55,570 --> 00:14:59,360
Tak tu je dve anonymné funkcie,
jednej definovanej vnútri druhého.

303
00:14:59,360 --> 00:15:03,930
>> Takže moje celé kontextu
Tu zatiaľ je moja strana

304
00:15:03,930 --> 00:15:06,520
keď sa načíta volanie tejto funkcie.

305
00:15:06,520 --> 00:15:09,740
A táto funkcia čaká
pre tlačidlo, ktoré majú byť klikol.

306
00:15:09,740 --> 00:15:14,490
A keď je kliknutie na tlačidlo, JQ
Tlačidlo konkrétne kliknutie,

307
00:15:14,490 --> 00:15:17,150
volá ten druhý
Funkcia, ktorá sa deje

308
00:15:17,150 --> 00:15:21,250
nastaviť pozadí
Farba colorDiv byť

309
00:15:21,250 --> 00:15:25,990
čo text je medzi tagy.

310
00:15:25,990 --> 00:15:28,050
>> To je pojem
ktoré tlačidlo bol klepli.

311
00:15:28,050 --> 00:15:31,230
Ale inak je to druh
správa podobne ako udalosť.

312
00:15:31,230 --> 00:15:34,460
Je to proste tak, ako som rovnaký
by sa to vyjadriť v jQuery.

313
00:15:34,460 --> 00:15:36,790
Opäť platí, že je to asi
oveľa viac zastrašujúce.

314
00:15:36,790 --> 00:15:40,840
Nie je tak jasné, ako
niečo ako event.js,

315
00:15:40,840 --> 00:15:45,080
čo je možno trochu viac
verbose, ale o niečo menej

316
00:15:45,080 --> 00:15:46,000
zastrašujúce.

317
00:15:46,000 --> 00:15:51,460
>> Ale ak budeme zabehnúť späť ku mne prehliadača
okná, ak začnem clicking-- dobre,

318
00:15:51,460 --> 00:15:52,690
, Ktorá zmenila na fialovú.

319
00:15:52,690 --> 00:15:54,450
To je zelená metódou reťazec.

320
00:15:54,450 --> 00:15:56,500
To je oranžový pomocou rutinu udalosti.

321
00:15:56,500 --> 00:15:58,300
>> To je červená pomocou jQuery, že jo?

322
00:15:58,300 --> 00:16:01,270
Všetci sa správajú presne to isté.

323
00:16:01,270 --> 00:16:06,509
Proste to urobiť s použitím rôznych
prístupy k riešeniu problému.

324
00:16:06,509 --> 00:16:08,550
Je tu oveľa viac
jQuery potom sme rozhodne

325
00:16:08,550 --> 00:16:10,050
hovoriť o tomto videu.

326
00:16:10,050 --> 00:16:15,410
Ale ak sa chcete dozvedieť viac, môžete
ísť na jQuery druhu dokumentácie

327
00:16:15,410 --> 00:16:19,710
a naučiť sa trochu viac o
Tento veľmi flexibilný knižnica, ktorá

328
00:16:19,710 --> 00:16:22,550
je skvelé pre robí na strane klienta
skriptovanie, ako je to, čo sme robili

329
00:16:22,550 --> 00:16:26,240
manipulovať vzhľad
a cítiť sa na našich webových stránkach

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

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

332
00:16:29,650 --> 00:16:31,930
To je CS50.

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