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

2
00:00:04,439 --> 00:00:07,230
Doug LLOYD: Neste video, queriamos
para chamar a atención separado

3
00:00:07,230 --> 00:00:09,110
a unha moi particular
elemento de JavaScript

4
00:00:09,110 --> 00:00:11,350
que pode considerar útil
cando está comezando

5
00:00:11,350 --> 00:00:15,750
para traballar na manipulación de páxinas web e
cambiando o contido da súa páxina web

6
00:00:15,750 --> 00:00:16,460
en tempo real.

7
00:00:16,460 --> 00:00:19,450
E esa é a noción de
Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Así como vimos no noso vídeo sobre
JavaScript, obxectos son moi flexibles.

9
00:00:23,030 --> 00:00:24,750
>> E poden conter varios campos.

10
00:00:24,750 --> 00:00:28,075
E aínda que non ir a unha morea de
detalle, estes campos ou propiedades,

11
00:00:28,075 --> 00:00:30,200
que sería probablemente máis
chamalos de forma adecuada

12
00:00:30,200 --> 00:00:33,915
no contexto dun obxecto, aínda
esas propiedades pode haber outros obxectos.

13
00:00:33,915 --> 00:00:36,210
E dentro destes obxectos
pode haber outros obxectos.

14
00:00:36,210 --> 00:00:39,630
>> Ten este obxecto moi grande
con unha morea de outros obxectos

15
00:00:39,630 --> 00:00:43,550
dentro del, que tipo de
crea esa idea dunha grande árbore.

16
00:00:43,550 --> 00:00:47,540
Agora, o obxecto documento é un
moi especial obxecto en JavaScript

17
00:00:47,540 --> 00:00:52,580
que organiza toda a súa web
artigo baixo este tipo de paraugas

18
00:00:52,580 --> 00:00:53,470
dun obxecto.

19
00:00:53,470 --> 00:00:56,770
E así, no interior do documento
obxecto son obxectos que presentan

20
00:00:56,770 --> 00:00:59,630
a cabeza eo corpo da súa páxina web.

21
00:00:59,630 --> 00:01:03,760
>> Dentro deses son outra
obxectos, etcétera, etcétera,

22
00:01:03,760 --> 00:01:08,411
ata que toda a súa páxina web ten
organizouse neste gran obxecto.

23
00:01:08,411 --> 00:01:09,660
Cal é a cabeza aquí, non?

24
00:01:09,660 --> 00:01:12,170
Ben, sabemos como traballar
con obxectos en JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Entón, se temos un obxecto que
refírese a toda a páxina web, que

26
00:01:15,840 --> 00:01:19,590
significa chamando o correcto
métodos para manipular este obxecto

27
00:01:19,590 --> 00:01:22,360
ou modificar certos
das súas propiedades,

28
00:01:22,360 --> 00:01:25,500
pode cambiar os elementos de
nosa páxina programaticamente

29
00:01:25,500 --> 00:01:30,210
usando JavaScript no canto de ter
codificar as cousas con, digamos, HTML.

30
00:01:30,210 --> 00:01:33,760
Entón aquí está un exemplo dunha
moi sinxelo páxina web, non?

31
00:01:33,760 --> 00:01:35,850
Ten etiquetas HTML, unha cabeza.

32
00:01:35,850 --> 00:01:37,979
>> Dentro hai un título, Ola mundo.

33
00:01:37,979 --> 00:01:38,770
Entón eu teño un corpo.

34
00:01:38,770 --> 00:01:40,686
Dentro diso, eu teño
tres cousas distintas.

35
00:01:40,686 --> 00:01:44,170
Eu teño unha etiqueta de cabeceira h2,
un parágrafo, e un enlace.

36
00:01:44,170 --> 00:01:45,920
Esta é unha páxina web moi sinxelo.

37
00:01:45,920 --> 00:01:48,590
>> Ben, o que pode o documento
obxecto para este ollar como?

38
00:01:48,590 --> 00:01:50,700
Ben, é un pouco
asustado quizais en primeiro lugar.

39
00:01:50,700 --> 00:01:52,510
Pero é realmente só unha gran árbore.

40
00:01:52,510 --> 00:01:54,890
E na propia raíz do que é documento.

41
00:01:54,890 --> 00:02:00,030
>> Dentro do documento é outra
obxecto referíndose ao HTML da miña páxina.

