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

2
00:00:04,439 --> 00:00:07,230
Doug LLOYD: V tem videu, smo želeli
klicati ločeno pozornost

3
00:00:07,230 --> 00:00:09,110
v zelo zlasti
element JavaScript

4
00:00:09,110 --> 00:00:11,350
da boste morda ugotovili, priročen
ko ste začeli

5
00:00:11,350 --> 00:00:15,750
za delo na manipulacijo spletnih strani in
spreminjajo vsebino vaše spletne strani

6
00:00:15,750 --> 00:00:16,460
na letenje.

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

8
00:00:19,450 --> 00:00:23,030
Torej, kot smo videli v našem videu na
JavaScript, predmeti so zelo prilagodljivi.

9
00:00:23,030 --> 00:00:24,750
>> In lahko vsebujejo različne polj.

10
00:00:24,750 --> 00:00:28,075
In čeprav mi ni šel v veliko
Natančneje, ta polja ali lastnosti,

11
00:00:28,075 --> 00:00:30,200
da bi mi verjetno bolj
jih ustrezno pokličite

12
00:00:30,200 --> 00:00:33,915
v okviru predmeta, celo
te lastnosti so lahko druge predmete.

13
00:00:33,915 --> 00:00:36,210
In znotraj teh predmetov
lahko drugi predmeti.

14
00:00:36,210 --> 00:00:39,630
>> Imate to zelo velik objekt
z veliko drugih predmetov

15
00:00:39,630 --> 00:00:43,550
znotraj nje, ki nekako
ustvarja ta zamisel o velikem drevesu.

16
00:00:43,550 --> 00:00:47,540
Sedaj predmet dokument je
zelo poseben predmet v JavaScript

17
00:00:47,540 --> 00:00:52,580
da organizira svoj celoten splet
stran v te vrste dežnik

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

19
00:00:53,470 --> 00:00:56,770
Tako znotraj dokumenta
Objekt so predmeti, ki predstavljajo

20
00:00:56,770 --> 00:00:59,630
glava in telo vaše spletne strani.

21
00:00:59,630 --> 00:01:03,760
>> Znotraj te so drugi
predmeti, et cetera, et cetera,

22
00:01:03,760 --> 00:01:08,411
dokler ima vaše celotno spletno stran
bil organiziran v tem velikem objektu.

23
00:01:08,411 --> 00:01:09,660
Kaj je narobe tukaj, kajne?

24
00:01:09,660 --> 00:01:12,170
No, vemo, kako delati
s predmeti v JavaScriptu.

25
00:01:12,170 --> 00:01:15,840
>> Torej, če imamo nek predmet, ki
se nanaša na naše celotno spletno stran, da

26
00:01:15,840 --> 00:01:19,590
pomeni ga kliče pravilna
metode za manipulacijo, da je predmet

27
00:01:19,590 --> 00:01:22,360
ali spreminjanje nekaterih
njegovih lastnosti, bomo

28
00:01:22,360 --> 00:01:25,500
lahko spremenite elemente
Naša stran programsko

29
00:01:25,500 --> 00:01:30,210
uporabo JavaScript namesto ob
kodo stvari z, recimo, HTML.

30
00:01:30,210 --> 00:01:33,760
Torej, tukaj je primer
zelo preprosta spletna stran, kajne?

31
00:01:33,760 --> 00:01:35,850
Ima HTML oznake, glavo.

32
00:01:35,850 --> 00:01:37,979
>> Znotraj je naziv, zdravo svet.

33
00:01:37,979 --> 00:01:38,770
Potem imam telo.

34
00:01:38,770 --> 00:01:40,686
Znotraj, da imam
tri različne stvari.

35
00:01:40,686 --> 00:01:44,170
Imam h2 header tag je,
odstavek, in povezava.

36
00:01:44,170 --> 00:01:45,920
To je zelo preprosta spletna stran.

37
00:01:45,920 --> 00:01:48,590
>> No, kaj bi lahko bil dokument
ugovarja ta izgledal?

38
00:01:48,590 --> 00:01:50,700
No, to je malo
strašno morda na prvi.

39
00:01:50,700 --> 00:01:52,510
Ampak to je res samo velik drevo.

40
00:01:52,510 --> 00:01:54,890
In na samem korenu to je dokument.

41
00:01:54,890 --> 00:02:00,030
>> Notranjost je dokument drugo
Objekt se nanašajo na HTML moji strani.

42
00:02:00,030 --> 00:02:02,660
In HTML moje strani je vse to.

