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, you'll master a fundamental development practice: externalizing JavaScript code into separate files. This approach enables code reusability across multiple pages while maintaining a single source of truth for your functionality. By the end of this exercise, you'll understand why external JavaScript files are essential for scalable web development and how they streamline maintenance workflows.

Getting Started

Before we dive into externalizing JavaScript, let's set up our workspace and examine the current state of our files.

1. Launch your code editor if it isn't already running.
2. Close any open files to start with a clean workspace.
3. Navigate to the Sharing-JavaScript folder located in Desktop > Class Files > yourname-JavaScript jQuery Class. If your editor supports folder-based workflows (like Visual Studio Code, WebStorm, or Sublime Text), open this entire folder as a project for better file management.
4. Open index.html from the Sharing-JavaScript folder.
5. Preview the page in your browser. Notice the accordion functionality on the right side of the page—this is the interactive component you built in the previous exercise. Click through the accordion sections to verify it's functioning properly.
6. Return to your code editor.
7. Open photo-gallery.html from the same folder.
8. Preview this page in your browser. You'll notice this page contains an identical accordion interface, but it's completely non-functional. This is because the JavaScript code exists only in the index.html file, highlighting the problem we're about to solve.

Externalizing JavaScript

Currently, our photo gallery page lacks the JavaScript functionality that powers the accordion. While copying and pasting the code might seem like a quick fix, this approach creates maintenance nightmares and violates the DRY (Don't Repeat Yourself) principle. Instead, we'll implement the professional solution: moving our JavaScript into an external file that both pages can reference. This approach ensures consistent functionality across pages while maintaining a single, authoritative codebase.

1. Switch back to your code editor and open index.html.
2. Locate the script tag around line 86.

3. Carefully select all the JavaScript code between the opening and closing script tags. This is crucial: select only the JavaScript content, not the HTML script tags themselves.

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

4. Cut this code using Ctrl+X (Windows) or Cmd+X (Mac).

5. Create a new file in your editor.

6. Paste the JavaScript code into this new file.

7. Save the file as main.js in the js folder within the Sharing-JavaScript directory. This naming convention and folder structure follows industry standards for organizing web assets.

Linking to the JavaScript File

Now that we've externalized our JavaScript code, we need to establish the connection between our HTML files and the new JavaScript file using the proper linking syntax.

1. Return to index.html in your editor.
2. Scroll to line 86 where you'll find the now-empty script tags.

3. Modify the script tag to reference our external file. Remove any whitespace between the tags and add the src attribute:

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

4. Save the file and preview it in your browser. Test the accordion functionality thoroughly—it should work exactly as before, demonstrating that external JavaScript files provide identical functionality to inline code.
5. Switch back to your code editor and open photo-gallery.html.

6. Add the same script reference just before the closing </body> tag. This placement ensures the HTML content loads before the JavaScript executes:

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

7. Save and preview the photo gallery page in your browser. Test the accordion functionality—it should now work perfectly, proving that both pages are successfully sharing the same JavaScript codebase.

   NOTE: For reference, you can examine our completed implementation in Desktop > Class Files > yourname-JavaScript jQuery Class > Done-Files > Sharing-JavaScript.