All objects through which JavaScript interacts with the browser are described by such a concept as the Browser Object Model
The window object represents the browser. This object in turn includes a number of other objects, in particular the document object, which represents a single web page that is displayed in the browser.
For example, window has an alert() method that displays a message box:
window.alert("Hello");
alert('Hello');
But since this object is global, this imposes some restrictions. For example:
var alert = function (message) {
document.write("Message: " + message);
};
window.alert("Hello");
And since the name of the new function will be the same as the name of the alert() method, this method will be overridden in the window object by the new function.
And if we declare some global variable in the program, then it is available to us as a property in the window object:
var message = "hello";
document.write(window.message)//hello
Window management
For user interaction, the window object defines a number of methods that allow you to create dialog windows.
The alert() method displays a window with a message:
alert("hello");
The confirm() method displays a message box in which the user must confirm the operation of the two OK and Cancel buttons. Depending on the user’s choice, the method returns true (if the user clicked OK) or false (if the user clicked the Cancel button):
var result = confirm("Are you over 18?");
if (result === true)
document.write("The program has ended");
else
document.write("The program continues to run");
The prompt() method allows you to use a dialog window to prompt the user for some input. This method
returns the value entered by the user:
var age = prompt("Enter your age:");
document.write(age);
Opening, closing and positioning windows
The window object also provides a number of methods for managing browser windows. For example, the open() method opens a specific resource in a new browser window or tab.
For example, let’s define the following page:
<head>
<title>Test</title>
</head>
<body>
<button onclick="openWindow()">Click</button>
<script>
function openWindow() {
window.open("https://site.com");
}
</script>
</body>
Here, a button is defined on the web page – the button element. The button has the onclick attribute set, which points to a JavaScript function that will be executed when the button is clicked.
The open() method takes a number of parameters:
- open(url) – resource path
- open(url, _self) – the page opens in the current tab
- open(url, _blank) – page opens in a new tab or window
- open(“url”, “_blank”, “popup=yes”) – popup: specifies whether the page will open in a separate popup window. This can take values such as yes, 1 or true
- open(“url”, “_blank”, “width=600,height=400”) – width / innerWidth, height / innerHeight width and height of the window in pixels
- open(“url”, “_blank”, left=500,top=200″) – left / screenX, top / screenY coordinates relative to the origin of the x and y screen axis
That the function returns a link to the window, and with the help of this link we can control the window.
The close() method closes the window. For example, let’s open a new window and close it after 5 seconds:
function openWindow() {
const popup = window.open("url", "_blank", "width=600,height=400");
setTimeout(() => popup.close(), 5000);
}
The moveTo() method allows you to move the window to a new position:
const popup = window.open("url", "_blank", "width=600,height=400");
popup.moveTo(500, 400);
In this case, the window is moved to the position with coordinates x=500, y=400 relative to the upper left corner of the screen.
Read also: