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

2
00:00:04,439 --> 00:00:07,230
Doug LLOYD: Šiame video norėjome
sušukti atskirą dėmesį

3
00:00:07,230 --> 00:00:09,110
kad labai ypač
elementas JavaScript

4
00:00:09,110 --> 00:00:11,350
kad jūs galite rasti patogu
kai jūs pradedate

5
00:00:11,350 --> 00:00:15,750
dirbti manipuliuoti tinklalapius ir
keičiasi jūsų tinklalapio turinį

6
00:00:15,750 --> 00:00:16,460
skristi.

7
00:00:16,460 --> 00:00:19,450
Ir tai sąvoka
Dokumentų Objekto modelį.

8
00:00:19,450 --> 00:00:23,030
Taigi, kaip matėme mūsų vaizdo į
JavaScript objektai yra labai lanksti.

9
00:00:23,030 --> 00:00:24,750
>> Ir jie gali būti įvairiose srityse.

10
00:00:24,750 --> 00:00:28,075
Ir nors mes ne eiti į Siuntos
detalė, tie laukai ar savybės,

11
00:00:28,075 --> 00:00:30,200
kad mes tikriausiai daugiau
tinkamai juos vadina

12
00:00:30,200 --> 00:00:33,915
į objekto kontekste, net
tie savybės gali būti ir kitų objektų.

13
00:00:33,915 --> 00:00:36,210
Ir viduje šių objektų
Gali būti ir kitų objektų.

14
00:00:36,210 --> 00:00:39,630
>> Jūs turite tai labai didelis objektas
su kitų objektų daug

15
00:00:39,630 --> 00:00:43,550
viduje ji, kokios rūšies
sukuria šį dideliame medyje idėja.

16
00:00:43,550 --> 00:00:47,540
Dabar, dokumentas objektas yra
labai ypatinga objektas JavaScript

17
00:00:47,540 --> 00:00:52,580
kuri organizuoja visą savo interneto
puslapis pagal šią skėtis rūšiuoti

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

19
00:00:53,470 --> 00:00:56,770
Ir taip viduje dokumento
objektas yra objektai pristatantys

20
00:00:56,770 --> 00:00:59,630
galvos ir kūno jūsų tinklalapį.

21
00:00:59,630 --> 00:01:03,760
>> Viduje jie yra kitos
objektus, ir taip toliau, ir taip toliau,

22
00:01:03,760 --> 00:01:08,411
kol visą savo interneto puslapis turi
buvo organizuota tai didelis objektas.

23
00:01:08,411 --> 00:01:09,660
Kas yra aukštyn kojom čia, tiesa?

24
00:01:09,660 --> 00:01:12,170
Na, mes žinome, kaip dirbti
su objektų JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Taigi, jei mes turime objektas,
nuoroda į visą mūsų tinklalapį, kad

26
00:01:15,840 --> 00:01:19,590
reiškia paskambinus teisingas
metodai manipuliuoti, kad objekto

27
00:01:19,590 --> 00:01:22,360
arba pakeisti tam tikras
jos savybių, mes

28
00:01:22,360 --> 00:01:25,500
gali pakeisti elementus
Mūsų puslapis programiškai

29
00:01:25,500 --> 00:01:30,210
naudojant JavaScript, užuot
koduoti dalykus su, tarkim, HTML.

30
00:01:30,210 --> 00:01:33,760
Taigi čia Kuris iš pavyzdžių
labai paprastas interneto puslapis, tiesa?

31
00:01:33,760 --> 00:01:35,850
Jis gavo HTML žymes, galvą.

32
00:01:35,850 --> 00:01:37,979
>> Viduje yra pavadinimas, hello world.

33
00:01:37,979 --> 00:01:38,770
Tada aš turiu kūną.

34
00:01:38,770 --> 00:01:40,686
Viduje, kad turiu
Trys skirtingi dalykai.

35
00:01:40,686 --> 00:01:44,170
Turiu H2 antraštė žymeles,
paragrafas ir nuoroda.

36
00:01:44,170 --> 00:01:45,920
Tai labai paprasta interneto puslapis.

37
00:01:45,920 --> 00:01:48,590
>> Na, kas gali dokumentas
prieštarauti šiam atrodo?

38
00:01:48,590 --> 00:01:50,700
Na, tai šiek tiek
baisu gal iš pradžių.

39
00:01:50,700 --> 00:01:52,510
Bet tai tikrai tik didelis medis.

40
00:01:52,510 --> 00:01:54,890
Ir tuo pat šaknies Tai dokumentas.

41
00:01:54,890 --> 00:02:00,030
>> Viduje dokumentas yra kita
objektas nuoroda į mano puslapį HTML.

42
00:02:00,030 --> 00:02:02,660
Ir savo puslapyje HTML yra visa tai.

