Códice | Entradas sobre «dom»

Mosaico JS

JavGuerra — Mon, 27 Jun 2022 00:00:00 GMT

Etiquetas: #web, #código, #css, #html, #javascript, #dom, #juego

Ejercicio que combina lógica de programación en JavaScript, y el uso de eventos asociados a los elementos del DOM que consiste en elegir un pincel y pintar las celdas de una tabla para construir un mosaico de colores.

El juego

La página muestra ocho botones redondos de otros tantos colores de una gama que va de los colores oscuros, empezando por el negro, a los colores claros, terminando con el blanco. Al hacer clic en cada botón elegimos el color deseado.

Debajo de estos botones está la tabla de 16x16 celdas sobre las que vamos a pintar con el color seleccionado. Al hacer clic sobre una celda, esta cambia su color de fondo al nuevo color. Podemos componer dibujos con esta técnica como el que se ve en la imagen.

Para borrar emplearemos el color blanco, ya que este es el color por defecto de cada celda de la tabla, o bien podemos corregir errores pintando con otro color distinto.

Para borrar todo el dibujo deberemos recargar la página. Dada la simplicidad del ejemplo, no se han implementado opciones para guardar y cargar los mosaicos creados.

Lo básico, el HTML

El código html es una fuente de información para la aplicación que voy a desarrollar.

<body>
    <header>
        <h1><img id="logo" src="assets/img/mosaico.png" alt="logo" />Mosaico</h1>
        <small>¡Elije un color y haz clic en el mosaico para pintar!</small>
        <nav>
            <button id="btnNegro" class="negro"></button>
            <button id="btnAzul"  class="azul" ></button>
            <button id="btnRojo"  class="rojo" ></button>
            <button id="btnMagen" class="magen"></button>
            <button id="btnVerde" class="verde"></button>
            <button id="btnCian"  class="cian" ></button>
            <button id="btnAmari" class="amari"></button>
            <button id="btnBlanc" class="blanc"></button>
        </nav>
    </header>

    <main></main>
</body>

Dentro de <nav> indico el identificador id y la clase class que definirá el color de cada botón <button>. Esta clase me va a servir para simplificar la codificación del juego, ya que, como veremos más adelante, voy a aprovechar esta información para seleccionar el color del pincel con el que pintaremos, es decir, cuando hagamos clic en cada uno de los botones, dispararemos un evento que me permitirá ejecutar una función que leerá la clase asociada a este. Como la clase indica el color del botón, podemos usarla para saber qué color hemos elegido. Al pulsar el botón rojo estaremos obteniendo la clase .rojo que luego podemos aplicar en las celdas del mosaico.

Por supuesto, en el CSS cada clase definirá el color, por ejemplo:

.rojo {
  background-color: #f00;
}

Sencillo, ¿verdad? Veamos cómo funciona.

El programa en JS

Básicamente el programa hará lo siguiente:

Asociará un evento que llama a la función color() en cada uno de los ocho botones para poder elegir el color con el que pintar.
Dibujará una tabla con las dimensiones deseadas (inicialmente 16x16, pero se puede cambiar), y a cada celda de la tabla le asociará un evento que llama a la función pinta() cuya tarea es cambiar el color de la celda sobre la que se ha echo clic.
Inicializará las dos variables que usaremos en el juego.

Esto último paso es simple:

let btnSel = el('#btnNegro');
let pincel = btnSel.className;

Estas variables servirán para:

Variable	Uso
`btnSel`	Contendrá la referencia al botón que hemos seleccionado. Esto nos permitirá mostrar el botón como seleccionado y desmarcar el botón cuando cambiemos nuestra selección por otro botón seleccionado.
`pincel`	Contendrá la clase relativa al color seleccionado que hemos obtenido al hacer clic en alguno de los botones de la barra de navegación.

Asociando el evento de la función color

Para que los ocho botones de colores funcionen, debo asociarles un evento de tal forma que, al hacer clic en ellos, realicen su función, nunca mejor dicho:

