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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: V tomto videu, jsme chtěli
zavolat samostatnou pozornost

3
00:00:07,230 --> 00:00:09,110
k velmi specifický
prvek JavaScriptu

4
00:00:09,110 --> 00:00:11,350
že byste mohli najít šikovný
když začínáte

5
00:00:11,350 --> 00:00:15,750
pracovat na manipulaci webové stránky a
změna obsahu své webové stránky

6
00:00:15,750 --> 00:00:16,460
za běhu.

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 jak jsme viděli v našem videu na
JavaScript, objekty jsou velmi flexibilní.

9
00:00:23,030 --> 00:00:24,750
>> A mohou obsahovat různá pole.

10
00:00:24,750 --> 00:00:28,075
A i když jsme nešli do hodně
detail, tato pole nebo vlastnosti,

11
00:00:28,075 --> 00:00:30,200
že bychom pravděpodobně více
přiměřeně volat

12
00:00:30,200 --> 00:00:33,915
v rámci objektu, a to i
Tyto vlastnosti mohou být jiné předměty.

13
00:00:33,915 --> 00:00:36,210
A uvnitř těchto objektů
mohou být jiné předměty.

14
00:00:36,210 --> 00:00:39,630
>> Máte tento velmi velký objekt
s mnoha jiných objektů

15
00:00:39,630 --> 00:00:43,550
uvnitř ní, jaký typ
vytvoří tento představu o velký strom.

16
00:00:43,550 --> 00:00:47,540
Nyní, objekt dokument je
velmi zvláštní objekt v JavaScriptu

17
00:00:47,540 --> 00:00:52,580
že organizuje celý svůj web
strana v rámci tohoto druhu deštníku

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

19
00:00:53,470 --> 00:00:56,770
A tak uvnitř dokumentu
Předmětem jsou předměty představující

20
00:00:56,770 --> 00:00:59,630
hlava a tělo své webové stránky.

21
00:00:59,630 --> 00:01:03,760
>> Uvnitř z nich jsou jiné
objektů, a tak dále, a tak dále,

22
00:01:03,760 --> 00:01:08,411
dokud se celá vaše webová stránka má
byly organizovány v tomto velkém objektu.

23
00:01:08,411 --> 00:01:09,660
Co je vzhůru tady, že jo?

24
00:01:09,660 --> 00:01:12,170
No, víme, jak pracovat
s objekty v JavaScriptu.

25
00:01:12,170 --> 00:01:15,840
>> Takže pokud máme objekt, který
odkazuje na celou naši webovou stránku, která

26
00:01:15,840 --> 00:01:19,590
znamená voláním správný
Metody pro manipulaci tento objekt

27
00:01:19,590 --> 00:01:22,360
nebo pozměnit některé
jeho vlastnosti, jsme

28
00:01:22,360 --> 00:01:25,500
může změnit prvky
Naše stránka programově

29
00:01:25,500 --> 00:01:30,210
pomocí JavaScriptu místo toho,
kódovat věci s, řekněme, HTML.

30
00:01:30,210 --> 00:01:33,760
Tak tady je příklad
velmi 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
>> Uvnitř je titul, Hello World.

33
00:01:37,979 --> 00:01:38,770
Pak mám tělo.

34
00:01:38,770 --> 00:01:40,686
Uvnitř to, mám
tři různé věci.

35
00:01:40,686 --> 00:01:44,170
Mám tag h2 záhlaví,
odstavec, a odkaz.

36
00:01:44,170 --> 00:01:45,920
Jedná se o velmi jednoduchou webovou stránku.

37
00:01:45,920 --> 00:01:48,590
>> No, co by mohlo tento dokument
objekt pro tento vypadat?

38
00:01:48,590 --> 00:01:50,700
No, je to trochu
děsivý snad na prvním místě.

39
00:01:50,700 --> 00:01:52,510
Ale je to opravdu jen velký strom.

40
00:01:52,510 --> 00:01:54,890
A na samém kořene toho je dokument.

41
00:01:54,890 --> 00:02:00,030
>> Uvnitř tohoto dokumentu je další
objekt s odkazem na HTML mé stránky.