43
00:02:02,660 --> 00:02:06,900
Ir tada viduje HTML
objektas, turiu galvos objektą,

44
00:02:06,900 --> 00:02:09,000
kuris nurodo viskas ten.

45
00:02:09,000 --> 00:02:11,009
>> Ir viduje ten,
Turiu pavadinimą objektą.

46
00:02:11,009 --> 00:02:15,620
Ir viduje ten, aš turiu kitą
prieštarauti, kad tik hello world.

47
00:02:15,620 --> 00:02:18,020
Galėjau savo kūną
atstovavo kaip šis.

48
00:02:18,020 --> 00:02:22,850
>> Viduje mano kūną, aš turiu h2
objektas ir P objektas dalį

49
00:02:22,850 --> 00:02:25,270
ir už nuorodą objektas.

50
00:02:25,270 --> 00:02:29,660
Ir todėl tai visai hierarchijai
gali būti atstovaujama kaip didelis medis

51
00:02:29,660 --> 00:02:31,990
su daug mažesniu Little
viskas išeina iš jos.

52
00:02:31,990 --> 00:02:33,740
Dabar, žinoma, kai
mes programavimo, mes

53
00:02:33,740 --> 00:02:35,560
nemanau dalykų kaip didelis medis.

54
00:02:35,560 --> 00:02:37,980
Mes norime matyti faktinis
kodas susiję dalykai.

55
00:02:37,980 --> 00:02:40,790
>> Ir, laimei, mes galime
naudoti mūsų Kūrėjo įrankiai

56
00:02:40,790 --> 00:02:46,080
realiai pažvelgti
Ši svetainė dokumente objektas.

57
00:02:46,080 --> 00:02:48,150
Ir tegul tai padaryti.

58
00:02:48,150 --> 00:02:49,580
Taigi aš atvėrė naršyklės skirtuką.

59
00:02:49,580 --> 00:02:51,540
>> Ir aš atvėrė Kūrėjo įrankiai.

60
00:02:51,540 --> 00:02:54,460
Ir mano vaizdo JavaScript, aš
paminėjo, kad konsolė nėra

61
00:02:54,460 --> 00:02:56,770
tik kažkur, kur
mes spausdinti informaciją

62
00:02:56,770 --> 00:02:59,560
jis taip pat vieta, kur
mes galime teikti informaciją.

63
00:02:59,560 --> 00:03:01,380
Atsižvelgiant į tai, kas
Aš ruošiuosi pasakyti

64
00:03:01,380 --> 00:03:05,720
Norėčiau gauti atgal
Dokumente objektai,

65
00:03:05,720 --> 00:03:07,502
todėl galiu pradėti turėti į jį žiūrėti.

66
00:03:07,502 --> 00:03:08,460
Taigi, kaip galėčiau tai padaryti?

67
00:03:08,460 --> 00:03:10,740
Na, jei aš noriu
organizuoti tai tikrai gražiai,

68
00:03:10,740 --> 00:03:16,317
Aš ruošiuosi pasakyti console.dir, D-I-R.
Dabar, aš naudoju console.log tiesiog atsispausdinti

69
00:03:16,317 --> 00:03:17,400
kažką labai paprasta.

70
00:03:17,400 --> 00:03:20,450
Bet jei aš noriu surengti šį
hierarchiškai kaip objektas,

71
00:03:20,450 --> 00:03:23,800
Noriu, kad ji tarsi struktūra
kaip katalogo struktūrą.

72
00:03:23,800 --> 00:03:27,400
>> Taigi noriu console.dir dokumentą.

73
00:03:27,400 --> 00:03:28,430
Aš ruošiuosi paspauskite Enter.

74
00:03:28,430 --> 00:03:32,350
Ir tiesiai po juo dabar
ir aš priartinti čia

75
00:03:32,350 --> 00:03:36,000
Aš turiu šį atsakymą dokumentą
su mažai rodyklę prie jo.

76
00:03:36,000 --> 00:03:39,470
Dabar, kai aš atidaryti šią rodyklę,
ten bus daug dalykų.

77
00:03:39,470 --> 00:03:42,560
>> Tačiau mes ketiname ignoruoti daug
IT ir tiesiog rūšies dėmesio

78
00:03:42,560 --> 00:03:46,250
ant svarbiausia dalis, todėl mes
galite pradėti naršyti šį dokumentą.

79
00:03:46,250 --> 00:03:50,125
Yra daug daugiau nei DOM
tik tėvų mazgai ir vaiko mazgai.

80
00:03:50,125 --> 00:03:51,500
Yra daug papildomos daug dalykų.

81
00:03:51,500 --> 00:03:52,280
>> Taigi, aš ruošiuosi atidaryti tai padaryti.

