12.5 Creating an External JavaScript Library

     

You'll use some Dreamweaver behaviors constantly. The basic rollover image, for example, is so useful for navigation bars, you may end up putting it on every page of your site.

Unfortunately, each time you add a behavior to a page, Dreamweaver adds lines of JavaScript code as well ”and more code means slower downloads.

One way to decrease download time is to put frequently used JavaScript programs into a separate file containing nothing but JavaScript, and then link that file to each page that uses the script. Once your visitors ' Web browsers load and cache this JavaScript library file, they don't have to waste time loading it again. Every page in your site that uses, say, Dreamweaver's Swap Image behavior needs just a single line linking it to the JavaScript file, instead of lines and lines of code.

Dreamweaver doesn't create external JavaScript library files automatically, but you can create your own for any Dreamweaver Behavior you use frequently. The following steps demonstrate the process of creating a JavaScript file containing all the code Dreamweaver inserts for rollover images. Creating

NOTE

In this context, library simply refers to a file of frequently used programming code. A JavaScript library file isn't related to Dreamweaver's Library tool described in Chapter 17.

1. Create a new, blank Web page.

   Since you're going to copy and paste chunks of code, you can see what you're doing better if you start fresh with a new page.

2. Insert a rollover image.

   (For a refresher on these steps, see Section 5.5.)

   Dreamweaver adds a bunch of JavaScript code to the page.

3. Choose View Code.

   Dreamweaver shifts into Code view, where you'll locate and copy the JavaScript for the library file.

4. Scroll to the top of the page and look for the following code: <script language="JavaScript" type="text/JavaScript">

   This code marks the beginning of the JavaScript. Everything between this tag and the closing </script> is the JavaScript code you want.

5. Select and copy all of the code between the script tags.

   You should be copying four different functions (commands): MM_swapImgRestore, MM_preloadImages, MM_findObj, and MM_swapImage. (Skip the HTML comments, <! ”and ”>. They're HTML, not JavaScript, and don't belong in a JavaScript file like the one you'll create next .)

   NOTE

   The names of Macromedia's JavaScript programs begin with MM ”for example, MM_swapImage .

6. Choose File New and click the General tab.

   The New Document window appears with a list of possible document types.

7. From the Category list, select Basic Page; from the Basic Page list, choose JavaScript. Click Create.

   You've just created a blank new "JavaScript" file (technically, it's just an empty text document).

8. Paste the Code you copied in step 5 into the document.

   There isn't any HTML in this file (and don't add any) because it's a JavaScript file.

9. Save the file to your site.

   Name your JavaScript library anything you want ” rollover.js or shared.js , for example. You can go on to paste other JavaScript functions into the file as well. If you use, say, the Pop-Up Message behavior on most pages of your site as well, by all means include code for that in the library, too.

Even though Dreamweaver can't create external JavaScript libraries itself, it does recognize Dreamweaver behaviors inside of any JavaScript file you create. This is a great feature, because once you link the JavaScript file to a page, you can add a behavior to the page and ”as long as the behavior's code is in the file ”Dreamweaver doesn't add any additional programming code to the page.

NOTE

This tactic only works with Dreamweaver Behaviors. If you've used a third-party behavior (see Section 20.2), Dreamweaver adds that behaviors code to the page even if the exact code is in a linked external JavaScript file.

Once you've created your JavaScript library file, it's time to link your Web pages to it. Here's how:

1. Open a page you want to add the behavior to.

   For example, open a page that will contain rollover images whose code is stored in the JavaScript file.

2. Make sure you're in Design View (View Design). Choose View Head Content.

   Dreamweaver displays everything that appears in the <head> portion of the page.

3. Choose Insert HTML Script Objects Script.

   The Insert Script window opens. This window lets you add your own JavaScript commands to a page.

   You're not creating your own script right now, so you can close this window.

4. Click OK to close the Insert Script window.

   Even though you didn't add any code, Dreamweaver did insert a <script> tag into the head of the page. You'll use this tag to link to the JavaScript library you created earlier.

5. In the Head portion of the document window, select the newly inserted script.

   It looks like a small scroll, which should now appear highlighted. Now you can set its properties in the Property inspector.

6. In the Property inspector, click the Link button (the small folder icon).

   The Select Script window opens. Here you'll select a file, just like linking to a file, graphic, or anything else in Dreamweaver.

7. Navigate to and select the JavaScript file you created earlier, and then click OK.

   Dreamweaver links the file to the page.

Now you can add rollovers to your page without adding any additional JavaScript code, resulting in slimmer files and faster downloads.