42
00:02:00,030 --> 00:02:02,660
A HTML mé strany je to vše.

43
00:02:02,660 --> 00:02:06,900
A pak uvnitř HTML
objekt, mám objekt hlavy,

44
00:02:06,900 --> 00:02:09,000
který se odkazuje na všechno, co tam.

45
00:02:09,000 --> 00:02:11,009
>> A vnitřní části tam,
Mám titulní objekt.

46
00:02:11,009 --> 00:02:15,620
A uvnitř tam, mám další
namítají, že je to právě hello world.

47
00:02:15,620 --> 00:02:18,020
Mohl bych mít své tělo
zastoupené takhle.

48
00:02:18,020 --> 00:02:22,850
>> Uvnitř mé tělo, mám h2
objekt a p objekt pro odstavec

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 být reprezentován jako velký strom

51
00:02:29,660 --> 00:02:31,990
se spoustou menších Krtečkem
věci z něho vychází.

52
00:02:31,990 --> 00:02:33,740
Nyní, samozřejmě, pokud
jsme programování, my

53
00:02:33,740 --> 00:02:35,560
si nemyslím, že o věci, jako velký strom.

54
00:02:35,560 --> 00:02:37,980
Chceme vidět skutečné
kódu v souvislosti věci.

55
00:02:37,980 --> 00:02:40,790
>> A naštěstí, můžeme
používat naše nástroje pro vývojáře

56
00:02:40,790 --> 00:02:46,080
skutečně se podívat na
Tato webová stránka je Document Object.

57
00:02:46,080 --> 00:02:48,150
A pojďme to udělat.

58
00:02:48,150 --> 00:02:49,580
Takže jsem otevřela kartu prohlížeče.

59
00:02:49,580 --> 00:02:51,540
>> A já jsem otevřel Developer Tools.

60
00:02:51,540 --> 00:02:54,460
A v mém videu na JavaScriptu, já
uvedeno, že konzole není

61
00:02:54,460 --> 00:02:56,770
jen někam, kde
tiskneme informací,

62
00:02:56,770 --> 00:02:59,560
je to také místo, kde
můžeme vstupní informace.

63
00:02:59,560 --> 00:03:01,380
V této souvislosti, co
Chystám se říct, je

64
00:03:01,380 --> 00:03:05,720
Chtěl bych se dostat zpátky
objekty dokument,

65
00:03:05,720 --> 00:03:07,502
takže můžu začít se podívat na to.

66
00:03:07,502 --> 00:03:08,460
Tak jak bych mohl udělat?

67
00:03:08,460 --> 00:03:10,740
No, když chci
uspořádat je opravdu pěkně,

68
00:03:10,740 --> 00:03:16,317
Chystám se říct console.dir, D-I-R.
Teď, já používám console.log se stačí vytisknout

69
00:03:16,317 --> 00:03:17,400
out něco velmi jednoduché.

70
00:03:17,400 --> 00:03:20,450
Ale pokud chci zorganizovat
hierarchicky jako objekt,

71
00:03:20,450 --> 00:03:23,800
Chci, aby to nějak strukturovaná
jako adresářové struktury.

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

73
00:03:27,400 --> 00:03:28,430
Budu stiskněte klávesu Enter.

74
00:03:28,430 --> 00:03:32,350
A právě pod ním teď,
a já přiblížit tady,

75
00:03:32,350 --> 00:03:36,000
Mám tento dokument odpovědi
s malou šipkou vedle ní.

76
00:03:36,000 --> 00:03:39,470
Teď, když otevřu na tuto šipku,
tam to bude hodně věcí.

77
00:03:39,470 --> 00:03:42,560
>> Ale budeme ignorovat hodně
na to a jen tak ze zaměření

78
00:03:42,560 --> 00:03:46,250
na nejdůležitější část, takže jsme
může začít navigovat tento dokument.

79
00:03:46,250 --> 00:03:50,125
Je tu mnohem víc, než DOM
jen rodič uzly a podřízené uzly.

80
00:03:50,125 --> 00:03:51,500
Je tu spousta doplňkových věcí.

81
00:03:51,500 --> 00:03:52,280
>> Takže já jdu otevřít toto nahoru.

82
00:03:52,280 --> 00:03:54,610
A je tu mnohem
z věcí, které se objeví.

83
00:03:54,610 --> 00:03:59,000
Ale všechno mě zajímá, je
tady, podřízené uzly.

84
00:03:59,000 --> 00:04:00,410
Pojďme otevřít, že až.

85
00:04:00,410 --> 00:04:03,810
>> Uvnitř tam vidím
něco povědomého, HTML.

86
00:04:03,810 --> 00:04:07,670
Takže v naší dokumentu
o jednu úroveň dolů, HTML.

87
00:04:07,670 --> 00:04:08,550
Otevřu, že až.

88
00:04:08,550 --> 00:04:10,380
Co jsme očekávali?

89
00:04:10,380 --> 00:04:13,760
>> Pokud si vzpomínáte z našeho diagramu,
Co bychom měli nalézt uvnitř HTML?

90
00:04:13,760 --> 00:04:17,275
Jaké dvěma uzly jsou pod ním ve stromu?

91
00:04:17,275 --> 00:04:17,899
Pojďme to zjistit.

92
00:04:17,899 --> 00:04:18,940
Otevíráme HTML.

93
00:04:18,940 --> 00:04:22,079
Jdeme dolů na své podřízené uzly.

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

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

96
00:04:25,990 --> 00:04:28,540
A můžeme otevřít hlavu.

97
00:04:28,540 --> 00:04:30,460
Přejít na své podřízené 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 bychom pokračovat dál a
takhle navždy.

100
00:04:33,293 --> 00:04:34,770
Mohli bychom to udělat s tělem stejně.

101
00:04:34,770 --> 00:04:40,090
Ale existuje způsob, jak pro nás podívat se na
dokument organizována jako velký objekt.

102
00:04:40,090 --> 00:04:42,610
A pokud se podíváme na je velký
Objekt, který vypadá hodně

103
00:04:42,610 --> 00:04:47,480
jako je kód, to znamená, že můžeme začít
Pro manipulaci s touto velkou objekt s použitím

104
00:04:47,480 --> 00:04:51,220
Kód změnit to, co naše
webové stránky vypadá a cítí se jako.

105
00:04:51,220 --> 00:04:54,920
>> Tak to je docela mocný nástroj
máme k dispozici nyní.

106
00:04:54,920 --> 00:04:57,360
Tak, jak jsme právě viděli se
Dokument samotného objektu

107
00:04:57,360 --> 00:05:01,392
a všechny objekty uvnitř něj
mají vlastnosti a metody, stejně

108
00:05:01,392 --> 00:05:04,100
stejně jako jakýkoli jiný objekt, který jsme
pracoval s v JavaScriptu.

109
00:05:04,100 --> 00:05:08,370
Ale můžeme použít tyto vlastnosti a
použít tyto metody pro druh drill down

110
00:05:08,370 --> 00:05:10,900
z velkého dokumentu a získat
nižší a nižší a nižší,

111
00:05:10,900 --> 00:05:13,360
jemnější a jemnější zrna
detailu, dokud jsme

112
00:05:13,360 --> 00:05:17,510
dostat se do velmi specifický kus našeho
webové stránky, které chceme změnit.

113
00:05:17,510 --> 00:05:22,700
>> A když jsme aktualizaci vlastností
Document Object nebo volejte na tyto metody,

114
00:05:22,700 --> 00:05:24,450
co se může stát na naší webové stránce.

115
00:05:24,450 --> 00:05:28,420
A my nemusíme dělat žádné osvěžující
mít tyto změny projeví.

116
00:05:28,420 --> 00:05:33,160
>> A to je docela v pohodě schopnost
mají, když pracujeme s kódem.

117
00:05:33,160 --> 00:05:37,185
Takže jaké jsou některé z těchto vlastností
které jsou součástí objektu dokumentu?

