ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

A Beginner JavaScript Tutorial Series: The Browser Object Model

Updated on March 25, 2014

Outline of this Tutorial

In this tutorial we look at the Browser Object Model. Since there is no uniform standard for the BOM it must be used with caution. However, many of the web browsers which have been developed access information through the same named methods. Also, details on accessing information is available through specific browser implementation documentation. For example, Microsoft, in its Microsoft Developer Network provides extensive information about its implementation. Many of the methods described in this tutorial are common to all browsers, again how useful browser information is is dependent upon how current it is. Hopefully, through this tutorial you will discover some information which is useful in your endeavors. Finally, I have used the information contained here to verify (at least currently) that it is correct.


Our First Example Shows the Disparity Among the BOMs

As mentioned in the previous section there is no standard for the BOM and our first and simplest example, determining the size of a window illustrates this.

The window object is supported by all browsers. That makes complete sense, otherwise what would you have to work with? In respect to JavaScript, all global objects methods, and properties are associated with the window.The HTML DOM document object is also a property of the BOM.

The method for the object window when locating an element with a property is equivalent to the object document, locating an element with a specific property:

window.getElementById() is equivalent to document.getElementById().

Some of the methods (which you would expect) are present in the BOM. For example, opening, closing, resizing, relocating the window, and just obtaining current size are methods available.

The problem is quite often not semantics when dealing with the various browsers, but the syntax.

For example, just in determining the size of the current window Internet Explorer (Henceforth, referred to through this tutorial has had 3 definitions for window height and width:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth
  • document.body.clientHeight
  • document.body.clientWidth

and,

  • window.innerHeight
  • window.innerWidth

just to describe the inner height and with of the browser window. What makes it even more difficult is that newer browser versions of IE don't support the older access methods. The following example illustrates this with IE 11 and trying to use clientHeight and clientWidth which was supported in earlier versions.

The code workaround in the first snapshot appears to work correctly.

A Deprecation Issue? Yes, It Appears So.

A solution would be present the browsers with the known variations in how the properties were accessed in the various versions of the code This snapshot illustrates that that is a feasible solution. The output is from Chrome, IE, Opera, Firefox.
A solution would be present the browsers with the known variations in how the properties were accessed in the various versions of the code This snapshot illustrates that that is a feasible solution. The output is from Chrome, IE, Opera, Firefox.
This example demonstrates that IE code from earlier version must have been depricated (or at least not verified for  support in IE 11.
This example demonstrates that IE code from earlier version must have been depricated (or at least not verified for support in IE 11.

The windows.screen() Properties

There are two properties associated with the screen object:

  • screen.availWidth, and
  • screen,availHeight

The fol

<!DOCTYPE html>
<html>
<body>

<script>

document.write("Available Width: " + screen.availWidth);

document.write("Available Width: " + screen.availHeight);

</script>

</body>
</htm

lowing code ran successfully on Firefox, Chrome, Canary, IE 11, and Opera.


Window Location Properties

Several of the information properties which;

  • location.hostname returns the domain name of the web host
  • location.pathname returns the named path of the current page
  • location.port returns the port of the web host
  • location.protocol returns the web protocol used (e.g. http or Https)

In addition you can assign a value to go to as the following snapshot indicates.

Using "window.location.assign" in JavaScript

In this example, the location.assignment was made to the root of the yahoo web site.
In this example, the location.assignment was made to the root of the yahoo web site.

Window History

The window.history object serves the same function as the back and forward buttons. The form of the statements is:

  • window,history.back() - same as clicking back in the browser
  • window.history.forward() - same as clicking forward in the browser

Navigator Information May Be Wrong or Misleading!

The information is sometime suspect and sometime in error so if using any of the following proceed with caution.

For example. navigator.appCodeName returns Mozilla for all browsers.

Browser Name: is coded as navigator.appName The snapshot illustrates the problem with obtaining this property as well. For IE 11, Chrome Canary, and Foxfire. The value returned is all cases is netscape.

Browser Version: is coded as navigator.appVersion, The second snapshot illustrates the output for Chrome Canary. This does not appear too be useful either.

Cookies Enabled: is coded as navigator.cookieEnabled Incorrect results were reported for IE. Although, in my tests the the other browsers: Chrome, Firefox, Operal, Canary reported correct results.

There are several other properties documented:


Platform: is coded as navigator.platform For navigator.platform the Mozilla Foundation web site has the following statement: "Unless your code is privileged (chrome or at least has the UniversalBrowserRead privilege), it may get the value of the general.platform.override preference instead of the true platform.


User-agent header: is coded as navigator.userAgent.


User-agent language: is coded as navigator.systemLanguage.

My recommendation is to code a small JavaScript accessing all of the properties and verify if the results are correct and useful for your own purposes.

Results from navigator Properties

The results here are not very helpful. ID, Chrome, and Firefox report the same value for the property.
The results here are not very helpful. ID, Chrome, and Firefox report the same value for the property.
This is the result I obtained from Chrome Canary for the appVersion property. I did not find this very useful.
This is the result I obtained from Chrome Canary for the appVersion property. I did not find this very useful.

JavaScript Popup Boxes

The popup boxes are naturally associated with the window object. There are three forms of popup boxes supported:

  • window.alert which is used for cases where the user must be informed of an error or some action they might have to be take. It cannot be ignored as it requires the user to clickon an OK button before any other interaction takes place on the screen.
  • window.confirm is illustrated in the snapshot which follows. It provides two button alternatives: "OK" or "CANCEL". The developer can provide code to follow either action.
  • window.prompt is used when its desirable for the user to enter a value before interacting with the screen. The user will have to click either "OK" or "CANCEL" to proceed.. If the user clicks "OK" the input value is returned to the script. If the user press the "CANCEL" button. the vaulue returned is null.


The Confirm Box

This is an example of the use of the confirm box.  In the code presented, the developer chose to print a message indicating to the user which button was pressed.
This is an example of the use of the confirm box. In the code presented, the developer chose to print a message indicating to the user which button was pressed.

Wrap Up and What's Next

In the last two tutorials we have presented tow object models, the HTML DOM and the BOM. There are similarities in their coding, but one must remember one major difference. The HTML DOM is a W3C standard, so one can expect it to perform identically across all browsers. The BOM is not a formalized standard and as we have seen with the navigator object, it has some limitations and errors.

Our next tutorials return to a focus on the elements involved in coding JavaScript functions.

Please Rate This Tutorial

Cast your vote for Will this tutorial help you in your development ?

What Browser Do You Use?

Which browser is your favorite?

See results

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)