0:00:00.485,0:00:05.535
He creado esta página para que practiquemos con ella.

0:00:05.535,0:00:08.345
De hecho es muy aburrida.

0:00:08.345,0:00:12.393
No tiene ningún contenido y este botón

0:00:12.393,0:00:16.001
no hace absolutamente nada cuando presiono el ratón sobre él.

0:00:16.001,0:00:18.851
Vamos a hacer que este botón sea interactivo.

0:00:18.851,0:00:21.263
Para que cuando el usuario presione el ratón sobre él,

0:00:21.263,0:00:24.280
el texto que está dentro del botón cambie.

0:00:24.280,0:00:27.220
El primer paso es encontrar el elemento

0:00:27.220,0:00:30.061
en el que queremos poner un detector de eventos.

0:00:30.061,0:00:32.652
Y en este caso ese elemento es el botón.

0:00:32.652,0:00:36.042
Y el botón nos da una idea de que se tiene que presionar el ratón en él.

0:00:36.052,0:00:39.152
Así que vamos a crear una variable "clicker Button"

0:00:39.152,0:00:45.093
y vamos a usar "document.getElementById"

0:00:45.106,0:00:48.666
para obtener el elemento y almacenarlo en esa variable.

0:00:48.749,0:00:53.189
El siguiente paso es definir una función

0:00:53.189,0:00:57.269
que será llamada una vez que suceda el evento "click", es decir, que se presione el ratón.

0:00:57.269,0:01:02.442
La voy a llamar en "onButtonClick",

0:01:02.442,0:01:07.009
y voy a poner mi función vacía,

0:01:07.009,0:01:10.170
y claro que tengo que poner algo aquí dentro,

0:01:10.170,0:01:12.422
sino no será una función muy interesante.

0:01:12.422,0:01:14.950
Entonces, para cambiar el texto en el botón, podemos usar

0:01:14.950,0:01:20.320
la variable "clickerButton" y definir el contenido de "textContent".

0:01:20.330,0:01:24.800
"Oh wow, you clicked me" (Oh wow, presionaste el ratón sobre mí.)

0:01:24.800,0:01:27.410
¡Viva, qué botón tan feliz!

0:01:27.410,0:01:29.239
No es mucho código pero más tarde

0:01:29.239,0:01:33.061
podemos hacer algo más complicado, una vez que logremos que funcione.

0:01:33.061,0:01:37.611
Todo lo que hemos hecho hasta aquí con nuestro código es definir variables.

0:01:37.611,0:01:42.028
Así que sigue sin pasar nada cuando presionamos el botón.

0:01:42.028,0:01:45.039
El paso final para juntarlo todo,

0:01:45.039,0:01:48.559
es decirle al navegador que debería llamar

0:01:48.561,0:01:51.989
a la función que definimos siempre que el evento "click"

0:01:51.989,0:01:54.825
suceda en el botón que encontramos.

0:01:54.825,0:01:58.857
Podemos hacer eso usando "addEventListener",

0:01:58.857,0:02:00.801
en el elemento "Button".

0:02:00.801,0:02:05.551
"clickerButton.addEventListener();"

0:02:05.552,0:02:10.924
Y le tenemos que pasar dos argumentos a este método.

0:02:10.924,0:02:14.805
El primero es el nombre del evento "click",

0:02:14.805,0:02:18.276
y el segundo es el nombre de la función que queremos llamar,

0:02:18.276,0:02:23.148
cuando el evento suceda: "onButtonClick".

0:02:23.148,0:02:27.578
Ahora, pausa esta guía paso a paso y presiona el ratón.

0:02:28.681,0:02:30.102
¿Funcionó?

0:02:30.102,0:02:33.109
Eso espero, a mí si me funcionó.

0:02:33.109,0:02:36.496
Vamos a hablar más acerca de lo que hace esta función,

0:02:36.496,0:02:38.352
porque es un poco difícil.

0:02:38.352,0:02:41.434
A esta función la llamamos la función del detector de eventos,

0:02:41.434,0:02:46.944
o la función de tipo "callback", porque esa es la manera en que la usamos.

0:02:46.944,0:02:50.894
Sólo queremos llamar a la función si el evento sucede.

0:02:50.894,0:02:55.834
Generalmente no queremos llamar a la función cuando se carga la página.

0:02:55.835,0:02:58.496
Si quisiéramos llamar a la función cuando la página se carga,

0:02:58.496,0:03:03.396
entonces tendíamos que añadir una línea, como ésta, en la parte de abajo.

0:03:03.396,0:03:06.619
Fíjate en los paréntesis que ponemos después de la función,

0:03:06.619,0:03:10.028
recuerda, poner paréntesis es la manera en que llamamos una función.

0:03:10.028,0:03:13.890
Si no los ponemos, entonces no estaremos llamando la función,

