Unobtrusive JavaScript in Dreamweaver CS4

A copy of the recently released Adobe Dreamweaver CS4 appeared at SitePoint HQ recently (check out Kevin’s review in Issue #218), so I thought I’d take it for a test drive and see what it has to offer the modern JavaScripter.

When I think of Dreamweaver and JavaScript I recall the MM_swapImage javaScript function, ubiquitous on all dreamweaver-created websites. Dreamweaver has matured a lot since then and it’s evident that Adobe has tried to keep pace with modern trends in unobtrusive JavaScript. Dreamweaver readily supports the modern notion that JavaScript belongs in external files, in several significant ways.

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • nightwatchman

    As one who struggles with hand coding, I can see more and more reasons to upgrade to Adobe’s latest offering from CS3. I also tend to work backwards, designing and prototyping on the fly, or in other words, throw bits of code inline as I’m working out how the site or page is going to function.

    The Eternalise JavaScript option sounds like it will be useful for me by way of reassembling my “FrankenKode” into an external file, and the fact that external files will be far more accessible will allow me to break out the bad habit of throwing titbits of code inline.

    After the long wait for Macrodobia to get native Intel Mac functionality happening, then sustaining all the installation nightmares, I was ready to give Adobe the “Heave-Ho”, especially after trying a few alternatives including the quite remarkable (to me) RapidWeaver. I’m starting to think I will give them one last chance to win me back with CS 4.

    While you’re all here, let me wish everyone a Merry Christmas and a Happy and Prosperous New Year! Cheers.

  • http://june-js.com/ haiku

    It took them quite long to get here(VisualStudio 2008 from MS already has this), but nonetheless this is great news.

  • frenchie

    as i become deeper involved in coding the benefits of having more than one ide per website have become obvious.
    For me personally Javascript is developed in Aptana – DWCS4 and all doesn’t come close. Yu get the full version for 30 day trial after that its $99USD

    For XHTML and CSS I Use Dreamweaver.PHP – my zend studio or even the PDT tht zend offers for free ( Net Beans IDE is pretty good on PHP also)

    For XML i go with oxygen.

    All these IDEs except for DW run off the Eclipse foundation so they remain familiar from GUI POV.

  • Oscar

    I’m a freelancer, so all my works are developed by me (and in just a few cases one support designer). As PHP coder I don’t use all DW visual tools and next can sound prehistoric too but I test all my works on localhost configuration (I run my cross-browser works right on Firefox, Safari, Opera & IE, all them installed on my computer). I’m using DW since Macromedia 8 Pack. I tested Eclipse, Aptana & Net Beans but always I return to DW for just one reasons: I can configure my workspace as a localhost (if Aptana, Eclipse or Net Beans could be the same, please tell me how) when you store all your project on other unit than C: then you understand me.
    I use Filezilla to upload my files, so even remarkable DW FTP configuration is missused in my case.
    Still I think DW is a winner, because it’s very useful if you don’t have a less than complete knowledgement of a language, I use jQuery since 2007 with DW CS3, in fact I buy DW CS3 because Spry (those times when to learn/use a fremework became a need) it was just before to learn jQuery; so when jQuery was digest unobtrusive become easy.
    Now I’m trying DW CS4 but still I don’t found a strong reason to say it yes.

  • Oscar

    By the way, happy holidays everybody! or as we say in my country ‘Feliz Navidad y un Próspero Año Nuevo para todos ustedes amigos’.

  • http://www.sscottradcliff.com ScottRadcliff

    @frenchie I would be interested in hearing why you would use all of those IDE’s for development. Are there benefits in using all of them. I use two. Visual Studio for .NET, and Dreamweaver for most everything else, unless it is a complied language.

  • http://www.cxdi.com/ confuxion

    Whoa, great article, but something jumped out at me towards the end:

    “and the script tags are placed in the document head (best practice these days is to place them just before the closing body tag)”

    Have I been living in a cave for the past few years? I thought it was always best to include your external javascript file calls within the <head>…</head> tags. The statement above would prove otherwise. Can someone please clarify this for me?

  • http://tetlaw.id.au Andrew Tetlaw

    @confuxion, yep, the advice from Yahoo is put CSS at the top and scripts at the bottom:
    http://developer.yahoo.com/performance/rules.html#js_bottom

  • peter

    eqhreqdw rdq3herd3 1e1heoij31