Section 11.5. Creating an External JavaScript Library

11.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 welland 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.


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 16.
  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.4.1.)

    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> tag 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_swapImg-Restore, 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 MMfor 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 Java-Script. 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 Popup 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 andas long as the behavior's code is in the fileDreamweaver doesn't add any additional programming code to the page.


Note: This tactic works only with Dreamweaver behaviors. If you use a third-party behavior (see Section 19.2), Dreamweaver adds that behavior's 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, or link to an external JavaScript file.

  4. Click the folder icon, to the right of the Source box, and then locate and select the JavaScript file you created earlier .

    This is the familiar "browse to file" technique you use throughout Dreamweaver to link to Web pages, graphics, style sheets and, yes, JavaScript files.

  5. Click OK to close the Insert Script window .

    Dreamweaver links the file to the page. Whenever the page is loaded into a Web browser, all of the JavaScript commands in the external file also load.

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



Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net