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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: En aquest vídeo, volíem
de cridar a l'atenció separada

3
00:00:07,230 --> 00:00:09,110
a una molt particular
element de JavaScript

4
00:00:09,110 --> 00:00:11,350
que li pot ser útil
quan estàs començant

5
00:00:11,350 --> 00:00:15,750
per treballar en la manipulació de les pàgines web i
canviar el contingut de la seva pàgina web

6
00:00:15,750 --> 00:00:16,460
sobre la marxa.

7
00:00:16,460 --> 00:00:19,450
I aquesta és la noció de
el Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Així com vam veure en el nostre vídeo en
JavaScript, objectes són molt flexibles.

9
00:00:23,030 --> 00:00:24,750
>> I poden contenir diversos camps.

10
00:00:24,750 --> 00:00:28,075
I encara que no vam anar a una gran quantitat de
detall, aquests camps o propietats,

11
00:00:28,075 --> 00:00:30,200
que faria probablement més
apropiadament cridar-los

12
00:00:30,200 --> 00:00:33,915
en el context d'un objecte, fins i tot
aquestes propietats poden ser altres objectes.

13
00:00:33,915 --> 00:00:36,210
I dins d'aquests objectes
poden ser altres objectes.

14
00:00:36,210 --> 00:00:39,630
>> Vostè té aquest gran objecte
amb una gran quantitat d'altres objectes

15
00:00:39,630 --> 00:00:43,550
dins d'ella, que tipus de
crea aquesta idea d'un gran arbre.

16
00:00:43,550 --> 00:00:47,540
Ara bé, l'objecte de document és un
objecte molt especial en JavaScript

17
00:00:47,540 --> 00:00:52,580
que organitza tota la web
pàgina sota aquest tipus de paraigües

18
00:00:52,580 --> 00:00:53,470
d'un objecte.

19
00:00:53,470 --> 00:00:56,770
I així, a l'interior del document
objectes són objectes que presenten

20
00:00:56,770 --> 00:00:59,630
el cap i el cos de la seva pàgina web.

21
00:00:59,630 --> 00:01:03,760
>> A l'interior d'aquests són una altra
objectes, etcètera, etcètera,

22
00:01:03,760 --> 00:01:08,411
fins que la seva pàgina web té tota
ha organitzat en aquesta gran objecte.

23
00:01:08,411 --> 00:01:09,660
Quin és el costat bo, oi?

24
00:01:09,660 --> 00:01:12,170
Bé, sabem com treballar
amb objectes en JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Així que si tenim un objecte que
es refereix a la nostra pàgina web completa, que

26
00:01:15,840 --> 00:01:19,590
significa trucant a la correcta
mètodes per manipular aquest objecte

27
00:01:19,590 --> 00:01:22,360
o modificar certa
de les seves propietats, es

28
00:01:22,360 --> 00:01:25,500
pot canviar els elements de
la nostra pàgina de programació

29
00:01:25,500 --> 00:01:30,210
utilitzant JavaScript en lloc de tenir
per codificar les coses amb, per exemple, HTML.

30
00:01:30,210 --> 00:01:33,760
Així que aquí està un exemple d'un
molt simple pàgina web, no?

31
00:01:33,760 --> 00:01:35,850
Té etiquetes HTML, un cap.

32
00:01:35,850 --> 00:01:37,979
>> Dins d'allà és un títol, hola món.

33
00:01:37,979 --> 00:01:38,770
Llavors tinc un cos.

34
00:01:38,770 --> 00:01:40,686
Dins d'això, no tinc
tres coses diferents.

35
00:01:40,686 --> 00:01:44,170
Tinc una etiqueta de capçalera h2,
un paràgraf i un enllaç.

36
00:01:44,170 --> 00:01:45,920
Aquesta és una pàgina web molt senzilla.

37
00:01:45,920 --> 00:01:48,590
>> Bé, podria el document
objecte d'aquest sembla?

38
00:01:48,590 --> 00:01:50,700
Bé, és una mica
por potser al principi.

39
00:01:50,700 --> 00:01:52,510
Però no deixa de ser un gran arbre.

40
00:01:52,510 --> 00:01:54,890
I en l'arrel mateixa de la mateixa és document.

41
00:01:54,890 --> 00:02:00,030
>> Dins el document és una altra
objecte en referència a l'HTML de la meva pàgina.

