Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Working with the JavaScript extractor

Working with the JavaScript extractor provides you with in-depth training on Web. Taught by James Wi… Show More

Dreamweaver CS4 New Features

with James Williamson

Video: Working with the JavaScript extractor

Working with the JavaScript extractor provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS4 New Features
please wait ...
Working with the JavaScript extractor
Video Duration: 5m 52s 1h 57m Intermediate


Working with the JavaScript extractor provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS4 New Features

View Course Description

In Dreamweaver CS4 New Features, Adobe Master Instructor James Williamson focuses on the improvements that benefit typical workflows in this popular web design and development tool. James demonstrates how to make efficient use of the new user interface, including the workspace manager, code navigator, Live view, and Property inspector. He also explores the capabilities of the Spry AJAX framework, including validation, tooltips, and datasets. Exercise files accompany the course.


Working with the JavaScript extractor

One of the goals of most web designers is to separate content, presentation, structure and behavior. Now this creates more accessible, flexible and portable code that is much easier to create and maintain. And with that a mind, Adobe has added the JavaScript Extractor feature to Dreamweaver. The JavaScript Extractor will take any JavaScript local to the HTML page and move it to an externally linked JavaScript file. As the code is moved the user has the option of making the code unobtrusive or leaving behind any in-line event handlers. For the most part you'll want to use the unobtrusive method, but you might consider the alternative method if you're using behaviors and want to continue to edit them.

Now I'm in the 06 folder, and I'm going to open up the gear.htm. Since we're going to be using both methods, I'm going to do a Save As. So let's go to File and choose Save As. And let's save this in the same directory as gear_behaviors. All right. I'll switch back over to Design view. Now, what is it that we're going to be affecting? Well, if I look at this ad over here, this Get your camera on ad, if I switch over to Code view, I can see that it has quite a few event handlers inside of it that are triggering some JavaScript functions and if I go up to the head of the document there is all our JavaScript functions. This is a very simple swap image behavior that has added some JavaScript to the page. We would like to externalize that. So let me switch back to Design view and I'm going to go up to Commands and choose Externalize JavaScript.

Now it's as soon as you open up the Externalize JavaScript dialog box you'll be presented with two choices. We can just externalize the JavaScript or we can externalize it and attach it unobtrusively. We'll cover the other method in just a moment. Let's focus on just externalizing our JavaScript. Now if we had multiple elements that were referencing JavaScript we would have a full list here and we can choose which scripts are externalized and which aren't. Notice that you can click, you can select and deselect items. So you don't have to externalize everything. You may just want to externalize a couple of them. That would be fine. It also tells us what it's going to do. It's going to remove the JavaScript from the head and then it will replace it with a script tag. So that's perfect.

Click OK. And when I do that, notice that it tells me what's going on. It said, "OK, I've removed this script block from the head and I replaced it with a script reference and I've created a new file called gear_behaviors.js" So you get a JavaScript file that's named the exact same thing as your file and it is saved in the same directory. So if you already have a file there named that, you might want to move that file or rename it so you can merge the two a little bit later on. And if you want keep it in a different directory, you'll need to move it manually later on, and then make sure that you're updating reference for it. So I'm going to go ahead and click OK and as soon as I do that, if I go over to my Files panel and refresh, I can see that here's our gear behaviors.JS.

And in fact, if I go over to Code view, in the head of the document where I had all that JavaScript code before, now I simply have the one script tag that is referencing that file. Which is awesome. Of course if I look further down below that I still see all those in-line event handlers. They're all still there. So why would we want to leave those? Well, in this case we're using behaviors so if I go over to the Tag inspector and I open that up and look at our behaviors, I can see if I select a camera ad again over here that I have a Swap Image and a Swap Image Restore. Well, if I wanted to edit that I could simply double-click Swap Image and the Edit dialog box comes up and allows me to maybe choose another image for it. So if I've used the unobtrusive method, it would simply strip this behavior out and I would not be able to edit the behavior. So if you want to keep editing your behaviors, you'll want to use this method instead of the unobtrusive method.

All right. Well, I'm going to go ahead and save and close this file. And we'll move on to talk a little bit about the unobtrusive method. So we're going to go back and open up gear.htm and again, we'll do another Save As and we'll save this as gear_unobtrusive. And here we're just going to do basically the same thing. We're going to go to Commands, Externalize JavaScript and this time we'll click on the Externalize JavaScript and attach unobtrusively.

Dreamweaver gives us a little warning and says, "Hey, if you do this, you're not going to be able to use your behaviors anymore. Are you OK with that?" I'm just going to say, "Yes." And you see now that Dreamweaver is going to be doing quite a few more things here and not only is it removing the JavaScript from the head, it's going to remove all of those in-line event handlers, which is fine. So I'm going to go ahead and click OK. And again I notice a different change here in the summary that Dreamweaver gives me. Not only does it tell me all these things it has done, but I notice that it's adding a new file that I hadn't seen before, which is the Spry DOM utilities.JS.

Because of the fact that we're attaching it unobtrusively, we need to be be able to reference these elements in the document. Adobe's Spry library contains a DOM utilities JavaScript file that has some functions in it that we're going to be referencing. So it's going to have to add this to our site as well. So I'm going to click OK and I'm going to go up and save my file. Now as soon as I save my file, Dreamweaver says, "Hang on a second. I need to add a file to your site that you currently don't have, which is the Spry DOM Utilities. Is that OK?" So I'm going to go ahead and click OK and over in my Files panel, if I do a Refresh, we're going to see a folder that we didn't see before, which is the SpryAssets directory and inside that we see that Spry DOM Utilities. The SpryAssets folder is added to your root directory. If you already have one in your root directory, let's say you've been using some Spry widgets, it'll just simply add it to that folder. You just need to make sure the contents of that folder and its location are uploaded to your remote site as well. If you move this or merge it with another file you just need to make sure that the reference is also updated.

So if I go into Code view, I can se that we have two script tags and notice that this one is referencing the SpryAssets folder on the root directory. So if you change its location, make sure this reference is also updated. So if you use a lot of behaviors or if you have older files that have internal JavaScripts you need to externalize, you'll find the new JavaScript Extractor a great timesaver. In our next video, we'll explore Dreamweaver CS4's improved Photoshop integration.

There are currently no FAQs about Dreamweaver CS4 New Features.






Don't show this message again
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Dreamweaver CS4 New Features.

Return to your organization's learning portal to continue training, or close this page.


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a Member and Create Custom Playlists

Join today and get unlimited access to the entire library of online learning video courses—and create as many playlists as you like.

Get started

Already a member?

Log in

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

You started this assessment previously and didn’t complete it.

You can pick up where you left off, or start over.

Resume Start over

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.