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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: Neste vídeo, queríamos
para chamar a atenção separado

3
00:00:07,230 --> 00:00:09,110
a uma muito particular
elemento de JavaScript

4
00:00:09,110 --> 00:00:11,350
que você pode achar útil
quando você está começando

5
00:00:11,350 --> 00:00:15,750
para trabalhar na manipulação de páginas da web e
alterando o conteúdo da sua página web

6
00:00:15,750 --> 00:00:16,460
no vôo.

7
00:00:16,460 --> 00:00:19,450
E essa é a noção de
Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Assim como vimos no nosso vídeo sobre
JavaScript, objetos são muito flexíveis.

9
00:00:23,030 --> 00:00:24,750
>> E eles podem conter vários campos.

10
00:00:24,750 --> 00:00:28,075
E embora nós não ir para um monte de
detalhe, esses campos ou propriedades,

11
00:00:28,075 --> 00:00:30,200
que seria provavelmente mais
chamá-los de forma adequada

12
00:00:30,200 --> 00:00:33,915
no contexto de um objecto, mesmo
essas propriedades pode haver outros objectos.

13
00:00:33,915 --> 00:00:36,210
E dentro desses objetos
pode haver outros objectos.

14
00:00:36,210 --> 00:00:39,630
>> Você tem este objeto muito grande
com um monte de outros objetos

15
00:00:39,630 --> 00:00:43,550
dentro dele, que tipo de
cria essa idéia de uma grande árvore.

16
00:00:43,550 --> 00:00:47,540
Agora, o objeto documento é um
muito especial objeto em JavaScript

17
00:00:47,540 --> 00:00:52,580
que organiza toda a sua web
artigo sob este tipo de guarda-chuva

18
00:00:52,580 --> 00:00:53,470
de um objeto.

19
00:00:53,470 --> 00:00:56,770
E assim, no interior do documento
objeto são objetos que apresentam

20
00:00:56,770 --> 00:00:59,630
a cabeça eo corpo de sua página web.

21
00:00:59,630 --> 00:01:03,760
>> Dentro daqueles são outra
objetos, et cetera, et cetera,

22
00:01:03,760 --> 00:01:08,411
até que toda a sua página web tem
foi organizada neste grande objeto.

23
00:01:08,411 --> 00:01:09,660
Qual é a cabeça aqui, certo?

24
00:01:09,660 --> 00:01:12,170
Bem, sabemos como trabalhar
com objetos em JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Então, se temos um objeto que
refere-se a toda a página web, que

26
00:01:15,840 --> 00:01:19,590
significa chamando o correto
métodos para manipular esse objeto

27
00:01:19,590 --> 00:01:22,360
ou modificar certos
de suas propriedades,

28
00:01:22,360 --> 00:01:25,500
pode mudar os elementos de
nossa página programaticamente

29
00:01:25,500 --> 00:01:30,210
usando JavaScript em vez de ter
codificar as coisas com, digamos, HTML.

30
00:01:30,210 --> 00:01:33,760
Então aqui está um exemplo de uma
muito simples página web, certo?

31
00:01:33,760 --> 00:01:35,850
Tem tags HTML, uma cabeça.

32
00:01:35,850 --> 00:01:37,979
>> Dentro de há um título, Olá mundo.

33
00:01:37,979 --> 00:01:38,770
Então eu tenho um corpo.

34
00:01:38,770 --> 00:01:40,686
Dentro disso, eu tenho
três coisas diferentes.

35
00:01:40,686 --> 00:01:44,170
Eu tenho uma tag de cabeçalho h2,
um parágrafo, e um link.

36
00:01:44,170 --> 00:01:45,920
Esta é uma página web muito simples.

37
00:01:45,920 --> 00:01:48,590
>> Bem, o que pode o documento
objeto para este olhar como?

38
00:01:48,590 --> 00:01:50,700
Bem, é um pouco
assustador talvez em primeiro lugar.

39
00:01:50,700 --> 00:01:52,510
Mas é realmente apenas uma grande árvore.

