DHTML: Cross-browser Techniques

Since the introduction of AJAX, Dynamic HTML has once again gained popularity. Simply put, Dynamic HTML is the creation of Web pages structured with HTML, styled with Cascading Stylesheets and altered via JavaScript. Our DHTML: Cross-Browser Techniques class covers the fundamentals of CSS styled web pages whose styles are altered via basic JavaScript. JavaScript is covered only to the extent that it is used to achieve this purpose. Common DHTML techniques are examined and DHTML's dependence on the Document Object Model is addressed. The student will learn techniques for creating drop-down and slide-out menus, capturing user events and more. This class may be customized.

Class Objectives:

* Describe the component technologies of DHTML and understand the real-world difficulties of creating cross-browser DHTML-enabled Web pages
* Create dynamic images that change when the mouse pointer is placed over them or in sequence at timed intervals
* Define Document Object Model (DOM), describe the DOMs from both Navigator and Internet Explorer, and compare the two models to determine similarities and overlap
* Write a constructor function that defines the DHTML-enabling ActiveElement custom object
* Add methods to a custom object; describe the prototype-based inheritance model of JavaScript
* Add secondary methods to a custom object through linked-in libraries
* Move elements on the page by using methods of the custom ActiveElement object
* Add clipping and transition effects through methods of the ActiveElement object
* Scroll the content of elements on the page and dynamically load new content into those elements
* Get user input through mouse events
* Enable drag-and-drop functionality using mouse events
* Create slide-out and drop-down menus that are enabled by events; create auto-generating code
* Get user input through keyboard events
* Enhance HTML forms by selectively showing elements of a form and by creating tally-as-you-go forms

see less