1
00:00:00,000 --> 00:00:03,840
>> [Música tocando]

2
00:00:03,840 --> 00:00:05,770

3
00:00:05,770 --> 00:00:08,690
>> DOUG LLOYD: Então, por agora estamos velhos
profissionais em programação web, certo?

4
00:00:08,690 --> 00:00:12,140
E nós cobrimos vários
línguas em vídeos individuais.

5
00:00:12,140 --> 00:00:14,690
E agora vamos fazer mais um, JavaScript.

6
00:00:14,690 --> 00:00:17,370
>> Primeiro a boa notícia, JavaScript
é uma programação moderna

7
00:00:17,370 --> 00:00:21,410
linguagem muito parecida com PHP cujas
sintaxe é derivado a partir de C,

8
00:00:21,410 --> 00:00:22,830
de modo que é um bom lugar para começar.

9
00:00:22,830 --> 00:00:25,880
É sobre tão antiga como PHP, bem como,
tendo sido em torno de cerca de 20 anos.

10
00:00:25,880 --> 00:00:28,600
Foi inventado em torno de
ao mesmo tempo como o PHP.

11
00:00:28,600 --> 00:00:32,240
E JavaScript é realmente muito
fundamental para a experiência do usuário

12
00:00:32,240 --> 00:00:32,740
da web.

13
00:00:32,740 --> 00:00:34,448
Na verdade, existem
três línguas que eu

14
00:00:34,448 --> 00:00:38,480
diria que tipo de compõem o
experiência do usuário de interagir

15
00:00:38,480 --> 00:00:42,650
com o site, html,
CSS e JavaScript.

16
00:00:42,650 --> 00:00:46,030
E agora vamos falar um
pouco sobre JavaScript.

17
00:00:46,030 --> 00:00:50,301
>> A má notícia, porém, com JavaScript
que define uma série de regras para si mesmo,

18
00:00:50,301 --> 00:00:51,300
e depois se rompe-los.

19
00:00:51,300 --> 00:00:54,010
E JavaScript pode realmente ser
tipo de desafio para aprender,

20
00:00:54,010 --> 00:00:57,000
porque é diferente de C e
PHP, que são muito bem estruturada

21
00:00:57,000 --> 00:01:00,270
e ter regras muito rígida
de como as coisas podem funcionar.

22
00:01:00,270 --> 00:01:03,690
JavaScript tem tipo
de concluir tão flexível

23
00:01:03,690 --> 00:01:06,650
que talvez as coisas não estão indo para
trabalhar a maneira que nós esperamos que eles,

24
00:01:06,650 --> 00:01:09,830
e talvez nós realmente não podemos aprender
nossa primeira linguagem de programação

25
00:01:09,830 --> 00:01:10,769
como JavaScript.

26
00:01:10,769 --> 00:01:12,810
Então, talvez porque não
fixou quaisquer regras,

27
00:01:12,810 --> 00:01:15,754
e ele realmente não
reforçar os bons hábitos de codificação.

28
00:01:15,754 --> 00:01:18,170
Mas agora nós esperamos que desenvolveram
alguns bons hábitos de codificação,

29
00:01:18,170 --> 00:01:21,470
e para que possamos começar a incursão
em JavaScript um pouco.

30
00:01:21,470 --> 00:01:25,750
>> Para escrever JavaScript, semelhante à abertura
um arquivo C com uma extensão dot C

31
00:01:25,750 --> 00:01:29,770
ou um arquivo PHP com uma extensão dot PHP,
tudo o que precisamos fazer é abrir um arquivo

32
00:01:29,770 --> 00:01:31,764
com extensão de arquivo do ponto js.

33
00:01:31,764 --> 00:01:34,430
Nós não precisamos ter qualquer especial
delimitadores como fizemos em PHP.

34
00:01:34,430 --> 00:01:36,750
Esse tipo de ângulo
suporte de ponto de interrogação PHP

35
00:01:36,750 --> 00:01:40,300
que estamos acostumados a isso, o caminho
dizemos ao nosso navegador que o que temos é

36
00:01:40,300 --> 00:01:43,502
JavaScript é através da inclusão
-lo em uma tag HTML,

37
00:01:43,502 --> 00:01:46,210
e vamos ver um pouco sobre
como fazer isso em apenas um momento.

38
00:01:46,210 --> 00:01:48,210
>> A outra coisa que faz
JavaScript diferente,

39
00:01:48,210 --> 00:01:50,580
porém, é que ele é executado do lado do cliente.

40
00:01:50,580 --> 00:01:53,430
Então, recordamos com PHP que
nós nunca poderia realmente ver

41
00:01:53,430 --> 00:01:57,041
o PHP que sublinhou um site.

42
00:01:57,041 --> 00:01:59,040
Se alguma vez viram o
fonte da página, só faria

43
00:01:59,040 --> 00:02:02,830
ver o html que era
gerado pelo que o PHP.

44
00:02:02,830 --> 00:02:04,900
Mas JavaScript é executado do lado do cliente.

45
00:02:04,900 --> 00:02:06,710
Seu JavaScript é executado em seu computador.

46
00:02:06,710 --> 00:02:09,050
E é por isso que você pode fazer
coisas como adicionar bloqueadores.

47
00:02:09,050 --> 00:02:09,550
Certo?

48
00:02:09,550 --> 00:02:12,704
Bloqueio de anúncios geralmente é feito por
matando todos a JavaScript

49
00:02:12,704 --> 00:02:14,370
que está sendo executado em um determinado site.

50
00:02:14,370 --> 00:02:19,000
E uma vez que teria de
executado no seu lado do cliente máquina,

51
00:02:19,000 --> 00:02:21,910
você pode simplesmente parar a
JavaScript para executar inteiramente.

52
00:02:21,910 --> 00:02:27,030
Isso também significa que quando você usa
um site que inclui JavaScript,

53
00:02:27,030 --> 00:02:32,450
você tem que enviar a fonte de JavaScript
código como parte de sua resposta http

54
00:02:32,450 --> 00:02:34,159
para o cliente quando eles solicitarem.

55
00:02:34,159 --> 00:02:35,950
E para que você não pode
quero usar JavaScript

56
00:02:35,950 --> 00:02:38,395
para fazer coisas realmente sensíveis
como passar informações

57
00:02:38,395 --> 00:02:41,020
sobre as senhas dos usuários trás e
para trás, porque eles são, na verdade,

58
00:02:41,020 --> 00:02:45,610
vai receber todo o código fonte,
não apenas o html que é gerado,

59
00:02:45,610 --> 00:02:49,030
tal como seria o caso, por exemplo com o PHP.

60
00:02:49,030 --> 00:02:51,620
>> Então, como vamos incluir JavaScript
em nosso html para começar?

61
00:02:51,620 --> 00:02:54,520
Bem, semelhante ao CSS, na verdade,
é uma espécie de como o fazemos aqui.

62
00:02:54,520 --> 00:02:56,190
Com CSS temos tags de estilo.

63
00:02:56,190 --> 00:03:00,760
E dentro dessas tags de estilo,
podemos definir uma folha de estilo CSS.

64
00:03:00,760 --> 00:03:03,450
Da mesma forma com JavaScript
podemos abrir tags de script,

65
00:03:03,450 --> 00:03:06,660
outra tag html que não fez
falar em nosso vídeo html,

66
00:03:06,660 --> 00:03:09,720
e escrever em JavaScript
entre essas tags de script.

67
00:03:09,720 --> 00:03:13,960
Além disso, porém, como CSS, nós
poderia ligar no exterior arquivos CSS

68
00:03:13,960 --> 00:03:15,900
e trazê-los para o nosso programa dessa maneira.

