1
00:00:00,000 --> 00:00:10,632

2
00:00:10,632 --> 00:00:12,340
ALLISON Buchholtz-AU:
All todos direita.

3
00:00:12,340 --> 00:00:13,520
Bem-vindo de volta à seção.

4
00:00:13,520 --> 00:00:15,315
É a nossa penúltima secção.

5
00:00:15,315 --> 00:00:16,542
É tão triste.

6
00:00:16,542 --> 00:00:19,500
Eu não sei o que eu vou fazer
sem ver vocês toda segunda-feira.

7
00:00:19,500 --> 00:00:20,970
Eu acho que devemos só--
Talvez pudéssemos apenas

8
00:00:20,970 --> 00:00:22,710
encontram-se aqui e jantar ou algo assim.

9
00:00:22,710 --> 00:00:23,270
Eu não sei.

10
00:00:23,270 --> 00:00:24,370
Vou trazer comida em vez.

11
00:00:24,370 --> 00:00:26,290
Nós vamos apenas falar.

12
00:00:26,290 --> 00:00:29,900
Mas sim, na próxima semana vai
ser a nossa última seção.

13
00:00:29,900 --> 00:00:32,390
>> Na mesma nota, você tem um teste na próxima semana.

14
00:00:32,390 --> 00:00:35,660
Eu sei que eu esqueci de fazer o meu, como,
duas semanas de antecedência, na semana passada,

15
00:00:35,660 --> 00:00:39,140
Mas espero que vocês
sabia que isso ia acontecer.

16
00:00:39,140 --> 00:00:42,880
Esperemos que este é um dos últimos
midterms para vocês para o semestre.

17
00:00:42,880 --> 00:00:46,950
Mas que vai cobrir toda a
material que temos ido mais.

18
00:00:46,950 --> 00:00:50,811
Portanto, não é como você pode simplesmente esquecer
cerca de quatro laços ou variáveis.

19
00:00:50,811 --> 00:00:52,560
Porque nós aprendemos
aqueles no início,

20
00:00:52,560 --> 00:00:55,870
aqueles são obviamente
jogo justo para o seu quiz.

21
00:00:55,870 --> 00:01:00,150
>> Vai ser o mesmo formato, mesmo
comprimento, de modo que você já está acostumado com isso.

22
00:01:00,150 --> 00:01:02,330
Não vai ser
codificação por problemas de mão,

23
00:01:02,330 --> 00:01:06,270
talvez algum verdadeiro falso,
talvez alguma resposta curta.

24
00:01:06,270 --> 00:01:08,090
Então você deve ser
familiarizados com o formato,

25
00:01:08,090 --> 00:01:10,940
especialmente se você levar
os testes práticos.

26
00:01:10,940 --> 00:01:13,950
Mas como eu digo aqui, é
cumulativo, mas estamos definitivamente

27
00:01:13,950 --> 00:01:17,410
vai se concentrar em
coisas de semana seis em diante.

28
00:01:17,410 --> 00:01:24,050
Então, nós estamos provavelmente não vai
perguntar-lhe sobre quantos bytes

29
00:01:24,050 --> 00:01:26,180
são em cada tipo ou
esses tipos de coisas,

30
00:01:26,180 --> 00:01:29,730
mas estamos provavelmente vai ser
interessado em coisas como listas ligadas,

31
00:01:29,730 --> 00:01:32,750
ou diferentes estruturas de dados,
ou algoritmos diferentes

32
00:01:32,750 --> 00:01:33,960
que nós já conversamos sobre.

33
00:01:33,960 --> 00:01:38,990
Portanto, verifique se você está realmente
-se sobre aqueles, e se você

34
00:01:38,990 --> 00:01:41,590
precisa de recursos,
aqui está um monte de recursos.

35
00:01:41,590 --> 00:01:44,790
Eu só te dei tipo
de uma lista rápida lá.

36
00:01:44,790 --> 00:01:48,330
>> Na próxima semana será questionário
rever durante este tempo.

37
00:01:48,330 --> 00:01:52,290
Então, se você tiver alguma dúvida
ou temas específicos,

38
00:01:52,290 --> 00:01:56,180
coisas específicas sobre o quiz que
você gostaria de passar por cima, por favor

39
00:01:56,180 --> 00:02:01,780
enviá-los para mim antes do tempo para que eu possa
tipo de preparar algum material para isso.

40
00:02:01,780 --> 00:02:06,310
E para além disso
avaliação seção, vamos

41
00:02:06,310 --> 00:02:09,616
também estar segurando o curso à escala
avaliar como fizemos da última vez.

42
00:02:09,616 --> 00:02:11,490
E isso vai ser
feito pelas mesmas pessoas.

43
00:02:11,490 --> 00:02:13,030
Eu não sei se isso
faz com que seja melhor ou pior,

44
00:02:13,030 --> 00:02:15,670
mas vai ser de mim,
Hannah, Davan, e Gabe novamente.

45
00:02:15,670 --> 00:02:18,630
Então, se você quiser vir ver
todos nós brincadeiras uns com os outros

46
00:02:18,630 --> 00:02:21,270
e orientá-lo através questionário
avaliação, você deve definitivamente

47
00:02:21,270 --> 00:02:22,600
chegar a essa próxima segunda-feira também.

48
00:02:22,600 --> 00:02:26,210
Então você vai ter um congestionamento de segunda-feira
embalado de avaliação questionário, o que é bom

49
00:02:26,210 --> 00:02:29,840
porque então você tem terça-feira
para processar através de tudo.

50
00:02:29,840 --> 00:02:32,230
>> Mas definitivamente fazer check-
estes recursos.

51
00:02:32,230 --> 00:02:36,030
Study.csv.net é, de longe, I
penso, um dos mais úteis,

52
00:02:36,030 --> 00:02:37,990
principalmente porque ele tem
um monte de código de exemplo,

53
00:02:37,990 --> 00:02:40,490
ele tem todos os Pontos de Poder
com todas as notas sobre ele,

54
00:02:40,490 --> 00:02:44,510
que são realmente o que eu desenhe mais
dos meus materiais de seção de.

55
00:02:44,510 --> 00:02:47,480
Se há alguma coisa no anterior
seções que eu possa ter enviados

56
00:02:47,480 --> 00:02:49,920
que você não pode ter
começado, é só me avisar.

57
00:02:49,920 --> 00:02:52,520
Como código de exemplo da semana passada,
se alguém não conseguir isso,

58
00:02:52,520 --> 00:02:55,930
apenas me e-mail ou vir falar comigo,
e eu vou ter certeza de que você conseguiu isso.

59
00:02:55,930 --> 00:03:02,000
>> Então, com isso, hoje vamos
estar falando de JavaScript.

60
00:03:02,000 --> 00:03:04,690
Então aqui nós Tommy, quem eu era
apenas conversando com você na noite passada.

61
00:03:04,690 --> 00:03:06,670
Eu amo Tommy.

62
00:03:06,670 --> 00:03:09,040
JavaScript é o seu favorito
língua, como ele diz aqui.

63
00:03:09,040 --> 00:03:14,050
Eles vão tentar dizer-lhe que ele é
não é o melhor, e eles vão estar errado.

64
00:03:14,050 --> 00:03:16,510
Então, Tommy é um mestre JavaScript.

65
00:03:16,510 --> 00:03:19,850
Eu não estou muito em sua
nível, mas eu era como,

66
00:03:19,850 --> 00:03:22,900
"Tommy, como faço para ensinar
essas crianças javascript? "

67
00:03:22,900 --> 00:03:26,700
Então, eu tenho algumas dicas, então
espero que eles funcionam.

68
00:03:26,700 --> 00:03:31,140
>> Assim, um par de coisas a saber é que
JavaScript é um script do lado do cliente

69
00:03:31,140 --> 00:03:35,560
língua, por isso enquanto o PHP é algo
que consideramos mais do lado do servidor,

70
00:03:35,560 --> 00:03:39,280
foi fazer o upload para o servidor,
compilado e executado lá.

71
00:03:39,280 --> 00:03:42,871
Este é executada
em sua própria máquina.

72
00:03:42,871 --> 00:03:43,370
OK?

73
00:03:43,370 --> 00:03:46,960
Então você carregar alguma página JavaScript,
e ele é executado em sua máquina.

74
00:03:46,960 --> 00:03:49,910
A sintaxe é muito semelhante ao C e PHP.

75
00:03:49,910 --> 00:03:52,490
Nós vamos passar por
alguns exemplos de JavaScript,

76
00:03:52,490 --> 00:03:56,740
e você vai ver que o
nossa forma de falar sobre variáveis, loops,

77
00:03:56,740 --> 00:03:58,910
e as condições são muito semelhantes.

78
00:03:58,910 --> 00:04:00,500
OK?

79
00:04:00,500 --> 00:04:04,490
O fato de que eles são tão semelhantes é
provavelmente vai tropeçar alguns de vocês

80
00:04:04,490 --> 00:04:08,529
-se, em alguns casos, só porque
você vai incorporar um pouco de C

81
00:04:08,529 --> 00:04:09,570
onde não deveria estar.

82
00:04:09,570 --> 00:04:14,130
Talvez você tentar e digitar algo
quando não deve ser digitado.

83
00:04:14,130 --> 00:04:16,540
>> E com isso, uma coisa a
sabe é que o JavaScript

84
00:04:16,540 --> 00:04:19,360
é um tipo dinâmico
linguagem, como PHP.

85
00:04:19,360 --> 00:04:21,410
Então, se vocês lembram
da seção na semana passada,

86
00:04:21,410 --> 00:04:23,680
quando estávamos tipo de fazer
nosso curso intensivo PHP,

87
00:04:23,680 --> 00:04:28,860
vimos como uma seqüência de um poderia ser
transformou-se em um int um, e assim por diante.

88
00:04:28,860 --> 00:04:31,650

89
00:04:31,650 --> 00:04:34,850
O tipo de suas variáveis
são determinados em tempo de execução,

90
00:04:34,850 --> 00:04:38,180
assim eles podem mudar ao longo do
o decurso do programa,

91
00:04:38,180 --> 00:04:43,109
e, da mesma forma que nunca
realmente declarar tipos de variáveis ​​PHP,

92
00:04:43,109 --> 00:04:45,900
nós vamos estar fazendo a mesma
coisa aqui, onde nós não somos realmente

93
00:04:45,900 --> 00:04:49,740
controlando os tipos de nossas variáveis,
por assim dizer, como nós fazemos em C.

94
00:04:49,740 --> 00:04:52,200
>> E então uma coisa
que é muito legal é

95
00:04:52,200 --> 00:04:54,090
que você pode erro
verificar através do console,

96
00:04:54,090 --> 00:04:57,240
com este grande função
console.log, que

97
00:04:57,240 --> 00:05:00,930
permite que você imprima diferente
variáveis ​​ou objetos que vamos

98
00:05:00,930 --> 00:05:01,750
falar.

99
00:05:01,750 --> 00:05:05,720
Assim como na semana passada, quando eu era
como, "utilizar esta função", com despejo

100
00:05:05,720 --> 00:05:10,490
a partir do seu pset esta é uma função
que você deseja usar, console.log.

101
00:05:10,490 --> 00:05:12,860
Fiquei tão surpreso quantas
estudantes em horário de expediente

102
00:05:12,860 --> 00:05:14,530
não sabia sobre a função de despejo.

103
00:05:14,530 --> 00:05:19,010
E eu era como, "caras, essa vontade
tornar a sua vida muito mais fácil. "

104
00:05:19,010 --> 00:05:22,960
>> Tudo bem, de modo que era uma espécie de
apenas uma coisa breve, como sempre,

105
00:05:22,960 --> 00:05:24,000
temos exemplos.

106
00:05:24,000 --> 00:05:25,600
Eu sei que vocês amam aqueles.

107
00:05:25,600 --> 00:05:30,930
Então aqui está um exemplo de uma muito
simples arquivo JavaScript aqui.

108
00:05:30,930 --> 00:05:34,000
Por isso, só vai criar
este pop-up que diz,

109
00:05:34,000 --> 00:05:36,336
"Olá mundo", quando você
entrar na página, mas vamos

110
00:05:36,336 --> 00:05:37,960
tentar caminhar por este um pouco.

111
00:05:37,960 --> 00:05:43,440
Então, obviamente, este é apenas
como o seu index.html normal.

112
00:05:43,440 --> 00:05:50,280
Assim, apenas o nosso modelo normal aqui,
e temos HTML, temos a nossa cabeça,

113
00:05:50,280 --> 00:05:55,580
e, assim como com CSS, como nós
incluíram alguns arquivo fora, certo?

114
00:05:55,580 --> 00:05:59,260
Temos algum tipo de script
texto que é JavaScript.

115
00:05:59,260 --> 00:06:02,680
E a fonte é hello.js,
que está aqui em baixo.

116
00:06:02,680 --> 00:06:05,630
Este é todo o arquivo de hello.js.

117
00:06:05,630 --> 00:06:09,080
E então nós temos alguns
título e alguns HTML corpo

118
00:06:09,080 --> 00:06:11,050
que nós realmente não se preocupam.

119
00:06:11,050 --> 00:06:15,970
>> O que acontece é que, quando nós carregar esta página,
ele executa automaticamente este script.

120
00:06:15,970 --> 00:06:16,470
OK?

121
00:06:16,470 --> 00:06:18,790
Então JavaScript vontade
executar automaticamente.

122
00:06:18,790 --> 00:06:22,860
Então, o que ele vai fazer, ele vai
para ir imediatamente e executar isso.

123
00:06:22,860 --> 00:06:24,110
E ele vai dizer ", alerta.

124
00:06:24,110 --> 00:06:25,190
Olá Mundo. "

125
00:06:25,190 --> 00:06:30,840
Quais alerta é a função que
realmente gera essa caixa.

126
00:06:30,840 --> 00:06:31,540
OK?

127
00:06:31,540 --> 00:06:33,390
Então, é uma espécie de tudo abrangem.

128
00:06:33,390 --> 00:06:36,700
Não há nada extra que teve
para fazer além de apenas alerta,

129
00:06:36,700 --> 00:06:40,000
e, em seguida, o que queríamos
dentro da nossa caixa de alerta.

130
00:06:40,000 --> 00:06:40,500
OK?

131
00:06:40,500 --> 00:06:45,080
Então, isso é apenas um super simples
exemplo do que JavaScript pode fazer.

132
00:06:45,080 --> 00:06:48,110

133
00:06:48,110 --> 00:06:50,070
>> Um dos muito legal
coisas, como veremos,

134
00:06:50,070 --> 00:06:55,150
JavaScript é que permite que você
para manipular suas páginas web,

135
00:06:55,150 --> 00:06:57,720
sem ter de
recarregá-los o tempo todo.

136
00:06:57,720 --> 00:07:01,830
Então, se você want-- por exemplo, se
você está pairando sobre alguma coisa,

137
00:07:01,830 --> 00:07:04,300
se vocês já têm
visto como barras de menus,

138
00:07:04,300 --> 00:07:07,360
ou quando você passa o mouse sobre algum
tópico, um menu drop-down aparece,

139
00:07:07,360 --> 00:07:08,670
isso é por causa de JavaScript.

140
00:07:08,670 --> 00:07:09,170
OK?

141
00:07:09,170 --> 00:07:12,670
Então você não está recarregando o todo
página para obter este menu para mostrar-se,

142
00:07:12,670 --> 00:07:17,240
você está apenas à procura de algum específico
ação que o usuário tenha tomado,

143
00:07:17,240 --> 00:07:21,800
que são chamados de eventos que nós vamos chegar
em, e uma vez que você ver que, você diz:

144
00:07:21,800 --> 00:07:25,960
"OK, editar algo sobre este
página e torná-lo diferente,

145
00:07:25,960 --> 00:07:28,270
mas apenas editar essas coisas específicas.

146
00:07:28,270 --> 00:07:29,690
Não recarregue a coisa toda. "

147
00:07:29,690 --> 00:07:33,110
Por isso, na verdade, é muito mais agradável, e
você não tem que recarregar suas páginas,

148
00:07:33,110 --> 00:07:34,510
e é muito legal.

149
00:07:34,510 --> 00:07:38,270
>> Então declarações de variáveis,
assim você pode tipo de ver,

150
00:07:38,270 --> 00:07:40,530
Eu coloquei em cima aqui, vagamente digitado.

151
00:07:40,530 --> 00:07:42,570
Portanto, este é muito parecido com PHP.

152
00:07:42,570 --> 00:07:48,770
Nós não precisamos de dizer
JavaScript que tipo nós somos

153
00:07:48,770 --> 00:07:50,740
esperam cada uma destas variáveis ​​a ser.

154
00:07:50,740 --> 00:07:52,560
Eles podem ser o que tipos nós queremos.

155
00:07:52,560 --> 00:07:57,480
Então você percebe neste caso, declaramos
-los de maneira muito simples, apenas com "var"

156
00:07:57,480 --> 00:08:00,990
e, em seguida, o que queremos
nosso nome da variável a ser.

157
00:08:00,990 --> 00:08:05,680
Uma coisa a notar é que, quando você
var colocar na frente de um nome de variável,

158
00:08:05,680 --> 00:08:07,520
-lo localmente escopos-lo.

159
00:08:07,520 --> 00:08:09,320
OK?

160
00:08:09,320 --> 00:08:14,025
É totalmente razoável para você
completamente apenas apagar a var

161
00:08:14,025 --> 00:08:18,970
e apenas se s é igual a CS50, e
que seria apenas uma variável global.

162
00:08:18,970 --> 00:08:19,580
OK?

163
00:08:19,580 --> 00:08:22,490
Assim, você pode inicializar as duas coisas,
só depende de como você quer.

164
00:08:22,490 --> 00:08:24,448
Então, se você está inicializando
-lo dentro de uma função,

165
00:08:24,448 --> 00:08:28,070
e você quer que a variável
ficar com escopo dentro dessa função,

166
00:08:28,070 --> 00:08:31,620
você vai querer fazer
algo como var nomear uma variável,

