Categories
JavaScript

Adding JavaScript to your webpage

Websites are a mosaic of interconnected technology which your web browser weaves into a webpage.

From Google to Amazon, Facebook to Twitter, each site is seamlessly crafted from three components: HTML, CSS and JavaScript.

To be able to craft the sites you love, your browser must have access to HTML, CSS and JavaScript. And to access HTML, CSS and JavaScript, your browser must know where the files are located and how they were added to the website.

This post will help you understand how and where to add JavaScript to your website.

If you are new to JavaScript I’d strongly suggest you read my beginner’s guide to JavaScript basics followed by Getting started with JavaScript variables before reading this guide.

Otherwise, let’s begin. 

Adding JavaScript to your HTML

JavaScript is referenced from your HTML files, and there are three locations to add JavaScript within it.

  1. the <head>
  2. the <body>
  3. after the </body>

Each placement has different use cases and there are two things to keep in mind while making a decision about where to place your JavaScript:

  • your browser loads HTML from top to bottom
  • JavaScript takes time to load

Because of these reasons you want to make a decision to place your JavaScript within the HTML based on :

  • what the JavaScript needs to access within the HTML
  • how long the JavaScript file is

The good news is if you are adding JavaScript to your site as part of a GitHub package or a widget/component, there will usually be instructions telling you what the ideal positioning of the JavaScript is.

Otherwise, here are the three locations available for you to add JavaScript to your HTML.

In the <head>

Use this location if you’d like your JavaScript to load before the HTML content within the <body> tag.

Scripts placed here will usually execute before the Document Object Model loads.

This placement is useful for scripts like the Google Analytics tracking script which you’ll want to load quickly and before the rest of the content on the page loads (so you can track users).

This is a bad location for scripts that interact with the DOM as they will execute before the DOM is created or finished loading.

For example, if your JavaScript needs to access a paragraph tag <p> and is in the <head> it will likely return an error as it will not be able to locate the <p> tag (it hasn’t loaded yet!).

The error above will occur because your browser builds a web page from top to bottom. So when it reads the JavaScript instructions that reference a <p> tag before the <p> tag is created, it will return an error.

Within the <body>

This location is useful for JavaScript that you want to load at a very specific location in the DOM.

For example, if you’d like to load your JavaScript only once a specific HTML element on the page is loaded, you might consider placing it within the body after the specific element.

Usually, scripts do not require this level of specificity.

Also, this placement is bad for long scripts as the browser will need to finish reading the script before it can load the rest of the webpage. This will make the website load noticeably slower for the user.

I usually recommend this placement for advanced users.

If you are a beginner I’d suggest using the after the <body> placement.

After the <body>

This location is useful for JavaScript which needs to interact with the DOM.

Since scripts in this position only execute after the DOM is fully loaded, this JavaScript placement is ideal for beginners.

This placement is bad for scripts that need to load before the DOM.

For example, Google Analytics tracking scripts are not ideally suited for this position as they will only load once the entire page is loaded, and if you have a large page, you may lose some data as the analytics script only begins tracking after the page is loaded.

Ways to add JavaScript to HTML

After you’ve decided where you’d like to add JavaScript in your HTML, There are two ways to add JavaScript to your webpage. You can:

  1. add the JavaScript into the HTML directly
  2. link to a separate JavaScript file.

While many seasoned web developers will argue about the advantage of one approach over another, the bottom line is that both methods have their appropriate use case scenarios.

Inline JavaScript

This approach involves writing your JavaScript within the HTML directly within a <script></script> tag.

This approach is often called inline JavaScript and it looks like this:

<script>console.log("Hello world!");</script>

Placed within the <head> it looks like this: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dan's website</title>
    <script>
    console.log("Hello world!");
    </script>
</head>
<body>
    <h1>My website</h1>
    <p>Welcome to my website!</p>
</body>
</html>

Placed after the <body> it looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dan's website</title>
</head>
<body>
    <h1>My website</h1>
    <p>Welcome to my website!</p>
    <script>
    console.log("Hello world!");
    </script>
</body>
</html>

Place after the </body> it looks like this: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dan's website</title>
</head>
<body>
    <h1>My website</h1>
    <p>Welcome to my website!</p>
</body>
    <script>
    console.log("Hello world!");
    </script>
</html>

As a Separate JavaScript file

This involves writing the JavaScript in an external file to the HTML and then referencing it in the script tag. It looks like this:

<script src="my-JavaScript-file.js"></script>

As you can see the <script></script> tag is not wrapped around anything.

This is OK as you only need to point the browser to the JavaScript file.

Do keep in mind that your path to the .js file will vary depending on its location.

You’ll need to link the file based on its reference to the HTML file.

For example, if the .js file was in a subfolder called Javascript, your path might look like this:

<script src="javascript/my-JavaScript-file.js"></script>

Or, if you were linking a JavaScript file on another website, your path might look like this:

<script src="http://159.203.35.169/javascript/external-JavaScript-file.js"></script>

Here’s what it would look like placed within the <head>: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dan's website</title>
    <script src="my-JavaScript-file.js"></script>
</head>
<body>
    <h1>My website</h1>
    <p>Welcome to my website!</p>
</body>
</html>

Placed after the <body> it looks like this: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dan's website</title>
</head>
<body>
    <h1>My website</h1>
    <p>Welcome to my website!</p>
    <script src="my-JavaScript-file.js"></script>
</body>
</html>

Place after the </body> it looks like this: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dan's website</title>
</head>
<body>
    <h1>My website</h1>
    <p>Welcome to my website!</p>
</body>
<script src="my-JavaScript-file.js"></script>
</html>

Which way should I add JavaScript to my website?

The answer is it depends. As mentioned, each of the approaches above has its own use case scenarios.

If you are a beginner and just want to get started, I’d suggest adding your JavaScript after the </body> tag and linking it to an external JavaScript file.

Doing this will ensure that your JavaScript does not interfere with the loading of the webpage and that it has access to the DOM.

The only two exceptions to this suggestion for beginners is the Google Analytics tracking tag, which should be placed in the <head> tag and any JavaScript that has specific instructions about where it should be placed in the HTML file.

Ok, you should now be able to add JavaScript to your HTML file as well as determine the best location to add it.

Next up, it’s time to learn about one of the most powerful concepts in JavaScript. Functions.

Here’s my beginner’s guide to JavaScript functions.