[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.48,0:00:05.54,Default,,0000,0000,0000,,He creado esta página para que practiquemos con ella.
Dialogue: 0,0:00:05.54,0:00:08.34,Default,,0000,0000,0000,,De hecho es muy aburrida.
Dialogue: 0,0:00:08.34,0:00:12.39,Default,,0000,0000,0000,,No tiene ningún contenido y este botón
Dialogue: 0,0:00:12.39,0:00:16.00,Default,,0000,0000,0000,,no hace absolutamente nada cuando presiono el ratón sobre él.
Dialogue: 0,0:00:16.00,0:00:18.85,Default,,0000,0000,0000,,Vamos a hacer que este botón sea interactivo.
Dialogue: 0,0:00:18.85,0:00:21.26,Default,,0000,0000,0000,,Para que cuando el usuario presione el ratón sobre él,
Dialogue: 0,0:00:21.26,0:00:24.28,Default,,0000,0000,0000,,el texto que está dentro del botón cambie.
Dialogue: 0,0:00:24.28,0:00:27.22,Default,,0000,0000,0000,,El primer paso es encontrar el elemento
Dialogue: 0,0:00:27.22,0:00:30.06,Default,,0000,0000,0000,,en el que queremos poner un detector de eventos.
Dialogue: 0,0:00:30.06,0:00:32.65,Default,,0000,0000,0000,,Y en este caso ese elemento es el botón.
Dialogue: 0,0:00:32.65,0:00:36.04,Default,,0000,0000,0000,,Y el botón nos da una idea de que se tiene que presionar el ratón en él.
Dialogue: 0,0:00:36.05,0:00:39.15,Default,,0000,0000,0000,,Así que vamos a crear una variable "clicker Button"
Dialogue: 0,0:00:39.15,0:00:45.09,Default,,0000,0000,0000,,y vamos a usar "document.getElementById"
Dialogue: 0,0:00:45.11,0:00:48.67,Default,,0000,0000,0000,,para obtener el elemento y almacenarlo en esa variable.
Dialogue: 0,0:00:48.75,0:00:53.19,Default,,0000,0000,0000,,El siguiente paso es definir una función
Dialogue: 0,0:00:53.19,0:00:57.27,Default,,0000,0000,0000,,que será llamada una vez que suceda el evento "click", es decir, que se presione el ratón.
Dialogue: 0,0:00:57.27,0:01:02.44,Default,,0000,0000,0000,,La voy a llamar en "onButtonClick",
Dialogue: 0,0:01:02.44,0:01:07.01,Default,,0000,0000,0000,,y voy a poner mi función vacía,
Dialogue: 0,0:01:07.01,0:01:10.17,Default,,0000,0000,0000,,y claro que tengo que poner algo aquí dentro,
Dialogue: 0,0:01:10.17,0:01:12.42,Default,,0000,0000,0000,,sino no será una función muy interesante.
Dialogue: 0,0:01:12.42,0:01:14.95,Default,,0000,0000,0000,,Entonces, para cambiar el texto en el botón, podemos usar
Dialogue: 0,0:01:14.95,0:01:20.32,Default,,0000,0000,0000,,la variable "clickerButton" y definir el contenido de "textContent".
Dialogue: 0,0:01:20.33,0:01:24.80,Default,,0000,0000,0000,,"Oh wow, you clicked me" (Oh wow, presionaste el ratón sobre mí.)
Dialogue: 0,0:01:24.80,0:01:27.41,Default,,0000,0000,0000,,¡Viva, qué botón tan feliz!
Dialogue: 0,0:01:27.41,0:01:29.24,Default,,0000,0000,0000,,No es mucho código pero más tarde
Dialogue: 0,0:01:29.24,0:01:33.06,Default,,0000,0000,0000,,podemos hacer algo más complicado, una vez que logremos que funcione.
Dialogue: 0,0:01:33.06,0:01:37.61,Default,,0000,0000,0000,,Todo lo que hemos hecho hasta aquí con nuestro código es definir variables.
Dialogue: 0,0:01:37.61,0:01:42.03,Default,,0000,0000,0000,,Así que sigue sin pasar nada cuando presionamos el botón.
Dialogue: 0,0:01:42.03,0:01:45.04,Default,,0000,0000,0000,,El paso final para juntarlo todo,
Dialogue: 0,0:01:45.04,0:01:48.56,Default,,0000,0000,0000,,es decirle al navegador que debería llamar
Dialogue: 0,0:01:48.56,0:01:51.99,Default,,0000,0000,0000,,a la función que definimos siempre que el evento "click"
Dialogue: 0,0:01:51.99,0:01:54.82,Default,,0000,0000,0000,,suceda en el botón que encontramos.
Dialogue: 0,0:01:54.82,0:01:58.86,Default,,0000,0000,0000,,Podemos hacer eso usando "addEventListener",
Dialogue: 0,0:01:58.86,0:02:00.80,Default,,0000,0000,0000,,en el elemento "Button".
Dialogue: 0,0:02:00.80,0:02:05.55,Default,,0000,0000,0000,,"clickerButton.addEventListener();"
Dialogue: 0,0:02:05.55,0:02:10.92,Default,,0000,0000,0000,,Y le tenemos que pasar dos argumentos a este método.
Dialogue: 0,0:02:10.92,0:02:14.80,Default,,0000,0000,0000,,El primero es el nombre del evento "click",
Dialogue: 0,0:02:14.80,0:02:18.28,Default,,0000,0000,0000,,y el segundo es el nombre de la función que queremos llamar,
Dialogue: 0,0:02:18.28,0:02:23.15,Default,,0000,0000,0000,,cuando el evento suceda: "onButtonClick".
Dialogue: 0,0:02:23.15,0:02:27.58,Default,,0000,0000,0000,,Ahora, pausa esta guía paso a paso y presiona el ratón.
Dialogue: 0,0:02:28.68,0:02:30.10,Default,,0000,0000,0000,,¿Funcionó?
Dialogue: 0,0:02:30.10,0:02:33.11,Default,,0000,0000,0000,,Eso espero, a mí si me funcionó.
Dialogue: 0,0:02:33.11,0:02:36.50,Default,,0000,0000,0000,,Vamos a hablar más acerca de lo que hace esta función,
Dialogue: 0,0:02:36.50,0:02:38.35,Default,,0000,0000,0000,,porque es un poco difícil.
Dialogue: 0,0:02:38.35,0:02:41.43,Default,,0000,0000,0000,,A esta función la llamamos la función del detector de eventos,
Dialogue: 0,0:02:41.43,0:02:46.94,Default,,0000,0000,0000,,o la función de tipo "callback", porque esa es la manera en que la usamos.
Dialogue: 0,0:02:46.94,0:02:50.89,Default,,0000,0000,0000,,Sólo queremos llamar a la función si el evento sucede.
Dialogue: 0,0:02:50.89,0:02:55.83,Default,,0000,0000,0000,,Generalmente no queremos llamar a la función cuando se carga la página.
Dialogue: 0,0:02:55.84,0:02:58.50,Default,,0000,0000,0000,,Si quisiéramos llamar a la función cuando la página se carga,
Dialogue: 0,0:02:58.50,0:03:03.40,Default,,0000,0000,0000,,entonces tendíamos que añadir una línea, como ésta, en la parte de abajo.
Dialogue: 0,0:03:03.40,0:03:06.62,Default,,0000,0000,0000,,Fíjate en los paréntesis que ponemos después de la función,
Dialogue: 0,0:03:06.62,0:03:10.03,Default,,0000,0000,0000,,recuerda, poner paréntesis es la manera en que llamamos una función.
Dialogue: 0,0:03:10.03,0:03:13.89,Default,,0000,0000,0000,,Si no los ponemos, entonces no estaremos llamando la función,
Dialogue: 0,0:03:13.89,0:03:17.07,Default,,0000,0000,0000,,sólo estaremos haciendo referencia a ella, y es lo que estamos haciendo
Dialogue: 0,0:03:17.07,0:03:19.07,Default,,0000,0000,0000,,cuando la pasamos como un argumento en esta línea.
Dialogue: 0,0:03:19.07,0:03:20.71,Default,,0000,0000,0000,,Sólo le estamos diciendo al navegador:
Dialogue: 0,0:03:20.71,0:03:22.100,Default,,0000,0000,0000,,"Oye, aquí hay una función que deberás
Dialogue: 0,0:03:22.100,0:03:26.10,Default,,0000,0000,0000,,llamar más tarde, ahora no".
Dialogue: 0,0:03:27.38,0:03:32.49,Default,,0000,0000,0000,,Así que asegúrate de no poner paréntesis aquí después del nombre de la función,
Dialogue: 0,0:03:32.49,0:03:36.29,Default,,0000,0000,0000,,porque entonces sólo estarías pasando el valor que te regresa la función
Dialogue: 0,0:03:36.29,0:03:38.18,Default,,0000,0000,0000,,y no la función en sí misma.
Dialogue: 0,0:03:38.18,0:03:39.75,Default,,0000,0000,0000,,Si accidentalmente hiciera eso,
Dialogue: 0,0:03:39.75,0:03:42.08,Default,,0000,0000,0000,,vería el texto del botón cambiado cuando cargara la página,
Dialogue: 0,0:03:42.08,0:03:44.44,Default,,0000,0000,0000,,y no vería ningún cambio después.
Dialogue: 0,0:03:44.44,0:03:47.30,Default,,0000,0000,0000,,Para arreglar eso, sólo debo quitar los paréntesis
Dialogue: 0,0:03:47.30,0:03:50.36,Default,,0000,0000,0000,,que puse accidentalmente, y ahora mi función
Dialogue: 0,0:03:50.36,0:03:53.92,Default,,0000,0000,0000,,sólo se llamará cuando presione el ratón sobre el botón.
Dialogue: 0,0:03:53.92,0:03:56.54,Default,,0000,0000,0000,,Otra manera en la que podemos hacer esto
Dialogue: 0,0:03:56.54,0:04:02.51,Default,,0000,0000,0000,,es pasando una función anónima a este método que tenemos aquí.
Dialogue: 0,0:04:02.51,0:04:05.90,Default,,0000,0000,0000,,Una función anónima es una función que no tiene un nombre,
Dialogue: 0,0:04:05.90,0:04:10.50,Default,,0000,0000,0000,,y que simplemente especificamos en línea.
Dialogue: 0,0:04:10.50,0:04:15.49,Default,,0000,0000,0000,,Voy a copiar y pegar la línea que añade el detector de eventos,
Dialogue: 0,0:04:15.49,0:04:18.15,Default,,0000,0000,0000,,y te voy a mostrar esta opción paso a paso,
Dialogue: 0,0:04:18.15,0:04:20.29,Default,,0000,0000,0000,,para que veas lo que quiero decir.
Dialogue: 0,0:04:20.30,0:04:22.86,Default,,0000,0000,0000,,Voy a borrar el nombre de la función,
Dialogue: 0,0:04:22.86,0:04:26.43,Default,,0000,0000,0000,,y la voy a reemplazar con la definición de la función.
Dialogue: 0,0:04:26.43,0:04:31.94,Default,,0000,0000,0000,,Sólo tengo que pegar esto aquí, ok.
Dialogue: 0,0:04:31.94,0:04:37.94,Default,,0000,0000,0000,,Entonces, estas dos líneas de código hacen exactamente lo mismo.
Dialogue: 0,0:04:37.94,0:04:40.05,Default,,0000,0000,0000,,Bueno, casi exactamente lo mismo.
Dialogue: 0,0:04:40.05,0:04:42.31,Default,,0000,0000,0000,,Las dos están pasando una función
Dialogue: 0,0:04:42.31,0:04:44.49,Default,,0000,0000,0000,,con el mismo código dentro.
Dialogue: 0,0:04:44.49,0:04:50.05,Default,,0000,0000,0000,,La diferencia es que la primera pasa el nombre de una función que definimos arriba,
Dialogue: 0,0:04:50.05,0:04:54.82,Default,,0000,0000,0000,,y la segunda está definiendo la función anónima en línea,
Dialogue: 0,0:04:54.82,0:04:58.35,Default,,0000,0000,0000,,al mismo tiempo que la pasa.
Dialogue: 0,0:04:58.35,0:05:02.83,Default,,0000,0000,0000,,Las dos técnicas funcionan, muchos desarrolladores prefieren las funciones con nombre
Dialogue: 0,0:05:02.83,0:05:05.63,Default,,0000,0000,0000,,porque es más fácil leer el código,
Dialogue: 0,0:05:05.63,0:05:07.72,Default,,0000,0000,0000,,y podría ser un poco más fácil depurar,
Dialogue: 0,0:05:07.72,0:05:10.04,Default,,0000,0000,0000,,y luego podrías llamar las funciones con nombre
Dialogue: 0,0:05:10.04,0:05:13.15,Default,,0000,0000,0000,,en otro momento o desde otros eventos.
Dialogue: 0,0:05:13.15,0:05:15.51,Default,,0000,0000,0000,,Pero depende de ti qué usar,
Dialogue: 0,0:05:15.51,0:05:18.27,Default,,0000,0000,0000,,solamente no uses las dos al mismo tiempo, porque entonces
Dialogue: 0,0:05:18.27,0:05:20.67,Default,,0000,0000,0000,,el navegador terminará por llamar a las dos funciones
Dialogue: 0,0:05:20.67,0:05:22.14,Default,,0000,0000,0000,,cuando el evento "click" suceda,
Dialogue: 0,0:05:22.14,0:05:25.89,Default,,0000,0000,0000,,y no hay una razón para llamar esta función dos veces.
Dialogue: 0,0:05:25.89,0:05:29.45,Default,,0000,0000,0000,,Voy a continuar y voy a borrar la versión anónima de la función,
Dialogue: 0,0:05:29.45,0:05:31.92,Default,,0000,0000,0000,,porque prefiero la primera forma.
Dialogue: 0,0:05:31.92,0:05:34.25,Default,,0000,0000,0000,,Hay muchas cosas que puedes hacer ahora que
Dialogue: 0,0:05:34.25,0:05:35.95,Default,,0000,0000,0000,,sabes cómo añadir detectores de eventos.
Dialogue: 0,0:05:35.95,0:05:38.10,Default,,0000,0000,0000,,Podrías añadirlos a varias partes de tu página,
Dialogue: 0,0:05:38.10,0:05:40.03,Default,,0000,0000,0000,,podrías detectar diferente eventos,
Dialogue: 0,0:05:40.03,0:05:41.90,Default,,0000,0000,0000,,estaremos hablando de esto después,
Dialogue: 0,0:05:41.90,0:05:43.93,Default,,0000,0000,0000,,y podrías modificar el DOM con cualquiera
Dialogue: 0,0:05:43.93,0:05:46.03,Default,,0000,0000,0000,,de las formas que aprendiste antes.
Dialogue: 0,0:05:46.04,0:05:47.88,Default,,0000,0000,0000,,Y no sólo tienes que modificar el elemento
Dialogue: 0,0:05:47.88,0:05:49.94,Default,,0000,0000,0000,,con el cual estás teniendo una interacción,
Dialogue: 0,0:05:49.94,0:05:52.78,Default,,0000,0000,0000,,puedes modificar cualquier cosa en la página.
Dialogue: 0,0:05:52.78,0:05:55.64,Default,,0000,0000,0000,,Pruébalo y descubre lo que puedes hacer.