42
00:02:00,030 --> 00:02:02,660
E o HTML da miña páxina é todo isto.

43
00:02:02,660 --> 00:02:06,900
E, a continuación, dentro do HTML
obxecto, eu teño un obxecto cabeza,

44
00:02:06,900 --> 00:02:09,000
que se refire a todo o que hai.

45
00:02:09,000 --> 00:02:11,009
>> E alí dentro,
Eu teño un obxecto título.

46
00:02:11,009 --> 00:02:15,620
E alí dentro, teño outra
objetar que é só Ola mundo.

47
00:02:15,620 --> 00:02:18,020
Eu podería ter o meu corpo
representado como este.

48
00:02:18,020 --> 00:02:22,850
>> Dentro do meu corpo, eu teño unha h2
obxecto e un obxecto para p parágrafo

49
00:02:22,850 --> 00:02:25,270
e un obxecto para unha ligazón.

50
00:02:25,270 --> 00:02:29,660
E así este toda xerarquía
pode ser representada como unha gran árbore

51
00:02:29,660 --> 00:02:31,990
con lotes de pouco menor
cousas que vén de fóra.

52
00:02:31,990 --> 00:02:33,740
Agora, por suposto, cando
estamos programando, nós

53
00:02:33,740 --> 00:02:35,560
non pensar en cousas como unha gran árbore.

54
00:02:35,560 --> 00:02:37,980
Queremos ver real
cousas relacionadas con código.

55
00:02:37,980 --> 00:02:40,790
>> E, por sorte, podemos
usar as nosas ferramentas de desenvolvemento

56
00:02:40,790 --> 00:02:46,080
para realmente un ollo
obxecto de documento desta web.

57
00:02:46,080 --> 00:02:48,150
E imos facelo.

58
00:02:48,150 --> 00:02:49,580
Entón, eu abrín un separador do navegador.

59
00:02:49,580 --> 00:02:51,540
>> E abrín Developer Tools.

60
00:02:51,540 --> 00:02:54,460
E no meu vídeo en JavaScript, I
mencionou que a consola non é

61
00:02:54,460 --> 00:02:56,770
única nalgún lugar onde
nós imprimir a información,

62
00:02:56,770 --> 00:02:59,560
é tamén un lugar onde
nós pode introducir información.

63
00:02:59,560 --> 00:03:01,380
Neste contexto, o
Eu vou dicir é

64
00:03:01,380 --> 00:03:05,720
Gustaríame volver
os obxectos de documento,

65
00:03:05,720 --> 00:03:07,502
para que eu poida comezar a ter un ollar para el.

66
00:03:07,502 --> 00:03:08,460
Entón, como eu podería facelo?

67
00:03:08,460 --> 00:03:10,740
Ben, se eu queira
organiza-lo realmente ben,

68
00:03:10,740 --> 00:03:16,317
Eu vou dicir console.dir, D-I-R.
Agora, eu uso só console.log para imprimir

69
00:03:16,317 --> 00:03:17,400
algo moi sinxelo.

70
00:03:17,400 --> 00:03:20,450
Pero se eu queira organizar este
xerarquicamente como un obxecto,

71
00:03:20,450 --> 00:03:23,800
Quero que tipo de estrutura
como unha estrutura de directorio.

72
00:03:23,800 --> 00:03:27,400
>> Entón, quero console.dir documento.

73
00:03:27,400 --> 00:03:28,430
Vou bater Intro.

74
00:03:28,430 --> 00:03:32,350
E debaixo dela agora,
e eu vou facer zoom aquí,

75
00:03:32,350 --> 00:03:36,000
Eu teño ese documento de resposta
cunha pequena frecha ao lado del.

76
00:03:36,000 --> 00:03:39,470
Agora, cando eu abrir esta frecha,
alí vai ser unha morea de cousas.

77
00:03:39,470 --> 00:03:42,560
>> Pero imos ignorar unha morea
do mesmo e só unha especie de foco

78
00:03:42,560 --> 00:03:46,250
sobre a parte máis importante, por iso,
Pode comezar a navegar neste documento.

79
00:03:46,250 --> 00:03:50,125
Hai moito máis para o DON que
só pai nós e nós fillo.

80
00:03:50,125 --> 00:03:51,500
Hai unha morea de cousas acessórias.