42
00:02:00,030 --> 00:02:02,660
I el codi HTML de la meva pàgina és tot això.

43
00:02:02,660 --> 00:02:06,900
I després dins de l'HTML
objecte, tinc un objecte del cap,

44
00:02:06,900 --> 00:02:09,000
que es refereix a tot el que hi ha.

45
00:02:09,000 --> 00:02:11,009
>> I dins d'allà,
Tinc un objecte de títol.

46
00:02:11,009 --> 00:02:15,620
I dins d'aquí, tinc una altra
objectar que és just hola món.

47
00:02:15,620 --> 00:02:18,020
Jo podria tenir el meu cos
representat com aquest.

48
00:02:18,020 --> 00:02:22,850
>> A l'interior del meu cos, tinc una h2
objecte i un objecte de p per al paràgraf

49
00:02:22,850 --> 00:02:25,270
i un objecte per a un enllaç.

50
00:02:25,270 --> 00:02:29,660
I pel que aquest tota jerarquia
es pot representar com un arbre gran

51
00:02:29,660 --> 00:02:31,990
amb un munt de petits poc
coses que surten.

52
00:02:31,990 --> 00:02:33,740
Bé, és clar, quan
estem programant, ens

53
00:02:33,740 --> 00:02:35,560
no pensar en coses com un gran arbre.

54
00:02:35,560 --> 00:02:37,980
Volem veure real
codi de coses relacionades.

55
00:02:37,980 --> 00:02:40,790
>> I, afortunadament, podem
utilitzar les nostres eines de desenvolupament

56
00:02:40,790 --> 00:02:46,080
realment prendre un cop d'ull a
objecte de document d'aquest lloc web.

57
00:02:46,080 --> 00:02:48,150
I farem això.

58
00:02:48,150 --> 00:02:49,580
Així que he obert una pestanya del navegador.

59
00:02:49,580 --> 00:02:51,540
>> I he obert Eines de Desenvolupament.

60
00:02:51,540 --> 00:02:54,460
I en el meu vídeo en JavaScript, que
esmentar que la consola no és

61
00:02:54,460 --> 00:02:56,770
Només en algun lloc on
imprimim informació,

62
00:02:56,770 --> 00:02:59,560
és també un lloc on
podem introduir informació.

63
00:02:59,560 --> 00:03:01,380
En aquest context, el
Vaig a dir és

64
00:03:01,380 --> 00:03:05,720
M'agradaria tornar
els objectes de document,

65
00:03:05,720 --> 00:03:07,502
perquè pugui començar a tenir una mirada en ella.

66
00:03:07,502 --> 00:03:08,460
Llavors, com podria jo fer això?

67
00:03:08,460 --> 00:03:10,740
Bé, si vull
organitzar-la molt bé,

68
00:03:10,740 --> 00:03:16,317
Vaig a dir console.dir, D-I-R.
Ara, jo faig servir console.log per imprimir només

69
00:03:16,317 --> 00:03:17,400
una cosa molt simple.

70
00:03:17,400 --> 00:03:20,450
Però si vull organitzar aquest
jeràrquicament com un objecte,

71
00:03:20,450 --> 00:03:23,800
Vull que tipus d'estructura
com una estructura de directoris.

72
00:03:23,800 --> 00:03:27,400
>> Així que vull console.dir document.

73
00:03:27,400 --> 00:03:28,430
Vaig a prémer Enter.

74
00:03:28,430 --> 00:03:32,350
I just a sota d'ell ara,
i vaig a zoom aquí,

75
00:03:32,350 --> 00:03:36,000
Tinc aquest document de resposta
amb una petita fletxa al costat.

76
00:03:36,000 --> 00:03:39,470
Ara, quan obro aquesta fletxa,
que serà un munt de coses.

77
00:03:39,470 --> 00:03:42,560
>> Però anem a ignorar molts
de la mateixa i només tipus d'enfocament

78
00:03:42,560 --> 00:03:46,250
en la part més important, de manera que
pot començar a navegar en aquest document.

79
00:03:46,250 --> 00:03:50,125
Hi ha molt més a la DOM de
sol pare nodes i nodes secundaris.

80
00:03:50,125 --> 00:03:51,500
Hi ha un munt de coses accessòries.

81
00:03:51,500 --> 00:03:52,280
>> Així que vaig a obrir això.

