duduromeroa.com

#Javascript, #DOMJs, #webinteractiva, #Interfaces, #duduromeroa, #Guayaquil

Javascript | DOM | API

Programación para web con Javascript: estudio del Document Object Model (DOM); interfaces e interacciones


George Póyla, matemático. Resolver problemas de diseño. www.duduromeroa.com

Por Eduardo J. Romero Andrade
| Guayaquil

Contacto duduromeroa@gmail.com
Contenido

API, BOM, CSSOM, Navigator, DOM


Contenido para quienes ya comprenden y practican HTML, CSS y JS. Adjunto bibliografía al final de esta página para un estudio más amplio.






¿Qué una API? (Application Programming Interface)

Para mdn web docs y w3schools, una API es un código base que resuelve la comunicación y el intercambio de datos entre otros conjuntos de códigos, reelaborado de tal manera que sea menos complicado construir software para varios soportes. Una API no es otro lenguaje de programación más. Pero sí puede estar basado en un lenguaje específico que ya 'masticó' la sintaxis más complicada para así facilitar crear comunicación entre lenguajes, incluso en combinación con otras API.

La palabra interfaz en la definición de las APIs refiere a un grupo de métodos, propiedades y estructuras de valores que conectan otros softwares y les permite trabajar en conjunto.

Como símil, piensa en una API como un baúl lleno de herramientas únicas para construir algo. Puesto que esas herramientas ya están fabricadas, no necesitamos construirlas. Solo necesitamos conocer sus funciones (y sus limitaciones) y usarla. Por ejemplo, habrá una API con una sintaxis simplificada, fácil de usar, y que permita codificar eventos táctiles si deseamos interacción en la web.

Una API es más compleja en su contenido que una librería o un framework. Cada API puede incluir funciones, métodos, invocación de valores, gestión de permisos y seguridades; entre muchos otros. Por eso es importante estudiarlas a fondo.

¿Qué es la API DOM de Javascript?

El DOM (Modelo de objeto de documento en inglés) usa el contenido de un sitio web como un símil del árbol; es decir, con ramificaciones de jerarquías. Reconoce los elementos HTML –llamados también nodos–, los accede y los manipula. Para el DOM, casi todo elemento de un sitio web es un objeto de JS, además de eso, el DOM define:

  • Las propiedades de todos los elementos HTML
  • Los métodos de acceso a todos los elementos HTML
  • Los eventos para todos los elementos HTML
  • Donde la interface del DOM reúne a los métodos –acciones que los alteran– y las propiedades –valores que contienen los elementos–.
  • Elemento padre > elemento hijo > elemento hermano
  • html > body tiene a > h1 tiene a > p tiene a > texto
  • html > body tiene a > div tiene a > img tiene a > foto

Así mismo, una API puede ser accedida por otros lenguajes. Python –un lenguaje de programación– también puede acceder mediante DOM a elementos ramificados de un sitio web.

Para Toda la ramificación de elementos contenida en un sitio web tiene, digamos, un gran jefe: el Global Object. Cada nueva propiedad es visible y puede ser manipulada por los otros scripts en el mismo Global Object (puesto que este es único para todo el navegador). El Global Object materializado es la actual ventana del browser desde donde lees este párrafo. Y todas sus propiedades están agrupadas bajo la palabra clave window.


ELEMENTOS Y FUNCIONES DE LA API DOM: El BOM



Windows/browser object model (BOM)

Para Svekis y Putten[5] el BOM es un conjunto de elementos u objetos, propiedades, funciones y variables globales útiles –como las dimensiones, locación o el historial de sitios visitados– para representar y mostrar otros elementos perceptibles en una ventana del navegador –browser–. Cada versión del navegador variará en esos elementos. En otras palabras, el BOM agrupa todos los recursos que cada navegador tiene para mostrar mediante internet una estructura de datos (como una página web) junto con texto, imágenes y otros recursos.

En otras palabras, el BOM es la puerta por donde ingresamos al objeto DOM, y de allí a los elementos del documento web que deseamos manipular. No debemos confundir: las estructuras BOM, DOM y CSSOM NO son lenguajes de programación. Pero sí necesitaramos de un lenguaje para accederlos y manipular esas estructuras.

El detalle de esas propiedades y atributos está contenida en el objeto document y pueden ser accedidos desde la ventana de la consola de cualquier navegador actualizado.