40
00:01:52,510 --> 00:01:54,890
E na própria raiz do que é documento.

41
00:01:54,890 --> 00:02:00,030
>> Dentro do documento é outra
objeto referindo-se ao HTML da minha página.

42
00:02:00,030 --> 00:02:02,660
E o HTML da minha página é tudo isso.

43
00:02:02,660 --> 00:02:06,900
E, em seguida, dentro do HTML
objeto, eu tenho um objeto cabeça,

44
00:02:06,900 --> 00:02:09,000
que se refere a tudo o que há.

45
00:02:09,000 --> 00:02:11,009
>> E lá dentro,
Eu tenho um objeto título.

46
00:02:11,009 --> 00:02:15,620
E lá dentro, tenho outra
objetar que é apenas Olá mundo.

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

48
00:02:18,020 --> 00:02:22,850
>> Dentro do meu corpo, eu tenho uma h2
objeto e um objeto para p parágrafo

49
00:02:22,850 --> 00:02:25,270
e um um objeto para um link.

50
00:02:25,270 --> 00:02:29,660
E assim este toda hierarquia
pode ser representada como uma grande árvore

51
00:02:29,660 --> 00:02:31,990
com lotes de pouco menor
coisas que vem de fora.

52
00:02:31,990 --> 00:02:33,740
Agora, é claro, quando
estamos programando, nós

53
00:02:33,740 --> 00:02:35,560
não pensar em coisas como uma grande árvore.

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

55
00:02:37,980 --> 00:02:40,790
>> E, felizmente, nós podemos
usar nossas ferramentas de desenvolvimento

56
00:02:40,790 --> 00:02:46,080
para realmente dar uma olhada
objeto de documento deste site.

57
00:02:46,080 --> 00:02:48,150
E vamos fazer isso.

58
00:02:48,150 --> 00:02:49,580
Então, eu abri uma aba do navegador.

59
00:02:49,580 --> 00:02:51,540
>> E eu abri Developer Tools.

60
00:02:51,540 --> 00:02:54,460
E no meu vídeo em JavaScript, I
mencionou que o console não é

61
00:02:54,460 --> 00:02:56,770
única em algum lugar onde
nós imprimimos a informação,

62
00:02:56,770 --> 00:02:59,560
é também um lugar onde
nós pode inserir informações.

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

64
00:03:01,380 --> 00:03:05,720
Eu gostaria de voltar
os objetos de documento,

65
00:03:05,720 --> 00:03:07,502
para que eu possa começar a ter um olhar para ele.

66
00:03:07,502 --> 00:03:08,460
Então, como eu poderia fazer isso?

67
00:03:08,460 --> 00:03:10,740
Bem, se eu quiser
organizá-lo realmente bem,

68
00:03:10,740 --> 00:03:16,317
Eu vou dizer console.dir, D-I-R.
Agora, eu uso apenas console.log para impressão

69
00:03:16,317 --> 00:03:17,400
algo muito simples.

70
00:03:17,400 --> 00:03:20,450
Mas se eu quiser organizar este
hierarquicamente como um objeto,

71
00:03:20,450 --> 00:03:23,800
Eu quero que tipo de estrutura
como uma estrutura de diretório.

72
00:03:23,800 --> 00:03:27,400
>> Então, eu quero console.dir documento.

73
00:03:27,400 --> 00:03:28,430
Eu vou bater Enter.

74
00:03:28,430 --> 00:03:32,350
E logo abaixo dela agora,
e eu vou fazer zoom aqui,

75
00:03:32,350 --> 00:03:36,000
Eu tenho esse documento de resposta
com uma pequena seta ao lado dele.

76
00:03:36,000 --> 00:03:39,470
Agora, quando eu abrir esta seta,
lá vai ser um monte de coisas.

77
00:03:39,470 --> 00:03:42,560
>> Mas vamos ignorar um monte
do mesmo e apenas uma espécie de foco

