Transcript Slide 1
Working with Objects Creating a Dynamic Web Page Introduction • 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 (DHTML), or now incorporated in HTML5 Introduction cont. • 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 cont. • 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 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 – Within each DOM, particular features may not be supported by every browser 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 • Using W3C DOMs – Can reference objects using their id or name values, document.getElementsbyId(“id”) document.getElementsbyTagName(“tag”) Working with Object Properties • The syntax for setting the value of an object content,property, and attribute is – document.getElementsByID(“id”).innerHTML= “value” – document.getElementsByID(“id”).style.property= “value” – document.getElementById(id).attribute= “new value” • Example – document.getElementsByID(“p”).innerHTML= “new text” – document.getElementsByID(“p”).color= “blue” – document.getElementById(“image”).src= “test.jpg” Working with the style Object • The syntax for applying a style is object.style.attribute = value more examples: 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 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