1
00:00:00,000 --> 00:00:03,840
>> [REPRODUCCIÓN DE MÚSICA]

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

3
00:00:05,770 --> 00:00:08,690
>> DOUG LLOYD: Así que por ahora somos viejos
profesionales en programación web, ¿no?

4
00:00:08,690 --> 00:00:12,140
Y hemos cubierto varios
idiomas en videos individuales.

5
00:00:12,140 --> 00:00:14,690
Y ahora vamos a hacer una más, JavaScript.

6
00:00:14,690 --> 00:00:17,370
>> Primero las buenas noticias, JavaScript
es una de programación moderno

7
00:00:17,370 --> 00:00:21,410
lenguaje mucho como PHP cuya
sintaxis se deriva de C,

8
00:00:21,410 --> 00:00:22,830
así que es un buen lugar para empezar.

9
00:00:22,830 --> 00:00:25,880
Es casi tan antigua como PHP, así,
habiendo sido de alrededor de unos 20 años.

10
00:00:25,880 --> 00:00:28,600
Fue inventado en torno
al mismo tiempo que PHP.

11
00:00:28,600 --> 00:00:32,240
Y JavaScript es en realidad bastante
fundamental para la experiencia del usuario

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

13
00:00:32,740 --> 00:00:34,448
De hecho, hay
tres lenguas que

14
00:00:34,448 --> 00:00:38,480
diría especie de compensar la
la experiencia del usuario de interactuar

15
00:00:38,480 --> 00:00:42,650
con el sitio web, html,
CSS y JavaScript.

16
00:00:42,650 --> 00:00:46,030
Y ahora vamos a hablar un
poco acerca de JavaScript.

17
00:00:46,030 --> 00:00:50,301
>> La mala noticia, sin embargo, con JavaScript es
que establece un montón de reglas para sí mismo,

18
00:00:50,301 --> 00:00:51,300
y luego se las rompe.

19
00:00:51,300 --> 00:00:54,010
Y JavaScript puede ser realidad
tipo de reto de aprender,

20
00:00:54,010 --> 00:00:57,000
porque es a diferencia de C y
PHP, que son muy estructurado

21
00:00:57,000 --> 00:01:00,270
y tienen reglas muy rígidas
de cómo las cosas pueden funcionar.

22
00:01:00,270 --> 00:01:03,690
JavaScript tiene clase
de hecho tan flexibles

23
00:01:03,690 --> 00:01:06,650
que tal vez las cosas no van a
trabajar de la manera que esperamos que,

24
00:01:06,650 --> 00:01:09,830
y tal vez realmente no podemos aprender
nuestro primer lenguaje de programación

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

26
00:01:10,769 --> 00:01:12,810
Así que tal vez ya no lo hace
fijado ninguna norma,

27
00:01:12,810 --> 00:01:15,754
y en realidad no
reforzar los buenos hábitos de codificación.

28
00:01:15,754 --> 00:01:18,170
Pero ahora que hemos desarrollado con suerte
algunos hábitos buenos de codificación,

29
00:01:18,170 --> 00:01:21,470
y así podemos empezar a incursionar
en JavaScript un poco.

30
00:01:21,470 --> 00:01:25,750
>> Para escribir JavaScript, similar a la apertura
un archivo C con una extensión C dot

31
00:01:25,750 --> 00:01:29,770
o un archivo PHP con una extensión de punto PHP,
todo lo que necesitamos hacer es abrir un archivo

32
00:01:29,770 --> 00:01:31,764
con la extensión de archivo del punto js.

33
00:01:31,764 --> 00:01:34,430
No necesita tener ningún especial
delimitadores como lo hicimos en PHP.

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

35
00:01:36,750 --> 00:01:40,300
que estamos acostumbrados de eso, el camino
le decimos a nuestro navegador que lo que tenemos es

36
00:01:40,300 --> 00:01:43,502
JavaScript es mediante la inclusión de
en una etiqueta html,

37
00:01:43,502 --> 00:01:46,210
y vamos a ver un poco acerca de
cómo hacer eso en un momento.

38
00:01:46,210 --> 00:01:48,210
>> La otra cosa que hace
JavaScript diferente,

39
00:01:48,210 --> 00:01:50,580
sin embargo, es que se ejecuta en el cliente.

40
00:01:50,580 --> 00:01:53,430
Así que recordar con PHP que
nunca podríamos ver realmente

41
00:01:53,430 --> 00:01:57,041
el PHP que subrayó un sitio web.

42
00:01:57,041 --> 00:01:59,040
Si alguna vez vieron The
fuente de la página, sólo lo haría

43
00:01:59,040 --> 00:02:02,830
ver el html que era
generada por que PHP.

44
00:02:02,830 --> 00:02:04,900
Pero JavaScript se ejecuta en el cliente.

45
00:02:04,900 --> 00:02:06,710
Tienes JavaScript se ejecuta en su computadora.

46
00:02:06,710 --> 00:02:09,050
Y es por eso que usted puede hacer
cosas como añadir bloqueadores.

47
00:02:09,050 --> 00:02:09,550
¿Correcto?

48
00:02:09,550 --> 00:02:12,704
Bloqueo anuncio se hace generalmente por
matando a todo el Javascript

49
00:02:12,704 --> 00:02:14,370
que se ejecuta en un sitio web en particular.

50
00:02:14,370 --> 00:02:19,000
Y debido a que tendría que
ejecutar en el lado del cliente de la máquina,

51
00:02:19,000 --> 00:02:21,910
sólo puede detener la
JavaScript para funcionar por completo.

52
00:02:21,910 --> 00:02:27,030
Eso también significa que cuando se utiliza
un sitio web que incluye JavaScript,

53
00:02:27,030 --> 00:02:32,450
usted tiene que enviar el código JavaScript
código como parte de su respuesta http

54
00:02:32,450 --> 00:02:34,159
al cliente cuando lo soliciten.

55
00:02:34,159 --> 00:02:35,950
Y por lo que no podría
querer usar JavaScript

56
00:02:35,950 --> 00:02:38,395
para hacer cosas muy sensibles
al igual que la información que pasa

57
00:02:38,395 --> 00:02:41,020
acerca de las contraseñas de los usuarios hacia atrás y
a otro, porque son en realidad

58
00:02:41,020 --> 00:02:45,610
va a recibir todo el código fuente,
no sólo el HTML que se genera,

59
00:02:45,610 --> 00:02:49,030
como sería el caso con, por ejemplo PHP.

60
00:02:49,030 --> 00:02:51,620
>> Entonces, ¿cómo incluimos JavaScript
en nuestro html para empezar?

61
00:02:51,620 --> 00:02:54,520
Bueno, similar a CSS, en realidad,
es una especie de cómo lo hacemos aquí.

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

63
00:02:56,190 --> 00:03:00,760
Y dentro de esas etiquetas de estilo,
podemos definir una hoja de estilos CSS.

64
00:03:00,760 --> 00:03:03,450
Del mismo modo con JavaScript
podemos abrir etiquetas de script,

65
00:03:03,450 --> 00:03:06,660
otra etiqueta html que no lo hicimos
hablar en nuestro video html,

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

67
00:03:09,720 --> 00:03:13,960
También, sin embargo, como CSS, que
podría vincular en las afueras archivos CSS

68
00:03:13,960 --> 00:03:15,900
y tirar de ellos en nuestro programa de esa manera.