Analizo más abajo la diferencia conceptual entre propiedades y atributos. Ambos términos ligeramente similares. Considero que una propiedad es más general, pero que a su vez contiene micro propiedades que serían los atributos.

En Consola

window.document
// Se despliega...
#documento
/* Y se mostrará todos LAS PROPIEDADES 
contenidos actualmente en el sitio web. */

/* Para invocar atributos del objeto 'window.' 
(con punto final) */
window. 

// Para invocar LOS ATRIBUTOS del objeto window
window
// Se desplegará...
// alert:ƒ alert()
// atob:ƒ atob()
// blur:ƒ blur()

  • Diferencia conceptual entre atributos y propiedades
  • Atributos: Datos adicionales que pueden ser añadidos a una entidad para diferenciarla de otras. Por ejemplo, a la propiedad 'color' se le pueden añadir atributos como intensidad o textura.

  • Propiedades: Lo que una entidad contiene o muestra en sí misma, y que podría ser alterado. Por ejemplo: Una manzana tiene propiedades de superficie y color. Ambas propiedades pueden ser alteradas. Y podría añadirle una nueva propiedad, como pies para caminar (a menos que desee alterar su esencia).

  • Según como yo lo veo, la diferencia está entre la lógica de la agrupación en lo que una entidad es y tiene. Una propiedad es el padre de muchos atributos. Por ejemplo, una manzana puede tener la propiedad de ser jugosa, pero puede tener muchos atributos, como el sabor, la acidez, lo dulce o salado.

  • Podría decir entonces que las propiedades son lo que una entidad es a primera observación, mientras que los atributos son lo que una propiedad tiene en detalle y más de cerca. A más detalle, más atributos.

  • Ejemplo. Un ser humano tiene la propiedad de altura. Y los atributos de esa propiedad son los cm de esa altura, o la altura según su edad, o la altura según esta sentado, o de pie, o agachado.

OJO: Si tienes una palabra en el campo de filtro -barra arriba- el resultado de cualquier código será 'undefined', por lo tanto, mantén ese campo 'fiter' limpio. Habiendo tenido eso en cuenta, elegimos en el menú superior la palabra 'console' e ingresamos el siguiente código:

En Consola de Inspector

// EN CONSOLA INSPECTOR
console.dir(window);

/* LUEGO, SE MOSTRARÁ DESDE EL OBJETO WINDOW UNA LISTA DE 
PROPIEDADES Y VALORES DE CADA ELEMENTO HTML Y MÁS OBJETOS 
DE UNA WEB DETERMINADA */
> Window 

0: Window {window: Window, 
self: Window, 
location: Location, 
closed: false, 
frames: Window, …}
$
: 
(...se mostrarán todos los elementos de la página)

Así mismo, podemos acceder desde una sola línea a la cantidad de sitios web accedidos, la ciudad desde donde estamos accediendo, o el ya caduco usedJSHeapSize, que es la medición de bits de memoria activa asignada al consumir JS desde un sitio web. El objeto más actualizado de una API para medir desempeño web es performance. measureUserAgentSpecificMemory() –aún en evaluación–.

En Consola de Inspector

window.history.length;
// MUESTRA
50

window.ciudad;
// MUESTRA
Guayaquil

window.performance.memory.usedJSHeapSize;
// MUESTRA
10000000

Si deseamos establecer el usedJSHeapSize en megabytes, desde la propia consola del inspector dividiremos la cantidad de bytes del usedJSHeapSize para una potencia de 1000 elevado a la 2:

En Consola de Inspector

// Bytes a megabytes: bytes / 1000 elevado a la dos

console.log(`${
performance.memory.usedJSHeapSize / 
Math.pow(1000, 2)} 
MB`);
// MUESTRA
10 MB

OBJETO NAVIGATOR

Para Svekis y Putten[5] el objeto windows contiene entre otros objetos, uno que almacena datos en detalle del navegador al que se está accediendo en tiempo real:

En Consola de Inspector

window.navigator

// MUESTRA
Navigator {vendorSub: '', 
productSub: '20030107', 
vendor: 'Google Inc.', 
maxTouchPoints: 0, 
scheduling: Scheduling, …}

appCodeName: "Mozilla" 
appName: "Netscape" appVersion:
(...)

Hasta aquí tenemos que el gran objeto madre es WINDOW, del cual 'nacen' subobjetos como NAVIGATOR, PERFORMANCE, entre otros; y en donde cada subobjeto es accedido mediante un punto:

OBJETO_MADRE . subobjeto . propiedad



