HTML Goodies Click Here!
Click Here!
 
Find:  EXPERT SEARCH
-----

Affiliate Programs
----- Goodies to Go!

Now you can
get Goodies by
e-mail too!
-----
----- EarthWeb Sites
Crossnodes.com
datamation.com
developer.com
dice.com
EW Discussions
earthweb.com
earthwebdirect
ERP Hub
gamelan.com
gocertify.com
htmlgoodies.com
intranetjournal
itknowledge.com
itlibrary.com
jars.com
javagoodies.com
javascripts.com
open source IT
roadcoders.com
SupportSource
y2kinfo.com

tabs

So, You Want An External JavaScript, Huh?

So, You Want An External JavaScript, Huh?

by Joe Burns, Ph.D.

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

     An 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.getYear()
document.write(" ",month,"/",day,"/19",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 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.getYear()
document.write(" ",month,"/",day,"/19",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 of eight (8) letters or less 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". Again, make sure you give the file a name of eight letters or less. I have found that more than eight letters messes up the process. Why? My guess is that it's a leftover DOS concern, but that's just a guess. 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:
  • The .js file name cannot be more than 8 characters long.
  • 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 viewers 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 -->]

 

Back to the HTML Goodies Home Page
Handsome guy, huh?


support source 2000!

support source 2000!

Goodies Tutorials


Click Here!

Click Here!


HomeAbout UsSearchSubscribeAdvertising InfoContact UsFAQs
Use of this site is subject to certain Terms & Conditions.
Please note our privacy policy.
Copyright (c) 1996-1999 EarthWeb Inc. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited.