Writing JavaScript in Dreamweaver

[ LiB ]

In addition to other code-writing chores, Dreamweaver has several features specifically to help you hand-code JavaScript.

The Reference Panel

In previous chapters, you have seen how the Reference panel can give you context-sensitive help for HTML and CSS. For scripting help, the Reference panel also provides JavaScript help. To access the JavaScript help in the Reference panel, click the <?> button on the Document toolbar, and choose O'Reilly JavaScript Reference from the panel's Book drop-down menu. Figure 27.40 shows the JavaScript section of the Reference panel with all its parts labeled for easy browsing. It's organized by object, as most JavaScript dictionaries are, so you need to know your object structure to take full advantage of it.

Figure 27.40. The JavaScript section of the Reference Panel, a handy source of information for scripters.

Scripting Without Using Code View

If you want to be able to add your own scripts to your page without having to navigate through one of the code editor views, you have two choices: the Call JavaScript behavior or the Script object. The Script Property Inspector also lets you edit existing script tags.

Call JavaScript Behavior

You apply and edit this behavior the same way you would any other item in the Behaviors panel. Instead of inserting some prewritten JavaScript action, however, the behavior adds whatever JavaScript statement(s) you specifically tell it to add.

Follow these steps:

1. Open a document, and select whichever page element you want to attach the behavior to.
   
   
2. Open the Behaviors panel, and from the + menu, choose Call JavaScript.
   
   
3. In the dialog box that appears, type in whatever JavaScript statement(s) you want to execute. (Separate multiple statements with semicolons.) After you have finished, click OK.
   
   

