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ón, por agora estamos vellos
profesionais en programación web, non?

4
00:00:08,690 --> 00:00:12,140
E nós Cubrimos varios
linguas en vídeos individuais.

5
00:00:12,140 --> 00:00:14,690
E agora imos facer un máis, JavaScript.

6
00:00:14,690 --> 00:00:17,370
>> Primeiro a boa nova, JavaScript
é unha programación moderna

7
00:00:17,370 --> 00:00:21,410
linguaxe moi parecida PHP cuxas
sintaxe deriva desde C,

8
00:00:21,410 --> 00:00:22,830
de xeito que é un bo lugar para comezar.

9
00:00:22,830 --> 00:00:25,880
É sobre tan antiga como PHP, así como,
sendo en torno a uns 20 anos.

10
00:00:25,880 --> 00:00:28,600
Foi inventado en torno a
á vez como o PHP.

11
00:00:28,600 --> 00:00:32,240
E JavaScript é realmente moi
fundamental para a experiencia do usuario

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

13
00:00:32,740 --> 00:00:34,448
En realidade, hai
tres linguas que

14
00:00:34,448 --> 00:00:38,480
diría que tipo de compoñen o
experiencia do usuario de interactuar

15
00:00:38,480 --> 00:00:42,650
co sitio web, html,
CSS e JavaScript.

16
00:00:42,650 --> 00:00:46,030
E agora imos falar un
pouco JavaScript.

17
00:00:46,030 --> 00:00:50,301
>> A mala noticia, porén, con JavaScript
que define unha serie de regras para si mesmo,

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

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

20
00:00:54,010 --> 00:00:57,000
porque é diferente de C e
PHP, que son moi ben estruturada

21
00:00:57,000 --> 00:01:00,270
e ter regras moi ríxidas
de como as cousas poden funcionar.

22
00:01:00,270 --> 00:01:03,690
JavaScript ten tipo
de concluír tan flexible

23
00:01:03,690 --> 00:01:06,650
que quizais as cousas non están indo
traballar a forma que esperamos que eles,

24
00:01:06,650 --> 00:01:09,830
e quizais nós realmente non podemos aprender
nosa primeira linguaxe de programación

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

26
00:01:10,769 --> 00:01:12,810
Entón, talvez porque non
fixou regulamentos,

27
00:01:12,810 --> 00:01:15,754
e realmente non
reforzar os bos hábitos de codificación.

28
00:01:15,754 --> 00:01:18,170
Pero agora esperamos que desenvolveron
uns bos hábitos de codificación,

29
00:01:18,170 --> 00:01:21,470
e para que poidamos comezar a incursión
en JavaScript un pouco.

30
00:01:21,470 --> 00:01:25,750
>> Para escribir JavaScript, semellante á apertura
un ficheiro C cunha extensión dot C

31
00:01:25,750 --> 00:01:29,770
ou un ficheiro PHP cunha extensión dot PHP
todo o que necesitamos facer é abrir un ficheiro

32
00:01:29,770 --> 00:01:31,764
con extensión de arquivo do punto js.

33
00:01:31,764 --> 00:01:34,430
Non necesitamos ter calquera especial
delimitadores como fixemos en PHP.

34
00:01:34,430 --> 00:01:36,750
Este tipo de ángulo
soporte de punto de interrogación PHP

35
00:01:36,750 --> 00:01:40,300
que estamos afeitos a iso, o camiño
dicimos ao noso navegador que o que temos é

36
00:01:40,300 --> 00:01:43,502
JavaScript é a través da inclusión
Lo nunha etiqueta HTML,

37
00:01:43,502 --> 00:01:46,210
e veremos un pouco sobre
como facelo en só un momento.

38
00:01:46,210 --> 00:01:48,210
>> A outra cousa que fai
JavaScript diferente,

39
00:01:48,210 --> 00:01:50,580
pero é que é executado no lado do cliente.

40
00:01:50,580 --> 00:01:53,430
Entón, recordamos con PHP que
nunca podería realmente ver

41
00:01:53,430 --> 00:01:57,041
PHP que subliñou un sitio.

42
00:01:57,041 --> 00:01:59,040
Se algunha vez viron o
fonte da páxina, só faría

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

44
00:02:02,830 --> 00:02:04,900
Pero JavaScript execútase ao lado do cliente.

45
00:02:04,900 --> 00:02:06,710
Seu JavaScript execútase no seu ordenador.

46
00:02:06,710 --> 00:02:09,050
E é por iso que pode facer
cousas como engadir bloqueadores.

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

48
00:02:09,550 --> 00:02:12,704
Bloqueo de anuncios xeralmente é feito por
matando todos a JavaScript

49
00:02:12,704 --> 00:02:14,370
que está a ser executado en un sitio web.

50
00:02:14,370 --> 00:02:19,000
E xa que tería que
executado no seu lado do cliente máquina,

51
00:02:19,000 --> 00:02:21,910
pode simplemente deixar a
JavaScript para realizar enteiramente.

52
00:02:21,910 --> 00:02:27,030
Isto tamén significa que cando usa
un sitio web que inclúe JavaScript,

53
00:02:27,030 --> 00:02:32,450
ten que enviar a fonte de JavaScript
código como parte da súa resposta http

54
00:02:32,450 --> 00:02:34,159
ao cliente cando soliciten.

55
00:02:34,159 --> 00:02:35,950
E para que non pode
quero usar JavaScript

56
00:02:35,950 --> 00:02:38,395
para facer cousas realmente sensibles
como pasar información

57
00:02:38,395 --> 00:02:41,020
sobre os contrasinais dos usuarios atrás e
atrás, porque son, de feito,

58
00:02:41,020 --> 00:02:45,610
recibirá todo o código fonte,
non só o html que se xera,

59
00:02:45,610 --> 00:02:49,030
como sería o caso, por exemplo co PHP.

60
00:02:49,030 --> 00:02:51,620
>> Entón, como imos incluír JavaScript
na nosa html para comezar?

61
00:02:51,620 --> 00:02:54,520
Ben, semellante ao CSS, en realidade,
é unha especie de como o facemos aquí.

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

63
00:02:56,190 --> 00:03:00,760
E dentro desas etiquetas de estilo,
podemos definir unha folla de estilo CSS.

64
00:03:00,760 --> 00:03:03,450
Así mesmo con JavaScript
podemos abrir etiquetas de guión,

65
00:03:03,450 --> 00:03:06,660
outra etiqueta html que non fixo
falar na nosa vídeo html,

66
00:03:06,660 --> 00:03:09,720
e escribir en JavaScript
entre esas etiquetas de script.

67
00:03:09,720 --> 00:03:13,960
Ademais, con todo, como CSS, nos
podería conectar no exterior arquivos CSS

68
00:03:13,960 --> 00:03:15,900
e trae-los para o noso programa desta maneira.

