Using the Same Script on Multiple Pages - HTML 4

If you have a single Web page that uses a JavaScript script, it’s handy to be able to contain all of the scripting code inside a single <script> tag. However, suppose you have a boatload of pages, each of which needs to call the same script. You can always copy and paste the script into each page, but there are two downsides to that approach. First, you have to add the script to each page and make sure it is set up correctly and working. Second, anytime you make any tweaks to the script, you are forced to update each and every HTML page that uses it. If you have two pages, that’s no big deal. But if you have more than three, it can lead to a maintenance migraine.

However, this headache can be avoided — even without ibuprofen! Instead, you can use an external JavaScript file, also called a .js file (pronounced “dot jay ess”). A .js file is an ordinary text file that stores your JavaScript scripts. You can store one or more of your JavaScript scripts in a single .js file and access them from multiple HTML pages.

To use the same script on multiple pages, you should

  1. Put the script in an external JavaScript file.
  2. If you have the script already inside your HTML page, remove all the JavaScript code inside the <script> tag and paste it into a separate file.
  3. Reference the file in any HTML page when you need the script.
  4. Define a <script> tag in the head section of your Web page, but don’t add any code inside it. Instead, use the src (for source) attribute in the <script> tag to call the external .js file.

Listing shows the reference to the external file.

Listing: External Script Reference

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>My JavaScript page</title>
<script src=”external.js” language=”JavaScript” type=”text/javascript”>
</script>
</head>

(the rest of your HTML page goes here)

You don’t need to include anything between the opening and closing script tags. In Listing, the name of the source file, external.js, is placed between double quotes. You can reference this file, external.js, with either a relative or absolute link, so you can refer to external JavaScript files in other directories on your server, or even on other servers (if you have access to those servers).

Adding the src attribute to the <script> tag tells the browser to look for that external file in the specified path. The resulting Web pages look and act like the scripts are in the header or body of the page’s script tags, though the script is in the external .js file.

With this technique, you need to change a JavaScript only once on your site in the external file, not in each individual page on the site. All of the pages that reference the external file automatically receive the updated code. It’s a big timesaver when updating your site.

If you use a script on only one page, it’s often easier simply to put the script on the page in a body or header script.

If you have multiple external .js files, you can use any or all of them on any HTML page. Just include multiple <script> references on the page. It’s perfectly okay for a page to include multiple scripts and to both refer to external .js files and include its own scripts inside <script> tags.

When you have multiple <script> tags defined in your Web page, the browser processes them in the order in which they are declared. If, for some reason, you have an external .js file that conflicts with a script inside a <script> tag, the last one defined wins.

There is nothing magical about the inside of the .js file itself — it is pure JavaScript code. No HTML tags are allowed. Listing shows an example of a script in an external .js file. This script implements button rollovers for a Web page. When the user moves the mouse pointer over a button image, the image changes to highlight the choice.

Listing: An External JavaScript File

Note that the contents of the .js file shown in Listing could be copied directly into a <script> tag and function identically.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 4 Topics