69
00:03:15,900 --> 00:03:18,280
Con CSS también puede,
perdón, con Javascript

70
00:03:18,280 --> 00:03:23,240
también podemos especificar el origen
atributo de la etiqueta de script

71
00:03:23,240 --> 00:03:25,720
para enlazar en JavaScript
por separado, por lo que no lo hace

72
00:03:25,720 --> 00:03:27,680
tiene que escribirlo en
entre etiquetas de script, que

73
00:03:27,680 --> 00:03:29,600
puede vincularlo en el uso de
que etiqueta script también.

74
00:03:29,600 --> 00:03:33,230
Y al igual que con el caso de la CSS, donde
recomendamos que probablemente era

75
00:03:33,230 --> 00:03:36,090
en su mejor interés para escribir
tu CSS en un archivo separado en el caso

76
00:03:36,090 --> 00:03:38,500
que necesita para cambiarlo,
igualmente hacemos recomendamos

77
00:03:38,500 --> 00:03:40,720
que escriba su
JavaScript en archivos separados

78
00:03:40,720 --> 00:03:45,460
y el uso de la fuente de etiquetas de script
atribuir a atar su JavaScript

79
00:03:45,460 --> 00:03:49,520
en su html, su página web.

80
00:03:49,520 --> 00:03:52,610
>> Así las variables de JavaScript, vamos a
empezar a hablar de la sintaxis aquí.

81
00:03:52,610 --> 00:03:53,600
Y vamos a ir a través
este tipo de forma rápida,

82
00:03:53,600 --> 00:03:56,640
porque hemos hecho esto en PHP, por lo que
todo esto debe ser bastante familiar.

83
00:03:56,640 --> 00:03:59,490
Así variables en JavaScript son
muy similar a PHP variables.

84
00:03:59,490 --> 00:04:03,270
No hay especificador de tipo, y
cuando se introduce una variable,

85
00:04:03,270 --> 00:04:05,070
el prefijo con la palabra clave var.

86
00:04:05,070 --> 00:04:07,750
En PHP que íbamos a hacer algo
así, el signo de dólar x.

87
00:04:07,750 --> 00:04:09,950
Así es como hemos indicado
una variable, pero no,

88
00:04:09,950 --> 00:04:12,060
no mencionan el tipo
de la variable en absoluto.

89
00:04:12,060 --> 00:04:15,124
Nos gustaría decir algo como
signo de dólar x es igual a 44 en PHP.

90
00:04:15,124 --> 00:04:17,040
Si hacíamos el
lo mismo en JavaScript,

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

92
00:04:19,589 --> 00:04:22,780
Así var es una especie de camino
de introducir una variable.

93
00:04:22,780 --> 00:04:26,850
Eso es tal vez un poco más intuitivo
que sólo la variable signo de dólar.

94
00:04:26,850 --> 00:04:29,080
>> Una vez más, ya que no hay
tipos de datos, podríamos hacer esto

95
00:04:29,080 --> 00:04:34,490
con cualquier tipo de datos, secuencias,
cualquier otra cosa sería todo ser var.

96
00:04:34,490 --> 00:04:37,260
Condicionales, todo nuestro
viejos amigos de C y PHP

97
00:04:37,260 --> 00:04:41,640
todavía están disponibles, por lo que tenemos si,
else if, else, switch y pregunta

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

99
00:04:42,240 --> 00:04:45,890
Interruptor restante tan flexible como
estaba en PHP, pero todo esto que estás

100
00:04:45,890 --> 00:04:46,930
conoce a estas alturas.

101
00:04:46,930 --> 00:04:49,900
Y de manera similar con bucles son
los antiguos favoritos de tiempo,

102
00:04:49,900 --> 00:04:52,700
hacer tiempo, y por seguir a nuestra disposición.

103
00:04:52,700 --> 00:04:55,880
Así que ya sabemos mucho del
especie JavaScript básico de fundamentos

104
00:04:55,880 --> 00:05:01,800
por el solo hecho de tener un poco
del conocimiento ahora sobre C y PHP.

105
00:05:01,800 --> 00:05:03,670
>> ¿Qué pasa con las funciones en JavaScript?

106
00:05:03,670 --> 00:05:08,199
Bueno, similar a PHP cada función es
introducida con la palabra clave function.

107
00:05:08,199 --> 00:05:10,740
Usted dice que la función y, a continuación
comenzar a definir su función.

108
00:05:10,740 --> 00:05:12,531
¿Qué es un poco diferente
acerca de JavaScript,

109
00:05:12,531 --> 00:05:15,700
sin embargo, es la capacidad de tener
lo que se llama una función anónima.

110
00:05:15,700 --> 00:05:18,880
Así que usted puede definir funciones
que no tienen un nombre.

111
00:05:18,880 --> 00:05:21,222
Esto es algo que
realmente no han visto antes.

112
00:05:21,222 --> 00:05:23,430
Realmente Usaremos el concepto
de una función anónima

113
00:05:23,430 --> 00:05:27,880
un poco más adelante en este
video, porque va a

114
00:05:27,880 --> 00:05:31,530
hacer un poco más de sentido en su contexto
cuando lo vemos en una situación particular

115
00:05:31,530 --> 00:05:33,120
que he Construí aquí.

116
00:05:33,120 --> 00:05:35,710
Pero vamos a echar un vistazo
en lo que es una sencilla JavaScript

117
00:05:35,710 --> 00:05:37,850
función podría ser similar.

118
00:05:37,850 --> 00:05:40,610
>> Así que me he ido por delante y
abierto mi CS50 IDE

119
00:05:40,610 --> 00:05:43,690
y ya me he quedado Apache
para comenzar mi servidor en ejecución.

120
00:05:43,690 --> 00:05:46,800
Y tengo este archivo
abierto llamado Home.html.

121
00:05:46,800 --> 00:05:48,330
Y voy a zoom en un poco aquí.

122
00:05:48,330 --> 00:05:52,090
Y en el fondo, se puede ver el
Home.html es sólo un montón de botones.

123
00:05:52,090 --> 00:05:55,291
Y estoy afirmando en la parte superior aquí
que esta es la sección JavaScript

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

125
00:05:55,790 --> 00:05:59,490
Así que hay un montón de botones de aquí,
pero ¿qué estos botones hacen realmente?

126
00:05:59,490 --> 00:06:03,662
>> Bueno, nos dirigiremos a mi IED,
y Home.html he abrir aquí.

127
00:06:03,662 --> 00:06:05,620
Al principio,
aquí es donde estoy vinculando

128
00:06:05,620 --> 00:06:07,500
en todos mis archivos de código fuente de JavaScript.

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

130
00:06:08,000 --> 00:06:12,440
Así que tengo anonymous.js, clock.js,
Estoy usando el atributo de origen

131
00:06:12,440 --> 00:06:14,440
de la etiqueta script para enlazar en el archivo.

132
00:06:14,440 --> 00:06:18,660
Así que no he escrito ninguna
JavaScript directamente en este archivo,

133
00:06:18,660 --> 00:06:21,790
pero me he tirado en todo el
JavaScript he escrito separado.

134
00:06:21,790 --> 00:06:24,540
Y si nos desplazamos hasta aquí, este
todos debemos buscar algo familiar

135
00:06:24,540 --> 00:06:27,090
con un poco de nueva sintaxis.