69
00:03:15,900 --> 00:03:18,280
CSS nós tamén podemos,
Desculpe-me, con JavaScript

70
00:03:18,280 --> 00:03:23,240
nós tamén pode especificar a orixe
atributo da etiqueta script

71
00:03:23,240 --> 00:03:25,720
para conectar en JavaScript
separado, para que non

72
00:03:25,720 --> 00:03:27,680
ten que escribir nos
entre as etiquetas de script, nós

73
00:03:27,680 --> 00:03:29,600
pode vincula-lo no uso
que tag script tamén.

74
00:03:29,600 --> 00:03:33,230
E, así como co caso con CSS onde
recomendamos que foi, probablemente,

75
00:03:33,230 --> 00:03:36,090
no seu mellor interese para escribir
seu CSS nun ficheiro separado no caso

76
00:03:36,090 --> 00:03:38,500
necesitará cambia-lo,
do mesmo xeito que recomendamos

77
00:03:38,500 --> 00:03:40,720
que escribe o seu
JavaScript en arquivos separados

78
00:03:40,720 --> 00:03:45,460
e utilizar a fonte de etiquetas de script
asignar a amarrar o seu JavaScript

79
00:03:45,460 --> 00:03:49,520
no seu html, a súa páxina web.

80
00:03:49,520 --> 00:03:52,610
>> Entón variables JavaScript, imos
comezar a falar da sintaxe aquí.

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

82
00:03:53,600 --> 00:03:56,640
porque nós fixemos iso en PHP, polo
iso debe ser moi familiar.

83
00:03:56,640 --> 00:03:59,490
Entón variables en JavaScript son
moi semellante ao PHP variables.

84
00:03:59,490 --> 00:04:03,270
Non hai ningún tipo de especificador, e
cando introduce unha variable,

85
00:04:03,270 --> 00:04:05,070
vostede prefixo coa palabra clave var.

86
00:04:05,070 --> 00:04:07,750
En PHP fariamos algo
así, sinal de dólar x.

87
00:04:07,750 --> 00:04:09,950
Isto é como nós indicada
unha variable, pero non,

88
00:04:09,950 --> 00:04:12,060
non mencionan o tipo
da variable de todo.

89
00:04:12,060 --> 00:04:15,124
Queremos dicir algo como
dólar sinal x é igual a 44 en PHP.

90
00:04:15,124 --> 00:04:17,040
Se estabamos facendo o
mesmo en JavaScript,

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

92
00:04:19,589 --> 00:04:22,780
Entón var é unha especie de medio do camiño
da introdución dunha variable.

93
00:04:22,780 --> 00:04:26,850
Isto é quizais un pouco máis intuitivo
que só variable cifrão.

94
00:04:26,850 --> 00:04:29,080
>> De novo, xa que non hai ningunha
tipos de datos, poderiamos facelo

95
00:04:29,080 --> 00:04:34,490
con calquera tipo de datos, cordas,
calquera outra cousa serían todos var.

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

97
00:04:37,260 --> 00:04:41,640
aínda están dispoñibles, polo que temos que,
else if, else, rede e pregunta

98
00:04:41,640 --> 00:04:42,240
marca de colon.

99
00:04:42,240 --> 00:04:45,890
Cambiar resto tan flexible como
estaba en PHP, pero todo isto é

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

101
00:04:46,930 --> 00:04:49,900
E do mesmo xeito con loops son
os antigos favoritos de tempo,

102
00:04:49,900 --> 00:04:52,700
facer agora, e por aínda dispoñibles para nós.

103
00:04:52,700 --> 00:04:55,880
Entón xa sabemos moito do
tipo básico de JavaScript fundamentos

104
00:04:55,880 --> 00:05:01,800
só en virtude de ter un pouco
de coñecemento agora sobre C e PHP.

105
00:05:01,800 --> 00:05:03,670
>> Que sobre as funcións en JavaScript?

106
00:05:03,670 --> 00:05:08,199
Ben, similar ao PHP cada función é
a palabra chave introducida coa función.

107
00:05:08,199 --> 00:05:10,740
Vostede di función, e entón
comezar a definir a súa función.

108
00:05:10,740 --> 00:05:12,531
¿Que é un pouco diferente
sobre JavaScript,

109
00:05:12,531 --> 00:05:15,700
con todo, é a posibilidade de ter
o que se chama unha función anónima.

110
00:05:15,700 --> 00:05:18,880
Así, pode definir funcións
que non ten un nome.

111
00:05:18,880 --> 00:05:21,222
Isto é algo que
realmente non teña visto antes.

112
00:05:21,222 --> 00:05:23,430
Nós realmente vai utilizar o concepto
dunha función anónima

113
00:05:23,430 --> 00:05:27,880
un pouco máis adiante neste
vídeo, porque vai

114
00:05:27,880 --> 00:05:31,530
facer un pouco máis de sentido en contexto
cando o vemos nunha situación particular

115
00:05:31,530 --> 00:05:33,120
que eu creei aquí.

116
00:05:33,120 --> 00:05:35,710
Pero imos só dar un ollo
co que un simple JavaScript

117
00:05:35,710 --> 00:05:37,850
función pode parecer.

118
00:05:37,850 --> 00:05:40,610
>> Entón eu fun adiante e
abri miña CS50 IDE

119
00:05:40,610 --> 00:05:43,690
e eu xa executado Apache
para comezar a miña carreira servidor.

120
00:05:43,690 --> 00:05:46,800
E eu teño ese ficheiro
aberto chamado home.html.

121
00:05:46,800 --> 00:05:48,330
E eu vou facer zoom un pouco aquí.

122
00:05:48,330 --> 00:05:52,090
E, basicamente, pode ver o
Home.html é só unha morea de botóns.

123
00:05:52,090 --> 00:05:55,291
E eu digo arriba aquí
que esta é a sección JavaScript

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

125
00:05:55,790 --> 00:05:59,490
Polo tanto, hai unha morea de botóns aquí,
pero o que estes botóns realmente facer?

126
00:05:59,490 --> 00:06:03,662
>> Ben, imos dirixir a miña IED,
e eu home.html abrir aquí.

127
00:06:03,662 --> 00:06:05,620
En principio,
aquí é onde eu estou conectando

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

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

130
00:06:08,000 --> 00:06:12,440
Entón, eu teño anonymous.js, clock.js,
Eu estou usando o atributo de orixe

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

132
00:06:14,440 --> 00:06:18,660
Entón eu non teño escrito calquera
JavaScript directamente con esta imaxe,

133
00:06:18,660 --> 00:06:21,790
pero eu tirado en todo o
JavaScript que escribín por separado.

134
00:06:21,790 --> 00:06:24,540
E se rolar para abaixo aquí, este
todos deben ollar un pouco familiarizado

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

