Friday, March 29, 2024

So, You Want An External JavaScript, Huh?

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]
[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 tutorialson 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 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 you… 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 browserstest = 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 instructions 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.


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-impaired 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]
[Remember The <!– and –>]

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured