June 5, 2025 (Updated April 19, 2026)Dan Rodney/3 min read

Sharing JavaScript Across Pages

JS Best Practices

0/4

Use const by default

let only when you need to reassign.

Prefer === over ==

Strict equality — no type coercion surprises.

Handle async errors

try/catch around await — don't swallow rejections.

Validate inputs

Especially at boundaries — user input, API responses.

Master JavaScript at Noble Desktop

Noble Desktop's JavaScript Development Certificate teaches modern JavaScript and React.

Explore the process of externalizing JavaScript and linking HTML files to it, enabling shared use of a single JavaScript file across multiple pages, through this detailed JavaScript & jQuery tutorial.

Topics Covered in This JavaScript & JQuery Tutorial:

Externalizing JavaScript, Linking to the JavaScript File

Exercise Preview

Exercise Overview

In this exercise, we’ll learn how to externalize JavaScript so it can be shared between pages.

Getting Started

Open your code editor if it isn’t already open.
Close any files you may have open.
For this exercise we’ll be working with the Sharing-JavaScript folder located in Desktop > Class Files > yourname-JavaScript jQuery Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).
Open index.html from the Sharing-JavaScript folder.
Preview the page in a browser. Notice on the right of this page, that there is the accordion you coded in the previous exercise. Test it out to see that it’s working.
Switch back to your code editor.
Open photo-gallery.html from the Sharing-JavaScript folder.
Preview the page in a browser. Notice this page also has the accordion on the right, but it’s not working because it doesn’t have any JavaScript.

Externalizing JavaScript

The photo gallery needs the same JavaScript code we currently have on the homepage (index.html). If we copy and paste the JavaScript code we’ll end up with two copies, making later updates harder. As a better alternative, we’ll move the JavaScript code into a shared JavaScript (.js) file, and link both HTML pages to it.

Switch back to your code editor.
Switch back to index.html.
Find the script tag around line 86.
Select all the code between the opening and closing script tags. Don’t select the <script> and </script> tags!
```
<script>
   document.getElementById('comingUpContent').style.display = 'none';
```
Code Omitted To Save Space
```
function showEventsWeek() {
```
Code Omitted To Save Space
```
}
   function showComingUp() {
```
Code Omitted To Save Space
```
}
   function showPastEvents() {
```
Code Omitted To Save Space
```
}
   function hidePanels() {
```
Code Omitted To Save Space
```
}
</script>
```
Cut the code.
Create a new file.
Paste the code into it.
Save the file as main.js into the js folder in the Sharing-JavaScript folder.

Linking to the JavaScript File

We need to link our HTML file to the external JavaScript file we just made.

Switch back to index.html.
Scroll to the bottom and find the empty script tags around line 86.
Edit the tags as shown below (make sure to delete any extra lines and spaces between the opening and closing script tags):
```
<script src="js/main.js"></script>
```
Save and preview the file. Test out the accordion to see it should still be working.
Switch back to your code editor.
Switch to photo-gallery.html.
At the bottom of the document, before the closing </body> tag add the following bold code:
```
</div>
<script src="js/main.js"></script> 
</body>
```
Save and preview the file in a browser. Test out the accordion to see it is now working on this page as well. Sweet.

NOTE: If you want to refer to our final code example, go to Desktop > Class Files > yourname-JavaScript jQuery Class > Done-Files > Sharing-JavaScript.

External JavaScript

It’s a best practice to externalize JavaScript and you should always do so when you’re ready to go live. For the sake of simplicity, however, we’ll continue to write JavaScript inside our HTML documents for the next few exercises. Later in the course we’ll work with external JavaScript.