136
00:06:27,090 --> 00:06:32,655
Tenemos aquí etiqueta de cabecera para
funciones y luego un botón.

137
00:06:32,655 --> 00:06:35,530
Tengo una entrada que es un botón de tipo,
y al parecer cuando hago clic en él,

138
00:06:35,530 --> 00:06:38,130
Voy a llamar a algunos
función de la fecha de alerta.

139
00:06:38,130 --> 00:06:41,792
Y así es como podemos especie de mezclar
un poco de JavaScript y HTML.

140
00:06:41,792 --> 00:06:44,500
En realidad juegan bastante bien
juntos, y lo que al parecer cuando

141
00:06:44,500 --> 00:06:48,730
Hago clic en este botón, voy
para llamar a una fecha de alerta función.

142
00:06:48,730 --> 00:06:53,660
Y del mismo modo tengo definí comportamientos
para todos los otros botones que

143
00:06:53,660 --> 00:06:56,440
están en esa página home.html,
que vamos a seguir volviendo

144
00:06:56,440 --> 00:06:59,172
a durante el curso de este vídeo.

145
00:06:59,172 --> 00:07:00,880
Pero volvamos a
aquí y echar un vistazo

146
00:07:00,880 --> 00:07:03,850
en clock.js, que es el
Archivo JavaScript que yo

147
00:07:03,850 --> 00:07:07,370
escribió que tiene esta primera función
vamos a echar un vistazo a.

148
00:07:07,370 --> 00:07:11,630
Como se puede ver, empiezo mi JavaScript
funcionar con la función de la palabra clave,

149
00:07:11,630 --> 00:07:14,560
y yo he dado a éste un
nombre, se llama fecha de alerta.

150
00:07:14,560 --> 00:07:18,710
Dentro de allí, al parecer, se crea un
nueva variable local llamada fecha actual.

151
00:07:18,710 --> 00:07:21,500
Y yo voy a asignar
un igual a una nueva fecha.

152
00:07:21,500 --> 00:07:24,430
Y podríamos entrar en un montón de
detalle en cuanto a lo que es una fecha,

153
00:07:24,430 --> 00:07:27,060
y realmente JavaScript es tan
grande que no podemos posiblemente

154
00:07:27,060 --> 00:07:28,330
cubrir todo en un solo video.

155
00:07:28,330 --> 00:07:32,220
Pero basta con decir, que esto va
para volver a mí un elemento de datos que

156
00:07:32,220 --> 00:07:35,470
encapsula la fecha y la hora actual.

157
00:07:35,470 --> 00:07:39,100
Estoy almacenando que en una variable que soy
al parecer va a alertar a la fecha actual.

158
00:07:39,100 --> 00:07:41,300
>> Bueno, lo que hace de alerta
fecha actual parece?

159
00:07:41,300 --> 00:07:46,460
Vamos a echar un vistazo al archivo en sí
la parte posterior sobre la ventana del navegador.

160
00:07:46,460 --> 00:07:49,551
Así que de nuevo, este es el botón que me
han vinculado a esta función con nombre.

161
00:07:49,551 --> 00:07:51,800
Y hago clic allí y
mira lo que hizo, alertó.

162
00:07:51,800 --> 00:07:56,140
Se apareció este tipo de cuadro diciendo
mí que el momento actual es, al parecer,

163
00:07:56,140 --> 00:07:59,370
que pone el 4 de noviembre a las
10:43:43 de la mañana.

164
00:07:59,370 --> 00:08:02,345
Y si hago clic otra vez, ahora
es unos segundos más tarde, ¿no?

165
00:08:02,345 --> 00:08:03,720
Así que eso es todo lo que hace esta función.

166
00:08:03,720 --> 00:08:07,670
Cuando hago clic en este botón,
hace estallar para arriba un mensaje de alerta a mí.

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

168
00:08:13,806 --> 00:08:15,690
Así que en realidad no es
demasiado a las funciones

169
00:08:15,690 --> 00:08:19,110
eso es diferente de PHP,
sólo un poco de nueva sintaxis

170
00:08:19,110 --> 00:08:22,500
que viene con el trabajo con JavaScript.

171
00:08:22,500 --> 00:08:24,650
>> Arrays en Javascript son
muy claro.

172
00:08:24,650 --> 00:08:27,200
Para declarar una matriz, se utiliza
la sintaxis de corchetes

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

174
00:08:30,090 --> 00:08:33,432
Y similar a PHP, nos
También puede mezclar los tipos de datos.

175
00:08:33,432 --> 00:08:35,140
Así que este array, tanto
de estas matrices lo haría

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

177
00:08:36,960 --> 00:08:42,500
Uno que es todos los números enteros, y que
se mezclan diferentes tipos de datos.

178
00:08:42,500 --> 00:08:45,020
>> ¿Qué es algo muy diferente
en JavaScript, aunque?

179
00:08:45,020 --> 00:08:47,020
Esa es la idea de un objeto.

180
00:08:47,020 --> 00:08:50,240
Así que tal vez has oído hablar de
programación orientada a objetos.

181
00:08:50,240 --> 00:08:53,370
Nosotros no hacemos mucho de eso en CS50,
pero vamos a hacer un poco de él

182
00:08:53,370 --> 00:08:55,670
aquí en el contexto de JavaScript.

183
00:08:55,670 --> 00:08:59,100
Ahora JavaScript tiene la capacidad de
comportarse como una programación orientada a objetos

184
00:08:59,100 --> 00:09:02,615
idioma, pero no es en sí misma
exclusivamente un objeto orientado

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

186
00:09:03,490 --> 00:09:05,281
Y esto viene de nuevo
de nuevo a por qué he dicho,

187
00:09:05,281 --> 00:09:10,610
puede ser muy difícil de aprender
JavaScript como su primera programación

188
00:09:10,610 --> 00:09:13,890
idioma, porque no hace
adaptarse realmente un paradigma particular.

189
00:09:13,890 --> 00:09:16,430
>> C Por otra parte es una
lenguaje de programación funcional.

190
00:09:16,430 --> 00:09:22,270
Si queremos, las funciones son
una especie de gran jefe, ¿no?

191
00:09:22,270 --> 00:09:24,410
Dictan lo
sucede todo lo demás.

192
00:09:24,410 --> 00:09:26,600
Queremos cambiar las variables,
que llamamos funciones.

193
00:09:26,600 --> 00:09:28,220
Hacemos las cosas a las funciones.

194
00:09:28,220 --> 00:09:31,250
Objetos en cambio, en un
lenguaje orientado a objetos,

195
00:09:31,250 --> 00:09:35,937
objetos especie de convertirse en la estrella y
funciones se convierten en una especie de secundaria.

196
00:09:35,937 --> 00:09:38,270
Pero lo que es un objeto, lo que
Es esta noción de un objeto?

197
00:09:38,270 --> 00:09:40,880
Bueno, si ayuda, piensa
respecto al primero ordenar

198
00:09:40,880 --> 00:09:44,540
así como una estructura de C o una estructura
que hemos aprendido antes.

199
00:09:44,540 --> 00:09:47,430
En C, una estructura contiene
una serie de campos,

200
00:09:47,430 --> 00:09:51,174
y tal vez ahora podría empezar a
llamar a estos campos de propiedades.

201
00:09:51,174 --> 00:09:53,590
Pero las propiedades nunca
valerse por sí mismos, ¿no?

202
00:09:53,590 --> 00:09:56,410
Si defino una estructura para un coche
así con los dos siguientes

