11-browser-environment

The Browser Environment

_{http://www.saregune.net/ikasi/hezigune/curso.php?curso=javascript&leccion=js_intro_dom
http://vkanakaraj.wordpress.com/2009/12/18/javascript-vs-dom-vs-bom-relationship-explained/
http://javascript.about.com/od/byexample/a/Javascript-By-Example_2.htm
http://stackoverflow.com/questions/4416317/what-is-the-dom-and-bom-in-javascript}

• Javascript can be used in different environments, bit its most usual environment is the browser

• The Javascript code in a webpage has access to a few objects. These ojects can be grouped in:

  • Objects related to the loaded HTML page (the document). These objects form the Document Object Model (DOM)
  • Objects that are related with things that happen out of the page (the windows' browser and the screen). These objects form the Browser Object Model (BOM)

• DOM is a standard and it has several version (called levels). Most of the browsers implement almost in its majority the DOM Level 1.
  _{http://www.quirksmode.org/compatibility.html
  http://www.webdevout.net/browser-subport-dom}

• BOM is not a standard, so some objects are supported by the majority of the browsers and others only by a few ones.

Feature Detection

_{http://stackoverflow.com/questions/1173165/how-to-guess-browser-compatibility-based-upon-dom-level}

• Because of these differences between browsers there's a need of finding out (from JS code) which features are available in our browser (DOM & BOM)

• A solution is the called Browser Sniffing that consist in detecting the browser we're using

  This technique is not recommended por:

  • Too many browsers to detect
  • Hard to maintain (new versions and new browser appear)
  • String parsing can get messy and is not reliable 100%

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

• Best solution to detect features in our browser is doing Feature Sniffing, this is, checking the existance of the object (method, array or property) we want to use

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
}