The Browser Object Model

JavaScript Window

The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.

---

The Browser Object Model (BOM)

There are no official standards for the Browser Object Model (BOM).

Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM.

---

The Window Object

The window object is supported by all browsers. It represents the browser's window.

All global JavaScript objects, functions, and variables automatically become members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the document object (of the HTML DOM) is a property of the window object:

is the same as:

---

Window Size

Two properties can be used to determine the size of the browser window.

Both properties return the sizes in pixels:

• window.innerHeight - the inner height of the browser window (in pixels)
• window.innerWidth - the inner width of the browser window (in pixels)

The browser window (the browser viewport) is NOT including toolbars and scrollbars.

For Internet Explorer 8, 7, 6, 5:

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

A practical JavaScript solution (covering all browsers):

Example

Try it now

The example displays the browser window's height and width: (NOT including toolbars/scrollbars)

---

Other Window Methods

Some other methods:

• window.open() - open a new window
• window.close() - close the current window
• window.moveTo() - move the current window
• window.resizeTo() - resize the current window

Practice Excercise Practice now

JavaScript Window Screen

The window.screen object contains information about the user's screen.

---

Window Screen

The window.screen object can be written without the window prefix.

Properties:

• screen.width
• screen.height
• screen.availWidth
• screen.availHeight
• screen.colorDepth
• screen.pixelDepth

---

Window Screen Width

The screen.width property returns the width of the visitor's screen in pixels.

Example

Display the width of the screen in pixels:

Try it now

Result will be:

Screen Width: 1536

---

Window Screen Height

The screen.height property returns the height of the visitor's screen in pixels.

Example

Display the height of the screen in pixels:

Try it now

Result will be:

Screen Height: 864

Window Screen Available Width

The screen.availWidth property returns the width of the visitor's screen, in pixels, minus interface features like the Windows Taskbar.

Example

Display the available width of the screen in pixels:

Try it now

Result will be:

Available Screen Width: 1536

---

Window Screen Available Height

The screen.availHeight property returns the height of the visitor's screen, in pixels, minus interface features like the Windows Taskbar.

Example

Display the available height of the screen in pixels:

Try it now

Result will be:

Available Screen Height: 824

---

Window Screen Color Depth

The screen.colorDepth property returns the number of bits used to display one color.

All modern computers use 24 bit or 32 bit hardware for color resolution:

• 24 bits =      16,777,216 different "True Colors"
• 32 bits = 4,294,967,296 different "Deep Colors"

Older computers used 16 bits: 65,536 different "High Colors" resolution.

Very old computers, and old cell phones used 8 bits: 256 different "VGA colors".

Example

Display the color depth of the screen in bits:

Try it now

Result will be:

Screen Color Depth: 24
 

The #rrggbb (rgb) values used in HTML represents "True Colors" (16,777,216 different colors)

---

Window Screen Pixel Depth

The screen.pixelDepth property returns the pixel depth of the screen.

Example

Display the pixel depth of the screen in bits:

Try it now

Result will be:

Screen Pixel Depth: 24

For modern computers, Color Depth and Pixel Depth are equal.

Practice Excercise Practice now

JavaScript Window Location

The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.

---

Window Location

The window.location object can be written without the window prefix.

Some 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

---

Window Location Href

The window.location.href property returns the URL of the current page.

Example

Display the href (URL) of the current page:

Try it now

Result is:

Page location is page_location
 

---

Window Location Hostname

The window.location.hostname property returns the name of the internet host (of the current page).

Example

Display the name of the host:

Try it now

Result is:

Page hostname is www.mytat.co

---

---

Window Location Pathname

The window.location.pathname property returns the pathname of the current page.

Example

Display the path name of the current URL:

Try it now

Result is:

Page path is /js/js_window_location.asp

---

Window Location Protocol

The window.location.protocol property returns the web protocol of the page.

Example

Display the web protocol:

Try it now

Result is:

Page protocol is https:

---

Window Location Port

The window.location.port property returns the number of the internet host port (of the current page).

Example

Display the name of the host:

Try it now

Result is:

Port number is

Most browsers will not display default port numbers (80 for http and 443 for https)

---

Window Location Assign

The window.location.assign() method loads a new document.

