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

Contenido

API, BOM, navigator, DOM





¿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 y asñi facilitar la creación de nuevos proyectos, 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 una llave especial que permite abrir un baúl con herramientas especiales para construir un nuevo invento. Puesto que las herramientas ya están fabricadas, no necesitamos construir nuevas herramientas. Solo necesitamos elegir el baúl (la API) específica, entenderla y aplicar sus funciones y métodos. Por ejemplo, si deseamos armar visualmente elementos que permitan interacción táctil en pantalla, está disponible una API de eventos táctiles para ser usado en programación para web mediante Javascript.

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.

¿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 contiene objetos, propiedades, funciones y variables globales útiles –como las dimensiones, locación o el historial de sitios visitados– para representar y mostrar una ventana del navegador –browser–. Cada versión del navegador variará esos elementos.

El detalle de los elementos y objetos de la ventana de navegación se hallan expuestos en todo navegador web actualizado. El método para mostrar eso es el siguiente: puntero del mouse sobre cualquier página web + click derecho + Inspect Element.

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

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:

En Consola de Inspector

console.dir(document)

// SE MUESTRA
#document
location
: 
Location {ancestorOrigins: DOMStringList, 
href: 'file:///xx/xxxxx/xxx_disco/Web_xxx/xx, 
origin: 'file://', protocol: 'file:', host: '', …}
URL
(...)




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.