With JavaScript, you can access almost everything on the HTML document. The DOM (Document Object Model) is our road map showing us how JavaScript can access individual HTML elements by turning each tag into its own programmatic object. Objects have properties that describe them.
Basically what the DOM says is we have a browser window, and within the browser window we have our HTML document. On the HTLM document we have our HTML elements, like images, forms, links etc. First let's look at the browser window as a window object. The window has properties and methods. Some of the properties of the window browser are also objects, like history, location, navigator, screen, and document objects. Other properties are status, closed, opener, parent.
The window also have several methods, we have already seen the dialog boxes of the alert(), confirm() and prompt(). In all the examples we have seen, like the alert() have been coded like alert("I am here") when actually it could have been coded window.alert("I am here"). The window is a global object, which means the browser window and HTML documents can see it. So, we don't have to refer to it by it's name, so you could say window is the default.
Properties: The window has several properties. If you look at a browser window, like IE or NN, at the lower left corner, you will usually see the status bar. If you mouse over a link, the URL shows up there, or if a Java applet is running you can see messages while it is loading. The status bar is a property of the window, so we can actually change what is displayed there!
<script language="JavaScript"> window.defaultStatus = "I am here"; </script>
The window object also has a status property that can change the status bar. Like when you roll the mouse over a link, instead of displaying the URL, you can display a message. When your mouse leaves the link, the default message still remains. Look at the example below, there are three links. Each link goes to the same web page, however when you mouse over the link, watch what happens to the status bar.
<a href="http://www.techinmotion.com">www.techinmotion.com</a> <a href="www.techinmotion.com" onmouseover="window.status='status';return true;">status</a> <a href="www.techinmotion.com" onmouseover="window.defaultStatus='defaultStatus';return true;">www.techinmotion.com</a>click here to see the demo.
Not only can you change the status when someone mouses over a link but also you can put information there, like todays date or a message
var today=new Date(); window.status=todayclick here to see the demo.
As you visit web pages, your browser stores the URLs. This list of URLs are called the history stack. You can click your browser back or forward button to navigate through previously visited pages. To find out how many pages are in the browser stack, use the history object length property. Methods of the history object allow you to access this list of recently visited pages. The methods are history.back(), history.forward() and history.go().
You can use the location.href property to navigate to another web page. This new page would be added to your history stack. However if you did not want the current page in your browser stack, you can use location.replace() method. This would replace the current URL in the stack with the new page.
window.location.href="http://www.yahoo.com";click here to see the demo.
The navigator object gives you information about the browser itself. The most common use of the navigator object is used to determine the type and version of the browser (browser niffers) so you can write specific JavaScript to handle the differences between the browsers.
The navigator object can tell you:
document.writeln("display contents in the navigator object:")
for (prop in navigator)
document.writeln(prop + ": " + navigator[prop]);
click here to see the demo.
if ((navigator.appName=="Microsoft Internet Explorer") || (navigator.appName=="Netscape"))
{
if (navigator.appName=="Microsoft Internet Explorer")
window.location = "browser_ie.htm";
else
window.location = "browser_ns.htm";
}
else
window.location = "browser_other.htm";
The screen object has three properties that are common between both IE and NN - height, width, and
colorDepth. The height and width can be used to find the height and width of the monitor. A
monitor set at 800x600 would return 800 for [window.]screen.width and 600 for [window.]screen.height.
This can come in handy if you want to build a page where the viewer doesn't have to scroll left or
right to see the content.
<script language="JavaScript">
document.write(" screen width= " + screen.width + " screen height= " + screen.height);
</script>
Another property is the colorDepth. This can come in handy if you have images specifically designed
for 8, 16, or 32 bit color resolution.
<script language="JavaScript">
document.write(" screen colorDepth= " + screen.colorDepth );
</script>
click here to see the demo.click here to see demo 1.
click here to see demo 1.
click here to see demo 2.
var w=screen.width;
var h=screen.height;
var win=window.open("add.htm","add","width=110,height=110,left=" + w/2 + ",top=" + h/2);
win.moveTo(w/2+50,h/2+50);
click here to see the demo.