78
00:03:42,560 --> 00:03:46,250
sobre a parte mais importante, por isso,
pode começar a navegar neste documento.

79
00:03:46,250 --> 00:03:50,125
Há muito mais para o DOM do que
apenas pai nós e nós filho.

80
00:03:50,125 --> 00:03:51,500
Há um monte de coisas acessórias.

81
00:03:51,500 --> 00:03:52,280
>> Então, eu vou abrir isso.

82
00:03:52,280 --> 00:03:54,610
E há um lote inteiro
de coisas que aparece.

83
00:03:54,610 --> 00:03:59,000
Mas tudo o que me interessa é
aqui, nós filho.

84
00:03:59,000 --> 00:04:00,410
Vamos abrir isso.

85
00:04:00,410 --> 00:04:03,810
>> Dentro de lá eu ver
algo familiar, HTML.

86
00:04:03,810 --> 00:04:07,670
Então, dentro do nosso documento
Um nível baixo, HTML.

87
00:04:07,670 --> 00:04:08,550
Eu abro isso.

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

89
00:04:10,380 --> 00:04:13,760
>> Se você se lembrar do nosso diagrama,
o que devemos encontrar no interior de HTML?

90
00:04:13,760 --> 00:04:17,275
O que dois nós são abaixo dele na árvore?

91
00:04:17,275 --> 00:04:17,899
Vamos descobrir.

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

93
00:04:18,940 --> 00:04:22,079
Descemos para seus nós filho.

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

95
00:04:23,440 --> 00:04:25,990
Há cabeça e do corpo.

96
00:04:25,990 --> 00:04:28,540
E nós podemos abrir a cabeça.

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

98
00:04:30,460 --> 00:04:31,460
Bem, há o título.

99
00:04:31,460 --> 00:04:33,293
>> E poderíamos continuar e
assim para sempre.

100
00:04:33,293 --> 00:04:34,770
Nós poderíamos fazer isso com o corpo também.

101
00:04:34,770 --> 00:04:40,090
Mas há uma maneira de olhar para
o documento organizada como uma grande objecto.

102
00:04:40,090 --> 00:04:42,610
E se olharmos para um grande
objeto que se parece muito

103
00:04:42,610 --> 00:04:47,480
como código, o que significa que podemos começar
para manipular esse grande objeto usando

104
00:04:47,480 --> 00:04:51,220
código para alterar o que o nosso
site olha e sente como.

105
00:04:51,220 --> 00:04:54,920
>> Então essa é uma ferramenta muito poderosa
temos à nossa disposição agora.

106
00:04:54,920 --> 00:04:57,360
Então, como acabamos de ver, o
documento próprio objeto

107
00:04:57,360 --> 00:05:01,392
e todos os objectos no interior da mesma
têm propriedades e métodos, apenas

108
00:05:01,392 --> 00:05:04,100
como qualquer outro objeto que nós temos
vindo a trabalhar com em JavaScript.

109
00:05:04,100 --> 00:05:08,370
Mas podemos usar essas propriedades e
utilizar os mesmos métodos de tipo de drill down

110
00:05:08,370 --> 00:05:10,900
a partir do documento grande e obter
menor e mais e mais,

111
00:05:10,900 --> 00:05:13,360
mais fina grãos
de detalhe, até que

112
00:05:13,360 --> 00:05:17,510
chegar a uma parte muito específica do nosso
A página web que queremos mudar.

113
00:05:17,510 --> 00:05:22,700
>> E quando nós atualizamos propriedades do
Objeto de documento ou chamar esses métodos,

114
00:05:22,700 --> 00:05:24,450
as coisas podem acontecer em nossa página web.

115
00:05:24,450 --> 00:05:28,420
E não precisa fazer qualquer refrescante
para que essas alterações tenham efeito.

116
00:05:28,420 --> 00:05:33,160
>> E isso é uma habilidade muito legal
temos quando estamos trabalhando com o código.