43
00:02:02,660 --> 00:02:06,900
In nato znotraj HTML
objekt, imam predmet glavo,

44
00:02:06,900 --> 00:02:09,000
ki se nanaša na vse, kar je tam.

45
00:02:09,000 --> 00:02:11,009
>> In znotraj tam,
Imam naziv predmeta.

46
00:02:11,009 --> 00:02:15,620
In notranjost tam, imam drugo
ugovarja, da je samo zdravo svet.

47
00:02:15,620 --> 00:02:18,020
Lahko bi moje telo
predstavljal takole.

48
00:02:18,020 --> 00:02:22,850
>> Znotraj mojega telesa, imam H2
Predmet in p objekt za odstavku

49
00:02:22,850 --> 00:02:25,270
in a objekt za povezavo.

50
00:02:25,270 --> 00:02:29,660
In tako je ta celotna hierarhija
lahko predstavimo kot velik drevo

51
00:02:29,660 --> 00:02:31,990
z veliko manjšim Littleom
Stvari, ki prihajajo iz nje.

52
00:02:31,990 --> 00:02:33,740
Zdaj, seveda, ko
bomo programiranje, smo

53
00:02:33,740 --> 00:02:35,560
Ne verjamem, da stvari, kot velika drevesa.

54
00:02:35,560 --> 00:02:37,980
Želimo si, da dejansko
kode, povezane stvari.

55
00:02:37,980 --> 00:02:40,790
>> In na srečo, smo lahko
uporabo naših Orodja za razvijalce

56
00:02:40,790 --> 00:02:46,080
dejansko si oglejte
Ta spletna stran je dokument objekt.

57
00:02:46,080 --> 00:02:48,150
In kaj je to.

58
00:02:48,150 --> 00:02:49,580
Tako sem odprl zavihek brskalnika.

59
00:02:49,580 --> 00:02:51,540
>> In sem odprla Orodja za razvijalce.

60
00:02:51,540 --> 00:02:54,460
In v mojem video na JavaScript, I
omeniti, da je konzola ne

61
00:02:54,460 --> 00:02:56,770
samo nekam kjer
tiskamo informacije,

62
00:02:56,770 --> 00:02:59,560
to je tudi kraj, kjer
smo lahko vhodni podatki.

63
00:02:59,560 --> 00:03:01,380
V zvezi s tem, kaj
Jaz sem hotel reči je

64
00:03:01,380 --> 00:03:05,720
Rad bi, da bi dobili nazaj
predmeti dokument,

65
00:03:05,720 --> 00:03:07,502
tako da sem lahko začnete, da imajo pogled na to.

66
00:03:07,502 --> 00:03:08,460
Torej, kako bi jaz to naredil?

67
00:03:08,460 --> 00:03:10,740
No, če želim
organizirati res lepo,

68
00:03:10,740 --> 00:03:16,317
Jaz bom rekel, console.dir, D-I-R.
Zdaj ga uporabljam console.log za samo tiskanje

69
00:03:16,317 --> 00:03:17,400
ven nekaj zelo preprosta.

70
00:03:17,400 --> 00:03:20,450
Ampak, če želim, da organizirajo to
hierarhično kot predmeta,

71
00:03:20,450 --> 00:03:23,800
Hočem, da nekako strukturirana
podobno strukturo imenika.

72
00:03:23,800 --> 00:03:27,400
>> Torej, želim console.dir dokument.

73
00:03:27,400 --> 00:03:28,430
Bom udaril Enter.

74
00:03:28,430 --> 00:03:32,350
In tik pod njo zdaj,
in bom povečavo tukaj,

75
00:03:32,350 --> 00:03:36,000
Imam ta dokument odzivni
z malo puščico zraven njega.

76
00:03:36,000 --> 00:03:39,470
Zdaj, ko sem odprl to puščico,
tam se dogaja, da je veliko stvari.

77
00:03:39,470 --> 00:03:42,560
>> Ampak bomo prezreti veliko
za to in samo nekako poudarkom

78
00:03:42,560 --> 00:03:46,250
na najbolj pomemben del, zato smo
lahko začnete navigacijo ta dokument.

79
00:03:46,250 --> 00:03:50,125
Tam je veliko več DOM kot
Samo matična vozlišča in otrok vozlišča.

80
00:03:50,125 --> 00:03:51,500
Tam je veliko pomožne stvari.

81
00:03:51,500 --> 00:03:52,280
>> Torej bom to odprli.