82
00:03:52,280 --> 00:03:54,610
Ir ten visai daug
stuff, kuris pasirodo.

83
00:03:54,610 --> 00:03:59,000
Bet viskas, ką aš rūpi
čia, vaikas mazgai.

84
00:03:59,000 --> 00:04:00,410
Leiskite atidaryti, kad iki.

85
00:04:00,410 --> 00:04:03,810
>> Viduje yra matau
kažkas pažįstamas, HTML.

86
00:04:03,810 --> 00:04:07,670
Taigi viduje mūsų dokumente
Vieno lygio, žemyn, HTML.

87
00:04:07,670 --> 00:04:08,550
Aš atidarau, kad iki.

88
00:04:08,550 --> 00:04:10,380
Ką mes laukiame?

89
00:04:10,380 --> 00:04:13,760
>> Jei prisimenate iš mūsų schemoje,
Ką turėtų randame viduje HTML?

90
00:04:13,760 --> 00:04:17,275
Kas du mazgai yra po juo medyje?

91
00:04:17,275 --> 00:04:17,899
Leiskite sužinoti.

92
00:04:17,899 --> 00:04:18,940
Mes atverti HTML.

93
00:04:18,940 --> 00:04:22,079
Mes eiti į savo vaikų mazgų.

94
00:04:22,079 --> 00:04:23,440
>> Pop, kad atidaryti.

95
00:04:23,440 --> 00:04:25,990
Yra galva ir kūnas.

96
00:04:25,990 --> 00:04:28,540
Ir mes galime atverti galvą.

97
00:04:28,540 --> 00:04:30,460
Eiti į jos vaikų mazgų.

98
00:04:30,460 --> 00:04:31,460
Na, ten pavadinimas.

99
00:04:31,460 --> 00:04:33,293
>> Ir mes galime eiti ir
nuo panašaus į tai amžinai.

100
00:04:33,293 --> 00:04:34,770
Mes galime tai padaryti su kūno, taip pat.

101
00:04:34,770 --> 00:04:40,090
Bet yra mums pažvelgti būdas
dokumentas organizuojamas kaip didelis objektas.

102
00:04:40,090 --> 00:04:42,610
Ir jeigu pažvelgtume yra didelis
objektas, kuris atrodo daug

103
00:04:42,610 --> 00:04:47,480
kaip kodo, tai reiškia, kad galėtume pradėti
manipuliuoti tai didelis daiktas naudojant

104
00:04:47,480 --> 00:04:51,220
kodas pakeisti tai, ką mūsų
svetainė atrodo ir jaučiasi.

105
00:04:51,220 --> 00:04:54,920
>> Taigi, kad gana galingas įrankis
mes turime mūsų žinioje dabar.

106
00:04:54,920 --> 00:04:57,360
Taigi, kaip mes ką tik matėme, The
Pats dokumentas objektas

107
00:04:57,360 --> 00:05:01,392
ir visos jos viduje esančiais objektų
turi savybes ir metodus, tiesiog

108
00:05:01,392 --> 00:05:04,100
kaip bet kuris kitas objektas, kad mes
dirbu su JavaScript.

109
00:05:04,100 --> 00:05:08,370
Bet mes galime naudoti tas savybes ir
naudoti šiuos metodus, tarsi išskleiskite

110
00:05:08,370 --> 00:05:10,900
iš didelio dokumentu ir gauti
mažesnis ir mažesnis ir mažesnis,

111
00:05:10,900 --> 00:05:13,360
prabangiau ir prabangiau grūdai
detalumas, kol mes

112
00:05:13,360 --> 00:05:17,510
gauti labai konkrečios gabalas mūsų
interneto puslapis, mes norime pakeisti.

113
00:05:17,510 --> 00:05:22,700
>> Ir kai mes atnaujiname savybės
Document Object arba skambinkite tuos metodus,

114
00:05:22,700 --> 00:05:24,450
dalykai gali atsitikti mūsų interneto puslapyje.

115
00:05:24,450 --> 00:05:28,420
Ir mums nereikia daryti bet gaivus
turėti šie pakeitimai įsigaliotų.

116
00:05:28,420 --> 00:05:33,160
>> Ir tai yra gana kietas gebėjimas
turi, kai mes dirbame su kodu.

117
00:05:33,160 --> 00:05:37,185
Taigi, kas yra kai kurie iš šių savybių
kad yra dalis dokumento objektas?

118
00:05:37,185 --> 00:05:40,100
Na, jūs tikriausiai matė
pora iš jų tikrai greitai

119
00:05:40,100 --> 00:05:42,700
kaip mums buvo zipping
per milžinišką dokumento

120
00:05:42,700 --> 00:05:45,150
objektas mes tiesiog matė naršyklėje.

