However, as a result of these changes, they didn't really need me anymore. Since I write about code and developer stuff and not so much about design or UI stuff, so I've gone back to working on Word for the time being. As a result, I won't be posting anymore about FrontPage (thus the name change), but I won't be posting about Word either, so this won't become a Word programming blog. (I actually think there are plenty of those, Brian Jones blog being the predominant one for Office 12 changes.) I'll just write about the things that interest me. The next time I post something I've been doing lately.

Here's a calculator that calculates ... well ... anything. It's a Windows-like calculator that's similar to the one you have in your wallet that lets you calculate how much money you have left in your checking account after you write a check.

Here's a picture.

When you use this calculator with the ShowModalDialog method (explained in greater detail in my blog post Open a page in a new window of a specific size), you can return a calculated value to the calling page. Here's how it works: you provide a link to the calculator from a Web page that references a JavaScript function that uses the ShowModalDialog method; then when a user closes the calculator, the total is returned to the first page through the JavaScript function that called the ShowModalDialog method.  It's really much more simple than it sounds.

Here's some of the code

In the example page, the "Calculate Numbers" link, code shown below, references a JavaScript function named OpenCalculator.

<a href="javascript:OpenCalculator();">Calculate Numbers</a>

The OpenCalculator function, shown in the following code, does a few different things: it displays the calculator, returns a value from the calculator, and places the returned value into a <span> tag.

