DHTML - Introduction Chapter Introduction to DHTML, the DOM, JS review

What is DHTML? Dynamic HTML are web pages which 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+XHTML=DHTML

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.

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.

Browser Specific DHTML uses the Document Object Model as the basis for changing the appearance. –window.document.img.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 DHTML 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()

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

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

An Alternative Flash –It is consistent –It is ubiquitous (requires a plug-in) –Attractive and small BUT

Flash –Can be difficult to learn and create –Has a plug-in phobia –Has extensive usability which requires great responsibility on the part of the designer. Leads to a lack of standard Web conventions. –May not be small—requiring extensive downloads

So—which to use Need to consider –Audience’s technology –Money budgeted for the project –Need for sound, animation or other media Usually Flash –Presentation of large amounts of text Usually DHTML –Development and maintenance time DHTML is usually faster to create –Audience’s expectations

Document Object Model – the DOM Address through which you locate objects on the HTML page and send it a message. Can be referenced and changed through JavaScript. Most objects in a page have names and/or ids.: –getElementById() window.document.img.fredddy –

Create an object in CSS Define a style in the stylesheet with the id #name { } 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.

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.

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 – See list on schedule page

Getting elements Recall that an element is content. 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

Let’s look at some of the code to get an element and move it. Chapter 12.4

Passing events Event detection varies by browser –evt object is understood by IE –window.event object is W3C standard Note that Teague says he normally uses getElementById plus event handlers

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 = " }

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

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)

Skim chapters 14, 15 to learn what else can be detected –position –z-index –event properties (event.type)