El entorno del Navegador

• El gran lío: versiones, DOM y BOM
• JavaScript Vs DOM Vs BOM, relationship explained | Rajakvk’s Blog
• Browser Object Model and Document Object Model | JavaScript By Example
• What is the DOM and BOM in JavaScript? | StackOverflow

Javascript puede ser utilizado en diferentes entornos, pero su entorno más habitual es el navegador

El código Javascript de una pagina tiene acceso a unos cuantos objetos. Estos objetos los podemos agrupar en:

• Objetos que tienen relación con la pagina cargada (el document). Estos objetos conforman el Document Object Model (DOM)
• Objetos que tienen que ver con cosas que están fuera de la pagina (la ventana del navegador y la pantalla). Estos objetos conforman el Browser Object Model (BOM)

El DOM es un standard y tiene varias versiones (llamadas levels). La mayoria de los navegadores implementan casi por completo el DOM Level 1.

El BOM no es un standard, asi que algunos objetos están soportados por la mayoría de navegadores y otros solo por algunos.

Deteccion de Funcionalidades

Debido a estas diferencia entre navegadores surge la necesidad de averiguar (desde código JS) que caracteristicas soporta nuestro navegador (DOM y BOM)

Una solución seria la llamada Browser Sniffing que consiste en detectar el navegador que estamos utilizando

Esta técnica no se recomienda por:

• Hay demasiados navegadores para controlar
• Dificil de mantener (surgen nuevas versiones y nuevos navegadores)
• El parseo de cadenas puede ser complicado y no es fiable del todo

if (navigator.userAgent.indexOf('MSIE') !== -1) {
    // this is IE
} else {
    // not IE
}

La mejor solucion para detectar funcionalidades de nuestro navegador es hacer Feature Sniffing, es decir chequear la existencia del objeto (método, array o propiedad) que queremos utilizar

if (typeof window.addEventListener === 'function') {
    // feature is subported, let's use it
} else {
    // hmm, this feature is not subported, will have to
    // think of another way
}