31 de octubre de 2017

JavaScript - BOM (Modelo de Objetos del Navegador)

BOM es el acrónimo de Browser Object Model (Modelo de Objetos del Navegador). Este modelo permite a JS comunicarse con el navegador que ha cargado la página.

No hay un estándar oficial para BOM, aunque los navegadores modernos implementan casi los mismos métodos y propiedades.

Nos ofrece una serie de objetos al nivel de document y superior para poder manipular parecido al siguiente árbol:


Window

En el nivel más alto tenemos al objeto window que implementan todos los navegadores. Este objeto representa una ventana/pestaña abierta del navegador (y otra por cada <iframe> que contenga).

Todos los objetos, funciones y variable globales pasan a ser miembros de window automáticamente. El objeto document del HTML DOM es una propiedad de window: window.document.

Para utilizar un miembro de window se puede obviar ésta palabra, pues es el acceso por defecto (como si hubiera un import de window.*). De hecho los métodos alert() y prompt() ya utilizados son métodos de window y los hemos llamado de esta forma.

Con window podemos abrir una nueva ventana, cerrarla, moverla, hacer scrolls, cambiar el tamaño, pasar/quitar el foco, etc...

Obtendremos un objeto window cuando abramos una dirección con window.open(url, nombre, specs, reemplazar). Si queremos una referencia a la ventana actual podremos obtenerla con self y comparándola con top podemos trabajar con los iframes.

Una utilidad importante de window es que se pueden almacenar pares "clave/valor" para personalizar la experiencia del usuario con la propiedad window.sessionStorage para una sesión o window.localStorage para obtener persistencia después de cerrar el navegador.

Window permite ejecutar código con un temporizador (en milisegundos) usando setInterval(funcion, intervalo) para llamadas separadas por el intervalo o setTimeout(func, interv) para ejecutarse una vez trascurrido un tiempo. Estos temporizadores seguirán ejecutándose hasta que no se reseteen con clearInterval(id) o clearTimeout(id) respectivamente. El id que hay que usar con estas últimas es el identificador que devuelven los métodos setInterval y setTimeout.

Hay una serie de propiedades que nos dan acceso a objetos importantes del navegador y que se detallan más abajo.

Navigator

La propiedad navigator proporciona el objeto que contiene la información del navegador: nombre de la aplicación, versión, plataforma, lenguaje, localización, etc...

Screen

La propiedad screen proporciona el objeto que contiene información de la pantalla del usuario: alto, ancho, profundidad de color y resolución.

History

La propiedad history proporciona el objeto que contiene las URLs visitadas por el usuario dentro del objeto window al que pertenece. Permite moverse hacia delante y atrás o ir directamente a una URL visitada.

Location

La propiedad location proporciona el objeto que contiene información acerca de la URL actual: nombre del host, ruta, puerto, hash, query string, etc...

Práctica js-bom-1

Práctica js-bom-2

Práctica js-bom-3

No hay comentarios:

Publicar un comentario

Compárteme

Entradas populares