Window Object

• Window object represents the browser’s window or potentially frame, that

a document is displayed in.
• As long as a browser window is open, even if no document is loaded in the
window, the window object is defined in the current model in memory.
• All global JavaScript variables, functions and objects automatically
become members of the window object.

window

document
 Dialog boxes
It is used to provide some information to users.
Type of Dialog box:-
• Alert
• Confirm
• Prompt
 alert ( ) Method
This Window object’s method is used to display data in alert dialog box. alert
really should be used only when you truly want to stop everything and let the
user know something.
Syntax:- window.alert( ) or alert ( )
Ex: - window.alert(“Hello World”);
window.alert(variable);
window.alert(4+2);
window.alert(“Hello World” + variable);
 confirm ( ) Method
This Window object’s method is used to display a message for a user to
respond to by pressing either an OK button to agree with the message to a
Cancel button to disagree with the message. It returns true on OK and false on
Cancel.
Syntax:- window.confirm( ) or confirm ( )
Ex: - window.confirm(“Are you sure ?”);
if(confirm(“Do you want to Delete ?”)) {
document.write(“Data deleted”);
} else {
document.write(“Action Cancelled”);
}
 prompt ( ) Method
Window object’s method prompt() can be used to get input from the user,
named prompt. The prompt( ) method displays a dialog box that prompts the
visitor for input.
Once the prompt function obtains input from the user, it returns that input. If
the user press the cancel button in the dialog or close box, a value null will be
returned.
Syntax: - prompt(text, defaultText)
Ex:- prompt(“Enter Your Name: “, “name”);
prompt(“Enter Your Roll No. : “);
 open ( ) Method
The open( ) method creates a new secondary browser window, similar to choosing New Window
from the File menu. It returns a Window object representing to the newly created window. If the
window couldn't be opened, the returned value is instead null.
Syntax: - window.open (URL, name, features, replace)
URL – URL indicates the document to load into the window. If no URL is specified, a new
window with about:blank is opened
Name – Specifies the target attribute or the name of the window. The following values are
supported:
_blank - URL is loaded into a new window. This is default
_parent - URL is loaded into the parent frame
_self - URL replaces the current page
_top - URL replaces any framesets that may be loaded
 open ( ) Method
Syntax: - window.open (URL, name, features, replace)
Features – It is a comma delimited string that lists the features of the window.
Replace – It indicates whether or not the URL specified should replace the window’s contents.
This would apply to a window that was already created. Value can be true/false.

Ex: -
var newWindow = window.open(“http://www.geekyshows.com” , “_self” , “height=100,
width=100”)

var newWindow = window.open("", "", "height=100, width=100");

newWindow.document.write(“Hello hai ji”);
 Features
Feature Parameter Value Example
alwaysLowered yes/no alwaysLowered=yes
alwaysRaised yes/no alwaysRaised=no
centerscreen yes/no centerscreen=yes
chrome yes/no chrome=yes/true
close yes/no close=no
dialog yes/no dialog=yes
dependent yes/no dependent=yes
z-lock yes/no z-lock=yes
hotkeys yes/no hotkeys=yes
 Features
Feature Parameter Value Example
location yes/no location=no
menubar yes/no menubar=no
minimizable yes/no minimizable=no
modal yes/no modal=yes
personalbar yes/no personalbar=yes/true
resizable yes/no resizable=no
scrollbars yes/no scrollbars=no
status yes/no status=no
titlebar yes/no titlebar=yes
 Features
Feature Parameter Value Example
toolbar yes/no toolbar=yes
top pixel value top=20
height pixel value height=200
width pixel value width=200
innerHeight pixel value innerHeight=200
innerWidth pixel value innerWidth=200
outerHeight pixel value outerHeight=200
outerWidth pixel value outerWidth=200
left pixel value left=20
https://developer.mozilla.org/en-US/docs/Web/API/Window/
open#Window_features
 close ( ) Method