136
00:06:27,090 --> 00:06:32,655
Temos aquí tag cabeceira para
funcións e, a continuación, un botón.

137
00:06:32,655 --> 00:06:35,530
Eu teño unha entrada que é un tipo de botón,
e ao parecer cando premer nel,

138
00:06:35,530 --> 00:06:38,130
Vou chamar algúns
funcionar data alerta.

139
00:06:38,130 --> 00:06:41,792
E é así que podemos clasificar de mesturar a
un pouco de JavaScript e HTML.

140
00:06:41,792 --> 00:06:44,500
Realmente xogar moi ben
xuntos, e así, ao parecer, cando

141
00:06:44,500 --> 00:06:48,730
Eu premer neste botón, eu vou
para chamar algunha data alerta función.

142
00:06:48,730 --> 00:06:53,660
E do mesmo xeito que eu teño definido comportamentos
para todos os outros botóns que

143
00:06:53,660 --> 00:06:56,440
están nesta páxina home.html,
que nós imos manter volver

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

145
00:06:59,172 --> 00:07:00,880
Pero imos volver a subir
aquí e bótalle un ollo

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

147
00:07:03,850 --> 00:07:07,370
escribiu que esta primeira función
imos dar un ollo.

148
00:07:07,370 --> 00:07:11,630
Como verás, eu comezo a miña JavaScript
funcionar coa palabra clave función,

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

150
00:07:14,560 --> 00:07:18,710
Dentro alí, eu parecer crear un
nova variable local chamado data actual.

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

152
00:07:21,500 --> 00:07:24,430
E poderiamos entrar en un monte de
detalle sobre o que é unha data,

153
00:07:24,430 --> 00:07:27,060
e realmente é tan JavaScript
grande que non podemos posiblemente

154
00:07:27,060 --> 00:07:28,330
cubrir todo nun vídeo.

155
00:07:28,330 --> 00:07:32,220
Pero basta dicir, que vai
para volver para min un elemento de datos que

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

157
00:07:35,470 --> 00:07:39,100
Estou almacenando que nunha variable que eu son
parecer vai alertar data actual.

158
00:07:39,100 --> 00:07:41,300
>> Ben, o que fai alerta
ollar data actual como?

159
00:07:41,300 --> 00:07:46,460
Imos dar un ollo ao ficheiro en si
parte traseira do da xanela do navegador.

160
00:07:46,460 --> 00:07:49,551
Entón, de novo, este é o botón que eu
ter amarrado a esa función nomeada.

161
00:07:49,551 --> 00:07:51,800
E eu premer nel alí e
mira o que fixo, el advertiu.

162
00:07:51,800 --> 00:07:56,140
Apareceu este tipo de caixa dicindo
me que o tempo actual é, ao parecer,

163
00:07:56,140 --> 00:07:59,370
é 04 de novembro a
10:43:43 pola mañá.

164
00:07:59,370 --> 00:08:02,345
E se eu premer nel de novo, agora
é de uns segundos máis tarde, non?

165
00:08:02,345 --> 00:08:03,720
Entón, iso é todo o que esta función fai.

166
00:08:03,720 --> 00:08:07,670
Cando eu premer neste botón, el
aparece unha mensaxe de alerta para min.

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

168
00:08:13,806 --> 00:08:15,690
Entón non hai realmente
máis para funcións

169
00:08:15,690 --> 00:08:19,110
que é distinto de PHP,
só un pouco de nova sintaxe

170
00:08:19,110 --> 00:08:22,500
que vén co traballo con JavaScript.

171
00:08:22,500 --> 00:08:24,650
>> Arrays en JavaScript son
moi sinxelo.

172
00:08:24,650 --> 00:08:27,200
Para declarar unha matriz, pode utilizar
A sintaxe corchetes

173
00:08:27,200 --> 00:08:30,090
que estamos familiarizados coa dende PHP.

174
00:08:30,090 --> 00:08:33,432
E semellante ao PHP, nós
Tamén pode mesturar tipos de datos.

175
00:08:33,432 --> 00:08:35,140
Polo tanto, este array, ambos
destas matrices faría

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

177
00:08:36,960 --> 00:08:42,500
Un que é todos os enteiros, e que
confúndese diferentes tipos de datos.

178
00:08:42,500 --> 00:08:45,020
>> ¿Que é algo moi diferente
en JavaScript, aínda?

179
00:08:45,020 --> 00:08:47,020
Esa é a noción dun obxecto.

180
00:08:47,020 --> 00:08:50,240
Por iso, é posible que teña oído falar
programación orientada a obxecto.

181
00:08:50,240 --> 00:08:53,370
Nós non facemos unha morea de que en CS50,
pero imos facer un pouco dela

182
00:08:53,370 --> 00:08:55,670
aquí no contexto Javascript.

183
00:08:55,670 --> 00:08:59,100
Agora JavaScript ten a capacidade de
comportarse como unha programación orientada a obxecto

184
00:08:59,100 --> 00:09:02,615
idioma, pero que non é ela propia
exclusivamente orientada a un obxecto

185
00:09:02,615 --> 00:09:03,490
linguaxe de programación.

186
00:09:03,490 --> 00:09:05,281
E iso vén de novo
ao por iso que eu dixen,

187
00:09:05,281 --> 00:09:10,610
pode ser moi reto para aprender
JavaScript como a súa primeira programación

188
00:09:10,610 --> 00:09:13,890
lingua, por que non fai
realmente se encaixan nun paradigma particular.

189
00:09:13,890 --> 00:09:16,430
>> C, en cambio é un
linguaxe de programación funcional.

190
00:09:16,430 --> 00:09:22,270
Se queremos, as funcións son
especie do gran xefe, non?

191
00:09:22,270 --> 00:09:24,410
Eles ditan o que
pasa o resto.

192
00:09:24,410 --> 00:09:26,600
Queremos cambiar variables,
que chamamos funcións.

193
00:09:26,600 --> 00:09:28,220
Nós facemos as cousas de funcións.

194
00:09:28,220 --> 00:09:31,250
Obxectos vez, nunha
linguaxe orientada a obxectos,

195
00:09:31,250 --> 00:09:35,937
obxectos tipo de chegar a ser a estrela e
funcións fan a unha especie de secundario.

196
00:09:35,937 --> 00:09:38,270
Pero o que é un obxecto, o que
é esta noción dun obxecto?

197
00:09:38,270 --> 00:09:40,880
Ben, se iso axuda, pense
sobre el en primeiro ordenar

198
00:09:40,880 --> 00:09:44,540
como unha estrutura de C ou un struct
que aprenden sobre antes.

199
00:09:44,540 --> 00:09:47,430
En C, contén unha estrutura de
un número de campos,

200
00:09:47,430 --> 00:09:51,174
e quizais nós agora pode comezar a
chamar esas propiedades campos.

