1. DHTML - Introduction Introduction to DHTML, the DOM, JS review

2. What is DHTML? • Dynamic HTML is web pages that can interact with the user. • DHTML uses web pages created with CSS and a scripting language to make changes to the pages. • This technology is the marriage of existing components:CSS+JavaScript+DOM+HTML=DHTML

3. DHTML attempts to overcome limitations of Web pages designed with common HTML. • The resulting pages act and react to a user without continually returning to the server for more data. • All of the code for the site is placed on the client-side.

4. DHTML does not require plug-ins • In most cases, it works across many browsers. Be wary of Microsoft's ActiveX version of DHTML. • It helps to enhance the interactivity and visual appeal of the page.

5. Browser Specific • DHTML uses the Document Object Model as the basis for changing the appearance. • window.document.img.freddy • <img src="fred.gif" id="freddy"/> • You need to check on the version of the DOM which the browser implements. Old Netscape-based tested for document.layersOld IE tested for document.all (see tractor demo on schedule) • You may need to check the user’s browser before allowing the DHTML to continue, but not if you use standards-based DHTML: • Key to that getElementById()getElementsByTagName()

6. Advantages • Support by most browsers • Small file size • No plug-ins • Easy to learn • Fast development • Faster Web experience • No Java programming required

7. Disadvantages • Browser and OS incompatibilities • Picky coding of scripting language and CSS • Buggy Browsers

8. This example shows the <script> element (type= not needed in HTML5), a function that sets a variable, passes it an argument, and changes a property <script> function doSomething (objectID) { varfoo=document.getElementById(objectID); foo.property=somethingNew; }</script> then <div id="fred" onClick="doSomething('fred');">

9. Document Object Model – the DOM • Address through which you locate objects on the HTML page and send it a message. Parent objects contain children, etc. e.g. window.document.someid • Can be referenced and changed through JavaScript. • Most objects in a page have names and/or ids.: • getElementById()window.document.img.fredddy • <img src="fred.gif" id="fredddy"/>

10. Create an object in CSS • Define a style in the stylesheet with the id • #freddy { } • When you wish to reference the object in the body of the document, use the id attribute on the tag and give it the name you defined in the stylesheet.

11. Now you may use event handlers for the HTML tag, to cause changes in the HTML object. • You may reference the object by using the name you defined in the id attribute. • The attribute will ONLY change when the event occurs. • If there are multiple events you wish to execute on the same event-handler, you need to separate the events by semicolons.

12. Events • Recall that JavaScript acts through • event + object = (re)action • Events are things like "user moves mouse over image" • Event handlers are the XHTML attributes for that action • <img id="fred" onmouseover="function();" /> • See list on schedule page

13. Getting elements • Recall that an element is <tag>content</tag>. • In addition togetElementById() • You will seegetElementsByTagName(note it's plural) used in combination with the getAttribute() method. Methods are pre-existing JavaScript functions

14. Let’s look at some of the code to get an element and move it. • Move demo

15. Passing events • Event detection varies by browser • evt object is understood by IE • window.event object is W3C standard • Most use getElementById plus event handlers; also getElementsByTagName (Zeldman CH. 15)

16. Feature sensing • See if browser understands a method such as innerHeight • if {window.innerHeight) {do something} • Also used to go to another page in non-standard DOM: • if (!document.getElementById) { window.location = "http://www.cnn.com" }

17. Some things to detect • Browser detection is alternate to feature detection • Note that browser object is navigator • navigator.userAgent • Finding Screen Dimension • Finding the number of colors • Finding Browser Window’s Dimensions • Finding the Visible Page Dimensions • Finding the Page’s Location and Title • Finding the Page’s Scroll Position

18. Finding an Object’s Dimensions • Finding an Object’s Top and Left Positions • Finding an Object’s Right and Bottom Positions • Finding an Object’s 3-D position • Finding an Object’s Visibility State • Finding an Object’s Visible Area (clip settings)

19. What else can be detected • position • z-index • event properties (event.type)