BOM – Browser Object Model

The BOM is the intermediate layer between the JavaScript Core and the DOM. It’s Comprised of objects that are not part of the document, including browser windows, history, and cookies.

Debugging

Debugging is the process of finding and removing the causes of failures in software. Debugging is an important part of every JavaScript project. In the past debugging JavaScript was somewhat of a headache, nowadays debugging JavaScript is being made less painful by tools such as the Firefox extension Firebug.

Try/Catch

Every programming language has a try/catch component, which lets you handle error conditions that you might expect. These are most useful for handling race conditions. In JavaScript, it works like this:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JavaScript HTML Template</title>
	</head>
	<body>
		<script type="text/javascript">
		<!--
		try { // see if this works
		    afert(this.navigator.appName);
		} catch(e) { // if not do this:
		    alert(e);
		} finally {
		   // ... some code to complete any work after the try and / or catch ...
		}
		-->
		</script>
		<noscript>
		</noscript>
	</body>
</html>

New Windows

New windows (popups and other windows) can be opened using the window.open() method:

window.open(
	"http://twitter.com/antic", 
	"popup", 
	"height=500,width=700
);

Notice that the above accepts three arguments:

The URL of the page to be opened
The name of the new window
A comma separated list of the properties of the new windows.

If the third argument is left empty, the newly opened window will, most likely, look like the parent window, and may open in a new tab if your browser uses a tabbed interface. Tizag has more info on the 3rd argument properties

Note that Popup blockers can effect whether or not a new window will open and how it will work

You can maintain a reference to an opened window like this:

// maintain a reference to an opened window
var jsWindow = window.open(
	"http://twitter.com/antic", 
	"popup", 
	"height=500,width=700
);
 
// so we can reference it to close it
jsWindow.close();

The methods focus() and blur() make the window referred to active and foremost as well as inactive and hidden, respectively.

There are several methods available to windows including:

moveTo()
moveBy()
resizeTo()
resizeBy()
scrollTo()
scrollBy()

A complete reference on the window object can be found at: http://www.javascriptkit.com/jsref/window.shtml

Location Object

The location object holds data for the URL for the current page. This object has eight properties.

The location object can be called using the form

In Class Demo Code

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JavaScript HTML Template</title>
	</head>
	<body>
		<script type="text/javascript">
		<!--
 
		try { // see if this works
			var newWin = window.open(
				"file:///O:/WEB150/week_04_class.html", 
				"popup", // name of the window 
				"top=100,left=100,height=100,width=100,resizable=1" // extra window params
			);
			if(!newWin) {
				alert('please allow popups');
			}else{
 
			}
		    //afert(this.navigator.appName);
		} catch(e) { // if not do this:
			console.log(e); // log the exception (e)
		} finally {
			//alert('done');
		   // ... some code to complete any work after the try and / or catch ...
		}
		window.resizeTo(200,200);
		window.moveTo(200,200);
 
		var today = new Date();
		var now = today.getTime();
		var hour = today.getHours();
		var minutes = today.getMinutes();
		alert('today\'s date is...'+hour + ':' + minutes);
 
		-->
		</script>
	</body>
</html>

Advanced Reading (Optional)

Getting Information about the Current Page

Using the window.location property, you can get information about all the different parts of the current web page URL (including hash ID references). Here are the results of accessing the eight properties of the page: http://www.jsdesk.com:8080/search.php?query=onload#results

Property	Result
`window.location.hash`	#results
`window.location.host`	www.jsdesk.com:8080
`window.location.hostname`	www.jsdesk.com:8080
`window.location.href`	http://www.jsdesk.com:8080/search.php?query=onload#results
`window.location.pathname`	search.php
`window.location.port`	8080
`window.location.protocol`	http
`window.location.search`	?query=onload#results

The location object also has two methods

window.location.replace(): Forces a reload of the window’s current document.
window.location.reload(): Loads the specified URL over the current history entry.

It may not be immediately apparent but although window.location.href and window.location.replace() appear to have the same purporse There is one major difference. If you change the value of window.location.href or call the window.location.replace() method in the following manners:

window.location.href = "http://sccc.jsdesk.com";
window.location.replace("http://sccc.jsdesk.com");

The difference is that window.location.href acts like a user clicked a link. The window.location.replace overwrites the page from which the function was called in the history.

More can be found out about the location object at:http://www.javascriptkit.com/jsref/location.shtml

History

This object maintains a history of the pages loaded into the browser as found in the history cache. These methods and properties do not work well with Ajax.

window.history.back(): Loads the previous web page into the browser.
window.history.forward(): Loads the next web page into the browser.
window.history.go(): Load the web page that is however many pages away from the current page. If the argument is negative, the page loaded is back in history; if it is positive, the page loaded is forward in history.
window.history.previous: The web page as a string previous to the current one, if it exists.
window.history.current: The web page as a string for the current page displayed in the browser.
window.history.next: The web page as a string for the one following the current page, if it exists.
window.history.history: The number of pages stored in the history cache.

Cookies

Cookies are set as follows:

document.cookie = "testcookie=yes; expires=Tue, 29 Jan 2008 13:57:39 UTC; path=/; domain=jsdesk.com";

The code above creates a cookie with the name testcookie and the value of yes that will be valid until January 29, 2008 in all directories of jsdesk.com and all it’s subdomain.

It is always to include all of the above options to ensure that your cookies work cross browser. The above code is very precise not the semicolons and spaces that separate the various arguments and the strict form of the expiration date

Cookies are read in the following manner

document.cookie = "testcookie=yes; expires=Tue, 29 Jan 2008 13:57:39 UTC; path=/; domain=jsdesk.com";
document.cookie = "testcookie2=maybe; expires=Tue, 29 Jan 2008 13:57:39 UTC; path=/; domain=jsdesk.com";
alert(document.cookie;)

The above returns a string consisting of all the name value pairs of the various cookies. For this example the string is “testcookie=yes;testcookie2=maybe” will popup in an alert box.

In order to make cookies at all useful you will have to do some string manipulation in order to extract the name value pairs into something that is useful. We will learn more about string manipulation in Week 6

Cookies are deleted by setting the expiration date to the past:

document.cookie = "testcookie=yes; expires=Tue, 29 Jan 2000 13:57:39 UTC; path=/; domain=jsdesk.com";

Required Reading

Firebug video tutorial
Popups
Cookies
Window complete reference just skim this to see all of the properties ane methods of the window object. We won’t have time to cover it all, so it’s best at least to be familiar with the other things that are available to you

Intellectual Pirates

Week 04: Lecture – BOM+Debugging