81
00:03:51,500 --> 00:03:52,280
>> Entón, eu vou abrir iso.

82
00:03:52,280 --> 00:03:54,610
E hai un lote enteiro
de cousas que aparece.

83
00:03:54,610 --> 00:03:59,000
Pero todo o que me interesa é
aquí, nós fillo.

84
00:03:59,000 --> 00:04:00,410
Imos abrir iso.

85
00:04:00,410 --> 00:04:03,810
>> Dentro alí eu ver
algo familiar, HTML.

86
00:04:03,810 --> 00:04:07,670
Entón, dentro do noso documento
Un nivel baixo, HTML.

87
00:04:07,670 --> 00:04:08,550
Abro iso.

88
00:04:08,550 --> 00:04:10,380
O que estamos esperando?

89
00:04:10,380 --> 00:04:13,760
>> Se se lembrar do noso diagrama,
o que temos que atopar no interior de HTML?

90
00:04:13,760 --> 00:04:17,275
Que dous nós son debaixo del na árbore?

91
00:04:17,275 --> 00:04:17,899
Imos descubrir.

92
00:04:17,899 --> 00:04:18,940
Nós abrimos HTML.

93
00:04:18,940 --> 00:04:22,079
Descendemos para os seus nós fillo.

94
00:04:22,079 --> 00:04:23,440
>> Pop que se abren.

95
00:04:23,440 --> 00:04:25,990
Hai cabeza e do corpo.

96
00:04:25,990 --> 00:04:28,540
E podemos abrir a cabeza.

97
00:04:28,540 --> 00:04:30,460
Ir seus nós fillo.

98
00:04:30,460 --> 00:04:31,460
Así, hai o título.

99
00:04:31,460 --> 00:04:33,293
>> E poderiamos seguir e
así para sempre.

100
00:04:33,293 --> 00:04:34,770
Poderíamos facelo co corpo tamén.

101
00:04:34,770 --> 00:04:40,090
Pero hai unha forma de ollar para
o documento organizada como unha gran obxecto.

102
00:04:40,090 --> 00:04:42,610
E se miramos para un gran
obxecto que se parece moi

103
00:04:42,610 --> 00:04:47,480
como código, o que significa que podemos comezar
para manipular este gran obxecto usando

104
00:04:47,480 --> 00:04:51,220
código para cambiar o que o noso
web mira e sente como.

105
00:04:51,220 --> 00:04:54,920
>> Entón esta é unha ferramenta moi poderosa
temos á nosa disposición agora.

106
00:04:54,920 --> 00:04:57,360
Entón, como acabamos de ver, o
documento propio obxecto

107
00:04:57,360 --> 00:05:01,392
e todos os obxectos no interior do mesmo
teñen propiedades e métodos, só

108
00:05:01,392 --> 00:05:04,100
como calquera outro obxecto que temos
está a traballar con en JavaScript.

109
00:05:04,100 --> 00:05:08,370
Pero podemos utilizar esas propiedades e
utilizar os mesmos métodos de tipo de Drill down

110
00:05:08,370 --> 00:05:10,900
desde o documento grande e obter
menor e máis e máis,

111
00:05:10,900 --> 00:05:13,360
máis fina grans
de detalle, ata que

112
00:05:13,360 --> 00:05:17,510
chegar a unha parte moi específica do noso
A páxina web que queremos cambiar.

113
00:05:17,510 --> 00:05:22,700
>> E cando nós actualizamos propiedades do
Obxecto de documento ou chamar estes métodos,

114
00:05:22,700 --> 00:05:24,450
as cousas poden ocorrer na nosa páxina web.

115
00:05:24,450 --> 00:05:28,420
E non precisa facer calquera refrescante
para que estas modificacións teñan efecto.

116
00:05:28,420 --> 00:05:33,160
>> E iso é unha habilidade moi legal
temos cando estamos a traballar co código.

117
00:05:33,160 --> 00:05:37,185
Entón, cales son algunhas destas propiedades
que forman parte dun obxecto de documento?

118
00:05:37,185 --> 00:05:40,100
Ben, probablemente viu un
algúns deles moi rapidamente

119
00:05:40,100 --> 00:05:42,700
como estabamos pechando
a través do documento xigante

