Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

External Javascript

Why, you ask?

Good question, you’re a smart cookie. A Snickerdoodle most likely.

• If you use the same script on multiple pages this allows the browser to cache the script so it doesn’t have to read it over and over again on every page load. Your site will be faster that way.
• It removes some of the coding clutter, which may make your page easier to edit. It also moves your content, and keywords, higher up in the source code. This may give a small boost to a page's search engine placement in some situations.
• You only have to update that one external file to update the script for every page of your site that links to it.

For example, if this were your way cool script:

Then all you would put in your external JavaScript file would be:

That’s everything except the opening and closing script tags. Then save the file with a .js extension and it should be good to go. Do make sure the text editor you use doesn't append a .txt file type to the end. If you put the file name and .js file type inside double quotation marks it shouldn't append anything. Example: "my-script.js"

All that's left to do now is to link to the script from your web page. Here's how to link to a script:

Usually you'll want to place that in the head section of your page. Change my-script to the actual name you give the script. Include the correct server path if you keep the script in a different directory from your HTML pages. I usually keep my JavaScript files in folder named js, my CSS files in a folder named css, and so forth. It helps reduce clutter in the root directory.

I wrote that you'll usually want to place that link in the HEAD section of your page because sometimes a script needs to be placed in the body of the document.

The "Hello World" script example I used is an example of a script that would need to be placed in the body of your document because its purpose is to actually print something on the page for your visitor to read. With a script this short, I wouldn't bother putting it in an external file. Most scripts aren't this small, though.

Since most people reading this tutorial will likely get their scripts from a third party, here's a good rule of thumb: If the script says to put something in the HEAD section of the page, that's the part you can put in an external file. Use the other parts of the script as instructed.

You can create and link to as many external JavaScript files as you need. Don't try to place multiple JavaScripts in one file. That can often cause conflicts and break one or more of the scripts. Keeping it simple can help keep code conflicts from arising.