Serving hearty nuggets since 2001

3 Steps To Writing JavaScript

Over the course of the last four years I've had many occasions to help friends and colleagues with JavaScript. While the problems they were trying to solve ranged from validating the content entered into a form field to making an image fly across the screen, the structure used to solve the problems has remained consistent. Learning JavaScript can seem like a monumental task. Often one's first exposure comes from examining the code grabbed from a random site on the web, or that created by tools such as Macromedia Dreamweaver.

In reality, most tasks are quite simple. And even the most complex tasks are no more then a sequence of simple tasks. The difficulty is in learning how to break the task down into more manageable pieces. For some time I have been using a three step process to help me do this. First I define when I want the JavaScript to start running. Then what I want to happen. Finally I answer how it will happen.

What follows is a short tutorial on how I do this in which I will walk you through the writing of three scripts. The first script is a simple rollover based image swap. The second script deals with basic form validation. Then the third script can be used to show and hide the contents of a layer.