120
00:05:42,700 --> 00:05:45,150
obxecto que acabamos de ver no navegador web.

121
00:05:45,150 --> 00:05:48,420
>> Pero un par desas propiedades
pode ser cousas como HTML interior.

122
00:05:48,420 --> 00:05:52,950
E pode ata lémbreme
usando este vídeo no JavaScript

123
00:05:52,950 --> 00:05:54,950
ao final, cando
estaba falando sobre os eventos.

124
00:05:54,950 --> 00:05:56,125
O que era ese HTML interior?

125
00:05:56,125 --> 00:05:59,030
Ben, é só o que é
entre as etiquetas.

126
00:05:59,030 --> 00:06:01,590
>> E así o HTML interno,
por exemplo, do título

127
00:06:01,590 --> 00:06:05,390
tag, se tivésemos continuou indo
que exemplo dun momento atrás,

128
00:06:05,390 --> 00:06:08,020
sería Ola mundo.

129
00:06:08,020 --> 00:06:10,140
Ese foi o título da nosa páxina.

130
00:06:10,140 --> 00:06:12,370
Outras propiedades
incluír o nome do nodo, o que

131
00:06:12,370 --> 00:06:15,810
é o nome dun HTML
elemento, como título.

132
00:06:15,810 --> 00:06:19,100
ID, que é o ID
atributo dun elemento HTML.

133
00:06:19,100 --> 00:06:23,790
>> Lembre que podemos indicar especialmente
elementos específicos do noso HTML

134
00:06:23,790 --> 00:06:27,510
cun atributo ID, que xeralmente
vén a cadra no contexto da CSS,

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

136
00:06:29,000 --> 00:06:33,217
Nó pai, que é unha referencia ao
o que non é máis que sobre min no DOM.

137
00:06:33,217 --> 00:06:35,800
E nós fillo, que é un
referencia ao que está por baixo de min.

138
00:06:35,800 --> 00:06:37,950
E vimos unha chea de que
só de ollar a través.

139
00:06:37,950 --> 00:06:42,970
Nós fillo, que é como chegamos
máis e máis na árbore.

140
00:06:42,970 --> 00:06:46,590
>> Atributos, iso é só unha matriz
de atributos do elemento HTML.

141
00:06:46,590 --> 00:06:50,270
Así, un exemplo de atributos pode
se ten unha etiqueta de imaxe,

142
00:06:50,270 --> 00:06:54,090
xeralmente ten un atributo de orixe,
quizais unha altura e un atributo de ancho.

143
00:06:54,090 --> 00:06:57,120
E para que sería só un array
de todos os atributos asociados

144
00:06:57,120 --> 00:06:59,300
con ese elemento HTML.

145
00:06:59,300 --> 00:07:04,140
>> Estilo é outro que
non representa o CSS

146
00:07:04,140 --> 00:07:06,050
estilo dun elemento en particular.

147
00:07:06,050 --> 00:07:08,310
E máis adiante neste
vídeo, imos especificamente

148
00:07:08,310 --> 00:07:14,592
estilo de panca para facer unha parella
do cambio a nosa web.

149
00:07:14,592 --> 00:07:15,800
Polo tanto, estas son algunhas propiedades.

150
00:07:15,800 --> 00:07:17,591
>> E hai tamén algúns son
métodos que podemos

151
00:07:17,591 --> 00:07:22,450
para usar tamén canto quizais illar
elementos do obxecto de documento.

152
00:07:22,450 --> 00:07:26,730
Quizais, o máis versátil
destes que son getElementById.

153
00:07:26,730 --> 00:07:31,190
Entón, eu podería dicir algo así como, porque
lembre que é un método do documento

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

155
00:07:34,880 --> 00:07:39,820
>> E dentro destes parénteses, desprácese
un elemento HTML cun determinado ID

156
00:07:39,820 --> 00:07:42,330
atributo que teño previamente
definido, e eu vou inmediatamente

157
00:07:42,330 --> 00:07:46,685
desprácese á dereita a ese elemento
do sitio web global.

158
00:07:46,685 --> 00:07:49,310
Entón eu non teño para perforar quizais
abaixo a través de cada capa única.

159
00:07:49,310 --> 00:07:52,841
Só podo usar este método para atopalo,
como unha especie de misil busca de calor,

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

