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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: În acest film, ne-am dorit
pentru a apela atenția separată

3
00:00:07,230 --> 00:00:09,110
la un foarte special,
element de JavaScript

4
00:00:09,110 --> 00:00:11,350
pe care le-ar putea găsi la îndemână
când începi

5
00:00:11,350 --> 00:00:15,750
pentru a lucra la manipularea pagini web și
schimbarea conținutul paginii web

6
00:00:15,750 --> 00:00:16,460
pe fuga.

7
00:00:16,460 --> 00:00:19,450
Și asta e noțiunea de
Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Deci, așa cum am văzut în videoclipul nostru pe
JavaScript, obiectele sunt foarte flexibile.

9
00:00:23,030 --> 00:00:24,750
>> Și acestea pot conține diverse domenii.

10
00:00:24,750 --> 00:00:28,075
Și, deși nu am merge într-o mulțime de
detaliu, aceste domenii sau proprietăți,

11
00:00:28,075 --> 00:00:30,200
care ne-ar mai probabil
le numim în mod corespunzător

12
00:00:30,200 --> 00:00:33,915
în contextul unui obiect, chiar
acele proprietăți pot fi alte obiecte.

13
00:00:33,915 --> 00:00:36,210
Și în interiorul acestor obiecte
poate fi alte obiecte.

14
00:00:36,210 --> 00:00:39,630
>> Aveți acest obiect foarte mare
cu o mulțime de alte obiecte

15
00:00:39,630 --> 00:00:43,550
interiorul ei, care un fel de
creează această idee de un copac mare.

16
00:00:43,550 --> 00:00:47,540
Acum, obiectul document este un
obiect foarte special în JavaScript

17
00:00:47,540 --> 00:00:52,580
care organizează întreaga web
Pagina în cadrul acestui tip de umbrelă

18
00:00:52,580 --> 00:00:53,470
a unui obiect.

19
00:00:53,470 --> 00:00:56,770
Și astfel în interiorul documentului
obiect sunt obiecte care prezintă

20
00:00:56,770 --> 00:00:59,630
cap și corp de pagina web.

21
00:00:59,630 --> 00:01:03,760
>> In interiorul acestea sunt alte
obiecte, etc., etc.,

22
00:01:03,760 --> 00:01:08,411
până intreaga pagina web a
a fost organizată în acest obiect mare.

23
00:01:08,411 --> 00:01:09,660
Care este sensul creșterii aici, nu?

24
00:01:09,660 --> 00:01:12,170
Ei bine, știm cum să lucreze
cu obiecte în JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Deci, dacă avem un obiect care
se referă la întreaga noastră pagină web, care

26
00:01:15,840 --> 00:01:19,590
înseamnă prin apelarea corectă
metode pentru a manipula acel obiect

27
00:01:19,590 --> 00:01:22,360
sau modificarea anumitor
de proprietățile sale, am

28
00:01:22,360 --> 00:01:25,500
poate modifica elementele
Pagina noastră programatic

29
00:01:25,500 --> 00:01:30,210
folosind JavaScript loc de a avea
la codul lucruri cu, să zicem, HTML.

30
00:01:30,210 --> 00:01:33,760
Deci, aici e un exemplu de
foarte simplu pagină web, nu?

31
00:01:33,760 --> 00:01:35,850
Are tag-uri HTML, un cap.

32
00:01:35,850 --> 00:01:37,979
>> In interiorul există un titlu, salut lume.

33
00:01:37,979 --> 00:01:38,770
Atunci am un corp.

34
00:01:38,770 --> 00:01:40,686
În interiorul acestui, am
trei lucruri diferite.

35
00:01:40,686 --> 00:01:44,170
Am un tag header h2,
un paragraf, și un link.

36
00:01:44,170 --> 00:01:45,920
Aceasta este o pagină web foarte simplu.

37
00:01:45,920 --> 00:01:48,590
>> Ei bine, ceea ce ar putea documentul
obiecții pentru acest arata ca?

38
00:01:48,590 --> 00:01:50,700
Ei bine, e un pic
infricosator poate la prima.

39
00:01:50,700 --> 00:01:52,510
Dar este într-adevăr doar un copac mare.

40
00:01:52,510 --> 00:01:54,890
Și chiar la rădăcina este documentul.

41
00:01:54,890 --> 00:02:00,030
>> In interiorul documentului este alta
obiect referindu-se la HTML de pagina mea.

42
00:02:00,030 --> 00:02:02,660
Și HTML de pagina mea este toate acestea.