201
00:09:51,174 --> 00:09:53,590
Pero as propiedades nunca
ir por conta propia, non?

202
00:09:53,590 --> 00:09:56,410
Definir unha estrutura dun coche
así coas dúas seguintes

203
00:09:56,410 --> 00:10:00,750
campos ou propiedades, unha an
enteiro para o ano do coche

204
00:10:00,750 --> 00:10:04,290
e outra un carácter 10
cadea para o modelo do coche,

205
00:10:04,290 --> 00:10:07,150
Podo dicir algo como isto,
Podo declarar unha nova variable

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

207
00:10:10,080 --> 00:10:13,730
E entón eu podo dicir algo
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á ben.

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
pero eu nunca podería só
dicir algo así.

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

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

214
00:10:26,836 --> 00:10:28,210
É unha especie de unha cousa fundamental.

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

216
00:10:32,990 --> 00:10:39,050
son moi similares ás propiedades sendo
fundamental para obxectos JavaScript.

217
00:10:39,050 --> 00:10:42,080
Pero o que os fai
particularmente interesante

218
00:10:42,080 --> 00:10:46,230
é que os obxectos poden ter o que
son chamados métodos, que son realmente

219
00:10:46,230 --> 00:10:50,730
só unha palabra chique para funcións que
son inherentes ao obxecto ben.

220
00:10:50,730 --> 00:10:55,340
Polo tanto, é unha función que só se pode
chamado no contexto dun obxecto.

221
00:10:55,340 --> 00:10:59,200
Só un obxecto que teña definido
esta función dentro da súa,

222
00:10:59,200 --> 00:11:02,020
se pensar sobre un
struct, a función

223
00:11:02,020 --> 00:11:05,720
defínese dentro as que definen
claves da estrutura.

224
00:11:05,720 --> 00:11:07,980
Por iso, só significa algo
á estrutura.

225
00:11:07,980 --> 00:11:10,960
E iso é unha especie do que estamos facendo
aquí con obxectos e métodos.

226
00:11:10,960 --> 00:11:13,580
É basicamente como estamos
definindo unha función que

227
00:11:13,580 --> 00:11:16,670
só ten sentido nun
en particular obxecto, e por iso,

228
00:11:16,670 --> 00:11:19,440
chamada que un método de obxecto.

229
00:11:19,440 --> 00:11:23,180
E nós non pode chamar iso
función independente do obxecto,

230
00:11:23,180 --> 00:11:29,260
así como non podemos dicir ano ou modelo
independente da struct en C.

231
00:11:29,260 --> 00:11:32,300
>> Entón programación funcional
paradigmas algo coma isto.

232
00:11:32,300 --> 00:11:35,450
Función e, a continuación, cando pasa
no obxecto como un parámetro.

233
00:11:35,450 --> 00:11:38,650
Nunha programación orientada a obxecto
linguas, este tipo de recibe

234
00:11:38,650 --> 00:11:43,464
capotou, e queremos pensar
Lo como este, object.function.

235
00:11:43,464 --> 00:11:45,380
Por iso, que tipo de punto
operador de novo implicando

236
00:11:45,380 --> 00:11:49,540
que é algún tipo de propiedade
ou atributo do propio obxecto.

237
00:11:49,540 --> 00:11:53,240
Pero iso é o que un obxecto
linguaxe de programación orientada

238
00:11:53,240 --> 00:11:57,150
pode facer para facer unha función
recorrer a un método, unha vez máis, que

239
00:11:57,150 --> 00:12:00,260
é só unha palabra especial para unha función
que é inherente a un obxecto.

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 así imos comezar a ver algúns dos
isto no contexto Javascript.

242
00:12:09,360 --> 00:12:12,470
>> Tamén pode pensar en un obxecto
como unha especie de matriz asociativa,

243
00:12:12,470 --> 00:12:14,160
que estamos familiarizados coa dende PHP.

244
00:12:14,160 --> 00:12:17,720
Teña en conta que de unha matriz asociativa permite
nós ter pares de valores clave, en vez

245
00:12:17,720 --> 00:12:23,040
de índices 0, un, dous, tres,
etc., como estamos afeitos desde C

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

247
00:12:23,940 --> 00:12:27,472
As matrices de asociación pode mapear
palabras, como no vídeo PHP

248
00:12:27,472 --> 00:12:29,180
que estaban falando sobre
cubertas de pizzas.

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

250
00:12:31,180 --> 00:12:36,670
tivo queixo era unha chave e $ 8,99 foi o
valor, e logo pepperoni era unha clave,

251
00:12:36,670 --> 00:12:39,190
$ 9.99 era un valor, e así por diante.

252
00:12:39,190 --> 00:12:43,300
E así, tamén podemos pensar nun
obxecto tipo de semellante a un asociativa

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

254
00:12:43,840 --> 00:12:47,020
E así esta sintaxe aquí
crearía un novo obxecto

255
00:12:47,020 --> 00:12:50,950
chamado Herbie con dous
propiedades dentro del.

256
00:12:50,950 --> 00:12:57,310
Ano, o que se lle atribúe o valor 1963,
e modelo, que se lle atribúe a cadea

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

258
00:12:58,140 --> 00:13:01,770
>> E teña en conta aquí que eu estou usando
comiñas simples en JavaScript.

259
00:13:01,770 --> 00:13:05,570
Podes usar comiñas simples ou dobres
cando está falando de cordas.

260
00:13:05,570 --> 00:13:07,772
É só convencionalmente
O caso que a maioría das veces

261
00:13:07,772 --> 00:13:10,230
cando está escribindo JavaScript,
acaba de usar comiñas simples.

262
00:13:10,230 --> 00:13:15,050
Pero eu podería usar as comiñas aquí, e
que sería perfectamente ben tamén.

263
00:13:15,050 --> 00:13:17,470
>> Entón lembre-se como en
PHP tivemos esa noción

264
00:13:17,470 --> 00:13:22,730
de un para cada loop que nos permitiría
para repetir todos o valor da clave

265
00:13:22,730 --> 00:13:25,270
pares de un asociativa
matriz, porque

266
00:13:25,270 --> 00:13:29,050
non teñen esa capacidade de iteración
mediante 0, un, dous, tres, catro,

267
00:13:29,050 --> 00:13:30,710
etcétera?

268
00:13:30,710 --> 00:13:35,010
JavaScript ten algo moi semellante,
pero non se chama un para cada loop,

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

270
00:13:38,960 --> 00:13:42,890
Entón, se eu dixo-me que
tanto, a chave var en obxecto,

271
00:13:42,890 --> 00:13:48,670
que é unha especie de semellante a dicir
para cada algo algo.

272
00:13:48,670 --> 00:13:53,850
Pero todo o que eu estou facendo aquí é a iteración
a través de todas as claves de meu obxecto.

