Developer Forums | About Us | Site Map
Search  
HOME > TUTORIALS > CLIENT SIDE CODING > JAVASCRIPT TUTORIALS > JAVASCRIPT AND THE DOCUMENT OBJECT MODEL


Sponsors





Useful Lists

Web Host
site hosted by netplex

Online Manuals

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:

Listing 1. The basic page



<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
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


Copyright 2004-2017 GrindingGears.com. All rights reserved.
Article copyright and all rights retained by the author.