82
00:03:52,280 --> 00:03:54,610
In tam je cel kup
stvari, ki pops up.

83
00:03:54,610 --> 00:03:59,000
Ampak vse mi je mar, je
tukaj, otrok vozlišča.

84
00:03:59,000 --> 00:04:00,410
Odprimo da gor.

85
00:04:00,410 --> 00:04:03,810
>> Znotraj tam vidim
nekaj, kar poznajo, HTML.

86
00:04:03,810 --> 00:04:07,670
Tako znotraj našega dokumenta
eno raven navzdol, HTML.

87
00:04:07,670 --> 00:04:08,550
Odprem, da je gor.

88
00:04:08,550 --> 00:04:10,380
Kaj smo pričakovali?

89
00:04:10,380 --> 00:04:13,760
>> Če se spomnite iz našega diagrama,
kaj bi morali najti znotraj HTML?

90
00:04:13,760 --> 00:04:17,275
Kakšne dva vozlišča so pod njo na drevesu?

91
00:04:17,275 --> 00:04:17,899
Poglejmo izvedeti.

92
00:04:17,899 --> 00:04:18,940
Smo odprli HTML.

93
00:04:18,940 --> 00:04:22,079
Gremo navzdol do svojih otrok vozlišča.

94
00:04:22,079 --> 00:04:23,440
>> Pop, da odprti.

95
00:04:23,440 --> 00:04:25,990
Tam je glava in telo.

96
00:04:25,990 --> 00:04:28,540
In bomo lahko odprli glavo.

97
00:04:28,540 --> 00:04:30,460
Pojdi na svojih otrok vozlišča.

98
00:04:30,460 --> 00:04:31,460
No, tam je naslov.

99
00:04:31,460 --> 00:04:33,293
>> In še bi lahko naštevali in
na, kot je ta večno.

100
00:04:33,293 --> 00:04:34,770
Mi lahko to storite s telesom, kot dobro.

101
00:04:34,770 --> 00:04:40,090
Vendar pa je način za nas, da pogled na
dokument organizirana kot velik objekt.

102
00:04:40,090 --> 00:04:42,610
In če pogledamo, je velik
objekt, ki izgleda veliko

103
00:04:42,610 --> 00:04:47,480
kot kodo, to pomeni, da lahko začnemo
manipulirati ta velik objekt z uporabo

104
00:04:47,480 --> 00:04:51,220
koda za spremembo, kakšna je naša
Spletna stran izgleda in se počuti kot.

105
00:04:51,220 --> 00:04:54,920
>> Tako da je zelo močno orodje
imamo na razpolago sedaj.

106
00:04:54,920 --> 00:04:57,360
Torej, kot smo pravkar videli je
sam dokument predmet

107
00:04:57,360 --> 00:05:01,392
in vse predmete znotraj njega
imajo lastnosti in metode, samo

108
00:05:01,392 --> 00:05:04,100
kot vsak drug predmet, ki smo jih
bilo delo z v JavaScript.

109
00:05:04,100 --> 00:05:08,370
Vendar smo lahko uporabite te lastnosti in
uporaba teh metod nekako vrtati navzdol

110
00:05:08,370 --> 00:05:10,900
iz velikih dokumenta in dobili
nižje in nižje in nižje,

111
00:05:10,900 --> 00:05:13,360
lepši in lepši zrna
podrobnosti, dokler ne bomo

112
00:05:13,360 --> 00:05:17,510
priti na zelo poseben kos naše
Spletna stran, ki želimo spremeniti.

113
00:05:17,510 --> 00:05:22,700
>> In ko smo posodobiti lastnosti
Document Object ali pokličite teh metod,

114
00:05:22,700 --> 00:05:24,450
Stvari bi se lahko zgodilo na naši spletni strani.

115
00:05:24,450 --> 00:05:28,420
In mi ni treba storiti vse osvežujoč
da so te spremembe začele veljati.

116
00:05:28,420 --> 00:05:33,160
>> In to je zelo kul sposobnost
imajo, ko delamo s kodo.

117
00:05:33,160 --> 00:05:37,185
Torej, kaj so nekateri od teh lastnosti
ki so del dokumenta objekta?

118
00:05:37,185 --> 00:05:40,100
No, ste verjetno videl
Nekaj ​​od njih res hitro

119
00:05:40,100 --> 00:05:42,700
kot smo stiskanje
skozi velikan dokument

