Pensando dentro de la caja con JavaScript básico

A veces, las funciones de JavaScript más simples están justo delante de nuestras narices y simplemente no hemos estado muy expuestos a ellas. En este artículo, Louis Lazaris no hablará de jQuery y no analizará conceptos o patrones de código estructural. En cambio, le presentará algunas funciones de JavaScript puro que puede utilizar hoy y que quizás nunca antes haya considerado.

Durante los últimos cuatro o cinco años escribiendo blogs con regularidad e investigando para otros proyectos de escritura, me he encontrado probablemente con miles de artículos sobre JavaScript.

A mí me parece que una gran parte de estos artículos se pueden dividir en dos categorías muy generales:

1. jQuery ;
2. Artículos teóricos y conceptuales centrados en aspectos como IIFE , cierres y patrones de diseño.

Sí, probablemente me he topado con muchos otros artículos que no entran en ninguna de estas categorías o que son más específicos. Pero de alguna manera parece que la mayoría de los que realmente son presionados en la comunidad caen bajo una de las dos categorías anteriores.

Creo que esos artículos son geniales y espero que veamos más de ellos. Pero a veces las características más simples de JavaScript están justo delante de nuestras narices y simplemente no hemos estado muy expuestos a ellas. Me refiero a funciones nativas, más o menos para todos los navegadores, que han estado en el idioma durante algún tiempo.

Entonces, en este artículo, no hablaré de jQuery y no analizaré conceptos o patrones de código estructural. En lugar de eso, le presentaré algunas funciones de JavaScript puro que puede usar hoy y que quizás nunca antes haya considerado.

insertarAdjacentHTML()

Hace años, Microsoft introdujo un método llamado insertAdjacentHTML()como una forma de insertar una cadena de texto específica como HTML o XML en un lugar específico del DOM. Esta función está disponible en Internet Explorer (IE) desde la versión 4. Veamos cómo funciona.

Supongamos que tiene el siguiente HTML:

div    pSome example text/p/divdiv    pSome example text/p/div

Y supongamos que desea insertar otro fragmento de HTML entre #box1y #box2. Puedes hacer esto bastante fácilmente usando insertAdjacentHTML():

var box2 = document.getElementById("box2");box2.insertAdjacentHTML('beforebegin', 'divpThis gets inserted./p/div');

Con eso, el DOM generado termina así:

div    pSome example text/p/divdivpThis gets inserted./p/divdiv    pSome example text/p/div

• Vea una demostración sencilla.

