1
00:00:01,550 --> 00:00:06,550
Para asegurarse al 100% de que comprende los cierres ahora,

2
00:00:06,600 --> 00:00:09,433
Trabajemos en este desafío de codificación número 2.

3
00:00:11,460 --> 00:00:15,000
Y en realidad este es más un desafío de pensamiento.

4
00:00:15,000 --> 00:00:16,453
que un desafío de codificación.

5
00:00:17,400 --> 00:00:21,760
Entonces, lo que quiero que hagas es tomar este IIFE aquí.

6
00:00:21,760 --> 00:00:23,630
y al final de la función,

7
00:00:23,630 --> 00:00:25,930
simplemente adjunte un detector de eventos

8
00:00:25,930 --> 00:00:30,810
que cambia el color del elemento h1 seleccionado.

9
00:00:30,810 --> 00:00:35,050
Así que este encabezado aquí en azul, está bien.

10
00:00:35,050 --> 00:00:36,810
Y eso debería suceder cada vez

11
00:00:36,810 --> 00:00:39,690
que se hace clic en el elemento del cuerpo.

12
00:00:39,690 --> 00:00:42,390
Así que cada vez que hacemos clic aquí.

13
00:00:42,390 --> 00:00:44,000
Y lo importante aquí es

14
00:00:44,000 --> 00:00:47,660
que no vuelva a seleccionar el elemento h1.

15
00:00:47,660 --> 00:00:50,023
Así que solo usa este encabezado que tienes aquí.

16
00:00:51,000 --> 00:00:52,250
Está bien.

17
00:00:52,250 --> 00:00:54,460
Así que ese es todo el código que tienes que escribir.

18
00:00:54,460 --> 00:00:56,190
que es realmente simple.

19
00:00:56,190 --> 00:00:58,760
Pero el verdadero desafío aquí es que quiero que

20
00:00:58,760 --> 00:01:00,730
explícate a ti mismo,

21
00:01:00,730 --> 00:01:04,860
o incluso a alguien a tu alrededor por qué esto funciona.

22
00:01:04,860 --> 00:01:09,160
Entonces, al hacer clic en el cuerpo, el texto cambiará a azul.

23
00:01:09,160 --> 00:01:10,800
Y entonces va a funcionar

24
00:01:10,800 --> 00:01:12,280
pero tienes que entender

25
00:01:12,280 --> 00:01:15,460
y tienes que explicar por qué funcionó.

26
00:01:15,460 --> 00:01:17,320
Y entonces este es un buen ejercicio,

27
00:01:17,320 --> 00:01:19,870
porque ser capaz de explicar algo

28
00:01:19,870 --> 00:01:24,680
a otra persona significa que usted mismo lo ha entendido.

29
00:01:24,680 --> 00:01:27,040
Así que realmente espero que hagas esto

30
00:01:27,040 --> 00:01:30,370
aunque no implica mucha codificación.

31
00:01:30,370 --> 00:01:33,050
Pero sigue siendo muy importante hacer esto.

32
00:01:33,050 --> 00:01:36,640
Así que tómate todo el tiempo que necesites y piensa en

33
00:01:36,640 --> 00:01:40,270
cuando se ejecuta exactamente la función de devolución de llamada.

34
00:01:40,270 --> 00:01:43,360
Y, por supuesto, lo que eso significa para las variables.

35
00:01:43,360 --> 00:01:45,433
que intervienen en este ejemplo.

36
00:01:46,930 --> 00:01:49,000
Así que de nuevo tómate el tiempo que necesites

37
00:01:49,000 --> 00:01:50,930
y te veo aquí en un minuto

38
00:01:50,930 --> 00:01:53,313
básicamente con mi propia explicación.

39
00:01:56,350 --> 00:02:01,163
Así que el código que tenías que escribir era simplemente este.

40
00:02:03,310 --> 00:02:07,090
Así que seleccionando el elemento del cuerpo

41
00:02:07,090 --> 00:02:11,093
y luego agregue el detector de eventos al hacer clic,

42
00:02:13,480 --> 00:02:15,913
y luego esta función de devolución de llamada.

43
00:02:16,980 --> 00:02:19,810
Y luego simplemente estoy cambiando el estilo aquí.

44
00:02:21,950 --> 00:02:22,943
a azul

45
00:02:25,160 --> 00:02:29,970
Entonces tenga en cuenta que no seleccionamos el h1 aquí nuevamente.

46
00:02:29,970 --> 00:02:31,850
Simplemente usé la variable de encabezado

47
00:02:31,850 --> 00:02:34,390
que ya habíamos seleccionado antes.

48
00:02:34,390 --> 00:02:36,010
Así que vamos a darle una caja fuerte.

49
00:02:36,010 --> 00:02:37,563
Y haré clic ahora en el cuerpo.

50
00:02:38,600 --> 00:02:43,580
Y de hecho, se volvió azul, y funcionó bien.

51
00:02:43,580 --> 00:02:46,290
Entonces, ¿por qué funcionó esto?

