Built-In Classes

The Window

 

Introduction

When the user opens a web page, the object that displays it is called a browser. Internally, the browser is primarily a window application. To access this window, JavaScript provides a class called window.

To create a new window object, which corresponds to opening a new instance of the browser, you can call the window.open() method. Its syntax is:

NewWindow = window.open([WebPage], [WndName], [Options], [Replace])

This method can take up to four arguments, none of them is required. Based on this, you can call this method as follows:

<input type="button" name="btnNewWindow" value="Create New Window" onClick="window.open();">

When this method is called without an argument, it creates an empty window that can be a copy of the window that created it: 

If you want to open a new window with a web page you created already or with the contents of an existing web page on the Internet or your intranet, pass the address of that page as argument to the method. Here is an example:

If you plan to refer to the newly created window in another section of your code, you should give it a name when creating it. To do this, pass a second argument as string. Here is an example:

<input
    type="button"
    name="btnNewWindow"
    value="Open FunctionX JavaScript in a New Window"
    onClick="window.open('http://www.functionx.com/javascript', 'wndNew');"
>

Instead of a formal name, you can specify some options about the existing window (that creates the new window) and the new window. For example, if you want the new window to be empty, you can pass the second argument as _blank:

<input
    type="button"
    name="btnNewWindow"
    value="Open FunctionX JavaScript in a New Window"
    onClick="window.open('http://www.functionx.com/javascript', '_blank');"
>

If you only want to replace the contents of the current window with the content of the first argument, you can pass the second argument as _self:

<input
    type="button"
    name="btnNewWindow"
    value="Open FunctionX JavaScript in a New Window"
    onClick="window.open('http://www.functionx.com/javascript', '_self');"
>

The third of this method allows you to set some options on the new window. 

Properties of a Window

The properties of a window are set in the third argument of the open() method. Each property has a specify name. To set more than one property, separate them with a comma. 

By default, when you create a new window, it displays normally with a menu, a toolbar, and the rest. Such a window may use the maximum area of the window. Otherwise, when creating it, you can specify the dimensions you want the new window to have. The distance from the left to the right borders of the browser is represented by the width property. To control this aspect, set the desired value, as a natural number to the width property. 

The distance from the top to the bottom borders of the window is represented by the height property. To control it, set the desired value to this property.

Here is an example:

<input
    type="button"
    name="btnNewWindow"
    value="Open FunctionX in a New Window"
    onClick="window.open('http://www.functionx.com/excel',
			 'wndNew',
			 'width=420, height=320');"
>

When a non-maximized window displays, it uses a Windows location. The distance from the top border of the screen to the top border of the browser is represented by the top property. The distance from the left border of the screen to the left border of the browser is represented by the left property.

After creating a new window whose dimensions you have set, you may want to specify whether the user can change the size or not. This aspect is controlled using the resizable property. If you want to keep the dimensions fixed, set this property to no or 0 from its yes default value. 

If you want, you can display it in full mode, which occupies the whole or most of the monitor area. To display the new window in full screen, set its fullscreen property to yes. 

The top section of a browser displays its main menu. The menu of a window is represented by the menubar property of the window class. To display the main menu on a new window, set this property to yes, which is its default value. If you want to hide the main menu, set this property to yes or 1. Here is an example:

<input
    type="button"
    name="btnNewWindow"
    value="Open FunctionX in a New Window"
    onClick="window.open('http://www.functionx.com/',
			 'wndNew',
			 'menubar=no');"
>

Under the main menu, a browser displays a toolbar. The toolbar is represented by the toolbar property. By default, this property's value is set to yes. If you want to hide the toolbar on your new window, set this property to no or 0. Here is an example:

<input
    type="button"
    name="btnNewWindow"
    value="Open FunctionX in a New Window"
    onClick="window.open('http://www.functionx.com/',
			 'wndNew',
			 'menubar=yes, toolbar=no');"
>

When a browser displays, if its content is longer and/or wider than the window can display, it would be equipped with one or two scroll bars. The scroll bars allow the user to scroll up and down, left and right to view the hidden sections of a page. The ability scroll or not is controlled by the scrollbars property. If you don't want the user to scroll, set this property to no from its yes default property. Here is an example:

<input
    type="button"
    name="btnNewWindow"
    value="Open FunctionX in a New Window"
    onClick="window.open('http://www.functionx.com/access',
			 'wndNew',
			 'width=420, height=320, scrollbars=yes');"
>

In its lower section, by default, a browser displays a status bar. The presence or absence of the status bar can be controlled using the status property. By default, this property is set to yes. If you want to hide the status bar on a new window you are creating, set its status property to no.

 

Methods of a Window

To support the creation of a new window, we saw that you can call the open() method of the window class. After using a window, a user can close it. To programmatically close a window, you can call the close() method.

 

The Document Class

 

Introduction

The main area of the browser is called a document. It may be blank if you created or decided to display it as an empty window: It may also be filled with the contents of its URL: The area that displays the content of web page is represented by the document class.

 

The Document Properties

In its title bar, the browser displays the title of the document. The title of the document is primarily created in the head section of the page. To get the title of a document, access its title property. Here is an example:

<html>

<head>
<script language="JavaScript">
function whatIsTheTitle()
{
    document.write(document.title);
}
</script>
<title>JavaScript Lessons</title>

</head>

<body>

<input type="button" value="Show Title" onClick="whatIsTheTitle()">

</body>

</html>

In previous lessons, we created forms to explore those lessons. Whenever you create a form in a web page, that form becomes a property of the document object. To access that form, simply use the period operator applied to the document class.

In the body of the document, everything may have been created by the initiator of the page. This includes all the colors used by the various sections of the document. Still, if you want, you can change the background color of a page using the bgColor property of the document class. To set this color, you can assign the name or the hexadecimal format of the color. Here is an example that changes the background color of the page to pink (fuchsia):

<html>

<head>
<script language="JavaScript">
function whatIsTheTitle()
{
    document.write(document.title);
    document.bgColor = "#FF00FF";
}
</script>
<title>JavaScript Lessons</title>

</head>

<body>

<input type="button" value="Show Title" onClick="whatIsTheTitle()">

</body>

</html>

To control the general font color of the text in the page, use the fgColor property by assigning it either the name or the hexadecimal format of the desired color.