43
00:02:02,660 --> 00:02:06,900
Și apoi în interiorul HTML
obiect, am un obiect cap,

44
00:02:06,900 --> 00:02:09,000
care se referă la tot ceea ce există.

45
00:02:09,000 --> 00:02:11,009
>> Și în interiorul acolo,
Am un obiect titlu.

46
00:02:11,009 --> 00:02:15,620
Și în interiorul acolo, am un alt
obiecta că e doar salut lume.

47
00:02:15,620 --> 00:02:18,020
Am putea avea corpul meu
reprezentate ca aceasta.

48
00:02:18,020 --> 00:02:22,850
>> În interiorul corpului meu, am un H2
obiect și un obiect p pentru alineatul

49
00:02:22,850 --> 00:02:25,270
și un un obiect pentru un link.

50
00:02:25,270 --> 00:02:29,660
Și așa mai departe acest întreg ierarhie
poate fi reprezentat ca un copac mare

51
00:02:29,660 --> 00:02:31,990
cu o mulțime de pic mai mic
lucrurile care ies din ea.

52
00:02:31,990 --> 00:02:33,740
Acum, desigur, atunci când
suntem de programare, am

53
00:02:33,740 --> 00:02:35,560
Nu cred că de lucruri cum ar fi un copac mare.

54
00:02:35,560 --> 00:02:37,980
Vrem să vedem real
lucruri legate de cod.

55
00:02:37,980 --> 00:02:40,790
>> Și din fericire, putem
utilizați instrumentele noastre de dezvoltare

56
00:02:40,790 --> 00:02:46,080
pentru a lua de fapt, o privire la
obiect acestui site documentului.

57
00:02:46,080 --> 00:02:48,150
Și hai să facem asta.

58
00:02:48,150 --> 00:02:49,580
Așa că am deschis o filă browser.

59
00:02:49,580 --> 00:02:51,540
>> Și am deschis Instrumente de dezvoltare.

60
00:02:51,540 --> 00:02:54,460
Și în videoclipul meu pe JavaScript, am
menționat că consola nu este

61
00:02:54,460 --> 00:02:56,770
numai în cazul în care într-un loc
ne imprima informații,

62
00:02:56,770 --> 00:02:59,560
este, de asemenea, un loc unde
putem informații de intrare.

63
00:02:59,560 --> 00:03:01,380
În acest context, ce
Am de gând să spun este

64
00:03:01,380 --> 00:03:05,720
Aș dori să mă întorc
obiectele de documente,

65
00:03:05,720 --> 00:03:07,502
așa că am putea începe să aibă o privire la ea.

66
00:03:07,502 --> 00:03:08,460
Deci, cum s-ar putea să fac acest lucru?

67
00:03:08,460 --> 00:03:10,740
Ei bine, dacă vreau să
organizeze într-adevăr frumos,

68
00:03:10,740 --> 00:03:16,317
Am de gând să spun console.dir, D-I-R.
Acum, am folosi console.log la doar print

69
00:03:16,317 --> 00:03:17,400
ceva foarte simplu.

70
00:03:17,400 --> 00:03:20,450
Dar dacă vreau să organizeze acest
ierarhic ca un obiect,

71
00:03:20,450 --> 00:03:23,800
Vreau un fel de structurat
ca o structura de directoare.

72
00:03:23,800 --> 00:03:27,400
>> Așa că vreau să console.dir documentului.

73
00:03:27,400 --> 00:03:28,430
Am de gând să lovi Enter.

74
00:03:28,430 --> 00:03:32,350
Și chiar sub ea acum,
și voi mări aici,

75
00:03:32,350 --> 00:03:36,000
Am acest document de răspuns
cu o săgeată pic de lângă ea.

76
00:03:36,000 --> 00:03:39,470
Acum, când am deschis această săgeată,
acolo va fi o mulțime de lucruri.

77
00:03:39,470 --> 00:03:42,560
>> Dar am de gând să ignore o mulțime
de ea și doar un fel de focalizare

78
00:03:42,560 --> 00:03:46,250
pe cea mai importantă parte, asa ca am
poate începe pentru a naviga acest document.

79
00:03:46,250 --> 00:03:50,125
Există o mult mai mult pentru DOM decât
doar mamă noduri și nodurile copil.

80
00:03:50,125 --> 00:03:51,500
Există o mulțime de lucruri auxiliare.

81
00:03:51,500 --> 00:03:52,280
>> Deci, am de gând să deschidă asta.

82
00:03:52,280 --> 00:03:54,610
Și există o mulțime
de lucruri care apare.

