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