12.5 JavaScript
| Dreamweaver works with JavaScript in a variety of ways. In addition to using JavaScript behaviors, you can link to scripts in external .js files, edit .js files directly, and debug JavaScript code. 12.5.1 Adding Scripts to DocumentsWhen you apply behaviors using the Behaviors panel, Dreamweaver adds the JavaScript to the <script> tag within the <head> tag. (All scripts used throughout a site are listed in the Scripts category of the Assets panel.) If you apply the same behavior twice within the same document, Dreamweaver is smart enough not to duplicate the JavaScript code within the <script> tag. You can even modify the JavaScript functions by hand in Code view, provided you don't change a function's name , Dreamweaver won't overwrite your changes even if you reapply the same behavior. 12.5.1.1 The Insert Script dialog box The Insert 12.5.1.2 Call JavaScript behaviorThe Call JavaScript behavior is used to execute a line of JavaScript code. That line can include a call to a custom function or a built-in function such as window.close() . Figure 12-4 shows the exceedingly simple dialog box that lets you enter your parameters for the Call JavaScript behavior. Figure 12-4. The Call JavaScript parameters dialog box Other behaviors have more complex parameters, but Dreamweaver always writes the HTML code for you. If you apply the Call JavaScript behavior to an image, the resulting HTML code might be: <img src="mybutton.jpg" onMouseDown="MM_callJS('window.close( )')"> However, if you choose the onClick event, which cannot be applied to an <img> tag, instead of the onMouseDown event, Dreamweaver automatically wraps the <img> tag in a null link, such as in: <a href="javascript:;" onClick="MM_callJS('window.close( )')"> <img src="mybutton.jpg"></a>
12.5.2 Using External JavaScriptsApplying a behavior in Dreamweaver adds the JS code directly to your HTML document, which can be inefficient. Although Dreamweaver is smart enough not to duplicate JS code within a single document, it duplicates the code if you use the same behavior on more than one page. To add scripts to a web page based on a template, place scripts in an external .js file and link to it from the template.
To insert a reference to an external JavaScript ( .js ) file:
12.5.3 Editing JavaScriptDreamweaver allows you to edit JavaScript that is embedded in your HTML document or stored in an external .js file. 12.5.3.1 Editing embedded JavaScript in the Script Properties dialog boxFirst, let's talk about scripts embedded within your document's HTML code. To open the Property inspector, double-click the script icon in either the Document window or the Head Content bar (as described in the preceding section). Click the Edit button in the Property inspector to open the Script Properties dialog box, shown in Figure 12-5. This dialog box allows you to edit scripts directly. You should generally leave the script's Type set to Client-Side (server-side JavaScript is something else entirely). Unfortunately, this dialog box doesn't let you set the version of JavaScript for the language attribute, as you can with Insert Figure 12-5. The Script Properties dialog box
After editing your script, save your changes by clicking the OK button or discard changes using the Cancel button. Of course, you can also hand-edit your scripts in Code view or the Code Inspector; the Script Properties dialog box is just a convenient way to edit the <script> tag in isolation. 12.5.3.2 Editing external JS files in the Code view editorSuppose your script tag contains a link to an external JavaScript ( .js ) or VBScript ( .vbs ) file, as set by the src attribute, such as: <script language="JavaScript" src="checksize.js"> </script> External code cannot be edited in the Script Properties dialog box; however, click the Edit button in the Property inspector to edit it in the Code view window, as seen in Figure 12-6. Figure 12-6. Code view for external scripts The Edit button in the Property inspector opens Code view only if there are no embedded scripts within the HTML file. If you've used both linked and embedded scripts in the same HTML file, use the File When using Code view to edit an external script, many of Dreamweaver's menu options are disabled. The options available in this mode are listed in Table 12-5. Table 12-5. Menu options for manipulating JavaScript files
 |
Invisible Tags 
EAN: N/A
Pages: 208