Browser Object Model
El objeto WindowInterval y TimeoutEl objeto locationEl objeto historyCuadros de diálogoAlertConfirmPrompt

<< Expresiones Regulares Document Object Model >>

El Browser Object Model o BOM, es una colección de objetos globales con diversas funcionalidades para interactuar con las posibilidades que nos ofrece el navegador desde nuestro código JavaScript. Esto incluye cosas como el manejo de la ventana del navegador, el histórico de páginas de la pestaña actual, la url actual, el almacenamiento local, la geolocalización, y una serie de APIs nuevas que han ido apareciendo como las notificaciones Push, programación multihilo con Webworkers, o el acceso a la cámara del dispositivo, entre otras.

El objeto Window

El objeto window representa la ventana del navegador y es el objeto principal. El resto de objetos del BOM están contenido dentro de window ( location, document, history, navigator, screen ). El objeto window puede ser omitido accediendo a sus propiedades directamente (window.location == location).

'use strict';
// Tamaño total de la ventana (excluye la barra superior del navegador)
console.log(window.outerWidth + " - " + window.outerHeight);
window.open("https://www.google.com");

// Propiedades de la pantalla
console.log(window.screen.width + " - " + window.screen.height); // Ancho de pantalla y alto (Resolución)
console.log(window.screen.availWidth + " - " + window.screen.availHeight); // Excluyendo la barra del S.O.

// Propiedades del navegador
console.log(window.navigator.userAgent); // Imprime la información del navegador
window.navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude);
});

//  Podemos omitir el objeto window (está implícito)
console.log(history.length); // Páginas visitadas en la pestaña actual. Lo mismo que window.history.length

Interval y Timeout

Hay dos tipos de timers que podemos crear en JavaScript para ejecutar algún trozo de código en el futuro (especificado en milisegundos), timeout e interval. El primero se ejecuta sólo una vez (debemos volver a crearlo manualmente si queremos que se repita más veces), y el segundo se repite cada X milisegundos sin parar (o hasta que sea cancelado).

timeout(función, milisegundos) → Ejecuta una función pasados un número de milisegundos.

console.log(new Date().toString()); // Imprime inmediatamente la fecha actual
setTimeout(() => console.log(new Date().toString()), 5000);  // Se ejecutará en 5 segundos (5000 ms)

cleartimeout(timeoutId) → Cancela un timeout (antes de ser llamado)

// setTimeout devuelve un número con el id, y a partir de ahí, podremos cancelarlo
let idTime = setTimeout(() => console.log(new Date().toString()), 5000);
clearTimeout(idTime); // Cancela el timeout (antes de que se ejecute)

setInterval(funcion, milisegundo) → La diferencia con timeout es que cuando el tiempo acaba y se ejecuta la función, se resetea y se repite cada X milisegundos automáticamente hasta que lo cancelemos.

let num = 1;
setInterval(() => console.log(num++), 1000); // Imprime un número y lo incrementa cada segundo

clearInterval(idIntervalo) → Cancela un interval (no se repetirá más).

let num = 1;
let idInterval = setInterval(() => {
    console.log(num++);
    if(num > 10) { // Cuando imprimimos 10, paramos el timer para que no se repita más
        clearInterval(idInterval);
    }
}, 1000);

setInterval/setTimeOut(nombreFuncion, milisegundos, argumentos…) → Podemos pasarle un nombre función existente. Además, si se requieren parámetros, podemos establecer sus valores tras los milisegundos.

function multiply(num1, num2) {
    console.log(num1 * num2);
}

setTimeout(multiply, 3000, 5, 7); // Después de 3 segundos imprimirá 35 (5*7)

El objeto location

El objeto location contiene información sobre la url actual del navegador. Podemos acceder y modificar dicha url a partir de dicho objeto.

console.log(location.href); // Imprime la URL actual
console.log(location.host); // Imprime el nombre del servidor (o la IP) como “localhost” 192.168.0.34
console.log(location.port); // Imprime el número del puerto (normalmente 80)
console.log(location.protocol); // Imprime el protocolo usado (http ó https)
console.log(location.search); // Imprime los parámetros de búsqueda de la url (Ej: '?p1=1&p2=2')

location.reload(); // Recarga la página actual
location.assign("https://google.com"); // Carga una nueva página
location.replace("https://google.com"); // Carga una nueva página sin guardar la actual en el objeto history

El objeto history

Para navegar a través de las páginas que hemos visitado en la pestaña actual, podemos usar el objeto El objeto history. Este objeto tiene métodos bastante útiles

console.log(history.length); // Imprime el número de páginas almacenadas

history.back(); // Vuelve a la página anterior
history.forward(); // Va hacia la siguiente página
history.go(2); // Va dos páginas adelante (-2 iría dos páginas hacia atrás)

En cada navegador, tenemos un conjunto de cuadros de diálogo para interactuar con el usuario. Sin embargo, estos no son personalizables y por tanto cada navegador implementa el suyo a su manera y con un estilo propio. Por ello no es recomendable usarlos en una aplicación en producción (uniformidad). En cambio, son una buena opción para hacer pruebas (en producción deberíamos usar cuadros de diálogo construidos con HTML y CSS).

Alert

El diálogo alert, muestra un mensaje (con un botón de Aceptar) dentro de una ventana. Bloquea la ejecución de la aplicación hasta que se cierra.

alert("Hola mundo!")

Confirm

El diálogo confirm es similar, pero te devuelve un booleano. Tiene dos botones (Cancelar → false, Aceptar → true). El usuario elegirá entre una de esas dos opciones.

if(confirm("Do you like dogs?")) {
    console.log("You are a good person");
} else {
    console.log("You have no soul");
}

Prompt

El diálogo prompt muestra un input después del mensaje. Lo podemos usar para que el usuario introduzca algún valor, devolviendo un string con el valor introducido. Si el usuario pulsa el botón de Cancelar o cierra el diálogo devolverá null. Se puede establecer un valor por defecto (segundo parámetro).

let name = prompt("What's your name?", "Nobody");

if(name) {
    console.log("Your name is: " + name);
} else {
    console.log("You didn't answer!");
}

<< Expresiones Regulares Document Object Model >>