83
00:03:54,610 --> 00:03:59,000
Dar mă interesează este
aici, noduri copil.

84
00:03:59,000 --> 00:04:00,410
Să deschidem asta.

85
00:04:00,410 --> 00:04:03,810
>> In interiorul acolo văd
ceva familiar, HTML.

86
00:04:03,810 --> 00:04:07,670
Deci, în interiorul documentul nostru
un nivel jos, HTML.

87
00:04:07,670 --> 00:04:08,550
Am deschis asta.

88
00:04:08,550 --> 00:04:10,380
Ce ne așteptăm?

89
00:04:10,380 --> 00:04:13,760
>> Dacă vă amintiți de la diagrama noastră,
ce ar trebui să găsim în interiorul HTML?

90
00:04:13,760 --> 00:04:17,275
Care două noduri sunt sub o în copac?

91
00:04:17,275 --> 00:04:17,899
Să aflăm.

92
00:04:17,899 --> 00:04:18,940
Ne deschidem HTML.

93
00:04:18,940 --> 00:04:22,079
Mergem până la nodurile sale copil.

94
00:04:22,079 --> 00:04:23,440
>> Pop care se deschid.

95
00:04:23,440 --> 00:04:25,990
Există cap și corp.

96
00:04:25,990 --> 00:04:28,540
Și putem deschide capul.

97
00:04:28,540 --> 00:04:30,460
Du-te la nodurile sale copil.

98
00:04:30,460 --> 00:04:31,460
Ei bine, nu e titlul.

99
00:04:31,460 --> 00:04:33,293
>> Și am putea merge pe și
pe așa pentru totdeauna.

100
00:04:33,293 --> 00:04:34,770
Am putea face acest lucru cu corpul, de asemenea.

101
00:04:34,770 --> 00:04:40,090
Dar există o modalitate pentru noi de a privi
documentul organizat ca un obiect mare.

102
00:04:40,090 --> 00:04:42,610
Și dacă ne uităm la o mare
obiect care pare mult

103
00:04:42,610 --> 00:04:47,480
ca cod, ceea ce înseamnă că putem începe
pentru a manipula acest obiect mare, folosind

104
00:04:47,480 --> 00:04:51,220
cod pentru a schimba ceea ce ne
site-ul arata si se simte ca.

105
00:04:51,220 --> 00:04:54,920
>> Așa că e un instrument destul de puternic
avem la dispoziție acum.

106
00:04:54,920 --> 00:04:57,360
Deci, ca doar am văzut, The
obiect Document sine

107
00:04:57,360 --> 00:05:01,392
și toate obiectele în interiorul vehiculului
au proprietăți și metode, doar

108
00:05:01,392 --> 00:05:04,100
la fel ca orice alt obiect care le-am
fost de lucru cu JavaScript în.

109
00:05:04,100 --> 00:05:08,370
Dar putem folosi acele proprietăți și
folosi aceste metode pentru a sorta de drill down

110
00:05:08,370 --> 00:05:10,900
din documentul mare și de a lua
mici și mai mici și mai mici,

111
00:05:10,900 --> 00:05:13,360
boabe fine și mai fine
de detaliu, până când vom

112
00:05:13,360 --> 00:05:17,510
ajunge la o piesă foarte specific de nostru
pagină web pe care dorim să se schimbe.

113
00:05:17,510 --> 00:05:22,700
>> Și când ne-am actualizat proprietățile
Document Object sau suna aceste metode,

114
00:05:22,700 --> 00:05:24,450
lucruri s-ar putea întâmpla pe pagina noastră web.

115
00:05:24,450 --> 00:05:28,420
Și nu trebuie să facem nici o răcoritoare
ca aceste modificări să intre în vigoare.

116
00:05:28,420 --> 00:05:33,160
>> Și asta e o abilitate destul de cool pentru a
au atunci când lucrăm cu codul.

117
00:05:33,160 --> 00:05:37,185
Deci, ce sunt unele dintre aceste proprietăți
care fac parte dintr-un obiect document de?

118
00:05:37,185 --> 00:05:40,100
Ei bine, probabil ai văzut o
câteva dintre ele foarte repede

119
00:05:40,100 --> 00:05:42,700
așa cum am fost zipping
prin documentul gigant

120
00:05:42,700 --> 00:05:45,150
obiect ne-am văzut în browser-ul web.

121
00:05:45,150 --> 00:05:48,420
>> Dar o pereche de aceste proprietăți
ar putea fi lucruri, cum ar fi HTML interior.