Once a window is open, the close ( ) method is used to close it. It closes the current window or the
window on which it was called. This method is only allowed to be called for windows that were
opened by a script using the window.open() method. It is often used together with open ( ) method.
Syntax: - window.close ( )
Ex: -
var newWindow;
function openWindow() {
newWindow = window.open(“http://www.geekyshows.com” , “_blank” , “height=400,
width=600”)
}
function closeOpenedWindow() {
newWindow.close();
}
• print ( ) – It will show print dialog to print the current document.
Syntax:- window.print( )
 Moving Windows
moveBy ( ) – This method moves the current window by a specified amount of pixels.
Syntax:- window.moveBy(horizontalPixels, verticalPixels);
Where,
window – It is the name of the window to move or is called just window if it is the
main window.
horizontalPixels – It is the number of horizontal pixels to move the window where
positive numbers move the window to the right and negative numbers to the left.
verticalPixels – It is the number of vertical pixels to move the window where positive
number move the window down and negative number up.
Ex:- newWindow.moveBy(200, 200);
 Moving Windows
moveTo ( ) – This method moves the window to the specified coordinates.
Syntax:- window.moveTo(x, y);
Where,
window – It is the name of the window to move or is called just window if it is the
main window.
x – It is the screen co-ordinate on the x-axis to move the window to.
y – It is the screen co-ordinate on the y-axis to move the window to.
Ex:- newWindow.moveTo(200, 200);
 Resizing Windows
resizeBy ( ) – This method is used to resize the current window by a certain amount,
relative to its current size.
Syntax:- window.resizeBy(width, height);
Where,
window – It is the name of the window to move or is called just window if it is the
main window.
width – It is the number of width pixels, where positive numbers increase the window
and negative numbers decrease.
height – It is the number of height pixels, where positive numbers increase the window
and negative numbers decrease.
Ex:- newWindow.resizeBy(200, 200);
 Resizing Windows
resizeTo ( ) – This method is used to resize a window to the specified width and height.
Syntax:- window.resizeTo(width, height);
Where,
window – It is the name of the window to move or is called just window if it is the
main window.
width – It is an integer representing the new outerWidth in pixels (including scroll bars,
title bars, etc).
height – It is an integer value representing the new outerHeight in pixels (including
scroll bars, title bars, etc).
Ex:- newWindow.resizeTo(200, 200);
 Scrolling Windows
scrollBy ( ) – This method scrolls the document in the window by the given amount.
Syntax:- window.scrollBy(x, y); or window.scrollBy(options);
Where,
window – It is the name of the window to scroll or is called just window if it is the main window.
x – How many pixels to scroll by, along the x-axis (horizontal). Positive values will scroll to the right, while
negative values will scroll to the left
y – How many pixels to scroll by, along the y-axis (vertical). Positive values will scroll down, while negative
values scroll up
Options – It is an object with three possible properties:
top, which is the same as the y-coord
left, which is the same as the x-coord
behavior, which is a string containing one of smooth, instant, or auto; default is auto
Ex:- window.scrollBy(0, -20);
window.scrollBy({ top: -20, behavior: 'smooth' });
Note - For this method to work, the visible property of the window's scrollbar must be set to true!
 Scrolling Windows
scrollTo ( ) – This method scrolls to a particular set of coordinates in the document.
Syntax:- window.scrollTo(x, y); or window.scrollTo(options);
Where,
window – It is the name of the window to scroll or is called just window if it is the main window.
x – It is the pixel along the horizontal axis of the document that you want displayed in the upper left.
y – It is the pixel along the vertical axis of the document that you want displayed in the upper left.
options is an object with three possible properties:
top, which is the same as the y-coord
left, which is the same as the x-coord
behavior, which is a string containing either smooth, instant, or auto; default is auto
Ex:- window.scrollTo(0, 400);
window.scrollTo({top:400, behaviour: ‘smooth’});