Writing Friendly Code- JavaScript | WebReference

Writing Friendly Code- JavaScript

home / web / dev / friendly

Writing Friendly Code    

Part 1. About the JavaScript:

This script's job is to present the screen views and handle events for a series of Web newsletters. The newsletters are the product of various authors who prepare the content for each issue from an HTML template. They can cut and paste or type directly into the template. 

The template itself is pretty simple - it is mostly a column of empty<div> containers. Individual "pages" go between the divs' open and close tags. The divs can include anything any Web page can use: objects and images, forms and tables - even more divs. The only restrictions that need to be placed on the authors are the editorial and design guidelines. 

The content changes from issue to issue, but the structure is consistent. The visitor sees it as a screen sized "magazine," with consistently placed option and navigational controls. The target clients would use either Navigator 4 or IE 4 or 5 on Windows and Mac machines, but you could read the output on an old ASCII word processor, if you had to.

Without script support you get some humongous long pages, but they are clean and easy to read. Internal bookmarks help the unscripted get around. The target clients can rest their scrollbars - new content redraws on the screen as if you were turning pages. 

Each issue is contained complete in the document you first download. There are links to regular features, including a discussion forum, that reside elsewhere, but the entire current issue is right there. 

I've gone into detail about the structure and appearance of  this Web magazine because that is what the script has to work with. The major elements are the positioned <div> containers that hold the individual "pages" and the navigation controls. The major events involve navigating the pages. If we can call the <div> elements "objects," and the event handlers "methods," we have just defined the objects and methods for our script.  Nothing left to do now but the details...

Oh yeah - to make it a bit more interesting, our script doesn't know in advance how many pages a particular document is going to have. It may have five or fifty; the script is going to have to figure out how to present it on the client's display. And one more feature - in addition to a small base of informative messages that are included to help out the new user, the magazine writers want to be able to include their own messages, like pop up footnotes, in their articles. No sweat. 

There is a lot of detail in the sections describing the script and the stylesheet that I am using to illustrate this article, but don't lose sight of my premise - you don't have to be bound to any technology. 

You can write code that is cutting edge in every way, that uses the latest technologies and makes your Web sites a joy to interact with, only to find next year, or next month, you have to start all over because the new cutting edge wasn't in your calculations. By keeping the HTML clean, and keeping application-specific code in separate modules, you can give your sites a long life with a minimum of fuss and maintenance.

On to the code.

Think Global 

Comments are welcome


Created: Dec. 2, 1999
Revised: Dec. 7, 1999

URL: http://webreference.com/dev/friendly/