118
00:05:37,185 --> 00:05:40,100
No, pravděpodobně jste viděli
Pár z nich se opravdu rychle

119
00:05:40,100 --> 00:05:42,700
jak jsme byli zip
přes obří dokumentu

120
00:05:42,700 --> 00:05:45,150
Objekt jsme právě viděli ve webovém prohlížeči.

121
00:05:45,150 --> 00:05:48,420
>> Ale několik těchto vlastností
by mohlo být věci, jako je vnitřní HTML.

122
00:05:48,420 --> 00:05:52,950
A možná mi dokonce vzpomenout
pomocí tohoto ve videu JavaScript

123
00:05:52,950 --> 00:05:54,950
na samém konci, když jsem
mluvil o událostech.

124
00:05:54,950 --> 00:05:56,125
Co to bylo za vnitřní HTML?

125
00:05:56,125 --> 00:05:59,030
No, to je právě to, co je
mezi tagy.

126
00:05:59,030 --> 00:06:01,590
>> A tak se vnitřní HTML,
například, z titulu

127
00:06:01,590 --> 00:06:05,390
tag, kdybychom dál v
Například, že před chvílí,

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

129
00:06:08,020 --> 00:06:10,140
To byl název naší stránce.

130
00:06:10,140 --> 00:06:12,370
Ostatní vlastnosti
obsahovat jméno uzlu, který

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

132
00:06:15,810 --> 00:06:19,100
ID, který je ID
atribut prvku HTML.

133
00:06:19,100 --> 00:06:23,790
>> Připomeňme, že můžeme speciálně indikovat
specifické prvky naší HTML

134
00:06:23,790 --> 00:06:27,510
s atributem ID, které obvykle
přijde vhod v souvislosti s CSS,

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

136
00:06:29,000 --> 00:06:33,217
Parent uzel, což je odkaz na
to, co je právě nahoře nade mnou v DOM.

137
00:06:33,217 --> 00:06:35,800
A podřízené uzly, což je
odkaz na to, co je dole pode mnou.

138
00:06:35,800 --> 00:06:37,950
A my jsme viděli spoustu, který
jen se dívá skrz.

139
00:06:37,950 --> 00:06:42,970
Podřízené uzly, to je, jak jsme se dostali
nižší a nižší do stromu.

140
00:06:42,970 --> 00:06:46,590
>> Atributy, to je jen pole
atributů prvku HTML.

141
00:06:46,590 --> 00:06:50,270
Takže příklad vlastností by mohl
být, pokud máte značku obrazu,

142
00:06:50,270 --> 00:06:54,090
obvykle má atribut zdroje,
možná výška a šířka, atribut.

143
00:06:54,090 --> 00:06:57,120
A tak, že by prostě být pole
ze všech atributů souvisejících

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

145
00:06:59,300 --> 00:07:04,140
>> Styl je ještě jeden, který
se představují 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 později v tomto
Video, budeme konkrétně

148
00:07:08,310 --> 00:07:14,592
leverage styl, aby se pár
o změnách na našich stránkách.

149
00:07:14,592 --> 00:07:15,800
To jsou jen některé vlastnosti.

150
00:07:15,800 --> 00:07:17,591
>> A tam jsou také některé
Metody, které můžeme

151
00:07:17,591 --> 00:07:22,450
používají také rychleji možná izolovat
prvky objektu dokumentu.

152
00:07:22,450 --> 00:07:26,730
Možná, že nejuniverzálnější
tito být getElementById.

153
00:07:26,730 --> 00:07:31,190
A tak bych mohl říct něco takového, protože
pamatujte, že je to způsob dokumentu

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

155
00:07:34,880 --> 00:07:39,820
>> A uvnitř těchto závorek, specifikujte
HTML prvek s konkrétním ID

156
00:07:39,820 --> 00:07:42,330
atribut, který jsem dříve
set, a budu hned

157
00:07:42,330 --> 00:07:46,685
jít přímo k tomuto prvku
z celkové webové stránky.

158
00:07:46,685 --> 00:07:49,310
Takže já nemusím snad vrtat
dolů přes každou vrstvu.

