¿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 Flanagan, 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 entre atributos y propiedades
- Según una revisión al diccionario inglés Merriam Webster, los términos attributes y property ahora ya tienen un poco más de sentido:
- Propiedades: signo o señal común a un conjunto de cosas. Es decir, un conjunto de frutas pueden contener una propiedad de redondez (como las manzanas o las uvas). O lo que es lo mismo decir, muchos pueden tener una propiedad en común.
- Atributos: signo o señal (en o de) una cosa única. Por ejemplo, una manzana tiene un atributo único de color según su desarrollo. O lo que es lo mismo decir, cada cosa tiene su propio atributo.
- En resumen, ambos (atributos y propiedades) son características. Pero una propiedad es común a muchas cosas; mientras que un atributo es un diferenciador de cada cosa.
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.