JavaScript is partly an object-oriented language.
To learn JavaScript, we got to learn the object-oriented parts of JavaScript.
In this article, we’ll look at the built-in properties of window .
The window.screen Property
The window.screen property lets get information about the browser’s screen.
We can get the color depth with:
window.screen.colorDepth;
And we can get the screen’s width with:
screen.width;
screen.availWidth;
width is the whole screen and availableWidth subtracts the widths of the menus and scrollbars, etc.
We can get the heights the same way with:
screen.height;
screen.availHeight;
Some devices also have the devicePixelRatio property:
window.devicePixelRatio
which tells us the trio between the physical pixels and device pixels in retina displays.
window.open()/close() Method
The window.open method lets us open a new browser window.
Various policies and settings of the browser may prevent us from opening popups to curb popup ads.
But we should be able to open a new window if it’s initiated by the user.
If we try to open a window when the page loads, it’ll probably be blocked since the user didn’t open the window.
The window.open() method takes a few parameters.
The first is the URL to load in a new window.
The name of the new window can be used as the value of the form’s target attribute.
A comma-separated list of features are also arguments, which include resizable to indicates whether the popup is resizable.
The width is the width of the popup window.
status is indicates whether the status bar should be visible.
For instance, we can write:
const win = window.open('http://www.example.com', 'example window',
'width=300,height=300,resizable=yes');
We call the open method with the URL, the title, and a string with the window size and whether it’s resizable.
win has the close method to let us close the window.
The window.moveTo() and window.resizeTo() Methods
The window.moveYo method lets us move the browser window to the given screen coordinates of the top-left corner.
For instance, we can write:
window.moveTo(100, 100)
to move the window.
We can also call the moveBy method to move the window by the given number of pixels across and down from its current location.
For instance, we can write;
window.moveBy(10, 10):
to move a window right and down by 10 pixels.
We can also pass in negative numbers to move in the opposite direction.
The window.resizeTo and window.resizeBy methods accept the same parameter as the move methods.
But they resize the window instead of moving it.
The window.alert(), window.prompt(), and window.confirm() Methods
alert is a method that takes a string and shows the alert with the text we pass in.
confirm lets us create a dialog box with the text we want to display.
The user can click OK or Cancel to dismiss the dialog box.
The value will be returned by the confirm function.
It’ll return true if we click OK and false otherwise.
So we can write:
const answer = confirm('Are you sure?');
Then we can get the answer after the user clicks on the button.
It’s handy for confirming user actions.
So we can write:
if (confirm('Are you sure?')) {
// ...
} else {
// ...
}
The prompt lets us show a dialog with some question text and let the user enter something into an input.
The inputted value will be returned as a string.
If it’s empty then it returns an empty string.
It returns null if the user clicks cancel, X, or press the Esc key.
We can use it by writing:
const answer = prompt('Are you sure?');
answer has the answer that’s entered.
Conclusion
window has many methods we can use.
They include methods to open a window, open alerts and prompts, and more.