203
00:09:56,410 --> 00:10:00,750
campos o propiedades, uno un
entero para el año del coche

204
00:10:00,750 --> 00:10:04,290
y otro un personaje 10
cadena para el modelo del coche,

205
00:10:04,290 --> 00:10:07,150
Puedo decir algo como esto,
Puedo declarar una nueva variable

206
00:10:07,150 --> 00:10:10,080
de tipo struct herbie coche.

207
00:10:10,080 --> 00:10:13,730
Y entonces puedo decir algo
como iguales herbie.year 1,963,

208
00:10:13,730 --> 00:10:15,850
y herbie.model equivale Beetle.

209
00:10:15,850 --> 00:10:17,000
Eso está bien.

210
00:10:17,000 --> 00:10:19,680
Estoy usando los campos de la
contexto de la estructura,

211
00:10:19,680 --> 00:10:22,290
pero yo nunca podría simplemente
decir algo como esto.

212
00:10:22,290 --> 00:10:22,790
¿Correcto?

213
00:10:22,790 --> 00:10:26,836
No puedo usar el nombre del campo
independiente de la estructura.

214
00:10:26,836 --> 00:10:28,210
Es una especie de una cosa fundamental.

215
00:10:28,210 --> 00:10:32,990
>> Así que ser campos
fundamental a las estructuras C

216
00:10:32,990 --> 00:10:39,050
son muy similares a ser propiedades
fundamental para objetos JavaScript.

217
00:10:39,050 --> 00:10:42,080
Pero lo que los hace
particularmente interesante

218
00:10:42,080 --> 00:10:46,230
es que los objetos también pueden tener lo
están llamados métodos, que son realmente

219
00:10:46,230 --> 00:10:50,730
sólo una palabra elegante para las funciones que
son inherentes al objeto también.

220
00:10:50,730 --> 00:10:55,340
Así que es una función que sólo puede ser
llamada en el contexto de un objeto.

221
00:10:55,340 --> 00:10:59,200
Sólo un objeto que ha definido
esta función dentro de su,

222
00:10:59,200 --> 00:11:02,020
si usted piensa acerca de un
estructura, la función

223
00:11:02,020 --> 00:11:05,720
se define dentro de las que definen
llaves de la estructura.

224
00:11:05,720 --> 00:11:07,980
Así que sólo significa algo
a la estructura.

225
00:11:07,980 --> 00:11:10,960
Y eso es una especie de lo que estamos haciendo
aquí con objetos y métodos.

226
00:11:10,960 --> 00:11:13,580
Es básicamente como estamos
definir una función que

227
00:11:13,580 --> 00:11:16,670
sólo tiene sentido en un
objeto particular, por lo que

228
00:11:16,670 --> 00:11:19,440
llamar a un método que del objeto.

229
00:11:19,440 --> 00:11:23,180
Y nunca podemos llamar a eso
función independiente del objeto,

230
00:11:23,180 --> 00:11:29,260
al igual que no podemos decir año o modelo
independiente de la estructura en C.

231
00:11:29,260 --> 00:11:32,300
>> Así que la programación funcional
paradigmas ven algo como esto.

232
00:11:32,300 --> 00:11:35,450
Función y luego cuando pasas
en el objeto como un parámetro.

233
00:11:35,450 --> 00:11:38,650
En una programación orientada a objetos
idiomas, este tipo de obtiene

234
00:11:38,650 --> 00:11:43,464
volteado, y nos gustaría pensar
Cómo es esto, object.function.

235
00:11:43,464 --> 00:11:45,380
Por lo tanto, una especie de ese punto
operador de nuevo lo que implica

236
00:11:45,380 --> 00:11:49,540
que se trata de algún tipo de propiedad
o atributo del objeto mismo.

237
00:11:49,540 --> 00:11:53,240
Pero esto es lo que un objeto
lenguaje de programación orientado

238
00:11:53,240 --> 00:11:57,150
podría hacer para hacer una función
llamar a un método, de nuevo, que

239
00:11:57,150 --> 00:12:00,260
es sólo una palabra especial para una función
que es inherente a un objeto.

240
00:12:00,260 --> 00:12:03,440
Esto es lo que
sintaxis podría ser similar.

241
00:12:03,440 --> 00:12:09,360
Y así vamos a empezar a ver algunos de
esto en el contexto de JavaScript.

242
00:12:09,360 --> 00:12:12,470
>> También se puede pensar en un objeto
algo así como una matriz asociativa,

243
00:12:12,470 --> 00:12:14,160
que estamos familiarizados con desde PHP.

244
00:12:14,160 --> 00:12:17,720
Recuerde una matriz asociativa permite
nosotros tener pares de valores clave, en lugar

245
00:12:17,720 --> 00:12:23,040
de tener índices 0, uno, dos, tres,
y así sucesivamente como que estamos acostumbrados de C

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

247
00:12:23,940 --> 00:12:27,472
Las matrices asociativas pueden asignar
palabras, como en el video PHP,

248
00:12:27,472 --> 00:12:29,180
hablábamos
ingredientes de las pizzas.

249
00:12:29,180 --> 00:12:31,180
Y así que tuvimos una matriz
llamados pizzas, y nos

250
00:12:31,180 --> 00:12:36,670
tenía queso era una llave y $ 8,99 era el
valor, y luego de pepperoni era una clave,

251
00:12:36,670 --> 00:12:39,190
$ 9.99 era un valor, y así sucesivamente.

252
00:12:39,190 --> 00:12:43,300
Y así, también podemos pensar en un
objetar tipo de similar a un asociativa

253
00:12:43,300 --> 00:12:43,840
formación.

254
00:12:43,840 --> 00:12:47,020
Y así esta sintaxis aquí
crearía un nuevo objeto

255
00:12:47,020 --> 00:12:50,950
llamada herbie con de dos
propiedades en el interior de la misma.

256
00:12:50,950 --> 00:12:57,310
Año, que se asigna el valor 1963,
y el modelo, que se asigna la cadena de

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

258
00:12:58,140 --> 00:13:01,770
>> Y noto aquí que estoy usando
comillas simples en JavaScript.

259
00:13:01,770 --> 00:13:05,570
Usted puede usar comillas simples o dobles
cuando se está hablando de cadenas.

260
00:13:05,570 --> 00:13:07,772
Es sólo convencionalmente
el caso de que la mayoría de las veces

261
00:13:07,772 --> 00:13:10,230
cuando estás escribiendo JavaScript,
sólo tiene que utilizar comillas simples.

262
00:13:10,230 --> 00:13:15,050
Pero podría utilizar comillas dobles aquí, y
eso sería perfectamente bien también.

263
00:13:15,050 --> 00:13:17,470
>> Así que recuerda cómo en
PHP tuvimos esta idea

264
00:13:17,470 --> 00:13:22,730
de un para cada lazo que nos permitiría
para repetir todo el valor de la 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
no tienen esta capacidad de iterar
a través de 0, uno, dos, tres, cuatro,

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

268
00:13:30,710 --> 00:13:35,010
JavaScript tiene algo muy similar,
pero no llama para cada bucle,

269
00:13:35,010 --> 00:13:38,960
se llama una en bucles.

270
00:13:38,960 --> 00:13:42,890
Así que si me dije a mí como
esto, para la clave var en el objeto,

271
00:13:42,890 --> 00:13:48,670
eso es tipo de similar a decir
para cada algo como algo.

272
00:13:48,670 --> 00:13:53,850
Pero todo lo que estoy haciendo aquí es la iteración
a través de todas las llaves de mi objeto.

273
00:13:53,850 --> 00:13:56,070
Y en el interior del rizado
apoyos allí, lo haría

274
00:13:56,070 --> 00:14:03,410
utilizar objeto clave entre corchetes para referirse
al valor en ese lugar clave.

275
00:14:03,410 --> 00:14:05,400
>> Como alternativa, hay
incluso otro enfoque.

276
00:14:05,400 --> 00:14:10,880
Si tan sólo sólo se preocupan por el
valores, puedo decir con clave del objeto,

277
00:14:10,880 --> 00:14:12,360
y sólo usar llave dentro.

278
00:14:12,360 --> 00:14:17,240
Así que para la clave var en el objeto, no tengo
utilizar corchetes de objetos

279
00:14:17,240 --> 00:14:19,340
clave dentro del bucle.

280
00:14:19,340 --> 00:14:24,580
Para clave var del objeto, que pueda
sólo tiene que utilizar claves dentro del bucle,

281
00:14:24,580 --> 00:14:29,040
porque yo sólo soy específicamente
hablando de los valores allí.

282
00:14:29,040 --> 00:14:32,630
>> Así que vamos a echar un tal
mirar a la diferencia

283
00:14:32,630 --> 00:14:35,670
sólo para mostrar rápidamente
la diferencia entre las cuatro

284
00:14:35,670 --> 00:14:40,730
en y para la de un muy específico
matriz, lo que tenemos aquí, semana matriz.

285
00:14:40,730 --> 00:14:43,616
Así que tengo que encontrar una nueva matriz
que me llené de siete cuerdas,

286
00:14:43,616 --> 00:14:46,240
Lunes Martes miercoles,
Jueves, Viernes, Sábado, Domingo.

287
00:14:46,240 --> 00:14:50,530
Y quiero ahora iterar
a través de esta matriz,

288
00:14:50,530 --> 00:14:53,090
impresión de cierta información.

289
00:14:53,090 --> 00:14:58,780
Si yo uso una en el bucle
imprimir información,

290
00:14:58,780 --> 00:15:00,710
¿qué crees que me voy a poner?

291
00:15:00,710 --> 00:15:01,710
Bueno, vamos a echar un vistazo.

292
00:15:01,710 --> 00:15:05,300
Y antes de saltar sobre
a mi ventana del navegador,

293
00:15:05,300 --> 00:15:08,090
sólo sé que
console.log es una especie de un solo

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

295
00:15:10,630 --> 00:15:12,040
Pero, ¿qué es la consola?

296
00:15:12,040 --> 00:15:14,940
Bueno, eso es lo que vamos
ir a echar un vistazo a este momento.

297
00:15:14,940 --> 00:15:16,850
>> OK, así que estamos de vuelta aquí
en mi ventana del navegador,

298
00:15:16,850 --> 00:15:19,410
y yo voy a abrir
mis herramientas para desarrolladores.

299
00:15:19,410 --> 00:15:22,290
Una vez más, sólo estoy golpeando F12
para abrir las herramientas de desarrollo.

300
00:15:22,290 --> 00:15:25,670
Y darse cuenta de que aquí en el
superior que he elegido consola.

301
00:15:25,670 --> 00:15:28,480
Así que esta es la noción
de una consola de desarrollador,

302
00:15:28,480 --> 00:15:30,500
y nos permitirá
imprimir la información de un vistazo,

303
00:15:30,500 --> 00:15:33,000
algo así como el terminal, pero
como veremos un poco más adelante,

304
00:15:33,000 --> 00:15:37,720
también podemos escribir información en
para interactuar con nuestra página web.

305
00:15:37,720 --> 00:15:42,320
Me voy a acercar un poco aquí,
y voy ahora haga clic en en la prueba.

306
00:15:42,320 --> 00:15:45,230
Y cuatro en test-- No voy a
te mostrará el código para ello en este momento,

307
00:15:45,230 --> 00:15:47,479
pero lo conseguirás si
descargar el código fuente que

308
00:15:47,479 --> 00:15:50,380
se asocia con este video--
es sólo que en el bucle

309
00:15:50,380 --> 00:15:52,610
que vimos sólo una
Hace segundos en la diapositiva.

310
00:15:52,610 --> 00:15:54,810
>> Así que voy a clic que
botón y aquí,

311
00:15:54,810 --> 00:15:58,440
esto es lo que ha impreso en el
consola, 0, uno, dos, tres, cuatro, cinco,

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

313
00:15:58,940 --> 00:16:02,490
No me imprimo la información
dentro de esos lugares de la matriz,

314
00:16:02,490 --> 00:16:05,180
porque utilicé una en el bucle.

315
00:16:05,180 --> 00:16:10,670
Y el interior del cuerpo del bucle, I
simplemente imprimir clave no clave objetar.

316
00:16:10,670 --> 00:16:18,600
Pero si ahora me aclaro la consola, y yo
cambiar a para de prueba, y cuatro de prueba

317
00:16:18,600 --> 00:16:22,500
Digo yo uso para de bucle
lugar e imprimir clave,

318
00:16:22,500 --> 00:16:28,079
si hago clic en eso, ahora me estoy poniendo la
elementos reales dentro de mi objeto

319
00:16:28,079 --> 00:16:29,120
o mi matriz en este caso.

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

321
00:16:31,760 --> 00:16:33,480
Imprimí lunes
Martes Miércoles.

322
00:16:33,480 --> 00:16:36,930
Así que esa es la diferencia entre
una en el bucle, que imprime

323
00:16:36,930 --> 00:16:43,410
sólo las llaves si sólo utiliza clave
interior del cuerpo del bucle,

324
00:16:43,410 --> 00:16:46,850
y una para de bucle, que imprime
los valores si se utiliza solo

325
00:16:46,850 --> 00:16:48,870
clave en el interior del cuerpo del bucle.

326
00:16:48,870 --> 00:16:52,380
>> Muy bien, ¿cómo ahora empezamos a
concatenar cadenas y tal vez mezclar

327
00:16:52,380 --> 00:16:57,220
algunas variables con interpolación
como si fuéramos capaces de hacer en PHP?

328
00:16:57,220 --> 00:16:59,410
Bueno, estamos bastante familiarizados
con esto desde PHP.

329
00:16:59,410 --> 00:17:04,109
Así es como lo haríamos con el
operador punto para concatenar cadenas.

330
00:17:04,109 --> 00:17:06,260
En JavaScript, sin embargo,
realmente usamos algo

331
00:17:06,260 --> 00:17:09,290
llamada el operador además, que
es tal vez incluso un poco más

332
00:17:09,290 --> 00:17:10,470
intuitiva, ¿verdad?

333
00:17:10,470 --> 00:17:12,609
Estamos añadiendo un montón
de cadenas juntos.

334
00:17:12,609 --> 00:17:14,520
Así que vamos a la cabeza hacia atrás
una y ver lo que este

335
00:17:14,520 --> 00:17:18,693
imprimirá si estamos tratando de imprimir
toda la información en semanas array.

336
00:17:18,693 --> 00:17:20,859
Muy bien, así que aquí abajo
bajo la concatenación de cadenas,