el('#btnNegro').onclick = color;
el('#btnAzul' ).onclick = color;
el('#btnRojo' ).onclick = color;
el('#btnMagen').onclick = color;
el('#btnVerde').onclick = color;
el('#btnCian' ).onclick = color;
el('#btnAmari').onclick = color;
el('#btnBlanc').onclick = color;

La función el() es una forma de abreviar:

function el(el) { return document.querySelector(el); }

Como se aprecia, lo que hace la función el() es devolver un elemento de nuestro HTML tomando como referencia su selector, usando para ello la función querySelector();

Como ya tenemos el elemento HTML que corresponde a cada botón, podemos asignarle un escuchador de evento con .onclick que llame a la función color() al hacer click en ese botón.

¿Y qué hace la función color()?

function color() {
    btnSel.classList.remove('seleccion');
    btnSel = this;
    pincel = this.className;
    btnSel.classList.add('seleccion');
}

Primeramente elimina la clase .seleccion que es la encargada de dar el efecto hundido del botón seleccionado (btnSel).

Seguidamente obtiene la referencia del botón que acabamos de seleccionar haciendo uso de this. Aquí this hace referencia al objeto que llama a la función, es decir, al botón que lanzó el evento. Ahora ya sabemos cual es el botón sobre el que hemos hecho clic.

Para obtener el color del pincel con el que vamos a pintar, leo la clase asociada al botón con .className. Esta clase, como vimos cuando creamos el HTML, es la encargada de definir el color de fondo del botón, y es la que usaremos para pintar las celdas a partir de ahora cuando llamemos a la función pinta().

Para indicar visualmente al usuario el color que ha seleccionado, ponemos la clase .seleccion en el nuevo botón.

En resumen, como sabemos cual fue el botón que seleccionamos anteriormente, quitamos la clase que indica visualmente que el botón está seleccionado, porque ya ha dejado de estarlo, asociamos a la variable btnSel el nuevo botón, y a la variable pincel la clase asociada al botón que indica su color, y finalmente ponemos la marca de selección en el nuevo botón seleccionado.

Dibujando la tabla con las celdas sobre las que pintaremos

Creo la tabla y la conecto al DOM mediante:

el('main').appendChild( creaTabla(numCols, numFils) );

La función creaTabla() recibe dos parámetros que indican su altura y anchura en celdas. Si lo deseamos, podemos cambiar el valor de estas variables para hacer que el mosaico tenga otras dimensiones cambiando los valores en:

const numCols = 16;
const numFils = 16;

Esta función creaTabla() no destaca especialmente si no es por dos cosas:

