Structuring your Application

Our demo application includes three applications in one:

• A Tic-Tac-Toe Game
• Popout Menus
• A Page Watermark

The general structure of the application page is similar to what we presented in our previous column, Netscape 6, Part VI: Object-Oriented DOCJSLIB 1.2. Read the other column carefully to get acquainted with the principles of object-oriented programming in general and object-oriented JavaScript in particular. We first load the browser sniffer:

<SCRIPT LANGUAGE="JavaScript" SRC="browserSniffer.js">
  </SCRIPT>

We then load the browser-independent superclass object:

<SCRIPT LANGUAGE="JavaScript" SRC="docjslibSuperClass.js">
  </SCRIPT>

We decide which subclass object to load in the following javascript code:

<SCRIPT LANGUAGE="JavaScript"
  SRC="createTheProperSubClass.js"></SCRIPT>

We load all four subclass objects, for Internet Explorer 4.x, Internet Explorer 5.x, Netscape Navigator 4.x, and Netscape 6 in createTheProperSubClass.js:

var browserType = new browserSniffer();
if (browserType.ie4) {document.write(
  '<SCRIPT LANGUAGE="JavaScript"
  SRC="docjslibIE4SubClass.js"><\/SCRIPT>');}
else if (browserType.ie5) {document.write(
  '<SCRIPT LANGUAGE="JavaScript"
  SRC="docjslibIE5SubClass.js"><\/SCRIPT>');}
else if (browserType.ns4) {document.write(
  '<SCRIPT LANGUAGE="JavaScript"
  SRC="docjslibNS4SubClass.js"><\/SCRIPT>');}
else if (browserType.ns6) {document.write(
  '<SCRIPT LANGUAGE="JavaScript"
  SRC="docjslibNS6SubClass.js"><\/SCRIPT>');}

So far, we have loaded object constructor in the form of function definitions. We create the proper subclass and an instance of it next:

var classSelectionObj = new createTheProperSubClass();
var myBrowserAPIObj =
  classSelectionObj.getTheProperSubClass(); 

The rest of the page includes the code for the three applications. To make the code more readable, we enclosed each application in a separate <SCRIPT> tag. They can all be in a single tag, of course.

Next: use DOCJSLIB 3.1 in programming Tic-Tac-Toe