337
00:17:20,859 --> 00:17:24,822
Tengo dos opciones, la construcción de la cadena
V1 V2 y luego edificio cadena.

338
00:17:24,822 --> 00:17:26,530
Y vamos a ver por qué
necesitará V2 en un segundo.

339
00:17:26,530 --> 00:17:28,610
Pero voy clic en
edificio V1 cadena, que

340
00:17:28,610 --> 00:17:30,360
El código estábamos
Sólo echar un vistazo a,

341
00:17:30,360 --> 00:17:32,980
el console.log con todas las ventajas.

342
00:17:32,980 --> 00:17:35,910
Vamos a ver si esta grabados
lo que esperamos.

343
00:17:35,910 --> 00:17:39,939
>> El lunes es el día número 01 de la semana,
El martes es el día número 11 de la semana.

344
00:17:39,939 --> 00:17:41,730
Bueno, lo que yo estaba tratando
que hacer allí era llegar

345
00:17:41,730 --> 00:17:46,280
para imprimir Lunes es el número días
uno, Martes es el día número dos.

346
00:17:46,280 --> 00:17:50,140
Pero parece como si yo fuera
siempre imprimir una.

347
00:17:50,140 --> 00:17:51,260
Bueno, ¿por qué es eso?

348
00:17:51,260 --> 00:17:55,600
Bueno, resulta que echar otro vistazo
en este pequeño fragmento de código aquí.

349
00:17:55,600 --> 00:18:00,160
Nótese que estamos usando el signo más
operador en dos contextos diferentes.

350
00:18:00,160 --> 00:18:03,221
>> Y aquí es donde tal vez las cosas
que tipo de hemos estado diciendo,

351
00:18:03,221 --> 00:18:03,970
oh, es tan grande.

352
00:18:03,970 --> 00:18:05,910
Nosotros no tratamos con los tipos de datos más.

353
00:18:05,910 --> 00:18:08,220
Pero aquí es donde el hecho
que perdemos tipos de datos

354
00:18:08,220 --> 00:18:10,960
en realidad puede ser un poco
de un problema para nosotros.

355
00:18:10,960 --> 00:18:16,260
Ahora que el operador de suma se utiliza para
concatenar cadenas y añadir números

356
00:18:16,260 --> 00:18:19,550
juntos, Javascript
para hacer su mejor conjetura

357
00:18:19,550 --> 00:18:22,030
en cuanto a lo que yo quiero que haga por mí.

358
00:18:22,030 --> 00:18:23,900
Y en este caso, que adivinó mal.

359
00:18:23,900 --> 00:18:29,340
Es día sólo concatenados, que sería
0, uno, dos, tres, cuatro, cinco, o seis,

360
00:18:29,340 --> 00:18:32,060
y entonces, sólo se concatena
eso y luego concatenan una.

361
00:18:32,060 --> 00:18:35,020
No poner realmente juntos.

362
00:18:35,020 --> 00:18:37,320
Y por lo que estas lenguas,
PHP y JavaScript,

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

364
00:18:39,196 --> 00:18:40,820
usted no tiene que tratar con él nunca más.

365
00:18:40,820 --> 00:18:43,600
Ellos todavía tienen tipos bajo el capó.

366
00:18:43,600 --> 00:18:46,780
Y podemos, en situaciones
así, aprovechar ese hecho

367
00:18:46,780 --> 00:18:49,240
diciendo algo
como tal vez esto, que

368
00:18:49,240 --> 00:18:53,210
está diciendo JavaScript, por el
manera, tratar esto como un entero,

369
00:18:53,210 --> 00:18:57,100
no tratarlo como una cadena, incluso
aunque estamos mezclando cadenas

370
00:18:57,100 --> 00:18:58,940
y enteros aquí.

371
00:18:58,940 --> 00:19:02,204
>> Es sólo una de esas cosas
que parece tan grande en su contexto

372
00:19:02,204 --> 00:19:04,120
que nosotros no tenemos que
tratar con tipos más,

373
00:19:04,120 --> 00:19:05,828
pero a veces tendrás
ejecutar en una situación

374
00:19:05,828 --> 00:19:09,110
exactamente como esta, donde el hecho de que
usted no tiene control sobre los tipos

375
00:19:09,110 --> 00:19:11,220
puede volverse en contra de usted
si no tienes cuidado.

376
00:19:11,220 --> 00:19:18,285
Y por lo que si nos pop volver a IDE, estoy
va a limpiar mi consola de nuevo,

377
00:19:18,285 --> 00:19:20,660
y yo voy a hacer clic cuerdas
edificio de la versión dos, que

378
00:19:20,660 --> 00:19:23,052
es donde yo uso esa función parse int.

379
00:19:23,052 --> 00:19:25,260
Ahora se está imprimiendo
información que estoy esperando.

380
00:19:25,260 --> 00:19:29,330
Número de día del lunes, martes
es día número dos, y así sucesivamente.

381
00:19:29,330 --> 00:19:31,170
>> Así que vamos a hablar acerca de las funciones de nuevo.

382
00:19:31,170 --> 00:19:34,790
Le prometí que hablaríamos de anónimos
funciones, y ahora el contexto para que

383
00:19:34,790 --> 00:19:36,360
por fin ha llegado.

384
00:19:36,360 --> 00:19:39,980
Así que antes de hacerlo, vamos a hablar de nuevo
acerca de las matrices por sólo un segundo.

385
00:19:39,980 --> 00:19:42,120
Así arrays son una especial
caso de un objeto.

386
00:19:42,120 --> 00:19:45,180
De hecho, todo en
JavaScript es en realidad un objeto.

387
00:19:45,180 --> 00:19:47,190
Así funciones son una
caso especial de un objeto,

388
00:19:47,190 --> 00:19:49,770
enteros son un especial
caso de un objeto,

389
00:19:49,770 --> 00:19:52,152
pero matrices específicamente
tener un número de métodos.

390
00:19:52,152 --> 00:19:55,110
Recuerde porque son objetos,
pueden tener propiedades y métodos.

391
00:19:55,110 --> 00:19:58,600
Tienen un número de métodos que
se puede aplicar a esos objetos.

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

393
00:20:01,197 --> 00:20:03,030
que volverá a
que como era de esperar

394
00:20:03,030 --> 00:20:05,120
el número de elementos en la matriz.

395
00:20:05,120 --> 00:20:08,480
Array.pop, algo así como
nuestra idea de hacer estallar apagado

396
00:20:08,480 --> 00:20:11,110
de una pila, si recuerdas
desde nuestro vídeo pilas,

397
00:20:11,110 --> 00:20:13,810
Elimina el último elemento de la matriz.

398
00:20:13,810 --> 00:20:17,110
Array.push agrega un nuevo elemento
al final de una matriz.

399
00:20:17,110 --> 00:20:20,910
Array.shift es una especie de
como DQ, se empalma a cabo

400
00:20:20,910 --> 00:20:23,610
el primer elemento de una matriz.

401
00:20:23,610 --> 00:20:27,549
>> Pero hay también otro especial
método de un array llamado mapa.

402
00:20:27,549 --> 00:20:29,340
Y esto es una especie de
concepto interesante.

403
00:20:29,340 --> 00:20:30,930
Entonces, ¿cuál es la idea de un mapa?

404
00:20:30,930 --> 00:20:33,880
Usted realmente va a ver esto
en varios otros idiomas,

