292 HOW: The Joy of JavaScript: JavaScript Basics for Web Designers

■JavaScript for the World Wide Web: Visual Quickstart Guide, Third Edition, by Tom Negrino and Dori Smith (Peachpit Press: 1999) provides a series of quick exercises, complete with screenshots, that demystify JavaScript while explaining how to perform useful functions and avoid common mistakes. From plug-in testing to creating dynamic menus or from controlling frames to baking your first

“cookie,” pretty much everything you need to know can be found here. The scripts also are freely available at the authors’ www.javascriptworld.com site.

Speaking of free online resources, you also can learn much about JavaScript by studying Thau’s JavaScript tutorial at Webmonkey (http:// hotwired.lycos.com/webmonkey/javascript/tutorials/tutorial1.html). Give yourself at least two days to go through all the exercises in this five-part tutorial. The JavaScript School at www.w3schools.com/js/ is another great place to learn. Classic and recent JavaScript/DOM articles may be found at http://www.javascript.about.com/.

We highly recommend that you buy these books and study these free online tutorials. We also recommend that you take it slow, breathe deeply, and avoid freaking yourself out over this stuff.

Don’t Panic!

As a web designer, you will not normally be expected to do advanced JavaScript and DOM programming. Instead, your knowledge of what JavaScript is and what it can be used for will enable you to work more closely with team members to create engaging websites.

But don’t think you’re getting off scot-free, either.

JAVASCRIPT BASICS FOR WEB DESIGNERS

As a professional web designer, you really should be able to use JavaScript to do simple things such as replacing meaningless URLs with text messages as a means of extending the site’s branding. (And ducking when some visitors complain about it.)

Taking Your Talent to the Web

293

You should be able to create rollovers (image swaps) that help your visitors experience the site as a responsive, interactive entity. (Yes, by hand.)

You should know how to open new browser windows (when doing so serves a purpose), use browser detection to solve compatibility problems, and enhance your site’s navigation through JavaScript’s ability to manipulate simple HTML <FORM> elements.

The techniques involved are as simple to learn as they are to demonstrate. Don’t mistake simplicity for stupidity: Some of the simple things we’re about to show you are among the most effective ways of adding interactivity to your sites.

Indeed, though we recommend learning all you can (and putting that knowledge to use with taste and restraint), too much knowledge can sometimes lead to too much inappropriate JavaScript: scrolling text that moves so quickly no one can read it, full-screen pop-up windows containing rigidly designed 800 x 600 sites that look ludicrous on large monitors, or complex, dynamic menus on general audience sites or on sites whose lack of in-depth content is made pitifully obvious when these complex menus end up pointing to single-paragraph pages.

While other jazz musicians blew fast and frantic, Miles Davis played very few notes. The way he played them, when he played them, and the many times he did not play at all, all combined to create a timeless creative legacy. This is our highfalutin’ way of reminding you that less is more, a little goes a long way, and slow bakin’ makes good eatin’.

So let’s look at some of these simple tasks and simple scripts. And let’s see how ordinary web designers with no programming experience use basic JavaScript techniques to solve everyday design and communication problems.