167
00:08:31,620 --> 00:08:34,270
contra, se você quer que ele
escopo global, o que você

168
00:08:34,270 --> 00:08:36,240
pode apenas fazer o nome de
a variável e em seguida

169
00:08:36,240 --> 00:08:38,270
tudo o que você gostaria que ele defina igual a.

170
00:08:38,270 --> 00:08:40,230
OK?

171
00:08:40,230 --> 00:08:45,580
>> Este é o tipo de coisa legal aqui em baixo,
porque se observarmos nossa variável

172
00:08:45,580 --> 00:08:47,590
b começa como verdade.

173
00:08:47,590 --> 00:08:51,280
E o que isso pode does--
alguém me diga o que isso faz?

174
00:08:51,280 --> 00:08:54,190

175
00:08:54,190 --> 00:08:55,890
Portanto, temos alguns alerta.

176
00:08:55,890 --> 00:09:00,156
O que tipo de b
ser no começo?

177
00:09:00,156 --> 00:09:00,905
AUDIÊNCIA: Boolean.

178
00:09:00,905 --> 00:09:01,330
ALLISON Buchholtz-AU: Boolean.

179
00:09:01,330 --> 00:09:01,940
Direita.

180
00:09:01,940 --> 00:09:07,260
E, depois, voltar a atribuir b
para esta cadeia, certo?

181
00:09:07,260 --> 00:09:11,170
Assim, pois, aqui, que tipo de b ser?

182
00:09:11,170 --> 00:09:12,480
Seria uma corda, certo?

183
00:09:12,480 --> 00:09:14,900
Então, o que é importante
aviso é que, em c, nós

184
00:09:14,900 --> 00:09:17,330
quase poderia nunca fazer
algo parecido.

185
00:09:17,330 --> 00:09:22,000
Nós teríamos que ter uma variável,
lançá-lo como algo mais,

186
00:09:22,000 --> 00:09:27,185
talvez fazer alguma função com um dois
i, ir de uma carga em um inteiro.

187
00:09:27,185 --> 00:09:31,063
Mas se notar aqui, b
muito facilmente muda digita.

188
00:09:31,063 --> 00:09:33,760
>> AUDIÊNCIA: Espere, então você pode apenas
ser como, "fazer b um número inteiro?"

189
00:09:33,760 --> 00:09:34,360
>> ALLISON Buchholtz-AU: Yeah.

190
00:09:34,360 --> 00:09:36,185
Você pode apenas realocar b para um inteiro.

191
00:09:36,185 --> 00:09:36,910
>> AUDIÊNCIA: Sério?

192
00:09:36,910 --> 00:09:38,035
>> ALLISON Buchholtz-AU: Yeah.

193
00:09:38,035 --> 00:09:39,810
E então seria um int.

194
00:09:39,810 --> 00:09:43,820
Assim, suas variáveis ​​podem mudar ao longo do
o curso do programa também.

195
00:09:43,820 --> 00:09:46,410
Eles não são estritamente digitado.

196
00:09:46,410 --> 00:09:49,180
É muito vagamente digitado.

197
00:09:49,180 --> 00:09:50,820
OK?

198
00:09:50,820 --> 00:09:54,820
Basicamente suas variáveis ​​podem fazer o que
eles querem, como nós meio que viu com PHP.

199
00:09:54,820 --> 00:09:59,430
Eles podem fazer algumas coisas malucas, então
é importante ser muito cuidadoso.

200
00:09:59,430 --> 00:10:01,200
Nome suas variáveis ​​bem.

201
00:10:01,200 --> 00:10:03,450
Se não, faça, de repente,
você vai ser como,

202
00:10:03,450 --> 00:10:05,783
"Espere, eu pensei que este era um
corda, e agora é um int,

203
00:10:05,783 --> 00:10:08,170
e eu realmente não estou certo
o que está acontecendo aqui. "

204
00:10:08,170 --> 00:10:12,410
Portanto, este é apenas um exemplo simples de
mostrando como uma variável pode facilmente

205
00:10:12,410 --> 00:10:15,890
alterar seu tipo sobre
o curso de um programa.

206
00:10:15,890 --> 00:10:16,870
>> OK.

207
00:10:16,870 --> 00:10:19,200
Portanto, este deve olhar
super, super familiar.

208
00:10:19,200 --> 00:10:21,510
Então, esses são os nossos laços em JavaScript.

209
00:10:21,510 --> 00:10:27,780
Eles são exactamente os mesmos, excepto para
em vez de quatro int i é igual a zero,

210
00:10:27,780 --> 00:10:30,470
poderíamos dizer apenas var i é igual a zero.

211
00:10:30,470 --> 00:10:34,100
E então nós poderíamos ter o nosso mesmo tipo
de condição, mesmo tipo de atualização,

212
00:10:34,100 --> 00:10:36,090
i plus plus funciona muito bem.

213
00:10:36,090 --> 00:10:39,800
Assim, quatro são os mesmos,
whiles são os mesmos,

214
00:10:39,800 --> 00:10:41,440
e fazer whiles são exatamente os mesmos.

215
00:10:41,440 --> 00:10:44,070
Mesmo tipo de formato geral.

216
00:10:44,070 --> 00:10:48,840
Notamos, quatro, parênteses,
colchetes, é tudo a mesma coisa.

217
00:10:48,840 --> 00:10:51,470
Também haverá ponto e vírgula
quando chegarmos ao exemplo de código.

218
00:10:51,470 --> 00:10:55,250
Você verá que é muito
o mesmo que c.

219
00:10:55,250 --> 00:10:59,770
>> Para declarações de função,
novamente, muito semelhante.

220
00:10:59,770 --> 00:11:05,100
Temos alguma função que apenas
diz que é uma função e, em seguida

221
00:11:05,100 --> 00:11:07,660
o nome da nossa
função, e as entradas.

222
00:11:07,660 --> 00:11:11,590
E novamente se notar, nós
temos nenhum tipo aqui qualquer.

223
00:11:11,590 --> 00:11:12,090
Certo?

224
00:11:12,090 --> 00:11:18,150
Não temos nada a dizer que estes
precisam estar inteiros ou duplos, ou carros alegóricos.

225
00:11:18,150 --> 00:11:19,530
Eles podem ser o que quiserem.

226
00:11:19,530 --> 00:11:23,560
O importante é perceber que
precisamos escrever função de antemão

227
00:11:23,560 --> 00:11:26,430
deixar JavaScript sabe que
esta é realmente uma função.

228
00:11:26,430 --> 00:11:29,820
>> Portanto, esta é apenas uma soma simples
função que retorna x ou y,

229
00:11:29,820 --> 00:11:33,800
e, em seguida, o que também é legal
é que você pode, na verdade,

230
00:11:33,800 --> 00:11:35,950
atribuir uma função a uma variável.

231
00:11:35,950 --> 00:11:41,770
Portanto, neste caso, a soma é agora
função que realmente faz soma.

232
00:11:41,770 --> 00:11:47,740
Então, se você observar aqui, temos
função, o nome da função, entradas.

233
00:11:47,740 --> 00:11:48,860
Certo?

234
00:11:48,860 --> 00:11:52,120
Aqui só temos a função e insumos.

235
00:11:52,120 --> 00:11:54,310
Então, isso é chamado de uma função anônima.

236
00:11:54,310 --> 00:11:59,265
E isso é algo que deve ser novo
para a maioria de vocês, se não todos vocês.

237
00:11:59,265 --> 00:12:01,140
Então, basicamente o que
meios é que nós não

238
00:12:01,140 --> 00:12:03,050
precisa nome de nosso
função neste caso.

239
00:12:03,050 --> 00:12:06,260
Nós podemos apenas dizer, "OK, eu vou
têm essa função que executa, aqui

240
00:12:06,260 --> 00:12:08,550
são suas entradas, e é aqui
o que vai fazer. "

241
00:12:08,550 --> 00:12:12,540
E, especialmente quando você está atribuindo
uma função de alguma variável

242
00:12:12,540 --> 00:12:14,950
que você está indo para manipular,
Você não precisa necessariamente

243
00:12:14,950 --> 00:12:17,116
preciso nomeá-lo porque
você vai estar se referindo

244
00:12:17,116 --> 00:12:20,990
pelo presente variável
nome, não pelo o que quer

245
00:12:20,990 --> 00:12:22,840
a função foi realmente chamado.

246
00:12:22,840 --> 00:12:23,550
OK?

247
00:12:23,550 --> 00:12:27,810
>> Então, se nós vemos aqui, nós
ter alguma variável soma agora

248
00:12:27,810 --> 00:12:30,920
que é igual à
soma de três e cinco anos.

249
00:12:30,920 --> 00:12:33,070
E gostaríamos de conseguir isso.

250
00:12:33,070 --> 00:12:36,750
E isso seria apenas ter algum alerta,
três mais cinco é igual ao número.

251
00:12:36,750 --> 00:12:43,950
Isto além de só vai concatenar
seja qual for a nossa resposta foi para a cadeia.

252
00:12:43,950 --> 00:12:47,420
Também legal, além de pode concatenar strings.

253
00:12:47,420 --> 00:12:53,510
>> Para JavaScript, como com PHP,
HTML, CSS e como dissemos,

254
00:12:53,510 --> 00:12:56,450
um monte de que nós estamos nos levando
as rodinhas aqui

255
00:12:56,450 --> 00:13:02,030
e vocês têm um monte de know
como realmente entender essas coisas.

256
00:13:02,030 --> 00:13:04,280
Eles são um pouco diferentes,
mas eles não são tão estranhos

257
00:13:04,280 --> 00:13:09,460
e que você não pode Google coisas ou
procurá-los on-line com escolas w3.

258
00:13:09,460 --> 00:13:12,755
E nós estamos realmente esperando você
caras para, tipo, experiência

259
00:13:12,755 --> 00:13:14,400
e aprender no seu próprio país.

260
00:13:14,400 --> 00:13:19,490
Então, eu sei que isso pode parecer um pouco
menos completo do que algumas das coisas que c

261
00:13:19,490 --> 00:13:21,936
o que fazemos, mas que é, na verdade, por uma razão.

262
00:13:21,936 --> 00:13:25,060

263
00:13:25,060 --> 00:13:28,470
Mas espero que não seja muito
diferente, e não é esmagadora.

264
00:13:28,470 --> 00:13:31,940
>> Então matrizes em JavaScript,
novamente muito, muito similar.

265
00:13:31,940 --> 00:13:32,460
Certo?

266
00:13:32,460 --> 00:13:36,520
Temos algumas matriz variável
que é igual a colchetes vazios,

267
00:13:36,520 --> 00:13:40,340
e isso é apenas uma matriz vazia.

268
00:13:40,340 --> 00:13:43,420
Isso é muitas vezes chamado
notação de matriz literal.

269
00:13:43,420 --> 00:13:45,280
Isso é apenas uma coisa que nós chamamos.

270
00:13:45,280 --> 00:13:51,380
Se formos ver matriz dois aqui, nós temos algumas
literal matriz que tem três elementos,

271
00:13:51,380 --> 00:13:51,910
certo?

272
00:13:51,910 --> 00:13:54,640
E então nós temos alguns
terceiro elemento var que é

273
00:13:54,640 --> 00:13:58,060
alguma variável que é apenas
vai realizar esta cadeia, JS.

274
00:13:58,060 --> 00:14:01,760

275
00:14:01,760 --> 00:14:06,170
>> Os elementos, é bom notar,
são separados por vírgulas,

276
00:14:06,170 --> 00:14:07,740
como seria de esperar.

277
00:14:07,740 --> 00:14:14,630
E você também pode acessar estes, como fizemos
em C, com esta notação índice, certo?

278
00:14:14,630 --> 00:14:16,950
Tão diferente do PHP
Agora, vamos voltar

279
00:14:16,950 --> 00:14:20,180
para apenas um tipo de referir
às coisas por índice.

280
00:14:20,180 --> 00:14:22,189
Assim como C, também é índice zero.

281
00:14:22,189 --> 00:14:25,230
Eu sinto que seria muito cruel
se eles de repente fez um JavaScript

282
00:14:25,230 --> 00:14:30,630
índice, e você tinha que completamente
repensar a forma como você pensa sobre arrays.

283
00:14:30,630 --> 00:14:36,140
>> Uma coisa legal é que, em vez
de ter que fazer-- se você nunca

284
00:14:36,140 --> 00:14:39,240
queria que o comprimento de uma matriz,
talvez você interagir com ele

285
00:14:39,240 --> 00:14:43,430
até encontrar algum fim, ou
você só sabe o que é.

286
00:14:43,430 --> 00:14:49,310
Porque JavaScript é muito frouxo em mais
maneiras do que apenas o tipo, como vemos aqui,

287
00:14:49,310 --> 00:14:53,310
podemos apenas fazer essa matriz
maior porque decidimos.

288
00:14:53,310 --> 00:14:56,177
Se notarmos matriz de três
tem três coisas para começar,

289
00:14:56,177 --> 00:14:58,510
mas então, de repente,
nós somos como, "oh, estou brincando.

290
00:14:58,510 --> 00:15:01,370
Na verdade, estamos indo
para torná-lo 101 coisas. "

291
00:15:01,370 --> 00:15:05,300
Então, se você sempre quis saber o
comprimento real de sua matriz,

292
00:15:05,300 --> 00:15:06,680
você fazê-lo assim.

293
00:15:06,680 --> 00:15:10,470
E vamos ver um monte
de esta notação em exemplos,

294
00:15:10,470 --> 00:15:12,730
mas com JavaScript
é tipicamente o que quer

295
00:15:12,730 --> 00:15:16,410
objeto que você está falando
dot qualquer tipo de função

296
00:15:16,410 --> 00:15:17,740
que deseja aplicar a ele.

297
00:15:17,740 --> 00:15:18,240
OK?

298
00:15:18,240 --> 00:15:20,520
>> Portanto, neste caso, o nosso
objeto é matriz dois,

299
00:15:20,520 --> 00:15:23,470
e dizemos que queremos o
comprimento de matriz de duas.

300
00:15:23,470 --> 00:15:25,716
Então, isso só chama, como o comprimento sobre isso.

301
00:15:25,716 --> 00:15:27,090
E que retornará seu comprimento.

302
00:15:27,090 --> 00:15:32,610

303
00:15:32,610 --> 00:15:36,790
Também algo a se notar é
que se observarmos nossas matrizes,

304
00:15:36,790 --> 00:15:39,830
ao contrário de C, eles não têm
de ser todas do mesmo tipo.

305
00:15:39,830 --> 00:15:41,670
Isto é muito mais parecido com PHP.

306
00:15:41,670 --> 00:15:45,905
JavaScript é basicamente como
esta fusão interessante de C e PHP.

307
00:15:45,905 --> 00:15:50,020

308
00:15:50,020 --> 00:15:52,170
Então, vamos entrar nisso.

309
00:15:52,170 --> 00:15:56,750
Por enquanto, vamos assumir
que suas matrizes são, basicamente,

310
00:15:56,750 --> 00:16:00,640
como matrizes C, em que
eles são indexados zero.

311
00:16:00,640 --> 00:16:04,120
OK, de modo que é tudo.

312
00:16:04,120 --> 00:16:08,850
Você também pode simplesmente estender um
matriz para qualquer que seja o índice que você quer.

313
00:16:08,850 --> 00:16:14,260
Considerando que esse provavelmente SEG
culpa em você ou lhe dar algum erro,

314
00:16:14,260 --> 00:16:15,970
JavaScript é como, "nah, está tudo bem.

315
00:16:15,970 --> 00:16:16,620
Eu tenho esse.

316
00:16:16,620 --> 00:16:19,460
Vamos apenas ir direto
onde você quer ".

317
00:16:19,460 --> 00:16:24,310
>> OK, então os objetos são muito importantes.

318
00:16:24,310 --> 00:16:29,720
Vocês estarão usando um monte deles
no seu conjunto P, se bem me lembro.

319
00:16:29,720 --> 00:16:34,780
Então, a única coisa que estes são
semelhante ao de C são estruturas.

320
00:16:34,780 --> 00:16:39,290
Então você pode pensar quando about--
vamos a um exemplo à direita

321
00:16:39,290 --> 00:16:41,810
depois disso, eu acho que ele vai
fazer muito mais sense--

322
00:16:41,810 --> 00:16:45,830
mas, basicamente, usar objetos para
organizar de curso relacionado informações.

323
00:16:45,830 --> 00:16:47,780
Quando nós falamos sobre
estruturas em C, que muitas vezes

324
00:16:47,780 --> 00:16:53,405
falar sobre um estudante que tinha algum nome,
ID, casa, você sabe, a concentração.

325
00:16:53,405 --> 00:16:56,030
E isso é meio que a mesma coisa
que usamos objetos para aqui.

326
00:16:56,030 --> 00:16:59,300
É só para organizar
informações semelhantes.

327
00:16:59,300 --> 00:17:03,620
>> Você também pode pensar nisso como mais
semelhante ao associativo matrizes em PHP.

328
00:17:03,620 --> 00:17:10,010
Portanto, este seria tipo da coisa
onde temos alguma chave com algum valor,

329
00:17:10,010 --> 00:17:12,859
muito semelhantes para PHP.

330
00:17:12,859 --> 00:17:15,780
Assim, você pode inicializar alguns
objeto vazio, como vemos aqui em cima,

331
00:17:15,780 --> 00:17:17,390
apenas com chaves.

332
00:17:17,390 --> 00:17:19,160
Matrizes assim são colchetes.

333
00:17:19,160 --> 00:17:21,220
Objetos vazios são chaves.

334
00:17:21,220 --> 00:17:24,020
Boa distinção de ter.

335
00:17:24,020 --> 00:17:27,319
E estes são apenas dois diferentes
maneiras de definir propriedades.

336
00:17:27,319 --> 00:17:31,460
Portanto, este é o tipo de
muito mais do que uma maneira

337
00:17:31,460 --> 00:17:35,220
é semelhante à de PHP, com o nosso
matrizes de associação, com a nossa chave,

