Netscape 6, Part V: DOCJSLIB 1.1: DOCJSLIB Priniciples - Doc Javascript | WebReference

Netscape 6, Part V: DOCJSLIB 1.1: DOCJSLIB Priniciples - Doc Javascript


Netscape 6, Part V: DOCJSLIB 1.1

DOCJSLIB Priniciples

DOCJSLIB is a set of JavaScript functions that create and manage DHTML elements, taking care of all browser inconsistencies. We designed DOCJSLIB in such a way that will free you from taking care of the nitty gritty details of DHTML element creation and keeping it consistent across platforms. DOCJSLIB presents you with a clean procedural interface (API) through which you can drive and control its behavior. This powerful interface allows you to become more efficient programmer. You will be able to focus your effort on your specific application as opposed to working on a generic stuff that people keep reinventing over and over again, all over the Internet community. If you are a newcomer to this field, DOCJSLIB will allow you to ramp up much faster, as you'll not have to solve problems that many people have solved before. For our column readers that complain that they cannot comprehend some of our complex JavaScript code, DOCJSLIB is a great answer for you. You won't have to dive into a complex code any more, but rather focus on your ideas and how to translate them into an attractive eye-catching application.

The cornerstone of DOCJSLIB Version 1.0 is the makeImage() function. This is the function you call to create a DHTML element. You can control its physical appearance and program its onClick() event handler. Here is the procedural interface you should become familiar with:


function makeImage(imgID,       // given id
               imgURL,      // image URL
               imgHeight,   // image height
               imgWidth,    // image width
               imgAlt,      // alternative image
               posFromLeft, // absolute position from left of window
               posFromTop,  // absolute position from top of window
               clickParam1, // parameter passed to "onclick" handler
               clickParam2) // parameter passed to "onclick" handler

The parameters are self explanatory, but let's review their meaning:

DOCJSLIB supports the handleImageClick() event handler. This event handler behaves similarly to the onClick() event handler, natively supported by many DHTML elements. You have to provide this event handler in your application. Its procedural interface must match the following format:

function handleImageClick(id, param1, param2) {
.
.
.
}

The first parameter is the image's ID, the same ID you specify as the first parameter of the DOCJSLIB makeImage() function. The other two parameters are those originally passed to makeImage(), called clickParam1 and clickParam2 above. You are responsible for writing the body of the function. This is the place to program the behavior of the image when clicked by the user. You can hide it, replace it, move it, etc. Later this column we show the example of the Connect-Three board game.

DOCJSLIB Version 1.0 includes two other functions, the getSrc() and setSrc(). The getSrc() function accepts one parameter, the image's ID, and returns the URL of the image's GIF:

function getSrc(id) {
.
.
.
}

The setSrc() function accepts two parameters, the image's ID and the URL of the image's GIF, and replaces the current image's GIF with the new one:

function setSrc(id url) {
.
.
.
}

The bodies of these functions are shown later this column

Next: How to sniff the browser type

http://www.internet.com


Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: January 29, 2001
Revised: January 29, 2001

URL: http://www.webreference.com/js/column76/2.html