DHTML Introduction to DHTML the DOM JS review

DHTML - 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+Java. Script+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 Active. X 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. 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 get. Element. By. Id() get. Elements. By. Tag. Name()

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

• This example shows the <script> element (type= not needed in HTML 5), a function that sets a variable, passes it an argument, and changes a property <script> function do. Something (object. ID) { var foo=document. get. Element. By. Id(object. ID); foo. property=something. New; } </script> then <div id="fred" on. Click="do. Something('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 Java. Script. • Most objects in a page have names and/or ids. : – get. Element. By. Id() 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 Java. Script 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 get. Element. By. Id() • You will see get. Elements. By. Tag. Name (note it's plural) used in combination with the get. Attribute() method. Methods are pre-existing Java. Script 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 W 3 C standard • Most use get. Element. By. Id plus event handlers; also get. Elements. By. Tag. Name (Zeldman CH. 15)

Feature sensing • See if browser understands a method such as inner. Height – if {window. inner. Height) {do something} • Also used to go to another page in nonstandard DOM: – if (!document. get. Element. By. Id) { window. location = "http: //www. cnn. com" }

Some things to detect • Browser detection is alternate to feature detection • Note that browser object is navigator – navigator. user. Agent • • • 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)