120
00:05:42,700 --> 00:05:45,150
Objekt smo pravkar videli v spletnem brskalniku.

121
00:05:45,150 --> 00:05:48,420
>> Toda nekaj teh lastnosti
lahko stvari, kot so notranji HTML.

122
00:05:48,420 --> 00:05:52,950
In morda celo me spomni
to uporabljati v videu JavaScript

123
00:05:52,950 --> 00:05:54,950
na samem koncu, ko sem
je govoril o dogodkih.

124
00:05:54,950 --> 00:05:56,125
Kaj je to notranja HTML?

125
00:05:56,125 --> 00:05:59,030
No, to je samo tisto, kar je
med oznakami.

126
00:05:59,030 --> 00:06:01,590
>> In tako notranja HTML,
na primer naslova

127
00:06:01,590 --> 00:06:05,390
tag, če smo bo ohranil v
da na primer pred nekaj trenutki,

128
00:06:05,390 --> 00:06:08,020
bi bilo zdravo svet.

129
00:06:08,020 --> 00:06:10,140
Da je bil naslov naše strani.

130
00:06:10,140 --> 00:06:12,370
Ostale lastnosti
vsebovati ime vozlišča, ki

131
00:06:12,370 --> 00:06:15,810
je ime HTML
element, kot je naslov.

132
00:06:15,810 --> 00:06:19,100
ID, ki je osebna
atribut HTML elementa.

133
00:06:19,100 --> 00:06:23,790
>> Spomnimo se, da smo lahko posebej navede,
Posebni elementi našega HTML

134
00:06:23,790 --> 00:06:27,510
z ID atribut, ki je običajno
pride prav v okviru CSS,

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

136
00:06:29,000 --> 00:06:33,217
Parent vozlišče, ki je sklic
kaj je samo gor nad mano v DOM.

137
00:06:33,217 --> 00:06:35,800
In otrok vozlišča, ki je
Sklicevanje na to, kar je navzdol pod mano.

138
00:06:35,800 --> 00:06:37,950
In smo videli veliko, ki
samo gledaš skozi.

139
00:06:37,950 --> 00:06:42,970
Otroška vozlišča, to je, kako smo dobili
nižje in nižje v drevesu.

140
00:06:42,970 --> 00:06:46,590
>> Atribute, da je samo niz
od atributov HTML elementa.

141
00:06:46,590 --> 00:06:50,270
Torej primer atributov morda
biti, če imate oznako slike,

142
00:06:50,270 --> 00:06:54,090
običajno ima vir atribut,
morda višina in širina atribut.

143
00:06:54,090 --> 00:06:57,120
In tako, da bi bili samo niz
vseh atributov povezanih

144
00:06:57,120 --> 00:06:59,300
s to HTML elementa.

145
00:06:59,300 --> 00:07:04,140
>> Style je še eden, ki
ne predstavljajo CSS

146
00:07:04,140 --> 00:07:06,050
styling posameznega elementa.

147
00:07:06,050 --> 00:07:08,310
In kasneje v tem
video, bomo posebej

148
00:07:08,310 --> 00:07:14,592
vzvod slog, da bi nekaj
sprememb na naši spletni strani.

149
00:07:14,592 --> 00:07:15,800
Torej, to so nekatere lastnosti.

150
00:07:15,800 --> 00:07:17,591
>> In tam so tudi nekateri
Metode, ki jih lahko

151
00:07:17,591 --> 00:07:22,450
uporabite za bolj hitro mogoče izolirati
elementi Document Object.

152
00:07:22,450 --> 00:07:26,730
Morda je najbolj vsestranski
se ti getElementById.

153
00:07:26,730 --> 00:07:31,190
Torej lahko rečem nekaj podobnega, saj
ne pozabite, da je metoda dokumenta

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

155
00:07:34,880 --> 00:07:39,820
>> In znotraj teh oklepajev, navedite
HTML element s posebnim ID

156
00:07:39,820 --> 00:07:42,330
pripisujejo, da sem prej imel
nastaviti, in bom takoj

157
00:07:42,330 --> 00:07:46,685
gremo desno do tega elementa
celotne spletne strani.

158
00:07:46,685 --> 00:07:49,310
Torej, jaz ne bi bilo treba morda vrtanje
navzdol skozi vsako posamezno plast.

159
00:07:49,310 --> 00:07:52,841
Jaz lahko samo uporabite ta način, da ga najdejo,
nekako kot toplota, ki išče raket,

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

