Transcript Slide 1
DHTML: Working with Objects Creating a Dynamic Web Page Introduction to DHTML • Developers began to look for ways to create dynamic pages • New approach, in which the HTML code itself supported dynamic elements • Known collectively as dynamic HTML, or DHTML Introduction to DHTML • Interaction of three aspects – A page’s HTML/XHTML code – A style sheet that defines the styles used in the page – A script to control the behavior of elements on the page Introduction to DHTML • Some uses – – – – Animated text Pop-up menus Rollovers Web pages that retrieve their content from external data sources – Elements that can be dragged and dropped Understanding JavaScript Objects • JavaScript is an object-based language • An object is any item associated with a Web page or Web browser • Each object has – Properties – Methods Exploring the Document Object Model • The organized structure of objects and events is called the document object model, or DOM • Every object related to documents or to browsers should be part of the document object model • In practice, browsers differ in the objects that their document object models support Exploring the Document Object Model • Development of a Common DOM – Basic model, or DOM Level 0 – Supported browser window, Web document, and the browser itself – Development followed two paths: one adopted by Netscape and the other adopted by Internet Explorer – Internet Explorer DOM also provided for capturing events Exploring the Document Object Model • Development of a Common DOM – World Wide Web Consortium (W3C) stepped in to develop specifications for a common document object model • DOM Level 1 • DOM Level 2 • DOM Level 3 Exploring the Document Object Model • Development of a Common DOM – Within each DOM, particular features may not be supported by every browser – Code should be compatible with • Netscape 4 • Internet Explorer 5 • W3C DOM Level 1 and 2 Exploring the Document Object Model • The document tree Referencing Objects • A DOM can be used by any scripting language including JavaScript and Java Referencing Objects • Object Names – Each object is identified by an object name Referencing Objects • Object Names – General form is object1.object2.object3… – To reference the history you would use the form window.history – For the body, you would use document.body Referencing Objects • Working with Object Collections – Objects are organized into arrays called object collections document.collection Referencing Objects • Working with Object Collections Referencing Objects • Using document.all and document.getElementById – Not all elements are associated with an object collection – Can reference these objects using their id values document.all[“id”] document.all.id document.getElementById(“id”) Referencing Objects • Referencing Tags – Internet Explorer DOM document.all.tags(tag) document.all.tags(tag) – W3C DOMs document.getElementsbyTagName(“tag”) document.getElementsbyTagName(“p”)[0] Working with Object Properties • The syntax for setting the value of an object property is object.property = expression • Example document.title = “XHTML update” Working with Object Properties Working with Object Properties • Some properties are read-only Creating a Cross-Browser Web Site • You can create this kind of code, known as cross-browser code, using two different approaches: browser detection or object detection Creating a Cross-Browser Web Site • Using Browser Detection – Using browser detection, your code determines which browser (and browser version) a user is running navigator.appName – Most browser detection scripts – commonly known as browser sniffers – use this property to extract information about the version number navigator.uerAgent Creating a Cross-Browser Web Site • Using Object Detection – With object detection, you determine which document object model a browser supports var NS4DOM = document.layers ? true:false; var IEDOM = document.all ? true:false; var W3CDOM = document.getElementByID ? true:false; Creating a Cross-Browser Web Site • Employing Cross-Browser Strategies – One strategy, called page branching, creates separate pages for each browser along with an initial page – A script determines the capabilities of the user’s browser and automatically loads the appropriate page Creating a Cross-Browser Web Site • Employing Cross-Browser Strategies Working with the style Object • The syntax for applying a style is object.style.attribute = value