161
00:07:53,340 --> 00:07:56,300
El só vai e encontra
exactamente o que está a procurar.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName é
moi semellante en espírito.

163
00:07:59,290 --> 00:08:02,500
Quizais iso vai atopar todas as
tags en negra ou todos os tags p

164
00:08:02,500 --> 00:08:05,920
e me dar unha matriz de todo
que eu podería, entón, traballar con el.

165
00:08:05,920 --> 00:08:12,080
appendChild engade algo
debaixo da árbore.

166
00:08:12,080 --> 00:08:16,440
>> Entón, eu creo un novo enteiro
un elemento de nivel inferior.

167
00:08:16,440 --> 00:08:19,700
Ou podo eliminar un elemento que é
Un nivel máis baixo tamén se quero

168
00:08:19,700 --> 00:08:22,870
para borrar algo da miña páxina web.

169
00:08:22,870 --> 00:08:28,480
Agora, unha nota de codificación rápida e un rápido
dor de cabeza aforro nota, eu espero.

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

171
00:08:31,670 --> 00:08:36,950
Eu non te podo dicir cantas veces eu teño
usado getElementById e capitalizado

172
00:08:36,950 --> 00:08:38,336
a d alí.

173
00:08:38,336 --> 00:08:39,460
Porque é moi común.

174
00:08:39,460 --> 00:08:42,990
Se escribir a palabra ID, é
Eu xeralmente de capital de capital D.

175
00:08:42,990 --> 00:08:44,240
E meu código simplemente non funciona.

176
00:08:44,240 --> 00:08:45,630
E eu non podo descubrir o por que.

177
00:08:45,630 --> 00:08:49,490
Este é realmente, realmente, realmente
erro común que todo o mundo fai,

178
00:08:49,490 --> 00:08:51,890
mesmo os expertos que teñen
vén facendo isto para sempre.

179
00:08:51,890 --> 00:08:55,410
Entón, só tes que ser consciente, getElementById,
que d é minúscula.

180
00:08:55,410 --> 00:09:00,080
E esperamos que aforra-lle varios
minutos a menos de dor de cabeza.

181
00:09:00,080 --> 00:09:02,204
>> Entón, o que todo isto nos di?

182
00:09:02,204 --> 00:09:03,120
Temos estes métodos.

183
00:09:03,120 --> 00:09:04,161
Temos esas propiedades.

184
00:09:04,161 --> 00:09:06,610
Agora, se partimos
documento, documento.

185
00:09:06,610 --> 00:09:10,220
o que quere, agora podemos chegar a calquera
pezas da nosa páxina web

186
00:09:10,220 --> 00:09:14,870
que queremos usar JavaScript
só chamando estes métodos

187
00:09:14,870 --> 00:09:19,940
e alavancar as propiedades
que atopamos en varios lugares.

188
00:09:19,940 --> 00:09:24,890
>> Isto pode estar prolixo, este
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
quizais ter un nome de marca por moito tempo,
quizais facer máis chamadas despois.

190
00:09:28,560 --> 00:09:31,230
As cousas poden estar un pouco prolixo.

191
00:09:31,230 --> 00:09:34,480
E, como programadores, como
Probablemente xa viu en moitos destes vídeos,

192
00:09:34,480 --> 00:09:36,600
nós non nos gusta de cousas prolixo.

193
00:09:36,600 --> 00:09:38,520
>> Nós gústanos de ser capaz de facer as cousas rapidamente.

194
00:09:38,520 --> 00:09:42,640
Entón, nós queremos unha máis
forma concisa para dicir algo.

195
00:09:42,640 --> 00:09:46,270
Polo tanto, este tipo de leads para o
noción de algo chamado jQuery.

196
00:09:46,270 --> 00:09:49,170
Agora jQuery non é JavaScript.

197
00:09:49,170 --> 00:09:50,350
Non é parte do JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> É unha biblioteca que foi escrita
por algúns programadores de JavaScript

199
00:09:54,790 --> 00:09:57,060
preto de 10 anos.

200
00:09:57,060 --> 00:10:01,300
E o seu obxectivo é simplificar o que é iso
chamados scripts do lado do cliente, o que

201
00:10:01,300 --> 00:10:04,310
é basicamente o que estabamos só
falando con manipulacións DOM.

