Using Custom Scripts | Macromedia Studio MX Bible

< Day Day Up >

Although Dreamweaver provides many built-in behaviors to add JavaScript functionality to your site, you are not limited to using only those scripts provided. You can use several methods to add your own scripts, either by linking to an external file or by embedding the script code into the document. How you choose to incorporate your scripts may depend upon how often your site's pages access the script.

For example, if you have a script that displays the current day, date, and year that you want to display on your home page, you may use the Insert menu to embed (place inline) the code into your document. However, if you plan to have the same date script on all of your site's pages, it makes sense to build an external JavaScript file (.js) and link all the site pages to that file. The external page is then requested from the Web server and its contents are placed in the browser's cache. This is an efficient method for reducing the overall download required by your site.

You can also build a script link to create a function call by typing into the link field in the Property inspector. However you choose to incorporate your custom scripts, Dreamweaver provides an easy-to-use interface.

Embedding a custom script

Use the Insert ® Script Object ® Script menu option to place custom JavaScript into your document. This opens the Insert Script dialog box. Alternatively, you can use the Insert bar's Script toolset and click the Script object button to open the Insert Script dialog box.

Habitat Alert site In the following steps, you add a dynamic date script to the Habitat Alert homepage by embedding the custom code into the HTML document:

Use the Site panel to open index.htm from the root level of the Chapter 42 site. Also locate and open scripts\datescript.js.
Select all of the content in datescript.js and copy. Close the file.
Place your cursor into the space just above the first paragraph in the homepage ( index.htm) and choose Insert ® Script Object ® Script to open the Insert Script dialog box, shown in Figure 42-10.

Figure 42-10: Paste a script or type it (if you're hand-coding) into the Content field.
Paste the copied code. This script doesn't contain the opening and closing <script> tags, but they will be added by the Insert function. Click OK to close the Insert window and save your page. Preview in a browser to see the dynamic date in action. As shown in Figure 42-11, the date is displayed as Today is Monday, 30 September, 2002.

Figure 42-11: The dynamic date displays in the browser.

An embedded script is not visible in Design view unless Invisible Elements are enabled, in which case a small yellow icon marks the script code. To remove the embedded script, select the icon and delete, or use Code view to locate and remove the code.

Linking to an external JavaScript file

If you plan to use a script in many of your site's pages, create an external file and link the pages to it using the Assets panel. External script files are saved with the .js extension and are recognized as assets.

Habitat Alert site In the following steps, you add the dynamic date script to the home page using an external file:

Reopen index.htm from the root level of the Chapter 42 site. Enable Invisible Elements and select the icon representing the embedded date script (if you added it in the previous exercise) and delete it. Save the page.
With your cursor inserted just above the first paragraph of copy, press F11 to open the Assets panel. Look for the Script icon (third icon from the bottom) and click it to bring up your script assets.
Select datescript.js and press the Insert button at the bottom of the panel. Alternatively, you could right-click (Control+click) and choose Insert.
Save your page and preview the dynamic date in a browser.

The datescript.js file uses a fairly standard method of calling Date functions. If you are even a bit familiar with JavaScript, you can easily modify the script to present the date in many different formats. (You can always get another copy of the datescript.js file from the CD.) The date is dynamically written using the document.write method.

The script also makes use of a class style (.date) that can be added to your site's style sheet to control the appearance of the date content. In the preceding example, no date class exists in the style sheet used by the page (Chapter42\behaviors\stylesheets\main.css) so it inherits the properties of the redefined .main content H4 style instead.

< Day Day Up >