duduromeroa.com

Javascript | DOM | API

Programación para web: (1) Interfaz de ventana de navegador (Window Interface) en JS


JS, eventos, escuchas de eventos, DOM. www.duduromeroa.com

Por Eduardo J. Romero Andrade
| Guayaquil

Contacto duduromeroa@gmail.com

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

Aclaraciones
Contenido para quienes ya cuentan con comprensión y práctiva previa en HTML, CSS y JS. Adjunto bibliografía al final de esta página.


En algunos ejemplos de código mostrados en esta página añadí espacios entre los caracteres para resaltar los elementos. La sintaxis original NO usa esos espacios.


En casi todos los ejercicios expongo código y comentarios. Puedes revisarlo en: (click derecho en esta página desde mouse > Inspect Element > sources ).






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 Esta ventana los carga y permite accederlos para alterarlos o generar interactividad mediante la variable global window.

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 . 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);


BIBLIOGRAFÍA:
[1] Eloquent JavaScript 3ra edición. 2018. Marijn Haverbeke. No starch press.
[2] MDN Web Docs, Javascript. Mozilla Foundation.
[3] JavaScript: The Definitive Guide. David Flanagan (2020). Editorial O'Reilly.
[4] Object-Oriented JavaScript Ved Antani, Stoyan Stefanov (2017). Packt Publishing.
[5] Laurence Lars Svekis, Maaike van Putten. JavaScript from Beginner to Professional: Learn JavaScript quickly by building fun, interactive, and dynamic web apps, games, and pages (2021). Editorial Packt.
[6] Black, A. P. (2013) Object-oriented programming: Some history, and challenges for the next fifty years. Information and Computation. Elsevier.
[7] John R. Pugh, Wilf R. LaLonde, David A. Thomas (1987) Introducing object-oriented programming into the computer science curriculum. ACM SIGCSE BulletinVolume 19Issue 1Feb
[8] W3C. JavaScript HTML DOM Navigation