Instrucción «this» de Javascript explicada paso a paso

Instrucción «this» de Javascript explicada paso a paso

Print Friendly, PDF & Email
Instrucción «this» de Javascript explicada paso a paso
5 (100%) 3 votos

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.

  1. 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.
  2. 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.
  3. 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.

HTML inicial ejercicio this
Código html de salida dónde se muestran 3 inputs y un div que será pintado de rojo, azul o verde.
etiqueta style css
Código css para dar un poquito de estilos y hacer el ejercicio más agradable

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.

La función pintar traduce mediante el switch un texto a hexadecimal

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.

javascript en línea
Asignamos el atributo onclick="" en el html

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.

Javascript en línea y html pero utilizando this

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.

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.
código final ejemplo this
Código final
evento onclick
Asignación evento onclick durante la carga del documento
function pintar(){...}
function pintar(){...} combinada con this.value

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

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.