338
00:17:35,220 --> 00:17:39,910
e nosso valor, ao passo que
um presente é-- você vai

339
00:17:39,910 --> 00:17:41,920
ver este muito mais em JavaScript.

340
00:17:41,920 --> 00:17:43,550
Este tende a ser a convenção.

341
00:17:43,550 --> 00:17:47,660
E, do mesmo modo que fizemos
matriz de duas comprimento ponto, este está dizendo:

342
00:17:47,660 --> 00:17:51,580
"OK, dá-me dessa
atributo deste objeto ".

343
00:17:51,580 --> 00:17:52,110
Certo?

344
00:17:52,110 --> 00:17:55,660
Então, da mesma forma como era, "dê-me
o atributo de comprimento de matriz de duas, "

345
00:17:55,660 --> 00:17:59,970
este está dizendo: "me dê algum
propriedade do nosso objeto vazio. "

346
00:17:59,970 --> 00:18:02,890
Ou, neste caso, estamos
atribuí-la a algum valor aqui.

347
00:18:02,890 --> 00:18:06,200
Mas você também pode acessá-lo dessa forma.

348
00:18:06,200 --> 00:18:09,090
>> E então aqui esta é apenas
mostrando dois alertas diferentes.

349
00:18:09,090 --> 00:18:12,320
Então, isso iria mostrar os alertas
seria exatamente o mesmo,

350
00:18:12,320 --> 00:18:17,150
é apenas duas maneiras diferentes de
acessando o elemento que nós queremos.

351
00:18:17,150 --> 00:18:19,552
Isso faz sentido para todos?

352
00:18:19,552 --> 00:18:21,510
Eu me sinto como um presente
provavelmente faz mais sentido,

353
00:18:21,510 --> 00:18:23,270
só porque estamos saindo de PHP.

354
00:18:23,270 --> 00:18:26,400
Mas como fazemos mais exemplos, este
é, literalmente, exatamente o mesmo.

355
00:18:26,400 --> 00:18:28,170
Muito disso é apenas mudar na sintaxe.

356
00:18:28,170 --> 00:18:30,710

357
00:18:30,710 --> 00:18:33,030
>> OK, então exemplos.

358
00:18:33,030 --> 00:18:34,180
Eu amo exemplos.

359
00:18:34,180 --> 00:18:40,070
Então, aqui estão algumas CS50
variável que é um objeto,

360
00:18:40,070 --> 00:18:42,160
e nós guardamos tudo isso
informações sobre ele.

361
00:18:42,160 --> 00:18:46,680
Portanto, temos claro, instrutor,
tfs, Série de Exercícios, e gravado.

362
00:18:46,680 --> 00:18:51,840
Então percebemos estes são quase
todos de diferentes tipos.

363
00:18:51,840 --> 00:18:52,340
Certo?

364
00:18:52,340 --> 00:18:56,230
Assim, os objetos podem armazenar
atributos de diferentes tipos.

365
00:18:56,230 --> 00:19:01,220
Podemos pensar em isto-- é muito
semelhante à nossa matriz associativa em PHP.

366
00:19:01,220 --> 00:19:07,470
Então chave, valor, chave, valor,
chave, valor, assim por diante e assim por diante.

367
00:19:07,470 --> 00:19:11,230
O que também é interessante, da mesma forma
que podemos ter matrizes dentro de matrizes,

368
00:19:11,230 --> 00:19:14,690
também podemos ter objetos dentro
objetos, ou arrays dentro de objetos.

369
00:19:14,690 --> 00:19:18,410
Você nunca está realmente limitado a
apenas uma única das coisas.

370
00:19:18,410 --> 00:19:24,220
Podemos ficar muito Inceptionesque, apenas
continuar no buraco do coelho lá.

371
00:19:24,220 --> 00:19:26,080
>> Então, se nós observamos, nós
Claro que tem alguns

372
00:19:26,080 --> 00:19:31,120
é uma cadeia, instrutor que é uma string,
e array, um int, e um booleano.

373
00:19:31,120 --> 00:19:36,110
Então todas essas coisas diferentes.

374
00:19:36,110 --> 00:19:39,600
>> Tudo bem, então, temos uma outra.

375
00:19:39,600 --> 00:19:42,930
Portanto, neste caso, temos
uma matriz de objetos.

376
00:19:42,930 --> 00:19:45,320
Então, tal como um objeto
pode ter uma matriz na mesma.

377
00:19:45,320 --> 00:19:47,210
Também podemos ter uma matriz de objetos.

378
00:19:47,210 --> 00:19:51,250
Isto pode ser útil para
pensar em semelhante ao tipo

379
00:19:51,250 --> 00:19:54,260
de como nós tivemos um hash
mesa, tivemos uma matriz

380
00:19:54,260 --> 00:19:56,220
de todas estas diferentes
tipos de estruturas que

381
00:19:56,220 --> 00:19:59,070
eram ponteiros para diferentes
nós e outros enfeites.

382
00:19:59,070 --> 00:20:01,420
Mas, neste caso, nós
tem uma matriz de objetos.

383
00:20:01,420 --> 00:20:04,890
Então, isso é como um array
matrizes de associativo.

384
00:20:04,890 --> 00:20:09,430
Portanto, temos alguns primeiro consistirá
ser o objecto com o nome de James

385
00:20:09,430 --> 00:20:11,340
e abrigar Winthrop.

386
00:20:11,340 --> 00:20:14,780
>> Vocês devem se lembrar
algo muito semelhante a este

387
00:20:14,780 --> 00:20:21,710
com a sua última pset, onde se você
tirou algo do seu banco de dados,

388
00:20:21,710 --> 00:20:24,480
o primeiro tipo de
coisa em sua matriz foi

389
00:20:24,480 --> 00:20:27,110
todas as informações sobre
o primeiro usuário que reuniu-lo,

390
00:20:27,110 --> 00:20:30,765
e depois que você teve para o índice em que
para obter o seu estoque ou a sua cache

391
00:20:30,765 --> 00:20:32,110
ou outros enfeites.

392
00:20:32,110 --> 00:20:34,620
Então isso é muito muito mesmo
coisa, apenas uma pequena mudança

393
00:20:34,620 --> 00:20:39,570
na sintaxe, a mudança pouco em
as palavras que usamos para descrevê-los.

394
00:20:39,570 --> 00:20:45,960
>> Então, se nós queríamos, alguém pode dizer-
me que este alerta faria aqui?

395
00:20:45,960 --> 00:20:48,780
Ou o que este pedaço de
código poderia fazer por nós?

396
00:20:48,780 --> 00:20:50,992

397
00:20:50,992 --> 00:20:52,616
AUDIÊNCIA: Ele vai dar-lhe todos os nomes.

398
00:20:52,616 --> 00:20:54,900
ALLISON Buchholtz-AU: Certo, então ele
seria apenas alertar com todos os nomes

399
00:20:54,900 --> 00:20:57,960
porque ele iria passar por
cottage i, por isso ia começar do zero.

400
00:20:57,960 --> 00:21:01,330
Por isso, diria que, OK estamos procurando
neste primeiro objeto, o que

401
00:21:01,330 --> 00:21:03,210
é a primeira ranhura na nossa matriz.

402
00:21:03,210 --> 00:21:06,900
E ele diz: "dá-me a
atributo, o nome do objeto. "

403
00:21:06,900 --> 00:21:09,030
Então vamos aqui, teremos
digitalização, nós temos que procurar o nome,

404
00:21:09,030 --> 00:21:11,340
e teremos imprimir
James, Molly e Carl.

405
00:21:11,340 --> 00:21:14,410

406
00:21:14,410 --> 00:21:15,799
Quaisquer perguntas até agora?

407
00:21:15,799 --> 00:21:17,590
JavaScript infelizmente
você vai ser

408
00:21:17,590 --> 00:21:20,950
fazendo um monte de olhar para cima no seu
próprio, descobrir a sintaxe,

409
00:21:20,950 --> 00:21:21,910
às voltas com ele.

410
00:21:21,910 --> 00:21:25,870
Mas é claro que eu estou sempre aqui,
horário de atendimento é sempre aqui.

411
00:21:25,870 --> 00:21:28,260
Eu poderia ser às terças-feiras desta semana.

412
00:21:28,260 --> 00:21:31,050
Então, se você está lá, você pode
venha visitar-me esta semana.

413
00:21:31,050 --> 00:21:32,470
Seria ótimo.

414
00:21:32,470 --> 00:21:36,260
>> OK, então é DOM Document Object-Model.

415
00:21:36,260 --> 00:21:38,900
Portanto, esta é apenas uma maneira
que nós gostamos de pensar

416
00:21:38,900 --> 00:21:45,720
sobre como o nosso HTML e tudo
dentro dela está organizado.

417
00:21:45,720 --> 00:21:49,930
Isto é muito algo que
provavelmente vai aparecer em seu quiz.

418
00:21:49,930 --> 00:21:58,150
Eu sei que o meu ano, era como é aqui
Arquivo HTML, preencha o DOM para ele.

419
00:21:58,150 --> 00:21:59,770
E você só preencher pequenas coisas.

420
00:21:59,770 --> 00:22:01,500
Estes devem ser pontos fáceis, esperançoso.

421
00:22:01,500 --> 00:22:03,450
Esperamos que você vai see--

422
00:22:03,450 --> 00:22:04,590
>> AUDIÊNCIA: [inaudível]

423
00:22:04,590 --> 00:22:06,660
>> ALLISON Buchholtz-AU: Então
você vê essa árvore aqui?

424
00:22:06,660 --> 00:22:07,200
>> AUDIÊNCIA: Yeah.

425
00:22:07,200 --> 00:22:08,949
>> ALLISON Buchholtz-AU:
Então, eles vão pedir uso

426
00:22:08,949 --> 00:22:11,750
para preencher o que se passa debaixo do corpo.

427
00:22:11,750 --> 00:22:15,770
Talvez sob o corpo, temos alguns
divs ou temos alguns parágrafos,

428
00:22:15,770 --> 00:22:19,160
e nós vamos pedir-lhe para preencher
uma árvore muito parecido com este.

429
00:22:19,160 --> 00:22:21,440
Então, nós vamos estar caminhando por ela.

430
00:22:21,440 --> 00:22:26,120
Assim, o Document Object-
Modelo é apenas uma maneira

431
00:22:26,120 --> 00:22:31,240
estruturar e pensar
sobre o nosso HTML graficamente.

432
00:22:31,240 --> 00:22:33,860

433
00:22:33,860 --> 00:22:35,840
E também quando chegarmos
em mais JavaScript,

434
00:22:35,840 --> 00:22:37,640
que vai ser o
maneira que nós, na verdade,

435
00:22:37,640 --> 00:22:39,990
manipular diferente
elementos na página.

436
00:22:39,990 --> 00:22:43,980
Precisamos de uma maneira de acessar cada
das coisas em nosso HTML,

437
00:22:43,980 --> 00:22:48,050
e assim por isso nos dá uma muito
forma padronizada concreto

438
00:22:48,050 --> 00:22:51,010
em várias páginas da web para fazer isso.

439
00:22:51,010 --> 00:22:53,440
>> Então, se nós apenas caminhar por
este aqui, é claro

440
00:22:53,440 --> 00:22:56,790
nosso documento é como todo o nosso arquivo.

441
00:22:56,790 --> 00:22:59,350
Isso, obviamente, faz sentido
que é a coisa mais elevada,

442
00:22:59,350 --> 00:23:03,520
e depois temos o nosso HTML real,
o que corresponde a essa marca aqui.

443
00:23:03,520 --> 00:23:08,480
Além disso, se você no travessão suas tags
corretamente, em seguida, criar essa árvore DOM

444
00:23:08,480 --> 00:23:10,530
torna-se super simples.

445
00:23:10,530 --> 00:23:12,400
Portanto, temos alguma cabeça aqui.

446
00:23:12,400 --> 00:23:15,780
Temos um corpo que
vemos tronco fora de HTML,

447
00:23:15,780 --> 00:23:18,530
que é por isso que temos cabeça e no corpo.

448
00:23:18,530 --> 00:23:22,880
Dentro de cabeça, nós temos algumas
Tag do título, um título de tag final,

449
00:23:22,880 --> 00:23:24,570
por isso sabemos que vem depois de cabeça.

450
00:23:24,570 --> 00:23:28,040
E dentro da nossa tag title,
temos Olá, mundo.

451
00:23:28,040 --> 00:23:28,740
OK?

452
00:23:28,740 --> 00:23:31,311
Então, isso é todo este ramo mão esquerda.

453
00:23:31,311 --> 00:23:34,060
E, em seguida, para o ramo da direita
aqui, vemos que temos HTML,

454
00:23:34,060 --> 00:23:38,680
OK fizemos esta parte da cabeça,
nós estamos olhando apenas para o corpo,

455
00:23:38,680 --> 00:23:40,670
por isso temos alguma área do corpo.

456
00:23:40,670 --> 00:23:44,350
E dentro disso, a única
coisa que temos é Olá, mundo.

457
00:23:44,350 --> 00:23:45,090
OK?

458
00:23:45,090 --> 00:23:54,130
Se tivéssemos coisas como
algum suporte de p e, em seguida

459
00:23:54,130 --> 00:23:57,500
Olá, mundo, e depois outro
suporte p de adeus, mundo,

460
00:23:57,500 --> 00:24:00,080
teríamos duas bolhas
saindo daqui.

461
00:24:00,080 --> 00:24:05,550
Porque eles são ambos sob o corpo, mas
eles são alíneas separadas neste caso.

462
00:24:05,550 --> 00:24:11,520
Há definitivamente prática
em que em testes anteriores,

463
00:24:11,520 --> 00:24:14,570
assim como a abundância on-line on-lo.

464
00:24:14,570 --> 00:24:18,260
OK, então, isso só permite
-nos ver tudo bem

465
00:24:18,260 --> 00:24:20,810
e manipular as coisas
muito sistematicamente.

466
00:24:20,810 --> 00:24:21,340
OK?

467
00:24:21,340 --> 00:24:23,640
Sabemos exatamente como
atravessar esta árvore,

468
00:24:23,640 --> 00:24:26,910
por isso sabemos o que queremos acessar.

469
00:24:26,910 --> 00:24:31,690
>> OK, então é por isso que nós queremos
para ter esse tipo de modelo,

470
00:24:31,690 --> 00:24:35,190
para que possamos usar coisas como esta,
e entendemos o que eles significam,

471
00:24:35,190 --> 00:24:38,370
e eles são padronizados
em todas as coisas que fazemos.

472
00:24:38,370 --> 00:24:45,900
Então título do documento dot é apenas
a título de our-- todos estes

473
00:24:45,900 --> 00:24:48,960
são bastante auto-explicativo,
Eu gosto de pensar.

474
00:24:48,960 --> 00:24:51,660
Assim, o primeiro de três
exemplos são apenas dizendo,

475
00:24:51,660 --> 00:24:54,770
"OK, é só me dar o
título desta página web ".

476
00:24:54,770 --> 00:24:58,030
Então, ele vai te dar o que
corresponde ao título.

477
00:24:58,030 --> 00:25:01,880
>> Corpo do documento dot vai dar-lhe
tudo o que está dentro dessas tags do corpo.

478
00:25:01,880 --> 00:25:03,240
Assim, você pode manipular isso.

479
00:25:03,240 --> 00:25:07,820
E o corpo dot documento dot
inserir HTML é muito legal,

480
00:25:07,820 --> 00:25:11,660
e, talvez, não é como super
intuitivo, mas o HTML interior

481
00:25:11,660 --> 00:25:13,740
corresponde a este aqui.

482
00:25:13,740 --> 00:25:17,410
Então, se você quiser
manipular o texto em uma página,

483
00:25:17,410 --> 00:25:22,700
normalmente você vai estar fazendo
algo com dot corpo HTML interior.

484
00:25:22,700 --> 00:25:23,820
OK?

485
00:25:23,820 --> 00:25:31,341
Assim HTML interior tende a referir-se a
o que é realmente entre essas tags.

486
00:25:31,341 --> 00:25:31,840
OK?

487
00:25:31,840 --> 00:25:33,020
E então funções úteis.

488
00:25:33,020 --> 00:25:40,390
Então, se você queria chegar
qualquer destes, qualquer elemento,

489
00:25:40,390 --> 00:25:43,140
temos alguns Id, classe
nome, ou o nome do tag.

490
00:25:43,140 --> 00:25:47,100
Isto é muito semelhante ao
coisas que fizemos com CSS, certo?

491
00:25:47,100 --> 00:25:51,360
Onde temos alguns seletores que
correspondem a uma tag, uma classe

492
00:25:51,360 --> 00:25:53,800
que lhes damos, ou um Id.

493
00:25:53,800 --> 00:25:55,310
Isto é muito da mesma maneira.

494
00:25:55,310 --> 00:26:00,720
Se você tem algo que
Tem alguma classe de cão,

495
00:26:00,720 --> 00:26:05,800
e você diz obter elementos pelo nome da marca,
e você colocar o cão na lá-- ou desculpe,

496
00:26:05,800 --> 00:26:06,610
nome da classe.

497
00:26:06,610 --> 00:26:07,770
Você pode colocar ponto lá.

498
00:26:07,770 --> 00:26:11,780
Vai voltar todos aqueles
elementos para você que têm essa classe.

499
00:26:11,780 --> 00:26:13,880
Assim, você pode manipular apenas aqueles.

500
00:26:13,880 --> 00:26:18,430
Da mesma maneira, talvez você só
quer manipular alguns cabeçalho, de modo

501
00:26:18,430 --> 00:26:20,980
alguns cabeçalho h1, como fizemos.

502
00:26:20,980 --> 00:26:24,900
Você poderia fazer obter elementos por tag
nome, porque h1 é um nome de marca.

503
00:26:24,900 --> 00:26:29,270
E da mesma forma, se você quiser começar
uma coisa única, você pode fazer tag get.

504
00:26:29,270 --> 00:26:31,100
Obter elemento por Id.

