En los capítulos anteriores estuvimos trabajando el DOM, todos los conceptos básicos para poder trabajar cualquier tipo de evento. En los siguientes capítulos vamos a ver la parte del BOM (Browser Object Model), que es una serie de métodos y objetos que cuelgan directamente de la ventana del navegador, es decir, de window.
En este primer capítulo vamos a ver dos propiedades muy importantes, que son innerWidth, innerHeight, outerWidth y outerHeight
innerWidth
Esta propiedad hace referencia al tamaño del ancho del viewport (parte visible) de nuestra ventana.
innerHeight
Esta propiedad hace referencia al tamaño del alto del viewport (parte visible) de nuestra ventana.
outerWidth
Es la propiedad que hace referencia al ancho de nuestro navegador.
outerHeight
Es la propiedad que hace referencia al alto de nuestro navegador.
Ejm
console.log(window.innerWidth); console.log(window.innerHeight); console.log(window.outerWidth); console.log(window.outerHeight);
Vamos a ver otro ejm.
window.addEventListener("resize", e => {
console.clear();
console.log("--Resize--");
console.log(window.innerWidth);
console.log(window.innerHeight);
console.log(window.outerWidth);
console.log(window.outerHeight);
console.log(e);
};Otras propiedades
Tenemos otras propiedades importantes como son:
Control del desplazamiento del scroll
Tenemos dos propiedades para ello, son scrollX y scrollY. Para ello vamos a utilizar un evento denominado justamente scroll. Vamos a hacer un ejercicio para entender su funcionamiento.
Ejm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Control de desplazamiento del Scroll</title>
</head>
<body>
<h1>Control de desplazamiento del Scroll</h1>
<h2 style="width: 2000px;">Manejo del BOM</h2>
<script>
window.addEventListener("scroll", e => {
console.clear();
console.log("Evento Scroll");
console.log(window.scrollX);
console.log(window.scrollY);
})
</script>
</body>
</html>Coordenadas de la pantalla
Tenemos más propiedades, por ejm, en que coordenada de nuestra pantalla comienza a dibujarse la ventana de nuestro navegador, para ello podemos hacer uso de las propiedades screenX y screenY. Para ello vamos a utilizar un evento denominado load.
Ejm
window.addEventListener("load", e => {
console.log(window.screenX);
console.log(window.screenY);
});Cuando termine de cargar la ventana aparecerán los consoles. Si hemos trabajado con jQuery, es el típico $(load).
Evento DOMContentLoaded
Este evento funciona como el evento load, pero es mucho más rápido.
Ejm
document.addEventListener("DOMContentLoaded", e => {
console.log(window.screenX);
console.log(window.screenY);
});DOMContentLoaded se puede utilizar para peticiones asíncronas al consumo de APIs, o esperar la respuesta de la conexión a una base de datos. Es una mejor práctica hacer uso de este evento en lugar del evento load.
Nota: uno de los errores frecuentes es utilizar el evento load para inicializar algunas cargas de nuestro sitio, cuando DOMContentLoaded es mucho más apropiado.