JavaScript in Dreamweaver CS4

If you open a HTML file, the related files toolbar will add a button for each external file referenced; even for remote files, for example JavaScript from the Google AJAX Libraries API (although remote files are not editable).

Better still, when you use Live View—an embedded Webkit window, the engine used in Safari and Chrome—you can use the related file toolbar to switch the code view to an external file without interrupting your Live View session: open an external JavaScript file, make a change, and your changes are reflected in the Live View window instantly, without having to save the JavaScript file.

And better still, Live View also has a Live Code mode, where the HTML source view becomes a computed-source view; it displays the source of the current DOM instead of the original web page source. Using Live Code you can see the changes in the DOM as you interact with the web page in the Live View window, similar to Firebug. Live Code also allows you to freeze JavaScript if you need to stop and examine the current state of the DOM.

The editor for JavaScript has syntax checking and code hinting. The syntax checking is performed as you type, providing immediate feedback for syntax problems. The code hinting in Dreamweaver CS4, includes functions and objects from all referenced JavaScript files which means it'll work with any JavaScript library. It'll also incorporate functions and objects as you type them.



There was one drawback though; it didn't work with remote files; the JavaScript had to be local before it was included in the code hinting.

A very interesting feature, is the Externalize JavaScript command. Say you've been mocking up a web page using inline JavaScript or you've inherited a site chock full of embedded script tags; using this command Dreamweaver will take all the JavaScript code within the HTML file and create an external JavaScript file then add a new script tag to the HTML. It also goes one step further. If you have any inline JavaScript even handlers, like the onclick HTML attribute, Dreamweaver will convert them to an unobtrusive version that uses the Adobe Spry JavaScript framework.

For example you if you've got an inline event handler like this:

<a href="#"
onclick="myObj.functionOne();">...</a>

After running the command the HTML is converted to this:

<a href="#"
id="a1">...</a>

Then the following is placed in an external JavaScript file, unobtrusively adding an event listener to the anchor tag:

Spry.Utils.addLoadListener(function() {
Spry.$$("#a1").addEventListener('click',
function(e){ myObj.functionOne(); }, false);
});

It's not a perfect feature; you're limited to the Spry framework (It would be ideal if you could nominate to use your chosen JavaScript framework instead), and the script tags are placed in the document head (best practice these days is to place them just before the closing body tag); but it certainly illustrates the increased emphasis on unobtrusive JavaScript.

JavaScript & CSS Blog: Stylish Scripting
by Andrew Tetlaw