121
00:05:45,150 --> 00:05:48,420
>> Tačiau šių savybių pora
gali būti dalykų, pavyzdžiui, vidinis HTML.

122
00:05:48,420 --> 00:05:52,950
Ir galbūt net prisiminti mane
naudojant tai JavaScript vaizdo

123
00:05:52,950 --> 00:05:54,950
pačioje pabaigoje, kai aš
buvo kalbama apie įvykius.

124
00:05:54,950 --> 00:05:56,125
Kas buvo šis vidinis HTML?

125
00:05:56,125 --> 00:05:59,030
Na, tai tik tai, kas
tarp žymių.

126
00:05:59,030 --> 00:06:01,590
>> Ir taip vidinis HTML
pavyzdžiui, pavadinimo

127
00:06:01,590 --> 00:06:05,390
žymeles, jei būtume nuolat vyksta į
kad pvz prieš momentas,

128
00:06:05,390 --> 00:06:08,020
Būtų buvę hello world.

129
00:06:08,020 --> 00:06:10,140
Tai buvo mūsų puslapio pavadinimas.

130
00:06:10,140 --> 00:06:12,370
Kitos savybės
įtraukti mazgas vardą, kuris

131
00:06:12,370 --> 00:06:15,810
yra HTML pavadinimas
elementas, pavyzdžiui, pavadinimą.

132
00:06:15,810 --> 00:06:19,100
ID, kuris yra ID
atributas HTML elementas.

133
00:06:19,100 --> 00:06:23,790
>> Prisiminkite, kad mes galime specialiai rodo
specifiniai elementai mūsų HTML

134
00:06:23,790 --> 00:06:27,510
su ID atributas, kuris paprastai
praverčia CSS kontekste,

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

136
00:06:29,000 --> 00:06:33,217
Tėvų mazgas, kuris yra nuoroda į
kas tik iki virš manęs į DOM.

137
00:06:33,217 --> 00:06:35,800
Ir vaikas mazgai, kuris yra
nuoroda į tai, kas apačioje mane.

138
00:06:35,800 --> 00:06:37,950
Ir mes matėme, kad daug
tiesiog ieško per.

139
00:06:37,950 --> 00:06:42,970
Vaiko mazgai, tai, kaip mes turime
mažesnis ir mažesnis į medį.

140
00:06:42,970 --> 00:06:46,590
>> Savybės, tai tik masyvas
atributų HTML elementas.

141
00:06:46,590 --> 00:06:50,270
Šitaip atributų pavyzdys galėtų
, jei turite vaizdo žymeles,

142
00:06:50,270 --> 00:06:54,090
ji paprastai turi šaltinio atributas,
gal aukštis ir plotis atributui.

143
00:06:54,090 --> 00:06:57,120
Ir taip, kad būtų tiesiog masyvas
Visų požymiai, susijusių

144
00:06:57,120 --> 00:06:59,300
su tuo HTML elementas.

145
00:06:59,300 --> 00:07:04,140
>> Stilius yra dar vienas, kad
ar atstovauti CSS

146
00:07:04,140 --> 00:07:06,050
modeliavimo iš konkretaus elemento.

147
00:07:06,050 --> 00:07:08,310
O vėliau ir tai
vaizdo, mes specialiai

148
00:07:08,310 --> 00:07:14,592
sverto stilius padaryti pora
pokyčių į mūsų svetainę.

149
00:07:14,592 --> 00:07:15,800
Taigi tie keletas savybių.

150
00:07:15,800 --> 00:07:17,591
>> Ir taip pat yra keletas
metodai, kad mes galime

151
00:07:17,591 --> 00:07:22,450
naudoti taip pat greičiau gal izoliuoti
elementai dokumento objektas.

152
00:07:22,450 --> 00:07:26,730
Galbūt labiausiai universalus
Šių Būdamas getElementById.

153
00:07:26,730 --> 00:07:31,190
Taigi, aš gali pasakyti kažką panašaus, nes
prisiminti tai dokumento metodas

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

155
00:07:34,880 --> 00:07:39,820
>> Ir viduje tų skliausteliuose, nurodykite
HTML elementas su konkrečiu ID

156
00:07:39,820 --> 00:07:42,330
atributas, kad aš anksčiau
nustatyti, ir aš iš karto

157
00:07:42,330 --> 00:07:46,685
eiti tiesiai į tą elementą
į bendrą svetainę.

158
00:07:46,685 --> 00:07:49,310
Taigi, aš neturiu gal gręžti
žemyn per kiekvieną sluoksnį.

159
00:07:49,310 --> 00:07:52,841
Aš galiu tik naudoti šį metodą, kad jį rasti,
tarsi kaip šilumos siekimo raketos,

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

161
00:07:53,340 --> 00:07:56,300
Jis tiesiog eina ir randa
ką jis ieško.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName yra
labai panašus į dvasią.