273
00:13:53,850 --> 00:13:56,070
E dentro do crespos
cintas alí, eu o faría

274
00:13:56,070 --> 00:14:03,410
usar obxecto de clave entre corchetes para referir-
ao valor nese lugar clave.

275
00:14:03,410 --> 00:14:05,400
>> Alternativamente, hai
aínda outra visión.

276
00:14:05,400 --> 00:14:10,880
Se eu simplemente só se preocupan o
valores, o que podo dicir para a clave de obxecto,

277
00:14:10,880 --> 00:14:12,360
e só usar clave dentro.

278
00:14:12,360 --> 00:14:17,240
Así, para chave var en obxecto, eu teño
para usar obxecto corchetes

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

280
00:14:19,340 --> 00:14:24,580
Para a tecla de var de obxecto, podo
non necesitará empregar clave dentro do loop,

281
00:14:24,580 --> 00:14:29,040
porque eu son só especificamente
falando sobre os valores alí.

282
00:14:29,040 --> 00:14:32,630
>> Entón, imos quizais dea unha
ollar para a diferenza

283
00:14:32,630 --> 00:14:35,670
só para amosar-lle rapidamente
a diferenza entre catro

284
00:14:35,670 --> 00:14:40,730
na e para a de un moi específico
matriz, que temos aquí, semana matriz.

285
00:14:40,730 --> 00:14:43,616
Entón eu teño que atopar unha nova matriz
que Explique sete cordas,

286
00:14:43,616 --> 00:14:46,240
Luns, martes, mércores,
Xoves, venres, sábado, domingo.

287
00:14:46,240 --> 00:14:50,530
E quero agora unha iteración
a través desta matriz,

288
00:14:50,530 --> 00:14:53,090
imprimir determinadas informacións.

289
00:14:53,090 --> 00:14:58,780
Se eu usar un lazo no
para imprimir a información,

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

291
00:15:00,710 --> 00:15:01,710
Ben, imos dar un ollo.

292
00:15:01,710 --> 00:15:05,300
E antes de ir sobre
a miña xanela do navegador,

293
00:15:05,300 --> 00:15:08,090
só sei que
console.log é unha especie de un

294
00:15:08,090 --> 00:15:10,630
forma de facer un F para impresión en JavaScript.

295
00:15:10,630 --> 00:15:12,040
Pero cal é a consola?

296
00:15:12,040 --> 00:15:14,940
Ben, iso é o que imos
para ir dar un ollo agora.

297
00:15:14,940 --> 00:15:16,850
>> OK, entón estamos de volta aquí
na miña xanela do navegador,

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

299
00:15:19,410 --> 00:15:22,290
Unha vez máis, estou só batendo F12
para abrir ferramentas para desenvolvedores.

300
00:15:22,290 --> 00:15:25,670
E teña en conta que aquí no
arriba Eu escollín consola.

301
00:15:25,670 --> 00:15:28,480
Polo tanto, esta é a noción
dun consola de creador,

302
00:15:28,480 --> 00:15:30,500
e que vai permitir
imprimir información para fóra,

303
00:15:30,500 --> 00:15:33,000
como o tipo de terminal, pero
como podes ver un pouco máis tarde,

304
00:15:33,000 --> 00:15:37,720
nós tamén pode introducir información en
para interactuar coa web.

305
00:15:37,720 --> 00:15:42,320
Eu estou indo a facer zoom e un pouco aquí,
e eu estou indo agora, prema a proba.

306
00:15:42,320 --> 00:15:45,230
E catro en test-- eu non vou
amosar-lle o código para el agora,

307
00:15:45,230 --> 00:15:47,479
pero vai obtelo se
descargar o código fonte que

308
00:15:47,479 --> 00:15:50,380
está asociado a este video--
é só iso no lazo

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

310
00:15:52,610 --> 00:15:54,810
>> Entón, eu vou clic que
botón, e aquí,

311
00:15:54,810 --> 00:15:58,440
aquí está o que foi impreso en
consola, 0, un, dous, tres, catro, cinco,

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

313
00:15:58,940 --> 00:16:02,490
Non imprimir a información
esas localizacións dentro da matriz,

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

315
00:16:05,180 --> 00:16:10,670
E dentro do corpo do lazo, I
só impreso chave non clave do obxecto.

316
00:16:10,670 --> 00:16:18,600
Pero se eu agora limpar o meu consola, e eu
para cambiar a proba, e pola proba de catro

317
00:16:18,600 --> 00:16:22,500
Eu digo que eu uso para malla
en vez e imprimir clave,

318
00:16:22,500 --> 00:16:28,079
se eu premer en que, agora estou tendo o
elementos reais dentro do meu obxecto

319
00:16:28,079 --> 00:16:29,120
ou miña matriz neste caso.

320
00:16:29,120 --> 00:16:31,760
Miña serie de días de semana.

321
00:16:31,760 --> 00:16:33,480
Eu imprimir luns
Martes, mércores.

322
00:16:33,480 --> 00:16:36,930
Entón esa é a diferenza entre
un no loop, que imprime

323
00:16:36,930 --> 00:16:43,410
só as chaves se só usa clave
dentro do corpo do lazo,

324
00:16:43,410 --> 00:16:46,850
e un para de lazo, que imprime
os valores se usa só

325
00:16:46,850 --> 00:16:48,870
clave dentro do corpo do ciclo.

326
00:16:48,870 --> 00:16:52,380
>> Todo ben, como é que imos agora comezar a
concatenar cadeas de caracteres e quizais mesturar

327
00:16:52,380 --> 00:16:57,220
algunhas variables con interpolación
como fomos capaces de facer en PHP?

328
00:16:57,220 --> 00:16:59,410
Ben, nós estamos moi familiarizados
con iso dende PHP.

329
00:16:59,410 --> 00:17:04,109
É deste xeito que o faría usando o
operador punto para concatenar cadeas.

330
00:17:04,109 --> 00:17:06,260
En JavaScript, aínda que,
nós realmente usar algo

331
00:17:06,260 --> 00:17:09,290
chamado operador plus, que
é quizais ata un pouco máis

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

333
00:17:10,470 --> 00:17:12,609
Estamos engadindo unha morea
de cordas xuntos.

334
00:17:12,609 --> 00:17:14,520
Entón, imos volver
e ver que esta

335
00:17:14,520 --> 00:17:18,693
imprimirase se estamos tentando imprimir
toda a información a semana matriz.

336
00:17:18,693 --> 00:17:20,859
Todo ben, entón so aquí
baixo concatenación de cadeas,

337
00:17:20,859 --> 00:17:24,822
Teño dúas opcións, construción corda
V1 e V2, a continuación, edificio secuencia.

338
00:17:24,822 --> 00:17:26,530
E veremos porque
Debe V2 nun segundo.