202
00:10:04,310 --> 00:10:11,090
E así se eu quixese modificar o
cor da miña páxina web fondo, quizais

203
00:10:11,090 --> 00:10:11,980
unha Div específico.

204
00:10:11,980 --> 00:10:15,325
>> Aquí, eu estou quedando aparentemente
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
E quero definir a cor de fondo.

206
00:10:16,950 --> 00:10:20,720
Se está a usar só puro JavaScript
usando o Document Object Model,

207
00:10:20,720 --> 00:10:23,990
iso é unha chea de cousas, non?
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
>> Ufa.

211
00:10:28,050 --> 00:10:30,110
Isto foi moito que dicir.

212
00:10:30,110 --> 00:10:31,720
É moito escribir, tamén.

213
00:10:31,720 --> 00:10:35,760
E así, en jQuery, podemos talvez dicir
este un pouco máis concisa.

214
00:10:35,760 --> 00:10:39,350
O trade off sendo que é quizais un pouco
pouco máis enigmática, de súpeto,

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

216
00:10:39,850 --> 00:10:43,580
>> Polo menos, o tempo é un pouco máis
explicativo sobre o que estamos facendo.

217
00:10:43,580 --> 00:10:49,947
Este sinal de dólar, parénteses,
Cita único, mestura, colorDiv, non?

218
00:10:49,947 --> 00:10:50,780
Que significa iso?

219
00:10:50,780 --> 00:10:53,640
Ben, iso é basicamente só
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Pero é que este tipo de taquigrafia
xeito de facelo empregando jQuery.

221
00:10:58,700 --> 00:11:01,380
Nós só dar un ollo agora
nun par de formas diferentes

222
00:11:01,380 --> 00:11:04,520
que eu podería realmente
usar este Document Object

223
00:11:04,520 --> 00:11:06,807
Modelo para manipular anacos do meu sitio.

224
00:11:06,807 --> 00:11:09,140
En particular, nós imos
estar traballando manipulación

225
00:11:09,140 --> 00:11:14,090
a cor dun determinado
Div, colorDiv, nunha páxina web.

226
00:11:14,090 --> 00:11:15,299
Entón imos dar un ollo niso.

227
00:11:15,299 --> 00:11:15,798
Todo ben.

228
00:11:15,798 --> 00:11:16,700
Entón, eu estou nunha páxina.

229
00:11:16,700 --> 00:11:20,750
Chámase test.html cando baixar
iso se quere xogar con iso.

230
00:11:20,750 --> 00:11:24,730
E eu teño unha morea de
botóns nesta páxina.

231
00:11:24,730 --> 00:11:27,730
E eu digo funcións individuais
para a cor de fondo, vermello, verde,

232
00:11:27,730 --> 00:11:31,330
laranxa, vermello, azul, unha única función
para a cor de fondo, manipulador de eventos

233
00:11:31,330 --> 00:11:34,360
para a cor de fondo, e usando jQuery.

234
00:11:34,360 --> 00:11:38,147
O que eu estou falando
cando estou a facer iso?

235
00:11:38,147 --> 00:11:39,230
Entón, nós vimos os botóns.

236
00:11:39,230 --> 00:11:41,521
Agora, imos dar un ollo
parte do código fonte aquí.

237
00:11:41,521 --> 00:11:44,770
Imos comezar con test.html.

238
00:11:44,770 --> 00:11:48,100
Así funcións individuais para o fondo
cor é o que eu escriba aquí.

239
00:11:48,100 --> 00:11:49,350
Déixeme rolar un pouco.

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

241
00:11:56,170 --> 00:11:58,820
>> E vai entender que eu
definir estes botóns

242
00:11:58,820 --> 00:12:03,990
dicir cando este botón é premendo,
chamar a función estar vermello.

243
00:12:03,990 --> 00:12:06,670
Cando este botón é prema, en vez,
chamar a función estar verde,

244
00:12:06,670 --> 00:12:08,710
virar laranxa, queda vermello, a cor azul.

245
00:12:08,710 --> 00:12:11,880
Probablemente pode adiviñar que este
quizais non sexa o mellor deseño

246
00:12:11,880 --> 00:12:12,460
sentido, non?

247
00:12:12,460 --> 00:12:16,490
>> Sería bo se eu puidese
teñen unha visión máis xeral.

