Defining the classesDefining a class called Page in JavaScript is as easy as creating a function of that name as a constructor. Take a moment to understand the code below, taken from utils/PageCounter.asp, and it will open up a whole new world! (For a full description of JavaScript objects, read Microsoft's documentation. <%
// create a single page object
var oPage = new Page ( );
// ============================================
// Page object constructor
// ============================================
function Page ( )
{
// a page contains a <head> and a <body>
this.Head = new Head ( );
this.Body = new Body ( );
this.Out = PageOut;
}
// ============================================
// Body object constructor
// ============================================
function Body ( )
{
// a body contains a <Header> and a <Footer>
this.Header = new Header ( );
this.Footer = new Footer ( );
this.Out = BodyOut;
}
// ============================================
// Head object constructor
// ============================================
function Head ( )
{
this.Out = HeadOut;
}
// ============================================
// Header object constructor
// ============================================
function Header ( )
{
this.Out = HeaderOut;
}
// ============================================
// Footer object constructor
// ============================================
function Footer ( )
{
this.Out = FooterOut;
}
%> |
Here you can see how the classes and the hierarchy are defined. Each class has just one common method - they all have an Out() function that will output the relevant html. In each case the member Out is assigned to a function name defined elsewhere. Let's look at the first example, PageOut(): function PageOut ( )
{
Out ( '<html>' );
// output <head>
this.Head.Out ( );
// output <body>
this.Body.Out ( );
Out ( '</html>' );
}
|
Notice how the <html> tags are in the same function? This is the encapsulation that I wanted from these classes - the function does what it knows best, and no more. It knows that a <html> needs a </html>, then tells Head and Body to do their thing. Part 3: A sample page... | 
