-
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.
