23 - Browser Object Model (BOM)

¿Qué es el BOM?

El Browser Object Model es la forma en la que JavaScript interactúa con distintas funciones del navegador.

En apartado anteriores ya hemos visto algunos métodos del BOM como alert y prompt, que pertecen al objeto window.

Objetos del BOM

Veremos algunos métodos y ejemplos para cada uno:

Window

window.alert("Hola mundo")

window.prompt("Introduce un valor", "Valor por defecto")

window.setTimeout(() => {
    window.alert("Digo hola cuando pasa 1s.")
}, 1000)

window.setInterval(() => {
    window.alert("Digo adiós cada 5s.")
}, 5000)

Location

Es hijo del objeto window

console.log(location.href) // https://apuntes-js.netlify.app/23
console.log(location.hostname) // apuntes-js.netlify.app
console.log(location.pathname) // /23

/* Nos redirigirá a Duckduckgo */
window.location.href = "https://duckduckgo.com"

Screen

Es hijo del objeto window

console.log(screen.width) //Devulve el ancho de nuestra ventana del navegador
console.log(screen.heigth) //Devulve el alto de nuestra ventana del navegador
/* Ejemplo que mostraría en Chrome en W10 */
console.log(navigator.userAgent) //"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36"

History

Permite navegar por el historial de la misma forma que con las flechas de adelante y atrás del navegador:

history.back() // <==

history.forward() // ==>