Howto Make An External JavaScript(.js) File

More and more we are seeing the transition to having scripts being called from an external source (External JavaScript File .js). We shall explain, step by step howto make, upload and call an "External JavaScript File" (.js).

The first thing you will encounter when you get to a script site that wants you to add a portion of the script into an "External JavaScript File". It is usually something designated like this:

There will be some code in this area.

Ok, now we know that part of the code needs to go into an "External JavaScript File". Study what is below the above designation and 9 times out of 10 times the code will tell you when it ends by the below desigination that will possibly appear as:

<script type="text/javascript" src="name_of_file_here.js"></script>

* This may say <BODY> instead of <HEAD>. but either way, you should just paste it where it is designated to be located.

The name of the external JavaScript is only relative to the file you make and the name you call it from. In other words, you call create the file in any name you want but you must also call it by that name in order to have it work.

Now that we got that out of the way, lets get down to actually copy/cut and paste into a notepad* for the creation of the External JavaScript File.

Note of Importance ~ In reference to the external JavaScript file that needs to be copied and pasted into a "Notepad" and uploaded into your editor, remember this:

Once you need to paste and "Save As", you should use a notepad. If you have a Notepad replacement and not using the Microsoft® Notepad, this will not work. You Need To Save it with the Microsoft® Notepad. Reason being is quite simple. Not everyone is using the notepad replacement you are. And by uploading it in the replacement, not all systems will be able to read the external Javascript. The notepad replacement is software that is installed on the individual system (computer). Not all systems will have the installed software for the replacement notepad you may be using. (it is a good bet though that just about every system does have the Microsoft® Notepad). This means your system will not be able to read it and the effect will not work.

We have located the portion of script that needs to be called from an external location and be designated as an "External JavaScript File".
[ See Example ]
Now we need to copy/cut and paste it into a "Notepad" (see our above Note Of Importance) and "Save As" the name of the file with the extension of .js at the end.
*If you need to get a little refresher on howto "Copy/Cut and Paste", grab the below link for our tutorial on that.
[ Copy/Cut and Paste Howto ]
Once you have "Copied/Cut and Pasted the portion of script into a "Notepad" and "Saved As" with the extension of .js, (We save as to our desktop for convenience) it should appear something like this: (See both below examples)
[ See Me First ] [ How It Appears After You Saved As ]
In other words, once saved you should get an icon that looks something like this or
with whatever name you "Saved As" underneath the icon.
Once we have "Saved As" and all that done, it is now time to "Upload" the .js script into your directory*
The next step is to now paste the little snipplet of javascript that calls the external .js script into either the <HEAD> or <BODY> section (Whichever location the script calls for). Here again, the script site should tell you where it will be located. The snipplet of code should look something like the below

<script type="text/javascript" src="name_of_file_here.js"></script>

If this is still a little unclear, see Below Example:
[ Where To Paste Code ]
* You should upload the .js file into the same directory as the effect will be located. If you opt to upload it into a different directory, you need to alter the path the reflect where the external .js script will be called from. See below howto:
[ Upload .js Script Into Different Directory ]

That just about covers the "howto" on making and calling an external .js script. The only other thing we shall cover is if you want to generate any HTML into an external .js script, grab the below link.
We have a "Converter/Generator" that takes all the work out of hand-coding an external .js script.
[ Converter/Generator For External .js Scripts ]

For your Information: ~ In reference to making and uploading an external .js file to call from your website. Some people are not that comfortable with doing this and prefer the more traditional way of just adding (copy/cut and paste) the script (that would be the designated external .js file) into the web document itself. The problem is that the script that is earmarked to be an external .js script is not complete on its face to add diectly into the document and must be finished. If you would grab the below link, we will show you howto use the traditional copy/cut and paste method and not make use of the external .js file.
[ Traditional Copy/Cut And Paste ~ No .js Script ]

We hope our tutorial was easy to follow and we covered everything in detail. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Rate This Page ]