69
00:03:15,900 --> 00:03:18,280
Com CSS nós também podemos,
desculpe-me, com JavaScript

70
00:03:18,280 --> 00:03:23,240
nós também pode especificar a origem
atributo da tag script

71
00:03:23,240 --> 00:03:25,720
para conectar em JavaScript
separadamente, para que você não

72
00:03:25,720 --> 00:03:27,680
tem que escrever nos
entre tags de script, nós

73
00:03:27,680 --> 00:03:29,600
pode vinculá-lo no uso
que tag script também.

74
00:03:29,600 --> 00:03:33,230
E, assim como com o caso com CSS onde
recomendamos que foi, provavelmente,

75
00:03:33,230 --> 00:03:36,090
no seu melhor interesse para escrever
seu CSS em um arquivo separado no caso

76
00:03:36,090 --> 00:03:38,500
você precisará alterá-lo,
da mesma forma que nós recomendamos

77
00:03:38,500 --> 00:03:40,720
que você escreve o seu
JavaScript em arquivos separados

78
00:03:40,720 --> 00:03:45,460
e usar a fonte de tags de script
atribuir a amarrar seu JavaScript

79
00:03:45,460 --> 00:03:49,520
em seu html, a sua página web.

80
00:03:49,520 --> 00:03:52,610
>> Então variáveis ​​JavaScript, vamos
começar a falar sobre a sintaxe aqui.

81
00:03:52,610 --> 00:03:53,600
E nós vamos passar por
este tipo de forma rápida,

82
00:03:53,600 --> 00:03:56,640
porque nós fizemos isso em PHP, de modo
isso deve ser bastante familiar.

83
00:03:56,640 --> 00:03:59,490
Então variáveis ​​em JavaScript são
muito semelhante ao PHP variáveis.

84
00:03:59,490 --> 00:04:03,270
Não há nenhum tipo de especificador, e
quando você introduz uma variável,

85
00:04:03,270 --> 00:04:05,070
você prefixo com a palavra-chave var.

86
00:04:05,070 --> 00:04:07,750
Em PHP faríamos algo
assim, sinal de dólar x.

87
00:04:07,750 --> 00:04:09,950
Isso é como nós indicada
uma variável, mas não, nós

88
00:04:09,950 --> 00:04:12,060
não mencionam o tipo
da variável de todo.

89
00:04:12,060 --> 00:04:15,124
Gostaríamos de dizer algo como
dólar sinal x é igual a 44 em PHP.

90
00:04:15,124 --> 00:04:17,040
Se nós estávamos fazendo o
mesma coisa em JavaScript,

91
00:04:17,040 --> 00:04:19,589
diríamos var x é igual a 44.

92
00:04:19,589 --> 00:04:22,780
Então var é uma espécie de meio do caminho
da introdução de uma variável.

93
00:04:22,780 --> 00:04:26,850
Isso é talvez um pouco mais intuitivo
que apenas variável cifrão.

94
00:04:26,850 --> 00:04:29,080
>> Novamente, uma vez que não há nenhuma
tipos de dados, poderíamos fazer isso

95
00:04:29,080 --> 00:04:34,490
com qualquer tipo de dados, cordas,
qualquer outra coisa seriam todos var.

96
00:04:34,490 --> 00:04:37,260
Condicionais, toda a nossa
velhos amigos de C e PHP

97
00:04:37,260 --> 00:04:41,640
ainda estão disponíveis, por isso temos se,
else if, else, switch e pergunta

98
00:04:41,640 --> 00:04:42,240
marca de cólon.

99
00:04:42,240 --> 00:04:45,890
Mudar restante tão flexível como ele
estava em PHP, mas tudo isso você é

100
00:04:45,890 --> 00:04:46,930
familiarizados com agora.

101
00:04:46,930 --> 00:04:49,900
E da mesma forma com loops são
os antigos favoritos de tempo,

102
00:04:49,900 --> 00:04:52,700
fazer enquanto, e por ainda disponíveis para nós.

103
00:04:52,700 --> 00:04:55,880
Então já sabemos muito do
tipo básico de JavaScript fundamentos

104
00:04:55,880 --> 00:05:01,800
apenas em virtude de ter um pouco
de conhecimento agora sobre C e PHP.

105
00:05:01,800 --> 00:05:03,670
>> O que sobre as funções em JavaScript?

106
00:05:03,670 --> 00:05:08,199
Bem, similar ao PHP cada função é
a palavra-chave introduzida com a função.

107
00:05:08,199 --> 00:05:10,740
Você diz função, e então você
começar a definir a sua função.

108
00:05:10,740 --> 00:05:12,531
O que é um pouco diferente
sobre JavaScript,

109
00:05:12,531 --> 00:05:15,700
no entanto, é a capacidade de ter
o que é chamado uma função anônima.

110
00:05:15,700 --> 00:05:18,880
Assim, você pode definir funções
que não tem um nome.

111
00:05:18,880 --> 00:05:21,222
Isso é algo que
realmente não tenha visto antes.

112
00:05:21,222 --> 00:05:23,430
Nós realmente vai usar o conceito
de uma função anônima

113
00:05:23,430 --> 00:05:27,880
um pouco mais adiante neste
vídeo, porque ele vai

114
00:05:27,880 --> 00:05:31,530
fazer um pouco mais de sentido em contexto
quando o vemos em uma situação particular

115
00:05:31,530 --> 00:05:33,120
que eu criei aqui.

116
00:05:33,120 --> 00:05:35,710
Mas vamos apenas dar uma olhada
com o que um simples JavaScript

117
00:05:35,710 --> 00:05:37,850
função pode parecer.

118
00:05:37,850 --> 00:05:40,610
>> Então eu fui em frente e
abri minha CS50 IDE

119
00:05:40,610 --> 00:05:43,690
e eu já tenha executado Apache
para começar minha corrida servidor.

120
00:05:43,690 --> 00:05:46,800
E eu tenho esse arquivo
aberto chamado home.html.

121
00:05:46,800 --> 00:05:48,330
E eu vou fazer zoom um pouco aqui.

122
00:05:48,330 --> 00:05:52,090
E, basicamente, você pode ver o
Home.html é apenas um monte de botões.

123
00:05:52,090 --> 00:05:55,291
E eu estou dizendo no topo aqui
que esta é a secção JavaScript

124
00:05:55,291 --> 00:05:55,790
materiais.

125
00:05:55,790 --> 00:05:59,490
Portanto, há um monte de botões aqui,
mas o que esses botões realmente fazer?

126
00:05:59,490 --> 00:06:03,662
>> Bem, vamos dirigir sobre a minha IED,
e eu home.html abrir aqui.

127
00:06:03,662 --> 00:06:05,620
No início,
aqui é onde eu estou ligando

128
00:06:05,620 --> 00:06:07,500
em todos os meus arquivos de origem de JavaScript.

129
00:06:07,500 --> 00:06:08,000
Certo?

130
00:06:08,000 --> 00:06:12,440
Então, eu tenho anonymous.js, clock.js,
Eu estou usando o atributo de origem

131
00:06:12,440 --> 00:06:14,440
da tag script para conectar no arquivo.

132
00:06:14,440 --> 00:06:18,660
Então eu não tenho escrito qualquer
JavaScript diretamente para este arquivo,

133
00:06:18,660 --> 00:06:21,790
mas eu puxado em todo o
JavaScript que eu escrevi separadamente.

134
00:06:21,790 --> 00:06:24,540
E se rolar para baixo aqui, este
todos devem olhar um pouco familiarizado

135
00:06:24,540 --> 00:06:27,090
com um pouco de nova sintaxe.