505
00:26:31,100 --> 00:26:32,710
E eles são, na verdade, muitos destes.

506
00:26:32,710 --> 00:26:36,300
Estes são apenas como três dos muitos.

507
00:26:36,300 --> 00:26:39,600
Então, se você vai online, como
Eu estou indo para encorajar

508
00:26:39,600 --> 00:26:45,342
você fazer, e fazer alguma
pesquisa em seu próprio país,

509
00:26:45,342 --> 00:26:48,450
Eu recomendo definitivamente
olhando para tudo isso.

510
00:26:48,450 --> 00:26:50,880
Eles podem ser super
útil, especialmente quando

511
00:26:50,880 --> 00:26:57,180
você quer apenas uma espécie de manipular
coisas muito específicas, sem ter

512
00:26:57,180 --> 00:27:00,390
para passar e tentar
para analisar a tudo.

513
00:27:00,390 --> 00:27:03,540
>> OK, então a última coisa
é JavaScript eventos.

514
00:27:03,540 --> 00:27:10,730
Então, quando eu estava falando mais cedo
sobre ir em um site,

515
00:27:10,730 --> 00:27:14,340
e quando você passa o mouse sobre alguma coisa,
ou o mouse passa sobre alguma coisa,

516
00:27:14,340 --> 00:27:15,420
outra coisa acontece.

517
00:27:15,420 --> 00:27:17,900
Isto é o que nós gostaríamos de
pensar sobre como um evento.

518
00:27:17,900 --> 00:27:23,970
Então o que temos que poder
ser útil aqui é onclick.

519
00:27:23,970 --> 00:27:29,140
Então, o meu foi em foco, o que, eu sou
quase certeza, é apenas em foco.

520
00:27:29,140 --> 00:27:31,300
Também uma tonelada destes
que você pode procurar.

521
00:27:31,300 --> 00:27:34,340
Há toda uma lista on-line
das coisas diferentes

522
00:27:34,340 --> 00:27:37,130
que você pode ouvir.

523
00:27:37,130 --> 00:27:41,220
>> Mas os eventos JavaScript são
basicamente, apenas respondendo às coisas

524
00:27:41,220 --> 00:27:42,430
que o usuário está fazendo.

525
00:27:42,430 --> 00:27:42,930
Certo?

526
00:27:42,930 --> 00:27:45,220
Portanto, o seu usuário faz
alguma coisa, isso é um evento,

527
00:27:45,220 --> 00:27:48,340
e JavaScript responderão
contudo que você gostaria que ele.

528
00:27:48,340 --> 00:27:49,770
Ele vai responder em conformidade.

529
00:27:49,770 --> 00:27:54,630
Portanto, neste caso, temos
alguns onload janela ponto.

530
00:27:54,630 --> 00:27:57,170
Então, o que isto diz é, "esperar
até loaded da janela. "

531
00:27:57,170 --> 00:27:57,780
OK?

532
00:27:57,780 --> 00:28:02,102
Então, quando tudo está carregado, onload,
em seguida, você pode executar esta função.

533
00:28:02,102 --> 00:28:03,810
Então, quando tudo está
carregado, você está indo

534
00:28:03,810 --> 00:28:07,760
ter algum botão de pesquisa
que obtém um elemento por Id,

535
00:28:07,760 --> 00:28:13,740
e imprime o que quer que
elemento é como o botão Search.

536
00:28:13,740 --> 00:28:17,050
E então nós temos essa variável,
podemos dizer, "OK, onclick."

537
00:28:17,050 --> 00:28:20,390
Assim, quando ouvimos um clique
no botão Search,

538
00:28:20,390 --> 00:28:23,990
executar esta função, que é um
alerta, você clicou no botão Search.

539
00:28:23,990 --> 00:28:28,910
>> Então o que acontece é-- este é um bom
pouca representação gráfica aqui.

540
00:28:28,910 --> 00:28:31,480
Então, nossas cargas de documentos,
esse é o nosso onload,

541
00:28:31,480 --> 00:28:34,340
encontramos o nosso Pesquisa
botão, o que é isso.

542
00:28:34,340 --> 00:28:36,570
Nós estamos olhando para o nosso botão Search.

543
00:28:36,570 --> 00:28:40,790
E então, quando o botão de pesquisa é
clicado, ele corresponde a direita aqui.

544
00:28:40,790 --> 00:28:41,980
Onclick.

545
00:28:41,980 --> 00:28:47,300
Então nós finalmente alertar o nosso usuário,
que é esta última linha aqui.

546
00:28:47,300 --> 00:28:48,250
OK?

547
00:28:48,250 --> 00:28:52,960
Assim, cada uma dessas quatro etapas apenas
corresponde aos quatro caixas

548
00:28:52,960 --> 00:28:55,031
lá em baixo na parte inferior.

549
00:28:55,031 --> 00:28:56,405
Isso faz sentido para todos?

550
00:28:56,405 --> 00:29:01,120

551
00:29:01,120 --> 00:29:05,200
>> E, em seguida, uma coisa que eu só vou
mencionar muito, muito brevemente, que eu

552
00:29:05,200 --> 00:29:08,660
incentivar vocês a
vão olhar mais para se

553
00:29:08,660 --> 00:29:13,210
jQuery, que é apenas uma biblioteca
que é construído em cima de JavaScript.

554
00:29:13,210 --> 00:29:16,480
Ele é super útil, como
com a maioria das bibliotecas.

555
00:29:16,480 --> 00:29:18,320
Há muitas funções.

556
00:29:18,320 --> 00:29:21,930
Então, se há sempre algo que
você quer fazer em JavaScript,

557
00:29:21,930 --> 00:29:24,880
seu primeiro instinto
não deve ser pensar

558
00:29:24,880 --> 00:29:27,340
de, "o que função deve
I código? "Deveria ser,

559
00:29:27,340 --> 00:29:29,560
"Deixe-me ver alguém é
já fez isso por mim. "

560
00:29:29,560 --> 00:29:32,800
Porque nove em cada dez vezes,
alguém vai ter feito isso já,

561
00:29:32,800 --> 00:29:35,760
e eles provavelmente ter feito melhor.

562
00:29:35,760 --> 00:29:39,990
As pessoas gastam muito tempo fazendo estes,
e JavaScript é muito utilizado,

563
00:29:39,990 --> 00:29:42,810
para que as pessoas estão constantemente
tentando fazê-lo melhor.

564
00:29:42,810 --> 00:29:47,110
E jQuery tem um monte de funções
que, provavelmente, será útil para você

565
00:29:47,110 --> 00:29:50,470
em seu projeto final, se você estiver
fazer qualquer coisa com web design.

566
00:29:50,470 --> 00:29:53,480
Como eu gosto de dizer ", o trabalho
mais esperto, não mais. "

567
00:29:53,480 --> 00:29:57,130
Se vocês fazem isso, vai ser ótimo.

568
00:29:57,130 --> 00:30:00,330
Quando estamos no hackathon eu não
quero que você seja tudo forçado para fora.

569
00:30:00,330 --> 00:30:03,600
Eu quero que você seja do tipo: "Eu tenho
este. jQuery obtido minha parte traseira.

570
00:30:03,600 --> 00:30:05,790
Eu não preciso escrever estas funções ".

571
00:30:05,790 --> 00:30:07,636
>> Então, só duas coisas para
lembre-se, eu vou

572
00:30:07,636 --> 00:30:10,220
para deixar vocês olhar mais
em jQuery em seu próprio país.

573
00:30:10,220 --> 00:30:13,070
Tudo o que eu vou dizer é que
faz algumas coisas muito impressionantes

574
00:30:13,070 --> 00:30:15,220
e pode fazer a sua vida
muito mais fácil.

575
00:30:15,220 --> 00:30:17,150
Mas o que você quer
tem é qualquer arquivo

576
00:30:17,150 --> 00:30:21,020
que você vai usá-lo em,
você vai querer essas duas linhas.

577
00:30:21,020 --> 00:30:25,630
Você vai querer o
roteiro de js jQuery ponto js.

578
00:30:25,630 --> 00:30:28,500
E, na verdade, a sua fonte
vai haver alguma URL.

579
00:30:28,500 --> 00:30:35,870
Se você Google jQuery, Google
na verdade hospeda todos os arquivos para você.

580
00:30:35,870 --> 00:30:38,950
Então você definitivamente quero
de entrada que, em vez de URL.

581
00:30:38,950 --> 00:30:41,130
Acabei de colocar isso aqui
por razões de simplicidade.

582
00:30:41,130 --> 00:30:45,180
Tudo isso significa que a
encontrar sua biblioteca jQuery.

583
00:30:45,180 --> 00:30:48,600
É enorme, para que você não quer
para hospedá-lo em seu próprio computador

584
00:30:48,600 --> 00:30:53,390
se você pode evitá-lo, o que é por isso que nós
tendem a apenas colocar no URL do Google de que

585
00:30:53,390 --> 00:30:55,880
hospeda todos esses arquivos para você.

586
00:30:55,880 --> 00:30:56,380
OK?

587
00:30:56,380 --> 00:30:58,850
Você Google-lo, eu prometo
ele vai estar lá.

588
00:30:58,850 --> 00:31:01,200
>> E então o que quer
JavaScript arquivo que você está

589
00:31:01,200 --> 00:31:07,150
usando, então este é apenas alguns externo
JavaScript arquivo que você está usando.

590
00:31:07,150 --> 00:31:11,570
Da mesma forma que nós ligamos para o nosso CSS
arquivos, este é o mesmo tipo de coisa.

591
00:31:11,570 --> 00:31:15,480
Este apenas links para o arquivo
onde o seu JavaScript está.

592
00:31:15,480 --> 00:31:18,970
E eu tenho alguns exemplos
com JavaScript simples.

593
00:31:18,970 --> 00:31:20,220
Então, nós vamos estar passando por isso.

594
00:31:20,220 --> 00:31:27,230
E então, em seu índice de JavaScript,
qual é o seu arquivo JavaScript aqui,

595
00:31:27,230 --> 00:31:30,900
este é o tipo de invólucro
que você tem para jQuery.

596
00:31:30,900 --> 00:31:33,860
Você está quase 99,9
por cento do tempo indo

597
00:31:33,860 --> 00:31:36,800
ter isso em seu arquivo index.js.

598
00:31:36,800 --> 00:31:40,010
Porque o que este diz que é,
"Não executar nada

599
00:31:40,010 --> 00:31:43,480
até que o documento é, na verdade,
pronto ", que é exatamente o que você quer.

600
00:31:43,480 --> 00:31:46,600
Porque se o documento não está pronto,
jQuery e começa a fazer as coisas,

601
00:31:46,600 --> 00:31:48,020
é apenas uma confusão.

602
00:31:48,020 --> 00:31:50,480
Assim, você sempre quer ter este wrapper.

603
00:31:50,480 --> 00:31:55,760
E, em seguida, para as coisas que ir lá, eu
deixam a própria perusing dos seus rapazes.

604
00:31:55,760 --> 00:32:04,610
>> OK, então há dúvidas direita
agora sobre JavaScript em geral?

605
00:32:04,610 --> 00:32:07,420
Ou o modelo DOM?

606
00:32:07,420 --> 00:32:10,780
Se não, nós temos alguns cool
exemplos que podemos passar,

607
00:32:10,780 --> 00:32:13,120
que vocês podem me ajudar código.

608
00:32:13,120 --> 00:32:15,877
Mas eu também vou ser
super agradável, e se você

609
00:32:15,877 --> 00:32:17,960
não quer dizer nada
para estes, isso é bom.

610
00:32:17,960 --> 00:32:20,510
Eu também posso apenas dar-lhe exemplos.

611
00:32:20,510 --> 00:32:24,581
Mas nada no
PowerPoint, antes de seguir em frente?

612
00:32:24,581 --> 00:32:25,080
Com estilo.

613
00:32:25,080 --> 00:32:26,990
>> Eu sinto que vocês precisam de energia.

614
00:32:26,990 --> 00:32:31,516
Então, eu acho que nós vamos começar
com o meu exemplo do partido em primeiro lugar.

615
00:32:31,516 --> 00:32:33,390
Temos três exemplos,
você tem a sua escolha.

616
00:32:33,390 --> 00:32:37,720
Portanto, temos de relógio, para onde estamos indo
para implementar um relógio real que é

617
00:32:37,720 --> 00:32:41,430
indo para atualizar o passar do tempo.

618
00:32:41,430 --> 00:32:43,310
Temos este grande função Twitter.

619
00:32:43,310 --> 00:32:44,560
Isto-- você sabe o que, espera.

620
00:32:44,560 --> 00:32:47,220
Nós vamos fazer isso ir embora.

621
00:32:47,220 --> 00:32:47,950
Bam.

622
00:32:47,950 --> 00:32:49,060
OK.

623
00:32:49,060 --> 00:32:56,132
>> Temos este grande função Twitter
aqui, isso-- eu sei, certo?

624
00:32:56,132 --> 00:32:57,090
Vai ser ótimo.

625
00:32:57,090 --> 00:32:58,350
Vocês estão excitados?

626
00:32:58,350 --> 00:33:01,170
Isso vai contar o número
de caracteres que você deixou,

627
00:33:01,170 --> 00:33:04,520
por isso, se eu digitar agora,
obviamente, ele ainda diz que 140,

628
00:33:04,520 --> 00:33:06,190
mas sabemos que não é o caso.

629
00:33:06,190 --> 00:33:08,570
E, em seguida, com a nossa última
aqui, clique aqui para a festa.

630
00:33:08,570 --> 00:33:12,150
O que vai acontecer é quando
clicamos, o fundo de

631
00:33:12,150 --> 00:33:13,340
vai mudar as cores.

632
00:33:13,340 --> 00:33:17,060
Então, vocês têm as suas opções de
qual deles você quer fazer primeiro.

633
00:33:17,060 --> 00:33:19,800
Eu prometo que vou levá-lo muito fácil para você.

634
00:33:19,800 --> 00:33:22,680
Eu sinto que todo mundo é meio
de apenas muito baixo chave hoje.

635
00:33:22,680 --> 00:33:25,540
Então, eu vou orientá-lo como
vamos implementar todos estes.

636
00:33:25,540 --> 00:33:28,520
Se você quiser badalar
em, isso é ótimo, mas eu

637
00:33:28,520 --> 00:33:30,020
sinto que todo mundo é um pouco cansado.

638
00:33:30,020 --> 00:33:32,970
Então eu vou levá-lo
através destes exemplos.

639
00:33:32,970 --> 00:33:35,015
Nós temos algo que
nós gostaríamos de fazer primeiro?

640
00:33:35,015 --> 00:33:38,140

641
00:33:38,140 --> 00:33:39,475
Anyone?

642
00:33:39,475 --> 00:33:41,350
Sem preferências?

643
00:33:41,350 --> 00:33:41,867
OK.

644
00:33:41,867 --> 00:33:42,450
Você sabe o que?

645
00:33:42,450 --> 00:33:43,290
Nós estamos em festa.

646
00:33:43,290 --> 00:33:48,380
Eu sinto que vocês precisam de um little--
por isso, vamos fazer a um partido em primeiro lugar.

647
00:33:48,380 --> 00:33:48,880
OK.

648
00:33:48,880 --> 00:33:51,470

649
00:33:51,470 --> 00:33:56,930
>> Então o que temos aqui-- é isso
não deveria estar lá.

650
00:33:56,930 --> 00:33:57,910
Agora é bom.

651
00:33:57,910 --> 00:33:59,810
OK.

652
00:33:59,810 --> 00:34:03,110
Então o que temos aqui é
apenas uma página HTML simples

653
00:34:03,110 --> 00:34:07,840
que vocês todos devem ser super
familiarizado com o de seus dois últimos Série de Exercícios.

654
00:34:07,840 --> 00:34:10,212
temos o nosso tipo doc aqui.

655
00:34:10,212 --> 00:34:10,920
Todos podem ver?

656
00:34:10,920 --> 00:34:11,420
OK.

657
00:34:11,420 --> 00:34:12,560
Com estilo.

658
00:34:12,560 --> 00:34:13,900
Temos o nosso HTML obviamente.

659
00:34:13,900 --> 00:34:18,360
Temos alguns cabeçalho que é
ligada a uma folha de estilo que

660
00:34:18,360 --> 00:34:21,420
só fez o meu pia batismal agradável e grande e corajoso.

661
00:34:21,420 --> 00:34:23,489
Então não se preocupe com isso.

662
00:34:23,489 --> 00:34:26,437
>> Temos algum corpo com
um fundo Id, OK?

663
00:34:26,437 --> 00:34:28,520
Porque nós vamos ficar
mudando o fundo.

664
00:34:28,520 --> 00:34:31,964
Então, quando nós estamos mudando o
fundo do nosso corpo,

665
00:34:31,964 --> 00:34:35,965
lembramo-nos de duas semanas atrás
quando estamos lidando com páginas da web.

666
00:34:35,965 --> 00:34:36,840
Tão bom ter isso.

667
00:34:36,840 --> 00:34:39,270
E nós temos alguns Id equivale festa.

668
00:34:39,270 --> 00:34:43,909
Este h ref libra significa apenas que
ele está indo para ir para a mesma página.

669
00:34:43,909 --> 00:34:47,120
E clique aqui para a festa,
que é por isso que quando clicar nele,

670
00:34:47,120 --> 00:34:48,940
ele deve alterar as cores, felizmente.

671
00:34:48,940 --> 00:34:54,322
>> E então nós temos algum script aqui que
está apenas ligado a este partido js dot

672
00:34:54,322 --> 00:34:58,100
arquivo, que está vazio, porque
nós não fizemos nada ainda.

673
00:34:58,100 --> 00:35:00,450
E é tão triste.

674
00:35:00,450 --> 00:35:06,100
Mas muito em breve, ele vai mudar
cores, e vai ser incrível.

675
00:35:06,100 --> 00:35:10,520
>> Então, eu só vou orientá-lo caras
através de como podemos abordar isso.

676
00:35:10,520 --> 00:35:14,030
Então a primeira coisa que
podemos querer fazer,