159
00:07:49,310 --> 00:07:52,841
Mohu jen použít tuto metodu najít to,
něco jako tepelně naváděná raketa,

160
00:07:52,841 --> 00:07:53,340
právo?

161
00:07:53,340 --> 00:07:56,300
Je to jen jde a zjistí,
přesně to, co hledá.

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

163
00:07:59,290 --> 00:08:02,500
Možná, že by si všechny
odvážné tagy nebo všechny p tagů

164
00:08:02,500 --> 00:08:05,920
a dej mi řadu všeho
že bych pak mohl pracovat.

165
00:08:05,920 --> 00:08:12,080
appendChild přidává něco
o jednu úroveň dolů ve stromu.

166
00:08:12,080 --> 00:08:16,440
>> Tak jsem se může přidat celý nový
element o jednu úroveň níže.

167
00:08:16,440 --> 00:08:19,700
Nebo se může odstranit prvek, který je
jeden stupeň nižší, i když budu chtít

168
00:08:19,700 --> 00:08:22,870
vymazat něco z mé webové stránky.

169
00:08:22,870 --> 00:08:28,480
Nyní, rychlý kódování poznámku a rychlý
ukládání bolest hlavy na vědomí, doufejme.

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

171
00:08:31,670 --> 00:08:36,950
Nemůžu vám říct, kolikrá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
Vzhledem k tomu, je to opravdu běžné.

174
00:08:39,460 --> 00:08:42,990
Budeme-li napsat slovo ID, je to
Obvykle kapitál I kapitál D.

175
00:08:42,990 --> 00:08:44,240
A můj kód prostě nefunguje.

176
00:08:44,240 --> 00:08:45,630
A nemůžu přijít na to proč.

177
00:08:45,630 --> 00:08:49,490
To je opravdu, opravdu, opravdu
Společný chyba, která každý dělá,

178
00:08:49,490 --> 00:08:51,890
ani odborníci, které mají
dělají to navždy.

179
00:08:51,890 --> 00:08:55,410
Takže prostě být vědomi, getElementById,
že d je malá písmena.

180
00:08:55,410 --> 00:09:00,080
A doufejme, že vám ušetří několik
minut alespoň zármutku.

181
00:09:00,080 --> 00:09:02,204
>> Takže co to všechno nám to říká?

182
00:09:02,204 --> 00:09:03,120
Máme tyto metody.

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

184
00:09:04,161 --> 00:09:06,610
Teď, když jsme se začít od
dokument, dokument.

185
00:09:06,610 --> 00:09:10,220
co můžeme nyní dostat na jakýkoliv
jediný kus naší webové stránce

186
00:09:10,220 --> 00:09:14,870
že chceme pomocí JavaScriptu
jen tím, že volání těchto metod

187
00:09:14,870 --> 00:09:19,940
a využití vlastností
, abychom našli na různých místech.

188
00:09:19,940 --> 00:09:24,890
>> To může dostat rozvláčný, to
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
Možná mají dlouhý název značky,
Možná děláte více hovorů později.

190
00:09:28,560 --> 00:09:31,230
Věci se mohou dostat trochu rozvláčný.

191
00:09:31,230 --> 00:09:34,480
A jako programátoři, jak jste
pravděpodobně viděli v mnoha z těchto videí,

192
00:09:34,480 --> 00:09:36,600
se nám nelíbí rozvláčné věci.

193
00:09:36,600 --> 00:09:38,520
>> Jsme rádi, aby mohli rychle dělat věci.

194
00:09:38,520 --> 00:09:42,640
Takže bychom chtěli více
stručné způsob, jak říct něco.

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

196
00:09:46,270 --> 00:09:49,170
Nyní jQuery není JavaScript.

197
00:09:49,170 --> 00:09:50,350
Není to součást JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> To je knihovna, která byla napsána
některými programátory JavaScript

199
00:09:54,790 --> 00:09:57,060
asi před 10 lety.

200
00:09:57,060 --> 00:10:01,300
A jeho cílem je zjednodušit to, co je
volal na straně klienta skriptování, který

