Dreamweaver CS4 supports a new command that makes it easy to build clutter-free web pages for modern browsers: Externalize JavaScript. This new command enables you to do two things:

• Extract JavaScript code throughout an HTML file and place the code in separate JavaScript (JS) files
• Create unobtrusive code by removing inline event handlers such as onclick and onmouseover and insert them at runtime.

As you may know, the purpose of HTML markup is to define a document's structure. It is good practice to keep separate your HTML, CSS, and JavaScript code. Doing this process by hand can be tricky and there is a learning curve.

Most of the new features in Dreamweaver CS4 are targeted at easily creating sites that follow best practices. The Externalize JavaScript command is another Dreamweaver tool that helps you to create standards-compliant web pages that follow W3C Recommendations and 508 Compliance.

Externalizing JavaScript source code can significantly reduce the lines of code in your page, making your files easy to read and maintain. This transformation may allow some web pages to display content even if JavaScript is disabled, though not always since data retrieval is sometimes instantiated by the JavaScript code itself. This feature can also help with sites that need the registration of more than one event handler for an onchange event. In this tutorial, I'll show you how to use the Externalize JavaScript command.

Requirements

In order to make the most of this article, you need the following software and files:

Dreamweaver CS4

• Try
• Buy

Sample files:

• YUI extensions; to download the YUI extensions:

• Click the cog icon at the top of the Dreamweaver menu bar and select Browse for Web Widgets, or
• Visit Adobe Dreamweaver Exchange and search for Yahoo! Web Widgets.

Prerequisite knowledge

You should be familiar with the Dreamweaver workspace and working in Code view.

Creating the YUI Menu widget

In this tutorial, you will add a YUI Menu widget with the Insert panel and inline JavaScript code with the behavior panel. This setup will allow you to see the Externalize JavaScript command in full swing.

In Dreamweaver, create a new HTML document and insert a YUI Menu widget. Save your page as menuExample.html. Toggle off the display of your CSS Styles by clicking the Style Rendering toolbar so that you can easily edit one of the submenu text items (see Figure 1).

Figure 1. Toggling CSS Styles with the Style Rendering toolbar

Select the Sub menu item 1 link and add an Open Browser Window behavior from the Behaviors panel (Window > Behaviors), Add Behavior button (see Figure 2).

Figure 2. Adding an inline JavaScript behavior

The Open Browser Window dialog box opens. Enter http://www.adobe.com in the "URL to display" text box and a height and width of 500px, respectively. Save and preview the page in a browser (press F12). You should see your menu and clicking the submenu item 1 link should open a 500px by 500px pop-up window with the Adobe home page visible. Close your browser.

Externalize JavaScript Command Options

Switch to Code view and note that an onclick event handler was created inline with your submenu hyperlink. Several lines of JavaScript code were inserted in the head tag (at about line 77).

In Dreamweaver, select Command > Externalize JavaScript. This command presents you with a few options. If you have inline JavaScript, the option "Externalize JavaScript and attach unobtrusively" is automatically selected. If you prefer to leave inline scripts alone, such as your onclick behavior for your popup window, then you will want to select "Only externalize JavaScript."

Note that when the "Only externalize JavaScript" option is selected, the "Remove JavaScript from body" is deselected by default. Sometimes unexpected results can happen when JavaScript is removed from the body tag. In the case of the YUI widgets, extracted body JavaScript will render favorably in the browser. Be sure that both check boxes are selected and click OK (see Figure 3).

Figure 3. Extracting JavaScript from the body tag.

Dreamweaver displays the Externalize JavaScript command results in another dialog box. In addition to the code extractions, two external files are created. One file that contains the extracted code is named after your web page and is written to the same directory. Another external file called SpryDOMutils.js is also generated in a new SpryAssets folder in your site. This file is a Spry utility library that helps you properly associate JavaScript files at runtime. In this example, the body tag needed to be referenced properly so that the code that was on line 77 gets reinserted at runtime at the same place even though the code resides in an external file. If you had not selected the body tag to be extracted, the SpryDOMutils.js page would not have been generated. If you open the SpryDOMutils.js page in Dreamweaver, you will see a few hundred lines of code that create this magic.

Save your file, preview the page in a browser and in Live view and you should not notice any difference in the functionality. Preview your page in Code view and you will see that the onclick event was left alone, but the JavaScript in the head and body tags was extracted and referenced by links in the head of your document.

In the same page, undo your changes so that the JavaScript code is re-inserted in the page. Externalizing JavaScript is undoable unless you have saved and closed your page. Select Command, Externalize JavaScript, and choose the "Externalize JavaScript and attach unobtrusively" option. You will get a dialog box that informs you that your behaviors will no longer be editable in the Behaviors panel. Depending on your situation, you may not want to attach your inline JavaScript tags unobtrusively for this reason. Click Yes in the dialog box.

Dreamweaver finds the JavaScript in the head and body tags as before, but now the proposed changes also include an onclick inline event handler. Note that the anchor tag ID selector is editable, so that you can change the name to your preference, if needed. This is useful, especially if you already have a CSS ID named a1. Select all three of the check boxes and click OK (see Figure 4).

Figure 4. Extracting unobtrusive JavaScript

The extractions are made; two new files are created again and referenced in the source HTML page. If you look at Code View, you will now see that your inline JavaScript was removed and the anchor tag now has an ID of "a1." Save and preview your file.

Best practices and workflow

If you publish to a web server, be sure to include the new external JavaScript files. If you prefer, you can move these files to a common Scripts folder on your server, just be sure to path to them correctly from within your HTML page head tag.

This command works well in most situations but should be used with care. Save a backup file and test it before externalizing your code. If you use Dreamweaver templates, you will find that only JavaScript in non-editable regions of your dwt template file can be extracted. Editable regions of HTML templates can also be extracted. Extracting the body tag code from pages with Flash content may not work.

Plan the use of this extension before ripping out all of the code in every page of your site. Depending on how you structure and utilize reusable code such as Dreamweaver templates and ColdFusion or PHP include files, you may find that this command is a bit tricky to introduce into an existing site, but not so if you plan well with a new site.

If you are building an application with several YUI calendars throughout multiple pages, implementing a YUI calendar as a ColdFusion or PHP include file might be best. For example, every page that uses the same calendar will need to have the JavaScript files referenced in the head section of the document and the include file could contain the HTML code of the widget itself (see Figure 5).

Figure 5. Include file in the body tag and JavaScript files in the head tag.

If you already have a site with these widgets and didn't externalize to begin with, you will have to extract the JavaScript and reference the same JavaScript files that make the widget work; instead of having multiple JavaScript files for each instance on every page. Depending on the size of your site, this conversion could be a difficult undertaking that will lead to issues if you are not careful with pathing to the external JavaScript files. The Externalize JavaScript command will help with this process, but a good deal will have to be done by hand.

In the long run the work needed for the conversion should pay off. Your pages will be easier to read and maintain, and the JavaScript files can be repurposed into new pages.

Where to go from here

If you liked the YUI widget that was used in this article, visit the Adobe Dreamweaver Exchange to explore more widgets. You can also learn more about using these widget extensions in Dreamweaver CS4 by reading the article Using YUI widgets in Dreamweaver CS4.

If you plan on web building as a regular occupation, I recommend familiarizing yourself with W3C Recommendations and 508 Compliance standards. The standards can sometimes be hard to follow, especially if they require that you rebuild a site from scratch. If you have an existing site you can validate your site to see if it passes the latest standards at http://www.w3.org.

About the author