677
00:35:14,030 --> 00:35:18,050
se estamos mudando o fundo de
o corpo, a primeira coisa que pode querer

678
00:35:18,050 --> 00:35:22,730
fazer é realmente agarrar
o que o corpo é, certo?

679
00:35:22,730 --> 00:35:27,690
Então, nós queremos ter soma, o nosso
fundo, e se você observar,

680
00:35:27,690 --> 00:35:29,567
Eu só automaticamente basta começar a digitar.

681
00:35:29,567 --> 00:35:32,400
Não há nada de especial que
precisa fazer para os nossos arquivos JavaScript.

682
00:35:32,400 --> 00:35:35,820
Eu posso começar a declaração de variáveis,
e declarando funções aleatórias.

683
00:35:35,820 --> 00:35:38,110
E é forma muito mais livre.

684
00:35:38,110 --> 00:35:41,930
É como com C, que lhe deu tudo
estas regras duras, e você cresceu,

685
00:35:41,930 --> 00:35:43,220
por isso estamos como, "ir por diante.

686
00:35:43,220 --> 00:35:44,000
Seja livre.

687
00:35:44,000 --> 00:35:44,870
Faça o que quiser. "

688
00:35:44,870 --> 00:35:46,280
E é isso que é JavaScript.

689
00:35:46,280 --> 00:35:48,390
Portanto, temos algumas informações aqui.

690
00:35:48,390 --> 00:35:55,900
Com o nosso modelo DOM, sabemos que
pode fazer documento dot obter elemento,

691
00:35:55,900 --> 00:36:00,290
e se notar aqui,
o nosso corpo tem um Id.

692
00:36:00,290 --> 00:36:00,930
Certo?

693
00:36:00,930 --> 00:36:06,310
Assim, podemos fazer chegar documento por
Id, e aqui está um simples.

694
00:36:06,310 --> 00:36:08,295
Qual é o nosso Id que queremos aqui?

695
00:36:08,295 --> 00:36:09,170
AUDIÊNCIA: Fundo.

696
00:36:09,170 --> 00:36:11,280
ALLISON Buchholtz-AU: Fundo.

697
00:36:11,280 --> 00:36:12,230
Perfeito.

698
00:36:12,230 --> 00:36:14,250
E ponto e vírgula no final.

699
00:36:14,250 --> 00:36:15,610
Isso não desapareceu ainda.

700
00:36:15,610 --> 00:36:17,330
Você ainda precisa de seus ponto e vírgula.

701
00:36:17,330 --> 00:36:17,830
OK.

702
00:36:17,830 --> 00:36:19,690
Então, esse é o nosso primeiro.

703
00:36:19,690 --> 00:36:23,880
E quando nós clique algo, nós
quer que algo aconteça, certo?

704
00:36:23,880 --> 00:36:28,270
Então, nós pode querer alguma variável
que está à espera de um clique.

705
00:36:28,270 --> 00:36:32,410
O que vamos fazer é que vamos
fazer a nossa ligação mais semelhante a um botão.

706
00:36:32,410 --> 00:36:43,140
Então nós vamos ter algum botão que
é igual a documentar dot obter elemento por Id.

707
00:36:43,140 --> 00:36:48,670
E se eu estou falando sobre o
clique no link ou clique aqui para festejar

708
00:36:48,670 --> 00:36:51,850
link, o que poderia minha Id estar aqui?

709
00:36:51,850 --> 00:36:52,590
Parte.

710
00:36:52,590 --> 00:36:55,200
Correto.

711
00:36:55,200 --> 00:36:56,500
OK não muito ruim até agora.

712
00:36:56,500 --> 00:36:59,060
Toda a gente conseguir o que estamos fazendo?

713
00:36:59,060 --> 00:37:02,100
>> OK, então agora temos o nosso
botão, e nós queremos

714
00:37:02,100 --> 00:37:04,140
que as coisas mudem quando eu clicar sobre ele.

715
00:37:04,140 --> 00:37:08,750
Então, se nós nos lembramos do nosso PowerPoint,
coisa muito simples que podemos fazer

716
00:37:08,750 --> 00:37:12,140
é apenas botão dot onclick, certo?

717
00:37:12,140 --> 00:37:14,750

718
00:37:14,750 --> 00:37:18,730
E isso vai para igualar alguma função.

719
00:37:18,730 --> 00:37:20,620
Esta é uma função anônima.

720
00:37:20,620 --> 00:37:24,620
E isso só as-- na verdade eu sou
vai fazer isso um pouco maior.

721
00:37:24,620 --> 00:37:27,330
>> Então o que eu fiz
aqui é que eu estou dizendo, OK,

722
00:37:27,330 --> 00:37:31,810
quando clicamos nosso botão, o que é
esta ligação que nós apenas referido,

723
00:37:31,810 --> 00:37:34,270
nós estamos indo para executar
esta função anônima.

724
00:37:34,270 --> 00:37:35,845
Nós não precisamos de qualquer entrada.

725
00:37:35,845 --> 00:37:37,220
Nós não nos importamos o que o usuário diz.

726
00:37:37,220 --> 00:37:38,800
Quando clicar nele, estamos
vai fazer o que quisermos,

727
00:37:38,800 --> 00:37:40,660
que é mudar a cor de fundo.

728
00:37:40,660 --> 00:37:42,640
OK?

729
00:37:42,640 --> 00:37:47,224
Então é por isso que não temos quaisquer entradas,
só temos esta função anônima.

730
00:37:47,224 --> 00:37:49,390
E agora nós estamos indo realmente
para escrever esta função.

731
00:37:49,390 --> 00:37:55,040
>> Portanto, há um monte de maneiras que você
poderia gerar uma cor aleatória.

732
00:37:55,040 --> 00:37:59,010
A maneira que eu fiz foi para
gerar três números aleatórios

733
00:37:59,010 --> 00:38:01,910
e convertê-los para um RGB triplo.

734
00:38:01,910 --> 00:38:06,130
Então, isso só mostra que alguns cool
coisas que, se você é como, "oh,

735
00:38:06,130 --> 00:38:08,464
Eu preciso gerar um aleatório
número. "Se você Googled-lo,

736
00:38:08,464 --> 00:38:09,630
isso é o que você iria encontrar.

737
00:38:09,630 --> 00:38:17,580
>> Então, nós temos três diferentes
coisas, Var, não vermelho de novo, verde.

738
00:38:17,580 --> 00:38:18,080
Certo?

739
00:38:18,080 --> 00:38:20,740
Portanto, estas são as três
coisas que compõem uma cor.

740
00:38:20,740 --> 00:38:22,220
Azul, vermelho e verde.

741
00:38:22,220 --> 00:38:22,960
Com estilo.

742
00:38:22,960 --> 00:38:27,050
E o que podemos fazer é que sabemos
que deve estar entre 255,

743
00:38:27,050 --> 00:38:30,140
e se você olhou para alguns
gerador de números aleatórios,

744
00:38:30,140 --> 00:38:36,000
você pode obter algo como matemática
dot aleatório, que se você pesquisar sobre o assunto

745
00:38:36,000 --> 00:38:39,230
retorna para algum número
entre zero e um.

746
00:38:39,230 --> 00:38:39,980
OK?

747
00:38:39,980 --> 00:38:44,470
E o que os números de fazer o nosso
Triplos RGB passar pelo meio?

748
00:38:44,470 --> 00:38:47,240
Zero e o quê?

749
00:38:47,240 --> 00:38:49,000
O que eles podem ir até?

750
00:38:49,000 --> 00:38:49,950
255.

751
00:38:49,950 --> 00:38:53,320
Então, se a matemática de pontos aleatórios
vai entre zero e um,

752
00:38:53,320 --> 00:38:56,365
como podemos querer converter isso?

753
00:38:56,365 --> 00:38:56,990
AUDIÊNCIA: Time?

754
00:38:56,990 --> 00:38:57,830
ALLISON Buchholtz-AU: Sim, exatamente.

755
00:38:57,830 --> 00:38:58,677
Assim, o tempo é de 255.

756
00:38:58,677 --> 00:39:00,888
>> AUDIÊNCIA: [inaudível]
É como [inaudível].

757
00:39:00,888 --> 00:39:02,471
ALLISON Buchholtz-AU: Math dot aleatória.

758
00:39:02,471 --> 00:39:03,096
AUDIÊNCIA: Cool.

759
00:39:03,096 --> 00:39:04,580
ALLISON Buchholtz-AU: Sim.

760
00:39:04,580 --> 00:39:06,300
JavaScript apenas cuida de você.

761
00:39:06,300 --> 00:39:07,580
OK.

762
00:39:07,580 --> 00:39:09,360
Assim, podemos fazer isso para todos eles.

763
00:39:09,360 --> 00:39:10,540
Certo?

764
00:39:10,540 --> 00:39:16,480
Math pontuam momentos aleatórios 255.

765
00:39:16,480 --> 00:39:17,740
Entendido.

766
00:39:17,740 --> 00:39:18,820
Com estilo.

767
00:39:18,820 --> 00:39:23,350
Assim, a coisa é, isso pode
não retornar um inteiro.

768
00:39:23,350 --> 00:39:24,080
Certo?

769
00:39:24,080 --> 00:39:26,450
Talvez nós obter algum número
entre zero e um,

770
00:39:26,450 --> 00:39:32,150
e que faz com que seja ligeiramente
off, e os nossos RGBs não pode ser carros alegóricos.

771
00:39:32,150 --> 00:39:33,360
Eles precisam ser inteiros.

772
00:39:33,360 --> 00:39:37,610
Então, se você já tentou isso, provavelmente
ter algum comportamento errático.

773
00:39:37,610 --> 00:39:38,810
Seria um pouco descolados.

774
00:39:38,810 --> 00:39:43,200
Então, o que nós fazemos é que nós queremos fazer
certo que estes são arredondados,

775
00:39:43,200 --> 00:39:45,400
e você poderia arredondar qualquer maneira.

776
00:39:45,400 --> 00:39:47,110
I arredondado com piso.

777
00:39:47,110 --> 00:39:49,680
Então, eu sempre fez-se
que arredondados para baixo.

778
00:39:49,680 --> 00:39:54,440
Mas saindo de como simples
era apenas para obter um número aleatório,

779
00:39:54,440 --> 00:39:57,920
como você acha que nós
pode andar este número?

780
00:39:57,920 --> 00:40:00,720
É muito similar.

781
00:40:00,720 --> 00:40:02,810
Alguma idéia?

782
00:40:02,810 --> 00:40:06,450
Então, se acaso era apenas ponto de matemática
aleatória, por que você acha que faríamos chão?

783
00:40:06,450 --> 00:40:09,670
Andar dot Math.

784
00:40:09,670 --> 00:40:11,340
E você também pode fazer teto dot matemática.

785
00:40:11,340 --> 00:40:14,030
Rodada é uma espécie de ambíguo
porque você não fazer

786
00:40:14,030 --> 00:40:16,110
saber se arredondar para cima ou para arredondar para baixo.

787
00:40:16,110 --> 00:40:20,797
Então, normalmente sempre fazemos matemática
andar dot, teto matemática ponto.

788
00:40:20,797 --> 00:40:21,380
Mas honestly--

789
00:40:21,380 --> 00:40:22,780
>> AUDIÊNCIA: O chão rodada para baixo?

790
00:40:22,780 --> 00:40:24,740
>> ALLISON Buchholtz-AU: Piso arredonda para baixo.

791
00:40:24,740 --> 00:40:26,990
E isso é apenas uma escolha da minha parte.

792
00:40:26,990 --> 00:40:32,370
>> Portanto, agora temos os nossos três números
que foram gerados aleatoriamente,

793
00:40:32,370 --> 00:40:36,610
e o que vamos fazer agora é que estamos
só vai mudar o fundo.

794
00:40:36,610 --> 00:40:37,310
OK?

795
00:40:37,310 --> 00:40:41,490
Então, nós já temos o nosso
fundo tipo de armazenado

796
00:40:41,490 --> 00:40:43,280
neste elemento chamado fundo.

797
00:40:43,280 --> 00:40:47,300
Então, o que você vai notar é que, se
você brincou com isso,

798
00:40:47,300 --> 00:40:50,460
queremos mudar o estilo.

799
00:40:50,460 --> 00:40:53,812
E este é o tipo de coisa que
você Google e descobrir,

800
00:40:53,812 --> 00:40:55,020
gosto de como mudar a cor.

801
00:40:55,020 --> 00:40:59,210
>> Mas a forma de acessar essa cor é
fundo do ponto fundo do estilo do ponto.

802
00:40:59,210 --> 00:41:03,490
Então isto está dizendo dada
este objeto, fundo,

803
00:41:03,490 --> 00:41:06,920
que se refere a essa
elemento Id lá em cima,

804
00:41:06,920 --> 00:41:10,690
vamos olhar para o
estilo dentro do estilo,

805
00:41:10,690 --> 00:41:13,280
vamos olhar para o fundo.

806
00:41:13,280 --> 00:41:14,270
OK?

807
00:41:14,270 --> 00:41:17,630
E se você ir e pesquisar sobre o assunto,
ele pode fazer um pouco mais de sentido,

808
00:41:17,630 --> 00:41:21,930
mas isto é, basicamente, apenas dizendo:
"Dá-me este atributo muito específico

809
00:41:21,930 --> 00:41:25,770
do que tenho definido anteriormente. "

810
00:41:25,770 --> 00:41:32,340
Então, o que nós estamos mudando-a para é
alguns RGB, porque faz sentido.

811
00:41:32,340 --> 00:41:34,780
Estamos usando RGB triplica, certo?

812
00:41:34,780 --> 00:41:41,530
E nós have-- eu quero ter certeza que eu
obter o número certo de citações aqui.

813
00:41:41,530 --> 00:41:43,940
Então, o que fazemos é que temos
RGB, e vamos

814
00:41:43,940 --> 00:41:46,800
a-- isto é como
concatenação, que é vermelho.

815
00:41:46,800 --> 00:41:50,030

816
00:41:50,030 --> 00:41:52,610
E então nós queremos alguma vírgula.

817
00:41:52,610 --> 00:41:59,925
E então queremos verde plus,
em seguida, alguns vírgula, e um pouco de azul.

818
00:41:59,925 --> 00:42:10,640

819
00:42:10,640 --> 00:42:14,120
>> Assim estas vantagens apenas
quer dizer, como concatenação.

820
00:42:14,120 --> 00:42:19,810
Portanto, esta é apenas criar esta
string que está acontecendo dentro de RGB.

821
00:42:19,810 --> 00:42:20,310
OK?

822
00:42:20,310 --> 00:42:23,200

823
00:42:23,200 --> 00:42:26,684
>> AUDIÊNCIA: [inaudível] mais seguida
a um verde mais, em seguida, o vermelho.

824
00:42:26,684 --> 00:42:30,163
>> ALLISON Buchholtz-AU: Sim,
porque eu errei isso.

825
00:42:30,163 --> 00:42:30,890
Essa é uma multa.

826
00:42:30,890 --> 00:42:32,110
Oh, espere.

827
00:42:32,110 --> 00:42:32,610
Não.

828
00:42:32,610 --> 00:42:36,770
Porque eu preciso ter certeza de
que eu tenho tudo isso direito.

829
00:42:36,770 --> 00:42:39,680

830
00:42:39,680 --> 00:42:43,950
Então eu vou explicar em momento uno.

831
00:42:43,950 --> 00:42:47,040
Verde, azul, perfeito.

832
00:42:47,040 --> 00:42:47,971
Agora eu sou feito.

833
00:42:47,971 --> 00:42:48,470
Acredito.

834
00:42:48,470 --> 00:42:51,570

835
00:42:51,570 --> 00:42:52,530
>> OK.

836
00:42:52,530 --> 00:42:58,085
Então o que é isso, é que o fundo
vai ser definida como uma string.

837
00:42:58,085 --> 00:42:58,585
Certo?

838
00:42:58,585 --> 00:42:59,710
Que é o que nós temos aqui.

839
00:42:59,710 --> 00:43:05,870
Vai haver algum RGB 255 vírgula
255 de zero vírgula, ou qualquer número que você

840
00:43:05,870 --> 00:43:06,512
tem lá.

841
00:43:06,512 --> 00:43:08,220
Então, nós estamos fazendo aqui,
temos alguma string.

842
00:43:08,220 --> 00:43:11,910
E o que nós queremos fazer, é que estamos
espécie de criar dinamicamente

843
00:43:11,910 --> 00:43:14,010
que quando nós realmente executar este programa.

844
00:43:14,010 --> 00:43:16,570
Portanto, esta é uma string.

845
00:43:16,570 --> 00:43:20,290
Além disso, encadeia-lo com
o valor que o vermelho tem,

846
00:43:20,290 --> 00:43:23,320
que encadeia-lo com um
vírgula, que concatena-lo

847
00:43:23,320 --> 00:43:26,090
com o que é verde, e
assim por diante, e assim por diante.

848
00:43:26,090 --> 00:43:26,660
OK?

849
00:43:26,660 --> 00:43:32,210
Até ao fim, que é a
fechando desta parênteses RGB aqui.

850
00:43:32,210 --> 00:43:32,800
OK?

851
00:43:32,800 --> 00:43:37,230
>> Então o que é que isto vai
gerar algum comando realmente

852
00:43:37,230 --> 00:43:42,770
que é RGB de três números
que o fundo já está definido para.

853
00:43:42,770 --> 00:43:43,940
OK?

854
00:43:43,940 --> 00:43:46,510
Então vamos ver se isso funciona.

855
00:43:46,510 --> 00:43:49,720
Eu espero que ele faz, porque se
não, eu vou ficar muito triste.

856
00:43:49,720 --> 00:43:50,250
Ah, não.

857
00:43:50,250 --> 00:43:52,710
OK, espere.

858
00:43:52,710 --> 00:43:56,730
Definitivamente fundo
fundo do ponto estilo dot.

859
00:43:56,730 --> 00:43:59,569
Eu estou definitivamente ausente
algo apenas pequena.

