Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Working with the JavaScript extractor

From: Dreamweaver CS4 New Features

Video: 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.

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.

Show transcript

This video is part of

Image for Dreamweaver CS4 New Features
Dreamweaver CS4 New Features

16 video lessons · 18618 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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

Congratulations

You have completed Dreamweaver CS4 New Features.

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


OK
Become a member to add this course to a playlist

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

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

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:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com 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 lynda.com.

Sign up and receive emails about lynda.com 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.