117
00:05:33,160 --> 00:05:37,185
Então, quais são algumas dessas propriedades
que fazem parte de um objeto de documento?

118
00:05:37,185 --> 00:05:40,100
Bem, você provavelmente viu um
alguns deles muito rapidamente

119
00:05:40,100 --> 00:05:42,700
como estávamos fechando
através do documento gigante

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

121
00:05:45,150 --> 00:05:48,420
>> Mas um par dessas propriedades
pode ser coisas como HTML interior.

122
00:05:48,420 --> 00:05:52,950
E você pode até lembrar-me
usando este vídeo no JavaScript

123
00:05:52,950 --> 00:05:54,950
no final, quando eu
estava falando sobre os eventos.

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

125
00:05:56,125 --> 00:05:59,030
Bem, é apenas o que é
entre as tags.

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

127
00:06:01,590 --> 00:06:05,390
tag, se tivéssemos continuou indo em
que exemplo de um momento atrás,

128
00:06:05,390 --> 00:06:08,020
teria sido Olá mundo.

129
00:06:08,020 --> 00:06:10,140
Esse foi o título da nossa página.

130
00:06:10,140 --> 00:06:12,370
Outras propriedades
incluir o nome do nó, o que

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

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

133
00:06:19,100 --> 00:06:23,790
>> Lembre-se que nós podemos indicar especialmente
elementos específicos do nosso HTML

134
00:06:23,790 --> 00:06:27,510
com um atributo ID, que geralmente
vem a calhar 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 é uma referência ao
o que é apenas acima de mim no DOM.

137
00:06:33,217 --> 00:06:35,800
E nós filho, que é um
referência ao que está abaixo de mim.

138
00:06:35,800 --> 00:06:37,950
E nós vimos um monte de que
só de olhar através.

139
00:06:37,950 --> 00:06:42,970
Nós filho, isso é como chegamos
mais e mais na árvore.

140
00:06:42,970 --> 00:06:46,590
>> Atributos, isso é apenas uma matriz
de atributos do elemento HTML.

141
00:06:46,590 --> 00:06:50,270
Assim, um exemplo de atributos pode
se você tem uma tag de imagem,

142
00:06:50,270 --> 00:06:54,090
geralmente tem um atributo de origem,
talvez uma altura e um atributo de largura.

143
00:06:54,090 --> 00:06:57,120
E para que seria apenas um array
de todos os atributos associados

144
00:06:57,120 --> 00:06:59,300
com esse elemento de HTML.

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

146
00:07:04,140 --> 00:07:06,050
estilo de um elemento em particular.

147
00:07:06,050 --> 00:07:08,310
E mais adiante neste
vídeo, vamos especificamente

148
00:07:08,310 --> 00:07:14,592
estilo de alavanca para fazer um casal
das alterações ao nosso site.

149
00:07:14,592 --> 00:07:15,800
Portanto, estas são algumas propriedades.

150
00:07:15,800 --> 00:07:17,591
>> E há também alguns são
métodos que podemos

151
00:07:17,591 --> 00:07:22,450
para usar também mais rapidamente talvez isolar
elementos do objeto de documento.

152
00:07:22,450 --> 00:07:26,730
Talvez, o mais versátil
destes que são getElementById.

153
00:07:26,730 --> 00:07:31,190
Então, eu poderia dizer algo como, porque
lembre-se que é um método do Documento

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

155
00:07:34,880 --> 00:07:39,820
>> E dentro desses parênteses, especifique
um elemento HTML com um determinado ID

156
00:07:39,820 --> 00:07:42,330
atributo que eu tenho previamente
definido, e eu vou imediatamente

157
00:07:42,330 --> 00:07:46,685
vá para a direita a esse elemento
do website global.

158
00:07:46,685 --> 00:07:49,310
Então eu não tenho para perfurar talvez
para baixo através de cada camada única.

159
00:07:49,310 --> 00:07:52,841
Eu só posso usar esse método para encontrá-lo,
como uma espécie de míssil busca de calor,

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