163
00:07:59,290 --> 00:08:02,500
Gal tai būtų surasti visus
Plikas žodžius arba visos p žymės

164
00:08:02,500 --> 00:08:05,920
ir duoti man visko masyvo
kad galėčiau tada dirbti.

165
00:08:05,920 --> 00:08:12,080
appendChild prideda kažką
vienas lygis nustatytas medžio.

166
00:08:12,080 --> 00:08:16,440
>> Taigi aš galiu pridėti visą Naujas
elementas vienas lygis žemesnis.

167
00:08:16,440 --> 00:08:19,700
Arba galiu pašalinti elementą, kad yra
vienas lygis mažesnis, taip pat, jei noriu

168
00:08:19,700 --> 00:08:22,870
ištrinti kažką iš mano puslapyje.

169
00:08:22,870 --> 00:08:28,480
Dabar, greitas kodavimas pastabą ir greitas
galvos skausmas taupymo dėmesį, tikiuosi.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- D yra mažosios.

171
00:08:31,670 --> 00:08:36,950
Aš negaliu pasakyti jums, kiek kartų aš turiu
Naudota getElementById ir kapitalizuojamos

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

173
00:08:38,336 --> 00:08:39,460
Nes tai tikrai bendra.

174
00:08:39,460 --> 00:08:42,990
Jei mes rašome žodį ID, tai
Paprastai kapitalą Aš kapitalo D.

175
00:08:42,990 --> 00:08:44,240
Ir mano kodas tiesiog neveikia.

176
00:08:44,240 --> 00:08:45,630
Ir aš negaliu suprasti, kodėl.

177
00:08:45,630 --> 00:08:49,490
Tai tikrai, tikrai, tikrai
bendra klaida, kad visi daro,

178
00:08:49,490 --> 00:08:51,890
net ekspertai, kurie turi
buvo tai amžinai.

179
00:08:51,890 --> 00:08:55,410
Taigi tiesiog reikia žinoti, getElementById,
kad d yra mažosios.

180
00:08:55,410 --> 00:09:00,080
Ir tikiuosi, kad taupo jums keletą
minučių bent sielvartas.

181
00:09:00,080 --> 00:09:02,204
>> Taigi, ką visa tai mums pasakyti?

182
00:09:02,204 --> 00:09:03,120
Mes turime šiuos metodus.

183
00:09:03,120 --> 00:09:04,161
Mes turime šias savybes.

184
00:09:04,161 --> 00:09:06,610
Dabar, jei mes pradėsime nuo
dokumentas, dokumentas.

185
00:09:06,610 --> 00:09:10,220
kas, dabar mes galime gauti bet
vienetinį mūsų internetiniame puslapyje

186
00:09:10,220 --> 00:09:14,870
kad mes norime naudojant "JavaScript"
tik paskambinę šiuos metodus

187
00:09:14,870 --> 00:09:19,940
ir sverto savybes
kad randame įvairiose vietose.

188
00:09:19,940 --> 00:09:24,890
>> Tai gali gauti sakytinis, šis
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
gal turi ilgą žymės pavadinimą,
Gal daugiau skambučių vėliau.

190
00:09:28,560 --> 00:09:31,230
Ką gali gauti šiek tiek ištęstas.

191
00:09:31,230 --> 00:09:34,480
Ir kaip programuotojai, kaip jūs
tikriausiai matė daugelis iš šių vaizdo įrašų,

192
00:09:34,480 --> 00:09:36,600
mums nepatinka žodinius dalykų.

193
00:09:36,600 --> 00:09:38,520
>> Mums patinka, kad būtų galima daryti dalykus greitai.

194
00:09:38,520 --> 00:09:42,640
Taigi mes norėtume daugiau
glausta būdas pasakyti kažką.

195
00:09:42,640 --> 00:09:46,270
Taigi šis veda prie Rūšiuoti
sąvoka vadinamąjį JQuery.

196
00:09:46,270 --> 00:09:49,170
Dabar JQuery yra ne "JavaScript".

197
00:09:49,170 --> 00:09:50,350
Tai ne dalis JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Tai yra biblioteka, kuri buvo parašyta
Kai kurie JavaScript programuotojai

199
00:09:54,790 --> 00:09:57,060
maždaug prieš 10 metų.

200
00:09:57,060 --> 00:10:01,300
Ir jos tikslas yra supaprastinti šią kas
vadinamas kliento pusėje skriptų, kurie

201
00:10:01,300 --> 00:10:04,310
iš esmės yra tai, kas mes buvome tik
kalbame apie su DOM manipuliacijos.

202
00:10:04,310 --> 00:10:11,090
Ir todėl, jei aš norėjau modifikuoti
fono spalva mano internetiniame puslapyje, gal