82
00:03:52,280 --> 00:03:54,610
I hi ha molt
de coses que apareix.

83
00:03:54,610 --> 00:03:59,000
Però tot el que m'importa és
aquí, els nodes secundaris.

84
00:03:59,000 --> 00:04:00,410
Obrirem això.

85
00:04:00,410 --> 00:04:03,810
>> Dins d'allí veig
alguna cosa familiar, HTML.

86
00:04:03,810 --> 00:04:07,670
Així que dins del nostre document
un nivell més baix, HTML.

87
00:04:07,670 --> 00:04:08,550
Obro això.

88
00:04:08,550 --> 00:04:10,380
Què estem esperant?

89
00:04:10,380 --> 00:04:13,760
>> Si vostè recorda del nostre diagrama,
¿Què hem de trobar a l'interior d'HTML?

90
00:04:13,760 --> 00:04:17,275
Quins dos nodes estan per sota d'ell a l'arbre?

91
00:04:17,275 --> 00:04:17,899
Anem a veure.

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

93
00:04:18,940 --> 00:04:22,079
Vam baixar als seus nodes secundaris.

94
00:04:22,079 --> 00:04:23,440
>> Pop que s'obren.

95
00:04:23,440 --> 00:04:25,990
Hi ha cap i el cos.

96
00:04:25,990 --> 00:04:28,540
I podem obrir el cap.

97
00:04:28,540 --> 00:04:30,460
Anar als nodes secundaris.

98
00:04:30,460 --> 00:04:31,460
Bé, aquí està el títol.

99
00:04:31,460 --> 00:04:33,293
>> I podríem seguir i seguir
així per sempre.

100
00:04:33,293 --> 00:04:34,770
Podríem fer a través del cos també.

101
00:04:34,770 --> 00:04:40,090
Però hi ha una manera perquè vegem
el document organitzat com un gran objecte.

102
00:04:40,090 --> 00:04:42,610
I si ens fixem en que és un gran
objecte que s'assembla molt

103
00:04:42,610 --> 00:04:47,480
com el codi, el que significa que podem començar
per manipular aquesta gran objecte utilitzant

104
00:04:47,480 --> 00:04:51,220
codi per canviar el que el nostre
lloc web es veu i se sent com.

105
00:04:51,220 --> 00:04:54,920
>> Així que és una eina molt poderosa
tenim a la nostra disposició ara.

106
00:04:54,920 --> 00:04:57,360
Així com acabem de veure, la
document mateix objecte

107
00:04:57,360 --> 00:05:01,392
i tots els objectes dins d'ella
tenir propietats i mètodes, just

108
00:05:01,392 --> 00:05:04,100
com qualsevol altre objecte que hem
estat treballant amb en JavaScript.

109
00:05:04,100 --> 00:05:08,370
Però podem utilitzar aquestes propietats i
utilitzar aquests mètodes per perforar espècie de sota

110
00:05:08,370 --> 00:05:10,900
de la gran document i obtenir
més i més i més,

111
00:05:10,900 --> 00:05:13,360
cada vegada més fines grans
de detall, fins que

112
00:05:13,360 --> 00:05:17,510
arribar a una peça molt específic del nostre
pàgina web que volem canviar.

113
00:05:17,510 --> 00:05:22,700
>> I quan actualitzem propietats del
Document Object o truqui als mètodes,

114
00:05:22,700 --> 00:05:24,450
les coses podrien succeir en la nostra pàgina web.

115
00:05:24,450 --> 00:05:28,420
I nosaltres no hem de fer cap refrescant
tenir aquests canvis tinguin efecte.

116
00:05:28,420 --> 00:05:33,160
>> I això és una habilitat bastant fred per
tenir quan estem treballant amb el codi.

117
00:05:33,160 --> 00:05:37,185
Quines són algunes d'aquestes propietats
que són part d'un objecte de document?

118
00:05:37,185 --> 00:05:40,100
Bé, probablement va veure una
parell molt ràpid

119
00:05:40,100 --> 00:05:42,700
com estàvem passar amb velocitat
a través del document gegant

120
00:05:42,700 --> 00:05:45,150
objecte que acabem de veure en el navegador web.

121
00:05:45,150 --> 00:05:48,420
>> Però un parell d'aquestes propietats
podrien ser coses com HTML interior.

122
00:05:48,420 --> 00:05:52,950
I fins i tot em pot recordar
l'ús d'aquest al vídeo JavaScript

