Moving JavaScript to an external file
This exercise demonstrates how to use the JavaScript Extractor using spry_selector.html from the preceding section.
1. Because the JavaScript Extractor cannot restore JavaScript once it has been removed from a page, it's always a good idea to create a new copy of the file that you want to work on. Save spry_selector.html from the previous exercise (or from examples/ch08) as spry_unobtrusive.html in workfiles/ch08.
2. Close the original file and work with spry_unobtrusive.html.
3. Select Commands > Externalize JavaScript. Dreamweaver analyzes the page and opens the following dialog box:
The radio buttons at the top of the dialog box offer the following two options:
■ Only externalize JavaScript: This simply moves functions to an external file and attaches the file to the page.
■ Externalize JavaScript and attach unobtrusively: This attempts to move everything and creates the necessary external script to add inline event handlers, such as onclick, through DOM manipulation.
With the first option selected, Dreamweaver finds only the function definitions in the <head> of spry_unobtrusive.html.
4. Select the second radio button. Dreamweaver displays a warning that behaviors will no longer be editable through the Behaviors panel (this includes Spry effects). When you click OK to dismiss the warning, the Externalize JavaScript dialog box changes to this:
The fro Mowing table lists the proposed edits ta the d you da not want to make.
t Deselect any edits that i^1 ejitKfwife 'iavflfiffijit! j Externfllut Javascript and atlddiunobtrLiSivslv
Help
The fro Mowing table lists the proposed edits ta the d you da not want to make.
t Deselect any edits that i^1 ejitKfwife 'iavflfiffijit! j Externfllut Javascript and atlddiunobtrLiSivslv
|
Edit Type |
Element |
JO |
|
@ Remove JavaScript from head |
SCRIPT | |
|
y/] Strip onload attrfcute |
BODY | |
|
0 Stro ondick attribute |
A |
jal |
Dreamweaver lists all the JavaScript that it can find in the page. The checkbox alongside each proposed edit lets you decide whether to implement a particular suggestion. In this case, each edit is selected by default. However, Dreamweaver automatically deselects any scripts that use document.write, because these cannot be externalized.
To be able to manipulate the DOM, Dreamweaver automatically creates IDs for inline elements that don't already have them. As you can see in the preceding screenshot, it says it will add a1 as the ID for the onclick attribute. If you want to change the ID, the field is editable.
5. Click OK when you're happy with your selections. Dreamweaver then presents you with a report of what it has done, like this:
The important thing about this report is the last section, which tells you the name of the external JavaScript file that it has created. You must upload this to your website. Otherwise, none of the JavaScript will work.
The external file is given the same name as the file you have just extracted the JavaScript from, except with a .js filename extension. If a file with that name already exists, Dreamweaver adds a number just before the filename extension.
The external JavaScript file is created in the same folder, but you can move it to a dedicated scripts folder through the Files panel. If you move the file, don't forget to update the links when Dreamweaver prompts you.
Post a comment