Slide 1

Transcript Slide 1

Browser Objects
Navigator, Windows and Frames
Browser Object Model
JavaScript 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 plugins. Each element of the array represents
a plug-in object
function pluginDetector(type) – Example 3
<html>
<head><title>Plugin Detection</title>
<script language="JavaScript">
function pluginDetector(type) {
if (navigator.plugins[type]){return true;}
else{return false;}
}
</script>
</head>
<body bgcolor="magenta">
<font face="verdana">
<script language="JavaScript">
var plugin = prompt("What plugin do you want to check for?","");
if (pluginDetector(plugin)) {alert("You have the plugin "+ plugin);}
else {alert("Don't have the plugin");}
</script>
</body>
</html>
// Does the browser
// support plug-ins?
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 plugins.
• 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=0
classid="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 7
FORMAT: 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 corner
winObj.focus();
parent.window.moveTo(215, 0); // Move the parent window
parent.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 milliseconds
var days =Math.floor(diff / (1000 * 60 * 60 * 24 ));
// Convert to days
var 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 milliseconds
var days =Math.floor(diff / (1000 * 60 * 60 * 24 ));
// Convert to days
var 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 window
timeout=setTimeout("startScroll()",20);
}
}
function scrollAgain(){
clearTimeout(); // Stop timing
pixelpos = 0; // Reset the horizontal pixel position to 0
startScroll(); // Start scrolling again
}
function stopHere(){clearTimeout(timeout);} // Stop the clock to stop scrolling
function 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 14
leftframe.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>
<head><title>Frame Me!</title></head>

<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 15
topframe.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>
<head><title>Frame Me!</title></head>


<frameset cols="25%,75%">
<frame src="leftmenu.html" name=lframe>
<frame src="rightcolor.html" name=rframe>
</frameset>
</html>
Creating Menus and Navigation Bars
Example 17
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>
Creating Menus and Navigation Bars
Example 17
<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 Bars
Main 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>
Menu file:
Collapsing Toolbars and Menu Bars
<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 20
File 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 20
Location 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>

Slide 1

Transcript Slide 1

Directory