122
00:05:48,420 --> 00:05:52,950
Și s-ar putea aminti chiar mi-
folosind acest lucru în video JavaScript

123
00:05:52,950 --> 00:05:54,950
la sfârșitul atunci când am
vorbea despre evenimente.

124
00:05:54,950 --> 00:05:56,125
Ce a fost asta HTML interior?

125
00:05:56,125 --> 00:05:59,030
Ei bine, e doar ceea ce este
între etichetele.

126
00:05:59,030 --> 00:06:01,590
>> Și astfel HTML interior,
de exemplu, a titlului

127
00:06:01,590 --> 00:06:05,390
tag-ul, dacă am fi păstrat merge în
că exemplu în urmă o clipă,

128
00:06:05,390 --> 00:06:08,020
ar fi fost Salut lume.

129
00:06:08,020 --> 00:06:10,140
Acesta a fost titlul paginii noastre.

130
00:06:10,140 --> 00:06:12,370
Alte proprietăți
include numele de nod, care

131
00:06:12,370 --> 00:06:15,810
este numele unui HTML
Element cum ar fi titlul.

132
00:06:15,810 --> 00:06:19,100
ID, care este ID
atribut al unui element HTML.

133
00:06:19,100 --> 00:06:23,790
>> Amintiti-va ca putem indica special
elemente specifice ale HTML noastre

134
00:06:23,790 --> 00:06:27,510
cu un atribut de identitate, care de obicei
vine la îndemână, în contextul CSS,

135
00:06:27,510 --> 00:06:29,000
în mod special.

136
00:06:29,000 --> 00:06:33,217
Nod părinte, care este o trimitere la
ceea ce este doar în sus deasupra mea în DOM.

137
00:06:33,217 --> 00:06:35,800
Și noduri copil, care este un
referire la ceea ce este jos mine.

138
00:06:35,800 --> 00:06:37,950
Și am văzut o mulțime de care
doar în căutarea prin.

139
00:06:37,950 --> 00:06:42,970
Noduri copil, asta e cum am ajuns
mici și mai mici în copac.

140
00:06:42,970 --> 00:06:46,590
>> Atribute, asta e doar o matrice
de atribute ale elementului HTML.

141
00:06:46,590 --> 00:06:50,270
Deci un exemplu de atribute ar putea
fie în cazul în care aveți un tag de imagine,

142
00:06:50,270 --> 00:06:54,090
are, de obicei, un atribut sursă,
poate o înălțime și un atribut lățime.

143
00:06:54,090 --> 00:06:57,120
Și pentru ca ar fi doar o serie
de toate atributele asociate

144
00:06:57,120 --> 00:06:59,300
cu acest element HTML.

145
00:06:59,300 --> 00:07:04,140
>> Stilul este un alt unul care
nu reprezintă CSS

146
00:07:04,140 --> 00:07:06,050
Coafura de un anumit element.

147
00:07:06,050 --> 00:07:08,310
Și mai târziu în acest
videoclip, vom special

148
00:07:08,310 --> 00:07:14,592
Stilul de pârghie pentru a face un cuplu
de modificările aduse site-ului nostru.

149
00:07:14,592 --> 00:07:15,800
Deci, acestea sunt unele proprietăți.

150
00:07:15,800 --> 00:07:17,591
>> Și acolo sunt, de asemenea, unele
Metodele pe care le putem

151
00:07:17,591 --> 00:07:22,450
utilizați pentru a, de asemenea, mai rapid, poate izola
elemente ale obiectului Document.

152
00:07:22,450 --> 00:07:26,730
Poate, cel mai versatil
dintre acestea fiind getElementById.

153
00:07:26,730 --> 00:07:31,190
Așa că s-ar putea spune ceva de genul, pentru că
amintiți-vă că este o metodă de a Documentului

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

155
00:07:34,880 --> 00:07:39,820
>> Și în interiorul acestor paranteze, specificați
un element HTML cu un anumit ID

156
00:07:39,820 --> 00:07:42,330
atribut care le-am anterior
set, si voi imediat

157
00:07:42,330 --> 00:07:46,685
du-te dreptul de a acestui element
a site-ului global.

158
00:07:46,685 --> 00:07:49,310
Așa că nu am pentru a detalia poate
jos prin fiecare singur strat.

159
00:07:49,310 --> 00:07:52,841
Eu pot folosi doar această metodă pentru a găsi,
ca un fel de rachetă caută căldură,

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