136
00:06:27,090 --> 00:06:32,655
Temos aqui tag cabeçalho para
funções e, em seguida, um botão.

137
00:06:32,655 --> 00:06:35,530
Eu tenho uma entrada que é um tipo de botão,
e, aparentemente, quando eu clicar nele,

138
00:06:35,530 --> 00:06:38,130
Eu vou ligar para alguns
funcionar data alerta.

139
00:06:38,130 --> 00:06:41,792
E é assim que podemos classificar de misturar-se
um pouco de JavaScript e HTML.

140
00:06:41,792 --> 00:06:44,500
Eles realmente jogar muito bem
juntos, e assim, aparentemente, quando

141
00:06:44,500 --> 00:06:48,730
Eu clicar neste botão, eu vou
para chamar alguma data alerta função.

142
00:06:48,730 --> 00:06:53,660
E da mesma forma que eu tenho definido comportamentos
para todos os outros botões que

143
00:06:53,660 --> 00:06:56,440
estão nessa página home.html,
que nós vamos manter voltar

144
00:06:56,440 --> 00:06:59,172
para durante o curso de um vídeo.

145
00:06:59,172 --> 00:07:00,880
Mas vamos voltar a subir
aqui e dê uma olhada

146
00:07:00,880 --> 00:07:03,850
em clock.js, que é a
Arquivo JavaScript que eu

147
00:07:03,850 --> 00:07:07,370
escreveu que tem esta primeira função
vamos dar uma olhada.

148
00:07:07,370 --> 00:07:11,630
Como você pode ver, eu começo minha JavaScript
funcionar com a palavra-chave função,

149
00:07:11,630 --> 00:07:14,560
e eu dei um presente um
nome, chama-se data de alerta.

150
00:07:14,560 --> 00:07:18,710
Dentro de lá, eu aparentemente criar um
nova variável local chamado data atual.

151
00:07:18,710 --> 00:07:21,500
E eu vou atribuir
igual a uma nova data.

152
00:07:21,500 --> 00:07:24,430
E nós poderíamos entrar em um monte de
detalhe sobre o que é uma data,

153
00:07:24,430 --> 00:07:27,060
e realmente é tão JavaScript
grande que não podemos possivelmente

154
00:07:27,060 --> 00:07:28,330
cobrir tudo em um vídeo.

155
00:07:28,330 --> 00:07:32,220
Mas basta dizer, isso vai
para voltar para mim um item de dados que

156
00:07:32,220 --> 00:07:35,470
encapsula a data e hora atual.

157
00:07:35,470 --> 00:07:39,100
Eu estou armazenando que em uma variável que eu sou
aparentemente, vai alertar data atual.

158
00:07:39,100 --> 00:07:41,300
>> Bem, o que faz alerta
olhar data atual como?

159
00:07:41,300 --> 00:07:46,460
Vamos dar uma olhada no arquivo em si
parte traseira sobre o na janela do navegador.

160
00:07:46,460 --> 00:07:49,551
Então, novamente, este é o botão que eu
ter amarrado a, essa função nomeada.

161
00:07:49,551 --> 00:07:51,800
E eu clicar nele lá e
olha o que ele fez, ele alertou.

162
00:07:51,800 --> 00:07:56,140
Ele apareceu esse tipo de caixa dizendo
me que o tempo atual é, aparentemente,

163
00:07:56,140 --> 00:07:59,370
é 04 de novembro a
10:43:43 na parte da manhã.

164
00:07:59,370 --> 00:08:02,345
E se eu clicar nele novamente, agora
é de alguns segundos mais tarde, certo?

165
00:08:02,345 --> 00:08:03,720
Então, isso é tudo que esta função faz.

166
00:08:03,720 --> 00:08:07,670
Quando eu clicar nesse botão, ele
aparece uma mensagem de alerta para mim.

167
00:08:07,670 --> 00:08:13,806

168
00:08:13,806 --> 00:08:15,690
Então não há realmente
demais para funções

169
00:08:15,690 --> 00:08:19,110
que é diferente de PHP,
apenas um pouco de nova sintaxe

170
00:08:19,110 --> 00:08:22,500
que vem com o trabalho com JavaScript.

171
00:08:22,500 --> 00:08:24,650
>> Arrays em JavaScript são
bastante simples.

172
00:08:24,650 --> 00:08:27,200
Para declarar uma matriz, você pode usar
a sintaxe colchetes

173
00:08:27,200 --> 00:08:30,090
que estamos familiarizados com a partir de PHP.

174
00:08:30,090 --> 00:08:33,432
E semelhante ao PHP, nós
também pode misturar tipos de dados.

175
00:08:33,432 --> 00:08:35,140
Portanto, este array, ambos
destas matrizes faria

176
00:08:35,140 --> 00:08:36,960
ser perfeitamente legítimo JavaScript.

177
00:08:36,960 --> 00:08:42,500
Um que é todos os inteiros, e que
confunde-se diferentes tipos de dados.

178
00:08:42,500 --> 00:08:45,020
>> O que é algo muito diferente
em JavaScript, embora?

179
00:08:45,020 --> 00:08:47,020
Essa é a noção de um objeto.

180
00:08:47,020 --> 00:08:50,240
Por isso, talvez você tenha ouvido falar
programação orientada a objeto.

181
00:08:50,240 --> 00:08:53,370
Nós não fazemos um monte de que em CS50,
mas vamos fazer um pouco dela

182
00:08:53,370 --> 00:08:55,670
aqui no contexto de Javascript.

183
00:08:55,670 --> 00:08:59,100
Agora JavaScript tem a capacidade de
comportar-se como uma programação orientada a objeto

184
00:08:59,100 --> 00:09:02,615
idioma, mas que não é ela própria
exclusivamente orientada para um objeto

185
00:09:02,615 --> 00:09:03,490
linguagem de programação.

186
00:09:03,490 --> 00:09:05,281
E isso vem de novo
de volta para por isso que eu disse,

187
00:09:05,281 --> 00:09:10,610
pode ser muito desafiador para aprender
JavaScript como sua primeira programação

188
00:09:10,610 --> 00:09:13,890
língua, porque não faz
realmente se encaixam um paradigma particular.

189
00:09:13,890 --> 00:09:16,430
>> C, por outro lado é um
linguagem de programação funcional.

190
00:09:16,430 --> 00:09:22,270
Se quisermos, as funções são
espécie do grande chefe, certo?

191
00:09:22,270 --> 00:09:24,410
Eles ditam o que
acontece tudo o resto.

192
00:09:24,410 --> 00:09:26,600
Queremos mudar variáveis,
que chamamos de funções.

193
00:09:26,600 --> 00:09:28,220
Nós fazemos as coisas de funções.

194
00:09:28,220 --> 00:09:31,250
Objectos vez, numa
linguagem orientada a objetos,

195
00:09:31,250 --> 00:09:35,937
objetos tipo de tornar-se a estrela e
funções tornam-se uma espécie de secundário.

196
00:09:35,937 --> 00:09:38,270
Mas o que é um objeto, o que
é esta noção de um objeto?

197
00:09:38,270 --> 00:09:40,880
Bem, se isso ajuda, pense
sobre ele em primeiro ordenar

198
00:09:40,880 --> 00:09:44,540
como uma estrutura de C ou um struct
que aprendemos sobre antes.

199
00:09:44,540 --> 00:09:47,430
Em C, contém uma estrutura de
um número de campos,

200
00:09:47,430 --> 00:09:51,174
e talvez nós agora pode começar a
chamar essas propriedades campos.

201
00:09:51,174 --> 00:09:53,590
Mas as propriedades nunca
ficar por conta própria, certo?

