Xah's DHTML Tutorial

Xah Lee, 2005-06

This page is a collection of examples and short turorials of JavaScript and DHTML technologies. These are especially useful if you are a professional programer but are not familiar with DHTML technologies and wish a quick, practical introduction.

JavaScript Language Overview

• Embedding JavaScript Code In HTML
• A example of generating page content
• Data Types and Operators
• Basic Flow Control: if, while, for...
• Defining A Function
• JavaScript Arrays
• JavaScript Object
• DOM (Document Object Model)
• General References and Web Tech Articles

Simple JavaScript Examples

• Factorial With Recursion (JS)
• Print Current Time (JS)
• FORM: goto a url in new window (JS+DOM)
• A Event Example
• Image Rollover (JS+DOM)

• Events (Intro to GUI programing)

Manipulating DOM

• Add HTML Content with JavaScript
• Changing HTML Content with JavaScript
• Changing a Element's Style with JavaScript

CSS Study

• What's New in CSS2

Characters and Symbols

• About Characters and Character Encoding in HTML
• The Journey of a Foreign Character thru Internet
• Common Fonts on Both Windows and Mac
• The Webdings Font

Formating and Visual Display

• Text Wrapping (CSS2)
• Multiple Panes (HTML Frames)
• Window Inside Window (IFRAME)

Page Layout

• Tableless Layout with CSS
• Tabular Formating and Page Layout
• Tabular Formating with CSS
• CSS Layout and Layers
• Fixing Widgets Relative To Window (CSS)
• Implementing Tabs in Web Design
• Centering using CSS

Graphical User Interface Elements

• Image Maps (HTML)
• Pop-up balloon (JS/CSS)
• Window Popup (JS)

Animations and Autoupdates

• Browser Auto Refresh
• Scrolling Text and Images (HTML, marquee)
• Animated Moving Block

Graphical User Input Elements

• Buttons, Checkboxes, Menus (HTML form)
• Instant Field Input Alert (JS)
• Input Field Validation (JS)

• Check if Cookie is Enabled

• Dynamic User Interface (with XMLHTTP)

Oddities and Bugs

• A FireFox problem: Linebreak After Tag
• CSS Example: Width By ex

Misc or Unsorted

• RSS Atom Example
• Emacs and HTML Tips
• Batch Check HTML File Size
• Content Management Shootout 2006 (essay)

Download this tutorial

Download this tutorial for offline reading: xah_dhtml_tutorial.tar.gz.

This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License↗.