161
00:07:53,340 --> 00:07:56,300
Se merge doar și găsește
exact ceea ce cauta.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName este
foarte similare în spirit.

163
00:07:59,290 --> 00:08:02,500
Poate că acest lucru s-ar găsi toate
tag-uri bold sau toate p etichetele

164
00:08:02,500 --> 00:08:05,920
si da-mi o serie de tot
pe care am putea lucra apoi cu.

165
00:08:05,920 --> 00:08:12,080
appendChild adaugă ceva
un nivel jos în copac.

166
00:08:12,080 --> 00:08:16,440
>> Așa că am putea adăuga un întreg nou
element de un nivel mai jos.

167
00:08:16,440 --> 00:08:19,700
Sau pot elimina un element care este
un nivel mai jos, precum și dacă vreau

168
00:08:19,700 --> 00:08:22,870
pentru a șterge ceva de pe pagina mea de web.

169
00:08:22,870 --> 00:08:28,480
Acum, o notă de codificare rapidă și o rapidă
dureri de cap de economisire notă, sperăm.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- d este minuscule.

171
00:08:31,670 --> 00:08:36,950
Eu nu pot să vă spun de câte ori am
second-hand getElementById și capitalizată

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

173
00:08:38,336 --> 00:08:39,460
Pentru că e foarte comun.

174
00:08:39,460 --> 00:08:42,990
Dacă vom scrie ID-ul cuvânt, e
De obicei capitalul I de capital D.

175
00:08:42,990 --> 00:08:44,240
Și codul meu pur si simplu nu funcționează.

176
00:08:44,240 --> 00:08:45,630
Și eu nu pot da seama de ce.

177
00:08:45,630 --> 00:08:49,490
Aceasta este o foarte, foarte, foarte
bug comun ca toata lumea face,

178
00:08:49,490 --> 00:08:51,890
chiar și experții care au
făcut acest lucru pentru totdeauna.

179
00:08:51,890 --> 00:08:55,410
Deci, doar să fie conștienți, getElementById,
că d este minuscule.

180
00:08:55,410 --> 00:09:00,080
Și sperăm, că vă economisește mai multe
minute cel de durere de inimă la.

181
00:09:00,080 --> 00:09:02,204
>> Deci, ce înseamnă toate acestea ne spun?

182
00:09:02,204 --> 00:09:03,120
Avem aceste metode.

183
00:09:03,120 --> 00:09:04,161
Avem aceste proprietăți.

184
00:09:04,161 --> 00:09:06,610
Acum, dacă pornim de la
documente, documentul.

185
00:09:06,610 --> 00:09:10,220
orice, putem obține acum la orice
singură bucată de site-ul nostru

186
00:09:10,220 --> 00:09:14,870
pe care dorim să utilizați JavaScript
doar prin apelarea aceste metode

187
00:09:14,870 --> 00:09:19,940
și valorificarea proprietăților
că vom găsi în diferite locații.

188
00:09:19,940 --> 00:09:24,890
>> Acest lucru se poate obține prolix, acest
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
poate avea un nume de etichetă lung,
Poate faci mai multe apeluri mai târziu.

190
00:09:28,560 --> 00:09:31,230
Lucrurile pot deveni un pic prolix.

191
00:09:31,230 --> 00:09:34,480
Și programatori, cum ai
probabil văzut în multe dintre aceste filme,

192
00:09:34,480 --> 00:09:36,600
nu ne plac lucrurile prolix.

193
00:09:36,600 --> 00:09:38,520
>> Ne place să fie în măsură să facă lucruri rapid.

194
00:09:38,520 --> 00:09:42,640
Deci, am dori o mai
mod concis de a spune ceva.

195
00:09:42,640 --> 00:09:46,270
Deci, acest tip de duce la
noțiune de ceva numit jQuery.

196
00:09:46,270 --> 00:09:49,170
Acum, jQuery nu este JavaScript.

197
00:09:49,170 --> 00:09:50,350
Nu este parte din JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Este o bibliotecă care a fost scris
de niște programatori JavaScript

199
00:09:54,790 --> 00:09:57,060
acum aproximativ 10 de ani.

200
00:09:57,060 --> 00:10:01,300
Iar scopul său este de a simplifica această ceea ce este
numit scripting partea de client, care

201
00:10:01,300 --> 00:10:04,310
este de fapt ceea ce am fost doar
vorbesc despre cu manipulări DOM.

202
00:10:04,310 --> 00:10:11,090
Și așa, dacă am vrut să modifice
culoare de fundal de pagina mea de web, poate

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

