- The first thing you need to do to actually extract the JavaScript into a separate file is to open a plain text editor and access the content of your web page. You then need to locate the embedded JavaScript that will be surrounded by one of the variations of code shown in the above examples.
- Having located the JavaScript code you need to select it and copy it to your clipboard. With the above example the code to be selected is highlighted, you do not need to select the script tags or the optional comments that may appear around your JavaScript code.
- Open another copy of your plain text editor (or another tab if your editor supports opening more than one file at a time) and past the JavaScript content there.
- Select a descriptive filename to use for your new file and save the new content using that filename. With the example code the purpose of the script is to break out of frames so an appropriate name could be framebreak.js.
- So now we have the JavaScript in a separate file we return to the editor where we have the original page content to make the changes there to link to the external copy of the script.
- As we now have the script in a separate file we can remove everything between the script tags in our original content so that the </script&;script tag immediately follows the <script type="text/javascript"> tag.
- The final step is to add an extra attribute into the script tag identifying where it can find the external JavaScript. We do this using a src="filename" attribute. With our example script we would specify src="framebreak.js".
- The only complication to this is if we have decided to store the external JavaScripts in a separate folder from the web pages that use them. If you do this then you need to add the path from the web page folder to the JavaScript folder in front of the filename. For example if the JavaScripts are being stored in a js folder within the folder that holds our web pages we would need src="js/framebreak.js"
So what does our code look like after we have separated the JavaScript out into a separate file. In the case of our example JavaScript (assuming that the JavaScript and HTML are in the same folder) our HTML in the web page now reads:
<script type="text/javascript" src="framebreak.js">
</script>
We also have a separate file called framebreak.js that contains:
if (top.location != self.location)
top.location = self.location;
Your filename and file content will be a lot different from that because you will have extracted whatever JavaScript was embedded in your web page and given the file a descriptive name based on what it does. The actual process of extracting it will be the same though regardless of what lines it contains.
What about those other two lines in each of examples two and three? Well the purpose of those lines in example two is to hide the JavaScript from Netscape 1 and Internet Explorer 2, neither of which anyone uses any more and so those lines are not really needed in the first place. Placing the code in an external file hides the code from browsers that don't understand the script tag more effectively than surrounding it in an HTML comment anyway. The third example is used for XHTML pages to tell validators that the JavaScript should be treated as page content and not to validate it as HTML (if you are using an HTML doctype rather than an XHTML one then the validator already knows this and so those tags are not needed). With the JavaScript in a separate file there is no longer any JavaScript in the page to be skipped over by validators and so those lines are no longer needed.