339
00:17:26,530 --> 00:17:28,610
Pero eu vou facer clic en
corda edificio V1, que

340
00:17:28,610 --> 00:17:30,360
é o código nós
só un ollo,

341
00:17:30,360 --> 00:17:32,980
o console.log con todo triunfos.

342
00:17:32,980 --> 00:17:35,910
A ver se isto supoñer a impresión
o que esperamos.

343
00:17:35,910 --> 00:17:39,939
>> Luns é o día número 01 da semana,
Martes é o día número 11 da semana.

344
00:17:39,939 --> 00:17:41,730
Ben, o que eu estaba tentando
facer houbo obter

345
00:17:41,730 --> 00:17:46,280
Lo para imprimir luns é o día número
un, martes é o día número dous.

346
00:17:46,280 --> 00:17:50,140
Pero parece que eu son
sempre imprimir un.

347
00:17:50,140 --> 00:17:51,260
Ben, por que isto?

348
00:17:51,260 --> 00:17:55,600
Ben, ao parecer, ter outro ollar
neste pequeno fragmento de código aquí.

349
00:17:55,600 --> 00:18:00,160
Teña en conta que estamos a usar a máis
operador en dous contextos diferentes.

350
00:18:00,160 --> 00:18:03,221
>> E aquí é onde quizais as cousas
que tipo de estado que dicir,

351
00:18:03,221 --> 00:18:03,970
Oh, é tan grande.

352
00:18:03,970 --> 00:18:05,910
Non xestione tipos de datos máis.

353
00:18:05,910 --> 00:18:08,220
Pero aquí é onde o feito
que perdemos tipos de datos

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

355
00:18:10,960 --> 00:18:16,260
Agora que o operador é utilizado ademais
concatenar cadeas de caracteres e engadir números

356
00:18:16,260 --> 00:18:19,550
xuntos, JavaScript ten
para facer o mellor palpite

357
00:18:19,550 --> 00:18:22,030
sobre o que quero que faga para min.

358
00:18:22,030 --> 00:18:23,900
E neste caso, el adiviñar mal.

359
00:18:23,900 --> 00:18:29,340
É día só concatenada, o que sería
0, un, dous, tres, catro, cinco, ou seis,

360
00:18:29,340 --> 00:18:32,060
e el só concatenado
e, a continuación, que un concatenados.

361
00:18:32,060 --> 00:18:35,020
Non chegou a engadila los xuntos.

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

363
00:18:37,320 --> 00:18:39,196
que abstrai
esa noción de tipos,

364
00:18:39,196 --> 00:18:40,820
non ten que tratar con isto.

365
00:18:40,820 --> 00:18:43,600
Eles aínda teñen tipos baixo o capó.

366
00:18:43,600 --> 00:18:46,780
E podemos, en situacións
así, aproveitar este feito

367
00:18:46,780 --> 00:18:49,240
dicindo algo
como quizais esta, que

368
00:18:49,240 --> 00:18:53,210
Está dicindo JavaScript, por
forma, tratar isto como un número enteiro,

369
00:18:53,210 --> 00:18:57,100
non trata-lo como unha cadea, mesmo
aínda estamos mesturando cordas

370
00:18:57,100 --> 00:18:58,940
e enteiros aquí.

371
00:18:58,940 --> 00:19:02,204
>> É só unha desas cousas
que parece tan grande no contexto

372
00:19:02,204 --> 00:19:04,120
que non ten por
xestionar tipos máis,

373
00:19:04,120 --> 00:19:05,828
pero ás veces
correr nunha situación

374
00:19:05,828 --> 00:19:09,110
exactamente como este, onde o feito de que
non ten control sobre os tipos

375
00:19:09,110 --> 00:19:11,220
pode volver contra ti
se non ten coidado.

376
00:19:11,220 --> 00:19:18,285
E así se nós pop ao IDE, eu son
vai limpar a miña consola de novo,

377
00:19:18,285 --> 00:19:20,660
e eu estou indo a facer clic cadea
edificio versión dous, que

378
00:19:20,660 --> 00:19:23,052
é onde eu usar esa función de análise int.

379
00:19:23,052 --> 00:19:25,260
Agora que está imprimindo
información que eu estou esperando.

380
00:19:25,260 --> 00:19:29,330
Número un día de luns, terça-
é o número de dous días, e así por diante.

381
00:19:29,330 --> 00:19:31,170
>> Entón imos falar sobre as funcións de novo.

382
00:19:31,170 --> 00:19:34,790
Eu prometín que ía falar anónimo
funcións, 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ón, antes de facelo, imos falar de novo
sobre matrices para só un segundo.

385
00:19:39,980 --> 00:19:42,120
Así, as matrices son unha especial
caso dun obxecto.

386
00:19:42,120 --> 00:19:45,180
En realidade, todo en
JavaScript é en realidade un obxecto.

387
00:19:45,180 --> 00:19:47,190
Así, as funcións son un
caso especial dun obxecto,

388
00:19:47,190 --> 00:19:49,770
enteiros son unha especial
caso dun obxecto,

389
00:19:49,770 --> 00:19:52,152
pero especialmente matrices
ten un número de métodos.

390
00:19:52,152 --> 00:19:55,110
Teña en conta que, porque son obxectos,
que poden ter propiedades e métodos.

391
00:19:55,110 --> 00:19:58,600
Teñen un certo número de métodos que
pode aplicarse a estes obxectos.

392
00:19:58,600 --> 00:20:01,197
Hai un método chamado
tamaño, array.size,

393
00:20:01,197 --> 00:20:03,030
que pode voltar ao
vostede como podería esperar

394
00:20:03,030 --> 00:20:05,120
o número de elementos na súa matriz.

395
00:20:05,120 --> 00:20:08,480
Array.pop, tipo de como
nosa noción de estalo fóra

396
00:20:08,480 --> 00:20:11,110
dunha pila, se recorda
do noso vídeo pilas,

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

398
00:20:13,810 --> 00:20:17,110
Array.push engade un novo elemento
ao final dunha matriz.

399
00:20:17,110 --> 00:20:20,910
Array.shift é unha especie de
como DQ, el emendas para fóra

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

401
00:20:23,610 --> 00:20:27,549
>> Pero hai tamén outro especial
método dun array chamado mapa.

402
00:20:27,549 --> 00:20:29,340
E esta é unha especie de
concepto interesante.

403
00:20:29,340 --> 00:20:30,930
Entón, cal é a idea dun mapa?

404
00:20:30,930 --> 00:20:33,880
Vai realmente ver iso
en varias linguas,

405
00:20:33,880 --> 00:20:38,550
e non estamos falando dun
tipo de cartógrafos mapa aquí,

406
00:20:38,550 --> 00:20:41,480
estamos falando dunha función de cartografía.