201
00:10:01,300 --> 00:10:04,310
je v podstatě to, co jsme byli jen
mluví o DOM s manipulací.

202
00:10:04,310 --> 00:10:11,090
A tak, když jsem chtěl upravit
barva pozadí mé webové stránky, možná

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

204
00:10:11,980 --> 00:10:15,325
>> Tady, já jsem prý stále
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
A já chci nastavit jeho barvu pozadí.

206
00:10:16,950 --> 00:10:20,720
Jestli já jsem jen s použitím čistého JavaScript
pomocí Document Object Model,

207
00:10:20,720 --> 00:10:23,990
to je hodně věcí, ž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 bylo hodně co říct.

212
00:10:30,110 --> 00:10:31,720
Je to hodně psát, taky.

213
00:10:31,720 --> 00:10:35,760
A tak v jQuery, můžeme snad říci,
to trochu výstižněji.

214
00:10:35,760 --> 00:10:39,350
Obchod off je to je to možná trochu
trochu více mystický najednou,

215
00:10:39,350 --> 00:10:39,850
právo?

216
00:10:39,850 --> 00:10:43,580
>> Alespoň dlouhá je trochu více
vysvětlující, co děláme.

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

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

219
00:10:50,780 --> 00:10:53,640
No, to je v podstatě jen
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Ale je to takový druh zkratky
způsob, jak to udělat pomocí jQuery.

221
00:10:58,700 --> 00:11:01,380
Pojďme stačí se podívat teď
v několika různými způsoby

222
00:11:01,380 --> 00:11:04,520
že bych mohl skutečně
Použití tohoto objektu dokumentu

223
00:11:04,520 --> 00:11:06,807
Model manipulovat kousky mých stránkách.

224
00:11:06,807 --> 00:11:09,140
Zejména, jdeme
bude pracovat na manipulaci

225
00:11:09,140 --> 00:11:14,090
barva zvláštní
Div, colorDiv, na webové stránce.

226
00:11:14,090 --> 00:11:15,299
Takže pojďme se podívat na to.

227
00:11:15,299 --> 00:11:15,798
Dobře.

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

229
00:11:16,700 --> 00:11:20,750
Je to tzv test.html když si stáhnete
pokud chcete pohrát s tím.

230
00:11:20,750 --> 00:11:24,730
A já mám spoustu
Tlačítka na této stránce.

231
00:11:24,730 --> 00:11:27,730
A já říkám jednotlivých funkcí
pro barvu pozadí, fialová, zelená,

232
00:11:27,730 --> 00:11:31,330
oranžová, červená, modrá, jeden jediný funkční
pro barvu pozadí, obslužná rutina události

233
00:11:31,330 --> 00:11:34,360
na barvu pozadí, a pomocí jQuery.

234
00:11:34,360 --> 00:11:38,147
Co jsem mluvil o
když tohle dělám?

235
00:11:38,147 --> 00:11:39,230
Takže jsme viděli tlačítka.

236
00:11:39,230 --> 00:11:41,521
A teď, pojďme se podívat na
některé zdrojového kódu zde.

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é funkce pro pozadí
barva je to, co jsem tu napsal.

239
00:11:48,100 --> 00:11:49,350
Dovolte mi, abych posunout trochu.

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

241
00:11:56,170 --> 00:11:58,820
>> A všimněte si, že já
definovaly tato tlačítka

242
00:11:58,820 --> 00:12:03,990
říci, kdy se klepnutí na toto tlačítko,
volání funkce zbarví do fialova.

243
00:12:03,990 --> 00:12:06,670
Je-li toto tlačítko klepněte, spíše,
volání funkce zezelená,

244
00:12:06,670 --> 00:12:08,710
zbarví do oranžova, zčervená, zmodrá.

245
00:12:08,710 --> 00:12:11,880
Můžete si asi tušíte, že tento
možná není nejlepší návrh

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

247
00:12:12,460 --> 00:12:16,490
>> Bylo by hezké, kdybych mohl
mají obecnější přístup.