161
00:07:53,340 --> 00:07:56,300
Ele só vai e encontra
exatamente o que está procurando.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName é
muito semelhante em espírito.

163
00:07:59,290 --> 00:08:02,500
Talvez isso iria encontrar todas as
tags em negrito ou todas as tags p

164
00:08:02,500 --> 00:08:05,920
e me dar uma matriz de tudo
que eu poderia, então, trabalhar com ele.

165
00:08:05,920 --> 00:08:12,080
appendChild acrescenta algo
um nível abaixo na árvore.

166
00:08:12,080 --> 00:08:16,440
>> Então, eu posso adicionar um novo inteiro
um elemento de nível mais baixo.

167
00:08:16,440 --> 00:08:19,700
Ou eu posso remover um elemento que é
Um nível mais baixo também se eu quiser

168
00:08:19,700 --> 00:08:22,870
para apagar algo da minha página web.

169
00:08:22,870 --> 00:08:28,480
Agora, uma nota de codificação rápida e um rápido
dor de cabeça poupança 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 não posso te dizer quantas vezes eu tenho
usado getElementById e capitalizado

172
00:08:36,950 --> 00:08:38,336
a d lá.

173
00:08:38,336 --> 00:08:39,460
Porque é muito comum.

174
00:08:39,460 --> 00:08:42,990
Se escrever a palavra ID, é
Eu geralmente de capital de capital D.

175
00:08:42,990 --> 00:08:44,240
E meu código simplesmente não funciona.

176
00:08:44,240 --> 00:08:45,630
E eu não consigo descobrir o porquê.

177
00:08:45,630 --> 00:08:49,490
Este é realmente, realmente, realmente
bug comum que todo mundo faz,

178
00:08:49,490 --> 00:08:51,890
mesmo os especialistas que têm
vem fazendo isso para sempre.

179
00:08:51,890 --> 00:08:55,410
Então, basta estar ciente, getElementById,
que d é minúscula.

180
00:08:55,410 --> 00:09:00,080
E, esperamos, que poupa-lhe vários
minutos a menos de dor de cabeça.

181
00:09:00,080 --> 00:09:02,204
>> Então, o que tudo isso nos diz?

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

183
00:09:03,120 --> 00:09:04,161
Temos essas propriedades.

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

185
00:09:06,610 --> 00:09:10,220
o que quer, agora podemos chegar a qualquer
peças da nossa página web

186
00:09:10,220 --> 00:09:14,870
que queremos usando JavaScript
apenas chamando esses métodos

187
00:09:14,870 --> 00:09:19,940
e alavancar as propriedades
que encontramos em vários locais.

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

189
00:09:24,890 --> 00:09:28,560
talvez ter um nome de marca por muito tempo,
talvez você fazer mais chamadas mais tarde.

190
00:09:28,560 --> 00:09:31,230
As coisas podem ficar um pouco prolixo.

191
00:09:31,230 --> 00:09:34,480
E, como programadores, como você
provavelmente já viu em muitos desses vídeos,

192
00:09:34,480 --> 00:09:36,600
nós não gostamos de coisas prolixos.

193
00:09:36,600 --> 00:09:38,520
>> Nós gostamos de ser capaz de fazer as coisas rapidamente.

194
00:09:38,520 --> 00:09:42,640
Então, nós gostaríamos de uma mais
forma concisa para dizer alguma coisa.

195
00:09:42,640 --> 00:09:46,270
Portanto, este tipo de leads para o
noção de algo chamado jQuery.

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

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

198
00:09:50,350 --> 00:09:54,790
>> É uma biblioteca que foi escrita
por alguns programadores de JavaScript

199
00:09:54,790 --> 00:09:57,060
cerca de 10 anos atrás.

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

201
00:10:01,300 --> 00:10:04,310
é basicamente o que nós estávamos apenas
falando com manipulações DOM.

202
00:10:04,310 --> 00:10:11,090
E assim se eu quisesse modificar o
cor da minha página web fundo, talvez

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

