browser objects navigator, windows and frames. browser object model javascript programs are...

Browser Objects

Navigator, Windows and Frames

Browser Object ModelJavaScript programs are associated with a browser

window and the document displayed in the window.In browser object model, the window is at the top of

the tree and below it are window objects, navigator objects, array of window objects, document object (html document), history object, location object and screen object.

Below document object we have link objects[], anchor objects[], form objects[], image objects[], applet objects[], embedded objects[].

Below form objects[], we have elements[] for button, check box, password.

By combining the browser and document object models, JavaScript allows you to manipulate all of the elements in a page as objects.

Navigator Object

• Contains properties and methods that describe the browser.

• Properties: appCodeName, appName, appVersion, mimeTypes, platform, userAgent.

• Navigator’s properties allow you to detect information about the user’s browser so you can customize your Web page in a way that is transparent to the user.

Navigator Object – list of properties - Example 1<html>

<head><title>Navigator Object</title></head>

<body><script language="JavaScript">

document.write("<font size=+1><b>\The properties of the \"navigator\" object are:</b><br>");for(var property in navigator){

document.write(property + "<br>");}

</script></body>

</html>

Navigator Object – appName, appVersion, userAgent, platform - Example 2

<html>

<head><title>The Navigator Object</title></head>

<body><h3>About The Browser</h3><script language="JavaScript">

var BrowserName= navigator.appName;var BrowserVersion = navigator.appVersion;var BrowserAgent= navigator.userAgent;var platform= navigator.platform;document.write("<font size='2'>");document.write("<b>The Browser's name is:</b> " + BrowserName + "<br>");document.write("<b>The Browser version is:</b> " + BrowserVersion + "<br>");document.write("<b>The Browser's \"user agent\" is:</b> " + BrowserAgent + "<br>");document.write("<b>The Browser's platform is:</b> " + platform + "<br>");document.write("</font>");

</script></body>

</html>

Navigator Object: Plug-Ins

• Plug-Ins are special software programs that add the ability to listen to audio, watch video and movie clips etc…

• Examples: Flash player, Adobe Acrobat Reader.

• The plugins[] array of the navigator object contains a complete list of installed plug-ins. Each element of the array represents a plug-in object

List of plug-ins installed (Netscape) – example 4<html>

<head><title>Plugin Detection</title></head>

<body bgcolor="lightgreen"><font face="arial" size="+1"><h2>Installed Plugins (Netscape)</h2><script language="JavaScript">