Example

Load a new document:

Try it now

Practice Excercise Practice now

JavaScript Window History

The window.history object contains the browsers history.

---

Window History

The window.history object can be written without the window prefix.

To protect the privacy of the users, there are limitations to how JavaScript can access this object.

Some methods:

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

---

Window History Back

The history.back() method loads the previous URL in the history list.

This is the same as clicking the Back button in the browser.

Example

Create a back button on a page:

 

---

Window History Forward

The history.forward() method loads the next URL in the history list.

This is the same as clicking the Forward button in the browser.

Example

Create a forward button on a page:

Practice Excercise Practice now

JavaScript Window Navigator

The window.navigator object contains information about the visitor's browser.

---

Window Navigator

The window.navigator object can be written without the window prefix.

Some examples:

• navigator.appName
• navigator.appCodeName
• navigator.platform

---

Browser Cookies

The cookieEnabled property returns true if cookies are enabled, otherwise false:

Example

Try it now

---

Browser Application Name

The appName property returns the application name of the browser:

Example

Try it now

Strange enough, "Netscape" is the application name for both IE11, Chrome, Firefox, and Safari.

---

Browser Application Code Name

The appCodeName property returns the application code name of the browser:

Example

Try it now

"Mozilla" is the application code name for both Chrome, Firefox, IE, Safari, and Opera.

---

The Browser Engine

The product property returns the product name of the browser engine:

Example

Try it now

Do not rely on this. Most browsers returns "Gecko" as product name !!

---

The Browser Version

The appVersion property returns version information about the browser:

Example

Try it now

The Browser Agent

The userAgent property returns the user-agent header sent by the browser to the server:

Example

Try it now

---

Warning !!!

The information from the navigator object can often be misleading, and should not be used to detect browser versions because:

• Different browsers can use the same name
• The navigator data can be changed by the browser owner
• Some browsers misidentify themselves to bypass site tests
• Browsers cannot report new operating systems, released later than the browser

---

The Browser Platform

The platform property returns the browser platform (operating system):

Example

Try it now

---

The Browser Language

The language property returns the browser's language:

Example

Try it now

---

Is The Browser Online?

The onLine property returns true if the browser is online:

Example

Try it now

---

Is Java Enabled?

The javaEnabled() method returns true if Java is enabled:

Example

Try it now

Practice Excercise Practice now

JavaScript Popup Boxes

JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.

---

Alert Box

An alert box is often used if you want to make sure information comes through to the user.

When an alert box pops up, the user will have to click "OK" to proceed.

Syntax

The window.alert() method can be written without the window prefix.

Example

Try it now

---

Confirm Box

A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Syntax

The window.confirm() method can be written without the window prefix.

Example

Try it now

---

Prompt Box

A prompt box is often used if you want the user to input a value before entering a page.

When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Syntax

The window.prompt() method can be written without the window prefix.

Example

Try it now

---

Line Breaks

To display line breaks inside a popup box, use a back-slash followed by the character n.

Example

Try it now

Practice Excercise Practice now

JavaScript Timing Events

Timing Events

The window object allows execution of code at specified time intervals.

These time intervals are called timing events.

The two key methods to use with JavaScript are:

• setTimeout(function, milliseconds)
  Executes a function, after waiting a specified number of milliseconds.


• setInterval(function, milliseconds)
  Same as setTimeout(), but repeats the execution of the function continuously.

The setTimeout() and setInterval() are both methods of the HTML DOM Window object.

---

The setTimeout() Method

The window.setTimeout() method can be written without the window prefix.

The first parameter is a function to be executed.

The second parameter indicates the number of milliseconds before execution.

Example

Click a button. Wait 3 seconds, and the page will alert "Hello":

Try it now

---

How to Stop the Execution?

The clearTimeout() method stops the execution of the function specified in setTimeout().

The window.clearTimeout() method can be written without the window prefix.

The clearTimeout() method uses the variable returned from setTimeout():

Try it now

If the function has not already been executed, you can stop the execution by calling the clearTimeout() method:

Example

Same example as above, but with an added "Stop" button:

Try it now

---

The setInterval() Method

The setInterval() method repeats a given function at every given time-interval.