203
00:10:11,090 --> 00:10:11,980
konkretus DIV.

204
00:10:11,980 --> 00:10:15,325
>> Čia, aš, matyt, vis
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Ir aš noriu nustatyti savo fono spalvą.

206
00:10:16,950 --> 00:10:20,720
Jei aš tik naudojant gryną JavaScript
naudojant Document Object Model,

207
00:10:20,720 --> 00:10:23,990
tai daug dalykų, tiesa?
document.getElementById

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

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

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

211
00:10:28,050 --> 00:10:30,110
Tai buvo daug ką pasakyti.

212
00:10:30,110 --> 00:10:31,720
Tai daug rašyti, taip pat.

213
00:10:31,720 --> 00:10:35,760
Ir taip JQuery, mes gal galime pasakyti
Tai šiek tiek daugiau glaustai.

214
00:10:35,760 --> 00:10:39,350
Off yra tai prekyba yra gal šiek tiek
šiek tiek daugiau paslaptingas visi staiga,

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

216
00:10:39,850 --> 00:10:43,580
>> Bent kol yra šiek tiek daugiau
aiškinamajame, ką mes darome.

217
00:10:43,580 --> 00:10:49,947
Tai dolerio ženklas, skliaustai,
vieno citata, maišos, colorDiv, tiesa?

218
00:10:49,947 --> 00:10:50,780
Ką tai reiškia?

219
00:10:50,780 --> 00:10:53,640
Na, tai iš esmės tik
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Bet tai šis sutrumpinta Rūšiuoti
būdas tai daryti naudojant JQuery.

221
00:10:58,700 --> 00:11:01,380
Tegul tik pažvelgti dabar
bent keliais skirtingais būdais pora

222
00:11:01,380 --> 00:11:04,520
kad aš iš tiesų gali
naudoti šią Document Object

223
00:11:04,520 --> 00:11:06,807
Modelis manipuliuoti vienetų mano svetainę.

224
00:11:06,807 --> 00:11:09,140
Visų pirma, mes ketiname
reikia dirbti manipuliuoti

225
00:11:09,140 --> 00:11:14,090
tam tikros spalvos
Div, colorDiv, tinklalapyje.

226
00:11:14,090 --> 00:11:15,299
Taigi tegul Tuo išvaizdą.

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

228
00:11:15,798 --> 00:11:16,700
Taigi, aš ant puslapio.

229
00:11:16,700 --> 00:11:20,750
Tai vadinama bandymas.html kai atsisiunčiate
tai, jei norite žaisti su tai.

230
00:11:20,750 --> 00:11:24,730
Ir aš turiu krūva
Mygtukai šiame puslapyje.

231
00:11:24,730 --> 00:11:27,730
Ir aš sakau Specialias funkcijas
fono spalvos, violetinė, žalia,

232
00:11:27,730 --> 00:11:31,330
oranžinė, raudona, mėlyna, vienas funkcija
fono spalvos, renginys prižiūrėtojas

233
00:11:31,330 --> 00:11:34,360
fono spalvos, ir naudojant JQuery.

234
00:11:34,360 --> 00:11:38,147
Ką aš kalbu
kai darau tai?

235
00:11:38,147 --> 00:11:39,230
Taigi mes matėme mygtukus.

236
00:11:39,230 --> 00:11:41,521
Dabar galime pažvelgti
kai kodo čia.

237
00:11:41,521 --> 00:11:44,770
Pradėsime testas.html.

238
00:11:44,770 --> 00:11:48,100
Taigi atskiros funkcijos fone
spalva yra tai, ką aš čia įvedėte.

239
00:11:48,100 --> 00:11:49,350
Leiskite man pereiti truputį.

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

241
00:11:56,170 --> 00:11:58,820
>> Ir jūs pastebėsite, kad aš
apibrėžė šiuos mygtukus

242
00:11:58,820 --> 00:12:03,990
pasakyti, kada šis mygtukas paspaudžiamas,
skambinkite funkciją įjungti violetinė.

243
00:12:03,990 --> 00:12:06,670
Kai šis mygtukas spustelėkite, o,
skambinti funkcija žalias,

244
00:12:06,670 --> 00:12:08,710
paversti oranžinė, parausti, mėlynuoti.

245
00:12:08,710 --> 00:12:11,880
Jūs tikriausiai galite atspėti, kad tai
galbūt ne geriausias dizainas

246
00:12:11,880 --> 00:12:12,460
jausmas, tiesa?

247
00:12:12,460 --> 00:12:16,490
>> Būtų malonu, jei galėčiau
turėti bendresnį požiūrį.

248
00:12:16,490 --> 00:12:19,570
Na, visų pirma mes pažvelgsime
ką tie penki funkcijos

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