function OpenCalculator()
{
  var ret;
  var spanTag;

  ret = window.showModalDialog(
    "calculator.htm", "",
    "dialogHeight:285px;
    dialogWidth:215px;
    resizable:yes;");

  spanTag = document.all.tags
    ("span").item("numbers");
  spanTag.innerText = ret;
}

The calculator has several functions, too many to show here, and three global variables. The global variables store the numbers and operators that the calculator needs to calculate the values. The variable named total stores the current number that is being calculated. When a user clicks the equals button, total resets to zero. The variable named op stores the operator so that when the user clicks the plus button, the calculator knows to add the numbers. The last variable, named isNew, is a Boolean that indicates whether to reset the calculation to zero.

Each of the buttons in the calculator calls a JavaScript function: the number buttons call the SetNumber function, the operator buttons call the SetOperator function, and the equals button calls the SetTotal function. Each of these functions serves a very specific purpose, but the function that does all the work is the Calculate function, shown in the following code. The Calculate function takes the current operator (the operator button clicked last) and calculates the last number entered (or the value in the number textbox) and places the calculated value into the total variable.

function Calculate()
{
  var num = parseInt(document.Calculator.numbers.value);
  
  switch(op)
  {
    case "plus":
    {
      total += num;
      break;
    }
    case "minus":
    {
      total -= num;
      break;
    }
    case "multiply":
    {
      total *= num;
      break;
    }
    case "divide":
    {
      total /= num;
      break;
    }
    default:
    {
      break;
    } 
  }
  
  document.Calculator.numbers.value = total;
}

For an example of the calculator and the full code, see the example page.

Comment from Jason:

"Do you guys purposely markup your pages to render incorrectly in every browser other than IE?

Jason, I'm not sure if you're talking about the FrontPage dev portal on MSDN or my blog, but I assure you that it isn't intentional. Both the blog tool and MSDN have their own ways of marking up HTML, which are very different from each other and which I haven't yet quite figured out.

I just tried both MSDN and my blog in Firefox, and the blog looked fine, but sure 'nuf MSDN looked pretty bad. Unfortunately, I can't do much about this, so please don't dis our content because IMHO we have some pretty great content.

Comment from orcmid:

"Please screen the most-active newsgroup discussions before you feature them. After reading the thread about multiple body tags, I am very wary of ever asking a question that one of those MVPs might want to tell me is stupid.

"No one ever did bother to ask what DAWG found valuable about being able to have multiple body tags (regardless of the fact that FrontPage is not designed to allow it), assuming that there was an alternative solution without checking with him what he really wanted to do. The resulting incivility was unpleasant to watch."

First, newsgroup posts are included using a Web component. I'm not sure exactly how this is determined, but I believe it is based on how many responses there are to a post, so I have no direct control over which posts get "featured."

Second, no one should ever be treated rudely in any of the newsgroups. The newsgroups are moderated by MVPs and other users who volunteer time to respond to customers. Although we have no control over what general users say, we do have some control over how MVPs treat customers.  I'll forward your comment to the MVP lead, who I'm sure will follow up appropriately with the MVPs. If you ever see any user being abused, called names, or generally treated like an idiot in any of the newsgroups, feel free to contact me, and I'll follow up with the MVP lead.

Finally, I wanted to address DAWG's issue about using multiple BODY elements in the same document. The HTML schema doesn't allow for multiple BODY elements, so it's not surprising that FrontPage doesn't support it. However, I can think of a couple reasons why someone might want to use multiple BODY elements.

In documentation, there is something called single-sourcing. It allows people to create one file that can be used in multiple places. For example, you might have some files that you want included in a book as well as in a compiled help file. If this is what DAWG wanted to do, his best choice would be XML.

Old-timers often associate XML with literal data, as you might find in a database, but XML has many more uses, and single-sourcing is one of them. XML allows you to create a custom schema that you can use to markup content.

With XML, you can markup the content in a file and specify where different portions of the content get published. As in the case I cited earlier, say you have help files that you want published to a compiled help file as well as in a book.  Another case where you might want to do single sourcing is where some content gets published to a Web site, some content is included in a marketing flyer, and some content is compiled into a brochure. These are only a few instances where XML is the ideal markup language, and I have no doubt that many of you can think of many more possible scenarios where a single file might be published in multiple formats.

Although XTHML is similar to XML in the sense that the XHTML schema generally encourages that the formatting be kept separate from the HTML, it isn't XML. It's really just an HTML schema that enforces certain style restrictions. True XML uses a custom schema that contains custom markup tags. You use XSLTs to "transform" the appearance of the content in XML files, but XSLTs do more than just change the appearance of the text, for example making some text bold and other text underlined.

XSLT allows you to convert an XML file from one format, or XML schema, to another. For example, you can use an XSLT to compile XML files into a Word document, or you can use XSLT, to convert files into HTML format. You can even use XSLT to convert from one XML schema to another XML schema.

The second reason that I can think of is for browser compatibility.  For example, perhaps DAWG wanted to put in multiple BODY elements with the idea that only the BODY element for the client browser would be visible. This seems to me to be the least likely of the two reasons that I can think of.

Ideally, all Web pages should be cross-browser compliant (MSDN pages not withstanding!), but in the case where you need to develop different HTML pages for different browsers (or connection speeds), you could have a script that determines the browser on load and serves up the correct page for that browser. I'm sure there are several scripts available on the Internet, in fact, I believe FrontPage 2003 includes a behavior for just this purpose, but I'll provide a simple script in a future post for those who are interested in knowing how to do this.

Thanks, everyone, for your comments. As I said, as much as possible I like to respond to comments and usually do so in email when an email address is provided. Keep the comments coming!

Until next time, happy surfing!

Bernardo Iturriaga Dubost, one of the FrontPage testers, came to the rescue of this customer. Here's his response:

The main reason that FrontPage stores the .mdb files in the web is so that you don’t need to access to the Web server to access the data in a database. However, you can provide dual access to a database by using a system DSN, and then using the DSN in FrontPage to connect to the database. Here's how:

First, you need to create a system DSN on the Web server that hosts the Web site:

1. From the Start Menu, click All Programs.
2. Select Administrative Tools, and click Data Sources (ODBC).
3. Go to the System DSN tab.
4. Click Add.
5. Select the appropriate driver type (for example, MS access driver).
6. Click Finish.
7. Provide a name and a description for the DSN.
8. Click Select the navigate to the actual .mdb file located in another folder on the server.
9. Click Ok when you're finish selecting the database.
10. In most cases this is enough, but if the database requires a password, you'll need to provide one. To do this, click Advanced and provide the password.
11. Click Ok again to create the DSN.

After you're finished, you'll see your new named DSN listed on the System DSN tab of the ODBC Data Source Administrator.

Next, you need tell FrontPage to use the DSN to connect to the database.

1. Start FrontPage and open the Web site.
2. From the Tools menu, click Site Settings.
3. On the Database tab, click Add.
4. In the dialog select System Data source on web server.
5. Click Browse. FrontPage displays a list of system DSN on the Web server.
6. The connection that you created in the previous steps should be there, select it and click Ok.
7. Click Ok to the Site Settings dialog box, this will add the connection string to the global.asa file in the Web site.
8. You can now use this connection to the database for database features in FrontPage for both ASP and ASP.NET.

Please note that in order to do this, you need to have access to the actual server that hosts the Web site. One benefit of this configuration is that you can have different permissions for the Web site and for the folder that contains the .mdb file. Please also note that for the users to get data when they browse, MACHINENAME_IUSR needs to have the appropriate read/write access permissions to the .mdb file; otherwise there will be an error.

Most JavaScript events are relatively simple and easy to use. For example, clicking on a button, an element, or a page. There are some more complex events that deal with data, but to keep this simple, I'll talk only about the ones that affect user interaction, such as onclick, onmouseover, onmouseout, and onfocus. There are, of course, many more events than this, but these four events seem to cover a majority of the uses that you will need ... at least to start with.

The Script

First, of course, you need a script, so here's a simple little script.  All it does is display a message box.  Just copy the code below, including the opening and closing <script> tags, and paste them into the HEAD section of a Web page.

<script language="javascript">
function ShowMessage(text)
{
    window.alert(text);
}
</script>

In order to call a script from an event, it must be inside a function, so the above script contains a function called "ShowMessage" that takes one argument, the text to be displayed.

Note   As I mentioned in my last JavaScript 101 post, you can use IntelliSense in Code view in FrontPage to write your scripts.

The HTML

Second, you need to reference the function from an event inside of an element. I'll use a P element. Here's the HTML code that you need.

<p>Here is a sample paragraph 
with an event.</p>

Putting Them Both Together

Next, add to the P element a an event handler that calls the function.  You can add it to any event, such as the onload event, but to make things simple, add it to the onclick event.  Here's the code:

onclick="ShowMessage
('A little JavaScript fun!');"

Your P element should now look like the following code:

<p oncl­ick="ShowMessage
('A little JavaScript fun!');">
Here is a sample paragraph with 
an event.</p>

And that's it.  Save your page and display it in the browser.  When you click on the text in the paragraph, the browser displays a message like the one in the following image.

What You've Learned

In this post you learned how to hook up a JavaScript function with an event handler for an HTML element. Now that you understand how to hook your scripts up to events to create user interaction, we can move onto writing more scripts.  Next time, I'll talk about working with text—things like changing the text or HTML in an element, changing colors, formatting, etc. Until then, have fun!

This redesign encompasses some fairly large changes.

Portal Home Page

If you visited the FrontPage Developer Portal prior to our redesign, you may have used links on the portal home page to navigate through the other pages within the portal. We removed the links from the main part of the home page and inserted content from and links to other important information, such as FrontPage blogs and popular newsgroup posts.

Another major addition to the home page is the profile section. In the profile section, we'll introduce you to FrontPage product team members and MVPs. They are people who develop or support FrontPage. Some of the names may be familiar because you may have seen them in the newsgroups; others may be new to you because they generally work behind the scenes. However, all of them are important to FrontPage users as they work daily to build a better product.

Navigating the Portal

Because we removed the navigation links from the home page, you might be wondering how you can access the pages within the portal. To navigate the portal, you can use the right navigation bar. The right navigation was always there, but we’ve enhanced it to make it even more useful. It lives on each page in the portal, so you can always get to any page in the portal from any other page. This feature makes navigating the pages simple and easy.

Getting Started

The Getting Started page was one of the highest hit pages in our portal, so we redesigned it to really help you get started. It explains the three main pillars around which FrontPage 2003 was developed and provides links to help content, product information, developer articles, and other Web sites where you can find more information.

Technical Articles

The Technical Articles page previously listed all technical articles under two main headings: Web development and extending FrontPage. Now the articles are organized according to technologies, so if you want information relating to JavaScript, CSS, or VBA, you can easily find just the articles that you want without having to navigate a huge list of articles on every possible subject except the one in which you are most interested.

Information Center

In our research, we found that our customers often wanted information that didn't necessarily belong in an article. But if the information didn't belong in an article, where did it belong? Enter the Information Center. The Information Center comprises pages that explain various Web technologies that Web developers often use as well as tasks that they want to perform.

The Information Center is probably the area of the redesign about which I'm most excited. Each of the pages in the Information Center covers a major technology or a specific task. For example, if you want information on cascading style sheets, you can go to the CSS information page to find general information, a list of articles in the MSDN library, and other resources and Web sites that contain more information on CSS.

Initially, we included the Web technologies that are most common for our users: CSS, JavaScript, ASP, ASP.NET, and databases; and we included one major task: e-commerce. We plan to add additional pages in the future.

You can get to all the pages in the Information Center from the right navigation bar. In addition, there are links to many of the Information Center pages from the technical articles page.

How Can You Help?

We redesigned the FrontPage developer portal for you. We looked at which pages received the highest hits; we determined where you were going from the portal; and deduced (based on search and metrics) what information you wanted most.

You can help us by telling us how we're doing and what we can do to improve. We've added ratings to several of the portal pages to help you tell us what you think. As we receive actionable feedback, we'll make changes and continue to evolve the FrontPage developer portal.

We have one goal in mind: make the FrontPage developer portal the place you go to find information relevant to what you do—develop Web sites with FrontPage.

Using a FrontPage site template and ASP
Using Code Snippets
Using ASP.NET

To password protect pages using a FrontPage site template and ASP

Here are specific steps to password protect pages using features built into FrontPage:

1. From the File menu, click New.
2. From the Web Site tab, select FrontPage Server Templates from the first list, and then select Database Interface Wizard from the second list.
3. Type the location where you want to put your password protected page. This must be an Windows Web server running IIS.
4. Click OK.
5. In the Wizard…
   1. Click Next to create an ASP solution.
   2. Click Next to use the default name for the connection.
   3. Click Next to use the default columns in the table.
   4. Click Next after the DB is created.
   5. Click Next to use the default table.
   6. Check the box to use a Database Editor.
   7. Click Next.
   8. Choose a password and enter it.
   9. Click Next.
   10. Click Finish.
6. After FrontPage finishes building the site, all of the necessary code for password protecting pages has been generated. In order to protect any new pages, simply put the following code:
   

   <!-- #include file=”login.asa” -->
   <%
   If Session(SiteId) <> true Then
   Response.Redirect(“login.asp?requester=<!--insert page name here-->”)
   End If
   %>

   above the <HTML> tag on any page and save as .asp.

To password protect pages using Code Snippets

Here are steps to create password protected pages using code snippets:

1. Create a new site in FrontPage.
2. Create a new page and switch to Code view.
3. Delete all the code in the new page.
4. Paste the following code as a code snippet.

   <%
   Username="user"
   Password="pass"
   ' if any of the variables do not match, create error message
   if Request.Form("login") <> Username or Request.Form("password") <> Password then
       MsgErr = "<h3>Authorization Failed.</h3>"
       Response.Write MsgErr
       ' if correct, set the session variable and proceed
   Else
       Session("someStringValue") = true
       ' redirect
       If Len(Request("requester")) > 0 Then
           Response.Redirect (Request("requester"))
       Else
           Response.Redirect "protected.asp"
       End if
   End if
   %>
   <html>
   <head>
       <title>Results -- Login</title>
       <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
       <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
       <meta name="ProgId" content="FrontPage.Editor.Document">
   </head>
   
   <body bgcolor="#FFFFFF">
       <FORM ACTION="login.asp" METHOD="post">
       <h3>Login</h3>
           <TABLE BORDER=0> 
               <TR>
                   <TD ALIGN="right">User name:</TD>
                   <TD><INPUT TYPE="text" NAME="login" size="10" VALUE=''/></TD>
               </TR>
               <TR>
                   <TD ALIGN="right">Password:</TD>
                   <TD><INPUT TYPE="password" NAME="password" size="10" VALUE=''/></TD>
               </TR>
               <TR>
                   <TD><input TYPE="hidden" NAME="requester" VALUE="<%=Server.HtmlEncode(Request("requester"))%>"></TD>
                   <TD></TD>
               </TR>
               <TR>
                   <TD align="left"><INPUT TYPE="submit" VALUE="Login"/></TD>
                   <TD></TD>
               </TR>
           </TABLE>
       </FORM>
   </body>
   </html>

5. Save page as login.asp.
6. Create a new page and switch to Code view (or do this with any page you want to protect with a password).
7. Above the opening <html> tag, paste in the following snippet.

   <%
   If Session("someStringValue") <> true Then
       Response.Redirect("Login.asp?requester=protected.asp")
   End If
   %>

8. Save this page as protected.asp (or replace the requester text above from protected.asp to the page name you are protecting).
9. Browse to protected.asp.

To password protect pages using ASP.NET

Here are steps to password protect pages using ASP.NET:

1. Create a new page in your Web site and switch to code view.
2. Select and delete all the code in the page.
3. Paste in the following code.

   <html>
   <body>
       <h1>Please Log In</h1>
       <hr>
       <form runat="server">
       <table cellpadding="8">
           <tr>
               <td>User Name:</td>
               <td><asp:TextBox ID="UserName" RunAt="server" /></td>
           </tr>
           <tr>
               <td>Password:</td>
               <td><asp:TextBox ID="Password" TextMode="password" RunAt="server" /></td>
           </tr>
           <tr>
               <td><asp:Button Text="Log In" OnClick="OnLogIn" RunAt="server" /></td>
               <td></td>
           </tr>
       </table>
       </form>
       <hr>
       <h3><asp:Label ID="Output" RunAt="server" /></h3>
       </body>
       </html>
       <script language="C#" runat="server">
           void OnLogIn (Object sender, EventArgs e)
           {
               if (FormsAuthentication.Authenticate (UserName.Text, Password.Text))
                   FormsAuthentication.RedirectFromLoginPage (UserName.Text, false);
               else
                   Output.Text = "Invalid login";
           }
       </script>

4. Save the page as loginpage.aspx.
5. Create a new page and switch to code view.
6. Select and delete the code in the page.
7. Paste the following code into the new page.

   <configuration>
       <system.web>
           <authentication mode="Forms">
           <forms loginUrl="LoginPage.aspx">
           <credentials passwordFormat="Clear">
       <user name="Bruce" password="Batman"/>
       </credentials>
       </forms>
       </authentication>
       <authorization>
       <deny users="?" />
       </authorization>
       </system.web>
   </configuration>

8. Save the page as web.config.

And that’s all there is to that. Any aspx pages in the same folder as the web.config file are protected.

The window object contains all the other objects in the DOM, plus properties, methods, and events for the browser window. A common task that people want to do is specify the text for the status bar. Here's a simple bit of code that does this.

This example is very simple, but simple is a great way to start.

Now that you have the code, what do you do with it? This is a great beginner question. There are two ways to insert JavaScript code into your pages. (1) You can insert raw JavaScript code into a <script> tag in the HEAD section of a page. (2) You can place the code in a function and put the function in a <script> tag in the HEAD section of a page, and then add an event handler to call the function.

(1) insert raw JavaScript code

For now, let's stick with the simplicity of the first option. Use the following steps to add this code to a page.

1. Start a new page in FrontPage and switch to Code view. (You can also use the code window in Split view.)
2. In Code view, locate the closing </head> tag. (If you don't know HTML, there's never been a better time to learn. Check out the HTML tutorials on Office Online and HTML for Beginners on MSDN.)
3. Press Enter a couple times and position the Insertion Point (cursor) on one of the blank lines.
4. Copy the following code and paste it into FrontPage at the Insertion Point.
   <script language="javascript">
window.status = "This is a sample for changing the text on the status bar."
</script>
5. Save the page and preview it in a browser. Your page should look just like the following image (status bar text is circled in red to make it easy to locate).

The second way to insert a script (i.e., place the code a function and put the function in a <script> tag in the HEAD section of a page, and then add an event handler to call the function.) requires a bit more work, so let's split it up into three separate tasks

(2) place the code in a function

Put simply, a function is a section of code that runs separately from code around it. Essentially, functions are methods that you create yourself to perform some action or series of actions. Some functions return values; other functions require values passed into them. The values that functions return are called return values; values passed into functions are called arguments.

The structure, or syntax, of a function is always the same: the function keyword identifies that what follows is a function, the text that follows the function keyword identifies the name of the function, the name of the function is followed by opening and closing parentheses (which may or may not contain arguments), and the code that applies to the function appears inside of opening and closing curly braces.

Here's a simple diagram of the syntax of a function:

For those of you who prefer to cut and paste, here's a code version of the above.

function scriptName()
{
    //Code goes here
}

Using the example above, your function might look something like the following code.

<script language="javascript">
    function changeStatus() 
    { 
        window.status = "This is a sample for changing the text on the status bar."
    }
</script>

When you place JavaScript code in functions, you can call the functions from event handlers. Event handlers execute code based on certain events that occur within the browser. I'll talk more about events and event handlers in my next post; for now, I want to show you how IntelliSense in FrontPage can help you write scripts.

Using IntelliSense in FrontPage

IntelliSense provides cues to options (or in this case objects, methods, properties, and events) that may be available. Let's go back to the code that we used earlier and create this again in FrontPage (without cutting and pasting the code).

Using IntelliSense to insert HTML Elements

1. To begin, start FrontPage and start a new page.
2. Switch to Code view.
3. Position the Insertion Point (cursor) before the closing </head> tag and press Enter a few times.
4. Move the Insertion Point up a couple lines and type "<s". As you type, a drop-down box, as shown in the following image, displays showing a list of elements that can be placed within the HEAD section of a Web page.
   
   As you type, the highlighted element moves to "script"; at this point you can press the spacebar (or Enter or Tab) to insert the element into your Web page.
5. After you press the spacebar, you see a list of attributes that apply to the SCRIPT element. Type "langu"; again, as you type, the highlighted attribute changes from lang to language. (We need the language attribute to identify that we are using JavaScript.)
6. When the language attribute is highlighted, type an equals sign (=) and a double quote (").
7. Now you see a list of possible values for the language attribute. Type "j", and the highlighted value moves to "javascript".
8. Type a closing double quote (") and a closing angled bracket (>). FrontPage automatically inserts the closing </script> tag.
9. You should now have the following code in your Web page:
   <script language="javascript"></script>

When you use IntelliSense to insert HTML elements, FrontPage places the Insertion Point between the opening and closing tags. You can then type text or, in this case, code between the tags.

Using IntelliSense to write JavaScript code

Now that you have an opening and closing script tag, you can write your script code.

1. With the Insertion Point between the opening and closing <script> tags, press enter a couple times. Arrow up once so that your Insertion Point is on the line that is between the line that contains the opening script tag and the line that contains the closing script tag.
2. Type "window."; don't forget the period after the window. Once you press ".", FrontPage shows a drop-down list that contains all the properties, methods, and events related to the window object, as shown in the following image.
   
3. Type "st" and then press Tab. FrontPage inserts "status" into your script. Now your script should read: window.status
4. Press the space bar and type an opening quote.
5. Type "This text displays on the browser's status bar.", and then type a closing quote.

The only thing to understand about using IntelliSense for writing scripts is that IntelliSense doesn't work when you are working with variables because FrontPage doesn't know which object a variable represents. I'll tell you more about declaring and working with variables a bit later. For now, try using IntelliSense to insert your own simple scripts. Here are a few to get you started:

• window.alert("here's a message");
• window.resizeTo(640,480);
• window.moveTo(0,0);

These are just a few simple scripts; in a future post, I'll help you understand how to write your own more complex scripts.

Here's what you learned today:

• Woohoo! You wrote your first scripts.
• You learned how to use IntelliSense in FrontPage.
• You learned how to create a JavaScript function.

In my next post, I'll tell you more about events and how to connect a JavaScript function to an event on a Web page. For now, have fun.

In the meantime, I wanted to share with you the IE blog. If you haven't seen the IE blog, you might want to keep an eye on it. There's an interesting post about the Internet Explorer 7 User Agent String that might be important to Web developers who have code that sniffs out the client browser. As explained in this post, you may need to make a change to your code to be compatible with newer versions of IE.

If you talk to several different Web developers, each will probably see the JavaScript object model differently. To make it easiest, I'm going to split the JavaScript object model into two separate entities. One is the DOM, or Document Object Model, and the other is "everything else."

The DOM

Let's first start with the DOM. The DOM, also sometimes called the DHTML object model, is generally used to create dynamic HTML (DHTML). The DOM is made up of objects and members (by "members" I mean methods, properties, and events) that allow you to change the appearance of a Web page by using code. A drop-down menu is an example of using scripting with the DOM to manipulate the visible state of a DIV element. The following image shows the core objects in the DOM.

Periodically, I'll refer back to this image as I break down the different objects of the DOM. For now, just notice the hierarchical structure of the DOM.

Different browsers implement the DOM differently. For example, an object that you can access in one browser may not be available in another browser. The above diagram includes only core objects and not custom objects that are included only in one or a few browsers. For example, the Layer object only works in Netscape Navigator, and possibly Mozilla and Firefox by association, and not in Internet Explorer. By the same token, Internet Explorer may implement its own custom objects that are unavailable in non-Microsoft browsers. For this reason, if you want your scripts to run in all possible browsers, you should stick with the core objects and not use custom objects, which may make programming scripts easier but will cause problems for your users.

Everything Else

Next, the "everything else" that I mentioned.  Everything else includes objects to handle strings, numbers, and boolean values as well as mathematical functions and arrays. I generally consider these less "objects" and more as language conventions and built-in functions, but I'll explain that a bit later. For now, I'd like to focus on working with the DOM since those are the objects that most client-side JavaScript uses (although you can use the math functions to calculate numbers, which you might get from a Web form, but that's a subject that deserves its own post, so for now forget I mentioned it).

Working with the DOM

As I already said, the objects in the DOM are the objects that you would generally use to animate Web pages using client-side scripting. The main top-level object is the window object. All other objects are what are called "child" objects of this object because they exist as "children" of this object. This can be easier to understand if you think of the above diagram like a family tree. The window is the top-level "parent" object with "child" objects named document, event, history, location, navigator, and screen. The document object is a "child" object that is also a "parent" object because it has "child" objects, as does the form object.

The relationship between parent and child objects in an object model give the objects a structure that you can easily navigate, and understanding this structure helps you determine how to access child objects, which makes editing and writing scripts easier. You can work with most child objects of the window object directly without accessing them from the window object.

When you access individual objects within this hierarchical structure, you need to separate each object (and/or member) with a period (.). For example, the following code accesses the BODY element of the document object that is a child of the window object.

window.document.body

However, as I mentioned above, the document object is one of the child objects of the window object that you can access without first accessing the window object. So this code could also be written as shown in the following code.

document.body

Note   You may have noticed that there isn't a body object in the object hierarchy shown in the image. This is correct. You'll also notice that I said that the code accesses the BODY "element" not the body object. The body in the above code is an accessor property that returns an element object. (If you've forgotten what an accessor property is, see my previous post JavaScript and OOP.)

All HTML elements (with the exception of the elements that have specific objects in the object model, like the STYLE and FORM elements) use the element object. However, not all elements have properties that you can use to access them directly. (In fact, most do not.) The BODY element just happens to be one of the few that does. I'll explain in a future post how to access all the other elements.

Whew! This was a lot of general, overview-type stuff to take in in one sitting, and you might be thinking what on earth you're going to do with all of it. Well, I don't expect it to gel completely just yet, but soon it will all make sense and you'll be writing your own scripts like a pro.

For now, here's what you learned today about JavaScript:

• JavaScript has objects that you can use to animate Web pages (DOM) as well as objects that you can use to calculate numbers, handle strings, and work with arrays ("everything else").
• The DOM contains objects that you can use to access features in a browser and elements in a Web page.
• You use the DOM objects to create dynamic HTML pages.
• The DOM has a hierarchical structure that is similar to a family tree and is made up of "parent" and "child" objects.
• Understanding the hierarchical structure of the DOM helps you know how to access the appropriate child objects and makes writing scripts easier.
• In script, you need to separate objects in the hierarchical structure with a period (.).

In my next post, we'll write a few simple scripts and I'll show you how IntelliSense in FrontPage can help you write your scripts.