204
00:10:11,980 --> 00:10:15,325
>> Aici, am aparent obtinerea
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Și vreau să setați culoarea de fundal.

206
00:10:16,950 --> 00:10:20,720
Dacă am doar folosind pur JavaScript
folosind Document Object Model,

207
00:10:20,720 --> 00:10:23,990
care este o mulțime de lucruri, nu?
document.getElementById

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

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

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

211
00:10:28,050 --> 00:10:30,110
Asta a fost o mulțime de spus.

212
00:10:30,110 --> 00:10:31,720
Este o mulțime de tip, de asemenea.

213
00:10:31,720 --> 00:10:35,760
Și astfel în jQuery, putem spune, poate,
acest lucru un pic mai mult concis.

214
00:10:35,760 --> 00:10:39,350
Compromisul fiind că e poate un pic
pic mai mult criptic dintr-o dată,

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

216
00:10:39,850 --> 00:10:43,580
>> Cel puțin pe termen lung este un pic mai mult
explicative la ceea ce facem.

217
00:10:43,580 --> 00:10:49,947
Acest semn dolar, paranteze,
singur citat, hash, colorDiv, nu?

218
00:10:49,947 --> 00:10:50,780
Ce înseamnă asta?

219
00:10:50,780 --> 00:10:53,640
Ei bine, asta e de fapt doar
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Dar e un fel de stenografie această
mod de a face aceasta folosind jQuery.

221
00:10:58,700 --> 00:11:01,380
Să ia doar o privire acum
la o pereche de moduri diferite

222
00:11:01,380 --> 00:11:04,520
I s-ar putea de fapt că
utiliza acest Document Object

223
00:11:04,520 --> 00:11:06,807
Model pentru a manipula piese de site-ul meu.

224
00:11:06,807 --> 00:11:09,140
În special, vom
să fie de lucru pe manipularea

225
00:11:09,140 --> 00:11:14,090
culoarea unui anumit
Div, colorDiv, pe o pagină web.

226
00:11:14,090 --> 00:11:15,299
Deci, haideți să aruncăm o privire la asta.

227
00:11:15,299 --> 00:11:15,798
In regula.

228
00:11:15,798 --> 00:11:16,700
Deci, eu sunt pe o pagină.

229
00:11:16,700 --> 00:11:20,750
Se numește test.html atunci când descărcați
această opțiune dacă doriți să se joace cu acest lucru.

230
00:11:20,750 --> 00:11:24,730
Și am o grămadă de
butoanele de pe această pagină.

231
00:11:24,730 --> 00:11:27,730
Iar eu spun funcții individuale
pentru culoarea de fundal, violet, verde,

232
00:11:27,730 --> 00:11:31,330
portocaliu, roșu, albastru, o singură funcție
pentru culoarea de fundal, tratare a evenimentului

233
00:11:31,330 --> 00:11:34,360
pentru culoarea de fundal, și folosind jQuery.

234
00:11:34,360 --> 00:11:38,147
Ce vorbesc despre
când fac acest lucru?

235
00:11:38,147 --> 00:11:39,230
Deci am văzut butoanele.

236
00:11:39,230 --> 00:11:41,521
Acum, haideți să aruncăm o privire la
o parte din codul sursă aici.

237
00:11:41,521 --> 00:11:44,770
Vom începe cu test.html.

238
00:11:44,770 --> 00:11:48,100
Funcțiile Deci individuale pentru fundal
culoarea este ceea ce am scris aici.

239
00:11:48,100 --> 00:11:49,350
Permiteți-mi să derulați un pic.

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

241
00:11:56,170 --> 00:11:58,820
>> Și veți observa că am
au definit aceste butoane

242
00:11:58,820 --> 00:12:03,990
să spun, atunci când acest buton este apasat,
apela funcția transforma violet.

243
00:12:03,990 --> 00:12:06,670
Când acest buton este să faceți clic, mai degrabă,
apela funcția transforma verde,

244
00:12:06,670 --> 00:12:08,710
rândul său, portocaliu, roșu rândul său, rândul său, albastru.

245
00:12:08,710 --> 00:12:11,880
Probabil puteți ghici că această
nu este, probabil, cel mai bun design

246
00:12:11,880 --> 00:12:12,460
sens, nu?

247
00:12:12,460 --> 00:12:16,490
>> Ar fi frumos dacă aș putea
au o abordare mai generală.

248
00:12:16,490 --> 00:12:19,570
Ei bine, în primul rând vom arunca o privire
la ce cele cinci funcții sunt

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