202
00:09:53,590 --> 00:09:56,410
Se definir uma estrutura de um carro
assim com as duas seguintes

203
00:09:56,410 --> 00:10:00,750
campos ou propriedades, uma an
inteiro para o ano do carro

204
00:10:00,750 --> 00:10:04,290
e outra um caráter 10
string para o modelo do carro,

205
00:10:04,290 --> 00:10:07,150
Eu posso dizer algo como isso,
Eu posso declarar uma nova variável

206
00:10:07,150 --> 00:10:10,080
Tipo de carro struct Herbie.

207
00:10:10,080 --> 00:10:13,730
E então eu posso dizer alguma coisa
como herbie.year é igual a 1963,

208
00:10:13,730 --> 00:10:15,850
e herbie.model igual Beetle.

209
00:10:15,850 --> 00:10:17,000
Está ok.

210
00:10:17,000 --> 00:10:19,680
Eu estou usando os campos na
contexto da estrutura,

211
00:10:19,680 --> 00:10:22,290
mas eu nunca poderia apenas
dizer algo como isto.

212
00:10:22,290 --> 00:10:22,790
Certo?

213
00:10:22,790 --> 00:10:26,836
Eu não pode usar o nome do campo
independente da estrutura.

214
00:10:26,836 --> 00:10:28,210
É uma espécie de uma coisa fundamental.

215
00:10:28,210 --> 00:10:32,990
>> Assim sendo campos
fundamental para estruturas C

216
00:10:32,990 --> 00:10:39,050
são muito similares às propriedades sendo
fundamental para objetos JavaScript.

217
00:10:39,050 --> 00:10:42,080
Mas o que os torna
particularmente interessante

218
00:10:42,080 --> 00:10:46,230
é que os objetos também podem ter o que
são chamados métodos, que são realmente

219
00:10:46,230 --> 00:10:50,730
apenas uma palavra chique para funções que
são inerentes ao objecto bem.

220
00:10:50,730 --> 00:10:55,340
Portanto, é uma função que só pode ser
chamado no contexto de um objecto.

221
00:10:55,340 --> 00:10:59,200
Apenas um objeto que tenha definido
esta função dentro da sua,

222
00:10:59,200 --> 00:11:02,020
se você pensar sobre um
struct, a função

223
00:11:02,020 --> 00:11:05,720
é definida dentro as que definem
chaves da estrutura.

224
00:11:05,720 --> 00:11:07,980
Por isso, só significa algo
para a estrutura.

225
00:11:07,980 --> 00:11:10,960
E isso é uma espécie do que estamos fazendo
aqui com objetos e métodos.

226
00:11:10,960 --> 00:11:13,580
É basicamente como estamos
definindo uma função que

227
00:11:13,580 --> 00:11:16,670
só faz sentido em um
em particular objeto, e por isso,

228
00:11:16,670 --> 00:11:19,440
chamada que um método do objecto.

229
00:11:19,440 --> 00:11:23,180
E nós nunca podemos chamar isso
função independente do objeto,

230
00:11:23,180 --> 00:11:29,260
assim como não podemos dizer ano ou modelo
independente da struct em C.

231
00:11:29,260 --> 00:11:32,300
>> Então programação funcional
paradigmas algo parecido com isto.

232
00:11:32,300 --> 00:11:35,450
Função e, em seguida, quando você passa
no objecto como um parâmetro.

233
00:11:35,450 --> 00:11:38,650
Em uma programação orientada a objeto
línguas, esse tipo de recebe

234
00:11:38,650 --> 00:11:43,464
capotou, e gostaríamos de pensar sobre
-lo como este, object.function.

235
00:11:43,464 --> 00:11:45,380
Por isso, que tipo de ponto
operador novamente implicando

236
00:11:45,380 --> 00:11:49,540
que é algum tipo de propriedade
ou atributo do próprio objeto.

237
00:11:49,540 --> 00:11:53,240
Mas isso é o que um objeto
linguagem de programação orientada

238
00:11:53,240 --> 00:11:57,150
pode fazer para fazer uma função
recorrer a um método, mais uma vez, que

239
00:11:57,150 --> 00:12:00,260
é apenas uma palavra especial para uma função
que é inerente a um objeto.

240
00:12:00,260 --> 00:12:03,440
Isto é o que que
sintaxe pode parecer.

241
00:12:03,440 --> 00:12:09,360
E assim nós vamos começar a ver alguns dos
isto no contexto de Javascript.

242
00:12:09,360 --> 00:12:12,470
>> Você também pode pensar em um objeto
como uma espécie de matriz associativa,

243
00:12:12,470 --> 00:12:14,160
que estamos familiarizados com a partir de PHP.

244
00:12:14,160 --> 00:12:17,720
Lembre-se de uma matriz associativa permite
nós ter pares de valores-chave, em vez

245
00:12:17,720 --> 00:12:23,040
de ter índices 0, um, dois, três,
e assim por diante, como estamos acostumados a partir de C

246
00:12:23,040 --> 00:12:23,940
matrizes.

247
00:12:23,940 --> 00:12:27,472
As matrizes de associação pode mapear
palavras, como no vídeo PHP,

248
00:12:27,472 --> 00:12:29,180
nós estávamos falando sobre
coberturas de pizzas.

249
00:12:29,180 --> 00:12:31,180
E por isso, tivemos um array
chamados de pizzas, e nós

250
00:12:31,180 --> 00:12:36,670
teve queijo era uma chave e $ 8,99 foi o
valor, e em seguida, pepperoni era uma chave,

251
00:12:36,670 --> 00:12:39,190
$ 9.99 era um valor, e assim por diante.

252
00:12:39,190 --> 00:12:43,300
E assim, também podemos pensar em um
objeto tipo de semelhante a um associativa

253
00:12:43,300 --> 00:12:43,840
array.

254
00:12:43,840 --> 00:12:47,020
E assim esta sintaxe aqui
criaria um novo objeto

255
00:12:47,020 --> 00:12:50,950
chamado Herbie com dois
propriedades dentro dele.

256
00:12:50,950 --> 00:12:57,310
Ano, o que é atribuído o valor 1963,
e modelo, que é atribuído a string

257
00:12:57,310 --> 00:12:58,140
Besouro.

258
00:12:58,140 --> 00:13:01,770
>> E observe aqui que eu estou usando
aspas simples em JavaScript.

259
00:13:01,770 --> 00:13:05,570
Você pode usar aspas simples ou duplas
quando você está falando de cordas.

260
00:13:05,570 --> 00:13:07,772
É apenas convencionalmente
O caso que na maioria das vezes

261
00:13:07,772 --> 00:13:10,230
quando você está escrevendo JavaScript,
você acabou de usar aspas simples.

262
00:13:10,230 --> 00:13:15,050
Mas eu poderia usar as aspas aqui, e
que seria perfeitamente bem também.

263
00:13:15,050 --> 00:13:17,470
>> Então lembre-se como em
PHP tivemos essa noção

264
00:13:17,470 --> 00:13:22,730
de um para cada loop que nos permitiria
para repetir todos o valor da chave

265
00:13:22,730 --> 00:13:25,270
pares de um associativa
matriz, porque

266
00:13:25,270 --> 00:13:29,050
não têm essa habilidade de iteração
através de 0, um, dois, três, quatro,

267
00:13:29,050 --> 00:13:30,710
e assim por diante?

268
00:13:30,710 --> 00:13:35,010
JavaScript tem algo muito semelhante,
mas ele não é chamado um para cada loop,

269
00:13:35,010 --> 00:13:38,960
ele é chamado um no loops.

270
00:13:38,960 --> 00:13:42,890
Então, se eu disse-me que
isso, para a chave var em objeto,

