1
00:00:00,485 --> 00:00:05,535
He creado esta página para que practiquemos con ella.

2
00:00:05,535 --> 00:00:08,345
De hecho es muy aburrida.

3
00:00:08,345 --> 00:00:12,393
No tiene ningún contenido y este botón

4
00:00:12,393 --> 00:00:16,001
no hace absolutamente nada cuando presiono el ratón sobre él.

5
00:00:16,001 --> 00:00:18,851
Vamos a hacer que este botón sea interactivo.

6
00:00:18,851 --> 00:00:21,263
Para que cuando el usuario presione el ratón sobre él,

7
00:00:21,263 --> 00:00:24,280
el texto que está dentro del botón cambie.

8
00:00:24,280 --> 00:00:27,220
El primer paso es encontrar el elemento

9
00:00:27,220 --> 00:00:30,061
en el que queremos poner un detector de eventos.

10
00:00:30,061 --> 00:00:32,652
Y en este caso ese elemento es el botón.

11
00:00:32,652 --> 00:00:36,042
Y el botón nos da una idea de que se tiene que presionar el ratón en él.

12
00:00:36,052 --> 00:00:39,152
Así que vamos a crear una variable "clicker Button"

13
00:00:39,152 --> 00:00:45,093
y vamos a usar "document.getElementById"

14
00:00:45,106 --> 00:00:48,666
para obtener el elemento y almacenarlo en esa variable.

15
00:00:48,749 --> 00:00:53,189
El siguiente paso es definir una función

16
00:00:53,189 --> 00:00:57,269
que será llamada una vez que suceda el evento "click", es decir, que se presione el ratón.

17
00:00:57,269 --> 00:01:02,442
La voy a llamar en "onButtonClick",

18
00:01:02,442 --> 00:01:07,009
y voy a poner mi función vacía,

19
00:01:07,009 --> 00:01:10,170
y claro que tengo que poner algo aquí dentro,

20
00:01:10,170 --> 00:01:12,422
sino no será una función muy interesante.

21
00:01:12,422 --> 00:01:14,950
Entonces, para cambiar el texto en el botón, podemos usar

22
00:01:14,950 --> 00:01:20,320
la variable "clickerButton" y definir el contenido de "textContent".

23
00:01:20,330 --> 00:01:24,800
"Oh wow, you clicked me" (Oh wow, presionaste el ratón sobre mí.)

24
00:01:24,800 --> 00:01:27,410
¡Viva, qué botón tan feliz!

25
00:01:27,410 --> 00:01:29,239
No es mucho código pero más tarde

26
00:01:29,239 --> 00:01:33,061
podemos hacer algo más complicado, una vez que logremos que funcione.

27
00:01:33,061 --> 00:01:37,611
Todo lo que hemos hecho hasta aquí con nuestro código es definir variables.

28
00:01:37,611 --> 00:01:42,028
Así que sigue sin pasar nada cuando presionamos el botón.

29
00:01:42,028 --> 00:01:45,039
El paso final para juntarlo todo,

30
00:01:45,039 --> 00:01:48,559
es decirle al navegador que debería llamar

31
00:01:48,561 --> 00:01:51,989
a la función que definimos siempre que el evento "click"

32
00:01:51,989 --> 00:01:54,825
suceda en el botón que encontramos.

33
00:01:54,825 --> 00:01:58,857
Podemos hacer eso usando "addEventListener",

34
00:01:58,857 --> 00:02:00,801
en el elemento "Button".

35
00:02:00,801 --> 00:02:05,551
"clickerButton.addEventListener();"

36
00:02:05,552 --> 00:02:10,924
Y le tenemos que pasar dos argumentos a este método.

37
00:02:10,924 --> 00:02:14,805
El primero es el nombre del evento "click",

38
00:02:14,805 --> 00:02:18,276
y el segundo es el nombre de la función que queremos llamar,

39
00:02:18,276 --> 00:02:23,148
cuando el evento suceda: "onButtonClick".

40
00:02:23,148 --> 00:02:27,578
Ahora, pausa esta guía paso a paso y presiona el ratón.

41
00:02:28,681 --> 00:02:30,102
¿Funcionó?

42
00:02:30,102 --> 00:02:33,109
Eso espero, a mí si me funcionó.

43
00:02:33,109 --> 00:02:36,496
Vamos a hablar más acerca de lo que hace esta función,

44
00:02:36,496 --> 00:02:38,352
porque es un poco difícil.

45
00:02:38,352 --> 00:02:41,434
A esta función la llamamos la función del detector de eventos,

46
00:02:41,434 --> 00:02:46,944
o la función de tipo "callback", porque esa es la manera en que la usamos.

47
00:02:46,944 --> 00:02:50,894
Sólo queremos llamar a la función si el evento sucede.

48
00:02:50,894 --> 00:02:55,834
Generalmente no queremos llamar a la función cuando se carga la página.

49
00:02:55,835 --> 00:02:58,496
Si quisiéramos llamar a la función cuando la página se carga,

50
00:02:58,496 --> 00:03:03,396
entonces tendíamos que añadir una línea, como ésta, en la parte de abajo.

51
00:03:03,396 --> 00:03:06,619
Fíjate en los paréntesis que ponemos después de la función,

52
00:03:06,619 --> 00:03:10,028
recuerda, poner paréntesis es la manera en que llamamos una función.

53
00:03:10,028 --> 00:03:13,890
Si no los ponemos, entonces no estaremos llamando la función,

