Se detalla paso a paso un ejercicio que nos permitirá entender el uso y motivación del this.
Tendremos 3 botones de colores rojo, verde y amarillo que al hacerles click activarán una función que pintará un <div> adjunto con el color correspondiente.
Solucionaremos el problema de 3 formas.
- Escribiendo el javascript en línea con el html mediante el atributo onclick y pasando la información del color dentro de la llamada a la función.
- Escribiendo el javascript en línea con el html mediante el atributo onclick y pasando la información capturando la información de color del propio html mediante el uso de this.
- Desvinculando lo máximo posible javascript de html y inicializando el evento onclick al cargar el documento.
¡Vamos a ello!
Preparando el html y la hoja de estilos
En las imágenes podéis ver el html inicial y el css inicial.
Los botones tienen fondo blanco y texto del color indicado.
Cuando se pase el ratón por encima el fondo pasará a ser el color seleccionado y el texto será de color blanco.
Hemos usado inputs porqué más tarde en el javascript nos vamos a ayudar del atributo value para recuperar la información de color.
Preparando la función pintar()
Voy a usar function pintar(color){} para colorear el div que lleva la class container.
El campo color es una variable local que se declara dentro de los paréntesis de llamada de la función y que toma el valor que se le pase vía javascript o directamente en el html.
Nos ayudaremos de una variable local de nombre colorear.
Esta función tiene dos partes principales.
La primera un switch(color){} que evalúa el string que le llegará por función y lo traduce a un color hexadecimal. Asigna el resultado a la variable colorear.
Ejemplo 1. Javascript en línea mezclado con el html mediante atributo onclick
Fijémonos que el atributo onclick necesita de comillas dobles.
Por lo tanto en la función usamos comillas simples para enviar el string con la información del color: rojo, verde, azul.
Cuando hacemos click en el botón enviamos a la función pintar(color){…}
Este ejemplo es el esquema a partir del cual veremos el this.
Ejemplo 2. Javascript en línea mezclado con el html mediante atributo onclick y usando this
En este ejemplo ya no pasamos el color a la function pintar(color){…}
En su lugar usamos this.value.
This siempre referencia al nodo que llama al evento.
En el caso de no encontrarse el nodo que ha llamado al evento se considera que es un nodo de orden superior. Siempre el nodo window.
Ejemplo 3. Evento click inicializado en el javascript en una hoja separada
En este caso eliminamos los atributos onclick de los <input type=»button»/> y los inicializamos con la carga del documento mediante un window.addEventListener(«load»,inicializar).
A continuación mediante un for recorremos todos los nodos del documento que sean de tipo input.
A todos les asignamos un evento click y la función pintar.
La magia la encontramos dentro de la función pintar.
En este caso fijaros que ya no paso ningún parámetro de entrada por función.
En su lugar usamos la expresión this.value
this siempre será el nodo que esté activando el evento.
El resto del programa es exactamente el mismo que en los ejemplos primero y segundo.[blockquote text=»A menudo cuando estás aprendiendo tienes dudas sobre si escribir document o window, si funcionará el addEventListener o incluso la consola del navegador no te indica ningún error. Es recomendable que vayas paso a paso depurando el código. Una buena idea también puede ser usar un window.alert(«saludo«) para detectar errores a tiempo.» show_quote_icon=»yes» background_color=»#f2f2f2″]
Importante observación sobre la declaración de eventos al inicializar el documento
Cuando validas el documento la tentación típica es buscar el código introducido mediante javascript en el DOM.
Es decir, si asignas un evento onclick o onmouseover o cualquier otro típicamente tendemos a inspeccionar los elementos de nuestro documento web en busca de un atributo.
Este atributo debes saber que no lo vas a encontrar si lo declaraste vía addEventListener().
Esto se debe a que nunca existe un atributo, sino que es el propio navegador quien sabe que debe actuar de una determinada manera cuando se interactúa con los nodos del documento.
De este modo es posible que en ocasiones os encontréis con webs plenamente html5 que al inspeccionar el código no se vea absolutamente nada por ninguna parte…
¡es el encanto de javascript!¡Hey querido lector!
Espero que esta entrada te haya sido de utilidad para entender el famoso this.
Lánzate a usarlo sin miedo.
Verás como tus cientos de líneas se reducen a muchísimas menos y que en cuanto le cojas la práctica el lenguaje te parecerá hermosamente limpio y sencillo.
Foto a partir de Igor Miske en Unsplash
Deja una respuesta