248
00:12:16,490 --> 00:12:19,570
No, v první budeme se podívat
na to, co těch pět funkce

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 modré, v daném pořadí.

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

252
00:12:30,930 --> 00:12:33,390
>> Další sadu tlačítek
Jsem se jsem napsal

253
00:12:33,390 --> 00:12:36,380
jeden funkce volána
změnit barvu, která zjevně

254
00:12:36,380 --> 00:12:38,960
přijímá řetězec jako svůj argument.

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

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

257
00:12:43,840 --> 00:12:46,230
Tak jsem napsal na obecnější
Případ funkce JavaScript,

258
00:12:46,230 --> 00:12:47,771
který by mohl vypadat nějak takto.

259
00:12:47,771 --> 00:12:48,680
Jsem předáním.

260
00:12:48,680 --> 00:12:52,090
Tato změna funkce barva je
očekává argument s názvem barva.

261
00:12:52,090 --> 00:12:54,970
A já říkám nastavit
barva pozadí na barvu.

262
00:12:54,970 --> 00:12:58,390
Tak tady představuje to, co jsem se sem dostal.

263
00:12:58,390 --> 00:12:59,770
Takže je to o něco lepší.

264
00:12:59,770 --> 00:13:02,740
>> Ale já jsem mohl
lepší než to.

265
00:13:02,740 --> 00:13:06,140
Pokud bychom jít dolů, aby se podívat
na zpracování událostí situaci,

266
00:13:06,140 --> 00:13:07,860
Nyní všechny tyto hovory vypadají stejně.

267
00:13:07,860 --> 00:13:10,340
Pokud si vzpomínáte na naši
diskuse o zpracování událostí,

268
00:13:10,340 --> 00:13:15,770
Mohu získat informace o tom, které z
tato tlačítka byla klepli a použít.

269
00:13:15,770 --> 00:13:19,560
>> A tak v event.JavaScript, jsem
písemná změna barvy událost, která

270
00:13:19,560 --> 00:13:21,110
zjistí, které tlačítko byl klepli.

271
00:13:21,110 --> 00:13:23,250
To je spouštěcí objekt online.

272
00:13:23,250 --> 00:13:25,240
A pak tady, to dostane opravdu rozvláčný.

273
00:13:25,240 --> 00:13:27,420
Ale to, co dělám, je, že jsem
Nastavení pozadí

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

275
00:13:30,340 --> 00:13:34,170
To je text
Mezi tlačítko tagy.

276
00:13:34,170 --> 00:13:36,500
>> A pak jsem zřejmě muset
nastavte ji na malá písmena.

277
00:13:36,500 --> 00:13:40,780
A to je to, jak mohu převést celý
řetězec na malá písmena v JavaScriptu pomocí

278
00:13:40,780 --> 00:13:42,940
že způsob, jak malá písmena.

279
00:13:42,940 --> 00:13:46,570
Protože když jsem nastavit barvu,
jak jsem se snaží dělat tady,

280
00:13:46,570 --> 00:13:48,260
barva musí být malými písmeny.

281
00:13:48,260 --> 00:13:50,920
>> Ale tlačítko, které jsem měl,
pokud bychom se znovu podívat,

282
00:13:50,920 --> 00:13:55,890
Všimněte si, že text je zde
psaný s velkým P pro fialové.

283
00:13:55,890 --> 00:13:59,140
A pak u velmi
tady dole, já očividně

284
00:13:59,140 --> 00:14:02,630
pokusit se to udělat pomocí jQuery stejně.

285
00:14:02,630 --> 00:14:06,000
A v tomto případě, já nejsem ve skutečnosti
volání funkce vůbec.

286
00:14:06,000 --> 00:14:11,430
Právě jsem řekl, třídu, že jsem
použitím tohoto tlačítka je tlačítko JQ.

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

288
00:14:12,360 --> 00:14:14,950
>> Jak tedy jQuery vím, co dělá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 dovolte, abych se dělat věci
Velmi stručně, ale možná ne

291
00:14:21,560 --> 00:14:22,570
jak intuitivně.