271
00:13:42,890 --> 00:13:48,670
que é uma espécie de semelhante a dizer
para cada algo como algo.

272
00:13:48,670 --> 00:13:53,850
Mas tudo que eu estou fazendo aqui é a iteração
através de todas as chaves de meu objeto.

273
00:13:53,850 --> 00:13:56,070
E dentro do crespos
cintas lá, eu o faria

274
00:13:56,070 --> 00:14:03,410
usar objeto de chave entre colchetes para referir-
para o valor nesse local chave.

275
00:14:03,410 --> 00:14:05,400
>> Como alternativa, há
ainda uma outra abordagem.

276
00:14:05,400 --> 00:14:10,880
Se eu simplesmente só se preocupam com o
valores, o que posso dizer para a chave de objeto,

277
00:14:10,880 --> 00:14:12,360
e apenas usar chave dentro.

278
00:14:12,360 --> 00:14:17,240
Assim, para chave var em objeto, eu tenho
para usar objeto colchetes

279
00:14:17,240 --> 00:14:19,340
chave dentro do loop.

280
00:14:19,340 --> 00:14:24,580
Para a tecla de var de objeto, eu posso
basta usar chave dentro do loop,

281
00:14:24,580 --> 00:14:29,040
porque eu sou apenas especificamente
falando sobre os valores lá.

282
00:14:29,040 --> 00:14:32,630
>> Então, vamos talvez dê uma
olhar para a diferença

283
00:14:32,630 --> 00:14:35,670
apenas para mostrar-lhe rapidamente
a diferença entre quatro

284
00:14:35,670 --> 00:14:40,730
na e para a de com um muito específico
matriz, que nós temos aqui, semana matriz.

285
00:14:40,730 --> 00:14:43,616
Então eu tenho que encontrar uma nova matriz
que eu preenchido com sete cordas,

286
00:14:43,616 --> 00:14:46,240
Segunda, terça, quarta,
Quinta-feira, sexta-feira, sábado, domingo.

287
00:14:46,240 --> 00:14:50,530
E eu quero agora uma iteração
através desta matriz,

288
00:14:50,530 --> 00:14:53,090
imprimir determinadas informações.

289
00:14:53,090 --> 00:14:58,780
Se eu usar um laço no
para imprimir as informações,

290
00:14:58,780 --> 00:15:00,710
o que você acha que eu vou conseguir?

291
00:15:00,710 --> 00:15:01,710
Bem, vamos dar uma olhada.

292
00:15:01,710 --> 00:15:05,300
E antes de saltar sobre
a minha janela do navegador,

293
00:15:05,300 --> 00:15:08,090
só sei que
console.log é uma espécie de um

294
00:15:08,090 --> 00:15:10,630
maneira de fazer um F de impressão em JavaScript.

295
00:15:10,630 --> 00:15:12,040
Mas qual é o console?

296
00:15:12,040 --> 00:15:14,940
Bem, isso é o que vamos
para ir dar uma olhada agora.

297
00:15:14,940 --> 00:15:16,850
>> OK, então estamos de volta aqui
em minha janela do navegador,

298
00:15:16,850 --> 00:15:19,410
e eu estou indo para abrir
as minhas ferramentas para desenvolvedores.

299
00:15:19,410 --> 00:15:22,290
Mais uma vez, estou apenas batendo F12
para abrir ferramentas para desenvolvedores.

300
00:15:22,290 --> 00:15:25,670
E note que aqui no
topo Eu escolhi console.

301
00:15:25,670 --> 00:15:28,480
Portanto, esta é a noção
de um console de desenvolvedor,

302
00:15:28,480 --> 00:15:30,500
e ele vai nos permitir
imprimir informações para fora,

303
00:15:30,500 --> 00:15:33,000
como o tipo de terminal, mas
como você verá um pouco mais tarde,

304
00:15:33,000 --> 00:15:37,720
nós também pode digitar informações em
para interagir com a página web.

305
00:15:37,720 --> 00:15:42,320
Eu estou indo para fazer zoom e um pouco aqui,
e eu estou indo agora em diante, clique no teste.

306
00:15:42,320 --> 00:15:45,230
E quatro em test-- eu não vou
mostrar-lhe o código para ele agora,

307
00:15:45,230 --> 00:15:47,479
mas você vai obtê-lo se você
baixar o código-fonte que

308
00:15:47,479 --> 00:15:50,380
está associado a este video--
é apenas isso no laço

309
00:15:50,380 --> 00:15:52,610
que vimos apenas uma
segundo atrás no slide.

310
00:15:52,610 --> 00:15:54,810
>> Então, eu vou clique que
botão, e aqui,

311
00:15:54,810 --> 00:15:58,440
aqui está o que foi impresso no
consola, 0, um, dois, três, quatro, cinco,

312
00:15:58,440 --> 00:15:58,940
seis.

313
00:15:58,940 --> 00:16:02,490
Eu não imprimir as informações
essas localizações dentro da matriz,

314
00:16:02,490 --> 00:16:05,180
porque eu usei um no loop.

315
00:16:05,180 --> 00:16:10,670
E no interior do corpo do laço, I
apenas impresso chave não chave do objeto.

316
00:16:10,670 --> 00:16:18,600
Mas se eu agora limpar o meu console, e eu
para mudar para de teste, e pelo teste de quatro

317
00:16:18,600 --> 00:16:22,500
Eu digo que eu uso para de malha
em vez e imprimir chave,

318
00:16:22,500 --> 00:16:28,079
se eu clicar em que, agora estou tendo o
elementos reais dentro do meu objeto

319
00:16:28,079 --> 00:16:29,120
ou minha matriz no presente caso.

320
00:16:29,120 --> 00:16:31,760
Minha série de dias de semana.

321
00:16:31,760 --> 00:16:33,480
Eu imprimi segunda-feira,
Terça quarta.

322
00:16:33,480 --> 00:16:36,930
Então essa é a diferença entre
um no loop, que imprime

323
00:16:36,930 --> 00:16:43,410
apenas as chaves se você só usa chave
dentro do corpo do laço,

324
00:16:43,410 --> 00:16:46,850
e um para de laço, que imprime
os valores se você usar apenas

325
00:16:46,850 --> 00:16:48,870
chave no interior do corpo do ciclo.

326
00:16:48,870 --> 00:16:52,380
>> Tudo bem, como é que vamos agora começar a
concatenar cadeias de caracteres e talvez misturar

327
00:16:52,380 --> 00:16:57,220
algumas variáveis ​​com interpolação
como fomos capazes de fazer em PHP?

328
00:16:57,220 --> 00:16:59,410
Bem, nós estamos bastante familiarizados
com isso a partir de PHP.

329
00:16:59,410 --> 00:17:04,109
É desta forma que o faria usando o
operador ponto para concatenar strings.

330
00:17:04,109 --> 00:17:06,260
Em JavaScript, embora,
nós realmente usar algo

331
00:17:06,260 --> 00:17:09,290
chamado de operador plus, que
é talvez até um pouco mais

332
00:17:09,290 --> 00:17:10,470
intuitivo, certo?

333
00:17:10,470 --> 00:17:12,609
Estamos adicionando um monte
de cordas juntos.

334
00:17:12,609 --> 00:17:14,520
Então, vamos voltar
e ver o que esta

335
00:17:14,520 --> 00:17:18,693
será impresso se nós estamos tentando imprimir
todas as informações na semana matriz.

336
00:17:18,693 --> 00:17:20,859
Tudo bem, então sob aqui
sob concatenação de strings,

337
00:17:20,859 --> 00:17:24,822
Tenho duas opções, construção corda
V1 e V2, em seguida, edifício seqüência.