for ( var i = 0;i < navigator.plugins.length; i++){document.write ("<br>"+navigator.plugins[i].name+"<br>");

if(navigator.plugins[i].description){document.write ("<font size='-1'>“ + navigator.plugins[i].description + "<font size='+1'<br>");

}}

</script></body>

</html>

Navigator Object - ActiveX• ActiveX is the Microsoft alternative for plug-

ins.

• ActiveX controls are used as a means to embed objects or components into a Web page.

• <object> tag takes a set of parameters that specify which data the control should use and define its appearance and behavior.

A Sample of ActiveX Control – example 5<html>

<head><title>ActiveX Example</title></head>

<body><object id="realaudio1" width=0 height=0classid="clsid:CFCDAA03-8BE4-11CF-B84B-020AFBBCCFA"><param name="_ExtentX" value="0"><param name="_ExtentY" value="0"><param name="AUTOSTART" value="0"><param name="NOLABELS" value="0"></object></body>

</html>

Navigator Object– mimeTypes• MIME is a standard format for sending mail

messages across the Internet.

• mimeType object are predefined JavaScript objects that allow you to access the mimeTypes[] array, a property of both the navigator object and the plugin object.

Mime detection (Netscape) – example 6<html>

<head><title>Mime Detection</title></head>

<body bgcolor="lightgreen"><font face="arial"><h2><u>Mime Types (Netscape)</u></h2><script language="JavaScript">

for ( var i=0; i < navigator.mimeTypes.length; i++){if(navigator.mimeTypes[i].enabledPlugin != null){document.write ("<br></em><font size='+2'>" + navigator.mimeTypes[i].type

+"<br>");document.write("<font size='+1'> Enabled Plugin Name: <em>“ +

navigator.mimeTypes[i].enabledPlugin.name + " <br>");document.write("</em>Description: " + "<em>" +

navigator.mimeTypes[i].description +"<br></em>Suffixes: " + "<em>" + navigator.mimeTypes[i].suffixes + "<br>");

}}</script></body>

</html>

Window Object

• Is where all the action happens in a browser.

• Each new page you bring up is a document within the current window.

• The window is often partitioned into independent display areas, called frames.

• Window object comes with a number of properties and methods. The name of the window object can be excluded when applying methods to it.

Window Object – open method – example 7FORMAT: var window_object = window.open(“url”, windowname, [options]);

<html>

<head><title>Opening a New Window</title><script language="JavaScript">

function newWindow(){var winObj=open(“fallscene.jpg", “fall");

}</script></head>

<body bgColor="lightblue"><h2>Fall Scene from the Old Country</h2><h3>Click here to see through my fall window<br><a href="javascript:newWindow()">Fall Scene</a></h3>

</body>

</html>

Windows Object – Open window with parameters and closing it – example 8

<html>

<head><title>Opening a New Window with Parameters and Closing It</title><script language="JavaScript">

function newWindow(){winObj=window.open("fallscene.jpg",

“fall","width=1150,height=350,resizable=yes,scrollbars=yes");winObj.focus();//windObj.blur();

}function closeWindow(){

winObj.close();}

</script></head>

<body bgColor="lightblue"><h2>Fall Scene from the Old Country</h2><h3>Click the link to see my fall window<br><a href="javascript:newWindow()">Fall Scene</a><p>When you are ready to close the window, click here<br><a href="javascript:closeWindow()">Close the

window</a></h3></body>

</html>

Window object – Moving and resizing a window – example 9

<html>

<head><title>Move a New Window</title><script language="JavaScript">

function directions(){winObj=window.open("myplace.html","myplace","width=200,height=30,resizable=no");winObj.moveTo(0, 0); // Move window to top lefthand cornerwinObj.focus();parent.window.moveTo(215, 0); // Move the parent windowparent.window.resizeTo(400,400); // Resize browser window

}function closeWindow(){

winObj.close();}

</script></head>

<body bgColor="lightblue"><h2>We've moved!</h2>For directions to our new place,<br> click the button<form >

<input type="button"value="Simple Directions"onClick="directions();">

<p>When you are ready to close the window, click here<br><a href="javascript:closeWindow()">Close the window</a></h3></body>

</html>

Windows objects - Timed Events – example 10<head><title>The setTimeout method</title><script language="JavaScript">

function changeStatusBar(){window.status = "See me now before I disappear!";timeout =setTimeout("window.status=''", 6000);// alert(timeout); This value differs in Netscape and IE

}</script>

<body><center><font face=arial size=3 color=blue>The timeout is set for 6 seconds.<br><img src="alarm.jpg" border=2><p>Watch the status bar<br><form>

<input type="button"value="click here"onClick="changeStatusBar();">

</form></center></body>

</html>

Windows objects - Timed Events – example 11<html>

<head><script language="JavaScript">

var today = new Date();var future = new Date("December 25, 2003");var diff = future.getTime() - today.getTime(); // Number of millisecondsvar days =Math.floor(diff / (1000 * 60 * 60 * 24 )); // Convert to daysvar str = "Only " + days + " shopping days left until Christmas!";function scroller(){

str = str.substring(1, str.length) + str.substring(0,1);document.title=str;window.status=str;setTimeout("scroller()", 300); // Set the timer

}</script></head>

<body onLoad = "scroller()"><b><font color=green size=4>Get Dizzy. Watch the title bar and the status bar!!<br><image src="christmasscene.bmp"></body>

</html>

Windows objects - Timed Events – example 12<html>

<head><title><Timeout></title><script language="JavaScript">

var today = new Date();var future = new Date("December 25, 2003");var diff = future.getTime() - today.getTime(); // Number of millisecondsvar days =Math.floor(diff / (1000 * 60 * 60 * 24 )); // Convert to daysvar str="Only " + days + " shopping days left until Christmas! ";function startup(){

setInterval("scroller()",500);}function scroller(){

str = str.substring(1, str.length) + str.substring(0,1);document.title=str;window.status=str;

}</script></head>

<body onLoad = "startup()" bgColor=red><b><font color=green size=4>Get Dizzy. Watch the title bar and the status bar!!<br><image src="christmasscene.bmp"></body>

</html>

Windows objects – scrollTo(H,V) – example 13<html>

<head><title>Scrolling through Autumn</title><script language="JavaScript">

winObj=window.open("fallscene.gif","mysscene", "width=350,height=292,resizable=no"); // Create new window with image.winObj.moveTo(0, 0);winObj.focus();var pixelpos=0;var ImgWidth=1096;var pixelstep = 2;var timeout;function startScroll(){

