Chapter 35
JavaScript Authoring Tools

Introduction

Several authoring tools have shown up recently. These tools aim at helping you ramp up faster on HTML and JavaScript. We have chosen to introduce you to Infuse by Acadia, but other competitive tools are also available. Notice that Infuse sometimes refers to LiveWire. That subject is outside the scope of this book and therefore is not covered.

Top 10 Tips

The next 10 paragraphs show the top 10 tips given by Infuse.

Tip #1. Navigate Your Code with the Script Navigator

Infuse includes the Script Navigator window from which you can navigate your HTML or JavaScript code. The window displays all functions and objects in the current page (see Figure 35-1). Double-click on any function or object to jump to its location.

Figure 35-1.  Tip #1. Navigate your code with the Script Navigator.

Tip #2. Integrated JavaScript Reference

Netscape’s official JavaScript reference is built into Infuse. Right-click anywhere in either the Object or the Language Tree to convert the cursor to a Help cursor (question mark), and then click on the language element item you wish to get help on. Help will then be displayed in a pop-up window, as shown on the left-hand side of Figure 35-2 (for appName property).

Figure 35-2.  Tip #2. You can invoke Netscape’s JavaScript Authoring Guide from Infuse.

Tip #3. Drag-&-Drop Into Your Source File

There are three index tabs at the top left corner of the Acadia Infuse window: Objects, Language, and HTML. You can use these trees to drag-&-drop objects, properties, methods, and other language elements into your code. This feature is handy, for example, when you forget the exact syntax of an HTML tag, or the parameter order of a method. If you don’t like to drag-&-drop, you can simply double-click any time to place it at the current cursor position in the editor. Figure 35-3 shows that portion of the Acadia Infuse window.

Figure 35-3.  Tip #3. Drag-&-Drop into your source file.

Figure 35-4.  Tip #4. Instantiate JavaScript objects.

Figure 35-5.  Tip #5. Using special inline characters.

Tip #4. Instantiate JavaScript Objects

The JavaScript Object Tree serves two purposes. First, you can visualize the object hierarchy (see Figure 35-4). Then, you can instantiate JavaScripts objects by holding down Ctrl while you drag-&-drop an object into the editor. Dragging-&-dropping JavaScript objects (without holding the Ctrl key) will have no effect. Since not all JavaScript objects can be explicitly instantiated, holding down the Ctrl key when dragging-&-dropping these objects will have no effect as well.

Figure 35-6.  Tip #6. Speed up your typing with natural cursor positioning.

Tip #5. Using Special Inline Characters

As with any other language, JavaScript has a special treatment for certain characters, such as carriage returns or tabs. The Inline Character subtree of the Language Tree eliminates the need to remember the specific syntax of these characters (see Fig 35-5). Again, drag-&-drop or double-click the characters to place them in your code as global variables. Keep using the global names in the rest of the code.

Figure 35-7.  Tip #7. Reuse your JavaScript Code

Tip #6. Speed Up Your Typing with Natural Cursor Positioning

When you place an object by dragging-&-dropping (or by double-clicking) it to your editor, the cursor is automatically positioned at the most natural location for that particular object. You can begin typing instantly instead of manually searching for the insertion point followed by a positioning of the cursor. The example in Figure 35-6 shows how a for loop is placed in your document when the loop generic limit (value) is selected. Upon typing the real variable name, the generic one will be instantly erased.

Figure 35-8.  Tip #8. Customize the editor

Tip #7. Reuse Your JavaScript Code

Acadia Infuse supports the concept of Frequent Scripts. You can store your favorite JavaScript routines and retrieve them for later use. In order to save your code, select it using your mouse, right-click to display the pop-up menu, click Add Frequent Script, and fill out the dialog box. To insert a favorite script, select Favorite Scripts from the Insert menu and then choose a script from one of the categories, shown in Figure 35-7. Acadia Infuse comes with over 30 commonly used routines.

Figure 35-9.  Tip #9. Create custom objects.

Tip #8. Customize Your Editor

As with other editors, Acadia Infuse lets you customize the look and feel of its windows. Just invoke the Preferences menu from Tools main menu and try the different options. For example, you can change the color of HTML tags, strings, comments, etc. The window portion shown in Figure 35-8 displays the foreground and background colors of text and its selection.

Figure 35-10.  Tip #10. Finding that matching brace.

Tip #9. Create Custom Objects

Upon mastering JavaScript, you will want to create your own custom objects. Acadia Infuse helps you accomplish that by providing you with a dialog box that guides you during the process. From Insert main menu, click Custom Object and use the dialog box interface to fill in the details such as the object name, its properties, methods, etc. Figure 35-9 shows an object called “customer” having the properties “name,” “address,” “city,” and “state.”

Tip #10. Finding That Matching Brace

This feature helps you keep track of those unpaired braces. Select the open brace (see Figure 35-10) and then from Search main menu, click Find Matching Brace. The cursor will select the matching brace.

Summary

In this chapter, we introduced a JavaScript editor called Infuse. This application may help you create scripts faster. You can navigate your code with Infuse, drag-&-drop items into your code, create your own objects, save and retrieve useful functions, and find the matching brace you are looking for. Over the years, more JavaScript editing applications will be available on the Internet. Choose the one that suits you best.