161
00:07:53,340 --> 00:07:56,300
To gre samo in najde
točno to, kar je iskal.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName je
Zelo podobno v duhu.

163
00:07:59,290 --> 00:08:02,500
Mogoče bi to ugotovili vse
krepko oznake ali vse p oznak

164
00:08:02,500 --> 00:08:05,920
in mi paleto vsega
da sem lahko potem delati.

165
00:08:05,920 --> 00:08:12,080
appendChild dodaja nekaj
eno raven navzdol v drevesu.

166
00:08:12,080 --> 00:08:16,440
>> Tako sem lahko dodate celoten Novo
element nižja za eno stopnjo.

167
00:08:16,440 --> 00:08:19,700
Ali lahko odstranim element, ki je
eno stopnjo nižja, kot tudi, če želim

168
00:08:19,700 --> 00:08:22,870
izbrisati nekaj iz moje spletne strani.

169
00:08:22,870 --> 00:08:28,480
Zdaj pa hitro kodiranje note in hitro
prihranek glavobol seznanjen, upajmo.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- D je z malimi tiskanimi črkami.

171
00:08:31,670 --> 00:08:36,950
Ne morem vam povedati, koliko krat sem
Rabljeni getElementById in kapitalizirane

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

173
00:08:38,336 --> 00:08:39,460
Ker to je res pogosti.

174
00:08:39,460 --> 00:08:42,990
Če smo napisali besedo ID, to je
običajno kapital I kapital D.

175
00:08:42,990 --> 00:08:44,240
In moja koda ne dela.

176
00:08:44,240 --> 00:08:45,630
In ne morem ugotoviti, zakaj.

177
00:08:45,630 --> 00:08:49,490
To je res, res, res
pogosta napaka, da vsakdo naredi,

178
00:08:49,490 --> 00:08:51,890
celo strokovnjaki, ki imajo
bil to za vedno.

179
00:08:51,890 --> 00:08:55,410
Torej, samo zavedati, getElementById,
da d je z malimi tiskanimi črkami.

180
00:08:55,410 --> 00:09:00,080
In upajmo, da vam prihrani več
minut pri najmanj bolečino.

181
00:09:00,080 --> 00:09:02,204
>> Torej, kaj vse nam to pove?

182
00:09:02,204 --> 00:09:03,120
Imamo te metode.

183
00:09:03,120 --> 00:09:04,161
Imamo te lastnosti.

184
00:09:04,161 --> 00:09:06,610
Zdaj, če začnemo od
dokument, listina.

185
00:09:06,610 --> 00:09:10,220
karkoli, lahko sedaj dobite katerokoli
en kos naši spletni strani

186
00:09:10,220 --> 00:09:14,870
da želimo, da uporabo JavaScript
Samo s klicem te metode

187
00:09:14,870 --> 00:09:19,940
in vplivno lastnosti
da smo našli na različnih lokacijah.

188
00:09:19,940 --> 00:09:24,890
>> To lahko dobite Razvučen, to
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
Mogoče imajo dolgo ime oznake,
Morda vam več klicev kasneje.

190
00:09:28,560 --> 00:09:31,230
Stvari lahko dobili malo Razvučen.

191
00:09:31,230 --> 00:09:34,480
In kot programerji, kot ste
verjetno opazili v mnogih od teh videoposnetkov,

192
00:09:34,480 --> 00:09:36,600
ne maramo Razvučen stvari.

193
00:09:36,600 --> 00:09:38,520
>> Radi bi biti sposoben narediti stvari hitro.

194
00:09:38,520 --> 00:09:42,640
Zato bi želeli bolj
jedrnat način, da nekaj reči.

195
00:09:42,640 --> 00:09:46,270
Torej, to nekako vodi do
pojem nečesa imenuje jQuery.

196
00:09:46,270 --> 00:09:49,170
Zdaj jQuery ni JavaScript.

197
00:09:49,170 --> 00:09:50,350
To ni del JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> To je knjižnica, ki je napisana
nekateri programerji JavaScript

199
00:09:54,790 --> 00:09:57,060
pred približno 10 leti.

200
00:09:57,060 --> 00:10:01,300
In njen cilj je poenostaviti to, kaj je
imenujemo odjemalec side skripte, ki

201
00:10:01,300 --> 00:10:04,310
je v bistvu tisto, kar smo pravkar
govoriš s DOM manipulacijami.

202
00:10:04,310 --> 00:10:11,090
In zato, če sem hotel, da spremenite
Barva ozadja moji spletni strani, morda

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

