Tutorial on JavaScript Window Object With Examples

It is important to learn how JavaScript interacts with browsers. To communicate with the browser, JavaScript uses the browser object model (BOM). It deals with browser components (history, location, navigator and screen). Document is a property of BOM.

In this tutorial, you will learn all about the JavaScript windows object, get a better idea of what it is and how you can work with it. You will learn about its methods and how you can use them.

JavaScript Window: Main Tips

• The Browser Object Model (BOM) helps JavaScript to communicate with the browser.
• Using the methods and properties of a window JavaScript offers, you can modify a particular window and get information on it.

The Window Object

All browsers support the object window JavaScript uses. It defines the window of the browser. Global JavaScript objects, functions, and variables become part of the window object automatically.

All global variables are window object properties, and all global functions are its methods. The whole HTML document is a window property, too.

In the example below, you can see how the document object (which belongs to the HTML DOM) is in the window object's property. Here, we select the body of the document:

window.document.getElementById("body");

This next example does the exact same thing. However, it is used to show that the window is not necessary for the function to work:

document.getElementById("body");

BOM vs. DOM

For a beginner, it's easy to get confused and lost among various terms, especially the ones that look a lot alike. Therefore, we thought we should clarify once again what is the main difference between BOM and DOM.

BOM (browser object model) allows JavaScript to communicate with the browser and its components, like history, location, navigator, screen and document.

DOM (document object model) actually represents the document: all of the HTML elements, events, etc. Thus, DOM is part of the BOM.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Getting Window Size

Height and width properties can be used to return the browser's window size. Both of the properties return the size in pixels:

• window.innerHeight returns the height of the browser's window.
• window.innerWidth returns the width of the browser's window.

Keep in mind we use different properties for Internet Explorer 8 and older versions:

• document.documentElement.clientHeight
• document.documentElement.clientWidth

or

• document.body.clientHeight
• document.body.clientWidth

The example below displays a universal code that works on any browser:

var w = window.innerWidth
|| document.body.clientWidth
|| document.documentElement.clientWidth;

var h = window.innerHeight
|| document.body.clientHeight
|| document.documentElement.clientHeight;

Note: the window property returns the browser window's height and width excluding toolbars.

Browser Methods

There are some more methods you may use with JavaScript windows objects:

• JavaScript window.open() is used to open a new window.
• window.close() is used to make JavaScript close window.
• By using window.moveTo(), you can move the current window.
• You should choose window.resizeTo() to resize the current window.

JavaScript Window: Summary

• JavaScript uses the browser object model (BOM) to communicate with the browser.
• BOM has various methods and properties that come useful when working with windows. For example, JavaScript window.open is used to open a new one.
• DOM is part of the BOM.