860
00:43:59,569 --> 00:44:00,610
Vocês não odeiam isso?

861
00:44:00,610 --> 00:44:04,020
Quando é apenas uma pequena pequeno erro?

862
00:44:04,020 --> 00:44:04,990
Fundo Todo-Poderoso.

863
00:44:04,990 --> 00:44:08,391

864
00:44:08,391 --> 00:44:08,890
RGB.

865
00:44:08,890 --> 00:44:09,765
>> AUDIÊNCIA: [inaudível]

866
00:44:09,765 --> 00:44:11,729

867
00:44:11,729 --> 00:44:12,770
ALLISON Buchholtz-AU: No.

868
00:44:12,770 --> 00:44:14,050
Eu tentei isso antes da aula.

869
00:44:14,050 --> 00:44:16,570
Tenho tudo o que fez antes
classe, no caso eu era como,

870
00:44:16,570 --> 00:44:17,970
"Espere, o que foi que eu fiz de errado?"

871
00:44:17,970 --> 00:44:23,190
Porque eu era como, "Eu, provavelmente,
estragar isso em algum momento. "

872
00:44:23,190 --> 00:44:24,150
Além disso verde.

873
00:44:24,150 --> 00:44:26,250
Tudo parece que está
concatenado correctamente.

874
00:44:26,250 --> 00:44:29,620

875
00:44:29,620 --> 00:44:30,520
OK.

876
00:44:30,520 --> 00:44:31,870
>> AUDIÊNCIA: [inaudível]

877
00:44:31,870 --> 00:44:33,810
>> ALLISON Buchholtz-AU: Oh, lá vai.

878
00:44:33,810 --> 00:44:35,520
Isso é o que eu precisava.

879
00:44:35,520 --> 00:44:36,805
Olhe para isso.

880
00:44:36,805 --> 00:44:40,090
Tiffany para resgatar.

881
00:44:40,090 --> 00:44:40,590
Perfeito.

882
00:44:40,590 --> 00:44:41,090
OK.

883
00:44:41,090 --> 00:44:43,834
Agora vamos ver se funciona.

884
00:44:43,834 --> 00:44:44,816
Meu Deus.

885
00:44:44,816 --> 00:44:45,641
OK.

886
00:44:45,641 --> 00:44:46,140
Aguente.

887
00:44:46,140 --> 00:44:48,280
>> AUDIÊNCIA: Space após a segunda plus.

888
00:44:48,280 --> 00:44:50,310
>> ALLISON Buchholtz-AU: Qual?

889
00:44:50,310 --> 00:44:52,910
Oh, espere, espere.

890
00:44:52,910 --> 00:44:54,870
Desgaste espaço?

891
00:44:54,870 --> 00:44:57,209
>> AUDIÊNCIA: Second mais em
a concatenação verde.

892
00:44:57,209 --> 00:44:58,250
ALLISON Buchholtz-AU: Oh.

893
00:44:58,250 --> 00:44:59,570
AUDIÊNCIA: Não há nenhum espaço
depois do mais, sim.

894
00:44:59,570 --> 00:45:00,790
ALLISON Buchholtz-AU: Você
Não é necessário que, mas-

895
00:45:00,790 --> 00:45:01,190
AUDIÊNCIA: Oh, você não?

896
00:45:01,190 --> 00:45:01,910
ALLISON Buchholtz-AU: Parece muito.

897
00:45:01,910 --> 00:45:02,530
AUDIÊNCIA: OK.

898
00:45:02,530 --> 00:45:03,030
OK.

899
00:45:03,030 --> 00:45:05,170
>> ALLISON Buchholtz AU:
Vamos ver se isso funciona.

900
00:45:05,170 --> 00:45:05,670
OK.

901
00:45:05,670 --> 00:45:07,836
Eu, obviamente, estou falhando em
esta demo, que me faz lembrar

902
00:45:07,836 --> 00:45:12,810
de uma palestra na outra semana,
mas eu sei que isso vai funcionar.

903
00:45:12,810 --> 00:45:15,860
Eu sei que isso vai funcionar.

904
00:45:15,860 --> 00:45:16,580
Tão perto.

905
00:45:16,580 --> 00:45:22,330
A menos que eu acidentalmente apagado
meu script em um presente.

906
00:45:22,330 --> 00:45:24,035
Não, é ponto de partido js.

907
00:45:24,035 --> 00:45:25,776
OK segurar.

908
00:45:25,776 --> 00:45:28,650
Vou copiar este, e eu também sou
só vai apagar tudo,

909
00:45:28,650 --> 00:45:30,108
porque eu tinha essa de trabalho mais cedo.

910
00:45:30,108 --> 00:45:32,470

911
00:45:32,470 --> 00:45:33,770
>> Eu prometo que funciona.

912
00:45:33,770 --> 00:45:36,160
Se não, eu vou te mostrar o que é de Tommy.

913
00:45:36,160 --> 00:45:38,890
E lá.

914
00:45:38,890 --> 00:45:42,380
>> AUDIÊNCIA: Você está fazendo referência a partido
dot CSS, e é uma festa de ponto js.

915
00:45:42,380 --> 00:45:45,940
>> ALLISON Buchholtz-AU: Ah, bem
aqui é js ponto de partido.

916
00:45:45,940 --> 00:45:49,187
OK, o que eu fiz diferente?

917
00:45:49,187 --> 00:45:50,520
OK, vamos ver se isso funciona agora.

918
00:45:50,520 --> 00:45:54,180

919
00:45:54,180 --> 00:45:54,980
Bam.

920
00:45:54,980 --> 00:46:02,110
Então, eu não sei o que eu fiz de forma diferente,
mas isso é o que deveria acontecer.

921
00:46:02,110 --> 00:46:03,230
Kinda cool.

922
00:46:03,230 --> 00:46:06,650
Eu cliquei no presente, como, para sempre.

923
00:46:06,650 --> 00:46:11,185
Mas podemos tentar e ver o que eu fiz
diferente que este tinha.

924
00:46:11,185 --> 00:46:14,560
Eu não sei quanto a vocês, mas esta
olha basicamente o que eu escrevi.

925
00:46:14,560 --> 00:46:17,950
Havia provavelmente uma desaparecida
ponto e vírgula em algum lugar é a minha coisa.

926
00:46:17,950 --> 00:46:22,064
Na verdade, depois, eu acho que estava faltando
um ponto e vírgula aqui, na verdade.

927
00:46:22,064 --> 00:46:24,230
Mas eu não podia vê-lo porque
era fora da tela.

928
00:46:24,230 --> 00:46:29,040
>> Mas se observarmos, isso é muito
muito exatamente o que eu escrevi.

929
00:46:29,040 --> 00:46:33,010
Eu acho que, provavelmente, a parte mais difícil de
esta é apenas uma espécie de esta coisa certa

930
00:46:33,010 --> 00:46:36,830
aqui, a compreensão
o que está fazendo lá.

931
00:46:36,830 --> 00:46:42,230
Esses tipos de coisas que você aprende
realmente apenas pesquisando por e honesta

932
00:46:42,230 --> 00:46:42,880
apenas tentando.

933
00:46:42,880 --> 00:46:46,770
Se você acha que há algum
atributo, provavelmente há.

934
00:46:46,770 --> 00:46:48,382
Então, experimentá-lo.

935
00:46:48,382 --> 00:46:49,090
Veja o que acontece.

936
00:46:49,090 --> 00:46:53,000
Como eu disse, há um monte de
experimentação com JavaScript,

937
00:46:53,000 --> 00:46:56,810
e PHP, e tudo o que
material, e CSS especialmente.

938
00:46:56,810 --> 00:47:00,046
Essa é a única verdadeira
maneira de compreendê-lo.

939
00:47:00,046 --> 00:47:07,100
>> OK, então depois desse fiasco com festa
js ponto, temos duas outras opções.

940
00:47:07,100 --> 00:47:10,650
Temos relógio ou Twitter.

941
00:47:10,650 --> 00:47:12,190
Ambos são interessantes.

942
00:47:12,190 --> 00:47:17,720
Talvez não tão divertido como partido,
que teve um pouco de efeito estroboscópico legal

943
00:47:17,720 --> 00:47:19,595
coisa no final.

944
00:47:19,595 --> 00:47:21,714
Vocês tem alguma preferência?

945
00:47:21,714 --> 00:47:22,380
AUDIÊNCIA: Clock?

946
00:47:22,380 --> 00:47:22,950
ALLISON Buchholtz-AU: Clock?

947
00:47:22,950 --> 00:47:23,450
OK.

948
00:47:23,450 --> 00:47:25,390
Com estilo.

949
00:47:25,390 --> 00:47:30,460
>> Então, novamente, temos a nossa
arquivo JavaScript vazio.

950
00:47:30,460 --> 00:47:35,800
E como vemos aqui, nós
ter algum HTML muito simples.

951
00:47:35,800 --> 00:47:40,010
Nós temos a nossa folha de estilo, que apenas
formata o que ele deve ser parecido.

952
00:47:40,010 --> 00:47:42,860
Nós temos nossa div com
um Id de relógio, que

953
00:47:42,860 --> 00:47:44,420
apenas diz, "este deve ser um relógio."

954
00:47:44,420 --> 00:47:47,650
E nós temos o nosso link
ao nosso arquivo JavaScript

955
00:47:47,650 --> 00:47:51,400
que realmente vai
gerar o nosso relógio para nós.

956
00:47:51,400 --> 00:47:56,060
Porque a coisa legal, é que você pode
definir JavaScript para atualizar automaticamente

957
00:47:56,060 --> 00:47:56,963
si.

958
00:47:56,963 --> 00:47:57,810
OK?

959
00:47:57,810 --> 00:48:01,580
Então, ao invés de esperar que o
usuário para bater Atualizar em uma página

960
00:48:01,580 --> 00:48:03,840
de modo que você pode obter
horário atualizado, JavaScript

961
00:48:03,840 --> 00:48:06,760
pode atualizá-lo no entanto, ele gosta.

962
00:48:06,760 --> 00:48:12,082
>> Então, como acontece com o nosso último, queríamos
para acessar o nosso fundo, certo?

963
00:48:12,082 --> 00:48:14,790
Então, o que você acha que pode ser o
primeira coisa que queremos fazer aqui?

964
00:48:14,790 --> 00:48:19,538
Se nós estamos nos saindo
este tipo de paradigma aqui?

965
00:48:19,538 --> 00:48:22,200
Nós provavelmente vai querer
acessar o nosso relógio, certo?

966
00:48:22,200 --> 00:48:24,724
Então, nós temos alguns var
relógio, que equals--

967
00:48:24,724 --> 00:48:26,140
o que é que acha que vai ser?

968
00:48:26,140 --> 00:48:29,290

969
00:48:29,290 --> 00:48:42,670
Documento dot obter elemento por-- Eu também
amo Sublime-- Id e nossa Id é o relógio.

970
00:48:42,670 --> 00:48:43,585
Ponto e vírgula.

971
00:48:43,585 --> 00:48:45,710
Tenho que ter certeza de obter
esses semicolons desta vez,

972
00:48:45,710 --> 00:48:47,835
porque eu sinto que
foi o problema da última vez.

973
00:48:47,835 --> 00:48:55,980
OK, então, como eu estava dizendo com a tentativa
de ter o JavaScript refrescar-se,

974
00:48:55,980 --> 00:48:59,655
há essa grande função, I
sei que veio a calhar no ano passado,

975
00:48:59,655 --> 00:49:02,780
Eu não tenho certeza que ele vem a calhar para este
pset, mas ele é chamado de intervalo definido.

976
00:49:02,780 --> 00:49:05,640

977
00:49:05,640 --> 00:49:08,200
E isso é realmente muito
legal se vocês fazem nada

978
00:49:08,200 --> 00:49:11,460
com o tempo ou ficar
informações atualizadas.

979
00:49:11,460 --> 00:49:13,700
Em um site para a final
projeto, esta é provavelmente

980
00:49:13,700 --> 00:49:16,240
uma função que deseja
obter super familiarizado.

981
00:49:16,240 --> 00:49:19,730
Assim que definir o intervalo faz é que
vamos dar-lhe uma função,

982
00:49:19,730 --> 00:49:21,830
e quantas vezes ele deveria
chamar essa função.

983
00:49:21,830 --> 00:49:22,430
OK?

984
00:49:22,430 --> 00:49:26,890
>> Portanto, neste caso, nós apenas estamos indo para
criar alguma função anônima de novo,

985
00:49:26,890 --> 00:49:31,530
OK, que vai ficar
nossa data, e nosso tempo,

986
00:49:31,530 --> 00:49:33,780
e então atualizar as coisas e exibi-lo.

987
00:49:33,780 --> 00:49:35,130
Então, vamos preocupar com isso.

988
00:49:35,130 --> 00:49:39,120
Nós vamos ser como gerar relógio aqui.

989
00:49:39,120 --> 00:49:41,750
Mas o que precisamos é como
muitas vezes para atualizá-la.

990
00:49:41,750 --> 00:49:43,930
Portanto, neste caso, é apenas milissegundos.

991
00:49:43,930 --> 00:49:46,877
Então, nós apenas estamos indo para
fazer 100 milissegundos.

992
00:49:46,877 --> 00:49:48,210
Naturalmente, completamente arbitrária.

993
00:49:48,210 --> 00:49:50,600
Se você queria para atualizar
muito mais lentamente, o que pôde.

994
00:49:50,600 --> 00:49:53,300
Nós podemos mexer
com o intervalo do jogo,

995
00:49:53,300 --> 00:49:57,240
como é grande o nosso intervalo é depois de chegarmos
um relógio a trabalhar, o que espero que eu vou

996
00:49:57,240 --> 00:49:59,660
chegar.

997
00:49:59,660 --> 00:50:04,110
Portanto, este é apenas dizer, "OK, call
essa função a cada 100 milissegundos. "

998
00:50:04,110 --> 00:50:04,805
OK?

999
00:50:04,805 --> 00:50:07,280
Isso é tudo o que ele faz.

1000
00:50:07,280 --> 00:50:12,290
>> Então, o que nós queremos que a nossa função para
fazer é que nós queremos ter alguma data

1001
00:50:12,290 --> 00:50:14,200
e algum tempo que é
vamos ter.

1002
00:50:14,200 --> 00:50:19,740
Assim, podemos começar com a nossa
data é igual a alguma coisa,

1003
00:50:19,740 --> 00:50:22,708
e nosso tempo é igual a algo
que nós não sabemos ainda.

1004
00:50:22,708 --> 00:50:26,070

1005
00:50:26,070 --> 00:50:29,300
Ou, na verdade, só precisamos de data, porque
data vai incluir tudo.

1006
00:50:29,300 --> 00:50:34,310

1007
00:50:34,310 --> 00:50:40,010
Novamente, se você acabou de Google nada sobre
o que você quer fazer, se você escrever, "OK,

1008
00:50:40,010 --> 00:50:41,980
Eu quero ficar o tempo
via JavaScript, "it

1009
00:50:41,980 --> 00:50:45,890
vai lhe dar este grande
função chamada data get.

1010
00:50:45,890 --> 00:50:48,664
Literalmente, a maioria das coisas
que você quer fazer,

1011
00:50:48,664 --> 00:50:50,830
JavaScript vai ter
-lo feito para você já.

1012
00:50:50,830 --> 00:50:55,770
Portanto, é literalmente como novo
obter data, que é creating--

1013
00:50:55,770 --> 00:50:58,600
ou nova data, rather--
que está a gerar

1014
00:50:58,600 --> 00:51:03,690
algum objeto que representa uma data.

1015
00:51:03,690 --> 00:51:08,200
>> E o que vamos fazer aqui é
isso eu é-- vou escrever isso,

1016
00:51:08,200 --> 00:51:10,820
e, em seguida, explicar o que faz.

1017
00:51:10,820 --> 00:51:12,560
Então, eu vou ter certeza que eu tenho esse direito.

1018
00:51:12,560 --> 00:51:17,950

1019
00:51:17,950 --> 00:51:23,440
>> OK, então o que esta função
faz, é que nós somos apenas

1020
00:51:23,440 --> 00:51:30,680
criar o HTML que é realmente
indo para ir dentro do nosso Id div de relógio.

1021
00:51:30,680 --> 00:51:34,610
Então o que é que isto vai ser feito
é apenas gerar alguma corda, OK?

1022
00:51:34,610 --> 00:51:38,510
Isso é, então, vai ser
transplantadas em nosso HTML.

1023
00:51:38,510 --> 00:51:42,130
Basicamente o que ele vai fazer é
o que quer que nós-- que vou mostrar-lhe

1024
00:51:42,130 --> 00:51:49,070
é que o que dizemos é HTML,
vamos substituir este texto aqui

1025
00:51:49,070 --> 00:51:51,090
com tudo o que é HTML.

1026
00:51:51,090 --> 00:51:56,390
Então, isso vai permitir que
-nos a mudar o nosso relógio de ponto

1027
00:51:56,390 --> 00:52:00,940
HTML de ser apenas o texto deste
deve ser um relógio, para realmente mostrar

1028
00:52:00,940 --> 00:52:05,630
os números e as coisas que nós nos importamos
aproximadamente, e realmente ser horas.

1029
00:52:05,630 --> 00:52:09,810
>> Então, o que nós vamos fazer é que estamos
vai começar a gerar este HTML.

1030
00:52:09,810 --> 00:52:16,520
Assim, da mesma maneira que usamos
para fazer mais é igual para inteiros,

1031
00:52:16,520 --> 00:52:20,461
agora você pode fazer isso por cordas,
exceto que vai concatenar-los.

1032
00:52:20,461 --> 00:52:20,960
Certo?

1033
00:52:20,960 --> 00:52:26,070
Como vimos com ponto de partido js, ​​este apenas
concatena todas estas coisas juntas.

1034
00:52:26,070 --> 00:52:31,970
Assim, você pode concatenar diferentes pedaços de
HTML a partir de variáveis, ou pedaços de cordas

