WEBVTT 00:00:00.485 --> 00:00:05.535 He creado esta página para que practiquemos con ella. 00:00:05.535 --> 00:00:08.345 De hecho es muy aburrida. 00:00:08.345 --> 00:00:12.393 No tiene ningún contenido y este botón 00:00:12.393 --> 00:00:16.001 no hace absolutamente nada cuando presiono el ratón sobre él. 00:00:16.001 --> 00:00:18.851 Vamos a hacer que este botón sea interactivo. 00:00:18.851 --> 00:00:21.263 Para que cuando el usuario presione el ratón sobre él, 00:00:21.263 --> 00:00:24.280 el texto que está dentro del botón cambie. 00:00:24.280 --> 00:00:27.220 El primer paso es encontrar el elemento 00:00:27.220 --> 00:00:30.061 en el que queremos poner un detector de eventos. 00:00:30.061 --> 00:00:32.652 Y en este caso ese elemento es el botón. 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. 00:00:36.052 --> 00:00:39.152 Así que vamos a crear una variable "clicker Button" 00:00:39.152 --> 00:00:45.093 y vamos a usar "document.getElementById" 00:00:45.106 --> 00:00:48.666 para obtener el elemento y almacenarlo en esa variable. 00:00:48.749 --> 00:00:53.189 El siguiente paso es definir una función 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. 00:00:57.269 --> 00:01:02.442 La voy a llamar en "onButtonClick", 00:01:02.442 --> 00:01:07.009 y voy a poner mi función vacía, 00:01:07.009 --> 00:01:10.170 y claro que tengo que poner algo aquí dentro, 00:01:10.170 --> 00:01:12.422 sino no será una función muy interesante. 00:01:12.422 --> 00:01:14.950 Entonces, para cambiar el texto en el botón, podemos usar 00:01:14.950 --> 00:01:20.320 la variable "clickerButton" y definir el contenido de "textContent". 00:01:20.330 --> 00:01:24.800 "Oh wow, you clicked me" (Oh wow, presionaste el ratón sobre mí.) 00:01:24.800 --> 00:01:27.410 ¡Viva, qué botón tan feliz! 00:01:27.410 --> 00:01:29.239 No es mucho código pero más tarde 00:01:29.239 --> 00:01:33.061 podemos hacer algo más complicado, una vez que logremos que funcione. 00:01:33.061 --> 00:01:37.611 Todo lo que hemos hecho hasta aquí con nuestro código es definir variables. 00:01:37.611 --> 00:01:42.028 Así que sigue sin pasar nada cuando presionamos el botón. 00:01:42.028 --> 00:01:45.039 El paso final para juntarlo todo, 00:01:45.039 --> 00:01:48.559 es decirle al navegador que debería llamar 00:01:48.561 --> 00:01:51.989 a la función que definimos siempre que el evento "click" 00:01:51.989 --> 00:01:54.825 suceda en el botón que encontramos. 00:01:54.825 --> 00:01:58.857 Podemos hacer eso usando "addEventListener", 00:01:58.857 --> 00:02:00.801 en el elemento "Button". 00:02:00.801 --> 00:02:05.551 "clickerButton.addEventListener();" 00:02:05.552 --> 00:02:10.924 Y le tenemos que pasar dos argumentos a este método. 00:02:10.924 --> 00:02:14.805 El primero es el nombre del evento "click", 00:02:14.805 --> 00:02:18.276 y el segundo es el nombre de la función que queremos llamar, 00:02:18.276 --> 00:02:23.148 cuando el evento suceda: "onButtonClick". 00:02:23.148 --> 00:02:27.578 Ahora, pausa esta guía paso a paso y presiona el ratón. 00:02:28.681 --> 00:02:30.102 ¿Funcionó? 00:02:30.102 --> 00:02:33.109 Eso espero, a mí si me funcionó. 00:02:33.109 --> 00:02:36.496 Vamos a hablar más acerca de lo que hace esta función, 00:02:36.496 --> 00:02:38.352 porque es un poco difícil. 00:02:38.352 --> 00:02:41.434 A esta función la llamamos la función del detector de eventos, 00:02:41.434 --> 00:02:46.944 o la función de tipo "callback", porque esa es la manera en que la usamos. 00:02:46.944 --> 00:02:50.894 Sólo queremos llamar a la función si el evento sucede. 00:02:50.894 --> 00:02:55.834 Generalmente no queremos llamar a la función cuando se carga la página. 00:02:55.835 --> 00:02:58.496 Si quisiéramos llamar a la función cuando la página se carga, 00:02:58.496 --> 00:03:03.396 entonces tendíamos que añadir una línea, como ésta, en la parte de abajo. 00:03:03.396 --> 00:03:06.619 Fíjate en los paréntesis que ponemos después de la función, 00:03:06.619 --> 00:03:10.028 recuerda, poner paréntesis es la manera en que llamamos una función. 00:03:10.028 --> 00:03:13.890 Si no los ponemos, entonces no estaremos llamando la función, 00:03:13.890 --> 00:03:17.072 sólo estaremos haciendo referencia a ella, y es lo que estamos haciendo 00:03:17.072 --> 00:03:19.070 cuando la pasamos como un argumento en esta línea. 00:03:19.070 --> 00:03:20.707 Sólo le estamos diciendo al navegador: 00:03:20.707 --> 00:03:22.996 "Oye, aquí hay una función que deberás 00:03:22.996 --> 00:03:26.104 llamar más tarde, ahora no". 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, 00:03:32.494 --> 00:03:36.290 porque entonces sólo estarías pasando el valor que te regresa la función 00:03:36.290 --> 00:03:38.178 y no la función en sí misma. 00:03:38.178 --> 00:03:39.754 Si accidentalmente hiciera eso, 00:03:39.754 --> 00:03:42.082 vería el texto del botón cambiado cuando cargara la página, 00:03:42.082 --> 00:03:44.445 y no vería ningún cambio después. 00:03:44.445 --> 00:03:47.297 Para arreglar eso, sólo debo quitar los paréntesis 00:03:47.297 --> 00:03:50.356 que puse accidentalmente, y ahora mi función 00:03:50.356 --> 00:03:53.919 sólo se llamará cuando presione el ratón sobre el botón. 00:03:53.919 --> 00:03:56.542 Otra manera en la que podemos hacer esto 00:03:56.542 --> 00:04:02.508 es pasando una función anónima a este método que tenemos aquí. 00:04:02.508 --> 00:04:05.899 Una función anónima es una función que no tiene un nombre, 00:04:05.899 --> 00:04:10.497 y que simplemente especificamos en línea. 00:04:10.497 --> 00:04:15.487 Voy a copiar y pegar la línea que añade el detector de eventos, 00:04:15.487 --> 00:04:18.149 y te voy a mostrar esta opción paso a paso, 00:04:18.149 --> 00:04:20.289 para que veas lo que quiero decir. 00:04:20.296 --> 00:04:22.861 Voy a borrar el nombre de la función, 00:04:22.861 --> 00:04:26.431 y la voy a reemplazar con la definición de la función. 00:04:26.431 --> 00:04:31.939 Sólo tengo que pegar esto aquí, ok. 00:04:31.939 --> 00:04:37.939 Entonces, estas dos líneas de código hacen exactamente lo mismo. 00:04:37.939 --> 00:04:40.052 Bueno, casi exactamente lo mismo. 00:04:40.052 --> 00:04:42.307 Las dos están pasando una función 00:04:42.307 --> 00:04:44.488 con el mismo código dentro. 00:04:44.488 --> 00:04:50.048 La diferencia es que la primera pasa el nombre de una función que definimos arriba, 00:04:50.048 --> 00:04:54.816 y la segunda está definiendo la función anónima en línea, 00:04:54.816 --> 00:04:58.347 al mismo tiempo que la pasa. 00:04:58.347 --> 00:05:02.827 Las dos técnicas funcionan, muchos desarrolladores prefieren las funciones con nombre 00:05:02.827 --> 00:05:05.628 porque es más fácil leer el código, 00:05:05.628 --> 00:05:07.718 y podría ser un poco más fácil depurar, 00:05:07.719 --> 00:05:10.039 y luego podrías llamar las funciones con nombre 00:05:10.039 --> 00:05:13.151 en otro momento o desde otros eventos. 00:05:13.151 --> 00:05:15.510 Pero depende de ti qué usar, 00:05:15.510 --> 00:05:18.271 solamente no uses las dos al mismo tiempo, porque entonces 00:05:18.271 --> 00:05:20.672 el navegador terminará por llamar a las dos funciones 00:05:20.672 --> 00:05:22.135 cuando el evento "click" suceda, 00:05:22.135 --> 00:05:25.894 y no hay una razón para llamar esta función dos veces. 00:05:25.894 --> 00:05:29.448 Voy a continuar y voy a borrar la versión anónima de la función, 00:05:29.448 --> 00:05:31.920 porque prefiero la primera forma. 00:05:31.920 --> 00:05:34.254 Hay muchas cosas que puedes hacer ahora que 00:05:34.254 --> 00:05:35.954 sabes cómo añadir detectores de eventos. 00:05:35.954 --> 00:05:38.095 Podrías añadirlos a varias partes de tu página, 00:05:38.095 --> 00:05:40.028 podrías detectar diferente eventos, 00:05:40.028 --> 00:05:41.905 estaremos hablando de esto después, 00:05:41.905 --> 00:05:43.931 y podrías modificar el DOM con cualquiera 00:05:43.931 --> 00:05:46.031 de las formas que aprendiste antes. 00:05:46.040 --> 00:05:47.880 Y no sólo tienes que modificar el elemento 00:05:47.880 --> 00:05:49.941 con el cual estás teniendo una interacción, 00:05:49.941 --> 00:05:52.781 puedes modificar cualquier cosa en la página. 00:05:52.781 --> 00:05:55.636 Pruébalo y descubre lo que puedes hacer.