407
00:20:41,480 --> 00:20:44,110
No contexto que estamos
falando aquí, un mapa

408
00:20:44,110 --> 00:20:47,950
que é unha operación especial
Pode realizar nun array

409
00:20:47,950 --> 00:20:51,630
para aplicar unha determinada función
para cada elemento desta matriz.

410
00:20:51,630 --> 00:20:55,190
e por iso que temos que dicir en
Neste caso, quizais Array.map,

411
00:20:55,190 --> 00:21:00,330
e dentro del, nós estamos pasando
en mapa é unha función que queremos

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

413
00:21:02,430 --> 00:21:07,299
Entón, é unha especie de análogo a usar
un loop para iterado sobre cada elemento

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

415
00:21:09,340 --> 00:21:14,830
só JavaScript ten este construído en
noción de cartografía que se poden aplicar.

416
00:21:14,830 --> 00:21:19,700
E este é un gran contexto para
falar dunha función anónima.

417
00:21:19,700 --> 00:21:22,370
>> Entón, digamos que temos
este array de enteiros.

418
00:21:22,370 --> 00:21:25,370
Chama-se N.º, e ten cinco
as cousas nel, un, dous, tres, catro,

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

420
00:21:26,410 --> 00:21:30,620
Agora quero mapear algúns
función desta matriz.

421
00:21:30,620 --> 00:21:34,337
Eu quero ter unha función de aplicar
para cada elemento da matriz.

422
00:21:34,337 --> 00:21:37,420
Ben, imos dicir que o que quero
facer é só dobrar todos os elementos.

423
00:21:37,420 --> 00:21:42,520
O que eu podería facer é só usar un loop
para var I é igual a 0, I é inferior a

424
00:21:42,520 --> 00:21:47,390
ou igual a 4, eu, máis, máis, e
logo dobrar cada número único.

425
00:21:47,390 --> 00:21:49,580
Pero eu tamén podo facer algo coma isto.

426
00:21:49,580 --> 00:21:53,420
Podo dicir N.º era antigamente
un, dous, tres, catro, cinco,

427
00:21:53,420 --> 00:21:58,310
Agora, porén, me gustaría que
aplicar un mapeamento sobre esta matriz

428
00:21:58,310 --> 00:22:00,400
onde me gustaría que
para dobrar cada número.

429
00:22:00,400 --> 00:22:02,540
E iso é
o que está pasando aquí.

430
00:22:02,540 --> 00:22:06,870
Pero teña en conta o que eu estou pasando
como argumento para o mapa.

431
00:22:06,870 --> 00:22:09,080
Esta é unha función anónima.

432
00:22:09,080 --> 00:22:11,140
E repare que eu non lle deses
esta función un nome,

433
00:22:11,140 --> 00:22:13,290
Só dei-lle unha lista de parámetros.

434
00:22:13,290 --> 00:22:16,370
E así, este é un exemplo
dunha función anónima.

435
00:22:16,370 --> 00:22:21,270
>> Nós xeralmente non chamaría tanto
función fóra do contexto do mapa.

436
00:22:21,270 --> 00:22:24,110
Estamos definíndoa como un parámetro
para mapear, e así nós realmente non

437
00:22:24,110 --> 00:22:27,910
Debe ter un nome para el, o
único que preocupa é o mapa

438
00:22:27,910 --> 00:22:30,339
e defínese dereita
dentro do mapa.

439
00:22:30,339 --> 00:22:31,880
E polo que esta é unha función anónima.

440
00:22:31,880 --> 00:22:34,680
Non fomos capaces
para facelo antes.

441
00:22:34,680 --> 00:22:38,400
Mapa algunha función que
acepta un parámetro, nun,

442
00:22:38,400 --> 00:22:41,890
e que esa función fai
é retorno Nun veces 2.

443
00:22:41,890 --> 00:22:45,330
E así, despois desta
cartografía foi aplicada,

444
00:22:45,330 --> 00:22:50,090
este é agora o que N.º looks
como, dous, catro, seis, oito, 10.

445
00:22:50,090 --> 00:22:52,090
E nós imos estalar sobre a miña
xanela do navegador e só

446
00:22:52,090 --> 00:22:55,240
bótalle un ollo neste
moi rapidamente tamén.

447
00:22:55,240 --> 00:22:58,000
>> Entón, eu teño un outro botón aquí
na miña páxina de inicio chamada dobre.

448
00:22:58,000 --> 00:23:03,570
E cando eu premer dúas veces, e di-
me antes de que fose un, dous, tres, catro,

449
00:23:03,570 --> 00:23:07,250
cinco tras dous, catro, seis, oito, 10.

450
00:23:07,250 --> 00:23:11,930
E se eu volver e dobre clic
unha vez máis, dúas, catro, seis, oito, 10.

451
00:23:11,930 --> 00:23:17,400
E, despois, catro,
oito, 12, 16, e, a continuación, 20.

452
00:23:17,400 --> 00:23:20,440
E o que eu estou facendo nesta función?

453
00:23:20,440 --> 00:23:25,210
Ben, se nós só pop para IDE, e
Eu puxo a miña función anónima, aquí

454
00:23:25,210 --> 00:23:28,780
na liña de sete a 13 anos, eu son
facendo un pouco de traballo elaborado aquí,

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

456
00:23:32,240 --> 00:23:36,580
A continuación, na liña 16, 17,
e 18, non é o meu mapa.

457
00:23:36,580 --> 00:23:40,930
Aquí é onde eu estou aplicando esta duplicación
función de cada elemento.

458
00:23:40,930 --> 00:23:43,530
E, a continuación, un pouco máis abaixo,
Eu só estou facendo o mesmo

459
00:23:43,530 --> 00:23:46,640
Eu estaba facendo antes, só que agora eu son
imprimir o contido da matriz

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

461
00:23:48,167 --> 00:23:50,500
Pero todo o que eu teño feito aquí é
non necesitará empregar unha función anónima

462
00:23:50,500 --> 00:23:53,640
para mapear a través dunha matriz enteira.

463
00:23:53,640 --> 00:23:58,466
>> Entón, unha gran tema para falar en
JavaScript é a noción de un evento.

464
00:23:58,466 --> 00:24:01,590
Un evento é algo que simplemente pasa
cando un usuario interactúa co seu web

465
00:24:01,590 --> 00:24:04,715
A páxina, entón quizais eles prema en algo,
ou que a páxina é rematar de cargar,

466
00:24:04,715 --> 00:24:07,200
ou que cambiaron
rato sobre algo,

467
00:24:07,200 --> 00:24:09,290
ou que escribiu algo
nun campo de entrada.

468
00:24:09,290 --> 00:24:14,260
Todas estas cousas son eventos
que están ocorrendo na nosa páxina web.

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

470
00:24:17,460 --> 00:24:21,760
chamado un manipulador de eventos, que
é unha función de retorno de chamada que

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

