Browser Object Model in JavaScript

We have below objects defined in Browser Object Model – BOM.

  1. Window object
  2. Screen
  3. History
  4. Location
  5. Cookies
  6. Navigator

window Object in BOM

If you try to execute the plain JavaScript file just by double clicking in windows platform, you will get errors saying “alert is undefined” or “window is undefined” or “console is undefined”. So you will have to run the JavaScript code within browser only.

To show the alert box, you can use below method.

alert(‘hi’)

To get the input from user, you can use below code.

var name = prompt(“Please enter your name”)

To display “OK” and “Cancel” Button, you can use “confirm” method as shown in below example.

var ret = confirm(“Choose your option”)
if (ret == true){
alert(“You clicked OK”)
}else{
alert(“You clicked Cancel”)
}

To get the width and height of window, you can use below code.

console.log(“Window height -> ” + window.innerHeight)
console.log(“Window width -> ” + window.innerWidth)

To open pop up window with specific URL, you can use below code. You can also move, resize and close pop up window.

var w = window.open(“https://www.softpost.org”,””, “width=300,height=300”)
w.moveTo(111,111)
w.resizeTo(444,444)
w.close()

You can create new windows using open() method.

var newwindow = window.open();
newwindow .document.open();
newwindow .document.write(“This will be put in the document in new window”);
newwindow .document.close();

To close the window, you can use close() method.

screen object

You can get screen width and height using below code.
console.log(“Screen height -> ” + screen.height)
console.log(“Screen width -> ” + screen.width)

location object

You can use location object to change the current page displayed within window.

console.log(“Current url in the window -> ” + window.location.href)
console.log(“Current domain in the window -> ” + window.location.hostname)
console.log(“Current path in the window -> ” + window.location.pathname)
console.log(“Protocol of the current url in the window -> ” + window.location.protocol)
window.location.assign(“https://www.softpost.org”)
window.location = “https://www.softpost.org”

history object

history object can be used to navigate back and forward.
window.history.back()
window.history.forward()
console.log(“Total number of urls in the history -> ” & window.history.length)

navigator object

You can use navigator object to get the details of user agent.
console.log(“User agent is -> ” + window.navigator.userAgent)

cookies object

By default, cookies are disabled for local files. So ensure that you must set the cookie through http protocol only.

document.cookie = “location=toowong”;
console.log(“Cookie is -> ” + document.cookie);

setInterval, setTimeout and clearInterval

window object provides these methods which can be used to call the specific function after specific time and also in repeating manner.

You may also like...