JavaScript And The Document Object Model The basic page

JavaScript and the Document Object Model

By Nicholas Chase - 2004-03-10 Page: 1 2 3 4 5 6 7 8

The basic page

Let's start with the basic page, which includes a work area and form indicating how many notes are already created:




<html>
  <head>
    <title>Getting Sticky</title>
    <style type="text/css">
      * {font-family: sans-serif}
      a {font-size: 6pt}
      .editButton {font-size:6pt}
    </style>


  </head>
  <body>
    <div id="mainDiv" style="height:95%; width:95%; border:3px solid red; 
                                                           padding: 10px;">
    
       <h1>Getting Sticky</h1>

       <form id="noteForm">

           Current number of notes:
                       <input type="text" name="total" value="0" size="3"/>
           <input type="button" value="Add a new note"/>
       </form>

    </div>
  </body>

</html>

Lisitng 1 shows a basic page with a couple of styles (just to pretty it up a little). The body of the page includes a single div element, which includes a heading element (h1) and a form element. Even in pre-DOM browsers, accessing the information within the form wasn't a problem.

Figure 1. The basic page

View JavaScript and the Document Object Model Discussion

Page: 1 2 3 4 5 6 7 8 Next Page: The DHTML way

First published by IBM developerWorks