204
00:10:11,980 --> 00:10:15,325
>> Aqui, eu estou ficando aparentemente
ElementById colorDiv.

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

206
00:10:16,950 --> 00:10:20,720
Se eu estou usando apenas puro JavaScript
usando o Document Object Model,

207
00:10:20,720 --> 00:10:23,990
isso é um monte de coisas, certo?
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
Isso foi muito a dizer.

212
00:10:30,110 --> 00:10:31,720
É um monte de digitar, também.

213
00:10:31,720 --> 00:10:35,760
E assim, em jQuery, podemos talvez dizer
este um pouco mais concisa.

214
00:10:35,760 --> 00:10:39,350
O trade off sendo que é talvez um pouco
pouco mais enigmática, de repente,

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

216
00:10:39,850 --> 00:10:43,580
>> Pelo menos, o tempo é um pouco mais
explicativo sobre o que estamos fazendo.

217
00:10:43,580 --> 00:10:49,947
Este sinal de dólar, parênteses,
Citação único, mistura, colorDiv, certo?

218
00:10:49,947 --> 00:10:50,780
O que isso significa?

219
00:10:50,780 --> 00:10:53,640
Bem, isso é basicamente apenas
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Mas é este tipo de taquigrafia
maneira de fazê-lo usando jQuery.

221
00:10:58,700 --> 00:11:01,380
Vamos apenas dar uma olhada agora
em um par de maneiras diferentes

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

223
00:11:04,520 --> 00:11:06,807
Modelo para manipular pedaços do meu site.

224
00:11:06,807 --> 00:11:09,140
Em particular, nós vamos
estar trabalhando em manipulação

225
00:11:09,140 --> 00:11:14,090
a cor de um determinado
Div, colorDiv, em uma página web.

226
00:11:14,090 --> 00:11:15,299
Então vamos dar uma olhada nisso.

227
00:11:15,299 --> 00:11:15,798
Tudo certo.

228
00:11:15,798 --> 00:11:16,700
Então, eu estou em uma página.

229
00:11:16,700 --> 00:11:20,750
É chamado test.html quando você baixar
isso se você quer mexer com isso.

230
00:11:20,750 --> 00:11:24,730
E eu tenho um monte de
botões nesta página.

231
00:11:24,730 --> 00:11:27,730
E eu estou dizendo funções individuais
para a cor de fundo, roxo, verde,

232
00:11:27,730 --> 00:11:31,330
laranja, vermelho, azul, uma única função
para a cor de fundo, manipulador de eventos

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

234
00:11:34,360 --> 00:11:38,147
O que eu estou falando
quando eu estou fazendo isso?

235
00:11:38,147 --> 00:11:39,230
Então, nós vimos os botões.

236
00:11:39,230 --> 00:11:41,521
Agora, vamos dar uma olhada
parte do código fonte aqui.

237
00:11:41,521 --> 00:11:44,770
Vamos começar com test.html.

238
00:11:44,770 --> 00:11:48,100
Assim funções individuais para o fundo
cor é o que eu digitei aqui.

239
00:11:48,100 --> 00:11:49,350
Deixe-me rolar um pouco.

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

241
00:11:56,170 --> 00:11:58,820
>> E você vai perceber que eu
ter definido estes botões

242
00:11:58,820 --> 00:12:03,990
dizer quando este botão é clicado,
chamar a função ficar roxo.

243
00:12:03,990 --> 00:12:06,670
Quando este botão é clique, ao invés,
chamar a função ficar verde,

244
00:12:06,670 --> 00:12:08,710
virar laranja, fica vermelho, a cor azul.

245
00:12:08,710 --> 00:12:11,880
Você provavelmente pode adivinhar que este
talvez não seja o melhor design

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

247
00:12:12,460 --> 00:12:16,490
>> Seria bom se eu pudesse
têm uma abordagem mais geral.

248
00:12:16,490 --> 00:12:19,570
Bem, primeiro vamos dar uma olhada
o que esses cinco funções são

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