1035
00:52:31,970 --> 00:52:33,750
que você escreve para fora
mesmo, e isso só

1036
00:52:33,750 --> 00:52:38,650
realmente permite que você dinamicamente
gerar HTML, que é muito legal.

1037
00:52:38,650 --> 00:52:42,040
Então, se você tem algo
muito usuário específico,

1038
00:52:42,040 --> 00:52:44,130
isso pode permitir que você faça isso.

1039
00:52:44,130 --> 00:52:47,550
>> Portanto, temos HTML, para que eu vou
tentar garantir que tenho esse direito.

1040
00:52:47,550 --> 00:52:49,890
Então, vamos fazer alguma cabeçalho h1.

1041
00:52:49,890 --> 00:52:53,610
Então, o que é importante perceber aqui
é que este é, na verdade, apenas HTML.

1042
00:52:53,610 --> 00:52:54,460
Certo?

1043
00:52:54,460 --> 00:52:56,610
Estamos escrevendo real
Código HTML aqui, é

1044
00:52:56,610 --> 00:53:01,090
não apenas uma seqüência na posição normal
maneira que gostaríamos de pensar nisso.

1045
00:53:01,090 --> 00:53:02,930
Então nós temos um pouco de HTML.

1046
00:53:02,930 --> 00:53:04,940
Esta é considerada uma seqüência aqui embora.

1047
00:53:04,940 --> 00:53:10,380
E fazemos data dot-- nós
quer chegar em nossas horas.

1048
00:53:10,380 --> 00:53:12,910
Novamente, se você estava a olhar
acima de qualquer coisa sobre a data,

1049
00:53:12,910 --> 00:53:16,160
ele iria dizer-lhe todos estes são
os atributos que tem data.

1050
00:53:16,160 --> 00:53:17,670
E aqui está o que você pode usar nele.

1051
00:53:17,670 --> 00:53:20,620
Por isso, provavelmente, tem coisas como
obter horas, e obter minutos,

1052
00:53:20,620 --> 00:53:24,669
e obter segundos, e obter milissegundos,
e quem sabe o que mais eles têm.

1053
00:53:24,669 --> 00:53:27,210
Mas se você olhar para o
documentação, tudo isso vai estar lá.

1054
00:53:27,210 --> 00:53:31,980
>> Portanto, temos obter horas,
e, em seguida, gostaríamos

1055
00:53:31,980 --> 00:53:35,614
concatenar que com-- eu sou
vai se mudar isso aqui.

1056
00:53:35,614 --> 00:53:38,780
Então, se estamos gerando agora, estamos
realmente gerando o tempo, certo?

1057
00:53:38,780 --> 00:53:43,590
Temos horas, e, em seguida, o que é
entre horas e minutos?

1058
00:53:43,590 --> 00:53:45,080
Você tem um ponto e vírgula, certo?

1059
00:53:45,080 --> 00:53:48,010
Então, nós queremos fazer algum ponto e vírgula aqui.

1060
00:53:48,010 --> 00:53:51,780
E então nós queremos começar nossa
minutos, de modo que da mesma maneira

1061
00:53:51,780 --> 00:53:56,450
que temos data dot obter horas,
como podemos obter os nossos minutos?

1062
00:53:56,450 --> 00:54:01,542
É literalmente data dot obter
minutos, o que eu meio que gosto.

1063
00:54:01,542 --> 00:54:03,250
É como, "oh, quão
faço para que meu minutos? "

1064
00:54:03,250 --> 00:54:05,850
Acabei de chegar em minhas minutos.

1065
00:54:05,850 --> 00:54:07,500
>> OK.

1066
00:54:07,500 --> 00:54:10,990
E depois temos outros dois pontos aqui.

1067
00:54:10,990 --> 00:54:16,350
E então, se queremos obter a nossa
segundo, como podemos obter a segunda?

1068
00:54:16,350 --> 00:54:17,400
Data dot obter segundos.

1069
00:54:17,400 --> 00:54:20,390

1070
00:54:20,390 --> 00:54:21,590
Eu acho que é muito legal.

1071
00:54:21,590 --> 00:54:23,589
E o que é importante
perceber, é que nós também

1072
00:54:23,589 --> 00:54:31,730
precisa fechar nossa tag HTML aqui, porque
ele ainda deve ser HTML válido, portanto h1.

1073
00:54:31,730 --> 00:54:33,481
Com estilo.

1074
00:54:33,481 --> 00:54:43,110
>> Então, depois disso, nós podemos fazer relógio
dot HTML interior é igual ao HTML.

1075
00:54:43,110 --> 00:54:43,930
OK?

1076
00:54:43,930 --> 00:54:46,470
Então lembre-se que eu disse
HTML interior basicamente

1077
00:54:46,470 --> 00:54:50,610
leva tudo o que é entre o
duas marcas que falamos

1078
00:54:50,610 --> 00:54:54,470
e inserções ou manipula
tudo o que está lá dentro?

1079
00:54:54,470 --> 00:54:58,290
Então, o que isso faz, se
Vamos voltar para o nosso relógio,

1080
00:54:58,290 --> 00:55:04,180
é que se refere ao relógio
tudo dentro deste div.

1081
00:55:04,180 --> 00:55:09,770
Este é o código HTML interna
div deste relógio Id.

1082
00:55:09,770 --> 00:55:13,930
E assim que vai mudá-lo para
o HTML que acabou de gerar,

1083
00:55:13,930 --> 00:55:16,750
que, o que, esperamos,
espero, espero,

1084
00:55:16,750 --> 00:55:21,026
mostrará o tempo agora.

1085
00:55:21,026 --> 00:55:23,960
Vamos ver.

1086
00:55:23,960 --> 00:55:25,170
Claro.

1087
00:55:25,170 --> 00:55:26,860
Tantas questões técnicas.

1088
00:55:26,860 --> 00:55:31,480
Apenas-- de Allison que eu sou
fora de meu jogo hoje caras.

1089
00:55:31,480 --> 00:55:34,136
OK, isso funciona.

1090
00:55:34,136 --> 00:55:35,760
relógio de ponto HTML interior.

1091
00:55:35,760 --> 00:55:42,097
Foi HTML Really?

1092
00:55:42,097 --> 00:55:43,180
Além disso, este é o que acontece.

1093
00:55:43,180 --> 00:55:48,750
Quando você não consegue ver alguma coisa, você
basta olhar para o seu código-fonte.

1094
00:55:48,750 --> 00:55:49,250
OK.

1095
00:55:49,250 --> 00:55:51,912

1096
00:55:51,912 --> 00:55:54,870
Você quer conhecer um trabalho legal em torno
que nós vamos fazer aqui?

1097
00:55:54,870 --> 00:55:55,740
>> AUDIÊNCIA: Você pode fazer letras maiúsculas?

1098
00:55:55,740 --> 00:55:56,580
As letras maiúsculas?

1099
00:55:56,580 --> 00:55:58,996
Porque você tem obter horas,
e em seguida, obter minutos.

1100
00:55:58,996 --> 00:56:02,590
>> ALLISON Buchholtz-AU: It
é obter horas e get-- oh.

1101
00:56:02,590 --> 00:56:04,945
Você é-- estrela de ouro.

1102
00:56:04,945 --> 00:56:08,114

1103
00:56:08,114 --> 00:56:09,030
É tudo um teste, pessoal.

1104
00:56:09,030 --> 00:56:13,630

1105
00:56:13,630 --> 00:56:17,330
Eu prometo que estava trabalhando antes da aula.

1106
00:56:17,330 --> 00:56:22,590
>> OK, mas algo legal saber é
que você pode Também-- se, por vezes,

1107
00:56:22,590 --> 00:56:26,560
seus arquivos externos são
ficando um pouco louco,

1108
00:56:26,560 --> 00:56:30,960
você também pode simplesmente colocá-los em linha reta
aqui, o que tende a consertar as coisas.

1109
00:56:30,960 --> 00:56:35,840
Exceto isto é como realmente feio.

1110
00:56:35,840 --> 00:56:38,050
Claro formatar tudo.

1111
00:56:38,050 --> 00:56:41,425
Certifique-se de que está tudo bem.

1112
00:56:41,425 --> 00:56:41,925
OK.

1113
00:56:41,925 --> 00:56:47,200

1114
00:56:47,200 --> 00:56:50,621
>> Eu queria fazer todas as demos legal,
e eles simplesmente não está trabalhando fora.

1115
00:56:50,621 --> 00:56:51,555
OK.

1116
00:56:51,555 --> 00:56:53,890
Script var relógio.

1117
00:56:53,890 --> 00:57:00,350
De qualquer forma, o que é importante é
que esta é a forma geral

1118
00:57:00,350 --> 00:57:01,870
que você formatar JavaScript.

1119
00:57:01,870 --> 00:57:04,490
Como você pode ver, pode ser
muito mimado, por vezes,

1120
00:57:04,490 --> 00:57:08,780
mesmo quando era literalmente
trabalhando em dois segundos atrás.

1121
00:57:08,780 --> 00:57:11,820
Ou não dois segundos atrás,
mas muito, muito recentemente.

1122
00:57:11,820 --> 00:57:16,070
>> Então, para mostrar o que ele deve ser parecido,
e para mostrar que eu não sou louco,

1123
00:57:16,070 --> 00:57:19,730
e que tudo é exatamente o
mesmo, é isso que ele deve ser parecido.

1124
00:57:19,730 --> 00:57:27,410
Você está indo só para fazer esta parte superior
aqui, e se você ver o código fonte da página,

1125
00:57:27,410 --> 00:57:32,160
se você observar, ele fez alguns
as coisas mais loucas, eu simplifiquei-lo.

1126
00:57:32,160 --> 00:57:35,710
Além disso, o crédito para Tommy
McWilliam, que, na verdade,

1127
00:57:35,710 --> 00:57:38,810
me ajudou a criar estes exemplos,
que é por isso que eu sei que eles trabalham.

1128
00:57:38,810 --> 00:57:41,560
Porque Tommy é um mestre JavaScript.

1129
00:57:41,560 --> 00:57:43,180
Mas se observarmos, nós temos algum set.

1130
00:57:43,180 --> 00:57:45,170
Nós temos a nossa função de relógio aqui.

1131
00:57:45,170 --> 00:57:48,450
Isso é tudo o que JavaScript
que acabou de escrever, ou parte dela.

1132
00:57:48,450 --> 00:57:51,470
Nós apenas escreveu este aqui.

1133
00:57:51,470 --> 00:57:54,260
E ele tem um extra
função que apenas almofadas-lo

1134
00:57:54,260 --> 00:57:57,790
colocando um zero antes de uma
carta ou antes de um número, se é

1135
00:57:57,790 --> 00:57:59,412
apenas um deles.

1136
00:57:59,412 --> 00:58:02,120
Então, se você observar, isso é muito
muito exatamente o que acabei de escrever.

1137
00:58:02,120 --> 00:58:06,230
Você tem algum relógio variável que
tem o nosso elemento, obter elemento por ID,

1138
00:58:06,230 --> 00:58:07,252
que é relógio.

1139
00:58:07,252 --> 00:58:08,960
Temos o nosso intervalo do jogo
função, que é

1140
00:58:08,960 --> 00:58:12,670
uma função anônima
que executa tudo isto.

1141
00:58:12,670 --> 00:58:16,940
Temos alguns começando seqüência de
HTML que, em seguida, de forma dinâmica

1142
00:58:16,940 --> 00:58:20,750
gerar por ter algum
cabeçalho h1, concatenando

1143
00:58:20,750 --> 00:58:23,950
com obter as horas, mais
nosso cólon, além de ficar

1144
00:58:23,950 --> 00:58:26,860
os minutos, além de outros
cólon, além dos nossos segundos,

1145
00:58:26,860 --> 00:58:29,330
e, finalmente, o HTML final para ele.

1146
00:58:29,330 --> 00:58:34,210
E então nós atualizamos nosso relógio
dot HTML interior para HTML,

1147
00:58:34,210 --> 00:58:37,640
e atualiza a cada 100 milissegundos.

1148
00:58:37,640 --> 00:58:39,060
OK?

1149
00:58:39,060 --> 00:58:42,470
>> Veja, eu prometo que eu não sou louco.

1150
00:58:42,470 --> 00:58:43,440
Eu não sei.

1151
00:58:43,440 --> 00:58:47,160
Eu não sei por que ele não gosta de mim.

1152
00:58:47,160 --> 00:58:54,030
Eu sinto que tem a mesma aparência,
mas aparentemente ele me odeia.

1153
00:58:54,030 --> 00:58:59,600
>> Então, vamos ver se no terceiro round vai melhor.

1154
00:58:59,600 --> 00:59:00,970
Estamos prestes a ver.

1155
00:59:00,970 --> 00:59:02,910
Eu não sei como é que isto vai passar.

1156
00:59:02,910 --> 00:59:06,700
Está todo mundo, pelo menos, recebendo o
contras, como apenas o tema geral

1157
00:59:06,700 --> 00:59:08,480
de JavaScript, embora?

1158
00:59:08,480 --> 00:59:15,660
Espero que seja pelo menos útil, mais
de mostrar que é um pouco mimado.

1159
00:59:15,660 --> 00:59:21,190
Mas o conjunto de problemas será muito divertido.

1160
00:59:21,190 --> 00:59:22,590
Vai ser ótimo.

1161
00:59:22,590 --> 00:59:24,820
Não vai ser tão tedioso
como este, eu não acho.

1162
00:59:24,820 --> 00:59:28,100
Você vai realmente chegar a
ver as coisas muito legais.

1163
00:59:28,100 --> 00:59:31,734
>> Então, por último, mas não menos importante,
vamos tentar o Twitter um.

1164
00:59:31,734 --> 00:59:32,900
Estou realmente com medo agora, rapazes.

1165
00:59:32,900 --> 00:59:35,762
Eu não sei como isso vai passar.

1166
00:59:35,762 --> 00:59:39,930
Mas só para lhe dar um pouco
mais gosto, e esta é realmente

1167
00:59:39,930 --> 00:59:44,190
cordas e manipulando
insumos, o que nós vamos fazer

1168
00:59:44,190 --> 00:59:50,960
é, se observarmos aqui com HTML--
este tem um pouco more--

1169
00:59:50,960 --> 00:59:57,200
temos alguma área de texto, o que
corresponde a esta área de texto aqui.

1170
00:59:57,200 --> 00:59:58,030
OK?

1171
00:59:58,030 --> 01:00:00,420
E isso tem um ID de texto.

1172
01:00:00,420 --> 01:00:04,520
Nós reestilizado-lo um pouco
com alguma largura e altura

1173
01:00:04,520 --> 01:00:07,310
que temos pré-determinado,
e temos H1,

1174
01:00:07,310 --> 01:00:11,260
o que só é nosso único cabeçalho que
representa nossos personagens esquerda.

1175
01:00:11,260 --> 01:00:14,570
Demos alguns Id de
caracteres restante,

1176
01:00:14,570 --> 01:00:18,660
e então nós temos algum script
aqui, que eu sou realmente

1177
01:00:18,660 --> 01:00:20,790
esperando terceira vez do
o charme aqui, pessoal.

1178
01:00:20,790 --> 01:00:26,750
>> Então, o que nós queremos fazer,
Na mesma linha geral

1179
01:00:26,750 --> 01:00:31,480
que fizemos com js relógio de ponto
e dot partido js como temos notado,

1180
01:00:31,480 --> 01:00:35,980
é que começamos por realmente agarrando
as coisas que nos interessam, certo?

1181
01:00:35,980 --> 01:00:42,330
Portanto, neste caso, existem dois
coisas que nos preocupamos com, OK?

1182
01:00:42,330 --> 01:00:47,199
Uma coisa que nós estamos, na verdade, uma espécie de
olhando para dentro e desenho de dados de,

1183
01:00:47,199 --> 01:00:48,990
e uma coisa que
estamos realmente mudando.

1184
01:00:48,990 --> 01:00:52,110

1185
01:00:52,110 --> 01:00:53,730
Portanto, não é o nosso HTML.

1186
01:00:53,730 --> 01:01:00,370
Se esta é a nossa página web aqui, o que é
os dados que nós estamos olhando?

1187
01:01:00,370 --> 01:01:03,860
Vai ser o que quer
o texto em nossas caixas, certo?

1188
01:01:03,860 --> 01:01:05,310
Então, qualquer coisa que eu escreva aqui.

1189
01:01:05,310 --> 01:01:08,150
Isso é o que eu quero saber, ou
isso é o que eu quero olhar.

1190
01:01:08,150 --> 01:01:10,690
E o que vai ser
mudança na nossa página web?

1191
01:01:10,690 --> 01:01:13,550

1192
01:01:13,550 --> 01:01:14,880
Os caracteres restantes.

1193
01:01:14,880 --> 01:01:19,550
Assim, da mesma forma, queremos
começar por inicializar variáveis

1194
01:01:19,550 --> 01:01:22,030
que realmente prender esses elementos.

1195
01:01:22,030 --> 01:01:22,890
OK?

1196
01:01:22,890 --> 01:01:29,930
Então, se temos algum var
essa é a nossa área de texto,

1197
01:01:29,930 --> 01:01:33,681
e nós temos alguns var que é remanescente.

1198
01:01:33,681 --> 01:01:34,180
Certo?

1199
01:01:34,180 --> 01:01:36,190
Então, estes vão
manter essas duas coisas.

1200
01:01:36,190 --> 01:01:42,370
Assim, o mesmo tipo de coisa,
documento dot-- OK, eu sou

1201
01:01:42,370 --> 01:01:45,920
indo para garantir que este é
vai funcionar dessa vez.

1202
01:01:45,920 --> 01:01:49,620
Estou muito inflexível.

1203
01:01:49,620 --> 01:01:53,310
OK, por isso, se queremos que o nosso
área de texto, de acordo

1204
01:01:53,310 --> 01:01:55,710
ao nosso HTML, qual é o nosso identificador?

1205
01:01:55,710 --> 01:01:56,420
Qual é a nossa identidade?

