Help Your Web Coding
Writing JavaScript / DHTML

If learning the basics of JavaScript and CSS just whetted your appetite from more interactivity and functionality, read on.

This 6-lesson course will take you way past the fundamentals in Web coding. You'll learn how to code highly interactive and functional JavaScript and DHTML from scratch, creating floating navigation menus, browser detectors, animated text and image objects, dynamic content, slide shows, custom mouse pointers, and more.

Developed and instructed by experts in the field, the course will give you confidence in your coding skills and W3C compliance. Throughout, the focus is on creating useful scripts that will add life and user friendliness to your sites. The goal is to enable you to write your own scripts based on course concepts, putting you in complete control.

Note: Sessions Fundamentals of JavaScript and CSS Essentials courses (or equivalent experience) are a requirement for taking this class.

Instructor:
Ian Kelleigh is a designer who runs an award-winning tutorial Web site ... get bio

Course Developer:
Jason Cranford Teague is an information designer and author ... get bio

Assess and apply DHTML components, the document object model (DOM), and appropriate uses for DHTML technology.

Use Web standards methods and approaches for adding interactivity and functionality to the user experience.

Develop well-written and organized code, and effectively test and troubleshoot the results.

Create simple and complex objects and use event handlers to pass information from objects to functions.

Apply animation and other dynamic features to page objects based on user input.

Identify the characteristics of a user's screen, browser, and input devices and develop DHTML features that control the interface accordingly.

Manage page content dynamically over a complete site using an external JavaScript file.

Develop highly functional navigational structures and user-based controls including pop-up menus, slide shows, and sortable tables.

Outline:

LESSON 1 DHTML Basics What's DHTML? And who's DOM? In Lesson One, you'll learn the essential components of DHTML, including the all-important Document Object Model (DOM). You'll learn to create Web site objects and perform basic modifications to them using JavaScript functions and CSS attributes. In the exercise, you'll write your own code to modify site objects.

LESSON 2 Basic Dynamic Techniques With an understanding of objects under your belt, which could include any type of site content like text or graphics, you'll learn to perform dynamic functions on them in Lesson Two. From showing and hiding objects to making them move around the screen and respond to user clicks, you'll create ways for users to interact with your pages. You'll code your first fully interactive objects in the exercise.

LESSON 3 Learning about the Environment The more you know about your users, the more you can cater to them with customized features or content. In this lesson, you'll learn DHTML methods for detecting a user's browser window size, computer screen size, color depth, and other variables. You'll also explore detection of specific user events such as which mouse button was pressed or the location of a click. In the exercise, you'll create a page that detects user variables and changes properties accordingly.

LESSON 4 Dynamic Content What's a Web site without its content? Lesson Four focuses on dynamic ways to deliver content on a Web page, add or remove content easily, and allow users to quickly retrieve only the content they want. You'll even learn to present randomly generated content, like quotes or messages that change each time the page is refreshed. In Exercise Four, you'll begin a Web site for a travel company, working with content presentation.

LESSON 5 Navigation DHTML is clearly useful for so many site features, but it really shines when you're working with navigation. No longer are you confined to plain links or run-of-the-mill rollovers. In this lesson, you'll learn to create the collapsible bars, floating menus, slide shows, and other navigational schemes that users (and clients!) love. It's back to your travel company Web site for Exercise Five where you'll give it a highly interactive and functional navigation treatment.

LESSON 6 Controls To wrap up the course, this lesson focuses on some more bells and whistles for your DHTML sites including custom-designed scroll bars and mouse pointers and sortable tables. You'll even create a drag-and-drop interface where users can rearrange objects at will. In the last exercise, you'll finalize your travel company Web site by adding fun custom features for its users.