250
00:12:24,400 --> 00:12:27,250
verde, laranja, vermelho,
e azul, respectivamente.

251
00:12:27,250 --> 00:12:30,930
Então, não particularmente o melhor design.

252
00:12:30,930 --> 00:12:33,390
>> O próximo conjunto de botões
Eu tenho é que eu escrevi

253
00:12:33,390 --> 00:12:36,380
uma única função chamada
mudança de cor que aparentemente

254
00:12:36,380 --> 00:12:38,960
aceita uma string como argumento.

255
00:12:38,960 --> 00:12:40,290
Portanto, este é um pouco melhor.

256
00:12:40,290 --> 00:12:43,840
Roxo, verde, laranja, vermelho,
azul é agora um argumento.

257
00:12:43,840 --> 00:12:46,230
Então eu escrevi um mais geral
função JavaScript caso,

258
00:12:46,230 --> 00:12:47,771
o que poderia ser algo como isto.

259
00:12:47,771 --> 00:12:48,680
Eu estou passando.

260
00:12:48,680 --> 00:12:52,090
Esta mudança de cor função é
esperando um argumento chamado de cor.

261
00:12:52,090 --> 00:12:54,970
E eu estou dizendo definir o
cor do fundo a cor.

262
00:12:54,970 --> 00:12:58,390
Então aqui representa o que eu tenho aqui.

263
00:12:58,390 --> 00:12:59,770
Então, isso é um pouco melhor.

264
00:12:59,770 --> 00:13:02,740
>> Mas eu poderia ser capaz de
fazer melhor do que isso.

265
00:13:02,740 --> 00:13:06,140
Se nós vamos para baixo para dar uma olhada
a situação manipulador de eventos,

266
00:13:06,140 --> 00:13:07,860
Agora, todas essas chamadas têm a mesma aparência.

267
00:13:07,860 --> 00:13:10,340
Se você lembrar para o nosso
discussão sobre manipuladores de eventos,

268
00:13:10,340 --> 00:13:15,770
Posso obter informações sobre qual dos
estes botões foi clicado e usar isso.

269
00:13:15,770 --> 00:13:19,560
>> E assim, em event.JavaScript, eu tenho
escrita evento de alteração de cor, o que

270
00:13:19,560 --> 00:13:21,110
descobre qual botão foi clicado.

271
00:13:21,110 --> 00:13:23,250
Essa é a linha objeto gatilho.

272
00:13:23,250 --> 00:13:25,240
E, em seguida, aqui, ele fica muito prolixo.

273
00:13:25,240 --> 00:13:27,420
Mas o que eu estou fazendo é que eu sou
definindo o fundo

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

275
00:13:30,340 --> 00:13:34,170
Esse é o texto em
entre as tags de botão.

276
00:13:34,170 --> 00:13:36,500
>> E então eu aparentemente têm
configurá-lo para minúsculas.

277
00:13:36,500 --> 00:13:40,780
E é assim que eu posso converter um inteiro
cadeia para minúsculas em JavaScript usando

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

279
00:13:42,940 --> 00:13:46,570
Porque quando eu definir uma cor,
como eu estou tentando fazer aqui,

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

281
00:13:48,260 --> 00:13:50,920
>> Mas o botão que eu tinha,
se tomarmos um outro olhar,

282
00:13:50,920 --> 00:13:55,890
notará que o texto não existe
escrito com um capital P para o roxo.

283
00:13:55,890 --> 00:13:59,140
E, em seguida, no próprio
inferior aqui, eu, aparentemente,

284
00:13:59,140 --> 00:14:02,630
tentar fazer isso usando jQuery também.

285
00:14:02,630 --> 00:14:06,000
E, neste caso, eu não sou realmente
chamar uma função em tudo.

286
00:14:06,000 --> 00:14:11,430
Eu apenas disse que a classe que eu sou
utilizando para este botão é um botão jQ.

287
00:14:11,430 --> 00:14:12,360
É isso aí.

