He creado esta página para que practiquemos con ella.
De hecho es muy aburrida.
No tiene ningún contenido y este botón
no hace absolutamente nada cuando presiono el ratón sobre él.
Vamos a hacer que este botón sea interactivo.
Para que cuando el usuario presione el ratón sobre él,
el texto que está dentro del botón cambie.
El primer paso es encontrar el elemento
en el que queremos poner un detector de eventos.
Y en este caso ese elemento es el botón.
Y el botón nos da una idea de que se tiene que presionar el ratón en él.
Así que vamos a crear una variable "clicker Button"
y vamos a usar "document.getElementById"
para obtener el elemento y almacenarlo en esa variable.
El siguiente paso es definir una función
que será llamada una vez que suceda el evento "click", es decir, que se presione el ratón.
La voy a llamar en "onButtonClick",
y voy a poner mi función vacía,
y claro que tengo que poner algo aquí dentro,
sino no será una función muy interesante.
Entonces, para cambiar el texto en el botón, podemos usar
la variable "clickerButton" y definir el contenido de "textContent".
"Oh wow, you clicked me" (Oh wow, presionaste el ratón sobre mí.)
¡Viva, qué botón tan feliz!
No es mucho código pero más tarde
podemos hacer algo más complicado, una vez que logremos que funcione.
Todo lo que hemos hecho hasta aquí con nuestro código es definir variables.
Así que sigue sin pasar nada cuando presionamos el botón.
El paso final para juntarlo todo,
es decirle al navegador que debería llamar
a la función que definimos siempre que el evento "click"
suceda en el botón que encontramos.
Podemos hacer eso usando "addEventListener",
en el elemento "Button".
"clickerButton.addEventListener();"
Y le tenemos que pasar dos argumentos a este método.
El primero es el nombre del evento "click",
y el segundo es el nombre de la función que queremos llamar,
cuando el evento suceda: "onButtonClick".
Ahora, pausa esta guía paso a paso y presiona el ratón.
¿Funcionó?
Eso espero, a mí si me funcionó.
Vamos a hablar más acerca de lo que hace esta función,
porque es un poco difícil.
A esta función la llamamos la función del detector de eventos,
o la función de tipo "callback", porque esa es la manera en que la usamos.
Sólo queremos llamar a la función si el evento sucede.
Generalmente no queremos llamar a la función cuando se carga la página.
Si quisiéramos llamar a la función cuando la página se carga,
entonces tendíamos que añadir una línea, como ésta, en la parte de abajo.
Fíjate en los paréntesis que ponemos después de la función,
recuerda, poner paréntesis es la manera en que llamamos una función.
Si no los ponemos, entonces no estaremos llamando la función,
sólo estaremos haciendo referencia a ella, y es lo que estamos haciendo
cuando la pasamos como un argumento en esta línea.
Sólo le estamos diciendo al navegador:
"Oye, aquí hay una función que deberás
llamar más tarde, ahora no".
Así que asegúrate de no poner paréntesis aquí después del nombre de la función,
porque entonces sólo estarías pasando el valor que te regresa la función
y no la función en sí misma.
Si accidentalmente hiciera eso,
vería el texto del botón cambiado cuando cargara la página,
y no vería ningún cambio después.
Para arreglar eso, sólo debo quitar los paréntesis
que puse accidentalmente, y ahora mi función
sólo se llamará cuando presione el ratón sobre el botón.
Otra manera en la que podemos hacer esto
es pasando una función anónima a este método que tenemos aquí.
Una función anónima es una función que no tiene un nombre,
y que simplemente especificamos en línea.
Voy a copiar y pegar la línea que añade el detector de eventos,
y te voy a mostrar esta opción paso a paso,
para que veas lo que quiero decir.
Voy a borrar el nombre de la función,
y la voy a reemplazar con la definición de la función.
Sólo tengo que pegar esto aquí, ok.
Entonces, estas dos líneas de código hacen exactamente lo mismo.
Bueno, casi exactamente lo mismo.
Las dos están pasando una función
con el mismo código dentro.
La diferencia es que la primera pasa el nombre de una función que definimos arriba,
y la segunda está definiendo la función anónima en línea,
al mismo tiempo que la pasa.
Las dos técnicas funcionan, muchos desarrolladores prefieren las funciones con nombre
porque es más fácil leer el código,
y podría ser un poco más fácil depurar,
y luego podrías llamar las funciones con nombre
en otro momento o desde otros eventos.
Pero depende de ti qué usar,
solamente no uses las dos al mismo tiempo, porque entonces
el navegador terminará por llamar a las dos funciones
cuando el evento "click" suceda,
y no hay una razón para llamar esta función dos veces.
Voy a continuar y voy a borrar la versión anónima de la función,
porque prefiero la primera forma.
Hay muchas cosas que puedes hacer ahora que
sabes cómo añadir detectores de eventos.
Podrías añadirlos a varias partes de tu página,
podrías detectar diferente eventos,
estaremos hablando de esto después,
y podrías modificar el DOM con cualquiera
de las formas que aprendiste antes.
Y no sólo tienes que modificar el elemento
con el cual estás teniendo una interacción,
puedes modificar cualquier cosa en la página.
Pruébalo y descubre lo que puedes hacer.