Section 14.4. Scripts on the Web | Creating Web Sites: The Missing Manual

14.4. Scripts on the Web

JavaScript is a truly powerful tool. If you're a diehard alpha nerd who likes to program your TiVo to talk to your BlackBerry, you'll enjoy long nights of JavaScript coding. However, if you don't like to lie awake wondering what var howMany = (trueTop>1?"s" : ""); really means, you'll probably be happier if you let someone else do the heavy lifting .

If you fall into the non-programmer camp, this chapter has some very good news. The Web is flooded with free JavaScript. In fact, it's easier to find free scripts than clip art, style sheets, or MIDI music. Most of the time, these scripts include step-by-step instructions that explain where to put the functions, what tags to use in your page, and how to hook your tags up to functions using events.

Although the list of JavaScript sites is too long to print, here are some good starting points:

http://webdeveloper.earthweb.com/webjs

Offers a huge collection of JavaScript standards.
http://javascript.internet.com

Provides a solid catalog of 2,000 bread-and-butter scripts.
www.javascript-2.com

Tips the scales with a staggering 9,000 scripts.
www.dynamicdrive.com

Provides a smaller set of scripts that emphasize modern DHTML-based programming techniques. Includes exotic scripts like glowing green letters that tumble down the page, Matrix-style. Offers many scripts that are IE-only, but clearly indicates browser support for each script.
www.javascripter.net/faq

Unlike the other sites, this one doesn't offer a catalog of complete downloadable scripts. Instead, it's organized as a set of frequently asked JavaScript questions, with the relevant code for each answer.
http://webmonkey.wired.com/webmonkey/programming/javascript

Unlike the other sites, this one offers a smaller set of detailed JavaScript tutorials instead of a huge variety of standalone scripts. Useful if you want to learn more about some of the core JavaScript techniques.

Using this list, you can dig up everything from little frills to complete, functioning Tetris clones . But keep in mind that a script is only as good as the coder who created it. Even on sites with good quality control, you could stumble across a script that doesn't work on all browsers or slows your page down to a sluggish crawl. As a rule of thumb, always try out each script thoroughly before you start using it on your site.

Tip: The hallmark of a good script site is that it's easy to navigate. You'll know you've found a bad script site if it's so swamped in ads and pop-ups that you can't find out where the scripts are.

14.4.1. Finding a Cool Script

Ready to hunt for scripts online? The next series of steps takes you through the process from beginning to end.

Fire up your browser and choose your site .

In this example, you'll use www.dynamicdrive.com.

Choose the category that you want from the site's home page (Figure 14-11) .

In this case, you'll use the Documents Effects category. For a sample of what else you can find, see the box "Script Categories."

Figure 14-11. The Dynamic Drive site organizes its scripts into clear categories. If you're looking for something new, scroll down the page and you'll find links to the most recently added scripts. Some sites also provide quick links to reader favorites.

Scroll through the list of scripts in your category (Figure 14-12), and click one .

In this case, you'll use the Top-Down Stripy Curtain Script.

The next page shows an example of the script (Figure 14-13) .

Once the next page loads, you'll find a script description, the author's name , and a link to try the script out (if it wasn't already used on the page). Underneath all this information are the step-by-step instructions you need to use the script.

Figure 14-12. The Top-Down Stripy Curtain Script is good to go with Firefox, Internet Explorer 5 or greater, and Opera 7 or greater.

Figure 14-13. Here's the Top-Down Stripy Curtain Script in action. It fills in the page by drawing alternating black strips , some from top to bottom and others from bottom to top. It all happens in a flash.

Follow the instructions to copy and paste the different parts of the script into your page (Figure 14-14) .

Often, you'll get a set of functions (which you need to place in the <head> portion of your page) and then some HTML tags (which you need to place in the <body> section). In some cases, you'll be able to customize your scriptsfor example, you might modify numbers and other values to tweak your script code, or you'll change the HTML tags to provide different content

Note: Many scripts include a set of comments with author information. If they do, the rule usually is that you need to keep these comments in your script file, so other developers who check your site out will know where the code originally came from. This practice is just part of giving credit where credit's due. Ordinary Web visitors won't even think to look at the script code, so they won't have any idea whether or not you wrote the script from scratch.

Figure 14-14. The Top-Down Stripy Curtain Script has two components . The first part is a style definition that defines the solid background curtain that's wiped away with the page content. The second part creates the background curtain (as a <div> tag) and includes the script code that performs the transition. Copy both of these to any page, and you're set. (And for even better organization, consider placing the code in a separate JavaScript file, as described on Section 14.2.4.)