123
00:05:52,950 --> 00:05:54,950
al final quan em
estava parlant dels esdeveniments.

124
00:05:54,950 --> 00:05:56,125
Quin va ser aquest codi HTML intern?

125
00:05:56,125 --> 00:05:59,030
Bé, és només el que és
entre les etiquetes.

126
00:05:59,030 --> 00:06:01,590
>> I pel que el codi HTML intern,
per exemple, del títol

127
00:06:01,590 --> 00:06:05,390
etiqueta, si haguéssim seguit endavant en
que l'exemple fa un moment,

128
00:06:05,390 --> 00:06:08,020
hauria estat hola món.

129
00:06:08,020 --> 00:06:10,140
Aquest va ser el títol de la pàgina.

130
00:06:10,140 --> 00:06:12,370
Altres propietats
incloure el nom de node, que

131
00:06:12,370 --> 00:06:15,810
és el nom d'un arxiu HTML
element com a títol.

132
00:06:15,810 --> 00:06:19,100
ID, que és l'ID
atribut d'un element HTML.

133
00:06:19,100 --> 00:06:23,790
>> Recordem que podem assenyalar especialment
elements específics del nostre HTML

134
00:06:23,790 --> 00:06:27,510
amb un atribut ID, que en general
és molt útil en el context de la CSS,

135
00:06:27,510 --> 00:06:29,000
específicament.

136
00:06:29,000 --> 00:06:33,217
Node pare, que és una referència a
el que és just per sobre de mi en el DOM.

137
00:06:33,217 --> 00:06:35,800
I nodes fills, que és un
referència al que està per sota de mi.

138
00:06:35,800 --> 00:06:37,950
I vam veure molt d'això
només mirar a través.

139
00:06:37,950 --> 00:06:42,970
Nodes secundaris, així és com arribem
més i més en l'arbre.

140
00:06:42,970 --> 00:06:46,590
>> Atributs, això és només un arranjament
dels atributs de l'element HTML.

141
00:06:46,590 --> 00:06:50,270
Així que un exemple d'atributs podria
ser si vostè té una etiqueta d'imatge,

142
00:06:50,270 --> 00:06:54,090
en general té un atribut d'origen,
potser una altura i un atribut d'ample.

143
00:06:54,090 --> 00:06:57,120
I perquè no seria més que una matriu
de tots els atributs associats

144
00:06:57,120 --> 00:06:59,300
amb aquest element HTML.

145
00:06:59,300 --> 00:07:04,140
>> L'estil és altre que
Què representa la CSS

146
00:07:04,140 --> 00:07:06,050
estil d'un element particular.

147
00:07:06,050 --> 00:07:08,310
I més endavant en aquest
vídeo, anem específicament

148
00:07:08,310 --> 00:07:14,592
estil de palanca per fer un parell
dels canvis en el nostre lloc web.

149
00:07:14,592 --> 00:07:15,800
Així que aquestes són algunes de les propietats.

150
00:07:15,800 --> 00:07:17,591
>> I també alguna cosa que hi ha
mètodes que podem

151
00:07:17,591 --> 00:07:22,450
també utilitzar per aïllar potser més ràpidament
elements de l'objecte de document.

152
00:07:22,450 --> 00:07:26,730
Potser, el més versàtil
dels quals és getElementById.

153
00:07:26,730 --> 00:07:31,190
Així que podria dir alguna cosa així, perquè
recordeu que és un mètode del Document

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

155
00:07:34,880 --> 00:07:39,820
>> I dins d'aquests parèntesis, especifiqui
un element HTML amb una identificació especial

156
00:07:39,820 --> 00:07:42,330
Atribueixo que tinc prèviament
establir i vaig immediatament

157
00:07:42,330 --> 00:07:46,685
anar directament a aquest element
de la pàgina web en general.

158
00:07:46,685 --> 00:07:49,310
Així que no he de perforar potser
a través de tots els d'una sola capa.

159
00:07:49,310 --> 00:07:52,841
Jo només puc utilitzar aquest mètode per trobar-lo,
com una mena de recerca de calor de míssils,

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

161
00:07:53,340 --> 00:07:56,300
Simplement va i es troba
exactament el que està buscant.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName és
molt similar en esperit.

163
00:07:59,290 --> 00:08:02,500
Potser això seria trobar tota la
etiquetes de negreta o totes les etiquetes p

