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.
Frequently Asked Questions about Unobtrusive JavaScript in Dreamweaver CS4
What is the significance of unobtrusive JavaScript in Dreamweaver CS4?
Unobtrusive JavaScript is a best practice in web development that separates the JavaScript code from the HTML markup. This approach enhances the readability and maintainability of the code, making it easier for developers to manage. In Dreamweaver CS4, unobtrusive JavaScript is particularly important as it allows for cleaner code, better performance, and improved accessibility. It also ensures that the website or web application can function even when JavaScript is disabled in the user’s browser.
How can I implement unobtrusive JavaScript in Dreamweaver CS4?
Implementing unobtrusive JavaScript in Dreamweaver CS4 involves writing your JavaScript code separately from your HTML. You can do this by creating a separate JavaScript file (.js) and linking it to your HTML document using the script tag. This way, your HTML markup remains clean and easy to read, and your JavaScript code can be reused across multiple HTML documents.
Can I use JavaScript behaviors in Dreamweaver CS4?
Yes, Dreamweaver CS4 supports the use of JavaScript behaviors. These are pre-written JavaScript functions that can be attached to HTML elements to make them interactive. For example, you can use a JavaScript behavior to create a rollover effect on an image or to display a pop-up message when a button is clicked. However, it’s important to note that while JavaScript behaviors can be convenient, they may not always follow the principles of unobtrusive JavaScript.
How can I debug JavaScript in Dreamweaver CS4?
Dreamweaver CS4 does not have a built-in JavaScript debugger, so you’ll need to use external tools for debugging. One popular option is the developer tools in your web browser, which usually include a JavaScript console where you can see any errors or log messages. You can also use breakpoints and step-through debugging to inspect the values of variables and the flow of execution in your code.
Can I use jQuery with Dreamweaver CS4?
Yes, you can use jQuery, a popular JavaScript library, with Dreamweaver CS4. To do this, you’ll need to download the jQuery library and link it to your HTML document, just like any other JavaScript file. Once you’ve done that, you can use jQuery’s powerful and easy-to-use API to manipulate HTML elements, handle events, create animations, and more.
How can I optimize my JavaScript code in Dreamweaver CS4?
There are several ways to optimize your JavaScript code in Dreamweaver CS4. One method is to minimize the use of global variables, as these can lead to conflicts and make your code harder to manage. Another technique is to use event delegation, which can improve performance when dealing with a large number of similar events. You should also consider minifying your JavaScript code, which can reduce the size of your files and improve load times.
How can I ensure my JavaScript code is accessible in Dreamweaver CS4?
To ensure your JavaScript code is accessible, you should follow the principles of unobtrusive JavaScript. This means making sure your website or web application can function even when JavaScript is disabled. You can do this by providing alternative content or functionality for users who can’t or choose not to use JavaScript. Additionally, you should use semantic HTML to provide context and meaning to your content, making it easier for assistive technologies to interpret.
Can I use AJAX with Dreamweaver CS4?
Yes, you can use AJAX (Asynchronous JavaScript and XML) with Dreamweaver CS4. AJAX allows you to update parts of a web page without reloading the whole page, providing a smoother user experience. To use AJAX in Dreamweaver CS4, you’ll need to write JavaScript code that sends a request to a server, receives the response, and updates the web page accordingly.
How can I handle JavaScript events in Dreamweaver CS4?
Handling JavaScript events in Dreamweaver CS4 involves writing JavaScript code that responds to user actions, such as clicks, mouse movements, or key presses. You can do this by using the addEventListener method to attach an event listener to an HTML element. The event listener is a function that gets called when the specified event occurs.
Can I use JavaScript libraries other than jQuery with Dreamweaver CS4?
Yes, you can use other JavaScript libraries with Dreamweaver CS4. These libraries provide pre-written JavaScript code that you can use to perform common tasks, saving you time and effort. Some popular JavaScript libraries include React, Angular, and Vue.js. To use these libraries, you’ll need to download them and link them to your HTML document, just like you would with jQuery.
Andrew TetlawiOS Developer, sometimes web developer and Technical Editor.
