The Window object represents the window in the browser. The window object is automatically created from the browser. All browsers support the Window object. Global variables are the properties of the Window objects, and global functions are the methods of the Window object. The window object methods are used to retrieve the information from the browser window.
Window object Methods
1. alert()
The alert() method displays the alert box in the window with the OK button. This method is used when you want the information to come through the user.
Ex:
alert("Hello...Most welcome");2. blur()
The blur() method removes the focus on the window.
Ex:
const myWind = window.open("", "", "width=250, height=200");
myWind.blur();3. focus()
The focus() method focuses on the window.
Ex:
const myWindow = window.open("", "", "width=250, height=200");
myWindow.focus();4. setInterval()
This method calls on a function with a specific interval.
setInterval(function, milliseconds, param1,.....)
Ex:
setInterval(displayHi, 1000);
function displayHi() {
document.getElementById("demo").innerHTML += "Hello world";
}
The code will return that displayHi() function within 1 second.
5. clearInterval()
The clearInterval() method that clears the time set by the setInterval() method.
clearInterval(functon_name);
Ex:
const mynewInterval = setInterval(mynewTimer, 1000);
function mynewTimer() {
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function mynewStopFunction() {
clearInterval(mynewInterval);
}
The mynewStopFunction() stops the serInterval() method.
6. setTimeout()
The setTimeout() method calls a function after a number of milliseconds. This method calls the function only once.
setTimeout(function, milliseconds, param1, ...)
Ex:
const mynewTimeout = setTimeout(mynewGreeting, 5000);
function mynewGreeting() {
document.getElementById("demo").innerHTML = "Happy Birthday!"
}
This mynewGreeting() method returns Happy Birthday after 5 seconds.
7. clearTimeout()
The clearTimeout() method that clears the time set by the setTimeout() method.
clearTimeout(function_name);
Ex:
const mynewTimeout = setTimeout(mynewGreeting, 3000);
function mynewGreeting() {
document.getElementById("demo").innerHTML = "Happy Birthday to You !!"
}
function mynewStopFunction() {
clearTimeout(mynewTimeout);
}
We have to clear the timer within the setTimeout() method.
8. close()
The close() method closes the window
window.close()
Ex:
function closenewWin() {
mynewWindow.close();
}9. open()
The open() method opens the browser window.
window.open()
Ex:
function mynewFunction() {
window.open("https://www.cybrosys.com");
}10. atob()
Decodes a base 64 encoded string.
window.atob(encoded);
Ex:
let text = "Hello";
let encoded = window.btoa(text);
let decoded = window.atob(encoded);
11. btoa()
Encodes a string in base 64.
window.btoa(text);
Ex:
let text = "Hello HI!";
let encoded = window.btoa(text);
12. confirm()
The confirm method displays a dialog box with a message, Ok button, and Cancel button.
confirm("Click Me!");Ex:
function mynewFunction() {
confirm("Press a button!");
}13. getComputedStyle()
This method gets the computed CSS properties and values of an HTML element. This method returns a CSSStyleDeclaration object.
window.getComputedStyle(element, pseudoElement)
Ex:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);14. getSelection()
Returns the Selection object representing the range of text selected by the user
15. matchMedia()
The matchMedia() method returns the MediaQueryList and it results in the query.
window.matchMedia(mediaQuery)
The media queries can be any of the media features of the CSS
Ex:
let text;
If(window.matchMedia("(max-width: 700px)").matches) {
text = "The screen";
} else {
text = "The screen wide.";
}
16. moveBy()
This method moves a window to a number of pixels relative to its current position.
window.moveBy(x, y)
Ex:
let mynewWindow;
function openWin() {
mynewWindow = window.open("", "", "width=400, height=400");
}
function moveWin() {
mynewWindow.moveBy(250, 250);
}
17. moveTo()
This method moves a window to the specified position.
window.moveTo(x, y)
Ex:
let mynewWindow;
function openWin() {
mynewWindow=window.open("", "", "width=400, height=200");
}
function moveWin() {
mynewWindow.moveTo(500, 100);
}
We can access the document object using the objects. The properties of window objects are used to retrieve the information about the window that is currently opened, whereas its methods perform specific tasks like opening, minimizing the window, etc.