164
00:08:02,500 --> 00:08:05,920
i em dóna una gran varietat de tot
que podria després treballar.

165
00:08:05,920 --> 00:08:12,080
appendChild afegeix alguna cosa
un nivell en l'arbre.

166
00:08:12,080 --> 00:08:16,440
>> Així que puc afegir tota una nova
element d'un nivell inferior.

167
00:08:16,440 --> 00:08:19,700
O puc eliminar un element que és
un nivell inferior, així que si vull

168
00:08:19,700 --> 00:08:22,870
eliminar alguna cosa de la meva pàgina web.

169
00:08:22,870 --> 00:08:28,480
Ara, una nota de codificació ràpid i una ràpida
estalvi de cefalea nota, és d'esperar.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- la d és minúscula.

171
00:08:31,670 --> 00:08:36,950
No puc dir-li quantes vegades tinc
usat getElementById i capitalitzat

172
00:08:36,950 --> 00:08:38,336
el d allà.

173
00:08:38,336 --> 00:08:39,460
Com que és molt comú.

174
00:08:39,460 --> 00:08:42,990
Si escrivim la paraula Identificació, és
en general el capital que el capital D.

175
00:08:42,990 --> 00:08:44,240
I el meu codi simplement no funciona.

176
00:08:44,240 --> 00:08:45,630
I no puc entendre per què.

177
00:08:45,630 --> 00:08:49,490
Aquest és un molt, molt, molt
error comú que tothom fa,

178
00:08:49,490 --> 00:08:51,890
fins i tot els experts que tenen
estat fent això per sempre.

179
00:08:51,890 --> 00:08:55,410
Així que acaba de ser conscients, getElementById,
que d és minúscula.

180
00:08:55,410 --> 00:09:00,080
I és d'esperar, que li estalvia diversos
minuts almenys mals de cap.

181
00:09:00,080 --> 00:09:02,204
>> Llavors, què significa tot això ens diuen?

182
00:09:02,204 --> 00:09:03,120
Tenim aquests mètodes.

183
00:09:03,120 --> 00:09:04,161
Tenim aquestes propietats.

184
00:09:04,161 --> 00:09:06,610
Ara bé, si partim de
document, document.

185
00:09:06,610 --> 00:09:10,220
el que sigui, ara podem arribar a qualsevol
única peça de la nostra pàgina web

186
00:09:10,220 --> 00:09:14,870
que volem fer servir JavaScript
amb només trucar a aquests mètodes

187
00:09:14,870 --> 00:09:19,940
i l'aprofitament de les propietats
que trobem en diversos llocs.

188
00:09:19,940 --> 00:09:24,890
>> Això pot ser prolix, això
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
potser tenen un nom d'etiqueta llarga,
potser ho fa més trucades més endavant.

190
00:09:28,560 --> 00:09:31,230
Les coses poden ser una mica prolix.

191
00:09:31,230 --> 00:09:34,480
I a mesura que els programadors, ja que tens
probablement vist en molts d'aquests vídeos,

192
00:09:34,480 --> 00:09:36,600
no ens agraden les coses prolixes.

193
00:09:36,600 --> 00:09:38,520
>> Ens agrada ser capaç de fer les coses ràpidament.

194
00:09:38,520 --> 00:09:42,640
Així que ens agradaria una més
forma concisa per dir alguna cosa.

195
00:09:42,640 --> 00:09:46,270
Així que aquest tipus de cables a la
noció d'una cosa anomenada jQuery.

196
00:09:46,270 --> 00:09:49,170
Ara jQuery no és JavaScript.

197
00:09:49,170 --> 00:09:50,350
No és part de JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> És una biblioteca que va ser escrit
per alguns programadors de JavaScript

199
00:09:54,790 --> 00:09:57,060
Fa uns 10 anys.

200
00:09:57,060 --> 00:10:01,300
I el seu objectiu és simplificar això el que és
anomenada scripting del costat del client, el que

201
00:10:01,300 --> 00:10:04,310
és bàsicament el que estàvem
parlant amb manipulacions DOM.

202
00:10:04,310 --> 00:10:11,090
I així, si volia modificar la
color de fons de la meva pàgina web, potser

203
00:10:11,090 --> 00:10:11,980
1 Div específic.

204
00:10:11,980 --> 00:10:15,325
>> Aquí, estic semblar aconseguir
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
I vull establir el seu color de fons.

206
00:10:16,950 --> 00:10:20,720
Si estic fent servir pura JavaScript
usant el Document Object Model,

207
00:10:20,720 --> 00:10:23,990
això és un munt de coses, no?
document.getElementById

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

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

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

211
00:10:28,050 --> 00:10:30,110
Això era molt per dir.

212
00:10:30,110 --> 00:10:31,720
És molt més que escriure, també.

213
00:10:31,720 --> 00:10:35,760
I així, en jQuery, que potser podem dir
això una mica més concisa.

214
00:10:35,760 --> 00:10:39,350
La compensació és que és potser una mica
poc més críptica, de sobte,

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

216
00:10:39,850 --> 00:10:43,580
>> Almenys, el temps és una mica més
explicatiu en quant al que estem fent.

217
00:10:43,580 --> 00:10:49,947
Aquesta mostra de dòlar, parèntesis,
cometa simple, haixix, colorDiv, oi?

218
00:10:49,947 --> 00:10:50,780
Què vol dir això?

219
00:10:50,780 --> 00:10:53,640
Bé, això és bàsicament només
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Però és aquesta espècie de taquigrafia
forma de fer-ho utilitzant jQuery.

221
00:10:58,700 --> 00:11:01,380
Anem a fer una ullada ara
en un parell de maneres diferents

222
00:11:01,380 --> 00:11:04,520
que pot ser que en realitat
utilitzar aquest Document Object

223
00:11:04,520 --> 00:11:06,807
Model per manipular peces del meu lloc.

224
00:11:06,807 --> 00:11:09,140
En particular, anem
que està treballant en la manipulació

225
00:11:09,140 --> 00:11:14,090
el color d'un particular,
Div, colorDiv, en una pàgina web.

226
00:11:14,090 --> 00:11:15,299
Així que anem a fer una ullada a això.

227
00:11:15,299 --> 00:11:15,798
Tot bé.

228
00:11:15,798 --> 00:11:16,700
Així que estic en una pàgina.

229
00:11:16,700 --> 00:11:20,750
Es diu prova.html en descarregar
això si vostè vol jugar amb això.

230
00:11:20,750 --> 00:11:24,730
I tinc un munt de
botons d'aquesta pàgina.

231
00:11:24,730 --> 00:11:27,730
I jo estic dient funcions individuals
per al color de fons, porpra, verd,

232
00:11:27,730 --> 00:11:31,330
taronja, blau, una sola funció vermella,
de color de fons, controlador d'esdeveniments

233
00:11:31,330 --> 00:11:34,360
de color de fons, i l'ús de jQuery.

234
00:11:34,360 --> 00:11:38,147
El que estic parlant
quan estic fent això?

235
00:11:38,147 --> 00:11:39,230
Així que hem vist en els botons.

236
00:11:39,230 --> 00:11:41,521
Ara, anem a fer una ullada a
una part del codi font aquí.

237
00:11:41,521 --> 00:11:44,770
Anem a començar amb prova.html.

238
00:11:44,770 --> 00:11:48,100
Així funcions individuals per al fons
el color és el que he vaig escriure aquí.

239
00:11:48,100 --> 00:11:49,350
Permetin-me desplaço una mica.

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

241
00:11:56,170 --> 00:11:58,820
>> I t'adonaràs que jo
han definit aquests botons

242
00:11:58,820 --> 00:12:03,990
dir quan es fa clic en aquest botó,
cridar a la funció canvia a lila.

243
00:12:03,990 --> 00:12:06,670
Quan aquest botó es faci clic, més aviat,
cridar a la funció canvia a verd,

244
00:12:06,670 --> 00:12:08,710
volta a la taronja, tornarà de color vermell, tornarà blau.

245
00:12:08,710 --> 00:12:11,880
Vostè probablement pot endevinar que aquest
potser no és el millor disseny

246
00:12:11,880 --> 00:12:12,460
sentit, oi?

247
00:12:12,460 --> 00:12:16,490
>> Seria bo si pogués
tenir un enfocament més general.

248
00:12:16,490 --> 00:12:19,570
Bé, primer anem a fer una ullada
en el que aquestes cinc funcions són

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

250
00:12:24,400 --> 00:12:27,250
verd, taronja, vermell,
i blau, respectivament.

