Everything you need to know about BOM

The Browser Object Model is the core of using Javascript on the Web. It provides objects that expose browser functionalities (independent to any web browser).

In other words, if DOM is the way Javascript interacts with HTML, the BOM allows JS to “talk to” the browser directly.

Unlike DOM, Browser Object Model is not an official standard yet. This was problematic in the past because every browser was implementing it the way they see fit. Using a browser functionality required a lot browser-dependent code. In the present, however, HTML5 specifications cover the important aspects of the BOM and W3C seeks to standardize it, which makes it more reliable.


The window Object

The window object represents the browser window. It has a double purpose: the Javascript global object (the value of this outside of any function) and also an interface to the browser window.

All global objects, functions and variables are members of the window object (even the document object – the root of the DOM tree). It owns the global state of the application.

Main features: 

  • determine size of the browser
    • window.innerHeight
    • window.innerWidth
  • window.open() – open a new window
  • window.close() – close the current window
  • window.moveTo() -move the current window
  • window.resizeTo() -resize the current window

 


Singleton Built-In Objects

There are several objects that are already instantiated when the program starts.

As they are described in the documentation, a singleton built-in object is “any object supplied by an ECMAScript implementation, independent of the host environment, which is present at the start of the execution of an ECMAScript program”.

They are properties of the global object (in browser of the window object).

Note: Since window is the JS global object delegate, typing someProperty or window.someProperty is the same thing (both point to the same property).

The important singleton objects:

  • Object
  • Array
  • String, Boolean, Number – object wrappers for primitives
  • Math
    • Math.random() – returns random number between 0 and 1 (15 decimals) 
    • usage: Math.floor(Math.random() * number_of_choices + initial_value) 
  • other properties:

Screen Shot 2017-04-18 at 11.56.27 AM


Location object

Location object provide information about the document that is currently loaded in the browser as well as general navigation functionality.

An unique aspect about it is that it is a property of both window and documentwindow.location and document.location point to the same object -.

Using location you can get the current URL or redirect the browser to a new page

Examples:

  • window.location.href returns the href (URL) of the current page
  • window.location.hostname returns the domain name of the web host
  • window.location.pathname returns the path and filename of the current page
  • window.location.protocol returns the web protocol used (http: or https:)
  • window.location.assign() loads a new document

 


History Object

Contains the browser history.

  • history.back() – same as clicking back in the browser
  • history.forward() – same as clicking forward in the browser

 


Navigator Object

The navigator object contains information about the visitor’s browser (browser version, os, etc – !not very reliable)

  • .cookiesEnabled – if the cookies are enabled in the browser
  • .appName – application name of the browser
  • .geolocation
  • .onLine – boolean – connection to the internet

 


PopupBoxes

This is one of the most commonly used features of the DOM. Assuming you want to transmit a quick message to the user, without having to manually created a template and a pop-up behavior for it. The pop-up may look different from browser to browser, but the behavior is the same.

  • alert box
    • window.alert(“sometext”)
    • information that must be seen by the user
  • confirm box
    • window.confirm(“sometext”)
    •  when user must to verify or accept something
    • OK/Cancel buttons – if the user clicks ok -> returns true (cancel -> false)
    • script execution is suspended until the user presses a button
  • prompt Box
    • window.prompt(“sometext”,”defaultText”);
    • when a user input is required (ex. before entering the page)
    • blocks the access to the page
    • “someText” – message
    • “defaultText” – string put in the input (which can be modified)

Note: Keep in  mind that the user may choose to disable alert boxes for your site (I’m sure you have blocked annoying adds with promptBox before) – use them in a predictable way without disrupting the user experience.

 


Conclusion

What you should always remember from this read is that through BOM you can retrieve (and even change – but very rare) useful information about the browser. This can come in handy even if in large application with the latest modern frameworks. Although is not a standard yet, it is reliable in modern browsers.

Whenever you need such an information, start looking for it in the DOM.

Note: This is part of Javascript learning roadmap.

Thank you for your time!

Please subscribe for more weekly web wisdom!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s