Programming Basics: Writing Javascript Files

Here's how you can use external JavaScript files to keep your scripting tasks from turning into copy-and-paste nightmares.

As you begin getting the hang of JavaScript, you'll start coming up with more ideas for how to enhance your web pages with dynamic text and interactive components. You might want to use document.write() and the Date object to print out the current date and time at the top of every page, or use to give easy access to a FAQ sheet. But copying identical function definitions onto every page of your web site is no fun, especially when you realize what a nightmare all this multiplied code will make of future maintenance! And the constant scrolling through all your HTML in search of a particular JavaScript fragment isn't easy on your eyes at all.

You can keep JavaScript from becoming a chore by writing external JavaScript files. If you centralizing your function definitions and global variables into a single location, all you need on your web pages is a single line of HTML referencing the external file. You'll have one file, not a hundred, to edit and upgrade. And you'll always know where your code is.

The process is very simple. First, open up a new blank text file and give it a name that makes it clear not only that this file contains JavaScript, but also what purpose its contents serve. For instance, "formval.js" is a good name for the file containing all your form validation script: functions that test for text fields left blank or email inputs filled with non-email-address content. The file "popup.js" might contain not only a function wrapper for but also the global variable to which you're assigning the pop-up window itself and maybe a global array that maps function argument values to the web pages you want displayed in the pop-up window.

Note that the "js" at the end of these example file names is not strictly necessary. You can end your file names in "txt" or "html" or even leave off the file extension entirely. However, it's useful to have a common naming convention to make it easy to pick out your JavaScript files at a glance. A common prefix will group them together if you sort your files alphabetically; a common file extension will do the same if you use a Windows application to sort by file type.

Now just cut and paste all the appropriate JavaScript from your web pages into this new file. It's important to remember not to use script tags or HTML comment tags in your external JavaScript files. Such delineators are unnecessary. Since a web browser will assume that all text inside this file will be JavaScript code, it will try to parse your HTML tags as JavaScript commands, and this will result in an error.

To make the contents of this file available on a web page, create beginning and ending HTML "script" tags in the web page's header area (between the beginning and ending "head" tags). Put nothing between the "script" tags; instead, create a couple of attributes in the beginning "script" tag as follows:



The "type" attribute functions just as it does for inline JavaScript: it tells the web browser what kind of script to expect. The "src" attribute contains the name of your external JavaScript file so that the web browser can find your script. Make sure to include any path references necessary. For instance, "js/popup.js" would tell your web browser to look in the same directory as your web page for a subdirectory called "js", and to look inside that subdirectory for a file called "popup.js".

The contents of popup.js will now be available on your web page. All you have to do now is call your pop-up function just as you normally would--perhaps by placing the function call inside the "href" or "onClick" attribute of an HTML anchor tag.

This method of sectioning out your JavaScript into external modules will make your web pages lighter and the task of developing and maintaining them much easier. After all, the addition of JavaScript ought to make designing web pages more, not less, enjoyable.

© High Speed Ventures 2011