Introduction to JavaScript + CSS + DOM Magic

(edited for the web)

Ever since graphical web browsers were unleashed, the World Wide Web has evolved in leaps and bounds. But arguably, the last 2 to 3 years have been the most exciting and yet frustrating period of time to be a web designer.

Since the introduction of graphical web browsers , we could stick to programming in plain old HTML and tweaking our GIFs and JPEGs. Now, however, even pure designers must deal with a lot more. We are now presented with a bewildering array of possibilities and technologies. Recent advances in browser technology and increasing demands from web users and developers have made many "tried and true" authoring methods, if not obsolete, then on their way to becoming so. Indeed, it's a challenging time for web designers and developers alike.

The foundation of any good web page is well-formed HTML or XHTML markup. Making web pages come to life are Cascading Style Sheets (CSS) for visual presentation and JavaScript for dynamism, and the glue that ties everything together is the Document Object Model (DOM). These are the core client-side technologies (the things that work in the browser, rather than on the server) of the World Wide Web.

This book is filled with practical examples of ways to use these technologies on real web sites. We've placed a great emphasis on showing you exactly how CSS,the DOM and JavaScript are used together. If you've been confused and even intimidated by all of these technologies, hopefully this book will help to clear some of that confusion, and give you the confidence to enhance your web sites and your skills. My goal is to get you to regard CSS, JavaScript and the DOM as tools that enhance your creativity and range as a web designer.

Why do it Yourself?

With the availability of visual editors, such as Macromedia Dreamweaver and Adobe GoLive, for creating web sites, you may be wondering why you should bother to create your own scripts, not to mention your own HTML or XHTML markup. Visual editors are a wonderful tool, and can greatly speed up your creation process.

However, relying solely on cut and paste scripts and the like puts a creative barrier between you and your creation. When you must rely on a ready-made script to accomplish something, you are forced to use the method chosen by the author of the script. When you know how to create or at least modify a script on your own, you can adapt and change things to suit your needs.

When it comes to CSS, you must create a unique stylesheet for your particular site or page. You can't simply copy someone else's stylesheet without knowing the rules.

A solid knowledge of the rules and syntax of both CSS and JavaScript, and most importantly of the way they work together, is essential to fully master the art of web page creation. It will also help you to use the visual editors more effectively.

Who I Am

I'm not a professional full-time writer. I design and build web sites for a living, and am also hired by other companies to help them implement these web technologies on web sites or in web-based applications in a practical, workable way. My background is in print design, so I'm very aware of the need for visual feedback and control that is a characteristic of many designers. While I always keep an eye on emerging technologies, I'm also always aware of the pressures of deadlines and the demands of clients. I hope that my experiences and battle scars will help you in your every day efforts to turn out web sites that are visually pleasing and functional.

Who You Are

This book is written for the web designer and creative professional with a fairly good knowledge of HTML, design principles, and basic web site construction. Chances are you have already started looking into using CSS on your sites, and you may have hacked a few scripts that you've picked up here and there. This is not a book for total beginners, but it doesn't assume that you're a programming whiz either.

In keeping with the aim of the Magic series, this book takes a very visual and "hands-on" approach. If you've been daunted by the more detailed, yet non-visual approach of most books about CSS, JavaScript and the DOM, or if you have been confused about how they actually work together on "real" web pages, then this book is for you.

How To Use This Book

This book is divided into sections. The projects in each section can stand on their own, but they are also presented in a way so that the principles and methods introduced in one are built on in subsequent chapters. If you are unsure about any of the subjects covered, you'll get the most out of the book by making your way systematically through the chapters. Take your time working on the projects, and play around with them until you understand what's going on.

If you are more experienced, you can skip around in the book. For example, if you already know about the importance of correct, well-formed HTML markup, skip the HTML/XHTML section of Chapter 1; if you can do basic JavaScript rollovers and can control framesets and windows in your sleep, skip Part 2, Basic JavaScript. You can also use this book like a cookbook to pick up quick solutions to urgent problems.

What's in This Book

This book is broken down into the following parts:

Part 1: Real-Life CSS. In this section, we start with the foundation: valid, well-formed HTML/XHTML markup. Then, we show you how to use CSS on several levels, from basic text appearance control to CSS-P (using CSS for positioning and layout).
Part 2: JavaScript Level 1: Basic JavaScript. In this section, we cover the page-enhancing JavaScript that works in all JavaScript-capable browsers. Here you will find scripts for image swapping (aka rollovers), dealing with frames, and controlling browser windows.
Part 3: JavaScript Level 2: Dynamic HTML. These scripts work in 4.x and later versions of Microsoft Internet Explorer and Netscape Navigator/Communicator. It's the kind of JavaScript which is often called DHTML. We will tackle the different Document Object Models for the various browsers, browser sniffing and script branching methods, and discuss some "best practice" things as we implement many popular dynamic methods such as scrolling "windows", popup text, dropdown menus, and more.
Part 4: JavaScript Level 3: The latest DOM methods. The latest DOM methods. In this section, we'll cover just a few of the exciting scripting possibilities of the newest browsers that support the Document Object Model recommended by the World Wide Web Consortium, aka the W3C DOM. These scripts work in version 5 and later versions of Microsoft Internet Explorer, Netscape 6.x and Mozilla. We'll also discuss some transitional strategies, as you update your site construction methods to take advantage of the most current browsers while accommodating older browsers.
The CD. The companion CD for this book contains a wealth of extra materials.

Assumptions as I wrote this Book

You already have a good working knowledge of HTML. You should have at least built a few web pages before you try to tackle this book.
You're not necessarily a programmer by trade. I don't assume that you have had a lot of programming experience. It's a big plus if you have done some programming, especially for the object-oriented projects in this book.
You know what good design principles are. This book can make you a better designer by increasing your understanding of the tools you use, but it won't prevent you from making awful looking pages either. Ultimately, to make good web pages you have to have a good sense of what visual design is.
You want real projects for real web sites. Most of the projects in this book have a practical application, and they can be adapted for use right away on real web pages.
You're interested in creating web sites that work cross-browser and with multiple platforms Ð within reason. If you've created even just one web site you know that one of the big headaches of web design is dealing with cross-browser incompatibilities. Throughout the book, you'll see alerts for particular problems, especially those associated with version 4 browsers. In addition, the focus of this book is on methods that work on at least all the latest versions of the browsers from Netscape and Microsoft, on Windows, Mac and Unix/Linux. Therefore, there isn't much discussion of methods that work in only one browser or on one particular platform.
You're interested in learning about web standards, and coding for the browsers that support these standards. No book about web site creation can avoid the subject of web standards. There are two organizations that create standardized, open specifications for various web-related technologies. The main organization is the World Wide Web Consortium, or W3C. The W3C has created the specifications for markup (HTML/XHTML/XML), CSS, and the DOM among other things. The other organization of note is the ECMA, which has specified a standardized version of JavaScript/JScript called ECMAScript.

Up until fairly recently however, browser makers have simply incorporated their own versions of CSS, JavaScript (or JScript, in Microsoft-terms), and proprietary document object models. Even proprietary HTML markup has been introduced. Nothing is as frustrating as when the page you painstakingly created to work just so in one browser fails completely when viewed with another.

Recently, browser manufacturers have finally started to listen to the demands of people who create web sites to support a common set of specifications Ð or standards. The latest versions of Microsoft Internet Explorer for Windows and the Mac, as well as the latest incarnations of the Netscape browser, support the standard specifications created by the W3C for CSS Level 1 (and partial support for CSS Level 2), HTML 4.01/XHTML 1.0 markup (the currently recommended markup language is XHTML 1.0 Transitional), and DOM Level 1 (and partial support for DOM Level 2). These browsers also support a flavor of the latest version of ECMAScript-262.

One of the most important aims of this book is to actually show you what standards-compliant markup and CSS look like, and how a standardized DOM simplifies scripting tasks.

Browser support for standards is getting much better, but it's still not 100% - as you will see from the many browser-specific workarounds in this book. Another aim of this book is to, eliminate your cross-browser incompatibility headaches as much as possible.

To read the standards documents themselves, visit the W3C site as well as the ECMA site. You may also be interested in the activities of the Web Standards Organization, a group interested getting the browser manufacturers to support standards.

The Tools You'll Need for This Book

A good text editor. It's possible to write scripts and stylesheets with NotePad or SimpleText...but why torture yourself? Good programmer's text editors are inexpensive and will save you countless hours of extra work and headaches. The CD includes demo or Lite versions of several of the most popular text editors available for Windows and Mac. For this book, BBEdit on the Mac and Notepad Pro on Windows were used.
A graphics program. We've used Adobe Photoshop with Image Ready or Macromedia Fireworks to create the graphics in this book, but other programs can be used. Several hints about how to use these programs to their best advantage when creating dynamic web pages have been included too.
At least two of the latest versions of the most popular browsers. For the purposes of following most of the lessons and projects in this book, it's highly recommended that you work with the most current version of either Microsoft Internet Explorer (version 6 or later) or Netscape (version 6 or later). The most recent versions of both browsers are included on the CD. In addition, it's highly recommended that you download the latest stable version of Mozilla from the official Mozilla site. Netscape 6 is based on Mozilla, as are some other lesser known browsers.

The latest browsers adhere more strictly W3C recommended standards than older browsers do. I consider it best to become familiar with the way things should work, and then to worry about dealing with the bugs and workarounds necessary for older browsers. All the projects in this book were tested on Internet Explorer 5.0 and up on Windows and Mac, and Netscape 6 and Mozilla.

Fans of alternate browsers such as Opera and iCab may wonder why these browsers aren't included in the list of testing browsers. There are a couple of reasons for this: first, the number of people who use these alternate browsers is very small. Second, while both browsers offer a lot of promise, their support for all the W3C standards is not quite up to par Ð at least as of this writing. Opera for example offers excellent support for CSS, but not for the W3C DOM Ð which makes scripting for this browser rather difficult. The browser landscape is constantly changing however, so this may have already changed by the time you read this. Always test your pages in as many browsers as you can Ð concentrating on the browsers that your site visitors are using.
Your imagination. Programming can be as creative as visual design, though you'll have to use some other parts of your brain. Hopefully, you can take the concepts explained here and come up with your own creations.

To Top of Page