292
00:14:22,570 --> 00:14:25,570
Možná, že ty další tři učinit
trochu víc vycítit, co dělám.

293
00:14:25,570 --> 00:14:29,010
Tady, i když, co se děje?

294
00:14:29,010 --> 00:14:31,940
>> Zdá se, že vytváří
anonymní funkce

295
00:14:31,940 --> 00:14:36,790
že zatížení vždy, když můj dokument
je připraven, tak document.ready,

296
00:14:36,790 --> 00:14:38,760
některé funkce se stane.

297
00:14:38,760 --> 00:14:40,490
V podstatě, když je dokument připraven?

298
00:14:40,490 --> 00:14:42,310
Je to, když moje stránka načtena.

299
00:14:42,310 --> 00:14:46,540
>> Takže jakmile moje stránka načtení
Následující funkce je vždy připraven.

300
00:14:46,540 --> 00:14:54,310
To říká, je-li objekt typu jQButton,
nebo-li třída jQButton byl klepli,

301
00:14:54,310 --> 00:14:55,570
spustit tuto funkci.

302
00:14:55,570 --> 00:14:59,360
Tak tady je dvě anonymní funkce,
jedné definované uvnitř druhého.

303
00:14:59,360 --> 00:15:03,930
>> Takže mé celé kontextu
Zde zatím je moje strana

304
00:15:03,930 --> 00:15:06,520
když se načte volání této funkce.

305
00:15:06,520 --> 00:15:09,740
A tato funkce čeká
pro tlačítko, které mají být kliknul.

306
00:15:09,740 --> 00:15:14,490
A když je kliknutí na tlačítko, JQ
Tlačítko konkrétně kliknutí,

307
00:15:14,490 --> 00:15:17,150
volá ten druhý
Funkce, která se děje

308
00:15:17,150 --> 00:15:21,250
nastavit pozadí
Barva colorDiv být

309
00:15:21,250 --> 00:15:25,990
co text je mezi tagy.

310
00:15:25,990 --> 00:15:28,050
>> To je pojem
které tlačítko byl klepli.

311
00:15:28,050 --> 00:15:31,230
Ale jinak je to druh
chová podobně jako událost.

312
00:15:31,230 --> 00:15:34,460
Je to prostě tak, jak jsem stejný
by se to vyjádřit v jQuery.

313
00:15:34,460 --> 00:15:36,790
Opět platí, že je to asi
mnohem více zastrašující.

314
00:15:36,790 --> 00:15:40,840
Není tak jasné, jak
něco jako event.js,

315
00:15:40,840 --> 00:15:45,080
což je možná trochu víc
verbose, ale o něco méně

316
00:15:45,080 --> 00:15:46,000
zastrašující.

317
00:15:46,000 --> 00:15:51,460
>> Ale pokud budeme zaběhnout zpátky ke mně prohlížeče
okna, pokud začnu clicking-- dobře,

318
00:15:51,460 --> 00:15:52,690
, která změnila na fialovou.

319
00:15:52,690 --> 00:15:54,450
To je zelená metodou řetězec.

320
00:15:54,450 --> 00:15:56,500
To je oranžový pomocí rutinu události.

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

322
00:15:58,300 --> 00:16:01,270
Všichni se chovají přesně to samé.

323
00:16:01,270 --> 00:16:06,509
Prostě to udělat s použitím různých
přístupy k řešení problému.

324
00:16:06,509 --> 00:16:08,550
Je tu mnohem víc
jQuery pak jsme rozhodně

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

326
00:16:10,050 --> 00:16:15,410
Ale pokud se chcete dozvědět více, můžete
jít na jQuery druhu dokumentace

327
00:16:15,410 --> 00:16:19,710
a naučit se trochu víc o
Tento velmi flexibilní knihovna, která

328
00:16:19,710 --> 00:16:22,550
je skvělé pro dělá na straně klienta
skriptování, jako je to, co jsme dělali

329
00:16:22,550 --> 00:16:26,240
manipulovat vzhled
a cítit se na našich webových stránkách

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

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

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

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