Moving Javascript out of the Web Page

When you first write a new Javascript the easiest way to set it uo is to embed the javascript code diirectly into the web page so that everything is in the one place while you test it to get it working right. Similarly if you are inserting a prewritten script into your web site the instructions may tell you to embed parts or all of the script into the web page itself.

This is okay for setting up the page and getting it to work properly in the first place but once your page is working the way that you want it you will be able to improve the page by extracting the javascript into an external file so that your page content in the HTML isn't so cluttered with non-content items such as Javascript.

If you just copy and use Javascripts written by other people then their instructions on how to add their script to your page may have resulted in your having one or more large sections of Javascript actually embedded into your web page itself and their instructions don't tell you how you can move this code out of your page into a separate file and still have the Javascript work. Don't worry though because regardless of what code the Javascript you are using in your page you can easily move the javascript out of your page and set it up as a separate file (or files if you have more than one piece of Javascript embedded in the page). The process for doing this is always the same and is best illustrated with an example.

Let's look at how a piece of Javascript might look when embedded in your page. Your actual Javascript code will be different from that shown in the following examples but the process is the same in every case.

Example One

Example Two

Example Three

Your embedded Javascript should look something like one of the above three examples. Of course your actual Javascript code will be different from that shown but the Javascript will probably be embedded into thhe page using one of the above three methods. In some cases your code may use the outdated language="javascript" instead of type="text/javascript" in which case you may want to bring your code more up to date to start with by replacing the language attribute with the type one.

Before you can extract the Javascript into its own file you first need to identify the code to be extracted. In all three of the above examples there are two lines of actual Javascript code to be extracted. Your script will probably have a lot more lines but can be readily identified because it will occupy the same place within your page as the two lines of Javascript that I have highlighted in the above three examples (all three of the examples contain the same two lines of javascript, it is just the container around them that is slightly different).

1. 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.
2. 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.
3. 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.
4. Select a descriptive filename to use for your new file and savve 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.
5. 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.
6. 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.
7. 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".
8. 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:

We also have a separate file called framebreak.js that contains:

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 anyonne 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.