1. Introduction to DHTML, the DOM, JS review
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.layers Old 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) {
var foo=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 to getElementById()
You will see getElementsByTagName (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 = " }

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)