materials

Browser Object Model (BOM)

Introducción

En este tema veremos cómo acceder a objetos que nos permitan interactuar con el navegador (Browser Object Model, BOM).

Usando los objetos BOM podemos:

Timers

Permiten ejecutar código en el futuro (cuando transcurran los milisegundos indicados). Hay 2 tipos:

Ambas funciones devuelven un identificador que nos permitirá cancelar la ejecución del código usando:

Ejemplo:

const idTimeout = setTimeout(() => alert('Timeout que se ejecuta al cabo de 1 seg.'), 1000);

let i = 1;
const idInterval = setInterval(() => {
	alert('Interval cada 3 seg. Ejecución nº: '+ i++);
  if (i === 5) {
    clearInterval(idInterval);
    alert('Fin de la ejecución del Interval');
	}
}, 3000);

EJERCICIO: Ejecuta en la consola cada una de esas funciones

En lugar de definir la función a ejecutar podemos llamar a una función que ya exista:

function showMessage() {
  alert('Timeout que se ejecuta al cabo de 1 seg.')
}

const idTimeout=setTimeout(showMessage, 1000);

Pero en ese caso hay que poner sólo el nombre de la función, sin () ya que si los ponemos se ejecutaría la función en ese momento y no transcurrido el tiempo indicado.

Si necesitamos pasarle algún parámetro a la función lo añadiremos como parámetros de setTimeout o setInterval después del intervalo:

function showMessage(msg) {
  alert(msg)
}

const idTimeout = setTimeout(showMessage, 1000, 'Timeout que se ejecuta al cabo de 1 seg.');

Objetos del BOM

Al contrario que para el DOM, no existe un estándar de BOM pero es bastante parecido en los diferentes navegadores.

Objeto window

Representa la ventana del navegador y es el objeto principal. De hecho puede omitirse al llamar a sus propiedades y métodos, por ejemplo, el método setTimeout() es en realidad window.setTimeout().

Sus principales propiedades y métodos son:

EJERCICIO: Ejecuta desde la consola:

Puedes ver un ejemplo de cómo abrir ventanas en este vídeo.

EJERCICIO: Haz que a los 2 segundos de abrir la página se abra un popup con un mensaje de bienvenida. Esta ventana tendrá en su interior un botón Cerrar que permitirá que el usuario la cierre haciendo clic en él. Tendrá el tamaño justo para visualizar el mensaje y no tendrá barras de scroll, ni de herramientas, ni de dirección… únicamente el mensaje.

Diálogos

Hay 3 métodos del objeto window que ya conocemos y que nos permiten abrir ventanas de diálogo con el usuario:

Objeto location

Contiene información sobre la URL actual del navegador y podemos modificarla. Sus principales propiedades y métodos son:

EJERCICIO: Ejecuta en la consola

Objeto history

Permite acceder al historial de páginas visitadas y navegar por él:

EJERCICIO: desde la consola vuelve a la página anterior

Objeto navigator

Nos da información sobre el navegador y el sistema en que se ejecuta:

También incluye objetos con sus propias API para poder interactuar con el sistema:

EJERCICIO: desde la consola muestra la información del navegador, su lenguaje y del sistema en que se ejecuta

Otros objetos

Otros objetos que incluye BOM son:

EJERCICIO: obtén desde la consola todas las propiedades width/height y availWidth/availHeight del objeto scrren. Compáralas con las propiedades innerWidth/innerHeight y outerWidth/outerHeight de window.

This site is open source. Improve this page.