Forms and FormElementsMost interactivity between a Web page and the user takes placeinside a form. That s where a lot of the interactive HTML stufflives for every browser: text fields, buttons, checkboxes, option lists, and so on. As described in earlier chapters, you may use the modern DOMdocument.getElementById()method to reference any element, including forms and form controls. But this chapter focuses on anolder, yet equally valid way of referencing forms and controls. It simportant to be familiar with this widely used syntax so that you canunderstand existing JavaScript source code written according to theoriginal (and fully backward-compatible) form syntax the so-calledDOM Level 0 syntax. The form ObjectUsing the original DOM Level 0 syntax, you can reference a formobject either by its position in the array of forms contained by a doc- ument or by name (if you assign an identifier to the nameattributeinside the

95Chapter 8Window and Document ObjectsThe sole parameter of this method is a quoted string containing the ID of the element youwish to reference. The method returns a value, which you typically preserve in a variable foruse by subsequent script statements: var oneTable = document.getElementById( salesResults ); After the assignment statement, the variable represents the element object, allowing you toget and set its properties or invoke whatever methods belong to that type of object. The next logical step past the document level in the object hierarchy is the form. That swhere you will spend the next lesson. Exercises1.Which of the following references are valid and which are not? Explain what is wrongwith the invalid references. a.window.document.form[0] b.self.entryForm.submit() c.document.forms[2].named.document.getElementByID( firstParagraph ) e.newWindow.document.write( Howdy ) 2.Write the JavaScript statement that displays a message in the status bar welcoming vis- itors to your Web page. 3.Write the JavaScript statement that executes while the page loads to display the samemessage from question 2 to the document as an

-level headline on the page. 4.Create a page that prompts the user for his or her name as the page loads (via a dialogbox) and then welcomes the user by name in the body of the page. 5.Create a page with any content you like, but one that automatically displays a dialogbox after the page loads to show the user the URL of the current page. …
Note: If you are looking for best quality webspace to host and run your tomcat application check Vision virtual web hosting services

94Part IIJavaScript TutorialListing 8-3(continued)

document.createElement() anddocument.createTextNode() methodsThe document.write()method works on a piece of a Web page only while the page is load- ing into the browser the first time. Any subsequent invocation of the method erases the pageand writes a new page. But if you want to add to or modify a page that has already loaded, you need to call upon the Dynamic HTML capabilities of W3C DOM-compatible browsers. Your goal will be to add to, delete from, or replace sections of the node hierarchy of the docu- ment. Most element objects have methods to perform those actions (see more in-depth dis- cussion in Chapter 14). But if you need to add content, you ll have to create new element ortext nodes. The documentobject has the methods to do that. The document.createElement()method lets you create in the browser s memory a brandnew element object. To specify the precise element you wish to create, pass the tag name ofthe element as a string parameter of the method: var newElem = document.createElement( p ); You may also wish to add some attribute values to the element, which you may do by assign- ing values to the newly created object s properties, even before the element becomes part ofthe document. As you saw in Chapter 4 s object hierarchy illustrations, an element object frequently needstext content between its start and end tags. The W3C DOM way to create that text is to gener- ate a brand new text node via the document.createTextNode()method, and populate thenode with the desired text. For example: var newText = document.createTextNode( Greetings to all. ); The act of creating an element or text node does not, by itself, influence the document nodetree. You must invoke one of the various insertion or replacement methods (see Chapter 14) to place the new text node into its element and place the element into the document. Youlearn how to do this in the last tutorial chapter (Chapter 12). document.getElementById() methodYou met the document.getElementById() method in Chapter 4 when learning about the syntaxfor referencing element objects. This W3C DOM method is one you will use a lot. Get to knowits finger-twisting name well. Be sure to honor the upper- and lowercase spelling of this all- important method.
Note: If you are looking for cheap webhost to host and run your apache application check Vision jboss web hosting services

93Chapter 8Window and Document Objects

In Listing 8-3, the situation is a bit more complex because the script generates a subwindowto which is written an entirely script-generated document. To keep the reference to the newwindow alive across both functions, the newWindowvariable is declared as a global variable. As soon as the page loads, the onloadevent handler invokes the makeNewWindow()function. This function generates a blank subwindow. I added a property to the third parameter of thewindow.open()method that instructs the status bar of the subwindow to appear. A button in the page invokes the subWrite()method. The first task it performs is to checkthe closedproperty of the subwindow. This property (which exists only in newer browserversions) returns trueif the referenced window is closed. If that s the case (if the user manu- ally closed the window), the function invokes the makeNewWindow()function again to reopenthat window. With the window open, new content is assembled as a string variable. As with Listing 8-2, thecontent is written in one blast (although that isn t necessary for a separate window), followedby a close()method. But notice an important difference: both the write()and close() methods explicitly specify the subwindow. Listing 8-3:Using document.write() on Another Window