My Journey to Learning Javascript: Notes- Browser Object Model (BOM)

You can also write scripts to the web browser and access its objects. Like javascript, the browser itself also has objects and methods. Two example methods of the window are

alert() and prompt()

write() would be a method of the object document()

The window object (global object), which is at the very top of the browser model hierarchy, can be thought of as the frame of the the browser and include scroll bars, navigator bars, and icons. And inside of the window object is the document object, this can be represented by the html page.

Five properties of the window object are history, location, navigator, screen, and document properties

History

The history property keeps track of the pages the user visits. History has a few methods including back() and foward(), to switch between pages the user has visited. The go() method which specifies how far foward or back in the history to go. And a length() property that shows how many pages are in the history stack.

Location

The location object displays information about the page’s location. It contains the page’s url, the server, port number of the server connection and the protocal used. This information is made available through the location object’s href, hostname, port, and protocol properties.

Navigator

Using the navigator method allows you to see information about the browser and the operating system. It’s propeties allow you to find out which browser, version, and operating system the user has. So that you are able to act on that information and make sure your code works only in browsers that support it. An important property of the navigator object is geolocation, which uses the geophysical position of the device or computer. The main method of geolocation is getCurrentPosition(). It requires a callback function that executes when getCurrentPosition() is done running.

function whereAmI(position) {

alert(“I found You!”);

}

navigator.geolocation.getCurrentPosition(whereAmI);

You can display the information by using the coords property.

function whereAmI(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var altitude = position.coords.altitude; var speed = position.coords.speed;
}

Another callback can be assigned incase an error occurs with obtaining the geolocation, for example, if the user denies permission to give their location.

function geoError(errorObj) { alert(“Uh oh, something went wrong”);
}

navigator.geolocation.getCurrentPosition(success, geoError);

To use the geolocation property, you (1) name a function with (position) parameter (2)inside the function you create variables that equal to the geolocation information (3)create a way for the information to be displayed example: console.log() or alert(). (4) create a function with an (error) parameter that will display a message incase obtaining location fails (5) Invoke the geolocation function. If permission is granted by the user, the location will be displayed, else the error message will be displayed. Example in its entirety:

function whereAmI(position){

var coords = position.coords; var latitude = coords.latitude; var longitude = coords.longitude;

alert(“you are located at “+latitude+”,”+longitude);

}

function locationError(errorObj){

alert(errorObj.message);

}
navigator.geolocation.getCurrentPosition(whereAmI, locationError);

Screen

The screen property gives information about the display capabilities of the user’s machine, it includes the height and width properties. They display the vertical and horizontal range of the screen.

Document

One of the most common and most important objects in the Browser Object Model is the document. The document gives you access to everything in the html page. Some properties of document object including: forms, images: a collection containing objects for each image, and links: collection containing objects for each <a tag.

Form objects are used to take user data as input for processing

Image objects are stored as a collection, meaning that all images in a page are stored similarly to an array, so each image in the collection is given an index, making them easier to locate. Just like arrays, they also have a .length property which can be used to show how many images are on the page.

Link objects are a collection of hyperlink element, <a/>. The most important property being the href property. Using link objects allows you to find where the link points to as well as make changes to it.

Feature Detection

An if statement can be used to test if the browser supports a certain feature.

if (typeof navigator.geolocation != “undefined”) { // use geolocation
}
*if the browser does not support the feature, “undefined” will be returned. else navigator.geolocation is supported and may be used.