DOM (Document Object Model)

Tal como en el BOM, los elementos del objeto del DOM se acceden al invocarlo. El DOM contiene todos y cada uno de los elementos visibles de un sitio web:

Para Lizarazo [8, 2021], el DOM que representa toda la estructura HTML que está en una página web. El DOM accede desde el navegador a los códigos de los elementos del sitio web y los conecta con los códigos de un lenguaje de programación (como Javascript) para manipular el HTML en tiempo real (o en tiempo de ejecución, o runtime).

En el ejemplo de abajo, una llamada al objeto window permitirá desde la consola de cualquier página web desplegar todas las propiedades de ese objeto:

En consola

// Tipeamos
window

// Se despliega
0:Window {
window: Window, 
self: Window, 
location: Location, 
closed: false, 
frames: Window, …}
// y sigue....

Para constatar lo dicho, basta con agregar en la barra del navegador la siguiente expresión: about:blank, y abrir la ventana de la consola del navegador. Nos percataremos que el área en blanco del navegador contiene etiquetas HTML vacías:

// Tipeamos
window.document

// En la consola del 
#document

// Desplegamos pestaña
<html>
<head></head> 
<body></body>
</html>

// Luego, tipeamos 'window.document.title'
// ...Corresponde al texto dentro de cada pestaña abierta de una ventana
window.document.title
// Mostrará lo que haya en la etiqueta HTML <title></title>

// Si deseamos insertar un contenido, entonces asignamos un valor
window.document.title= "Holi Dudu";
//-> 'Holi Dudu'

Por otro lado, el objeto document permite revisar (mediante la sintaxis del punto) sus métodos y propiedades (un grupo de recursos conocido como interface). Pueden ser revisados desde la consola de cualquier navegador web de la siguiente forma:

En consola

// Tipeando en la consola
document.
// Se mostrará toda la API en forma de decenas de métodos. 
// Algunos métodos son:
document.location
document.append
document.body

Si deseamos insertar en tiempo de ejecución un texto para que sea mostrado solo localmente en nuestra pantalla:

En consola

window.document.write("Feliz 2024, Guayaquil")
// Se mostrará 'Feliz 2024, Guayaquil' en la página web

Así mismo, si deseamos acceder a otros elementos y subelementos dentro de la estructura del sitio web, podemos acceder desde la consola pero solo en tiempo de ejecución, sin alterar realmente los elementos de la página:

En Consola

// Se pide acceder al primer elemento que se halle
document.body.children[0]

// Se despliega
<div class="bloqueParaEmpuje">
<p id="fechaDiaWeb">Guayaquil, martes 9 de enero del 2024</p>
</div> 

En otro ejemplo, podemos ensayar (desde consola) algunas propiedades o métodos de la interfaz document. El método document.createElement lo reseñamos en esta sección.

En Consola

// Se ingresa
document.createElement('holi')
// Se muestra
<holi></holi>

document.createElement('div')
<div></div>

Otras sintaxis permiten acceder (pero no alterar) desde consola el contenido de cada elemento del DOM. Por ejemplo, para conocer la cantidad de ciertas etiquetas agrupadas en una sola página web:

En Console

// Buscar LA PRIMERA etiqueta strong
$('strong')

// Buscar TODAS las etiquetas strong
$$('strong')
// (cantidad) [etiqueta, etiqueta.... ]

// = = = = 

// Buscar LA PRIMERA etiqueta strong
$('div')

// Buscar TODAS las etiquetas div
$$('div')
// (cantidad)[etiqueta.nombre, etiqueta,IDnombre....]

CSSOM (CSS ObjectModel)

Así como el BOM permite acceder al objeto document y de allí al DOM; el CSSOM permite acceder a las propiedades y atributos de cada elemento del DOM. El CSS es la abreviatura para las propiedades visibles de un elemento en una página web, como el color o el tamaño. Para manipularlos en su totalidad (como por ejemplo, agregarles movimiento cuando cliqueamos un elemento) accedemos a esos atributos desde Javascript.




BIBLIOGRAFÍA:
    3ra edición. 2018. Marijn Haverbeke. No starch press.
    Mozilla Foundation.
    David Flanagan (2020). Editorial O'Reilly.
    Ved Antani, Stoyan Stefanov (2017). Packt Publishing.
    Editorial Packt.
    Information and Computation. Elsevier.
    ACM SIGCSE BulletinVolume 19Issue 1Feb.
    . Packt Publishers