DHTML - Introduction

Introduction to DHTML, the DOM, JS review

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

• 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– <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 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 complicated 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

– SEO problems: hard to search

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

• 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 type="text/javascript">

function doSomething (objectID) {

var foo=document.getElementById(objectID);

foo.property=somethingNew;

}</script> then <div id="fred" onClick="doSomething('fred');">

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"/>

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.

• 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– <img id="fred" onmouseover="function();" />

• See list on schedule page

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

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

• Move demo

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)

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

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)

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