Working with the window object properties
the frames property in the window object returns all the frames in the current window
<!DOCTYPE HTML>
<BODY>
<IFRAME src="http://microsoft.com"></IFRAME>
<IFRAME src="http://google.com"></IFRAME>
<IFRAME src="http://dreamtechpress.com"></IFRAME>
<SCRIPT type="text/javascript">
for (var i=0; i<frames.length; i++)
{
frames[i].location="http://dreamtechpress.com"
}
</SCRIPT>
</BODY>
</HTML>
the frames property in the window object returns all the frames in the current window
<!DOCTYPE HTML>
<BODY>
<IFRAME src="http://microsoft.com"></IFRAME>
<IFRAME src="http://google.com"></IFRAME>
<IFRAME src="http://dreamtechpress.com"></IFRAME>
<SCRIPT type="text/javascript">
for (var i=0; i<frames.length; i++)
{
frames[i].location="http://dreamtechpress.com"
}
</SCRIPT>
</BODY>
</HTML>
the iframe tags create three frames in a web page.
the src attribute in the iframe tag defines the name of th web page you want to display inside the frame.
the frame[i].location proparty sets the location as http://dreamtechpress.com
Working with the window object methods
perform various tasks, such as to open a URL in a new window or to close a window.
you can use alert() method to display an alert box with a specified message and the OK button.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Window Object Methods</TITLE>
<SCRIPT type="text/javascript">
var myWindow;
function openCenteredWindow(url) {
var width = 400;
var height = 300;
var windowFeatures = "width=" + width + ",height=" + height +",status,resizable";
myWindow = window.open(url, "subWind", windowFeatures);
}
function show_alert()
{
alert("Hi!!! I am alert box");
}
function resizeWindow(){
window.resizeBy(-100,-100)
}
function closeWindow(){
if (window.confirm("Do you want to close the browser?"))
window.close();
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Open a New Window" onclick="openCenteredWindow('WindowsMethods.html')" />
<INPUT type="button" value="Alert" onclick="show_alert()" />
<INPUT type="button" onclick="resizeWindow()" value="Resize window">
<INPUT type="button" onclick="closeWindow()" value="Close the window">
</BODY>
</HTML>
Working with the navigator object properties
the navigator object helps to reetrive properties of th client browser.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Detecting Browser Capabilities</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function displayNavigatorProperties() {
with(document) {
write("<B>appName: </B>")
writeln(navigator.appName+"<BR>")
write("<B>appVersion: </B>")
writeln(navigator.appVersion+"<BR>")
write("<B>appCodeName: </B>")
writeln(navigator.appCodeName+"<BR>")
write("<B>platform: </B>")
writeln(navigator.platform+"<BR>")
write("<B>userAgent: </B>")
writeln(navigator.userAgent+"<BR>")
}
}
function displayExplorerProperties() {
with(document) {
write("<B>appName: </B>")
writeln(navigator.appName+"<BR>")
write("<B>appVersion: </B>")
writeln(navigator.appVersion+"<BR>")
write("<B>appCodeName: </B>")
writeln(navigator.appCodeName+"<BR>")
write("<B>platform: </B>")
writeln(navigator.platform+"<BR>")
write("<B>userAgent: </B>")
writeln(navigator.userAgent+"<BR>")
write("<B>cookieEnabled: </B>")
writeln(navigator.cookieEnabled+"<BR>")
}
}
function displayBrowserProperties() {
if(navigator.appName=="Netscape")
displayNavigatorProperties()
else
if(navigator.appName=="Microsoft Internet Explorer")
displayExplorerProperties()
}
displayBrowserProperties()
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
working with the navigator object methods
the mthods in the navigator object specify the action related to the browser.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Navigator Methods Demo</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("Java enabled: " + navigator.javaEnabled()+"<BR/>");
document.write("Data tainting enabled: " + navigator.taintEnabled());
</SCRIPT>
</BODY>
</HTML>
Working with history object
the length property of the history object specifies th number of URL's viewed by you in the browser.
<!DOCTYPE HTML>
<HEAD>
<TITLE>
History Object Properties
</TITLE>
<SCRIPT language="javascript">
function showCount()
{
var histCount = history.length;
alert("You have visited " + histCount + " Web pages so far.");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" name="activity"
value="My Activity" onClick="showCount()">
</FORM>
</BODY>
</HTML>
history methods
<!DOCTYPE HTML>
<HEAD>
<TITLE>History Object Methods</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
function funback()
{
window.history.back()
}
function funfor()
{
window.history.forward()
}
function fungo()
{
window.history.go(1)
}
</SCRIPT>
<INPUT id="btnGo" type="button" value="Go to next link" onclick="fungo();" />
<INPUT id="btnForward" type="button" value="Forward" onclick="funfor();" />
<INPUT id="btnBack" type="button" value="Back" onclick="funback();" />
</BODY>
</HTML>
working with the screen object
the screen object represents the current display screen in your browser.
<!DOCTYPE HTML>
<BODY>
<SCRIPT language="javascript">
document.writeln("Total Height: " + screen.height+ "<BR />");
document.writeln("Total Width: " + screen.width+ "<BR />");
document.writeln("Available Width: " + screen.availWidth + "<BR />");
document.writeln("Available Height: " + screen.availHeight + "<BR />");
document.writeln("Screen Color Depth: " + screen.colorDepth + "<BR />");
document.writeln("Screen Pixel Depth: " + screen.pixelDepth + "<BR />");
</SCRIPT>
</BODY>
</HTML>
Working with the location object
the location object helps in storing the information of current URL of the window object.
It provides various properties to perform modification with the current URL of a window.
for instance, the href property is used to change the current URL.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Location Object Example</TITLE>
<SCRIPT language="JavaScript">
<!--
function gotoPage() {
window.location.href = window.document.loc.ProtocolField.
options[window.document.loc.ProtocolField.selectedIndex].text
+ document.loc.HostnameField.value + document.loc.PathnameField.value
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<p><H1> Enter a URL in the given sections</H1></P>
<FORM name="loc" method="POST">
<PRE>Protocol:
<SELECT name="ProtocolField" size=1>
<OPTION>http://</option>
<OPTION>file://</option>
<OPTION>javascript:</option>
<OPTION>ftp://</option>
<OPTION>mailto:</option>
</SELECT>
</PRE>
<PRE>
Hostname:
<INPUT type=text size=23 maxlength=256 name="HostnameField"
value="www.dreamtechpress.com">
</PRE>
<PRE>
Pathname:
<INPUT type=text size=20 maxlength=100 name="PathnameField" value="/">
</PRE>
<PRE>
<INPUT type=button name="Go" value="Go" onClick="gotoPage()">
</PRE>
</FORM>
</BODY>
</HTML>
the location object also provides methods to load or modify the URL in your browser.
assign() method loads a new URL in the browser and the replace() method replaces a URL with the new URL.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Location Object Methods</TITLE>
<SCRIPT type="text/javascript">
function forassign()
{
window.location.assign("http://www.dreamtechpress.com")
}
function forreplace()
{
window.location.replace("http://www.google.com")
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Dreamtech Press URL" onclick="forassign()" />
<INPUT type="button" value="Google URL" onclick="forreplace()" />
</BODY>
</HTML>
No comments:
Post a Comment