204
00:10:11,980 --> 00:10:15,325
>> Tukaj sem očitno že
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
In želim, da nastavite barvo ozadja.

206
00:10:16,950 --> 00:10:20,720
Če sem le uporabo čistega JavaScript
pomočjo Document Object Model,

207
00:10:20,720 --> 00:10:23,990
da je veliko stvari, kajne?
document.getElementById

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

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

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

211
00:10:28,050 --> 00:10:30,110
To je bilo veliko za povedati.

212
00:10:30,110 --> 00:10:31,720
To je veliko, da tip, preveč.

213
00:10:31,720 --> 00:10:35,760
In tako v jQuery, bomo lahko morda rekli
to malo bolj jedrnato.

214
00:10:35,760 --> 00:10:39,350
Kompromis je da je morda malo
malo bolj skrivnosten naenkrat,

215
00:10:39,350 --> 00:10:39,850
prav?

216
00:10:39,850 --> 00:10:43,580
>> Vsaj je dolg malo bolj
pojasnili, kaj počnemo.

217
00:10:43,580 --> 00:10:49,947
Ta znak za dolar, oklepaji,
enojni narekovaj, hash, colorDiv, kajne?

218
00:10:49,947 --> 00:10:50,780
Kaj to pomeni?

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

220
00:10:53,640 --> 00:10:58,700
>> Vendar je to neke vrste okrajšavi
način to počne s pomočjo jQuery.

221
00:10:58,700 --> 00:11:01,380
Naj samo poglej zdaj
v nekaj različnih načinov

222
00:11:01,380 --> 00:11:04,520
da sem lahko dejansko
uporabite to Document Object

223
00:11:04,520 --> 00:11:06,807
Model manipulirati kosov moji strani.

224
00:11:06,807 --> 00:11:09,140
Še posebej, gremo
da bodo delali na manipulacijo

225
00:11:09,140 --> 00:11:14,090
barva posebno
Div, colorDiv, na spletni strani.

226
00:11:14,090 --> 00:11:15,299
Torej, kaj je, da pogled na to.

227
00:11:15,299 --> 00:11:15,798
V redu.

228
00:11:15,798 --> 00:11:16,700
Tako da sem na strani.

229
00:11:16,700 --> 00:11:20,750
Imenuje test.html ko prenesete
to, če želite, da Lemiti s tem.

230
00:11:20,750 --> 00:11:24,730
In imam kup
gumbi na tej strani.

231
00:11:24,730 --> 00:11:27,730
In jaz pravim posebnimi funkcijami
za barvo ozadja, vijolična, zelena,

232
00:11:27,730 --> 00:11:31,330
oranžna, rdeča, modra, ena funkcija
za barvo ozadja, event handler

233
00:11:31,330 --> 00:11:34,360
za barvo ozadja in z uporabo jQuery.

234
00:11:34,360 --> 00:11:38,147
Kaj sem govoril o
ko delam to?

235
00:11:38,147 --> 00:11:39,230
Tako smo videli gumbe.

236
00:11:39,230 --> 00:11:41,521
Zdaj pa si oglejte
nekaj izvorne kode tukaj.

237
00:11:41,521 --> 00:11:44,770
Začeli bomo z test.html.

238
00:11:44,770 --> 00:11:48,100
Torej posamezne funkcije za ozadje
Barva je tisto, kar sem tukaj tipkal.

239
00:11:48,100 --> 00:11:49,350
Dovolite mi, da se pomaknete malo.

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

241
00:11:56,170 --> 00:11:58,820
>> In boste opazili, da sem
so opredeljena te gumbe

242
00:11:58,820 --> 00:12:03,990
reči, kdaj se ta gumb kliknili,
klic funkcije obarva vijolično.

243
00:12:03,990 --> 00:12:06,670
Ko je ta gumb kliknite, namesto,
pokličite funkcija pa zeleno,

244
00:12:06,670 --> 00:12:08,710
obrniti oranžno, obarva rdeče, ne obarva modro.

245
00:12:08,710 --> 00:12:11,880
Si verjetno lahko uganiti, da je to
morda ni najboljši dizajn

246
00:12:11,880 --> 00:12:12,460
občutek, kajne?

247
00:12:12,460 --> 00:12:16,490
>> Bilo bi lepo, če bi lahko
imajo bolj splošen pristop.

248
00:12:16,490 --> 00:12:19,570
No, najprej bomo lahko ogledali
kaj ti pet funkcij so

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

