1. Computing

Moving JavaScript out of the Web Page

Finding Script Content To Be Moved

By

When you first write a new JavaScript the easiest way to set it up is to embed the JavaScript code directly 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 pre written 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


<script type="text/javascript">
if (top.location != self.location)
top.location = self.location;
</script>

Example Two


<script type="text/javascript"><!--
if (top.location != self.location)
top.location = self.location;
// -->
</script>

Example Three


<script type="text/javascript">
/* <![CDATA[ */
if (top.location != self.location)
top.location = self.location;
/* ]]> */
</script>

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 the 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. About.com
  2. Computing
  3. JavaScript
  4. Javascript Tutorials
  5. Improving Your JavaScript
  6. How to Separate the JavaScript in Your Web Page

©2014 About.com. All rights reserved.