Interfaz de la ventana de navegador
Es cada marco o ventana en forma de página web cuyo rol es ser contenedor de todos los elementos de la estructura del DOM. Esta ventana los carga y permite accederlos para alterarlos o generar interactividad mediante la variable global window.
En el contexto de diseño de software una interfaz es un conjunto de código que podemos usar para dar solución a algo mediante sus propiedades (estados de valores, características) y métodos (acciones que alteran esos estados de valores).
Para John Ousterhout, autor de A Philosophy of Software Design (2018) una interfaz "describe todo lo que un módulo (o un componente de software) hace"; mientras que la implementación "es toda la sintaxis de código (que el desarrollador ejecuta) y que permite al módulo (o componente de software) hacer lo que debe hacer" (Ousterhout, 2018, 4.1 Modular Design).
Así como cada interfaz es un gran conjunto de propiedades y métodos, la interfaz de la ventana de navegador permite instancias (o llamados) a métodos desde otras interfaces para ser usadas en un contexto de uso específico. Por ejemplo, la interfaz EventTarget contiene sintaxis para definir eventos, detectarlos y decidir qué elemento (por ejemplo, un botón en la página web) activa uno o más eventos.
Uno de esos métodos para definir qué elemento activa un evento es addEventListener();. Este método de la interfaz EventTarget aloja una función que será invocada únicamente cuando un evento previo sea activado desde cualquier elemento web, sea este una imagen, un texto o un gráfico. Conceptos como eventos, interfaces de eventos, escuchas de eventos y manejadores de eventos están ampliados en este vínculo. Otra referencia más amplia (en inglés o español) está en la sección de referencia de eventos de Mozilla mdn web docs_
En Javascript
elementoActivador.addEventListener(
tipoDeEvento, funcion(), opcional );
/*
- tipoDeEvento: cada uno de los tipos de eventos disponibles
para interacción de usuario: como 'click'.
- funcion(): el código que detectará cuando el evento
del tipoDeEvento ocurra. Puede ser también in método de objeto,
similar a una función.
- opcional: objeto con características de cómo el evento
influencia en elementos anidados o externos al elemento activador.
Entre esas opciones están: capture (el evento se ejecuta desde
el activador hacia sus descendientes).
*/
Breve introducción a un escucha de evento o eventListener
Un ejemplo de cómo se vincula un evento con una función tendrá un rol de controlador de evento.
| Saludar |
| Qué tal? |
Se explica el código:
En HTML
<table id="contenedor">
<tr> <td id="itemx1">Saludar</td> </tr>
<tr> <td id="itemx2">Qué tal?</td> </tr>
</table>
En Javascript
function alterarx() {
// Aloja y apunta a elemento único mediante iD
const apuntarItemx2 = document.getElementById("itemx2");
/* Al elemento apuntado se accede para agregar
un nuevo valor de texto en el primer hijo */
/* También puede ser apuntarItemx2.textContent*/
/* OJO como se crea una asignación y una igualdad de tipo */
const nuevoNodo = apuntarItemx2.firstChild.nodeValue === "Holi!";
/*
- Al elemento apuntado se accede al primer hijo para agregar un nuevo
valor de texto.
- Se crea una condicional terciaria: Si el nodo es = DOS,
entonces intercambiarlo por HOLI!
*/
apuntarItemx2.firstChild.nodeValue = nuevoNodo ? "Qué tal?" : "Holi!";
}
// Aloja y apunta a elemento contenedor
const magia = document.getElementById("contenedor");
/*
- Vincula el inicio de un evento 'click'
al inicio de la función alterarx()
- Se agrega la función como un dato (por eso está sin paréntesis)
- Parámetro 'false' indica que el evento será captado mediante
una fase de propagación (desde el elemento más interno hacia
el más externo). Ese parámetro es opcional.
*/
magia.addEventListener("click", alterarx);