288
00:14:12,360 --> 00:14:14,950
>> Então como é que jQuery sei o que estou fazendo?

289
00:14:14,950 --> 00:14:18,740
Pois bem, esta é uma das vantagens
reduzir as desvantagens de jQuery.

290
00:14:18,740 --> 00:14:21,560
Ele pode me permite fazer coisas
muito concisa, mas talvez não

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

292
00:14:22,570 --> 00:14:25,570
Talvez os outros três fazem um
pouco mais sentir o que estou fazendo.

293
00:14:25,570 --> 00:14:29,010
Aqui, porém, o que está acontecendo?

294
00:14:29,010 --> 00:14:31,940
>> Aparentemente, criando
uma função anônima

295
00:14:31,940 --> 00:14:36,790
que carrega sempre que o meu documento
está pronto, então document.ready,

296
00:14:36,790 --> 00:14:38,760
alguma função que vai acontecer.

297
00:14:38,760 --> 00:14:40,490
Basicamente, quando é um documento pronto?

298
00:14:40,490 --> 00:14:42,310
É quando a minha página foi carregada.

299
00:14:42,310 --> 00:14:46,540
>> Assim, logo que a minha página foi carregada, o
seguinte função está sempre pronto.

300
00:14:46,540 --> 00:14:54,310
Ele diz que, se um objeto do tipo jQButton,
ou se a classe jQButton foi clicado,

301
00:14:54,310 --> 00:14:55,570
executar esta função.

302
00:14:55,570 --> 00:14:59,360
Então aqui está duas funções anônimas,
uma definida no interior da outra.

303
00:14:59,360 --> 00:15:03,930
>> Então, toda a minha contexto
aqui até agora é a minha página

304
00:15:03,930 --> 00:15:06,520
quando ele carrega ele chama essa função.

305
00:15:06,520 --> 00:15:09,740
E esta função está esperando
por um botão para ser clicado.

306
00:15:09,740 --> 00:15:14,490
E quando um botão é clicado, jQ
botão é clicado especificamente,

307
00:15:14,490 --> 00:15:17,150
ele chama isso de outra
função, o que está acontecendo

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

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

310
00:15:25,990 --> 00:15:28,050
>> Esta é a noção de
qual botão foi clicado.

311
00:15:28,050 --> 00:15:31,230
Mas, caso contrário, este é o tipo de
comportando semelhante a um evento.

312
00:15:31,230 --> 00:15:34,460
É apenas a mesma maneira que eu
poderia expressar isso em jQuery.

313
00:15:34,460 --> 00:15:36,790
Mais uma vez, é provavelmente um
muito mais intimidante.

314
00:15:36,790 --> 00:15:40,840
Não é tão claro como
algo como event.js,

315
00:15:40,840 --> 00:15:45,080
que é talvez um pouco mais
detalhado, mas um pouco menos

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

317
00:15:46,000 --> 00:15:51,460
>> Mas se nós pop de volta para o meu navegador
janela, se eu começar clicking-- bem,

318
00:15:51,460 --> 00:15:52,690
que mudou para roxo.

319
00:15:52,690 --> 00:15:54,450
Esta é verde utilizando o método string.

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

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

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

323
00:16:01,270 --> 00:16:06,509
Eles apenas fazem-lo usando diferentes
abordagens para resolver o problema.

324
00:16:06,509 --> 00:16:08,550
Há muito mais para
jQuery então estamos certamente

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

326
00:16:10,050 --> 00:16:15,410
Mas se você quiser saber mais, você pode
ir para o tipo de documentação jQuery

327
00:16:15,410 --> 00:16:19,710
e aprender um pouco mais sobre
esta biblioteca muito flexível, que

328
00:16:19,710 --> 00:16:22,550
é ótimo para fazer do lado do cliente
script, como o que estávamos fazendo

329
00:16:22,550 --> 00:16:26,240
para manipular a aparência
e sentir da nossa página web

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

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

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

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