Downloaded 11 times
![ The DOM address of the button using the forms and elements arrays, is as follows: var dom = document.forms[0].elements[0]; Problem: The problem with this approach is that, If we add or remove some elements in the form then the DOM address could change. For example, if we add a new button before the turnIton button in the document, the DOM address shown would be wrong.](https://image.slidesharecdn.com/unitiijavascriptandxhtmldocumentsanddynamicdocumentswithjavascript-191003042440/75/Unit-ii-java-script-and-xhtml-documents-and-dynamic-documents-with-javascript-10-2048.jpg)
Unit ii java script and xhtml documents and dynamic documents with javascript
- 1.
- 2. UNIT-2: JavaScript andXHTML Document The JavaScript Execution Environment A browser displays an XHTML document in a window on the screen of the client. The JavaScript Window object represents the window that displays the document. All JavaScript variables are properties of some object. The properties of the Window object are visible to all JavaScript scripts that appear in the window’s XHTML document. There can be more than one Window object. However, we deal only with scripts with a single Window object.
- 3. The JavaScriptDocument object represents the displayed XHTML document. Every Window object has a property named document, which is a reference to the Document object that the window displays. Every Document object has a forms array, each element of which represents a form in the document. Each Forms array element has an elements array as a property, which contains the objects that represent the XHTML form elements, such as buttons and menus. The JavaScript objects associated with the elements in a document can be addressed in a script in several ways. Document objects also have property arrays for anchors, links, images, and applets.
- 4. The Document ObjectModel The Document Object Model (DOM) has been under development by the W3C. At the time of this writing, DOM 2 was the latest approved version, and DOM 3 was under development. The original motivation for the standard DOM was to provide a mapping of the web documents into the object in all browsers. These objects are accessible by the JavaScript. DOM 0 is the name often used to describe the document model used by the early browsers that supported JavaScript. Specifically, DOM 0 is the version of the document model implemented in the Netscape 3.0 and Internet Explorer 3.0 browsers. The DOM 0 model was partially documented in the HTML 4 specification. DOM 1, the first W3C DOM specification, issued in October 1998, focused on the XHTML and XML document model.
- 5. DOM 2,issued in November 2000, specifies a style sheet object model and defines how style information attached to a document can be manipulated. It also includes document traversals and provides a complete and comprehensive event model. DOM 3 will deal with content models for XML (DTDs and schemas), document validation, and document views and formatting, as well as key events and event groups. The DOM is an application programming interface (API) that defines an interface between XHTML documents and application programs. Each language that interfaces with the DOM must define a binding to that interface. The actual DOM specification consists of a collection of interfaces, including one for each document tree node type. Documents in the DOM have a treelike structure, but there can be more than one tree in a document. Therefore, in an implementation, the relationships among the elements of a document can be represented in any number of different ways.
- 6. The following XHTMLdocument and its corresponding DOM tree illustrate the relationship between them. html xmlns = “http://www.w3.org/1999/xhtml” > <head> <title>A Simple Document </title> </head> <body> <table> <tr> <th>Breakfast</th> <td>0</td> <td>1</td> </tr> <tr> <th>Lunch</th> <td>1</td> <td>0</td> </tr> </table> </body> </html>
- 7. Document <head> <body> A simple document <title> <tr> <table> <tr> <td><td><th> <th><td> <td> Breakfast 0 0 0 0 Breakfast
- 8. In theJavaScript binding to the DOM, the elements of a document are objects, with both data and operations. The data are called properties, and the operations are, called methods. For example, the following element would be represented as an object with two properties, type and name, with the values "text" and "address", respectively: <input type = "text" name = "address"> In most cases, the property names in JavaScript are the same as their corresponding attribute names in XHTML.
- 9. Element Access inJavaScript There are several ways the object associated with an XHTML form element can be addressed (accessed) in JavaScript. Method-1 (Using forms and elements array): The original (DOM 0) way is to use the forms and elements arrays of the Document object, which is referenced through the document property of the Window object. For example, consider the following XHTML document: <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Access to form elements </title> </head> <body> <form action = ""> <input type = "button" name = "turnIton" /> </form> </body> </html>
- 10. The DOMaddress of the button using the forms and elements arrays, is as follows: var dom = document.forms[0].elements[0]; Problem: The problem with this approach is that, If we add or remove some elements in the form then the DOM address could change. For example, if we add a new button before the turnIton button in the document, the DOM address shown would be wrong.
- 11. Method-2 (usingelements Name): Another approach to DOM addressing is to use element names. For this the element and its enclosing elements must include name attributes. For example, consider the following document: <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Access to form elements </title> </head> <body> <form name = "myForm" action = ""> <input type = "button" name = "turnIton" /> </form> </body> </html>
- 12. The DOMaddress of the button using the elements name is as follows: var dom = document.myForm. turnIton; Problem: One drawback of this approach is that the XHTML 1.1 standard does not allow the name attribute in the form element.
- 13. Method-3 (UsinggetElementById method): Yet another approach to element addressing is to use the JavaScript method getElementById, which is defined in DOM 1. Because an element's identifier (id) is unique in the document, this approach works, regardless of how deeply the element is nested in other elements in the document. For example, consider the following document: <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Access to form elements </title> </head> <body> <form name = "myForm" action = ""> <input type = "button" name = "turnIton“ id=“turnIton” /> </form> </body> The DOM address of the button using the getElementById method, is as follows: var dom = document.getElementById("turnIton");
- 14. Events and EventHandling Basic Concepts of Event Handling One important use of JavaScript for Web programming is to detect certain activities of the browser and the browser user and provide computation when these activities occur. An event is a notification that something specific has occurred, either with the browser, such as the completion of the loading of a document, or because of a browser user action, such as a mouse click on a form button. Strictly speaking, an event is an object that is implicitly created by the browser and the JavaScript system in response to something happening. An event handler is a script that is implicitly executed in response to the appearance of an event. Event handlers enable a Web document to be responsive to browser and user activities.
- 15. Because eventsare JavaScript objects, their names are case sensitive. The names of all event objects have only lowercase letters. For example, click is an event, but Click is not. Events are created by activities associated with specific XHTML elements. For example, the click event can be caused by the browser user clicking a radio button or the link of an anchor tag, among other things. The process of connecting an event handler to an event is called registration. There are two distinct approaches to event handler registration, one that assigns tag attributes and one that assigns handler addresses to object properties.
- 16. Events, Attributes, andTags HTML 4 defined a collection of events, which browsers implement and with which JavaScript can deal. These events are associated with XHTML tag attributes, which can be used to connect the events to handlers. The attributes have names that are closely related to their associated events. Table 5.1 lists the most commonly used events and their associated tag attributes.
- 18. An XHTMLtext element is said to get focus when the user puts the mouse cursor over it and clicks the left mouse button. An element can also get focus when the user tabs to the element. Focus on an element can be forced with focus method. Table 5.2 shows the most commonly used attributes related to events, tags that can include the attributes, and the circumstances under which the associated events are created.
- 21. The processof connecting an event handler to an event is called registration. There are two ways to register an event handler in the DOM 0 event model. 1. assigning the event handler script to an event tag attribute 2. assigns handler addresses to object properties In first method we assign the event handler script to an tag attribute. For example, <input type="button" id="myButton" onclick="alert('You clicked my button!');" />
- 22. In manycases, the handler consists of more than a single statement. For these, often a function is used, and the literal string value of the attribute is the call to the function as follows: <input type = "button" id="myButton" onclick="myButtonHandler();" /> In second method we assign handler address to object property. For example, following example shows the handler address is assigned to the button object. document.getElementById("myButton").onclick=myBut tonHandler;
- 23. Handling Events fromBody Elements The events most often created by body elements are load and unload. As our first example of event handling, we consider the simple case of producing an alert message when the body of the document has been loaded. In this case, we use the onload attribute of <body> to specify the event handler.
- 24. load.html <html> <head> <title>Event From Body</title> <scripttype="text/javascript" src="load.js"> </script> </head> <body onload="greeting();"> </body> </html> load.js function greeting() { alert("you are visiting a Home Page n" + "Loaded from body"); }
- 25. Handling Events fromButton Elements Buttons in a document provide a simple and effective way to collect input from the browser user. The most commonly used event created by button is click. Consider the following example of a set off radio buttons that enables the user to choose information about a specific airplane. The click event is used this example to trigger the call to alert, which presents a brief description of the selected airplane. In this example the event handler is registered by assigning its call to the onclick attribute off the radio button.
- 26. radio.html <html> <head><title> button element</title> <scripttype="text/javascript" src="radio.js"> </script> </head> <body> <h2>Airplane Discription</h2> <form id="myform"> Model 152<input type="radio" name="plane" value="152" onclick = "planechoice(152)"/><br/> Model 162<input type="radio" name="plane" value="162" onclick = "planechoice(162) /><br/> Model 172<input type="radio" name="plane" value="172" onclick = "planechoice(172)"/><br/> Model 182<input type="radio" name="plane" value="182" onclick = "planechoice(182)"/><br/> </form> </body> </html>
- 27. radio.js function planechoice(plane) { switch(plane) { case 152: alert("152Model a small two-palce airplane"); break; case 162: alert("162 Model a small four-place airplane"); break; case 172: alert("172 Model a larger of two-place airplane"); break; case 182: alert("182 Model a larger of four-place airplane"); break; default: alert("Error in javascript function plane choice"); break; } }
- 28. The DOM 2Event Model: The DOM 2 event model is more sophisticated and powerful than DOM 0. The real drawback of using the DOM 2 model is that Microsoft has yet to provide support for it in its browsers. The DOM 2 model is a modularized interface. One of the DOM 2 modules is Events, which includes several sub modules. The most commonly used are HTMLEvents and MouseEvents. The interfaces and events defined by these modules are as follows:
- 29. Event Propagation Theconnection between an event and the handler that deals with it is very simple in the DOM 0 event model. The event-handler connection for the DOM 2 event model is much more complicated. Briefly, what happens is as follows. An event object is created at a node in the document tree. For that event, that node is called the target node. Event creation causes a three-phase process to begin. The first of these phases is called the capturing phase. The event starts at the document root node and propagates down the tree to the target node. If there are any handlers for the event registered on any node encountered in this propagation, including the document root note, these handlers are checked to determine whether they are enabled. Any enabled handler for the event that is found during capturing is executed.
- 30. When theevent reaches the target node, the second phase takes place, in which the handlers registered for the event at the target node are executed. The second phase is similar to what happens with the DOM 0 event model. After execution of any appropriate handlers at the target node, the third phase begins. This is the bubbling phase, in which the event bubbles back up the document tree to the document root node. On this trip back up the tree, any handler registered for the event at any node on the way is executed (whether it is enabled or not).
- 31. Event Handler Registration •Handler registration in the DOM 2 event model is performed by the method addEventListener, which is defined in the EventTarget interface, which is implemented by all objects that descend from Document. The addEventListener method takes three parameters, The first of which is the name of the event as a string literal. For example, "mouseup" and "submit" would be legitimate first parameters. The second parameter is the handler function. This could be specified as the function code itself or as the name of a function that is defined elsewhere. The third parameter is a Boolean value that specifies whether the handler is enabled for calling during the capturing phase. If the value true is specified, the handler is enabled for the capturing phase. In fact, an enabled handler can only be called during capturing. If the value is false, the handler can be called either at the target node or on any node reached during bubbling.
- 32. For example,suppose we want to register the event handler chkName on the text element whose id is custName for the change event. The following call accomplishes this: document.custName.addEventListener( "change", chkName, false); In this case, we want the handler to be called at the target node, which is custName in this example, so we passed false as the third parameter. Sometimes it is convenient to have a temporary event handler. This can be done by registering the handler for the time when it is to be used, and then deleting that registration. The removeEventListener method deletes the registration of an event handler. This method takes the same parameters as addEventListener.
- 33. The navigator Object The navigator object indicates which browser is being used to view the XHTML document. The browser's name is stored in the appName property of the navigator object. The version of the browser is stored in the appVersion property of the navigator object. These properties allow the script to determine which browser is being used and to use processes appropriate to the browser. The following example illustrates the use of the navigator, In this case just to display the browser name and version number.
- 34. Navigator.html <html> <head> <title>navigator</title> <script type="text/javascript" src="navigate.js"> </script> </head> <bodyonload="navproperty()"> </body> </html> Navigator.js function navproperty() { alert("The browser is:" + navigator.appName + "n" + "The Version is" + navigator.appVersion ); }
- 35. DOM Tree Traversaland Modification There are many objects, properties, and methods associated with DOM 2 document representations. One collection of these is defined in the Element object and is used to traverse and modify the DOM tree structure of the document being displayed. In this section we briefly describe a few of the most useful of these. All of the properties and methods mentioned here are supported by both IE7 and FX2.
- 36. DOM Tree Traversal The parentNode property has the DOM address of the parent node of the node through which it is referenced. The previousSibling property has the DOM address of the previous sibling node of the node through which it is referenced. The nextSibling has the DOM address of the previous sibling node of the node through which it is referenced. The firstChild and lastChild properties have the DOM addresses of the first and last child nodes of the node through which they are referenced. The nodeType property has the type of the node through which it is referenced.
- 37. DOM Tree Modification The following methods allow JavaScript code to modify an existing DOM tree structure. The insertBefore(newChild, refChild) places the newChild node before the refChild node. The replaceChild(newChild, oldChild) method replaces the oldChild with the newChild node. The removeChild(oldChild) method removes the specified node from the DOM structure. The appendChild(newChild) method adds the given node to the end of the list of siblings of the node through which it is called.