250
00:12:24,400 --> 00:12:27,250
verde, portocaliu, rosu,
și albastru, respectiv.

251
00:12:27,250 --> 00:12:30,930
Deci, nu deosebit de cel mai bun design.

252
00:12:30,930 --> 00:12:33,390
>> Următorul set de butoane
Am este ce am scris

253
00:12:33,390 --> 00:12:36,380
o singură funcție numită
schimba culoarea care aparent

254
00:12:36,380 --> 00:12:38,960
acceptă un șir ca argument.

255
00:12:38,960 --> 00:12:40,290
Deci, acest lucru este un pic mai bine.

256
00:12:40,290 --> 00:12:43,840
Violet, verde, portocaliu, rosu,
albastru este acum un argument.

257
00:12:43,840 --> 00:12:46,230
Așa că am scris o mai general
caz funcția de JavaScript,

258
00:12:46,230 --> 00:12:47,771
care ar putea arata ceva de genul asta.

259
00:12:47,771 --> 00:12:48,680
Am trece în.

260
00:12:48,680 --> 00:12:52,090
Aceasta culoare schimbare funcție este
așteaptă un argument numit culoare.

261
00:12:52,090 --> 00:12:54,970
Și vreau să spun stabilit
culoarea de fundal pentru culoare.

262
00:12:54,970 --> 00:12:58,390
Reprezintă așa că aici ce am ajuns aici.

263
00:12:58,390 --> 00:12:59,770
Așa că e un pic mai bine.

264
00:12:59,770 --> 00:13:02,740
>> Dar s-ar putea fi în măsură să
face mai mult decât atât.

265
00:13:02,740 --> 00:13:06,140
Dacă vom merge în jos pentru a lua o privire
la situația tratare a evenimentului,

266
00:13:06,140 --> 00:13:07,860
acum toate aceste apeluri arata la fel.

267
00:13:07,860 --> 00:13:10,340
Dacă vă amintiți de nostru
discuție pe Stivuitoare eveniment,

268
00:13:10,340 --> 00:13:15,770
Pot obține informații cu privire la care a
aceste butoane a fost dat click și de a folosi asta.

269
00:13:15,770 --> 00:13:19,560
>> Și astfel în event.JavaScript, am
eveniment scris schimba culoarea, care

270
00:13:19,560 --> 00:13:21,110
cifrele din buton, care a fost apasat.

271
00:13:21,110 --> 00:13:23,250
Asta e linia de obiect de declanșare.

272
00:13:23,250 --> 00:13:25,240
Și apoi aici, ea devine foarte prolix.

273
00:13:25,240 --> 00:13:27,420
Dar ceea ce fac este că sunt
setarea fundal

274
00:13:27,420 --> 00:13:30,340
culoare pentru a triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Asta e textul
între etichetele butonul.

276
00:13:34,170 --> 00:13:36,500
>> Și atunci am avea aparent
să-l setat la litere mici.

277
00:13:36,500 --> 00:13:40,780
Și asta e cum pot converti un întreg
șir de litere mici în JavaScript folosind

278
00:13:40,780 --> 00:13:42,940
această metodă de litere mici.

279
00:13:42,940 --> 00:13:46,570
Pentru că atunci când am stabilit o culoare,
ca eu sunt încercarea de a face aici,

280
00:13:46,570 --> 00:13:48,260
de culoare trebuie să fie toate cu litere mici.

281
00:13:48,260 --> 00:13:50,920
>> Dar pe butonul pe care am avut-o,
dacă ne aruncăm o privire,

282
00:13:50,920 --> 00:13:55,890
observați că textul este
scris cu un P capital pentru violet.

283
00:13:55,890 --> 00:13:59,140
Și apoi la foarte
fund aici, aparent

284
00:13:59,140 --> 00:14:02,630
încercați și face acest lucru cu ajutorul jQuery, de asemenea.

285
00:14:02,630 --> 00:14:06,000
Și în acest caz, nu sunt de fapt
apelarea o funcție, la toate.

286
00:14:06,000 --> 00:14:11,430
Tocmai am spus că eu sunt clasa
utilizând în acest buton este un buton JQ.

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

288
00:14:12,360 --> 00:14:14,950
>> Deci, cum se știe jQuery ce fac?

289
00:14:14,950 --> 00:14:18,740
Ei bine, acesta este unul dintre avantajele
reduce dezavantajele jQuery.

290
00:14:18,740 --> 00:14:21,560
Se poate să-mi permiteți să fac lucruri
foarte concis, dar poate nu