if(pixelpos < 0){ pixelpos = 0;} // If the image has scrolled past the end of the window, the position will be negative.

if (pixelpos <= (ImgWidth - 350)){ // Check that scrolling is still within the boundaries of the window.pixelpos += pixelstep;winObj.scrollTo(pixelpos,0); // Go to that position in the new windowtimeout=setTimeout("startScroll()",20);

}}function scrollAgain(){

clearTimeout(); // Stop timingpixelpos = 0; // Reset the horizontal pixel position to 0startScroll(); // Start scrolling again

}function stopHere(){clearTimeout(timeout);} // Stop the clock to stop scrollingfunction closeWindow(){winObj.close();}

</script></head>

Windows objects – scrollTo(H,V) – example 13• <body bgColor="lightgreen">• <font face="arial" size=4 >• <b><br><center>• A Window into an Autumn Day• <form>• <input type="button"• value="Start scrolling"• onClick="startScroll();">• <input type="button"• value="Stop scrolling"• onClick="stopHere();">• <input type="button"• value="Start over"• onClick="scrollAgain();">• </form>• <font size=-1>• <p>When you are ready to close the window, click here<br>• <a href="javascript:closeWindow()">Close the window</a></h3>• </body>• </html>

Frames

• Browser is a virtual window that can be divided up into frames within the main window, where each frame is used to display different information.

• Instead of using <body> tags, you use <frameset> tags.

• You need at least three files to create frames. The main file defines the frameset. The second file contains the HTML code for the one of the frames and the third file contains the HTML code for the other frame.

Frame Me! – Example 14

<html>

<head><title>Frame Me!</title></head>

<frameset cols="25%,75%">

<frame src="leftframe.html"><frame src="rightframe.html">

</frameset>

</html>

Frame Me! – Example 14leftframe.html:

<html>

<head><title>Left Frame</title></head>

<body bgColor="yellow"><h2>Just to show you that this is the left frame</h2></body>

</html>

rightframe.html

<html>

<head><title>Right Frame</title></head>

<body bgColor="lightgreen"><h2>Just to show you that this is the right frame.</h2></body>

</html>

Frame Me! – Example 15<html>


<frameset rows=“130,*,*” frameborder=“yes” border=“1”

framespacing=“0”><frame src=“topframe.html"><frame src=“main.html"><frame src=“bottomframe.html”>

</frameset>

</html>

Frame Me! – Example 15topframe.html:

<html>

<head><title>Top Frame</title></head>

<body bgColor=“lightblue"><h2>Just to show you that this is the top frame</h2></body>

</html>

middleframe.html:

<html>

<head><title>Middle Frame</title></head>

<body bgColor=“pink"><h2>Just to show you that this is the middle frame</h2></body>

</html>bottomframe.html:

<html>

<head><title>Bottom Frame</title></head>

<body bgColor=“gray"><h2>Just to show you that this is the bottom frame</h2></body>

</html>

The frame object

• HTML frames are represented as an array of frame objects. the frames[] array is a property of the window object and is referenced with the window’s parent property.

• Each element of the array represents a frame in the order in which it appears in the document. So, window.parent.frameset[0] would reference the first frame defined in a frameset. You could also refer to the frame with its name.

• As frames are just little windows, they share many of the same properties and methods of the windows object.

Creating Menus and Navigation Bars Example 16

<html>




<frameset cols="25%,75%"><frame src="leftmenu.html" name=lframe><frame src="rightcolor.html" name=rframe></frameset>

</html>


Left Menu file

<html>