251
00:12:27,250 --> 00:12:30,930
Per tant, no és particularment el millor disseny.

252
00:12:30,930 --> 00:12:33,390
>> El següent conjunt de botons
He és que he escrit

253
00:12:33,390 --> 00:12:36,380
una única funció anomenada
canviar de color que aparentment

254
00:12:36,380 --> 00:12:38,960
accepta una cadena com a argument.

255
00:12:38,960 --> 00:12:40,290
Així que això és una mica millor.

256
00:12:40,290 --> 00:12:43,840
Porpra, verd, taronja, vermell,
blau és ara un argument.

257
00:12:43,840 --> 00:12:46,230
Així que m'he escrit una més general
cas funció de JavaScript,

258
00:12:46,230 --> 00:12:47,771
que podria ser alguna cosa com això.

259
00:12:47,771 --> 00:12:48,680
Estic passant.

260
00:12:48,680 --> 00:12:52,090
Aquest canvi de color és la funció
esperant un argument anomenat color.

261
00:12:52,090 --> 00:12:54,970
I jo dic que estableixi la
color de fons a color.

262
00:12:54,970 --> 00:12:58,390
Així que aquí representa el que tinc aquí.

263
00:12:58,390 --> 00:12:59,770
Així que això és una mica millor.

264
00:12:59,770 --> 00:13:02,740
>> Però jo podria ser capaç de
fer-ho millor que això.

265
00:13:02,740 --> 00:13:06,140
Si anem a fer una ullada
per la situació controlador d'esdeveniments,

266
00:13:06,140 --> 00:13:07,860
Ara totes aquestes trucades tenen el mateix aspecte.

267
00:13:07,860 --> 00:13:10,340
Si vostè recorda de la nostra
discussió sobre els controladors d'esdeveniments,

268
00:13:10,340 --> 00:13:15,770
Puc aconseguir informació sobre quin
aquests botons es va fer clic i utilitzar això.

269
00:13:15,770 --> 00:13:19,560
>> I així, en event.JavaScript, tinc
escrita esdeveniment de canvi de color, que

270
00:13:19,560 --> 00:13:21,110
s'adona de quin botó es va fer clic.

271
00:13:21,110 --> 00:13:23,250
Aquesta és la línia objecte d'activació.

272
00:13:23,250 --> 00:13:25,240
I llavors aquí, es posa molt prolix.

273
00:13:25,240 --> 00:13:27,420
Però el que estic fent és que estic
ajustar el fons

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

275
00:13:30,340 --> 00:13:34,170
Aquest és el text en
entre les etiquetes dels botons.

276
00:13:34,170 --> 00:13:36,500
>> I després, aparentment, han
per configurar a minúscules.

277
00:13:36,500 --> 00:13:40,780
I així és com puc convertir un sencer
cadena a minúscules en JavaScript utilitzant

278
00:13:40,780 --> 00:13:42,940
aquest mètode a minúscules.

279
00:13:42,940 --> 00:13:46,570
Perquè quan em vaig posar un color,
com que estic tractant de fer aquí,

280
00:13:46,570 --> 00:13:48,260
el color ha d'estar en minúscules.

281
00:13:48,260 --> 00:13:50,920
>> Però en el botó que tenia,
si tornem a analitzar,

282
00:13:50,920 --> 00:13:55,890
Tingueu present que el text hi
escrit amb una P de capital per a la porpra.

283
00:13:55,890 --> 00:13:59,140
I llavors per la
fons aquí, que aparentment

284
00:13:59,140 --> 00:14:02,630
tractar de fer això utilitzant jQuery també.

285
00:14:02,630 --> 00:14:06,000
I en aquest cas, no estic realment
cridar a una funció en absolut.

286
00:14:06,000 --> 00:14:11,430
Que acabo de dir a la classe que estic
utilitzant per a aquest botó és un botó JQ.

287
00:14:11,430 --> 00:14:12,360
Això és.

288
00:14:12,360 --> 00:14:14,950
>> Llavors, com saber jQuery el que estic fent?

289
00:14:14,950 --> 00:14:18,740
Bé, aquesta és una de les avantatges
retallar desavantatges de jQuery.

290
00:14:18,740 --> 00:14:21,560
Pot permetre que faci coses
molt concisa, però potser no

291
00:14:21,560 --> 00:14:22,570
com intuïtivament.