function creaTabla(numCols, numFils) {
    let table, tbody, tr, td;
    tbody = creaEl('tbody');
    for (let i = 1; i <= numFils; i++) {
        tr = creaEl('tr');
        for (let i = 1; i <= numCols; i++) {
            td = creaEl('td');
            td.classList.add('blanc');
            td.onclick = pinta; // ¡Magia!
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }
    table = creaEl('table');
    table.appendChild(tbody);
    return table;
}

Hago uso de la función .creaEl() para acortar la instrucción encargada de la creación de elementos del DOM:

function creaEl(el) { return document.createElement(el); }

Cada vez que creo un <td> (celda) le asigno un evento que llama a la función pinta():

    td = creaEl('td');
    td.classList.add('blanc');
    td.onclick = pinta; // ¡Magia!

Estas tres líneas dentro del bucle anidado crean las celdas de cada fila, les asignan la clase .blanc que pone el fondo de las celdas de color blanco por defecto, y luego asocia la función pinta() al evento .onclick de cada celda de forma que al hacer click en ella su fondo se pintará del color que indique pincel:

function pinta() { this.className = pincel; }

De nuevo aquí this es fundamental para poder trabajar con la celda seleccionada, que es la que lanzó el evento. Al hacer clic en la celda, cambiamos de color esa misma celda. Así de simple.

En resumen

Esto sería todo. Resumiendo la operativa de la aplicación, partiendo de un HTML con las clases que indican el color de cada uno de los botones del juego que sirven para seleccionar el color, asocio un evento a cada botón para saber el color del pincel con el que vamos a pintar las celdas. Inicialmente, el color seleccionado es el negro, y el botón seleccionado es el que corresponde a ese color.

Al hacer clic en cada celda, hacemos que el fondo de esta cambie al color seleccionado.

Puedes jugar al juego y ver el código completo en el repositorio haciendo clic en los siguientes enlaces.

¿Te animas a hacer tus propios dibujos pixel art?

Enlaces

Repositorio JavGuerra/MosaicoJS

Kit básico para manejo del DOM

JavGuerra — Mon, 25 Jul 2022 00:00:00 GMT

Etiquetas: #código, #javascript, #dom

El uso del DOM desde JavaScript ha mejorado mucho en los últimos años. Librerías como jQuery facilitaron enormemente la tarea del programador a la hora de acceder a identificadores, clases y etiquetas, y aunque ahora disponemos de nuevas formas de acceso en JavaScript que han hecho olvidar en parte aquella librería, la forma en que trabajamos con el DOM aún se puede mejorar. En esta entrada veremos unas pocas funciones que nos ayudarán en el día a día.

Nota: Este artículo ha sido publicado también en IfGeekThen, el blog de NTT Data, el 24 de abril de 2026.

Selección al estilo jQuery

Para empezar, un canto a la nostalgia. Si usabas la famosa librería y echas de menos su forma tan simple de funcionar, aquí tienes una aproximación a la selección de elementos del DOM.

function $(el) { return document.querySelector(el); };

o en versión función flecha, como más te guste:

const $ = el => document.querySelector(el);

La función $(el) seleccionará un elemento (el) del DOM que podemos asignar a una variable o con el que podemos usar propiedades, por ejemplo:

$('#aviso').classList.add('rojo');

que añadirá la clase .rojo al elemento con el id aviso.

El uso de querySelector() ha venido a simplificar mucho el acceso a los elementos del DOM, pero con esta función $(), seleccionar elementos es aún más simple, y va a ser de ayuda en las siguientes funciones.

Podemos mejorar esta función dándole la posibilidad de buscar dentro de un elemento específico.

const $ = (el, parent = document) => parent.querySelector(el);

Podríamos usarla de esta forma:

const fila = $("#fila3", tabla);

Donde tabla es el elemento padre. De no indicarlo, el elemento padre será todo el documento (document).

También podemos seleccionar varios elementos con $$() con esta función:

const $$ = el => document.querySelectorAll(el);

E igualmente podemos mejorar esto:

const $$ = (el, parent = document) => [...parent.querySelectorAll(el)];

Aquí, además de poder indicar el nodo padre, obtendremos automáticamente el NodeList en un array ([…]).

Crear nuevos elementos y conectarlos al DOM

La creación de nuevos elementos del DOM requiere de varios pasos. Crear el elemento, introducir la información en el elemento si es necesario y conectarlo al elemento padre. ¿Qué tal si lo simplificamos con una función?

function createEl(parent, tag, content = "") {
    const el = document.createElement(tag);
    if (content) el.textContent = content;
    parent.appendChild(el);
    return el;
}

Con la función createEl() cubrimos los tres pasos necesarios para crear, completar y conectar un nuevo elemento, y la función nos devolverá el nuevo elemento para que podamos trabajar con él:

const $titulo = createEl($('body'), 'h1', 'Hola Mundo');

Con esta línea crearemos un elemento H1 dentro del body que contendrá el texto 'Hola Mundo', y la referencia al nuevo elemento está contenida en la variable $titulo.

El $ de la variable titulo no es necesario (ni que estuviésemos programando en PHP…), pero recordando el uso de jQuery, es una buena forma de identificar aquellas variables que hacen referencia a elementos del DOM para diferenciarlas de las otras.

Esta versión puede mejorarse mucho para, por ejemplo, añadir atributos (attrs) e hijos (children)… hasta donde te de la imaginación.

Uso práctico: Creación de tablas básicas con createEl()

Esta nueva función es muy potente, y simplifica mucho las líneas de código que tenemos que usar para crear estructuras del DOM complejas con JavaScript. Un ejemplo de ello son las tablas y sus etiquetas anidadas. Veamos cómo sería una función que crease una tabla simple con createEl():

function createTable(parent, id, headers, footers = null) {

    const table = createEl(parent, 'table');
    table.setAttribute('id', id);

    const thead = createEl(table, 'thead');
    let tr = createEl(thead, 'tr');

    for (const header of headers) {
        const th = createEl(tr, 'th', header);
        th.setAttribute('scope', 'col');
    }

    if (footers) {
        const tfoot = createEl(table, 'tfoot');
        tr = createEl(tfoot, 'tr');
        for (const footer of footers) {
            createEl(tr, 'td', footer);
        }
    }

    return createEl(table, 'tbody');
}

La función createTable() crea una tabla dentro de un elemento padre, le asigna un identificador, y crea las cabeceras y pies que le indiquemos, devolviendo la referencia al elemento tbody de la tabla para que podamos rellenarla con filas y columnas.

Un ejemplo sencillo de uso sería:

$tBody = createTable($('#section'), 'miTabla', ['núm.', 'producto']);

$tBody.innerHTML = '<tr><td>1</td><td>vegetales</td></tr>';

que mostrará la siguiente tabla a la que podemos seguir añadiendo elementos:

núm	producto
1	vegetales

Fácil y cómodo. ¿verdad?

Vaciar un elemento de forma eficiente

Vaciar un contenedor con innerHTML = "" funciona, pero la siguiente función es más eficiente y segura, porque no reemplaza el contenedor entero y no rompe event listeners internos, lo que puede provocar pérdida o duplicación de eventos.

function emptyEl(el) {
    while (el.firstChild) {
        el.removeChild(el.firstChild);
    }
}

Un ejemplo para borrar el contenido de una lista:

emptyEl($("#lista"));

Añadir o quitar una clase CSS

La función:

function toggleClass(el, className) {
    return el.classList.toggle(className);
}

aprovecha el.classList.toggle() para:

Añadir una clase si el elemento no la tiene.
Quitar una clase si el elemento ya la tiene.

y devuelve true si la clase se añadió y false si la clase se eliminó.

Esta función es ideal para interacciones de usuario tipo click para abrir/cerrar, expandir/contraer, activar/desactivar.

Establecer una clase según un estado booleano

La función setClass() permite añadir o quitar una clase según un booleano, garantizando que el elemento queda exactamente en el estado indicado. A diferencia de toggleClass(), no alterna: fuerza el estado.

function setClass(el, className, active) {
    el.classList.toggle(className, active);
}

Ejemplos:

setClass(menu, 'open', true);   // añade la clase
setClass(menu, 'open', false);  // la quita
setClass(input, 'error', !isValid(input.value)); // Estado de error en un formulario
tabs.forEach(tab => {
    setClass(tab, 'active', tab.id === selectedId); // Pestaña activa según ID
});

Esta función es perfecta para sincronizar la UI con estados lógicos (isOpen, hasError, isActive, etc.).

Mostrar u ocultar elementos del DOM

Una función que nos aporte una forma simple de hacer visible u ocultar cualquier elemento del DOM, por ejemplo las secciones de una página web de una única página (SPA) sería la siguiente:

function showEl(el, visible) {
    visible
        ? el.style.removeProperty("display")
        : el.style.display = "none";
}

La función showEl() requiere dos parámetros: elemento del DOM con el que vamos a trabajar y si va a estar visible (true) o invisible (false).

Digamos que en una SPA hemos completado un formulario, y ahora queremos mostrar los resultados. con esta función podríamos:

showEl($('#form'), false);
showEl($('#results'), true);

Partimos de la base de que el elemento con identificador results estaba oculto, y el elemento con identificador form visible. De esta forma el formulario se ocultaría y serían visibles los datos derivados de la gestión de formulario.

Comprobar si un elemento está visible

Esta función permite saber si un elemento está realmente visible en la página.

function isVisible(el) {
    return !!(el.offsetWidth ||
          el.offsetHeight ||
          el.getClientRects().length);
}

La función showEl() e isVisible() se complementan perfectamente porque la primera controla si un elemento se muestra u oculta, y la segunda detecta si un elemento está actualmente visible.

Veamos un ejemplo de uso conjunto:

if (!isVisible(panel)) {
    showEl(panel, true);   // lo muestra solo si está oculto
}

Activar o desactivar un botón

Es una buena práctica desactivar un botón cada vez que se dispare un evento asociado a este. Nada más fácil con la siguiente función:

function setInactiveBtn(button, inactive) {
    button.disabled = inactive;
    inactive
        ? button.setAttribute('aria-disabled', 'true')
        : button.removeAttribute('aria-disabled');
}

Con setInactiveBtn() cambiamos el estado disabled del botón que indiquemos pasándole los valores true o false. Un ejemplo:

function setInactiveBtn($('#submit'), true);

La función desactivará el botón con el identificador submit (disabled = true). Para volver a activarlo, será suficiente con usar la misma función con el status false.

Comprobar si un botón está activo

También podemos necesitar conocer el estado de un botón, si este está activo o inactivo.

function isInactiveBtn(button) {
    return button.disabled === true;
}

Un ejemplo de uso con setInactiveBtn():

setInactiveBtn(btn, !isInactiveBtn(btn));

Activa o desactiva el botón invirtiendo su estado actual (si está activo lo desactiva, y si está inactivo lo activa).

Decodificar entidades HTML con ayuda del DOM

Pasemos ahora a cosas más específicas a modo de bonus.

Aunque JavaScript incluye funciones como encodeURIComponent() y decodeURIComponent(), estas se utilizan exclusivamente para codificar y decodificar URLs, no entidades HTML. Por tanto, una función como esta resulta práctica cuando recibimos cadenas que contienen entidades como & o ", ya que el lenguaje no ofrece un método nativo para convertirlas en texto legible. Podemos apoyarnos en el motor del DOM para conseguirlo.

La siguiente función crea un nodo temporal, asigna su contenido usando innerHTML y obtiene el texto decodificado mediante textContent. Es un ejemplo interesante de cómo el DOM puede ayudarnos más allá de la manipulación visual de la página.

Cuando la función recibe la información codificada con entidades HTML, por ejemplo, a través de una API, y queremos reconducir esa información a, por ejemplo, un fichero de logs en texto plano, o tal vez enviarla a consola, la información no se muestra correctamente. Una forma de convertir a un string la información que incluye entidades HTML sería la siguiente:

function decodeHTMLEntities(html) {
    if (typeof html !== "string") return "";
    const div = document.createElement("div");
    div.innerHTML = html;
    return div.textContent || "";
}

La función recibe la cadena a «decodificar» y devuelve la cadena en texto simple. Para ello obliga al DOM a trabajar para nosotros creando un elemento div en el que se incluye el texto «codificado» y del que se lee luego el texto «decodificado» para devolverlo con return. Como se ve, el elemento div nunca llega a conectarse al árbol DOM.

Tomemos el siguiente ejemplo:

let texto = decodeHTMLEntities('Los%20ni%C3%B1os%20com%C3%ADan%20y%20daban%20migajas%20a%20la%20cig%C3%BCe%C3%B1a.');

El valor de texto resultante será: ‘Los niños comían y daban migajas a la cigüeña.’.

Iniciar si el DOM está cargado

Concluyo con una función primordial.

Con onReady(), si el DOM ya está cargado, se ejecutará la función de inicio que le pasemos inmediatamente. Si el DOM aún se está cargando, añade un listener a DOMContentLoaded.

function onReady(fn) {
    if (document.readyState !== "loading") {
        fn();
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}

Veamos un ejemplo de uso:

onReady(() => {
    const btn = $("#btnStart");
    setClass(btn, "ready", true);
});

La función onReady() permite escribir inicialización limpia sin preocuparte por dónde está ubicado el script o de qué forma se carga.

Tu propio kit

Espero que alguna de estas funciones te resulte útil, te hagan la vida más agradable y, sobre todo, que te animen a experimentar por tu cuenta.

El DOM ofrece muchísimas posibilidades, y a veces basta con probar una idea para descubrir una utilidad nueva que encaje contigo y ampliar de esta forma tu kit de herramientas. ¡Diviértete explorando!