How useful is Call JavaScript? It's great if you're not really into writing scripts, or if you're in a hurry. But because of how Dreamweaver codes its behaviors, Call JavaScript can lead to some cumbersome coding. Dreamweaver behaviors must always insert their JavaScript as a noncustomizable function (in the head) and a function call with parameters. Say you wanted to insert a line of code that sends the browser back to the previous page when the user clicks a particular item. You'd insert a Call JavaScript behavior and type history.back() into its dialog box. Dreamweaver would add the following function to your document's head:

 function MM_callJS(jsStr) { //v2.0   return eval(jsStr) } 

And the following event handler and function call to the selected page element:

 <a href="javascript:;" onClick="MM_callJS('history.back()')"> 

If you're familiar with how JavaScript works within the HTML framework, you'll recognize that it's much more efficient to just tuck the JavaScript statement inside the href , like this:

 <a href="javascript:window.back()"> 

In fact, in this particular instance, you can still avoid going to Code view if you really want to. Just select the page element that will trigger the link, and type javascript:window.back() in the Link field of the Property Inspector.

For more on how Dreamweaver behaviors are coded, see the section "Behaviors in Dreamweaver" in Chapter 13, "Interactivity with Behaviors." For more on using Call JavaScript, see the section "Tiny Bits of Hand-Coding: The Call JavaScript Behavior," also in Chapter 13.

The Script Object

The Dreamweaver Script object is a quick way to insert a complete script tag into a document without going to Code view. Scripts entered this way aren't limited to JavaScript. They can include anything a script tag normally contains, including links to separate JS files.

To insert a script block into a document using the Script object, follow these steps (see Figure 27.41):

Figure 27.41. Using the Script object to insert a script tag into the document.

1. Open a document.
   
   
2. To insert the script into the body section, position the insertion point where the tag should be added. To insert the script to the head section, use the View Options menu to turn Head Content on, and click in the head content bar (along the top of the Document window) to activate it.
   
   
3. In the Insert bar, go to the HTML category. From the Script group of objects, choose the Script object. Or choose Insert > HTML > Script Objects > Script.
   
   
4. In the dialog box that appears, choose a scripting language. JavaScript (various versions) and VBScript appear in the drop-down menu. To choose any other language, enter the information directly into the text field.
   
   
5. Enter the complete script contents you want to enter, minus the opening and closing <script> tags (and the script-hiding comment tags).
   
   

Dreamweaver inserts your script inside script tags and with the proper language specified. It also includes comment tags to hide the script from noncompliant browsers.

To edit a script block using the Script Inspector, follow these steps (see Figure 27.42):

Figure 27.42. The Property Inspector for Script objects.

1. Open a document containing script tags.
   
   
2. If the script is in the document head, show the head content bar (select View Options > Head Content). If the script is in the document body, turn on invisible elements (select View Options > Visual Aids > Invisible Elements). Each script tag in the document should now show in the head content bar or in Design view as a script icon.
   
   
3. Select the script icon representing the code you want to edit.
   
   
4. Use the Property Inspector to change any script parameters. Click the Edit button to access and edit the code.
   
   

When you insert a Script object, you're not given the choice to add a script link. The dialog box assumes you'll type in your own script. However, you can subvert the process (although it's easier just to use the Assets panel, as discussed in the next section).

To insert a link to a client-side or server-side JS file, using the Script object, follow these steps:

1. Open a document and insert a Script object, as described earlier.
   
   
2. In the Script object dialog box, leave the code field blank, and click OK. This inserts an empty script tag into your document.
   
   
3. Turn on either the head content bar or invisible elements, find the script icon, and select it.
   
   
4. In the Script Object Property Inspector, choose the file to which you want to attach.
   
   

Scripts in the Assets Panel

If you're working within a defined site and you want to add links to JS files to your documents, the easiest way is to use the Assets panel. Every JS file within your local site folder appears in the Scripts section of the Assets panel, as shown in Figure 27.43. To add a script link to a document this way, follow these steps:

Figure 27.43. Linking an HTML document to a JS file by dragging from the Assets panel.

1. Open the document to which you want to add the link.
   
   
2. Make sure the head content bar is showing (select View Options > Head Content).
   
   
3. Open the Assets panel, and click the script icon to show the site's script files.
   
   
4. Find the file you want to link to, and drag its icon from the Assets panel to the head content bar of your document. Figure 27.44 shows this happening.
   
   

   Figure 27.44. Accessing the Code Navigation menu (available only in Code view).

   

   
   

JavaScript Tools in Code View

If you're editing your scripts in Code view or the Code Inspector, you can take advantage of colored syntax, function navigation, autobalancing, and various debugging tools.

Syntax Coloring for Scripts

You have already seen how syntax coloring works in Dreamweaverhow to enable it and customize text colors and styling. The Preferences > Code Coloring dialog box includes special settings for coloring text within scripts, including reserved keywords, other keywords, and strings (refer to Figure 27.4). This coloring applies to any code between a pair of script tags. It doesn't affect any code that is part of an event handler in the HTML because that code is not within a script tag.

JavaScript Snippets

Snippets, discussed earlier in this chapter, can also be used to store frequently used JavaScript code fragments . In fact, Dreamweaver ships with a variety of handy JavaScript snippets that you might want to explore.

Code Navigation Menu

Whether you're working in the Code Inspector, Dreamweaver lets you easily jump to different JavaScript functions with the Code Navigation menu. You can access this menu from the Code Inspector toolbar by clicking the double curly braces icon, as shown in Figure 27.44. The menu lists any JavaScript functions. Choosing a function moves the cursor to the first line of that function and scrolls the display if necessary to show it. (This feature is not available in the Document window's Code view.)

Auto-Balancing Braces

Losing track of opening and closing curly braces, parentheses, and quotation marks is a common problem in scripting. In Dreamweaver, you're on your own with determining whether all your open quotes close properly, but the program helps you with your braces (curly braces, square brackets, parentheses). To test whether your punctuation marks are correctly paired, follow these steps:

1. In Code view or the Code Inspector, select an opening brace (curly brace , square bracket , or parenthesis).
   
   
2. Select Edit > Balance Braces. Dreamweaver selects all code between that brace and the corresponding closing brace.
   
   

If you're used to how auto-balancing is implemented in some text editors (such as BBEdit), the Dreamweaver Balance Braces command might take some getting used to. You can't use it to balance anything but braces. Also, it works only when you select an opening brace, not a closing brace. It responds with an error beep if you have incorrectly balanced braces (for instance, more openers than closers, or vice versa). For example, selecting the first opening brace in the following code would generate an error sound, because the braces don't balance:

 function helloWorld() {     if (a==0) {     window.alert("Hello, world"); } 

Selecting the second opening brace, however, would not result in an error; Dreamweaver would just select the code inside the if statement braces.

[ LiB ]