338
00:17:24,822 --> 00:17:26,530
E vamos ver porque nós
precisa V2 em um segundo.

339
00:17:26,530 --> 00:17:28,610
Mas eu vou clicar em
corda edifício V1, que

340
00:17:28,610 --> 00:17:30,360
é o código nós
apenas dar uma olhada,

341
00:17:30,360 --> 00:17:32,980
o console.log com todos os trunfos.

342
00:17:32,980 --> 00:17:35,910
Vamos ver se isso resultar na impressão
o que nós esperamos.

343
00:17:35,910 --> 00:17:39,939
>> Segunda-feira é o dia número 01 da semana,
Terça-feira é o dia número 11 da semana.

344
00:17:39,939 --> 00:17:41,730
Bem, o que eu estava tentando
fazer houve obter

345
00:17:41,730 --> 00:17:46,280
-lo para imprimir segunda-feira é o dia número
um, terça-feira é o dia número dois.

346
00:17:46,280 --> 00:17:50,140
Mas parece que eu sou
sempre imprimir um.

347
00:17:50,140 --> 00:17:51,260
Bem, por que isso?

348
00:17:51,260 --> 00:17:55,600
Bem, ao que parece, ter um outro olhar
neste pequeno trecho de código aqui.

349
00:17:55,600 --> 00:18:00,160
Observe que estamos usando a mais
operador em dois contextos diferentes.

350
00:18:00,160 --> 00:18:03,221
>> E aqui é onde talvez as coisas
que nós tipo de estado a dizer,

351
00:18:03,221 --> 00:18:03,970
oh, é tão grande.

352
00:18:03,970 --> 00:18:05,910
Não lidar com tipos de dados mais.

353
00:18:05,910 --> 00:18:08,220
Mas aqui é onde o fato
que perdemos tipos de dados

354
00:18:08,220 --> 00:18:10,960
pode realmente ser um pouco
de um problema para nós.

355
00:18:10,960 --> 00:18:16,260
Agora que o operador é utilizado para além
concatenar cadeias de caracteres e adicionar números

356
00:18:16,260 --> 00:18:19,550
juntos, JavaScript tem
para fazer o seu melhor palpite

357
00:18:19,550 --> 00:18:22,030
sobre o que eu quero que ele faça para mim.

358
00:18:22,030 --> 00:18:23,900
E, neste caso, ele adivinhou errado.

359
00:18:23,900 --> 00:18:29,340
É dia apenas concatenada, o que seria
0, um, dois, três, quatro, cinco, ou seis,

360
00:18:29,340 --> 00:18:32,060
e então ele só concatenado
e, em seguida, que um concatenados.

361
00:18:32,060 --> 00:18:35,020
Ele não chegou a adicioná-los juntos.

362
00:18:35,020 --> 00:18:37,320
E assim estes idiomas,
PHP e JavaScript,

363
00:18:37,320 --> 00:18:39,196
que abstrai
essa noção de tipos,

364
00:18:39,196 --> 00:18:40,820
você não tem que lidar com isso.

365
00:18:40,820 --> 00:18:43,600
Eles ainda têm tipos sob o capô.

366
00:18:43,600 --> 00:18:46,780
E nós podemos, em situações
assim, aproveitar esse fato

367
00:18:46,780 --> 00:18:49,240
dizendo algo
como talvez esta, que

368
00:18:49,240 --> 00:18:53,210
está dizendo JavaScript, pela
forma, tratar isso como um número inteiro,

369
00:18:53,210 --> 00:18:57,100
não tratá-lo como uma string, mesmo
embora nós estamos misturando cordas

370
00:18:57,100 --> 00:18:58,940
e inteiros aqui.

371
00:18:58,940 --> 00:19:02,204
>> É apenas uma daquelas coisas
que parece tão grande no contexto

372
00:19:02,204 --> 00:19:04,120
que não temos a
lidar com tipos mais,

373
00:19:04,120 --> 00:19:05,828
mas às vezes você
correr em uma situação

374
00:19:05,828 --> 00:19:09,110
exatamente como este, onde o fato de que
você não tem controle sobre os tipos

375
00:19:09,110 --> 00:19:11,220
pode voltar contra você
se você não tiver cuidado.

376
00:19:11,220 --> 00:19:18,285
E assim se nós pop de volta para IDE, eu sou
vai limpar a minha consola de novo,

377
00:19:18,285 --> 00:19:20,660
e eu estou indo para clicar cadeia
prédio versão dois, que

378
00:19:20,660 --> 00:19:23,052
é onde eu usar essa função de análise int.

379
00:19:23,052 --> 00:19:25,260
Agora ele está imprimindo
informações que eu estou esperando.

380
00:19:25,260 --> 00:19:29,330
Número um dia de segunda-feira, terça-
é o número de dois dias, e assim por diante.

381
00:19:29,330 --> 00:19:31,170
>> Então vamos falar sobre as funções novamente.

382
00:19:31,170 --> 00:19:34,790
Eu prometi que iria falar sobre anônimo
funções, e agora o contexto para que

383
00:19:34,790 --> 00:19:36,360
finalmente chegou.

384
00:19:36,360 --> 00:19:39,980
Então, antes de fazê-lo, vamos falar novamente
sobre matrizes para apenas um segundo.

385
00:19:39,980 --> 00:19:42,120
Assim, as matrizes são uma especial
caso de um objecto.

386
00:19:42,120 --> 00:19:45,180
Na verdade, tudo em
JavaScript é na verdade um objeto.

387
00:19:45,180 --> 00:19:47,190
Assim, as funções são um
caso especial de um objeto,

388
00:19:47,190 --> 00:19:49,770
inteiros são uma especial
caso de um objeto,

389
00:19:49,770 --> 00:19:52,152
mas especificamente matrizes
tem um número de métodos.

390
00:19:52,152 --> 00:19:55,110
Lembre-se, porque eles são objetos,
que podem ter propriedades e métodos.

391
00:19:55,110 --> 00:19:58,600
Eles têm um certo número de métodos que
pode ser aplicada a esses objetos.

392
00:19:58,600 --> 00:20:01,197
Há um método chamado
tamanho, array.size,

393
00:20:01,197 --> 00:20:03,030
que irá retornar ao
você como você poderia esperar

394
00:20:03,030 --> 00:20:05,120
o número de elementos em sua matriz.

395
00:20:05,120 --> 00:20:08,480
Array.pop, tipo de como
nossa noção de estalo fora

396
00:20:08,480 --> 00:20:11,110
de uma pilha, se você se lembra
do nosso vídeo pilhas,

397
00:20:11,110 --> 00:20:13,810
remove o último elemento da matriz.

398
00:20:13,810 --> 00:20:17,110
Array.push adiciona um novo elemento
para o final de uma matriz.

399
00:20:17,110 --> 00:20:20,910
Array.shift é uma espécie de
como DQ, ele emendas para fora

400
00:20:20,910 --> 00:20:23,610
o primeiro elemento de uma matriz.

401
00:20:23,610 --> 00:20:27,549
>> Mas há também um outro especial
método de um array chamado mapa.

402
00:20:27,549 --> 00:20:29,340
E esta é uma espécie de
conceito interessante.

403
00:20:29,340 --> 00:20:30,930
Então, qual é a idéia de um mapa?

404
00:20:30,930 --> 00:20:33,880
Você vai realmente ver isso
em várias outras línguas,

405
00:20:33,880 --> 00:20:38,550
e nós não estamos falando de um
tipo de cartógrafos mapa aqui,

406
00:20:38,550 --> 00:20:41,480
estamos falando de uma função de mapeamento.

