Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat.

free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class">

Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

<Code_Punk>'s

Beginning JavaScript Lesson 25:
Making External JavaScripts

Code Tutorials



Site Development



Downloads



Help!!



Home


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