52
00:02:46,290 --> 00:02:50,800
O en otras palabras, ¿cómo funciona esta devolución de llamada aquí?

53
00:02:50,800 --> 00:02:53,810
obtener acceso a la variable de encabezado?

54
00:02:53,810 --> 00:02:58,240
Y una vez más, la explicación es el cierre.

55
00:02:58,240 --> 00:03:01,550
Así que esperaba que realmente explicaras básicamente

56
00:03:01,550 --> 00:03:05,850
cómo funciona el cierre para usted o para otra persona.

57
00:03:05,850 --> 00:03:10,170
Y así, en este ejemplo particular, el cierre es necesario.

58
00:03:10,170 --> 00:03:12,120
o es util

59
00:03:12,120 --> 00:03:17,120
porque en el momento en que se ejecuta esta devolución de llamada aquí,

60
00:03:17,210 --> 00:03:18,500
este IIFE,

61
00:03:18,500 --> 00:03:22,220
por lo que esta expresión de función inmediatamente invocada es

62
00:03:22,220 --> 00:03:23,460
ahora se ha ido

63
00:03:23,460 --> 00:03:25,810
Así que ya se ha ejecutado.

64
00:03:25,810 --> 00:03:30,810
Y con ella, esta variable aquí básicamente también desapareció.

65
00:03:30,990 --> 00:03:31,860
¿Bien?

66
00:03:31,860 --> 00:03:33,480
Así que todo eso se ha ido.

67
00:03:33,480 --> 00:03:36,610
Pero aún así, esta función aquí está adjunta

68
00:03:36,610 --> 00:03:38,380
al elemento del cuerpo.

69
00:03:38,380 --> 00:03:41,810
Y entonces está esperando que sucedan algunos eventos allí.

70
00:03:41,810 --> 00:03:43,960
Y cuando el evento sucede, bueno,

71
00:03:43,960 --> 00:03:47,430
entonces esta función aquí es, por supuesto, ejecutada.

72
00:03:47,430 --> 00:03:50,480
Y de nuevo, aunque el entorno

73
00:03:50,480 --> 00:03:54,110
en el que se creó esta función aquí ya se ha ido,

74
00:03:54,110 --> 00:03:56,430
todavía es capaz de acceder a las variables

75
00:03:56,430 --> 00:03:59,050
que se crearon en esa variable

76
00:03:59,050 --> 00:04:03,270
para cuando nació la función, por así decirlo.

77
00:04:03,270 --> 00:04:08,270
Así que este es el lugar de nacimiento de la función de controlador de eventos aquí.

78
00:04:08,550 --> 00:04:10,310
Y por lo tanto la función

79
00:04:10,310 --> 00:04:15,310
recuerda todas las variables presentes en el momento de su nacimiento.

80
00:04:15,550 --> 00:04:16,383
También podemos decir

81
00:04:16,383 --> 00:04:20,570
que el encabezado está en la mochila de esta función.

82
00:04:20,570 --> 00:04:23,060
Así que esa explicación también funciona.

83
00:04:23,060 --> 00:04:26,530
Y puedes ir aún más lejos y profundizar en la teoría.

84
00:04:26,530 --> 00:04:28,750
y básicamente tratar de explicar

85
00:04:28,750 --> 00:04:31,690
cómo funciona todo esto entre bastidores.

86
00:04:31,690 --> 00:04:33,580
Pero eso ya te lo expliqué

87
00:04:33,580 --> 00:04:36,420
en la conferencia más teórica,

88
00:04:36,420 --> 00:04:39,313
así que no voy a entrar en eso de nuevo.

89
00:04:40,430 --> 00:04:41,850
Está bien.

90
00:04:41,850 --> 00:04:46,740
Así que espero que hayas logrado explicarte esto a ti mismo,

91
00:04:46,740 --> 00:04:48,900
tal vez a tu perro, lo que sea.

92
00:04:48,900 --> 00:04:51,750
Pero lo importante es que ahora entiendes

93
00:04:51,750 --> 00:04:53,160
como funciona el cierre

94
00:04:53,160 --> 00:04:55,370
y cómo y cuándo aparece.

95
00:04:55,370 --> 00:04:57,890
Así que este fue otro gran ejemplo.

96
00:04:57,890 --> 00:04:59,910
de un cierre que aparece.

97
00:04:59,910 --> 00:05:01,840
De todas formas con esto hemos terminado

98
00:05:01,840 --> 00:05:04,940
esta sección bastante importante sobre funciones.

99
00:05:04,940 --> 00:05:06,160
Y así en el siguiente,

100
00:05:06,160 --> 00:05:09,780
finalmente construiremos otro proyecto visual

101
00:05:09,780 --> 00:05:12,100
con una interfaz gráfica de usuario

102
00:05:12,100 --> 00:05:14,360
lo cual es realmente emocionante.

103
00:05:14,360 --> 00:05:16,690
Así que esa sección se trata de arreglos,

104
00:05:16,690 --> 00:05:20,300
y vamos a construir juntos una aplicación increíble allí.

105
00:05:20,300 --> 00:05:22,953
Así que espero verte allí lo antes posible.