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%) 1 voto
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

Entradas relacionadas:

Ejercicio – Corrige los errores (concepto acoplamiento javascript)
- 100
Ejercicio javascript en el que se repasa el concepto de acoplamiento y se piden corregir algunos errores típicos.
Validación de formularios web: Como desactivar el envío con Javascript
- 455
Veamos como podemos deshabitar el envío de un formulario web mediante javascript. Explico el método clásico y otra alternativa más limpia mediante preventDefault().
Sustituir un nodo por otro en el DOM mediante Javascript
- 185
Para poder sustituir un nodo por otro en el DOM previamente necesitas saber como: Identificar nodos del DOM. Crear nuevos nodos. Si tienes claros estos conceptos sigue leyendo el ejemplo práctico.
La apasionante historia del Javascript (resumida)
- 400
Javascript es un lenguaje de programación de lado cliente que ha cambiado Internet tal y como lo conocemos a día de hoy. Junto con el html y el css es uno de los 3 pilares del diseño web. Es un requer...
Ejercicio – Generación de un dado de 6 caras con javascript
- 82
Ejercicio con solución dónde se genera un dado de 6 caras y se tira el dado 1000 veces para comprobar cuantas veces ha salido cada tirada.
Ejercicio – ¿Qué declaraciones de variables son erróneas en JS?
- 111
En este ejercicio repasamos los conceptos relativos a la declaración de variables en javascript. ¿Qué declaraciones son incorrectas? Detéctalas y corrígelas.
Ejercicio – Sumas con letras
- 104
En este ejercicio vemos de forma práctica si la suma de valores numéricos o strings resulta en una suma o una concatenación.
Ejercicio – Generación de una fecha personalizada mediante javascript
- 65
Ejercicio javascript dónde se trabaja con fechas y los métodos para fechas con el objetivo de crear fechas con formato personalizado.
La etiqueta noscript
- 248
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de script. ¿Que podemos hacer para avisar a los usuarios ...
Scope de las variables en javascript
- 240
En esta entrada vamos a hablar sobre el ámbito (scope) de las variables en javascript. Voy a suponer que ya sabes declarar y usar funciones y que  también tienes claro el concepto de variable y su sin...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.