407
00:20:41,480 --> 00:20:44,110
No contexto que estamos
falando aqui, um mapa

408
00:20:44,110 --> 00:20:47,950
que é uma operação especial
pode executar em um array

409
00:20:47,950 --> 00:20:51,630
para aplicar uma determinada função
para cada elemento dessa matriz.

410
00:20:51,630 --> 00:20:55,190
e por isso que temos a dizer em
Neste caso, talvez Array.map,

411
00:20:55,190 --> 00:21:00,330
e dentro dele, nós estamos passando
em mapa é uma função que queremos

412
00:21:00,330 --> 00:21:02,430
para ser aplicada a cada elemento individual.

413
00:21:02,430 --> 00:21:07,299
Então, é uma espécie de análogo a usar
um loop para iterar sobre cada elemento

414
00:21:07,299 --> 00:21:09,340
e aplicar uma determinada
funcionar para cada elemento,

415
00:21:09,340 --> 00:21:14,830
apenas JavaScript tem este construído em
noção de mapeamento que podem ser aplicadas.

416
00:21:14,830 --> 00:21:19,700
E este é um grande contexto para
falar sobre uma função anônima.

417
00:21:19,700 --> 00:21:22,370
>> Então, digamos que temos
este array de inteiros.

418
00:21:22,370 --> 00:21:25,370
Chama-se nums, e ele tem cinco
as coisas nele, um, dois, três, quatro,

419
00:21:25,370 --> 00:21:26,410
cinco.

420
00:21:26,410 --> 00:21:30,620
Agora eu quero mapear alguns
função para essa matriz.

421
00:21:30,620 --> 00:21:34,337
Eu quero ter uma função de aplicar
para cada elemento da matriz.

422
00:21:34,337 --> 00:21:37,420
Bem, vamos dizer que o que eu quero
fazer é apenas dobrar todos os elementos.

423
00:21:37,420 --> 00:21:42,520
O que eu poderia fazer é só usar um loop
para var I é igual a 0, I é inferior a

424
00:21:42,520 --> 00:21:47,390
ou igual a 4, eu, mais, mais, e
em seguida, dobrar a cada número único.

425
00:21:47,390 --> 00:21:49,580
Mas eu também posso fazer algo parecido com isto.

426
00:21:49,580 --> 00:21:53,420
Posso dizer nums era antigamente
um dois três quatro cinco,

427
00:21:53,420 --> 00:21:58,310
Agora, porém, eu gostaria que você
aplicar um mapeamento sobre essa matriz

428
00:21:58,310 --> 00:22:00,400
onde eu gostaria que você
para dobrar a cada número.

429
00:22:00,400 --> 00:22:02,540
E isso é exatamente
O que está acontecendo aqui.

430
00:22:02,540 --> 00:22:06,870
Mas observe o que eu estou passando
como o argumento para o mapa.

431
00:22:06,870 --> 00:22:09,080
Esta é uma função anônima.

432
00:22:09,080 --> 00:22:11,140
E repare que eu não tenha dado
esta função um nome,

433
00:22:11,140 --> 00:22:13,290
Eu só dei-lhe uma lista de parâmetros.

434
00:22:13,290 --> 00:22:16,370
E assim, este é um exemplo
de uma função anônima.

435
00:22:16,370 --> 00:22:21,270
>> Nós geralmente não chamaria isso
função fora do contexto do mapa.

436
00:22:21,270 --> 00:22:24,110
Estamos definindo-a como um parâmetro
para mapear, e assim nós realmente não

437
00:22:24,110 --> 00:22:27,910
precisa ter um nome para ele, se o
única coisa que preocupa é o mapa

438
00:22:27,910 --> 00:22:30,339
e é definido direita
lá dentro do mapa.

439
00:22:30,339 --> 00:22:31,880
E por isso esta é uma função anônima.

440
00:22:31,880 --> 00:22:34,680
Nós não temos sido capazes
para fazer isso anteriormente.

441
00:22:34,680 --> 00:22:38,400
Mapa alguma função que
aceita um parâmetro, num,

442
00:22:38,400 --> 00:22:41,890
e que essa função faz
é retornos Num vezes 2.

443
00:22:41,890 --> 00:22:45,330
E assim, depois desta
mapeamento tem sido aplicada,

444
00:22:45,330 --> 00:22:50,090
este é agora o que NUMS looks
como, dois, quatro, seis, oito, 10.

445
00:22:50,090 --> 00:22:52,090
E nós vamos estalar sobre a minha
janela do navegador e apenas

446
00:22:52,090 --> 00:22:55,240
dê uma olhada neste
muito rapidamente também.

447
00:22:55,240 --> 00:22:58,000
>> Então, eu tenho um outro botão aqui
na minha home page chamada dupla.

448
00:22:58,000 --> 00:23:03,570
E quando eu clicar duas vezes, e diz-
me antes que fosse um, dois, três, quatro,

449
00:23:03,570 --> 00:23:07,250
cinco após dois, quatro, seis, oito, 10.

450
00:23:07,250 --> 00:23:11,930
E se eu voltar e clique duplo
mais uma vez, duas, quatro, seis, oito, 10.

451
00:23:11,930 --> 00:23:17,400
E, depois, quatro,
oito, 12, 16, e, em seguida, 20.

452
00:23:17,400 --> 00:23:20,440
E o que eu estou fazendo nesta função?

453
00:23:20,440 --> 00:23:25,210
Bem, se nós apenas pop para IDE, e
Eu puxo a minha função anônima, aqui

454
00:23:25,210 --> 00:23:28,780
na linha de sete a 13 anos, eu sou
fazendo um pouco de trabalho elaborado aqui,

455
00:23:28,780 --> 00:23:32,240
mas eu só estou imprimindo
o que está atualmente na matriz.

456
00:23:32,240 --> 00:23:36,580
Em seguida, na linha 16, 17,
e 18, não é o meu mapa.

457
00:23:36,580 --> 00:23:40,930
Aqui é onde eu estou aplicando esta duplicação
função para cada elemento.

458
00:23:40,930 --> 00:23:43,530
E, em seguida, um pouco mais abaixo,
Eu só estou fazendo a mesma coisa

459
00:23:43,530 --> 00:23:46,640
Eu estava fazendo antes, só que agora eu sou
imprimir o conteúdo da matriz

460
00:23:46,640 --> 00:23:48,167
depois.

461
00:23:48,167 --> 00:23:50,500
Mas tudo que eu tenho feito aqui é
basta usar uma função anônima

462
00:23:50,500 --> 00:23:53,640
para mapear através de uma matriz inteira.

463
00:23:53,640 --> 00:23:58,466
>> Então, mais uma grande tópico para falar sobre em
JavaScript é a noção de um evento.

464
00:23:58,466 --> 00:24:01,590
Um evento é algo que simplesmente acontece
quando um usuário interage com o seu web

465
00:24:01,590 --> 00:24:04,715
A página, então talvez eles clique em alguma coisa,
ou talvez a página é terminar de carregar,

466
00:24:04,715 --> 00:24:07,200
ou talvez eles mudaram
o mouse sobre alguma coisa,

467
00:24:07,200 --> 00:24:09,290
ou que digitou alguma coisa
em um campo de entrada.

468
00:24:09,290 --> 00:24:14,260
Todas estas coisas são eventos
que estão ocorrendo em nossa página web.

469
00:24:14,260 --> 00:24:17,460
E tem o JavaScript
capacidade para suportar algo

470
00:24:17,460 --> 00:24:21,760
chamado um manipulador de eventos, que
é uma função de retorno de chamada que

471
00:24:21,760 --> 00:24:23,329
responde a um evento HTML.