291
00:14:21,560 --> 00:14:22,570
ca intuitiv.

292
00:14:22,570 --> 00:14:25,570
Poate cei alte trei fac o
bit mai mult sens ceea ce fac.

293
00:14:25,570 --> 00:14:29,010
Aici, însă, ce se întâmplă?

294
00:14:29,010 --> 00:14:31,940
>> Aparent, creând
o funcție anonim

295
00:14:31,940 --> 00:14:36,790
că loturile de fiecare dată când documentul meu
este gata, așa document.ready,

296
00:14:36,790 --> 00:14:38,760
o funcție se va întâmpla.

297
00:14:38,760 --> 00:14:40,490
Practic, atunci când este gata un document?

298
00:14:40,490 --> 00:14:42,310
E atunci când pagina mea sa incarcat.

299
00:14:42,310 --> 00:14:46,540
>> Deci, de îndată ce pagina mea a încărcată,
în urma funcție este întotdeauna gata.

300
00:14:46,540 --> 00:14:54,310
Se spune, în cazul în care un obiect de tip jQButton,
sau în cazul în care clasa jQButton a fost apasat,

301
00:14:54,310 --> 00:14:55,570
executa această funcție.

302
00:14:55,570 --> 00:14:59,360
Deci, aici sunt două funcții anonime,
unul definit în interiorul celuilalt.

303
00:14:59,360 --> 00:15:03,930
>> Deci întreaga mea context
aici până în prezent este pagina mea

304
00:15:03,930 --> 00:15:06,520
atunci când se încarcă o numește această funcție.

305
00:15:06,520 --> 00:15:09,740
Și această funcție este în așteptare
pentru un buton pentru a face clic.

306
00:15:09,740 --> 00:15:14,490
Și când un buton este apasat, JQ
Butonul specific este apasat,

307
00:15:14,490 --> 00:15:17,150
se numește acest alt
funcție, care va

308
00:15:17,150 --> 00:15:21,250
pentru a seta fundal
culoarea colorDiv să fie

309
00:15:21,250 --> 00:15:25,990
orice text este în între etichetele.

310
00:15:25,990 --> 00:15:28,050
>> Aceasta este noțiunea de
Butonul care a fost apasat.

311
00:15:28,050 --> 00:15:31,230
Dar altfel, aceasta este un fel de
comportă similar cu un eveniment.

312
00:15:31,230 --> 00:15:34,460
Este același fel am
ar exprima acest lucru în jQuery.

313
00:15:34,460 --> 00:15:36,790
Din nou, este probabil un
mult mai mult de intimidare.

314
00:15:36,790 --> 00:15:40,840
Nu este la fel de clar ca
ceva de genul event.js,

315
00:15:40,840 --> 00:15:45,080
care este, poate, un pic mai mult
verbose, dar un pic mai puțin

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

317
00:15:46,000 --> 00:15:51,460
>> Dar dacă ne-am pop înapoi peste la browser-ul meu
fereastră, dacă aș începe clicking-- bine,

318
00:15:51,460 --> 00:15:52,690
care a schimbat la purpuriu.

319
00:15:52,690 --> 00:15:54,450
Aceasta este verde folosind metoda șir.

320
00:15:54,450 --> 00:15:56,500
Aceasta este de culoare portocalie, folosind de tratare a evenimentelor.

321
00:15:56,500 --> 00:15:58,300
>> Acest lucru este de culoare roșie, folosind jQuery, nu?

322
00:15:58,300 --> 00:16:01,270
Toți se comportă exact la fel.

323
00:16:01,270 --> 00:16:06,509
Ei doar fac folosind diferite
abordări pentru a rezolva problema.

324
00:16:06,509 --> 00:16:08,550
Există o mulțime mai mult pentru a
jQuery atunci suntem cu siguranță

325
00:16:08,550 --> 00:16:10,050
vorbi despre în acest film.

326
00:16:10,050 --> 00:16:15,410
Dar, dacă doriți să aflați mai multe, puteți
du-te la fel jQuery documentației

327
00:16:15,410 --> 00:16:19,710
și să învețe destul de un pic mai mult despre
această bibliotecă foarte flexibil, care

328
00:16:19,710 --> 00:16:22,550
este mare pentru a face partea de client
scripting cum ar fi ceea ce făceam

329
00:16:22,550 --> 00:16:26,240
pentru a manipula aspectul
si sa se simta de site-ul nostru

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

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

332
00:16:29,650 --> 00:16:31,930
Acest lucru este CS50.

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