250
00:12:24,400 --> 00:12:27,250
žalia, oranžinė, raudona,
ir mėlyna, atitinkamai.

251
00:12:27,250 --> 00:12:30,930
Taigi, ne itin geriausias dizainas.

252
00:12:30,930 --> 00:12:33,390
>> Kitas rinkinys mygtukai
Aš tai parašiau

253
00:12:33,390 --> 00:12:36,380
viena funkcija vadinama
keisti spalvą, kuri, matyt,

254
00:12:36,380 --> 00:12:38,960
priima eilutę kaip savo argumentą.

255
00:12:38,960 --> 00:12:40,290
Taigi, tai yra šiek tiek geriau.

256
00:12:40,290 --> 00:12:43,840
Violetinė, žalia, oranžinė, raudona,
Mėlyna dabar yra argumentas.

257
00:12:43,840 --> 00:12:46,230
Taigi, aš parašiau bendresnis
atveju JavaScript funkcija,

258
00:12:46,230 --> 00:12:47,771
kurios gali atrodyti kažką panašaus į tai.

259
00:12:47,771 --> 00:12:48,680
Aš einančios.

260
00:12:48,680 --> 00:12:52,090
Ši funkcija keičia spalvą yra
tikisi argumentą, pavadintą spalva.

261
00:12:52,090 --> 00:12:54,970
Ir aš sakau nustatyti
fono spalva spalvai.

262
00:12:54,970 --> 00:12:58,390
Taigi čia yra tai, ką aš čia turiu.

263
00:12:58,390 --> 00:12:59,770
Štai šiek tiek geriau.

264
00:12:59,770 --> 00:13:02,740
>> Bet aš galėtų
padaryti geriau nei tai.

265
00:13:02,740 --> 00:13:06,140
Jei mes eiti pažvelgti
renginio vedlių situacijai,

266
00:13:06,140 --> 00:13:07,860
dabar visi šie skambučiai atrodo vienodai.

267
00:13:07,860 --> 00:13:10,340
Jei prisimenate už mūsų
diskusija apie įvykį tvarkytojų,

268
00:13:10,340 --> 00:13:15,770
Galiu gauti informaciją apie kuri iš
Šie mygtukai buvo paspausti ir ją naudoti.

269
00:13:15,770 --> 00:13:19,560
>> Ir taip event.JavaScript, aš
parašyta keičia spalvą įvykis, kuris

270
00:13:19,560 --> 00:13:21,110
skaičiai, kurie mygtukas paspaudėte.

271
00:13:21,110 --> 00:13:23,250
Štai gaidukas objektas linija.

272
00:13:23,250 --> 00:13:25,240
Ir tada čia, tai bus tikrai sakytinis.

273
00:13:25,240 --> 00:13:27,420
Bet ką aš darau yra aš
nustatant fonas

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

275
00:13:30,340 --> 00:13:34,170
Štai į tekstą
tarp mygtuko žymes.

276
00:13:34,170 --> 00:13:36,500
>> Ir tada aš matyt turi
nustatyti, kad jis mažosiomis.

277
00:13:36,500 --> 00:13:40,780
Ir tai, kaip aš galiu konvertuoti visą
string mažosiomis JavaScript naudojant

278
00:13:40,780 --> 00:13:42,940
šis metodas mažosiomis raidėmis.

279
00:13:42,940 --> 00:13:46,570
Nes kai aš nustatyti spalvą,
kaip aš bandau padaryti čia

280
00:13:46,570 --> 00:13:48,260
spalva turi būti visi mažosiomis raidėmis.

281
00:13:48,260 --> 00:13:50,920
>> Bet mygtuką, kad turėjau,
jei mes atsižvelgti kitą išvaizdą,

282
00:13:50,920 --> 00:13:55,890
pastebėsite, kad tekstas yra
parašyta kapitalo P-violetinė.

283
00:13:55,890 --> 00:13:59,140
Ir tada labai
dugnas čia, aš, matyt,

284
00:13:59,140 --> 00:14:02,630
pabandyti ir padaryti naudodami JQuery, kaip gerai.

285
00:14:02,630 --> 00:14:06,000
Ir šiuo atveju, aš ne iš tikrųjų
paskambinę funkciją ne visiems.

286
00:14:06,000 --> 00:14:11,430
Aš ką tik sakė klasę, kad aš
naudodamas šį mygtuką yra JQ mygtuką.

287
00:14:11,430 --> 00:14:12,360
Viskas.

288
00:14:12,360 --> 00:14:14,950
>> Taigi, kaip JQuery žinoti, ką aš darau?

289
00:14:14,950 --> 00:14:18,740
Na, tai yra vienas iš privalumų
slash trūkumus JQuery.

290
00:14:18,740 --> 00:14:21,560
Jis gali leisti man daryti dalykus
labai glaustai, bet gal ir ne

