Kristi Jabbour
Technical Writer
Macromedia, Inc.

If you need to generate JavaScript, you can benefit from several of HomeSite's timesaving features. HomeSite has a wizard to generate six common scripts and a JavaScript Tree for writing custom scripts. It also has several other features that come in handy while scripting. The following sections describe each of these topics in detail.

• JavaScript Wizards
• JavaScript Tree
• Other Handy Goodies

JavaScript Wizards

You do not need to know any JavaScript to use the JavaScript Wizard.

The following is a description of each script that you can insert with the wizard:

• URL Selection creates a dropdown list of up to eight URLs
• Background Fade creates a faded background when your page is first loaded
• Frame Buster prevents your page from being displayed in a frame in another page
• Last Modified Date displays the date your page was last edited
• Browser Type displays the type of browser being used to view your page
• Current URL displays the URL of your page

To use any of these wizards, do the following:

1. Click the JavaScript Wizard button on the Scripts QuickBar.
   A dialog box with six tabs appears -- one tab for each script.
2. Complete the tab for each script you want to insert in your page (and ignore the tabs for scripts that you do not want).
3. Before you click OK, make sure you have carefully followed the instructions on the tab and that you are aware of any restrictions it may have.
4. When you are satisfied, click OK.

The script is added to the current document, immediately after the cursor.

JavaScript Tree

You must be moderately familiar with JavaScript to use the JavaScript Tree.

The JavaScript Tree is a handy reference and timesaver. It lists the possible attributes and functions for each object as well as the other special keywords in JavaScript such as var, int, public, try, and throw.

You must use the JavaScript Tree within JavaScript tags. You can quickly insert JavaScript tags by clicking the Script button on the Scripts QuickBar. Then, between the tags, you can begin to use the JavaScript Tree.

For a simple JavaScript expression, you can insert it directly from the tree. For example, if you want to display a modal dialog box, you can select the alert function under the window object.

This inserts the code: window.alert(""), with the cursor between the double quotes. You can then type the message that you want to appear, for example You must register with us to view this information.

Then, while still in the argument for window.alert, you can insert a function to modify the String value you just typed. To do so, in the tree, select a function under the String object, such as toLowerCase.

The following is an example:

<script language="JavaScript" type="text/javascript">
window.alert("Hello UNIX World".toLowerCase())
</script>

This script displays the following dialog box (the titlebar differs, depending on the default browser):

For more complex JavaScript expressions, you can no longer directly insert code from the tree, but you can use it as a reference. For example, the following is code for a script and a form, in which a user can add two integers. (A graphic of the resulting form appears below the code).

<script language="JavaScript" type="text/javascript">

function addTotal() {

 var prod1_val = Math.round(window.document.sum.prod1.value)
 var prod2_val = Math.round(window.document.sum.prod2.value)
 document.sum.total.value = prod1_val+prod2_val
 return true }

</script>

<form action="" method="get" name="sum" id="sum">

Enter the value in prod1: <input type="text" name="prod1" value="0"><br>
Enter the value in prod2: <input type="text" name="prod2" value="0"><br>
The sum of prod1 and prod2 is: <input type="text" name="total"><br><br>
input type="button" name="add values" value="add" onClick="return addTotal()">

</form>

In the previous script, you cannot directly insert window.document.sum.prod1.value, because you cannot find these objects in the tree; sum is the name of the form, and prod1 is the name of the first text box in the form. Simply put, the code is not generic enough. However, the tree can refresh your memory if you forget the correct hierarchy of objects, as the tree does contain the following:
window > document > form (sum) > text (prod1) > value.

Other Handy Goodies

If you share your source files with others who are more presentation-oriented (for example designers and content developers), you may be concerned about your code. You can collapse your code so it displays as a gray box in the document window. You can still see its contents as a tooltip, and you can double-click the box to expand the code at any time. Others are less likely to touch your code when it is in a collapsed state.

To collapse your code, do the following:

1. Select the code to collapse in the document window.
   In the left margin, two small boxes appear at the top and bottom of the selected text.
   
2. Click either box to collapse the selected text.
   The text appears as a gray box.
3. To see the contents of the collapsed text, run the cursor over the box and read the tooltip.
4. To expand the collapsed text again, double-click the box.

By default, text only stays collapsed for 7 days. To keep text collapsed indefinitely, go to the Options > Settings > Editor > Collapsed Text pane, and type 0 in the text box under Settings.

Clipboard

Far beyond typical copy and paste capabilities, you can copy multiple selections to the clipboard, by default up to 36! (You can change this number in the Options > Settings > Editor pane.) This is especially useful when you have many lines of code that are similar, such as variable declarations and passed values. Instead of having to select and copy code immediately before pasting it somewhere else, you can insert any of the items you have copied directly where you want it.

Note: Cut selections are not added to the clipboard, only copied.

To insert an item from the clipboard, click the Show clipboard toolbutton and select the item you want to insert. You can see the contents of each item by moving the cursor over the item and reading its tooltip. If the clipboard becomes cluttered and you want to remove everything from it, click the Clear clipboard toolbutton .