248
00:12:16,490 --> 00:12:19,570
Ben, primeiro imos dar un ollo
o que eses cinco funcións son

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

250
00:12:24,400 --> 00:12:27,250
verde, laranxa, vermello,
e azul respectivamente.

251
00:12:27,250 --> 00:12:30,930
Entón, non particularmente o mellor deseño.

252
00:12:30,930 --> 00:12:33,390
>> O seguinte conxunto de botóns
Eu teño é que escribín

253
00:12:33,390 --> 00:12:36,380
unha única función chamada
cambio de cor que aparentemente

254
00:12:36,380 --> 00:12:38,960
acepta unha cadea como argumento.

255
00:12:38,960 --> 00:12:40,290
Polo tanto, este é un pouco mellor.

256
00:12:40,290 --> 00:12:43,840
Vermello, verde, laranxa, vermello,
azul é agora un argumento.

257
00:12:43,840 --> 00:12:46,230
Entón eu escribín un máis xeral
función JavaScript caso

258
00:12:46,230 --> 00:12:47,771
o que podería ser algo así.

259
00:12:47,771 --> 00:12:48,680
Estou pasando.

260
00:12:48,680 --> 00:12:52,090
Este cambio de cor función é
esperando un argumento chamado de cor.

261
00:12:52,090 --> 00:12:54,970
E eu digo que o
cor do fondo a cor.

262
00:12:54,970 --> 00:12:58,390
Entón aquí representa o que eu teño aquí.

263
00:12:58,390 --> 00:12:59,770
Entón, iso é un pouco mellor.

264
00:12:59,770 --> 00:13:02,740
>> Pero eu podería ser capaz de
facer mellor que iso.

265
00:13:02,740 --> 00:13:06,140
Se nós imos para abaixo para un ollo
a situación manipulador de eventos,

266
00:13:06,140 --> 00:13:07,860
Agora, todas esas chamadas teñen o mesmo aspecto.

267
00:13:07,860 --> 00:13:10,340
Se lembrar ao noso
discusión sobre manipuladores de eventos,

268
00:13:10,340 --> 00:13:15,770
Podo obter información sobre cal dos
estes botóns foi premendo e usar isto.

269
00:13:15,770 --> 00:13:19,560
>> E así, en event.JavaScript, eu teño
escrita evento de cambio de cor, o que

270
00:13:19,560 --> 00:13:21,110
descobre que botón foi premendo.

271
00:13:21,110 --> 00:13:23,250
Esa é a liña obxecto gatillo.

272
00:13:23,250 --> 00:13:25,240
E, a continuación, aquí, el está moi prolixo.

273
00:13:25,240 --> 00:13:27,420
Pero o que eu estou facendo é que eu son
definindo o fondo

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

275
00:13:30,340 --> 00:13:34,170
Ese é o texto en
entre as etiquetas de botón.

276
00:13:34,170 --> 00:13:36,500
>> E entón eu parecer teñen
configuralo para minúsculas.

277
00:13:36,500 --> 00:13:40,780
E é así que podo converter un enteiro
cadea en minúsculas en JavaScript usando

278
00:13:40,780 --> 00:13:42,940
este método para minúsculas.

279
00:13:42,940 --> 00:13:46,570
Porque cando definir unha cor,
como eu estou tentando facer aquí,

280
00:13:46,570 --> 00:13:48,260
a cor ten que ser todas as letras minúsculas.

281
00:13:48,260 --> 00:13:50,920
>> Pero o botón que eu tiña,
se tomamos outro ollar,

282
00:13:50,920 --> 00:13:55,890
notará que o texto non existe
escrito cun capital P ao roxo.

283
00:13:55,890 --> 00:13:59,140
E, a continuación, no propio
inferior aquí, eu, ao parecer,

284
00:13:59,140 --> 00:14:02,630
tentar facelo empregando jQuery tamén.

285
00:14:02,630 --> 00:14:06,000
E neste caso, eu non son realmente
chamar unha función en todo.

286
00:14:06,000 --> 00:14:11,430
Eu só dixen que a clase que eu son
utilizando para este botón é un botón JQ.

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

288
00:14:12,360 --> 00:14:14,950
>> Entón como é que jQuery sei o que estou facendo?

289
00:14:14,950 --> 00:14:18,740
Pois ben, esta é unha das vantaxes
reducir as desvantaxes de jQuery.