291
00:14:21,560 --> 00:14:22,570
kaip intuityviai.

292
00:14:22,570 --> 00:14:25,570
Gal tie kiti trys padaryti
šiek tiek daugiau pajusti, ką darau.

293
00:14:25,570 --> 00:14:29,010
Čia, nors, kas vyksta?

294
00:14:29,010 --> 00:14:31,940
>> Matyt, sukurti
anoniminis funkcija

295
00:14:31,940 --> 00:14:36,790
kad apkrovos, kai mano dokumentas
yra pasirengusi, todėl document.ready,

296
00:14:36,790 --> 00:14:38,760
kai funkcija nutiks.

297
00:14:38,760 --> 00:14:40,490
Iš esmės, kai yra dokumentas, paruoštas?

298
00:14:40,490 --> 00:14:42,310
Tai kai mano puslapis buvo įkeltas.

299
00:14:42,310 --> 00:14:46,540
>> Taigi kuo greičiau mano puslapis buvo įkelta,
Žemiau funkcija yra visada pasiruošę.

300
00:14:46,540 --> 00:14:54,310
Ji sako, jei tipo jQButton objektas,
arba jei klasė jQButton buvo paspaudėte,

301
00:14:54,310 --> 00:14:55,570
vykdyti šią funkciją.

302
00:14:55,570 --> 00:14:59,360
Taigi čia du anoniminiai funkcijos,
vienas apibrėžta viduje į kitą.

303
00:14:59,360 --> 00:15:03,930
>> Taigi visą mano kontekste
Čia iki šiol yra mano puslapis

304
00:15:03,930 --> 00:15:06,520
kai jis įkelia ji vadina šią funkciją.

305
00:15:06,520 --> 00:15:09,740
Ir ši funkcija laukia
už vieno mygtuko būti paspaudėte.

306
00:15:09,740 --> 00:15:14,490
Ir kai mygtukas paspaudžiamas, JQ
mygtuką specialiai yra paspaudėte,

307
00:15:14,490 --> 00:15:17,150
jis tai vadina kita
funkcija, kuri vyksta

308
00:15:17,150 --> 00:15:21,250
nustatyti foną
spalva colorDiv būti

309
00:15:21,250 --> 00:15:25,990
kokia tekstas yra tarp žymių.

310
00:15:25,990 --> 00:15:28,050
>> Tai sąvoka
kurį mygtuką paspausti buvo.

311
00:15:28,050 --> 00:15:31,230
Bet kitaip, tai yra rūšiuoti
elgiasi panašus į renginį.

312
00:15:31,230 --> 00:15:34,460
Tai tiesiog tas pats kaip aš
būtų išreikšti tai JQuery.

313
00:15:34,460 --> 00:15:36,790
Vėlgi, tai tikriausiai
daug bauginanti.

314
00:15:36,790 --> 00:15:40,840
Tai nėra aišku, kaip
kažkas panašaus event.js,

315
00:15:40,840 --> 00:15:45,080
kuri gal šiek tiek daugiau
daugiažodis, bet šiek tiek mažiau

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

317
00:15:46,000 --> 00:15:51,460
>> Bet jei mes grįžti į mano naršyklėje
langas, jei aš pradedu clicking-- gerai,

318
00:15:51,460 --> 00:15:52,690
kad pasikeitė violetinė.

319
00:15:52,690 --> 00:15:54,450
Tai žalia naudojant string metodą.

320
00:15:54,450 --> 00:15:56,500
Tai apelsinų naudojant aptarnavimo įvykio.

321
00:15:56,500 --> 00:15:58,300
>> Tai raudona naudojant JQuery, tiesa?

322
00:15:58,300 --> 00:16:01,270
Jie visi elgiasi lygiai taip pat,.

323
00:16:01,270 --> 00:16:06,509
Jie tiesiog tai padaryti naudojant skirtingą
metodus siekiant išspręsti problemą.

324
00:16:06,509 --> 00:16:08,550
Yra daug daugiau
JQuery tada mes tikrai

325
00:16:08,550 --> 00:16:10,050
ketiname kalbėti apie šio vaizdo.

326
00:16:10,050 --> 00:16:15,410
Bet jei norite sužinoti daugiau, galite
eiti į JQuery rūšies dokumentus

327
00:16:15,410 --> 00:16:19,710
ir mokytis gana šiek tiek daugiau apie
Tai labai lanksti biblioteka, kuri

328
00:16:19,710 --> 00:16:22,550
yra puikus daro kliento pusėje
skriptų pavyzdžiui, ką mes darome

329
00:16:22,550 --> 00:16:26,240
manipuliuoti išvaizdą
ir jaustis mūsų internetiniame puslapyje

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

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

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

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