405
00:20:33,880 --> 00:20:38,550
y no estamos hablando de un
tipo de cartógrafos mapa aquí,

406
00:20:38,550 --> 00:20:41,480
estamos hablando de una función de mapeo.

407
00:20:41,480 --> 00:20:44,110
En el contexto que estamos
hablando aquí, un mapa

408
00:20:44,110 --> 00:20:47,950
es una operación especial que
puede llevar a cabo en una serie

409
00:20:47,950 --> 00:20:51,630
para aplicar una función particular
a cada elemento de la matriz.

410
00:20:51,630 --> 00:20:55,190
y así diríamos en
este caso, tal vez array.map,

411
00:20:55,190 --> 00:21:00,330
y dentro de ella, estamos pasando
en mapa es una función que queremos

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

413
00:21:02,430 --> 00:21:07,299
Así que es una especie de análogo a usar
un bucle para iterar sobre cada elemento

414
00:21:07,299 --> 00:21:09,340
y aplicar una determinada
funcionar a cada elemento,

415
00:21:09,340 --> 00:21:14,830
simplemente Javascript esta construida en
noción de un mapeo que se puede aplicar.

416
00:21:14,830 --> 00:21:19,700
Y este es un gran contexto para
hablar de una función anónima.

417
00:21:19,700 --> 00:21:22,370
>> Así que vamos a decir que tenemos
esta matriz de enteros.

418
00:21:22,370 --> 00:21:25,370
Se llama nums, y que tiene cinco años
cosas en él, uno, dos, tres, cuatro,

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

420
00:21:26,410 --> 00:21:30,620
Ahora quiero trazar algunos
función a esta matriz.

421
00:21:30,620 --> 00:21:34,337
Quiero tener aplica una función
a cada elemento de la matriz.

422
00:21:34,337 --> 00:21:37,420
Bueno, digamos que lo que quiero
hacer es doblar todos los elementos.

423
00:21:37,420 --> 00:21:42,520
Lo que podría hacer es utilizar un bucle
para var I es igual a 0, I es menor que

424
00:21:42,520 --> 00:21:47,390
o igual a 4, I más, más, y
luego doblar cada número individual.

425
00:21:47,390 --> 00:21:49,580
Pero también puedo hacer algo como esto.

426
00:21:49,580 --> 00:21:53,420
Puedo decir nums era antes
uno dos tres CUATRO CINCO,

427
00:21:53,420 --> 00:21:58,310
ahora, sin embargo, me gustaría que te gustaría
aplicar un mapeo en esta matriz

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

429
00:22:00,400 --> 00:22:02,540
Y eso es exactamente
que esta pasando aqui.

430
00:22:02,540 --> 00:22:06,870
Pero noto lo que estoy pasando
en como argumento al mapa.

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

432
00:22:09,080 --> 00:22:11,140
Y noto que no he dado
esta función un nombre,

433
00:22:11,140 --> 00:22:13,290
Yo sólo he dado una lista de parámetros.

434
00:22:13,290 --> 00:22:16,370
Y por lo que este es un ejemplo
de una función anónima.

435
00:22:16,370 --> 00:22:21,270
>> Por lo general, no llamaría a esto
función fuera del contexto del mapa.

436
00:22:21,270 --> 00:22:24,110
Estamos definiéndolo como un parámetro
para cartografiar, por lo que en realidad no

437
00:22:24,110 --> 00:22:27,910
necesita tener un nombre para él si el
Lo único que le importa es el mapa

438
00:22:27,910 --> 00:22:30,339
y se definió la derecha
existe dentro del mapa.

439
00:22:30,339 --> 00:22:31,880
Y lo que esta es una función anónima.

440
00:22:31,880 --> 00:22:34,680
No hemos podido
para hacer esto antes.

441
00:22:34,680 --> 00:22:38,400
Ubicación alguna función que
acepta un parámetro, num,

442
00:22:38,400 --> 00:22:41,890
y lo que hace que la función
se vuelve num 2 veces.

443
00:22:41,890 --> 00:22:45,330
Y así, después de esta
mapeo se ha aplicado,

444
00:22:45,330 --> 00:22:50,090
esto es ahora lo que parece nums
como, dos, cuatro, seis, ocho, 10.

445
00:22:50,090 --> 00:22:52,090
Y vamos a pop a mi
ventana del navegador y justo

446
00:22:52,090 --> 00:22:55,240
mira esto
muy rápido también.

447
00:22:55,240 --> 00:22:58,000
>> Así que tengo otro botón aquí
en mi página de inicio llamada doble.

448
00:22:58,000 --> 00:23:03,570
Y cuando hago clic doble, y se dice
yo antes era uno, dos, tres, cuatro,

449
00:23:03,570 --> 00:23:07,250
cinco después de dos, cuatro, seis, ocho, 10.

450
00:23:07,250 --> 00:23:11,930
Y si vuelvo y haga clic doble
de nuevo, dos, cuatro, seis, ocho, 10.

451
00:23:11,930 --> 00:23:17,400
Y luego, después, cuatro,
ocho, 12, 16, 20 y, a continuación.

452
00:23:17,400 --> 00:23:20,440
Y lo que estoy haciendo en esta función?

453
00:23:20,440 --> 00:23:25,210
Bueno, si sólo pop a IDE y
Yo levanto mi función anónima, aquí

454
00:23:25,210 --> 00:23:28,780
en la línea del siete al 13, yo soy
haciendo una obra de fantasía poco aquí,

455
00:23:28,780 --> 00:23:32,240
pero yo sólo estoy imprimiendo
lo que hay actualmente en la matriz.

456
00:23:32,240 --> 00:23:36,580
Luego en la línea 16, 17,
y 18, ahí está mi mapa.

457
00:23:36,580 --> 00:23:40,930
Aquí es donde estoy aplicando esta duplicación
función para cada elemento.

458
00:23:40,930 --> 00:23:43,530
Y luego un poco más abajo,
Sólo estoy haciendo lo mismo

459
00:23:43,530 --> 00:23:46,640
Que estaba haciendo antes, excepto que ahora estoy
imprimir el contenido de la matriz

460
00:23:46,640 --> 00:23:48,167
después.

461
00:23:48,167 --> 00:23:50,500
Pero todo lo que he hecho aquí es
sólo tiene que utilizar una función anónima

462
00:23:50,500 --> 00:23:53,640
para mapear a través de toda una matriz.

463
00:23:53,640 --> 00:23:58,466
>> Así que una más gran tema para hablar en
JavaScript es la noción de un evento.

464
00:23:58,466 --> 00:24:01,590
Un evento es algo que simplemente sucede
cuando un usuario interactúa con su web

465
00:24:01,590 --> 00:24:04,715
página, así que tal vez haga clic en algo,
o tal vez la página haya terminado de cargarse,

466
00:24:04,715 --> 00:24:07,200
o tal vez se han movido
el ratón sobre algo,

467
00:24:07,200 --> 00:24:09,290
o que haya escrito algo
en un campo de entrada.

468
00:24:09,290 --> 00:24:14,260
Todas estas cosas son eventos
que se están produciendo en nuestra página web.

469
00:24:14,260 --> 00:24:17,460
Y JavaScript tiene la
capacidad de soportar algo

470
00:24:17,460 --> 00:24:21,760
llamado un controlador de eventos, que
es una función de devolución de llamada que

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

472
00:24:23,329 --> 00:24:24,620
Y lo que es una función de devolución de llamada?