1206
01:01:56,420 --> 01:01:59,500

1207
01:01:59,500 --> 01:02:05,540
É só passar a ser de texto, porque
isso cria a nossa área de texto, OK,

1208
01:02:05,540 --> 01:02:10,320
e nossa Id é o texto, de modo que é
como podemos pegar o que está lá.

1209
01:02:10,320 --> 01:02:12,130
OK, ponto e vírgula.

1210
01:02:12,130 --> 01:02:13,940
Vou ser super
preciso sobre o assunto,

1211
01:02:13,940 --> 01:02:16,300
porque eu quero que isso funcione desta vez.

1212
01:02:16,300 --> 01:02:22,120
OK, fazer a mesma coisa,
obter elemento por Id.

1213
01:02:22,120 --> 01:02:25,970
Eu realmente estou querendo saber o que tem
causado os outros dois para atrapalhar.

1214
01:02:25,970 --> 01:02:29,750
OK, então, em um presente,
o que queremos para acessar?

1215
01:02:29,750 --> 01:02:30,760
Qual é o nosso Id aqui?

1216
01:02:30,760 --> 01:02:33,980

1217
01:02:33,980 --> 01:02:36,261
Temos outro Id em
nosso HTML, o que é?

1218
01:02:36,261 --> 01:02:37,552
AUDIÊNCIA: caracteres restantes.

1219
01:02:37,552 --> 01:02:39,343
ALLISON Buchholtz-AU:
Personagens restante.

1220
01:02:39,343 --> 01:02:43,360

1221
01:02:43,360 --> 01:02:44,330
>> OK.

1222
01:02:44,330 --> 01:02:46,010
Com estilo.

1223
01:02:46,010 --> 01:02:49,800
Então, eu estou indo só para
escrever esta muito rápido.

1224
01:02:49,800 --> 01:02:53,706

1225
01:02:53,706 --> 01:02:55,330
Eu só vou escrever isso em segundo.

1226
01:02:55,330 --> 01:02:56,190
Assim, a área de texto.

1227
01:02:56,190 --> 01:02:59,550

1228
01:02:59,550 --> 01:03:06,180
O que é interessante é B function-- lá
muitas funções que não só

1229
01:03:06,180 --> 01:03:09,690
correspondem à sua
mouse, mas seu teclado.

1230
01:03:09,690 --> 01:03:10,190
OK?

1231
01:03:10,190 --> 01:03:16,540
Então você pode dizer quando qualquer tecla é
pressionado, você pode fazer coisas desse tipo.

1232
01:03:16,540 --> 01:03:20,450
Então, o que nós estamos usando
é chamado a tecla para cima, o que

1233
01:03:20,450 --> 01:03:25,320
diz, "se você pressionado qualquer tecla
seu teclado, quando o usuário tem levantado

1234
01:03:25,320 --> 01:03:28,064
seu dedo no botão,
e a chave tornou-se unpressed,

1235
01:03:28,064 --> 01:03:29,480
então vamos fazer alguma coisa. "

1236
01:03:29,480 --> 01:03:29,980
OK?

1237
01:03:29,980 --> 01:03:31,370
Então, isso faz sentido, certo?

1238
01:03:31,370 --> 01:03:33,540
Porque cada personagem
digitamos, vamos

1239
01:03:33,540 --> 01:03:36,550
ter que levantar nossos dedos off
da mesma, por isso, quando a chave sobe,

1240
01:03:36,550 --> 01:03:40,980
podemos saber para diminuir
nossos personagens restantes.

1241
01:03:40,980 --> 01:03:44,440
>> Portanto, temos alguns em chave
para cima, e da mesma forma,

1242
01:03:44,440 --> 01:03:47,480
vamos dizer,
"OK, quando fazemos isso, nós

1243
01:03:47,480 --> 01:03:55,110
vamos criar alguma função que
vai levar e ", no presente caso,

1244
01:03:55,110 --> 01:03:58,800
eo que nós queremos fazer é
calcular o número restante.

1245
01:03:58,800 --> 01:04:02,510
OK, então vamos começar
criando uma variável.

1246
01:04:02,510 --> 01:04:05,830
Portanto, temos alguma variável r,
que vai representar

1247
01:04:05,830 --> 01:04:07,720
quantos caracteres que nos resta.

1248
01:04:07,720 --> 01:04:08,890
OK?

1249
01:04:08,890 --> 01:04:14,540
Sabemos que vamos começar com
140, e se nós queremos saber,

1250
01:04:14,540 --> 01:04:18,360
vamos dizer, o comprimento deste
cadeia que tem sido de entrada,

1251
01:04:18,360 --> 01:04:20,860
Vocês têm alguma idéia
como podemos fazer isso?

1252
01:04:20,860 --> 01:04:23,900
Apenas com base fora do óbvio
coisas, como se quiséssemos horas,

1253
01:04:23,900 --> 01:04:25,870
costumávamos ficar horas.

1254
01:04:25,870 --> 01:04:28,860
Sabemos que o nosso objetivo é
área de texto, mas você poderia caras

1255
01:04:28,860 --> 01:04:33,050
pensar no que poderia vir depois dela?

1256
01:04:33,050 --> 01:04:35,280
Qualquer idéias?

1257
01:04:35,280 --> 01:04:41,730
>> Assim, tipo de um presente de menos
intuitivo, mas é valor de comprimento do ponto.

1258
01:04:41,730 --> 01:04:44,700
Então, só me dar alguma
atributo de valor

1259
01:04:44,700 --> 01:04:46,500
é, na verdade, o comprimento dessa seqüência.

1260
01:04:46,500 --> 01:04:50,340
Então, ele vai dizer: "OK, eu estou procurando
nesta seqüência inteira dentro da área de texto,

1261
01:04:50,340 --> 01:04:52,730
e eu vou dizer-
quanto tempo ele é ".

1262
01:04:52,730 --> 01:04:55,500
Porque se nos lembramos cordas
são realmente apenas matrizes,

1263
01:04:55,500 --> 01:04:58,110
por isso, pode simplesmente pegar o comprimento deles.

1264
01:04:58,110 --> 01:05:01,860
Portanto, temos que.

1265
01:05:01,860 --> 01:05:04,058
Com estilo.

1266
01:05:04,058 --> 01:05:09,360
>> Então, o que nós queremos fazer é nós
Nunca mais quero permitir que o usuário

1267
01:05:09,360 --> 01:05:12,340
a entrada de mais do que
140 caracteres, certo?

1268
01:05:12,340 --> 01:05:15,610
Porque se nós dizer como, "oh, você
só tem esse tanto restante, "

1269
01:05:15,610 --> 01:05:20,522
e, em seguida, deixá-los fazer isso
De qualquer forma, temos vindo a mentir.

1270
01:05:20,522 --> 01:05:22,230
E este é outro
coisa que JavaScript

1271
01:05:22,230 --> 01:05:24,530
pode ser realmente bom
para, é a validação do usuário

1272
01:05:24,530 --> 01:05:29,062
e certificando-se de que o seu
usuário se encaixa dentro de todas as regras

1273
01:05:29,062 --> 01:05:30,270
que você tenha fornecido a eles.

1274
01:05:30,270 --> 01:05:36,020
Então, se você quer fazer as coisas, como fazer
Certifique-se de entrada de alguém seu endereço de e-mail,

1275
01:05:36,020 --> 01:05:40,242
ou certificando-se de que, quando eles
digitar duas senhas, eles combinam.

1276
01:05:40,242 --> 01:05:41,200
JavaScript pode fazer isso.

1277
01:05:41,200 --> 01:05:44,010
Você faria algo assim ", quando
o formulário é enviado ", ou como,

1278
01:05:44,010 --> 01:05:48,170
"Quando botão Enviar Formulário é
clicado, verificar todas essas coisas ".

1279
01:05:48,170 --> 01:05:49,670
E nós podemos fazer isso JavaScript.

1280
01:05:49,670 --> 01:05:52,680
Então, isso é exatamente o que
nós vamos fazer aqui.

1281
01:05:52,680 --> 01:05:57,810
>> Então, o que poderia ser uma maneira de verificar se
eles foram mais de 140 personagens?

1282
01:05:57,810 --> 01:06:03,310
O que vai acontecer com
nosso valor de r se tentar?

1283
01:06:03,310 --> 01:06:04,760
Vai ser negativo, certo?

1284
01:06:04,760 --> 01:06:07,380
Ou ele vai ser menos
que ou igual a zero.

1285
01:06:07,380 --> 01:06:13,690
Assim, podemos usar um se isso for
Assim como tudo mais.

1286
01:06:13,690 --> 01:06:14,270
OK?

1287
01:06:14,270 --> 01:06:20,480
E nós temos alguma área texto dot
valor, e o que estamos fazendo aqui

1288
01:06:20,480 --> 01:06:29,940
é que estamos apenas cutting-- o que é?

1289
01:06:29,940 --> 01:06:30,900
Desculpe.

1290
01:06:30,900 --> 01:06:32,732
Este, nós só queremos retornar falso.

1291
01:06:32,732 --> 01:06:34,030
Fiquei confuso.

1292
01:06:34,030 --> 01:06:36,560
Todos os frangalhos de coisas não está funcionando.

1293
01:06:36,560 --> 01:06:40,010
OK, nós só queremos
return false, e então nós

1294
01:06:40,010 --> 01:06:44,160
deseja exibir o
restantes personagens, certo?

1295
01:06:44,160 --> 01:06:48,720
Assim, com o relógio, fizemos
algo com HTML interior, certo?

1296
01:06:48,720 --> 01:06:52,070
Onde nós configurá-lo igual a algum
variável, então o que podemos fazer aqui?

1297
01:06:52,070 --> 01:06:54,590

1298
01:06:54,590 --> 01:06:57,750
O que estamos mudando o HTML interior de?

1299
01:06:57,750 --> 01:07:02,843

1300
01:07:02,843 --> 01:07:03,780
>> AUDIÊNCIA: Remanescente?

1301
01:07:03,780 --> 01:07:05,738
>> ALLISON Buchholtz-AU:
Estamos mudando restante.

1302
01:07:05,738 --> 01:07:09,217

1303
01:07:09,217 --> 01:07:11,300
Tudo bem, eo que nós
quero configurá-lo igual?

1304
01:07:11,300 --> 01:07:14,440

1305
01:07:14,440 --> 01:07:18,437
Vai ser r, porque isso
devem ser os nossos personagens restantes.

1306
01:07:18,437 --> 01:07:19,600
OK?

1307
01:07:19,600 --> 01:07:26,060
Então, eu estou muito nervoso para ver se
isso funciona agora, mas vamos ver.

1308
01:07:26,060 --> 01:07:28,960

1309
01:07:28,960 --> 01:07:29,460
Deixar isso.

1310
01:07:29,460 --> 01:07:34,690

1311
01:07:34,690 --> 01:07:37,700
Isso é muito rápido.

1312
01:07:37,700 --> 01:07:38,970
[Inaudível] OK.

1313
01:07:38,970 --> 01:07:44,574

1314
01:07:44,574 --> 01:07:45,990
Mais uma vez, eu estou indo só para te mostrar.

1315
01:07:45,990 --> 01:07:49,430
Por alguma razão,
mina não decide trabalhar,

1316
01:07:49,430 --> 01:07:53,354
mas o que eu vou lhe mostrar é que este
é-- oh eu deveria colocar isso em.

1317
01:07:53,354 --> 01:07:57,470
OK, nós observamos o mesmo tipo de
coisa aqui, ficando a área de texto.

1318
01:07:57,470 --> 01:08:01,070
>> Além disso, se você aviso cara, se há
sempre algo que você quer fazer,

1319
01:08:01,070 --> 01:08:04,080
e você não sabe como fazer
la, basta clicar em Exibir código fonte da página,

1320
01:08:04,080 --> 01:08:06,632
e eles vão te dizer.

1321
01:08:06,632 --> 01:08:07,840
Às vezes ele vai ser criptografados.

1322
01:08:07,840 --> 01:08:11,147
Para sua pset, nós criptografar tudo,
por isso, apenas se parece com rabiscos.

1323
01:08:11,147 --> 01:08:13,480
Mas se há sempre um realmente
site legal que você gosta,

1324
01:08:13,480 --> 01:08:17,729
se você apenas clique em Exibir código fonte da página,
ele vai dizer-lhe como fazê-lo.

1325
01:08:17,729 --> 01:08:20,770
Então, novamente, trabalhar mais esperto, não mais.

1326
01:08:20,770 --> 01:08:24,250
E como você vê aqui, todos
essas coisas são as mesmas.

1327
01:08:24,250 --> 01:08:31,930
este aqui só tem algum substring
que, não me lembro exatamente o que este faz.

1328
01:08:31,930 --> 01:08:36,980
Mas, obviamente, leva algum substring
do valor de zero a dez,

1329
01:08:36,980 --> 01:08:41,540
e retorna false o que deve parar
o usuário de inserir mais,

1330
01:08:41,540 --> 01:08:46,040
e então, obviamente, atualiza
o código HTML interna lá.

1331
01:08:46,040 --> 01:08:47,410
>> Com estilo.

1332
01:08:47,410 --> 01:08:53,000
Então grandes recortes a partir de hoje,
experiência, olhar para o código-fonte

1333
01:08:53,000 --> 01:08:58,359
porque ele vai ajudá-lo muito,
e todo mundo, às vezes JavaScript

1334
01:08:58,359 --> 01:09:03,200
Pode ser difícil de trabalhar e não faz
sempre funciona da maneira que você espera que ele,

1335
01:09:03,200 --> 01:09:05,700
mas apenas tentando manter
porque eu prometo que vou.

1336
01:09:05,700 --> 01:09:08,376
Eu prometo a todos esses exemplos
estavam trabalhando antes da aula.

1337
01:09:08,376 --> 01:09:09,750
Eu não entendo o que aconteceu.

1338
01:09:09,750 --> 01:09:13,069
Eu literalmente tenho tudo a mesma coisa.

1339
01:09:13,069 --> 01:09:17,660
>> Só mais uma coisa que eu só quero
mostrar para vocês que podem ser super útil

1340
01:09:17,660 --> 01:09:21,630
é em-- o que estava funcionando antes?

1341
01:09:21,630 --> 01:09:23,935
Temos partido para o trabalho, não é?

1342
01:09:23,935 --> 01:09:26,569
Acho que sim.

1343
01:09:26,569 --> 01:09:27,069
Sim.

1344
01:09:27,069 --> 01:09:27,630
Nós fizemos.

1345
01:09:27,630 --> 01:09:28,250
Impressionante.

1346
01:09:28,250 --> 01:09:31,189
OK, então uma coisa que
vocês deveriam saber

1347
01:09:31,189 --> 01:09:33,340
é o log do console que eu falei.

1348
01:09:33,340 --> 01:09:37,040
Então consolar log ponto de Olá.

1349
01:09:37,040 --> 01:09:40,430
Portanto, este é o tipo de
Equivalente JavaScript de printf.

1350
01:09:40,430 --> 01:09:42,810
Então, se você quiser
inspecionar suas variáveis

1351
01:09:42,810 --> 01:09:49,649
ou ver o que está acontecendo lá, o que
você pode fazer é, se nós inspecionar elemento,

1352
01:09:49,649 --> 01:09:51,899
é o que você quer ir
a, e você vai para consolar,

1353
01:09:51,899 --> 01:09:53,770
você vai ver que ele impresso Olá.

1354
01:09:53,770 --> 01:09:55,750
>> Assim, poderíamos tê-lo
imprimir tudo o que queríamos.

1355
01:09:55,750 --> 01:10:04,170
Se quiséssemos-la para imprimir fundo
fundo do ponto estilo de ponto,

1356
01:10:04,170 --> 01:10:08,454
devemos ser capazes de ver o
RGB triplo que vem à tona.

1357
01:10:08,454 --> 01:10:11,140
Ou não.

1358
01:10:11,140 --> 01:10:13,520
Eu esqueço exatamente como você
imprimir uma variável assim,

1359
01:10:13,520 --> 01:10:17,249
mas você deve ser capaz de
imprimir coisas assim.

1360
01:10:17,249 --> 01:10:19,040
Isso será muito útil
para o seu pset quando

1361
01:10:19,040 --> 01:10:23,330
você está tentando manipular
Coordenadas ou outros enfeites.

1362
01:10:23,330 --> 01:10:25,270
Então, eles também mudam esta peça em sala de aula.

1363
01:10:25,270 --> 01:10:30,750
Isto é diferente dos últimos anos, assim
apenas ser simpático com seus TFs, ou os TFs

1364
01:10:30,750 --> 01:10:36,350
em horário de expediente ao contrário, porque somos
tipo de aprendizagem junto com vocês.

1365
01:10:36,350 --> 01:10:41,230
Mas o log do console foi super, super
útil para JavaScript no ano passado.

1366
01:10:41,230 --> 01:10:42,740
Assim, o amor dela.

1367
01:10:42,740 --> 01:10:43,780
Saiba como usá-lo.

1368
01:10:43,780 --> 01:10:49,026
É mais fácil de usar do que GDB, de modo que
deve ser, pelo menos, um ponto positivo.

1369
01:10:49,026 --> 01:10:50,650
Mas graças a vocês estão tendo comigo.

1370
01:10:50,650 --> 01:10:53,400
Lamento que o meu
exemplos para alguma razão

1371
01:10:53,400 --> 01:10:55,410
apenas não queria
cooperar comigo, mas eu

1372
01:10:55,410 --> 01:11:01,010
espero que ele ajudou tipo de obter-lhe um
pouco mais na zona de JavaScript.

1373
01:11:01,010 --> 01:11:04,980
E envie-me todas as suas perguntas para
na próxima semana, para que eu possa ser super reparado,

1374
01:11:04,980 --> 01:11:09,420
e eu vou trazer doces e até mesmo extras
doces, porque isso era ridículo.

1375
01:11:09,420 --> 01:11:14,000
Mas vocês são ótimos,
e ter uma semana incrível.

1376
01:11:14,000 --> 01:11:15,584