Linking your JavaScript file

2m:51s

You can write JavaScript directly in the HTML within <script> tags.

<script>
  // JavaScript goes here
</script>

But this is a rare practice.

Most of the time, you’ll want to write your JavaScript in a separate file that ends with a .js extension. Doing so lets you use the same JavaScript across all your HTML files.

These JavaScript files can be named anything you want. Most people name their first JavaScript file either app.js or main.js.

When you’re starting out, you can store these files in js folder that’s located at the same level of your HTML files for easy identification.

JavaScript files are located in a js folder for easy identification

Linking your JavaScript file to your HTML file.

For your JavaScript files to work, you need to link them to your HTML. To link them, you just need to add a <script> tag with the src attribute to your HTML.

<html>
  <head>
    <meta charset="utf-8" />
    <title>Title of website</title>
  </head>
  <body>
    <!-- Stuff -->
    <script src="js/main.js"></script>
  </body>
</html>

Now, go ahead and type in this code in your JavaScript file to make sure it’s linked properly.

alert('Your JavaScript is linked')

When you’re done, open up your index.html file with a browser of your choice. If your JavaScript file is linked, you should get an ugly prompt.

alert produces a prompt like this one here

Once you’re sure your JavaScript file is linked, remove the code you just typed. You won’t ever use it again.

Async and Defer attributes

In the past, we all link our JavaScript files at the bottom of the HTML, before the closing </body> tag.

Today, you can use async and defer attributes to link JavaScript files at different points in your HTML file. You can find out more about async and defer in this article.

Long story short: You can use now load your JavaScript files at the top of your HTML file (within the <head> element). If you do this, make sure you use defer. This is the ideal approach nowadays.

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

Relative vs Absolute paths

In the examples above, you linked your JavaScript file with a relative path. They begin directly with the name or folder of the file you’re trying to link.

This code below tells browsers to look into the js folder for the main.js file.

<!-- Example of relative url -->
<script src="js/main.js"></script>

Absolute paths begin with a / or a HTTP protocol:

<!-- Examples of absolute url -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/js/main.js"></script>

Both approaches work.

Relative paths are easier to use for practice. But in real-world situations, we often link JavaScript files with absolute paths.

JavaScript Modules

JavaScript modules give you the ability to split your JavaScript code into multiple files. This is useful for writing reusable code.

To enable modules, you need to add a type attribute to your <script> tag.

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

I highly recommend adding type="module" to all your JavaScript files nowadays.

You’ll need to learn enough JavaScript before you can take advantage of JavaScript modules, so we’ll talk more about them in a much later lesson.

Exercise

Create a folder on your computer for going through this course. In this project folder, create a HTML file and a JavaScript file. Link your JavaScript file to your HTML file.