0:03:13.890,0:03:17.072
sólo estaremos haciendo referencia a ella, y es lo que estamos haciendo

0:03:17.072,0:03:19.070
cuando la pasamos como un argumento en esta línea.

0:03:19.070,0:03:20.707
Sólo le estamos diciendo al navegador:

0:03:20.707,0:03:22.996
"Oye, aquí hay una función que deberás

0:03:22.996,0:03:26.104
llamar más tarde, ahora no".

0:03:27.384,0:03:32.494
Así que asegúrate de no poner paréntesis aquí después del nombre de la función,

0:03:32.494,0:03:36.290
porque entonces sólo estarías pasando el valor que te regresa la función

0:03:36.290,0:03:38.178
y no la función en sí misma.

0:03:38.178,0:03:39.754
Si accidentalmente hiciera eso,

0:03:39.754,0:03:42.082
vería el texto del botón cambiado cuando cargara la página,

0:03:42.082,0:03:44.445
y no vería ningún cambio después.

0:03:44.445,0:03:47.297
Para arreglar eso, sólo debo quitar los paréntesis

0:03:47.297,0:03:50.356
que puse accidentalmente, y ahora mi función

0:03:50.356,0:03:53.919
sólo se llamará cuando presione el ratón sobre el botón.

0:03:53.919,0:03:56.542
Otra manera en la que podemos hacer esto

0:03:56.542,0:04:02.508
es pasando una función anónima a este método que tenemos aquí.

0:04:02.508,0:04:05.899
Una función anónima es una función que no tiene un nombre,

0:04:05.899,0:04:10.497
y que simplemente especificamos en línea.

0:04:10.497,0:04:15.487
Voy a copiar y pegar la línea que añade el detector de eventos,

0:04:15.487,0:04:18.149
y te voy a mostrar esta opción paso a paso,

0:04:18.149,0:04:20.289
para que veas lo que quiero decir.

0:04:20.296,0:04:22.861
Voy a borrar el nombre de la función,

0:04:22.861,0:04:26.431
y la voy a reemplazar con la definición de la función.

0:04:26.431,0:04:31.939
Sólo tengo que pegar esto aquí, ok.

0:04:31.939,0:04:37.939
Entonces, estas dos líneas de código hacen exactamente lo mismo.

0:04:37.939,0:04:40.052
Bueno, casi exactamente lo mismo.

0:04:40.052,0:04:42.307
Las dos están pasando una función

0:04:42.307,0:04:44.488
con el mismo código dentro.

0:04:44.488,0:04:50.048
La diferencia es que la primera pasa el nombre de una función que definimos arriba,

0:04:50.048,0:04:54.816
y la segunda está definiendo la función anónima en línea,

0:04:54.816,0:04:58.347
al mismo tiempo que la pasa.

0:04:58.347,0:05:02.827
Las dos técnicas funcionan, muchos desarrolladores prefieren las funciones con nombre

0:05:02.827,0:05:05.628
porque es más fácil leer el código,

0:05:05.628,0:05:07.718
y podría ser un poco más fácil depurar,

0:05:07.719,0:05:10.039
y luego podrías llamar las funciones con nombre

0:05:10.039,0:05:13.151
en otro momento o desde otros eventos.

0:05:13.151,0:05:15.510
Pero depende de ti qué usar,

0:05:15.510,0:05:18.271
solamente no uses las dos al mismo tiempo, porque entonces

0:05:18.271,0:05:20.672
el navegador terminará por llamar a las dos funciones

0:05:20.672,0:05:22.135
cuando el evento "click" suceda,

0:05:22.135,0:05:25.894
y no hay una razón para llamar esta función dos veces.

0:05:25.894,0:05:29.448
Voy a continuar y voy a borrar la versión anónima de la función,

0:05:29.448,0:05:31.920
porque prefiero la primera forma.

0:05:31.920,0:05:34.254
Hay muchas cosas que puedes hacer ahora que

0:05:34.254,0:05:35.954
sabes cómo añadir detectores de eventos.

0:05:35.954,0:05:38.095
Podrías añadirlos a varias partes de tu página,

0:05:38.095,0:05:40.028
podrías detectar diferente eventos,

0:05:40.028,0:05:41.905
estaremos hablando de esto después,

0:05:41.905,0:05:43.931
y podrías modificar el DOM con cualquiera

0:05:43.931,0:05:46.031
de las formas que aprendiste antes.

0:05:46.040,0:05:47.880
Y no sólo tienes que modificar el elemento

0:05:47.880,0:05:49.941
con el cual estás teniendo una interacción,

0:05:49.941,0:05:52.781
puedes modificar cualquier cosa en la página.

0:05:52.781,0:05:55.636
Pruébalo y descubre lo que puedes hacer.