250
00:12:24,400 --> 00:12:27,250
zelena, oranžna, rdeča,
in modra, oz.

251
00:12:27,250 --> 00:12:30,930
Torej, ni posebej najboljši dizajn.

252
00:12:30,930 --> 00:12:33,390
>> Naslednji sklop gumbov
Sem se sem napisal

253
00:12:33,390 --> 00:12:36,380
ena funkcija imenuje
spreminjajo barvo, ki očitno

254
00:12:36,380 --> 00:12:38,960
sprejme niz kot svoj argument.

255
00:12:38,960 --> 00:12:40,290
Torej, to je malo bolje.

256
00:12:40,290 --> 00:12:43,840
Vijolična, zelena, oranžna, rdeča,
modra je zdaj argument.

257
00:12:43,840 --> 00:12:46,230
Tako sem napisal bolj splošno
sodna funkcija JavaScript,

258
00:12:46,230 --> 00:12:47,771
ki bi izgledala nekako takole.

259
00:12:47,771 --> 00:12:48,680
Jaz sem, ki poteka v.

260
00:12:48,680 --> 00:12:52,090
Ta barva funkcija sprememba je
Pričakoval argument imenovano barva.

261
00:12:52,090 --> 00:12:54,970
In jaz pravim nastavite
barva ozadja na barvo.

262
00:12:54,970 --> 00:12:58,390
Torej, tukaj predstavlja kar sem tukaj dobil.

263
00:12:58,390 --> 00:12:59,770
Tako da je malo bolje.

264
00:12:59,770 --> 00:13:02,740
>> Vendar bi jaz lahko
narediti bolje kot to.

265
00:13:02,740 --> 00:13:06,140
Če gremo dol, da se zazremo
na dogodek trener razmer na,

266
00:13:06,140 --> 00:13:07,860
Zdaj vsi ti klici videti enako.

267
00:13:07,860 --> 00:13:10,340
Če se spomnite, za naše
Razprava o viličarji dogodkov,

268
00:13:10,340 --> 00:13:15,770
Jaz lahko dobite informacije o tem, katere
ti gumbi je kliknil in uporabite to.

269
00:13:15,770 --> 00:13:19,560
>> In tako v event.JavaScript, Sem
pisna sprememba barve dogodek, ki

270
00:13:19,560 --> 00:13:21,110
številke, kateri gumb je kliknil.

271
00:13:21,110 --> 00:13:23,250
To je povod objekt črta.

272
00:13:23,250 --> 00:13:25,240
In potem tukaj, da postane res Razvučen.

273
00:13:25,240 --> 00:13:27,420
Ampak, kaj počnem, je, da sem
nastavitev ozadje

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

275
00:13:30,340 --> 00:13:34,170
To je besedilo v
med gumbom oznake.

276
00:13:34,170 --> 00:13:36,500
>> In potem sem očitno imela
da jo nastavite na male črke.

277
00:13:36,500 --> 00:13:40,780
In to je, kako sem lahko pretvorite celotno
niz v male črke v JavaScript uporabo

278
00:13:40,780 --> 00:13:42,940
ta metoda v male.

279
00:13:42,940 --> 00:13:46,570
Ker ko sem nastaviti barvo,
kot sem poskušal narediti tukaj,

280
00:13:46,570 --> 00:13:48,260
barva mora biti vse male.

281
00:13:48,260 --> 00:13:50,920
>> Ampak gumb, da sem imel,
če vzamemo še enkrat pogledal,

282
00:13:50,920 --> 00:13:55,890
opazili, da je besedilo
napisana z veliko začetnico P za vijolično.

283
00:13:55,890 --> 00:13:59,140
In potem na samem
Dno tukaj, sem očitno

284
00:13:59,140 --> 00:14:02,630
poskusiti in narediti to s pomočjo jQuery kot dobro.

285
00:14:02,630 --> 00:14:06,000
In v tem primeru nisem dejansko
kliče funkcijo sploh.

286
00:14:06,000 --> 00:14:11,430
Pravkar sem rekel razred, ki sem
uporabljajo za ta gumb je gumb jQ.

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

288
00:14:12,360 --> 00:14:14,950
>> Torej, kako jQuery vem, kaj delam?

289
00:14:14,950 --> 00:14:18,740
No, to je ena izmed prednosti
poševnica slabosti jQuery.

290
00:14:18,740 --> 00:14:21,560
To lahko dovolite mi, da počnejo stvari
zelo jedrnato, a morda ne

