| home / dhtml /

DHTML Prerequisites

Principles of Programming, HTML I and II, CSS, JavaScript I, and Applied JavaScript or equivalents

Required Books

JavaScript: The Definitive Guide
by David Flanagan
O'Reilly and Associates, Publishers

Dynamic HTML: The Definitive Reference
by Danny Goodman
O'Reilly and Associates, Publishers

Recommended Book

Cascading Style Sheets: The Definitive Guide
by Eric A. Meyer
O'Reilly and Associates, Publishers

Buy these books now at my bookstore.

Michael Masumoto's BookstoreIn Association with Amazon.com

Course Description

This course has changed substantially from the MSP catalog description. You are expected to have a facility with CSS-P before entering this class. The DHTML course is, essentially, an extension of Applied JavaScript, in as much as we will be using stepped exercises to develop advanced JavaScript programming skills. We will study the DOM, its implementations in Netscape, IE, and Netscape 6, and learn how to piece HTML, CSS, JavaScript, and the DOM together to create working programs and simple applications. I have created an object library which we will use to simplify applications development. We will be creating several small programs out of DHTML pieces. Time permitting, we will also explore the connection between Flash and JavaScript/DHTML.

This class is the culmination of the JavaScript classes, and may be used for substantive portfolio development. Be prepared to WORK.

Course Requirements

DHTML is graded on a CR/NC (credit/no-credit) basis. For a passing grade, students are required to:

  • Attend 4 out of 6 classes
  • Deliver 1 out of 2 assigned mini-projects
  • Deliver a final project

I strongly urge students to attend every class, as we are going to be swamped with material.

The final project may be a portion of a portfolio project, a single independant work, or a smaller exercise assigned by the teacher.

Complete DHTML Student Disk

Includes Object Library, DHTML Examples Folder, and standard Graphics folder, along with complete CSS student disk.

Object Library

mmmObjectLib.js and Instructions for Use -- Allows you to create DynamicLayer objects, cross-browser-compatible DIV layers which hide, show, animate (primitive), set z-index, write text/HTML to layers, and image-switch. Compatible with Netscape 4, IE 4 & 5, and Netscape 6 (Mozilla build M16+).

DHTML Examples Folder

Selected samples from personal and in-class projects, mostly quite simple.

Standard Graphics Folder

Class Projects and Examples

Class Project 01

Below are the two finished versions of project 01. DO NOT REVIEW THE CODE! These are posted solely to act as models for your first project.

Class Project 02 -- Expanding Menu

Below is the finished version of Project 02. Please don't review the code until you have finished coding the project for yourself! Note: Graphics are just placeholders; graphics of any size and shape may be used in place of the letters displayed.

Class Project 03 -- Student's Choice

The third project is an independant project; student's may choose anything they wish. After everything we have learned in Applied JavaScript and DHTML, it is time to apply that knowledge to a more involved programming piece.

Ideas:

  • Expand the Advanced Menu Planner from the Applied JavaScript class, so that the new window pops up a dynamic html page which gives contextual information regarding cooking and recipe information. The user should be able to make selections on this new page which force the page to rewrite the menu choices, updating the contextual help system.
  • Recreate a two player Monopoly game. Don't worry if you can't complete the entire project; just see if you can make it possible for the players to move around the board, purchase properties, and build houses/hotels.
  • Create a DHTML hangman game.
  • Create a contextual help system for your own website or for a work project, with dynamically changing layout and multiple screens.
  • If you are enamoured of rollover pulldown menus, go ahead and build one. Make certain that it degrades gracefully on older browsers.
  • Create a simple slide show, or animated menu items. If you decide to create animated menu items, remember that you'll need to slide pieces out from BEHIND other layers.
  • Create a DHTML cribbage set, with cards that deal and a scoring system.
  • Recreate my trading game, the Archipelago of Greed, which is based on Gazillionnaire; I can give you guidance, if you choose this option.
  • Recreate your favorite video game from the 1980's, such as Asteroids, Digdug, or Pacman.
  • Make a DHTML catalog of doll and doll clothes; make the clothing available in multiple fabrics and textures. Create a shopping cart for your purchases.
  • Using the Expanding Menu from project 02, enhance the front page navigation for your personal website.
  • Choose your favorite board game, and recreate it in a DHTML piece.
  • Create a faux search engine, which analyzes keywords based on user input, and delivers dynamically generated lists of CDs or other content which match the chosen keywords. When the user clicks on the links for the CDs, generate HTML pages in a new window which show the item and a review; include some sort of RealAudio test files to preview the CD.
  • Go ahead and do Drag-and-Drop, if you feel like a masochist.
  • Create a DHTML Pong game, with scoring and collision detection.
  • Or choose one of your own!

Flash/DHTML Demo

Requires Flash 5 Plug-in. Operates in all DHTML-enabled versions of Netscape Communicator and Internet Explorer EXCEPT Internet Explorer for Macintosh.

Examples from April 17 and 24, 2001

Examples from April 10, 2001

Examples from April 3, 2001

Example from March 20, 2001

Example from November 15, 2000

Examples from July 21, 2000

Example Program from July 28, 2000

Note: All .sit and .zip archives were created using Stuff-It Deluxe 5.5. Version 5 .sit archives require the latest version of Stuff-It Expander, the standard Macintosh decompression utility, available for both Mac and PC. You can pick it up free at http://www.aladdinsys.com/expander/index.html.

Last Updated: April 24, 2001