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梐nd 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.
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. Insert a rollover image.
(For a refresher on these steps, see Section 5.5.) Dreamweaver adds a bunch of JavaScript code to the page. Choose View Code.
Dreamweaver shifts into Code view, where you'll locate and copy the JavaScript
for the library file. 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. 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, <!梐nd ?gt;. 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梖or example, MM_swapImage.
Choose FileNew and click the General tab.
The New Document window appears with a list of possible document types. 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). 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. Save the file to your site.
Name your JavaScript library anything you want?span class="docEmphasis">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梐s long as the behavior's code is in the file桪reamweaver 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:
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. Make sure you're in Design View (ViewDesign). Choose ViewHead Content.
Dreamweaver displays everything that appears in the <head> portion of the
page. Choose InsertHTMLScript ObjectsScript.
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. 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. 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. 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. 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.
|