472
00:24:23,329 --> 00:24:24,620
E o que é uma função de retorno?

473
00:24:24,620 --> 00:24:27,328
Bem, é geralmente apenas mais um
nome para uma função anônima.

474
00:24:27,328 --> 00:24:30,170
É uma função que
responde a um evento.

475
00:24:30,170 --> 00:24:34,130
E é aqui que chegamos à
idéia de certas funções de ligação

476
00:24:34,130 --> 00:24:38,060
para um determinado atributo html.

477
00:24:38,060 --> 00:24:41,420
A maioria dos elementos HTML têm
apoio para um atributo

478
00:24:41,420 --> 00:24:45,170
que nós não falamos sobre no html
vídeo para algo como no clique

479
00:24:45,170 --> 00:24:50,540
ou em foco ou em carga,
Todos estes eventos

480
00:24:50,540 --> 00:24:53,120
que você pode então escrever funções
que lidam com esses eventos

481
00:24:53,120 --> 00:24:56,090
quando esses eventos
ocorrer na sua página web.

482
00:24:56,090 --> 00:24:59,170
>> E talvez por isso o seu html
é algo como isto.

483
00:24:59,170 --> 00:25:02,240
E eu tenho dois botões aqui,
botão e um botão de dois,

484
00:25:02,240 --> 00:25:04,620
e aqui eu tenho atualmente
nada definido,

485
00:25:04,620 --> 00:25:11,170
mas este é o lugar onde o atributo em
clique é aparentemente parte da minha tag html.

486
00:25:11,170 --> 00:25:15,220
Então, aparentemente, quando eu definir o que é
acontecendo dentro desse atributo,

487
00:25:15,220 --> 00:25:18,590
que vai haver algum JavaScript
função que responde ao evento

488
00:25:18,590 --> 00:25:24,360
presumivelmente de clicar em
botão de um ou dois botões.

489
00:25:24,360 --> 00:25:28,580
>> O que é legal sobre isso é que nós
pode escrever um manipulador de eventos genérico.

490
00:25:28,580 --> 00:25:32,370
E este evento vai Handler
criar um objeto de evento.

491
00:25:32,370 --> 00:25:37,000
E o objeto de evento vai nos dizer
qual dos dois botões foi clicado.

492
00:25:37,000 --> 00:25:38,064
Agora, como é que isso funciona?

493
00:25:38,064 --> 00:25:39,730
Bem, pode ser algo como isto.

494
00:25:39,730 --> 00:25:44,860
Então, vamos primeiro definir nossos botões
para ter uma resposta de chamada de retorno para o

495
00:25:44,860 --> 00:25:47,470
função que será chamada
quando o botão é clicado,

496
00:25:47,470 --> 00:25:49,520
vamos chamá evento nome de alerta.

497
00:25:49,520 --> 00:25:53,320
E observe em ambos os casos estamos
passando neste parâmetro evento.

498
00:25:53,320 --> 00:25:55,460
Então, nós chamamos essa função
ou quando esta função

499
00:25:55,460 --> 00:26:00,330
é acionado pelo evento acontecendo,
que vai criar este objeto de evento

500
00:26:00,330 --> 00:26:03,300
e passá-lo como um
parâmetro para alertar nome.

501
00:26:03,300 --> 00:26:07,270
E que é objeto de evento
vai conter informações

502
00:26:07,270 --> 00:26:09,800
sobre qual botão foi clicado.

503
00:26:09,800 --> 00:26:11,580
E como ele faz isso?

504
00:26:11,580 --> 00:26:13,654
Bem, pode ser algo como isto.

505
00:26:13,654 --> 00:26:15,570
Então, agora na minha separado
Arquivo JavaScript, eu poderia

506
00:26:15,570 --> 00:26:17,420
tem que encontrar este
função nome de alerta, que

507
00:26:17,420 --> 00:26:19,500
novamente aceita que parâmetro de evento.

508
00:26:19,500 --> 00:26:24,640
E, em seguida, aqui é onde eu estou detectando
qual botão foi acionado,

509
00:26:24,640 --> 00:26:28,100
var gatilho é igual a evento
dot elemento de origem.

510
00:26:28,100 --> 00:26:33,150
Qual foi a fonte que criou
este objeto de evento que foi transmitido?

511
00:26:33,150 --> 00:26:36,390
Foi um botão ou era botão dois?

512
00:26:36,390 --> 00:26:40,710
>> E então aqui tudo que eu estou fazendo é
imprimir trigger.innerhtml.

513
00:26:40,710 --> 00:26:43,860
Bem, neste caso, no presente
contexto, trigger.innerhtml

514
00:26:43,860 --> 00:26:45,940
é apenas o que está escrito no botão.

515
00:26:45,940 --> 00:26:48,830
Isso só acontece se nós saltamos
voltar para uma segunda, que seria

516
00:26:48,830 --> 00:26:51,670
ser o que há entre essas tags de botão.

517
00:26:51,670 --> 00:26:54,150
Será botão ou um botão de dois.

518
00:26:54,150 --> 00:26:57,320
E vamos dar uma olhada
como isso seria manipulador de eventos

519
00:26:57,320 --> 00:27:01,080
olhar se tivéssemos-lo funcionando na prática.

520
00:27:01,080 --> 00:27:03,850
>> Então, primeiro de tudo, você tem
abriram events.js,

521
00:27:03,850 --> 00:27:06,517
que é o arquivo JavaScript onde
Tenho definido esta função.

522
00:27:06,517 --> 00:27:08,558
E como você pode ver, é
muito bonito exatamente o que

523
00:27:08,558 --> 00:27:10,230
que acabamos de ver no slide um segundo atrás.

524
00:27:10,230 --> 00:27:14,890
E eu vou passar para o
home page que estamos usando.

525
00:27:14,890 --> 00:27:17,660
E eu tenho aqui botão
um e dois botões.

526
00:27:17,660 --> 00:27:19,820
E eu vou clique no botão um.

527
00:27:19,820 --> 00:27:23,930
Você clicou em um botão, se você
pode ver aqui no alerta.

528
00:27:23,930 --> 00:27:25,810
ESTÁ BEM.

529
00:27:25,810 --> 00:27:28,980
Clique no botão dois, você
clicado em um botão dois.

530
00:27:28,980 --> 00:27:32,150
>> Assim, ambos os botões têm a
mesmo chamada de função, certo?

531
00:27:32,150 --> 00:27:35,840
Ambos eram nome de alerta
evento, mas este objeto de evento

532
00:27:35,840 --> 00:27:41,900
que é criada quando clicamos
ela nos diz qual botão foi clicado.

533
00:27:41,900 --> 00:27:44,650
Nós não temos que escrever dois separados
funções ou lidar com ter

534
00:27:44,650 --> 00:27:46,470
para passar qualquer informação adicional.

535
00:27:46,470 --> 00:27:48,220
Estamos apenas contando com
o que vai JavaScript

536
00:27:48,220 --> 00:27:53,772
fazer por nós, que é o de criar esse
tipo de evento objeto em nosso nome.

537
00:27:53,772 --> 00:27:56,730
Há muito mais do que a JavaScript
o que nós cobrimos neste vídeo,

538
00:27:56,730 --> 00:27:58,521
mas tendo estes
fundamental deve chegar

539
00:27:58,521 --> 00:28:00,690
um longo maneiras de
tudo o que você vai aprender

540
00:28:00,690 --> 00:28:04,030
precisa saber sobre este
linguagem interessante.

541
00:28:04,030 --> 00:28:05,000
Eu sou Doug Lloyd.

542
00:28:05,000 --> 00:28:07,010
Este é CS50.

543
00:28:07,010 --> 00:28:09,181