Sharing JavaScript Across Pages

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

1. Open your code editor if it isn’t already open.
2. Close any files you may have open.
3. 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).
4. Open index.html from the Sharing-JavaScript folder.
5. 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.
6. Switch back to your code editor.
7. Open photo-gallery.html from the Sharing-JavaScript folder.
8. 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.

1. Switch back to your code editor.
2. Switch back to index.html.
3. Find the script tag around line 86.

4. 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>
   

5. Cut the code.

6. Create a new file.

7. Paste the code into it.

8. 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.

1. Switch back to index.html.
2. Scroll to the bottom and find the empty script tags around line 86.

3. 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>
   

4. Save and preview the file. Test out the accordion to see it should still be working.
5. Switch back to your code editor.
6. Switch to photo-gallery.html.

7. At the bottom of the document, before the closing </body> tag add the following bold code:

   </div>
   <script src="js/main.js"></script> 
   </body>
   

8. 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.