<head><title>Left Frame</title> <script language="JavaScript">function setBgColor(color){parent.frames[1].document.bgColor=color; // or use the frame’s name: parent.rframe.document.bgColor}</script></head>

<body bgColor="white"><h3>Pick a color:<br><a href="javascript:setBgColor('red')">red</a><br><a href="javascript:setBgColor('yellow')">yellow</a><br><a href="javascript:setBgColor('green')">green</a><br><a href="javascript:setBgColor('blue')">blue</a></h3></body>

</html>


<html>

<head><title>Right Frame</title></head>

<body>

<h2>

This is the frame where colors are changing.<br>

In your javaScript function, this is frame[1].

</h2>

</body>

</html>

top property – example 18<html>

<head><title>Forcing the Frame</title><script language = "JavaScript">if (window != top) { // True if window is not the top window in the hierarchy

top.location.href = location.href; // Put this window on top}</script>

<body bgcolor="lightblue"><h1>The important page that we’re talking about<h2></body>

</html>

Collapsing Toolbars and Menu Bars Example 19

<html>

<head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<frameset cols="117,450" rows="*"> <frame src="toctoolbar.html" name="menu"> <frame src="tocmain.html" name="main"></frameset>

<noframes><body bgcolor="#FFFFFF"></body></noframes>

</html>

Collapsing Toolbars and Menu BarsMain file:

<html>

<head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1"></head>

<body bgcolor=yellow><h1>This is the main page</h1><body bgcolor="#FFFFFF"></body>

</html>

Collapsing Toolbars and Menu BarsMenu file:

<html>

<head><title>Toolbar</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="javascript">var myUrl; function openSite(url){ parent.main.location = url; myUrl=url } function collapse(){ if ( ! myUrl){ parent.location = "tocmain.html"; } else{ parent.location=myUrl; } }</script> </head>

<body bgcolor="#FFFFFF"><p><a href="javascript:openSite('tocmain.html')">Home</a><p><p><a href="javascript:openSite('http://ellieq.com');">Page 1</a></p><p><a href="javascript:openSite('http://prenticehall.com');">Page 2</a></p><p><a href="javascript:openSite('http://google.com');">Page 3</a></p><p><a href="javascript:collapse();">Hide Menu</a><p></body>

</html>

Location Object

• Property of the window object

• Used to access the URL of the document currently loaded in the window.

• The location object can be used to make sure the topmost window is the one currently loaded in the browser.

• Two methods of interest: replace() and reload().

Changing Location - Example 20File defining the frameset:

<html><title>Changing Location</title>

<head><title>Frames</title></head>

<frameset rows="130,*" frameborder="yes" border="8" framespacing="0"><frame src="location.html" scrolling="no"><frame src="emptyframe.html" ></frameset>

</html>

Empty Frame:

<html>

<head><title>Empty Frame</title></head>

<body></body>

</html>

Changing Location - Example 20Location File:

<html>

<head><title>Changing Location</title><script language="JavaScript"> function loadPage(urlAddress){ parent.frames[1].location.href = urlAddress; }</script></head>

<body bgcolor="F8C473"><font size="+1" face=arial,helvitica> Pick your book store and we'll take you there!

<form name="form1"> <input type="button" value="Amazon" onClick="loadPage('http://amazon.com');"> <input type="button" value="Border's" onClick="loadPage('http://borders.com');"> <input type="button" value="Prentice Hall" onClick="loadPage('http://prenhall.com');"></form></body>

</html>

The history object

• Property of the window object.

• Keeps track of the pages that the user has visited.

• It has a length property and three methods: go(), back() and forward().

history object - Example 21<html><title>Changing Location</title>

<head><title>Frames</title></head>

<frameset rows="130,*" frameborder="yes" border="8" framespacing="0"><frame src="newlocation.html" scrolling="no"><frame src="emptyframe.html" ></frameset>

</html>

Empty frame file:

<html>

<head><title>Empty Frame</title></head>

<body></body>

</html>

history object - Example 21<html>

<head><title>The History Object</title><script language="JavaScript">

function loadPage(urlAddress){parent.frames[1].location.href = urlAddress;

}</script></head>

<body><font size="+1" face=ariel,helvitica>

<form name="form1"><input type="button"

value="Amazon"onClick="loadPage('http://amazon.com');">

<input type="button"value="Border's"onClick="loadPage('http://borders.com');">

<input type="button"value="Barnes&Noble"onClick="loadPage('http://barnesandnoble.com');">

</form>

<form name="form2"><input type="button"

value="go back"onClick="javascript: history.go(-1);">

<input type="button"value="go forward"onClick="javascript: history.go(1);">

</form>

</body>

</html>

screen object

• Property of the window object.

• Automatically created when a user loads a web page.

screen object<html>

<head><title>Screen Properties</title></head>

<body bgcolor="orange" > <font face=verdana><script language="JavaScript">

document.write("<b>The Screen</b><br>");document.write("<table border=2>");document.write("<tr><th>Screen Property</th><th>Value</tr>");document.write("<tr><td>Height</th><th>",screen.height,"</td></tr>");document.write("<tr><td>Available Height</th><th>",screen.availHeight,"</td></tr>");document.write("<tr><td>Width</th><th>",screen.width,"</td></tr>");document.write("<tr><td>Available Width</th><th>",screen.availWidth,"</td></tr>");document.write("<tr><td>Color Depth</th><th>",screen.colorDepth,"</td></tr>");document.write("</table>");

</script></body>

</html>

browser objects navigator, windows and frames. browser object model javascript programs are...

Documents