Javascript

Window object:
At the very top of the document object hierarchy is the window object. It is the
master container for all content we view in the Web browser. 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. The window object is supported
by all browsers. It represent the browsers window. All global JavaScript objects,
functions, and variables automatically become members of the window object.
Global variables are properties of the window object. Global functions are
methods of the window object. Even the document object (of the HTML DOM) is
a property of the window object. In addition to the content part of the window
where documents go, a window’s sphere of influence includes the dimensions of
the window and all of the “stuff” that surrounds the content area. The area where
scrollbars, toolbars, the status bar, and menu bar live is known as a window’s
chrome.
window.document.getElementById("header");
is the same as:
document.getElementById("header");
.

Accessing window properties and methods:
window.propertyName
window.methodName([parameters])
Creating a window
The method that generates a new window is window.open(). This method contains
up to three parameters that define window characteristics, such as the URL of the
document to load, its name for TARGET attribute reference purposes in HTML
tags,and physical appearance (size and chrome contingent).
Example:
Var subWindow = window.open(“define.html”, ”def”
,”HEIGHT=200,WIDTH=300”)
To close the subwindow from a script in the main window, use this reference to
the close() method for that subwindow:
subWindow.close()
Example

Window Properties and Methods:
 window.status property
The status bar at the bottom of the browser window normally displays the URL of
a link when you roll the mouse pointer a top it. Other messages also appear in that
space during document loading, Java applet initialization, and the like. However,
we can use JavaScript to display our own messages in the status bar at times that
may be beneficial to our users. For example, rather than display the URL of a link,
we can display a friendlier, plain-language description of the page at the other end
of the link (or a combination of both). We can assign the window.status property
some other text at any time. To change the status bar text of a link as the cursor
hovers atop the link, we trigger the action with an onMouseOver event handler of
a link object.
<A HREF=”http://google.com” onMouseOver=
“window.status=’Visit the google Home page (google.com)’; return true”>
Netscape</A>

window.alert() method:
This window method generates a dialog box that displays whatever text we pass as a
Parameter . A single OK button (whose label wecannot change)enables the user to
dismiss the alert.
Example:
alert(“This is a JavaScript alert dialog.”)
window.confirm() method
The second style of dialog box presents two buttons (Cancel and OK in most ver-
sions on most platforms) and is called a confirm dialog box . More importantly, this
is one of those methods that returns a value: true if the user clicks OK, false if the
user clicks Cancel. We can use this dialog box and its returned value as a way to
have a user make a decision about how a script progresses.
Example:
if (confirm(“Are you sure you want to start over?”)) {
location.href = “index.html”
}

window.prompt() method
The final dialog box of the window object, the prompt dialog box ,displays a
message that we set and provides a text field for the user to enter a response. Two
buttons, Cancel and OK, enable the user to dismiss the dialog box with two
opposite expectations: canceling the entire operation or accepting the input typed
into the dialog box.
Example:
var answer = prompt(“What is your name?”,””)
if (answer) {
alert(“Hello, “ + answer + “!”)
}
 Window size properties
Three different properties can be used to determine the size of the browser
window (the browser viewport, NOT including toolbars and scrollbars).
For Internet Explorer, Chrome, Firefox, Opera, and Safari:
window.innerHeight - the inner height of the browser window
window.innerWidth - the inner width of the browser window

For Internet Explorer 8, 7, 6, 5:
document.documentElement.clientHeight
document.documentElement.clientWidth
or
document.body.clientHeight
document.body.clientWidth
Example:
var
w=window.innerWidth||document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight||
document.documentElement.clientHeight||
document.body.clientHeight;

Other browser methods:
window.moveTo() -move the current window
window.resizeTo() -resize the current window
onLoad event handler
The window object reacts to several system and user events, but the one we will
probably use most often is the event that fires as soon as everything in a page fin-
ishes loading. This event waits for images, Java applets, and data files for plug-ins
to download fully to the browser. All window event handlers are placed inside the
<BODY> tag. Even though we will come to associate the <BODY> tag’s
attributes with the document object’s properties, it is the window object’s event
handlers that go inside the tag.
The Location Object
This object represents the URL loaded into the window. This differs from the
document object because the document is the real content; the location is simply
the URL.
Setting the location.href property is the primary way our scripts navigate to
other pages:
location.href = “http://www.ibm.com”

The History Object
Another object that doesn’t have a physical presence on the page is the history
object. Each window maintains a list of recent pages that the browser has
visited.While the history object’s list contains the URLs of recently visited
pages, those URLs are not generally accessible by script due to privacy and
security limits imposed by browsers. But methods of the history object allow
for navigating backward and forward through the history relative to the
currently loaded page.
The Document Object
The document object holds the real content of the page. Proper ties and
methods of the document object generally affect the look and content of the
document that occupies the window.

[window.]document.propertyName
[window.]document.methodName([parameters])
The window reference is optional when the script is accessing the document
object that contains the script.

Document Object:
The Document object provides access to page elements such as anchors, form
fields, and links, as well as page properties such as background and text color.
The structure of this object varies considerably from browser to browser, and
from version to version. Each HTML document loaded into a browser window
becomes a Document object. The Document object provides access to all HTML
elements in a page, from within a script.
Click here to view example

Accessing Document Elements by Position:
For example, if we have a document like below:
<html >
<head>
<title>Simple Form</title>
</head>
<body>
<form action="#“ >
<input type="text" />
</form>
<br /><br />
<form action="#“ >
<br />
</form>
</body>
</html>

•we can access the first <form>tag using
window.document.forms[0]
•To access the second <form>tag we would use
window.document.forms[1]
The forms[] collection also contains an elements[] collection. This contains the
various form fields like text fields, buttons, pull-downs, and so on. Following the
basic containment concept to reach the first form element in the first form of the
document, we would use window.document.forms[0].elements[0].
Accessing Document Elements by Name:
The basic way to attach a unique identifier to an (X)HTML element is by using the
id attribute. The id attribute is associated with nearly every (X)HTML
element.
For example, to name a particular enclosed embolded piece of text :
<b id=“textbold“>This is very important.</b>

Example:
<form name="myForm" id="myForm“ >
<input type="text" name="userName" id="userName" />
</form>
And then to access the form from JavaScript, we would use either
window.document.myForm
or simply
document.myForm
Or
document.getElementById(“myForm”)
Accessing Objects Using Associate Arrays:
Example:
<form name="myForm2" id="myForm2" method="get" action="#">
<input name="user" type="text" value="" />
</form>
We can access the form as document.forms["myForm2"] or even use the
elements[] array of the Form object to access the field as
document.forms["myForm2"].elements["user"].

Event Handlers:
The code is executed if and when the given event occurs at the part of the
document to which it is associated. Common events include Click, MouseOver,
and MouseOut, which occur when the user clicks, places the mouse over, or
moves the mouse away from a portion of the document, respectively. These events
are commonly associated with form buttons, form fields, images, and links, and
are used for tasks like form field validation and rollover buttons.
Example:
<form >
<input type="button" value="Click me" onclick="alert('That
tickles!');" />
</form>
Click here to view example

Javascript

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Javascript (20)

Recently uploaded (20)

Javascript