54
00:03:13,890 --> 00:03:17,072
sólo estaremos haciendo referencia a ella, y es lo que estamos haciendo

55
00:03:17,072 --> 00:03:19,070
cuando la pasamos como un argumento en esta línea.

56
00:03:19,070 --> 00:03:20,707
Sólo le estamos diciendo al navegador:

57
00:03:20,707 --> 00:03:22,996
"Oye, aquí hay una función que deberás

58
00:03:22,996 --> 00:03:26,104
llamar más tarde, ahora no".

59
00:03:27,384 --> 00:03:32,494
Así que asegúrate de no poner paréntesis aquí después del nombre de la función,

60
00:03:32,494 --> 00:03:36,290
porque entonces sólo estarías pasando el valor que te regresa la función

61
00:03:36,290 --> 00:03:38,178
y no la función en sí misma.

62
00:03:38,178 --> 00:03:39,754
Si accidentalmente hiciera eso,

63
00:03:39,754 --> 00:03:42,082
vería el texto del botón cambiado cuando cargara la página,

64
00:03:42,082 --> 00:03:44,445
y no vería ningún cambio después.

65
00:03:44,445 --> 00:03:47,297
Para arreglar eso, sólo debo quitar los paréntesis

66
00:03:47,297 --> 00:03:50,356
que puse accidentalmente, y ahora mi función

67
00:03:50,356 --> 00:03:53,919
sólo se llamará cuando presione el ratón sobre el botón.

68
00:03:53,919 --> 00:03:56,542
Otra manera en la que podemos hacer esto

69
00:03:56,542 --> 00:04:02,508
es pasando una función anónima a este método que tenemos aquí.

70
00:04:02,508 --> 00:04:05,899
Una función anónima es una función que no tiene un nombre,

71
00:04:05,899 --> 00:04:10,497
y que simplemente especificamos en línea.

72
00:04:10,497 --> 00:04:15,487
Voy a copiar y pegar la línea que añade el detector de eventos,

73
00:04:15,487 --> 00:04:18,149
y te voy a mostrar esta opción paso a paso,

74
00:04:18,149 --> 00:04:20,289
para que veas lo que quiero decir.

75
00:04:20,296 --> 00:04:22,861
Voy a borrar el nombre de la función,

76
00:04:22,861 --> 00:04:26,431
y la voy a reemplazar con la definición de la función.

77
00:04:26,431 --> 00:04:31,939
Sólo tengo que pegar esto aquí, ok.

78
00:04:31,939 --> 00:04:37,939
Entonces, estas dos líneas de código hacen exactamente lo mismo.

79
00:04:37,939 --> 00:04:40,052
Bueno, casi exactamente lo mismo.

80
00:04:40,052 --> 00:04:42,307
Las dos están pasando una función

81
00:04:42,307 --> 00:04:44,488
con el mismo código dentro.

82
00:04:44,488 --> 00:04:50,048
La diferencia es que la primera pasa el nombre de una función que definimos arriba,

83
00:04:50,048 --> 00:04:54,816
y la segunda está definiendo la función anónima en línea,

84
00:04:54,816 --> 00:04:58,347
al mismo tiempo que la pasa.

85
00:04:58,347 --> 00:05:02,827
Las dos técnicas funcionan, muchos desarrolladores prefieren las funciones con nombre

86
00:05:02,827 --> 00:05:05,628
porque es más fácil leer el código,

87
00:05:05,628 --> 00:05:07,718
y podría ser un poco más fácil depurar,

88
00:05:07,719 --> 00:05:10,039
y luego podrías llamar las funciones con nombre

89
00:05:10,039 --> 00:05:13,151
en otro momento o desde otros eventos.

90
00:05:13,151 --> 00:05:15,510
Pero depende de ti qué usar,

91
00:05:15,510 --> 00:05:18,271
solamente no uses las dos al mismo tiempo, porque entonces

92
00:05:18,271 --> 00:05:20,672
el navegador terminará por llamar a las dos funciones

93
00:05:20,672 --> 00:05:22,135
cuando el evento "click" suceda,

94
00:05:22,135 --> 00:05:25,894
y no hay una razón para llamar esta función dos veces.

95
00:05:25,894 --> 00:05:29,448
Voy a continuar y voy a borrar la versión anónima de la función,

96
00:05:29,448 --> 00:05:31,920
porque prefiero la primera forma.

97
00:05:31,920 --> 00:05:34,254
Hay muchas cosas que puedes hacer ahora que

98
00:05:34,254 --> 00:05:35,954
sabes cómo añadir detectores de eventos.

99
00:05:35,954 --> 00:05:38,095
Podrías añadirlos a varias partes de tu página,

100
00:05:38,095 --> 00:05:40,028
podrías detectar diferente eventos,

101
00:05:40,028 --> 00:05:41,905
estaremos hablando de esto después,

102
00:05:41,905 --> 00:05:43,931
y podrías modificar el DOM con cualquiera

103
00:05:43,931 --> 00:05:46,031
de las formas que aprendiste antes.

104
00:05:46,040 --> 00:05:47,880
Y no sólo tienes que modificar el elemento

105
00:05:47,880 --> 00:05:49,941
con el cual estás teniendo una interacción,

106
00:05:49,941 --> 00:05:52,781
puedes modificar cualquier cosa en la página.

107
00:05:52,781 --> 00:05:55,636
Pruébalo y descubre lo que puedes hacer.