### BOM - Browser Object Model

The Browser Object Model represents the browser window. Through this object we can interact with certain properties of the browser, like the width of the window, cursor position, scroll bar, etc.

While the DOM is accessed through the document object, the BOM is accessed through the window object.

        console.log( window.innerWidth );
        /* This property returns the internal width of the browser's window  */

Thw window object can be omitted:

        console.log( innerWidth );

However, it is recommended to mention the window object to avoid confusion with variables. Unless for specific methods that are very well known and unique enough not to be confused with variables and your own functions, like the alert method:

        alert( "Message" );

        // this is actually:

        window.alert( "Message" );

Or the console.log:

        window.console.log("this works");

Global variables are also stored in the window object:

        var myName = "Tom";

        console.log(window.myName);

This means that if you create a new variable called innerWidth, it's going to overwrite the original property from the window object, so be extra careful when naming variables. See here a list of all window properties and methods.

There are many interesting things we can do with the BOM, let's see one example below:

#### window.onmousemove

The onmousemove event tracks the cursor movement around the browser's window. Let's use it to show a message when the cursor is at a specific position relative to the top of the window.

        window.onmousemove = function(e){
            if (e.pageY < 5) {
                alert("Don't miss our flash sale. Go to the the products section for exclusive discounts.");
            }
        };

In the next lessons we'll explore more features of the window object.

### Contents