292
00:14:22,570 --> 00:14:25,570
Potser els altres tres fan una
poc més de sentit el que estic fent.

293
00:14:25,570 --> 00:14:29,010
Aquí, però, ¿què està passant?

294
00:14:29,010 --> 00:14:31,940
>> Pel que sembla, la creació de
una funció anònima

295
00:14:31,940 --> 00:14:36,790
que es carrega cada vegada que el meu document
està a punt, per la qual document.ready,

296
00:14:36,790 --> 00:14:38,760
alguna funció que ha de passar.

297
00:14:38,760 --> 00:14:40,490
Bàsicament, quan és un document preparat?

298
00:14:40,490 --> 00:14:42,310
És quan la meva pàgina s'ha carregat.

299
00:14:42,310 --> 00:14:46,540
>> Així que tan aviat com la meva pàgina s'ha carregat, el
següent funció està sempre a punt.

300
00:14:46,540 --> 00:14:54,310
Es diu, si un objecte de tipus jQButton,
o si la classe jQButton ha fet clic,

301
00:14:54,310 --> 00:14:55,570
executar aquesta funció.

302
00:14:55,570 --> 00:14:59,360
Així que aquí està dues funcions anònimes,
definit dins de l'altra.

303
00:14:59,360 --> 00:15:03,930
>> Així que tota la meva context
aquí fins ara és la meva pàgina

304
00:15:03,930 --> 00:15:06,520
quan càrrega que crida a aquesta funció.

305
00:15:06,520 --> 00:15:09,740
I aquesta funció està esperant
per a un botó que es fa clic.

306
00:15:09,740 --> 00:15:14,490
I quan es fa clic en un botó, JQ
específicament es fa clic al botó,

307
00:15:14,490 --> 00:15:17,150
crida a aquest altre
funció, que està passant

308
00:15:17,150 --> 00:15:21,250
per establir el fons
color de la colorDiv per ser

309
00:15:21,250 --> 00:15:25,990
qualsevol text que es troba en entre les etiquetes.

310
00:15:25,990 --> 00:15:28,050
>> Aquesta és la noció de
quin botó es va fer clic.

311
00:15:28,050 --> 00:15:31,230
Però d'altra banda, es tracta d'una espècie de
comportar-se similar a un esdeveniment.

312
00:15:31,230 --> 00:15:34,460
És només la mateixa manera que
expressaria això en jQuery.

313
00:15:34,460 --> 00:15:36,790
Un cop més, és probable que sigui un
molt més intimidatori.

314
00:15:36,790 --> 00:15:40,840
No és tan clar com
alguna cosa així com event.js,

315
00:15:40,840 --> 00:15:45,080
que és potser una mica més
detallat, però una mica menys

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

317
00:15:46,000 --> 00:15:51,460
>> Però si ens pop de nou cap a la meva navegador
finestra, si començo clicking-- així,

318
00:15:51,460 --> 00:15:52,690
això va canviar a morat.

319
00:15:52,690 --> 00:15:54,450
Aquesta és verd utilitzant el mètode de cadena.

320
00:15:54,450 --> 00:15:56,500
Aquesta és de color taronja amb el controlador d'esdeveniments.

321
00:15:56,500 --> 00:15:58,300
>> Aquesta és vermell usant jQuery, oi?

322
00:15:58,300 --> 00:16:01,270
Tots ells es comporten exactament de la mateixa.

323
00:16:01,270 --> 00:16:06,509
Ells només fan ús de diferents
enfocaments per resoldre el problema.

324
00:16:06,509 --> 00:16:08,550
Hi ha molt més per
jQuery llavors estem sens dubte

325
00:16:08,550 --> 00:16:10,050
parlarem en aquest vídeo.

326
00:16:10,050 --> 00:16:15,410
Però si vostè vol saber més, pot
anar a la classe de documentació de jQuery

327
00:16:15,410 --> 00:16:19,710
i aprendre una mica més sobre
aquesta biblioteca molt flexible, la qual cosa

328
00:16:19,710 --> 00:16:22,550
és ideal per fer del costat del client
scripting com el que estàvem fent

329
00:16:22,550 --> 00:16:26,240
per manipular l'aspecte
i sentir de la nostra pàgina web

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

331
00:16:28,750 --> 00:16:29,650
Sóc Doug Lloyd.

332
00:16:29,650 --> 00:16:31,930
Això és CS50.

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