El insertAdjacentHTML()método toma dos parámetros. El primero define dónde desea colocar el HTML, en relación con el elemento de destino (en este caso, el #box2elemento). Este puede ser uno de los siguientes cuatro valores de cadena:

• beforebeginEl HTML se colocaría inmediatamente antes del elemento, como hermano.
• afterbeginEl HTML se colocaría dentro del elemento, antes de su primer hijo.
• beforeendEl HTML se colocaría dentro del elemento, después de su último hijo.
• afterendEl HTML se colocaría inmediatamente después del elemento, como hermano.

Nuevamente, estos son valores de cadena, no palabras clave , por lo que deben colocarse entre comillas simples o dobles.

El segundo parámetro es la cadena que desea insertar, también entre comillas (o sino sería una variable que contiene una cadena que fue definida previamente). Tenga en cuenta que debe ser una cadena, no un elemento DOM o una colección de elementos; entonces, podría ser simplemente texto, sin marcado real.

insertAdjacentHTML()tiene, como se describe en una publicación sobre Mozilla Hacks , un par de ventajas sobre algo más convencional, como innerHTML(): No corrompe los elementos DOM existentes y funciona mejor.

Y si se pregunta por qué este no ha recibido mucha atención hasta ahora, a pesar de tener un buen soporte en todas las versiones de IE en uso, la razón probablemente sea que, como se menciona en el artículo Mozilla Hacks, no lo era. agregado a Firefox hasta la versión 8. Debido a que todos los demás navegadores principales lo admiten y los usuarios de Firefox se han actualizado automáticamente desde la versión 5, es bastante seguro de usar.

Para más información sobre este método:

• " insertAdjacentHTML() ", en la especificación "Análisis y serialización de DOM", WHATWG
• “ Element.insertAdjacentHTML ”, Red de desarrolladores de Mozilla

getBoundingClientRect()

Puedes obtener las coordenadas y, por extensión, las dimensiones de cualquier elemento de la página utilizando otro método menos conocido, el getBoundingClientRect()método.

Aquí hay un ejemplo de cómo podría usarse:

var box = document.getElementById('box'),    x, y, w;x = box.getBoundingClientRect().left;y = box.getBoundingClientRect().top;if (box.getBoundingClientRect().width) {  w = box.getBoundingClientRect().width; // for modern browsers} else {  w = box.offsetWidth; // for oldIE}console.log(x, y, w);

• Ver una demostración.

Aquí, hemos apuntado a un elemento con un ID de boxy accedemos a tres propiedades del getBoundingClientRect()método para el #boxelemento. Aquí hay un resumen de seis propiedades que se explican por sí mismas y que este método expone:

• top¿A cuántos píxeles está el borde superior del elemento desde el borde superior de la ventana gráfica?
• left¿Cuántos píxeles está el borde izquierdo del elemento desde el borde más izquierdo de la ventana gráfica?
• right¿Cuántos píxeles está el borde derecho del elemento desde el borde más izquierdo de la ventana gráfica?
• bottom¿Cuántos píxeles está el borde inferior del elemento desde el borde superior de la ventana gráfica?
• widthEl ancho del elemento.
• heightLa altura del elemento.

Todas estas propiedades son de solo lectura. Y observe que las propiedades de las coordenadas ( top, y ) son todas relativas a la parte superior izquierda de la ventana gráfica left.rightbottom

¿Qué pasa if/elsecon el ejemplo de arriba? IE 6 a 8 no admiten las propiedades widthy ; heightPor lo tanto, si desea compatibilidad total con todos los navegadores para ellos, tendrá que usar offsetWidthy/o offsetHeight.

Al igual que con insertAdjacentHTML(), a pesar de la falta de soporte para widthy height, este método ha sido compatible con IE desde la antigüedad y tiene soporte en cualquier otro lugar que sea relevante, por lo que es bastante seguro de usar.

Admitiré algo aquí: obtener las coordenadas de un elemento usando valores basados ​​en desplazamiento (como offsetWidth) es en realidad más rápido que usar getBoundingClientRect(). Sin embargo, tenga en cuenta que los valores basados ​​en el desplazamiento siempre se redondearán al entero más cercano, mientras que getBoundingClientRect()las propiedades de devolverán valores fraccionarios.

Para más información:

• “ Element.getBoundingClientRect ”, Red de desarrolladores de Mozilla
• " getBoundingClientRect es fantástico ", John Resig

La API

Si alguna vez ha manipulado elementos sobre la marcha con JavaScript, probablemente haya utilizado métodos como createElement, removeChildy parentNodefunciones relacionadas. Y también puedes manipular tablas HTML de esta manera.

Pero es posible que no te des cuenta de que existe una API muy específica para crear y manipular tablas HTML con JavaScript y que tiene muy buen soporte para navegadores. Echemos un vistazo rápido a algunos de los métodos y propiedades disponibles con esta API.

Todos los siguientes métodos están disponibles para usarse en cualquier tableelemento HTML:

• insertRow()
• deleteRow()
• insertCell()
• deleteCell()
• createCaption()
• deleteCaption()
• createTHead()
• deleteTHead()

Y luego están las siguientes propiedades:

• caption
• tHead
• tFoot
• rows
• rows.cells

Con estas funciones, podemos crear una tabla completa , incluidas filas, celdas, un título y el contenido de la celda. He aquí un ejemplo:

var table = document.createElement('table'),    tbody = document.createElement('tbody'),    i, rowcount;table.appendChild(tbody);for (i = 0; i = 9; i++) {  rowcount = i + 1;  tbody.insertRow(i);  tbody.rows[i].insertCell(0);  tbody.rows[i].insertCell(1);  tbody.rows[i].insertCell(2);  tbody.rows[i].cells[0].appendChild(document.createTextNode('Row ' + rowcount + ', Cell 1'));  tbody.rows[i].cells[1].appendChild(document.createTextNode('Row 1, Cell 2'));  tbody.rows[i].cells[2].appendChild(document.createTextNode('Row 1, Cell 3'));}table.createCaption();table.caption.appendChild(document.createTextNode('A DOM-Generated Table'));document.body.appendChild(table);

• Ver una demostración.

El script anterior combina algunos métodos DOM centrales habituales con métodos y propiedades de la HTMLTableElementAPI. El mismo código escrito sin la API de tabla podría ser considerablemente más complejo y, por tanto, más difícil de leer y mantener.

Una vez más, estas características relacionadas con tablas son compatibles desde IE 7 (y probablemente antes) y en cualquier otro lugar que sea relevante, así que siéntete libre de usar estos métodos y propiedades cuando mejor te parezca.

Para más información:

• “ HTMLTableElement ”, Red de desarrolladores de Mozilla
• “Datos tabulares”, en la especificación “HTML”, WHATWG

Terminando

Esta discusión sobre características específicas de JavaScript nativo ha sido una especie de recordatorio. Podemos sentirnos cómodos fácilmente con las características de un lenguaje que conocemos bien, sin necesidad de profundizar en la sintaxis del lenguaje en busca de formas más simples y fáciles de mantener para resolver nuestros problemas.

Entonces, de vez en cuando, mira dentro de la caja, por así decirlo. Es decir, investigue todo lo que JavaScript básico tiene para ofrecer y trate de no depender demasiado de complementos y bibliotecas , que pueden inflar innecesariamente su código.

(Créditos de la imagen en portada: nyuhuhuu )

Otras lecturas

• Demostraciones útiles de funciones jQuery para sus proyectos
• Desarrollar la conciencia de la dependencia
• 7 cosas de JavaScript que desearía saber mucho antes en mi carrera
• Reducción de la metodología BEM para proyectos pequeños

(al, ea, mrn)Explora más en

• Codificación
• javascript
• Técnicas
• HTML