http://www.developer.com/lang/jscript/article.php/639141/So-You-Want-An-External-JavaScript-Huh.htm

Back to article

So, You Want An External JavaScript, Huh?


February 28, 2000

Use these to jump around or read it all...

[What I'm Talking About] [The Time Stamp]
[Creating The JavaScript File]
[Calling For The JavaScript File] [A Few Things To Keep In Mind] [Remember The <!-- and -->]

     Those of you who are regular visitors to HTML Goodies know that I really get a kick out of JavaScript. I have a good many tutorials on the subject.

What I'm Talking About

     For the most part, I always tell you to place the JavaScript you want to run directly on the page it will run on, and that rule still holds true for more involved JavaScript. But what if you could place a single JavaScript file into your site, and run it off of every page, similar to what happens in a Cascading Style Sheet model?
     For instance, you want a clock on every page. Well, you could either copy and paste the clock JavaScript into every page or you could place it once as its own page, and link all the other pages to it. One script, many clocks. Neat, huh? Well, here's how you can do it.

The Time Stamp Example

     That date above is produced by a short JavaScript by Allen. (That's all he calls himself). The script is offered here. The script posts the date the person arrives at the page. It also used to post the time, but I shortened it to only post the date for this tutorial.
     Okay, so there's not a lot to it, but it's good for this discussion.

Creating The JavaScript File

     The JavaScript that read and posted the date above does not appear on this page. Feel free to look at the source code if you want, but it really doesn't. I know it's killing ya... you want to look at the source code. Don't do it! Don't give in to the pressure! Be your own person!

     Or go look... I don't care.

     In order to get that on the page I created what is known as a "JS" file, or a "JavaScript" file. The JavaScript file is nothing more than a JavaScript saved as a text file and given the extension ".js".

A little more detail please, Joe...

     Let's say you have a JavaScript. Like the one above. In fact, let's say you have the one above. Here's what it looked like when I started:

<SCRIPT LANGUAGE="JavaScript">

<!-- hide script from old browsers

test = new Date()
month = test.getMonth()
month = (month * 1) + 1
day = test.getDate()
year = test.getFullYear()
document.write(" ",month,"/",day,"/",year," ")

// end hiding script from old browsers -->

</SCRIPT>

     Okay, there you go. It's a very short, simple script. Even if you are not overly schooled in JavaScript you can pretty much pick out how it works. It gets the day, the month, and the full, four-digit year from your computer, then posts them all in a row with slashes between the numbers. Ta da! You have a date!

Create The JS File

     Take the script and paste it, all by itself, into a word processor. It should be the only thing on the page. Now, knock off the beginning and end SCRIPT commands. These things:

<SCRIPT LANGUAGE="JavaScript">
and
</SCRIPT>

     Get rid of them. Erase them. You'll pick them up again later. Now the page should look like this:

<!-- hide script from old browsers

test = new Date()
month = test.getMonth()
month = (month * 1) + 1
day = test.getDate()
year = test.getFullYear()
document.write(" ",month,"/",day,"/",year," ")

// end hiding script from old browsers -->

     Now do a SAVE AS command and save the file as TEXT only (the same way you would an HTML file), give it a name and add the extension .js.
     Let's say you want to name this file "george". Do a Save As, making sure you are saving as text alone, and give the file the name "george.js". Okay, you're done with that.

Moving along...

Calling For The JavaScript File

     You have the JavaScript file saved. Now we need to call for it in another document. Let's get back to the JavaScript that produced the date above. I followed the same instrctions I just gave you above and created a file called "datestmp.js".

     To get its effect on my page, I placed these commands:

<SCRIPT SRC="datestmp.js">
</SCRIPT>

     See, I told you you'd pick up those two commands again. That's all you need. Any time you place those commands on your page, the JavaScript denoted by the .js extension will appear. Just remember to lose the beginning and end script commands in the JavaScript file or you'll get an error: Line 1.

A Few Things To Keep In Mind

     Through my trial and error, I found a couple of concerns:
  • This works best with self-contained JavaScripts.
    Scripts that have multiple parts throw a lot of errors. It's better to just paste the script onto the document in those cases.
  • This will not work with multiple scripts in the same .js file.
    Many times you will find that an effect is created by two JavaScripts, one following right after the other. No dice here. In order to get the effect, you would either need to have a <SCRIPT> command in the .js file or call for two js files. Either way it will kill the effect. It's best to just paste the scripts onto the page in cases like that.

Remember The <!-- and -->

     Okay, that's the general idea. Now go and JavaScript your viewers to death. Just remember to surround your JavaScripts with these two commands:

<!--     and     -->

     I did that above, see? Those commands hide the text from browsers that cannot read JavaScript. It won't make the browser run the script, but it will stop Java-impared surfers from getting any error codes when they access your page.

 

Enjoy!

 

[What I'm Talking About] [The Time Stamp]
[Creating The JavaScript File]
[Calling For The JavaScript File] [A Few Things To Keep In Mind] [Remember The <!-- and -->]

 

Sitemap | Contact Us