What is BOM and DOM in Javascript? Javascript Alert, Confirm and Prompt Box

In this tutorial, you will learn

• What is BOM
• Properties and methods of window object
• Javascript popup boxes

What is BOM

BOM stands for Browser Object Modal. It is used by javascript to interact with browser. Like DOM, BOM also provides properties and methods of objects

Javascript Window Object

Window is the root object almost supported by all browsers. DOM root object document is the property of window object.

Window Properties and Methods

Window Size

Window inner width and inner height properties return the inner size of browser window in pixel.

Window outer width and outer height properties return the outer size of browser window in pixel.

console.log('Inner Width: '+window.innerWidth)

console.log('Inner Height: '+window.innerHeight)

console.log('Outer Width: '+window.outerWidth)

console.log('Outer Height: '+window.outerHeight)

Output: 

Inner Width: 1366
Inner Height: 149
Outer Width: 1366
Outer Height: 728

Browser toolbar and scrollbar are not included in browser window.

Window Open

This method open new window, open link in tab in browser and load specified URL in that. You can set window properties.

It takes three parameters:-

URL: If it is empty then new tab or new window will be empty

Name of Window: It is optional

Window Features: It is also optional. It is a comma separated list of window features like position, size, menubar, toolbar, resizable, scrollbars, location, status. Value of window feature can be yes or no.

Return Value: Open method returns the WindowProxy object that can be used to access properties and methods of new window.

Below example opens a new window the setting / unsetting few window features.

var wFeatures = "menubar=1, resizable=1, scrollbars=1, status=yes"

var url = "https://www.techilm.com/"

var openBtn = document.getElementById('open')

var ret = window.open(url, "Techilm", wFeatures)

Output:

Window Close

Current window or any window opened by open method can be closed by calling window close method.

//Close window just opened

ret.close();

//Close current window

window.close();

Window Location

Location object is used to get browser information and redirects the user to a new page of browser. It provides following methods.

Assign method load a new resource of provided URL.

Hostname method returns the domain name of hosting provider

Href method returns the URL of loaded page

Protocol method returns the protocol being using for communication like http, https, ftp

Port method returns the number of ports being used by browser

Below example uses all methods of location object

console.log('URL: '+window.location.href)

console.log('Domain Name: '+window.location.hostname)

console.log('Ports: '+window.location.port)

console.log('Protocol: '+window.location.protocol)

Output:

URL: http://127.0.0.1:5500/index.html

Domain Name: 127.0.0.1

Ports: 5500

Protocol: http

Window History

History object record the usage history of browser. It provides following two methods.

Back method loads the previous URL. It is same as browser back link.

Forward method loads the next URL. It is same as browser forward link.

window.history.forward()

window.history.back()

Javascript Popup Boxes

Javascript Alert box, Prompt box and Confirm box are three types of popup boxes in javascript.

Alert Box

To alert the user, this popup box is appeared. To proceed, user have to click OK.

window.alert('I am alert box')

Prompt Box

This popup box is used to prompt the user to give input. Clicking OK returns the value typed by user and clicking Cancel returns null.

var val = window.prompt('Give input')

console.log(val)

Confirm Box

Confirm box in javascript is used to confirm something from user with two options: OK and Cancel. Clicking OK returns true and Clicking Cancel returns false.

var ret = window.confirm('Do you want to proceed')

console.log(ret)