290
00:14:18,740 --> 00:14:21,560
Pode me permite facer cousas
moi concisa, pero quizais non

291
00:14:21,560 --> 00:14:22,570
como intuitivamente.

292
00:14:22,570 --> 00:14:25,570
Quizais os outros tres fan un
pouco máis sentir o que estou facendo.

293
00:14:25,570 --> 00:14:29,010
Aquí, con todo, o que está pasando?

294
00:14:29,010 --> 00:14:31,940
>> Ao parecer, creando
unha función anónima

295
00:14:31,940 --> 00:14:36,790
que leva sempre que o meu documento
Está preparado, entón document.ready,

296
00:14:36,790 --> 00:14:38,760
algunha función que vai ocorrer.

297
00:14:38,760 --> 00:14:40,490
Basicamente, cando é un documento preparado?

298
00:14:40,490 --> 00:14:42,310
É cando a miña páxina cargada.

299
00:14:42,310 --> 00:14:46,540
>> Así, logo que a miña páxina cargada, o
seguinte función está sempre preparado.

300
00:14:46,540 --> 00:14:54,310
El di que, se un obxecto do tipo jQButton,
ou se a clase jQButton foi premendo,

301
00:14:54,310 --> 00:14:55,570
cabo esta función.

302
00:14:55,570 --> 00:14:59,360
Entón aquí está dúas funcións anónimas,
unha definida dentro da outra.

303
00:14:59,360 --> 00:15:03,930
>> Entón, toda a miña contexto
aquí ata agora é a miña páxina

304
00:15:03,930 --> 00:15:06,520
cando leva el chama esa función.

305
00:15:06,520 --> 00:15:09,740
E esta función está esperando
por un botón para ser premendo.

306
00:15:09,740 --> 00:15:14,490
E cando un botón é premendo, JQ
botón é premendo en concreto,

307
00:15:14,490 --> 00:15:17,150
el chama iso de outra
función, o que está pasando

308
00:15:17,150 --> 00:15:21,250
a definir o fondo
cor a ser de colorDiv

309
00:15:21,250 --> 00:15:25,990
calquera texto que está entre as etiquetas.

310
00:15:25,990 --> 00:15:28,050
>> Esta é a noción de
cal botón foi premendo.

311
00:15:28,050 --> 00:15:31,230
Pero, se non, este é o tipo de
comportándose semellante a un evento.

312
00:15:31,230 --> 00:15:34,460
É só a mesma forma que eu
podería expresar isto jQuery.

313
00:15:34,460 --> 00:15:36,790
Unha vez máis, pode ser un
moito máis intimidante.

314
00:15:36,790 --> 00:15:40,840
Non é tan claro como
algo así como event.js,

315
00:15:40,840 --> 00:15:45,080
que é quizais un pouco máis
detallado, pero un pouco menos

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

317
00:15:46,000 --> 00:15:51,460
>> Pero se nós pop ao seu navegador
ventá, se eu comezar clicking-- ben,

318
00:15:51,460 --> 00:15:52,690
que cambiou a vermello.

319
00:15:52,690 --> 00:15:54,450
Esta é verde mediante a entrada cadea.

320
00:15:54,450 --> 00:15:56,500
Este é laranxa usando o manipulador de eventos.

321
00:15:56,500 --> 00:15:58,300
>> Este é vermello usando jQuery, non?

322
00:15:58,300 --> 00:16:01,270
Todos eles se comportan exactamente o mesmo.

323
00:16:01,270 --> 00:16:06,509
Eles só fan-lo usando diferentes
propostas para resolver o problema.

324
00:16:06,509 --> 00:16:08,550
Hai moito máis para
jQuery entón estamos certamente

325
00:16:08,550 --> 00:16:10,050
vai falar neste vídeo.

326
00:16:10,050 --> 00:16:15,410
Pero se queres saber máis, podes
ir ao tipo de documentación jQuery

327
00:16:15,410 --> 00:16:19,710
e aprender un pouco máis sobre
esta biblioteca moi flexible, que

328
00:16:19,710 --> 00:16:22,550
é óptimo para facer do lado do cliente
script, como o que estabamos facendo

329
00:16:22,550 --> 00:16:26,240
para manipular o aspecto
e sentir da nosa páxina web

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

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

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

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