DHTML - Dynamic HTML
Download as PPT, PDF0 likes1,412 views
The document discusses the Dynamic HTML Object Model which allows web authors to control the presentation of web pages by giving them access to all elements on pages. It is represented in an object hierarchy that can be retrieved and modified through scripting. Specific objects like the element, document, body, frames collection and their properties and uses are described. Cross-frame scripting using the frames collection is demonstrated. Finally, key objects and collections in the DHTML Object Model like window, document, body and their descriptions are summarized.
DHTML - Dynamic HTML
- 1. IPA 1st Semester, 2007-2008 Internet 1 Ch. 14 Dynamic HTML: Object Model and Collections [email protected]
- 2. 09/30/15 © Reem Al-Attas 2 Introduction Dynamic HTML Object Model Allows Web authors to control the presentation of their pages Gives them access to all the elements on their pages Web page Elements, forms, frames, tables Represented in an object hierarchy Scripting Retrieve and modify properties and attributes
- 3. 09/30/15 © Reem Al-Attas 3 Object Referencing The simplest way to reference an element is by using the element’s id attribute. The element is represented as an object XHTML attributes become properties that can be manipulated by scripting
- 4. 09/30/15 © Reem Al-Attas 4 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 13.1: reference.html --> 6 <!-- Object Model Introduction --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Object Model</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 function start() 15 { 16 alert( pText.innerText ); 17 pText.innerText = "Thanks for coming."; 18 } 19 // --> 20 </script> 21 22 </head> Outline
- 5. 09/30/15 © Reem Al-Attas 5 23 24 <body onload = "start()"> 25 <p id = "pText">Welcome to our Web page!</p> 26 </body> 27 </html> Outline
- 6. 09/30/15 © Reem Al-Attas 6 Dynamic Styles Element’s style can be changed dynamically Dynamic HTML Object Model also allows you to change the class attribute
- 7. 09/30/15 © Reem Al-Attas 7 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 13.4: dynamicstyle.html --> 6 <!-- Dynamic Styles --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Object Model</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 function start() 15 { 16 var inputColor = prompt( 17 "Enter a color name for the " + 18 "background of this page", "" ); 19 document.body.style.backgroundColor = inputColor; 20 } 21 // --> 22 </script> 23 </head> Outline
- 8. 09/30/15 © Reem Al-Attas 8 24 25 <body onload = "start()"> 26 <p>Welcome to our Web site!</p> 27 </body> 28 </html> Outline
- 9. 09/30/15 © Reem Al-Attas 9 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 13.5: dynamicstyle2.html --> 6 <!-- More Dynamic Styles --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Object Model</title> 11 12 <style type = "text/css"> 13 14 .bigText { font-size: 3em; 15 font-weight: bold } 16 17 .smallText { font-size: .75em } 18 19 </style> 20 Outline
- 10. 09/30/15 © Reem Al-Attas 10 21 <script type = "text/javascript"> 22 <!-- 23 function start() 24 { 25 var inputClass = prompt( 26 "Enter a className for the text " + 27 "(bigText or smallText)", "" ); 28 pText.className = inputClass; 29 } 30 // --> 31 </script> 32 </head> 33 34 <body onload = "start()"> 35 <p id = "pText">Welcome to our Web site!</p> 36 </body> 37 </html> Outline
- 11. 09/30/15 © Reem Al-Attas 11
- 12. 09/30/15 © Reem Al-Attas 12 Using the frames Collection Referencing elements and objects in different frames by using the frames collection
- 13. 09/30/15 © Reem Al-Attas 13 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4 5 <!-- Fig. 13.7: index.html --> 6 <!-- Using the frames collection --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Frames collection</title> 11 </head> 12 13 <frameset rows = "100, *"> 14 <frame src = "top.html" name = "upper" /> 15 <frame src = "" name = "lower" /> 16 </frameset> 17 18 </html> Outline
- 14. 09/30/15 © Reem Al-Attas 14 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 13.8: top.html --> 6 <!-- Cross-frame scripting --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>The frames collection</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 function start() 15 { 16 var text = prompt( "What is your name?", "" ); 17 parent.frames( "lower" ).document.write( 18 "<h1>Hello, " + text + "</h1>" ); 19 } 20 // --> 21 </script> 22 </head> 23 Outline
- 15. 09/30/15 © Reem Al-Attas 15 24 <body onload = "start()"> 25 <h1>Cross-frame scripting!</h1> 26 </body> 27 </html> Outline
- 16. 09/30/15 © Reem Al-Attas 16
- 17. 09/30/15 © Reem Al-Attas 17 Summary of the DHTML Object Model applets all anchors embeds forms filters images links plugins styleSheets scripts frames plugins collection body screen document history navigator location event document document object window Key Fig. 13.10 DHTML Object Model.
- 18. 09/30/15 © Reem Al-Attas 18 Summary of the DHTML Object Model Object or collection Description Objects window Represents the browser window and provides access to the document object contained in the window. If the window contains frames a separate window object is created automatically for each frame, to provide access to the document rendered in the frame. Frames are considered to be subwindows in the browser. document Represents the XHTML document rendered in a window. The document object provides access to every element in the XHTML document and allows dynamic modification of the XHTML document. body Provides access to the body element of an XHTML document. history Keeps track of the sites visited by the browser user. The object provides a script programmer with the ability to move forward and backward through the visited sites, but for security reasons does not allow the actual site URLs to be manipulated. navigator Contains information about the Web browser, such as the name of the browser, the version of the browser, the operating system on which the browser is running and other information that can help a script writer customize the user’s browsing experience. location Contains the URL of the rendered document. When this object is set to a new URL, the browser immediately switches (navigates) to the new location. event Can be used in an event handler to obtain information about the event that occurred (e.g., the mouse x-y coordinates during a mouse event). screen Contains information about the computer screen for the computer on which the browser is running. Information such as the width and height of the screen in pixels can be used to determine the size at which elements should be rendered in a Web page. Fig. 13.11 Objects in the Internet Explorer 6 Object Model.
- 19. 09/30/15 © Reem Al-Attas 19 Summary of the DHTML Object Model Object or collection Description Collections all Many objects have an all collection that provides access to every element contained in the object. For example, the body object’s all collection provides access to every element in the body element of an XHTML document. anchors Collection contains all the anchor elements (a) that have a name or id attribute. The elements appear in the collection in the order they were defined in the XHTML document. applets Contains all the applet elements in the XHTML document. Currently, the most common applet elements are Java applets. embeds Contains all the embed elements in the XHTML document. forms Contains all the form elements in the XHTML document. The elements appear in the collection in the order they were defined in the XHTML document. frames Contains window objects that represent each frame in the browser window. Each frame is treated as its own subwindow. images Contains all the img elements in the XHTML document. The elements appear in the collection in the order they were defined in the XHTML document. links Contains all the anchor elements (a) with an href property. This collection also contains all the area elements that represent links in an image map. Fig. 13.11 Objects in the Internet Explorer 6 Object Model.
- 20. 09/30/15 © Reem Al-Attas 20 Summary of the DHTML Object Model Object or collection Description plugins Like the embeds collection, this collection contains all the embed elements in the XHTML document. scripts Contains all the script elements in the XHTML document. styleSheets Contains styleSheet objects that represent each style element in the XHTML document and each style sheet included in the XHTML document via link. Fig. 13.11 Objects in the Internet Explorer 6 Object Model.
- 21. 09/30/15 © Reem Al-Attas 21 Assignment 10 1) Exercise # 13.7. Due Date for A # 10: Next Monday before your lecture.