291
00:14:21,560 --> 00:14:22,570
kot intuitivno.

292
00:14:22,570 --> 00:14:25,570
Morda tisti, drugi trije narediti
malo bolj občutek, kaj delam.

293
00:14:25,570 --> 00:14:29,010
Tukaj, čeprav, kaj se dogaja?

294
00:14:29,010 --> 00:14:31,940
>> Očitno, ustvarjanje
anonimni funkcija

295
00:14:31,940 --> 00:14:36,790
da obremenitve, kadarkoli je moj dokument
je pripravljen, tako document.ready,

296
00:14:36,790 --> 00:14:38,760
nekatere funkcije se bo zgodilo.

297
00:14:38,760 --> 00:14:40,490
V bistvu, ko je dokument pripravljen?

298
00:14:40,490 --> 00:14:42,310
To je, ko je moja stran naloži.

299
00:14:42,310 --> 00:14:46,540
>> Torej, takoj, ko je moja stran naložen je
naslednje funkcije je vedno pripravljen.

300
00:14:46,540 --> 00:14:54,310
To pravi, če je objekt tipa jQButton,
ali če je bila razred jQButton kliknili,

301
00:14:54,310 --> 00:14:55,570
izvršiti to funkcijo.

302
00:14:55,570 --> 00:14:59,360
Torej, tukaj je dve anonimni funkcije,
eden definirano znotraj drugega.

303
00:14:59,360 --> 00:15:03,930
>> Torej celotnem mojem kontekstu
Tukaj kolikor je moja stran

304
00:15:03,930 --> 00:15:06,520
ko to obilje poziva to funkcijo.

305
00:15:06,520 --> 00:15:09,740
In ta funkcija čaka
za gumb, ki se kliknili.

306
00:15:09,740 --> 00:15:14,490
In ko je gumb kliknili, jQ
Gumb je posebej kliknili,

307
00:15:14,490 --> 00:15:17,150
poziva ta druga
Funkcija, ki se dogaja

308
00:15:17,150 --> 00:15:21,250
da nastavite ozadje
Barva colorDiv biti

309
00:15:21,250 --> 00:15:25,990
karkoli besedilo je med oznakami.

310
00:15:25,990 --> 00:15:28,050
>> To je pojem
kateri gumb je kliknil.

311
00:15:28,050 --> 00:15:31,230
Drugače pa, da je to nekako
obnaša podobno dogodka.

312
00:15:31,230 --> 00:15:34,460
To je samo na enak način sem
to bi izraziti v jQuery.

313
00:15:34,460 --> 00:15:36,790
Še enkrat, to je verjetno
Veliko bolj zastrašujoče.

314
00:15:36,790 --> 00:15:40,840
To ni tako jasno, kot
nekaj podobnega event.js,

315
00:15:40,840 --> 00:15:45,080
ki je morda malo bolj
verbose, ampak malo manj

316
00:15:45,080 --> 00:15:46,000
zastrašujoče.

317
00:15:46,000 --> 00:15:51,460
>> Ampak, če smo pop nazaj v mojo brskalnik
okno, če začnem clicking-- dobro,

318
00:15:51,460 --> 00:15:52,690
da spremeni v vijolično.

319
00:15:52,690 --> 00:15:54,450
To je zelena metodi niza.

320
00:15:54,450 --> 00:15:56,500
To je oranžna z obravnavo dogodkov.

321
00:15:56,500 --> 00:15:58,300
>> To je rdeča uporabo jQuery, kajne?

322
00:15:58,300 --> 00:16:01,270
Vsi obnašajo povsem enako.

323
00:16:01,270 --> 00:16:06,509
Samo to storite s pomočjo razlikuje
pristopi k reševanju problema.

324
00:16:06,509 --> 00:16:08,550
Tam je veliko več
jQuery potem smo zagotovo

325
00:16:08,550 --> 00:16:10,050
bomo govorili o tem videu.

326
00:16:10,050 --> 00:16:15,410
Toda, če želite izvedeti več, lahko
pojdite na jQuery vrste dokumentacije

327
00:16:15,410 --> 00:16:19,710
in se naučite precej malo več o tem
Ta zelo prilagodljiva knjižnica, ki

328
00:16:19,710 --> 00:16:22,550
je super za to odjemalsko
skriptni kot tisto, kar smo počeli

329
00:16:22,550 --> 00:16:26,240
manipulirati videz
in občutek naši spletni strani

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

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

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

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