472
00:24:23,329 --> 00:24:24,620
E o que é unha función de retorno?

473
00:24:24,620 --> 00:24:27,328
Ben, é xeralmente só un
nome para unha función anónima.

474
00:24:27,328 --> 00:24:30,170
É unha función que
responde a un evento.

475
00:24:30,170 --> 00:24:34,130
E é aquí onde chegamos á
idea de certas funcións de conexión

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

477
00:24:38,060 --> 00:24:41,420
A maioría dos elementos HTML teñen
apoio para un atributo

478
00:24:41,420 --> 00:24:45,170
que non falamos no html
video de algo así como no prema

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

480
00:24:50,540 --> 00:24:53,120
que pode entón escribir funcións
que lidan con estes eventos

481
00:24:53,120 --> 00:24:56,090
cando estes eventos
ocorrer na súa páxina web.

482
00:24:56,090 --> 00:24:59,170
>> E quizais por iso o seu html
é algo así.

483
00:24:59,170 --> 00:25:02,240
E eu teño dous botóns aquí,
botón e un botón de dous,

484
00:25:02,240 --> 00:25:04,620
e aquí eu teño actualmente
nada definido,

485
00:25:04,620 --> 00:25:11,170
pero este é o lugar onde o atributo en
clic é aparentemente parte da miña tag html.

486
00:25:11,170 --> 00:25:15,220
Entón, ao parecer, cando definir o que é
pasando dentro dese atributo,

487
00:25:15,220 --> 00:25:18,590
que vai haber algún JavaScript
función que responde ao evento

488
00:25:18,590 --> 00:25:24,360
presuntamente de premer en
botón de un ou dous botóns.

489
00:25:24,360 --> 00:25:28,580
>> O que é legal sobre iso é que nós
pode escribir un manipulador de eventos xenérico.

490
00:25:28,580 --> 00:25:32,370
E este evento vai Handler
crear un obxecto de evento.

491
00:25:32,370 --> 00:25:37,000
E o obxecto de evento vai dicir
cal dos dous botóns foi premendo.

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

493
00:25:38,064 --> 00:25:39,730
Ben, pode ser algo así.

494
00:25:39,730 --> 00:25:44,860
Entón, imos primeiro definir nosos botóns
para ter unha resposta de chamada de retorno para o

495
00:25:44,860 --> 00:25:47,470
función que será chamada
cando o botón é premendo,

496
00:25:47,470 --> 00:25:49,520
imos chama evento nome de alerta.

497
00:25:49,520 --> 00:25:53,320
E teña en conta en calquera caso estamos
pasando neste parámetro evento.

498
00:25:53,320 --> 00:25:55,460
Entón, nós chamamos esta función
ou cando esta función

499
00:25:55,460 --> 00:26:00,330
é accionado polo evento a suceder,
que vai crear este obxecto de evento

500
00:26:00,330 --> 00:26:03,300
e pasalo como un
parámetro para advertir nome.

501
00:26:03,300 --> 00:26:07,270
E que é obxecto de evento
vai conter información

502
00:26:07,270 --> 00:26:09,800
sobre cal botón foi premendo.

503
00:26:09,800 --> 00:26:11,580
E como fai iso?

504
00:26:11,580 --> 00:26:13,654
Ben, pode ser algo así.

505
00:26:13,654 --> 00:26:15,570
Entón, agora na miña separado
Arquivo JavaScript, eu podería

506
00:26:15,570 --> 00:26:17,420
ten que atopar este
función nome de alerta, que

507
00:26:17,420 --> 00:26:19,500
novo acepta que parámetro de evento.

508
00:26:19,500 --> 00:26:24,640
E, a continuación, aquí é onde eu estou detectando
cal botón foi accionado,

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

510
00:26:28,100 --> 00:26:33,150
Cal foi a fonte que creou
este obxecto de evento que foi transmitido?

511
00:26:33,150 --> 00:26:36,390
Foi un botón ou era botón dous?

512
00:26:36,390 --> 00:26:40,710
>> E entón aquí todo o que eu estou facendo é
imprimir trigger.innerhtml.

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

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

515
00:26:45,940 --> 00:26:48,830
Isto só acontece se nós saltamos
volver unha segunda, que sería

516
00:26:48,830 --> 00:26:51,670
ser o que hai entre estas etiquetas de botón.

517
00:26:51,670 --> 00:26:54,150
Será botón ou un botón de dous.

518
00:26:54,150 --> 00:26:57,320
E imos dar un ollo
como iso sería manipulador de eventos

519
00:26:57,320 --> 00:27:01,080
mirar se tivésemos lo funcionando na práctica.

520
00:27:01,080 --> 00:27:03,850
>> Entón, primeiro de todo, ten
abriron events.js,

521
00:27:03,850 --> 00:27:06,517
que é o ficheiro JavaScript onde
Teño definido esta función.

522
00:27:06,517 --> 00:27:08,558
E como se pode ver, é
moi bonito o que

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

524
00:27:10,230 --> 00:27:14,890
E eu vou pasar ao
páxina principal que estamos a usar.

525
00:27:14,890 --> 00:27:17,660
E eu teño aquí botón
un e dous botóns.

526
00:27:17,660 --> 00:27:19,820
E eu vou prema o botón un.

527
00:27:19,820 --> 00:27:23,930
Premeu nun botón, se
pode ver aquí no alerta.

528
00:27:23,930 --> 00:27:25,810
Aceptar.

529
00:27:25,810 --> 00:27:28,980
Preme o botón dous,
premendo no botón dous.

530
00:27:28,980 --> 00:27:32,150
>> Así, ambos os botóns teñen a
mesmo chamada de función, non?

531
00:27:32,150 --> 00:27:35,840
Ambos eran nome de alerta
evento, pero este obxecto de evento

532
00:27:35,840 --> 00:27:41,900
que é creada cando prememos
ela dinos cal botón foi premendo.

533
00:27:41,900 --> 00:27:44,650
Non temos que escribir dous separados
funcións ou xestionar ter

534
00:27:44,650 --> 00:27:46,470
para pasar calquera información adicional.

535
00:27:46,470 --> 00:27:48,220
Estamos só contando con
o que vai JavaScript

536
00:27:48,220 --> 00:27:53,772
facer por nós, que é o de crear ese
tipo de evento obxecto no noso nome.

537
00:27:53,772 --> 00:27:56,730
Hai moito máis que a JavaScript
o que nós Cubrimos neste vídeo,

538
00:27:56,730 --> 00:27:58,521
pero tendo estes
fundamental que chegar

539
00:27:58,521 --> 00:28:00,690
un longo formas de
todo o que vai aprender

540
00:28:00,690 --> 00:28:04,030
Debe saber sobre este
linguaxe interesante.

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

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

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