First, let's deal with the formal definitions.
The Window Object
In previous DHTML articles we concentrated on the Document Object Model. The DOM represents the document displayed in a browser.
But there are also circumstances in which we need to access information about the browser itself. As I mentioned in Part 1, this type of information in stored in the BOM, the Browser Object Model.
The root element of the BOM is the window object. As the DOM is part of the BOM, technically we should reference objects by:
window.document.myElement.value;
but this level of description is rarely necessary.
It is important however to be able to visualize the window as an object - and as an object it contains other child objects, as well as methods.
The BOM contains one instance of a window object. This represents the instance of the browser. Further browsers have their own separate and distinct window objects.
The window object can contain frames, which in turn may contain window objects. This hierarchical system can continue indefinitely, although practical considerations do eventually interfere.
The window object has several properties, but most are too complex for this article. We will meet parent and top when we look at frames, but let's start with status and defaultStatus.
status and defaultStatus
As with the DOM, we can read/write various parts of the BOM. The status line at the base of a browser screen can be read or written to using the window.status property. If the status line is left unattended, the defaultStatus property is displayed.
So, for example:
<HTML>
<HEAD>
<TITLE>Status</TITLE>
</HEAD>
<BODY onload="defaultStatus='Date appears here';">
<P onmouseover="status=new Date();">Move the mouse over here for Date</P>
</BODY>
</HTML>
When the document is first loaded, we change the defaultStatus property to 'Date appears here'. This is the text that appears in the status line when we are not engaging the status line elsewhere.
When the mouse is over the <P> element, we change the status line to display the current date.
The status line is released from the code when the onmouseout event is fired, and this reverts the status line back to the defaultStatus message.
window object methods
The window object has many very useful methods. Because window is assumed by most JavaScript interpreters, you may not realise some of these methods are window methods.
Try this code.
<HTML>
<HEAD>
<TITLE>windowless window methods</TITLE>
<SCRIPT>
alert('click to open a new window');
open();
</SCRIPT>
</HEAD>
<HTML>
Both alert and open are methods of the window object, which means that we could equally write:
window.alert('click here');
window.open();
but as with the status properties, this is not necessary.
setTimeout, setInterval, clearTimeout, clearInterval
These four methods are all window methods, and provide a solid backbone for most animation techniques in DHTML.
They can also be grouped as:
setTimeout, clearTimeout
and
setInterval, clearInterval
These two pairs are very similar, but there is one significant difference. With both pairs, we tell the script to call a specified function after a specified amount of time. With Timeout, this only occurs once, with Interval this occurs periodically.
Obviously, we may only wish a function to be called periodically for a while, and then we wish to do something else, and we use the clearInterval method to stop any programmed setInterval methods.
setTimeout is often used for animating objects - we could use setInterval, but setInterval is less easy to control.
<HTML>
<HEAD>
<TITLE>setTimeout</TITLE>
<SCRIPT>
strStatus='Welcome to the Wonderful World of setTimeout..........';
strL=strStatus.length;
newStatus='';
sp=0;
function statusscroll() {
sp++;
if (sp>=strL) sp=0;
newStatus=strStatus.substr(sp,strL-sp);
if (sp>0) newStatus+=strStatus.substr(0,sp-1);
status=newStatus;
setTimeout('statusscroll()',100);
}
statusscroll();
</SCRIPT>
</HEAD>
</HTML>
(View example.) After we initialise all the variables we are going to use, we define the statusscroll() function, which scrolls the strStatus message in the status bar.
This function has an internal counter, sp, which contains the starting position of the strStatus message. This variable is looped from 0 to the length of the string.
We then form the newStatus string, which cuts the strStatus variable in two and places part2 first and then part1, e.g. abcd becomes cdab. This causes a problem if we are cutting with sp=0, as:
newStatus=strStatus.substr(sp,strL-sp);
would perform
newStatus=strStatus.substr(0,srtL);
which is the entire string, and
newStatus+=strStatus.substr(0,sp-1);
would perform
newStatus+=strStatus.substr(0,-1);
which would produce an error. So we handle this with the condition if (sp>0).
After updating the status line, we then use the setTimeout function.
setTimeout('statusscroll()',100);
tells the interpreter to call statusscroll() after 100milliseconds, or 0.1seconds.
To start the program in motion, statusscroll() is called from inside the script.
Exactly the same result could be achieved by replacing:
status=newStatus;
setTimeout('statusscroll()',100);
}
statusscroll();
with
status=newStatus;
}
setInterval('statusscroll()',100);
(See example.) You can only really appreciate the differences between the two methods in advanced programming situations, setInterval can cause a queue of function calls, whereas setTimeout only calls one function at a time.
We can use the clearTimeout and clearInterval methods to stop the animation. For this to work, we must have assigned an ID to the set method.
If we add a button which allows us to stop the scrolling, then the setTimeout version is:
<BODY>
<BUTTON onclick="clearTimeout(myTimeout);">Stop</BUTTON>
</BODY>
after the </HEAD> tag, and change the setTimeout method in the script to:
myTimeout=setTimeout('statusscroll()',100);
Similarly for the setInterval version,
<BODY>
<BUTTON onclick="clearInterval (myInterval);">Stop</BUTTON>
</BODY>
myInterval=setInterval('statusscroll()',100);
Frames
Frames proved to be a valuable extension to the HTML language, allowing multiple documents to be displayed in a single browser.
With DHTML, frames become even more powerful, with the ability to read and write across frames.
This is achieved by the usual referencing of elements, but we need to ensure that we 'travel' safely from one frame to another.
If we have a frameset document:
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET COLS="30%,*">
<FRAME NAME="menu" SRC="MENU.HTM">
<FRAMESET ROWS="50%,*">
<FRAME NAME="logo" SRC="LOGO.HTM">
<FRAME NAME="main" SRC="MAIN.HTM">
</FRAMESET>
</FRAMESET>
</HTML>
Then we have three frames, menu, logo and main.
Each .htm file is very similar in structure, but watch for the subtle differences.
menu.htm
<HTML>
<HEAD>
<TITLE>Menu</TITLE>
</HEAD>
<BODY>
<INPUT TYPE="text" NAME="menutext">
<BUTTON onclick="top.logo.logotext.value=menutext.value;">To Logo</BUTTON>
<BUTTON onclick="top.main.maintext.value=menutext.value;">To Main</BUTTON>
</BODY>
</HTML>
logo.htm
<HTML>
<HEAD>
<TITLE>Logo</TITLE>
</HEAD>
<BODY>
<INPUT TYPE="text" NAME="logotext">
<BUTTON onclick="top.menu.menutext.value=logotext.value;">To Menu</BUTTON>
<BUTTON onclick="parent.main.maintext.value=logotext.value;">To Main</BUTTON>
</BODY>
</HTML>
main.htm
<HTML>
<HEAD>
<TITLE>Main</TITLE>
</HEAD>
<BODY>
<INPUT TYPE="text" NAME="maintext">
<BUTTON onclick="top.menu.menutext.value=maintext.value;">To Menu</BUTTON>
<BUTTON onclick="parent.logo.logotext.value=maintext.value;">To Logo</BUTTON>
</BODY>
</HTML>
Each frame can talk to any other frame (see example). When we do this kind of manipulation, we must take care to ensure that we are using the correct navigation path.
top refers to the top-most window, i.e. the window object that all the sub-windows are descended from, and then we can travel down the tree until we get to the frame we wish to be at.
parent refers to the window directly above the current window, which is useful for nested frameset manoeuvres, rather than having to travel all the way to the top of the tree and then back down again.
Window child objects
The window object also has child objects, which contain related information about the browser. Commonly-used child objects include:
Navigator
History
Location
The navigator object
This object holds all the information about the type of browser and system the user is using. The navigator object has read-only properties.
<HTML>
<HEAD>
<TITLE>Navigator</TITLE>
<SCRIPT>
msg='';
for (p in navigator)
msg+=p+' : '+navigator[p]+'\n';
alert(msg);
</SCRIPT>
</HEAD>
</HTML>
(See example.) Different systems and setups produce different results.
The history object
When you are surfing the net, you often use the back and forward buttons to go back to a page you have already visited. The history object allows us to travel forwards and backwards in script.
The use of the history object is straightforward.
history.back();
sends us back one page
history.forward();
sends us forward one page
We can also use
history.go(n);
which sends us forward n pages (n>0), or back n pages (n<0).
The location object
The location holds detailed information about the current URL. Replace all instances of navigator with location in the navigator example to see a list of properties and their values of the location object.
Other DHTML
The entire DHTML language is fairly substantial. It contains keywords for all sorts of things - dynamic event handling, text substitution, dynamic element creation, and so on.
A discussion of these is beyond the scope of this article, but there are a few features that we can explore.
innerText, innerHTML
These two properties are just two from a whole set of text/HTML substitution commands. We have used innerText before - it changes the inner text of an element.
innerHTML can be used to change the HTML within an element.
So,
<HTML>
<HEAD>
<TITLE>Cool Cursor</TITLE>
<SCRIPT>
function moveCC() {
eX=event.clientX;
eY=event.clientY;
CC.style.left=eX+8;
CC.style.top=eY;
if (event.srcElement.id=='D') {
eH='<B>';
eHc='</B>';
}
else {
eH='';
eHc='';
}
CC.innerHTML=eH+eX+':'+eY+eHc;
}
</SCRIPT>
</HEAD>
<BODY onmousemove="moveCC();">
<DIV ID="D" STYLE="position:absolute;top:100;left:100;width:300;height:200;background-color:red"></DIV>
<P ID="CC" STYLE="position:absolute"></P>
</BODY>
</HTML>
(See example.) We create a DIV element that changes the cursor, and a P element that holds the cursor position.
We call the script with the onmousemove event handler, which is fired every time the mouse moves.
The moveCC() function re-positions CC to the mouse pointer.
We can detect the element that fired the mousemove event with event.srcElement. We read the id of this element, and respond.
The idea is for the cool cursor to be rendered in bold if we are over the DIV. If we are over the DIV, then eH='<B>', and eHc='</B>'.
When we write the to innerHTML property, we either write:
<B>x:y</B>
if we are over the DIV, or just
x:y
if we are not over the DIV.
The HTML is then parsed by the document, and you can see the change that occurs.
Filters
Filters provide a variety of ready-to-use effects. There are 14 filters in all, but we will just look at one to start you off.
The filter we will look at is the alpha filter. This filter sets the visibility of an element, we can set any visibility level between 0-100%.
Filters behave like any other feature of a DHTML web page - we have full access to a filters properties in script.
If we re-examine the book reader example of the previous article, we can adapt this into an alpha filter version.
<HTML>
<HEAD>
<TITLE>Alpha Book Reader</TITLE>
<STYLE>
P {position:absolute;filter:alpha(opacity=50)}
</STYLE>
<SCRIPT>
function go() {
pc=0;
for (e=0;e<document.all.length;e++)
if (document.all[e].tagName=='P')
with (document.all[e]) {
pc++;
style.top=pc*30;
attachEvent('onmouseover',incAlpha);
attachEvent('onmouseout',decAlpha);
}
}
function incAlpha() {
event.srcElement.filters.alpha.opacity=100;
}
function decAlpha() {
event.srcElement.filters.alpha.opacity=50;
}
</SCRIPT>
</HEAD>
<BODY onload="go();">
<P>The is the beginning of this book.</P>
<P>Move your mouse over the text,</P>
<P>to highlight a line to read.</P>
</BODY>
</HTML>
We apply the alpha filter in the STYLE declarations. The alpha filter takes one parameter, which is opacity, which determines how visible an element is. An opacity of 0 means that we cannot see the element at all, and an opacity of 100 means that the element is fully visible.
Filters are basically graphic methods, and for the browser to display them correctly, we must set position to be absolute. This means that we must also set the position of the P elements manually.
The two attached events now call incAlpha and decAlpha, which make the element bright and dulled respectively.
The code that does this refers to the opacity parameter of the alpha filter of the filters collection of the element that fired the event.
event.srcElement.filters.alpha.opacity=100;
We either set it to 100 (bright) or 50 (dulled).
DHTML is a very rewarding area of the Internet to explore, there is far more to it than this introduction. Hopefully I have whetted your appetite.
