Including External JavaScript Files in Your Code

The most popular way to include JavaScript in HTML documents is by using the src attribute of the script element. A script element with a src attribute works exactly like a script element with JavaScript between the tags, except that if you use the src attribute, the JavaScript is loaded into the HTML document from a separate file. Here’s an example of a script element with a src attribute:

In this case, you would have a separate file, named myScript.js, that would reside in the same folder as your HTML document. The benefits of using external JavaScript files are that using them

Keeps your HTML files neater and less cluttered
Makes your life easier because you need to modify JavaScript in only one place when something changes or when you make a bug fix

Creating a .js file

Creating an external JavaScript file is similar to creating an HTML file or another other type of file. To replace the embedded JavaScript with an external JavaScript file, follow these steps:

In Sublime Text, choose File→New File.
Copy everything between from MyFirstProgram.html and paste it into your new .js file.

Notice that external JavaScript files don’t contain
Let’s Count to 10 with JavaScript!

Your new file, countToTen.js, should look like this:
```
function countToTen(){
 var count = 0;
 while (count < 10) {
 count++;
 document.getElementById("theCount").innerHTML +=
count + "
";
 }
}
```
After you’ve saved both files, you should see them inside your project in the Sublime Text sidebar.

Viewing multiple files in your project folder in Sublime Text.

Keeping your .js files organized

External JavaScript files can sometimes get to be very large. In many cases, it’s a good idea to break them up into smaller files, organized by the type of functions they contain. For example, one JavaScript file may contain scripts related to the user login capabilities of your program, while another may contain scripts related to the blogging capabilities.

For small programs, however, it’s usually sufficient to have just one file, and many people will name their single JavaScript file something generic, such as app.js, main.js, or scripts.js.

JavaScript files don’t need to be in the same folder as the HTML file that includes them. In fact, you should create a new folder specifically for storing your external JavaScript files. Most people call this something like js.

Follow these steps to create a js folder inside of your Sublime Text project and move your js file into it:
1. Right-click on the name of your project in the Sublime Text sidebar.
  
  A submenu appears.
2. Choose New Folder from the submenu.
  
  A Folder Name text area appears at the bottom of the Sublime Text window.
3. Enter js into the folder name text field and press Enter.
  
  A new folder called js appears in the sidebar.
4. Open countToTen.js and choose File→Save As and save it in your new js folder.
5. Right-click on the version of countToTen.js that’s outside of your folder and choose Delete File from the submenu.
6. Open up MyFirstProgram.js and change your script element to reflect the new location of your js file, like this:
When you open MyFirstProgram.html in your browser (or simply click refresh), it should look exactly like it did before you moved the JavaScript file into its own folder.

Creating a .js file

Let’s Count to 10 with JavaScript!

Keeping your .js files organized

Including External JavaScript Files in Your Code

Coding with JavaScript For Dummies

Creating a .js file

Let’s Count to 10 with JavaScript!

Keeping your .js files organized

About This Article

This article is from the book:

About the book authors:

This article can be found in the category: