The External JavaScript
At this point, some of your JavaScripts are getting pretty big -- kilobyte-wise. Say you've got some pop up script and a few other goodies your putting on each page. That can really add up.
You can get around this by putting all of your functions on one external JavaScript file and linking it to your pages. This is very similar to making external CSS files.
Making The External JavaScript File
When coding a new page or template, it's often easiest to put all of the styling and JavaScripts in the <head> of the page. It makes things easier to edit. But, once the editing is done and the bugs are worked out, you may well want to put your JavaScript on a separate file that can be linked to all of your pages.
Begin by copying all of your functions and pasting them in a blank file. Now save this file with the .js extension. That's it. You can, of course, just start out with a blank page and code the JavaScript on an external file from the start.
This .js file can now be linked to your pages. This one set of functions is all that's needed to run your whole site.
Linking External JavaScripts To Pages
To get external JavaScripts to run on your pages, you need to link to the external JavaScript file. This is done in the <script> tag:
<script language="JavaScript" src="URL to external .js file"></script>
Look at the example which is the scripting link I use for this site:
<script language="JavaScript" src="punkscript.js"></script>
In my case, the external JavaScript is in the same directory as my pages. Your URL may be different.
Once linked, the page will act as if the JavaScript were coded right on it. This can be a big space saver and make your page templates much leaner.
The page linking to the external JavaScript file does not have to use all, or any, of the functions. You can still put extra functions between individual page's <script> tags. You can link more than one external script by using multiple <script> tags:
<script language="JavaScript" src="script1.js"></script>
<script language="JavaScript" src="script2.js"></script>
It's important to remember to use the closing </script> tag even if nothing is coded between the <script> and </script> tags. This is so the browser doesn't think the whole rest of the page is coded in JavaScript.
For practice, take any of the pages you've used for practice and put their JavaScript on an external sheet. Now link to the external sheet on the pages.
Back To Beginning JavaScript Index
|