The window.setInterval() method can be written without the window prefix.

The first parameter is the function to be executed.

The second parameter indicates the length of the time-interval between each execution.

This example executes a function called "myTimer" once every second (like a digital watch).

Example

Display the current time:

 

Try it now

There are 1000 milliseconds in one second.

---

How to Stop the Execution?

The clearInterval() method stops the executions of the function specified in the setInterval() method.

The window.clearInterval() method can be written without the window prefix.

The clearInterval() method uses the variable returned from setInterval():

Example

Same example as above, but we have added a "Stop time" button:

Try it now

Practice Excercise Practice now

JavaScript Cookies

Cookies let you store user information in web pages.

---

What are Cookies?

Cookies are data, stored in small text files, on your computer.

When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user.

Cookies were invented to solve the problem "how to remember information about the user":

• When a user visits a web page, his/her name can be stored in a cookie.
• Next time the user visits the page, the cookie "remembers" his/her name.

Cookies are saved in name-value pairs like:

username = John Doe

When a browser requests a web page from a server, cookies belonging to the page are added to the request. This way the server gets the necessary data to "remember" information about users.

None of the examples below will work if your browser has local cookies support turned off.

---

Create a Cookie with JavaScript

JavaScript can create, read, and delete cookies with the document.cookie property.

With JavaScript, a cookie can be created like this:

You can also add an expiry date (in UTC time). By default, the cookie is deleted when the browser is closed:

With a path parameter, you can tell the browser what path the cookie belongs to. By default, the cookie belongs to the current page.

---

---

Read a Cookie with JavaScript

With JavaScript, cookies can be read like this:

---

Change a Cookie with JavaScript

With JavaScript, you can change a cookie the same way as you create it:

The old cookie is overwritten.

---

Delete a Cookie with JavaScript

Deleting a cookie is very simple.

You don't have to specify a cookie value when you delete a cookie.

Just set the expires parameter to a past date:

You should define the cookie path to ensure that you delete the right cookie.

Some browsers will not let you delete a cookie if you don't specify the path.

---

The Cookie String

The document.cookie property looks like a normal text string. But it is not.

Even if you write a whole cookie string to document.cookie, when you read it out again, you can only see the name-value pair of it.

If you set a new cookie, older cookies are not overwritten. The new cookie is added to document.cookie, so if you read document.cookie again you will get something like:

If you want to find the value of one specified cookie, you must write a JavaScript function that searches for the cookie value in the cookie string.

---

JavaScript Cookie Example

In the example to follow, we will create a cookie that stores the name of a visitor.

The first time a visitor arrives to the web page, he/she will be asked to fill in his/her name. The name is then stored in a cookie.

The next time the visitor arrives at the same page, he/she will get a welcome message.

For the example we will create 3 JavaScript functions:

1. A function to set a cookie value
2. A function to get a cookie value
3. A function to check a cookie value

---

A Function to Set a Cookie

First, we create a function that stores the name of the visitor in a cookie variable:

Example

Example explained:

The parameters of the function above are the name of the cookie (cname), the value of the cookie (cvalue), and the number of days until the cookie should expire (exdays).

The function sets a cookie by adding together the cookiename, the cookie value, and the expires string.

---

A Function to Get a Cookie

Then, we create a function that returns the value of a specified cookie:

Example

Function explained:

Take the cookiename as parameter (cname).

Create a variable (name) with the text to search for (cname + "=").

Decode the cookie string, to handle cookies with special characters, e.g. '$'

Split document.cookie on semicolons into an array called ca (ca = decodedCookie.split(';')).

Loop through the ca array (i = 0; i < ca.length; i++), and read out each value c = ca[i]).

If the cookie is found (c.indexOf(name) == 0), return the value of the cookie (c.substring(name.length, c.length).

If the cookie is not found, return "".

---

A Function to Check a Cookie

Last, we create the function that checks if a cookie is set.

If the cookie is set it will display a greeting.

If the cookie is not set, it will display a prompt box, asking for the name of the user, and stores the username cookie for 365 days, by calling the setCookie function:

Example

---

All Together Now

Example

 

Try it now

The example above runs the checkCookie() function when the page loads.

Practice Excercise Practice now