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
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.
- determine size of the browser
- 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:
- String, Boolean, Number – object wrappers for primitives
- Math.random() – returns random number between 0 and 1 (15 decimals)
- usage: Math.floor(Math.random() * number_of_choices + initial_value)
- other properties:
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 document – window.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
- 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
Contains the browser history.
- history.back() – same as clicking back in the browser
- history.forward() – same as clicking forward in the browser
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
- .onLine – boolean – connection to the internet
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
- information that must be seen by the user
- confirm box
- 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
- 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.
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.
Thank you for your time!
Please subscribe for more weekly web wisdom!