473
00:24:24,620 --> 00:24:27,328
Bueno, por lo general es más que otro
nombre para una función anónima.

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

475
00:24:30,170 --> 00:24:34,130
Y aquí es donde llegamos a la
idea de la unión de ciertas funciones

476
00:24:34,130 --> 00:24:38,060
a un atributo html en particular.

477
00:24:38,060 --> 00:24:41,420
La mayoría de los elementos HTML tienen
apoyo a un atributo

478
00:24:41,420 --> 00:24:45,170
que no nos hablamos en el html
vídeo para algo como el clic

479
00:24:45,170 --> 00:24:50,540
o en vuelo estacionario o en la carga,
todos estos eventos

480
00:24:50,540 --> 00:24:53,120
que a continuación, puede escribir funciones
que tienen que ver con esos eventos

481
00:24:53,120 --> 00:24:56,090
cuando esos eventos
producirse en tu página web.

482
00:24:56,090 --> 00:24:59,170
>> Y lo que tal vez su html
se ve algo como esto.

483
00:24:59,170 --> 00:25:02,240
Y tengo dos botones de aquí,
un botón y el botón de dos,

484
00:25:02,240 --> 00:25:04,620
y aquí tengo actualmente
nada definido,

485
00:25:04,620 --> 00:25:11,170
pero aquí es donde el atributo de
clic es aparentemente parte de mi etiqueta html.

486
00:25:11,170 --> 00:25:15,220
Así que al parecer cuando me defino lo que es
pasando dentro de ese atributo,

487
00:25:15,220 --> 00:25:18,590
que va a ser algo de JavaScript
función que responde al evento

488
00:25:18,590 --> 00:25:24,360
presumiblemente de hacer clic en
botón de un solo botón o dos.

489
00:25:24,360 --> 00:25:28,580
>> ¿Qué es una especie de fresco sobre esto es que
puede escribir un controlador de eventos genérico.

490
00:25:28,580 --> 00:25:32,370
Y este controlador de eventos
crear un objeto de evento.

491
00:25:32,370 --> 00:25:37,000
Y el objeto de evento nos dirá
cuál de los dos botones se hace clic.

492
00:25:37,000 --> 00:25:38,064
Ahora, ¿cómo funciona eso?

493
00:25:38,064 --> 00:25:39,730
Bueno, podría ser algo como esto.

494
00:25:39,730 --> 00:25:44,860
Así que vamos a definir en primer lugar nuestros botones
para tener una respuesta a la devolución de llamada

495
00:25:44,860 --> 00:25:47,470
función que se llama
cuando se hace clic en el botón,

496
00:25:47,470 --> 00:25:49,520
llamaremos evento Nombre de alerta.

497
00:25:49,520 --> 00:25:53,320
Y notar en ambos casos estamos
pasar en este parámetro de evento.

498
00:25:53,320 --> 00:25:55,460
Así que llamamos a esta función
o cuando esta función

499
00:25:55,460 --> 00:26:00,330
es provocada por el evento suceda,
que va a crear este objeto de evento

500
00:26:00,330 --> 00:26:03,300
y pasarlo como
parámetro para alertar nombre.

501
00:26:03,300 --> 00:26:07,270
Y eso es objeto de evento
va a contener información

502
00:26:07,270 --> 00:26:09,800
sobre el que se hizo clic en el botón.

503
00:26:09,800 --> 00:26:11,580
¿Y cómo se hace eso?

504
00:26:11,580 --> 00:26:13,654
Bueno, podría ser algo como esto.

505
00:26:13,654 --> 00:26:15,570
Así que ahora en mi separada
Archivo JavaScript, podría

506
00:26:15,570 --> 00:26:17,420
que encontrar este
Nombre de la función de alerta, lo que

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

508
00:26:19,500 --> 00:26:24,640
Y entonces aquí es donde estoy detectando
qué botón se activa,

509
00:26:24,640 --> 00:26:28,100
gatillo var equivale evento
elemento de origen de puntos.

510
00:26:28,100 --> 00:26:33,150
¿Cuál fue la fuente que creó
este objeto de evento que fue aprobada en?

511
00:26:33,150 --> 00:26:36,390
¿Fue el botón uno o dos botones era ella?

512
00:26:36,390 --> 00:26:40,710
>> Y entonces aquí todo lo que estoy haciendo es
imprimir trigger.innerhtml.

513
00:26:40,710 --> 00:26:43,860
Pues bien, en este caso, en este
contexto, trigger.innerhtml

514
00:26:43,860 --> 00:26:45,940
es justo lo que está escrito en el botón.

515
00:26:45,940 --> 00:26:48,830
Lo que pasa si saltamos
espalda por un segundo, que lo haría

516
00:26:48,830 --> 00:26:51,670
ser lo que está en entre esas etiquetas de botones.

517
00:26:51,670 --> 00:26:54,150
Será botón de uno o dos botones.

518
00:26:54,150 --> 00:26:57,320
Y vamos a echar un vistazo a
cómo este controlador de eventos haría

519
00:26:57,320 --> 00:27:01,080
mirar si tuviéramos que funcione en la práctica.

520
00:27:01,080 --> 00:27:03,850
>> Así, en primer lugar, que haya
abiertas events.js,

521
00:27:03,850 --> 00:27:06,517
que es el archivo JavaScript en
He definido esta función.

522
00:27:06,517 --> 00:27:08,558
Y como se puede ver, es
casi exactamente lo

523
00:27:08,558 --> 00:27:10,230
que acabamos de ver en la diapositiva hace un segundo.

524
00:27:10,230 --> 00:27:14,890
Y voy a ir a la
página de inicio que hemos estado usando.

525
00:27:14,890 --> 00:27:17,660
Y tengo aquí el botón
Uno y dos botones.

526
00:27:17,660 --> 00:27:19,820
Y voy a hacer clic en un botón.

527
00:27:19,820 --> 00:27:23,930
Hizo clic en el botón de uno, si
puede ver aquí en la alerta.

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

529
00:27:25,810 --> 00:27:28,980
Haga clic en el botón de dos,
hecho clic en un botón de dos.

530
00:27:28,980 --> 00:27:32,150
>> Así que los dos botones tienen la
misma llamada a la función, ¿no?

531
00:27:32,150 --> 00:27:35,840
Ambos estaban nombre de alerta
evento, pero este objeto de evento

532
00:27:35,840 --> 00:27:41,900
que se crea cuando hacemos clic en
que nos dice qué botón se hizo clic.

533
00:27:41,900 --> 00:27:44,650
Nosotros no tenemos que escribir dos por separado
funciones o hacer frente a tener

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

535
00:27:46,470 --> 00:27:48,220
Estamos confiando en
lo hará JavaScript

536
00:27:48,220 --> 00:27:53,772
hacer por nosotros, que es crear esa
tipo de evento objeto en nuestro nombre.

537
00:27:53,772 --> 00:27:56,730
Hay mucho más para JavaScript de
lo que hemos cubierto en este video,

538
00:27:56,730 --> 00:27:58,521
pero tener éstos
fundamental debe conseguirle

539
00:27:58,521 --> 00:28:00,690
un largo camino bastante a
aprender todo lo que

540
00:28:00,690 --> 00:28:04,030
necesita saber acerca de este
lenguaje interesante.

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

542
00:28:05,000 --> 00:28:07,010
Esto es CS50.

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