There are two ways to add JavaScript code to your HTML document.
You can embed the JavaScript code inside a <script> tag, like so:
<!doctype html>
<html lang="en-US">
<head>
<title>My Document</title>
<!-- Embed script inside <script> tag -->
<script>
(function sayHello() {
return "Hello!";
})();
</script>
</head>
<body>
<!-- Body content goes here -->
</body>Or you can save the code in a .js file, upload it to your server, and link to it from the <script> tag, like so:
<!doctype html>
<html lang="en-US">
<head>
<title>My Document</title>
<!-- Link to script from <script> tag -->
<script type="text/javascript" src="js/sayHello.js"></script>
</head>
<body>
<!-- Body content goes here -->
</body>Linking to a JavaScript File From Your HTML Document
To use a JavaScript file in your HTML webpage, you need to tell the web browser where to find the file. This is done by setting the src="" attribute to either the file’s relative path on the server or its full URL.
Using a Relative Path
Imagine your computer’s file system as a neighborhood. Every file and folder is like a house with its unique address.
Now, a relative path is just like giving directions from one house (that is, your HTML file) to another (your JavaScript file) within this neighborhood.
It’s about saying things like “next door,” “down the street,” or “two blocks away” to specify a file’s location relative to another.
HTML and JS file in the same folder
If your HTML document and JavaScript file are roommates (in the same folder), you just need to tell the HTML file the name of the JavaScript file:
<script type="text/javascript" src="sayHello.js"></script>JS file in a child folder of the HTML file’s folder
If your JavaScript file is in a subfolder within the folder where your HTML file is, you need to specify the name of this subfolder, followed by a /, then the name of the JavaScript file:
<script type="text/javascript" src="js/sayHello.js"></script>JS file in a parent folder of the HTML file’s folder
And if your JavaScript file is in a parent folder, you need to specify ../ to tell the HTML file to go one level up. If you need to go more levels up, you can stack as many ../ as needed:
<script type="text/javascript" src="../js/sayHello.js"></script>Linking to a Full URL
Sometimes, you might want to use a JavaScript file that’s not in your neighborhood at all. In fact, it could be in a completely different town (say, on a different website, a web server, or a Content Delivery Network).
In this case, you need to set the full address (URL) to the <script> tag’s src="" attribute:
<script type="text/javascript" src="https://example.com/js/sayHello.js"></script>Pro Tip: Version Control With URL Parameters
When using external JavaScript files, browsers typically cache (store a local copy of) these files to speed up load times on subsequent visits.
While this is great for performance, it can be tricky when you make updates to your JavaScript file. The browser might continue to use the cached, older version and ignore your fresh, updated code.
To solve this, you can leverage a simple but effective method: versioning your JavaScript file using URL parameters.
In the URL pointing to your JavaScript file, you can add a query string at the end, like ?version=1.
Here’s what it looks like:
<script src="myScript.js?version=1"></script>The browser sees this as a completely different file from myScript.js without the query string, and so it fetches and caches a new copy.
When you make updates to your script, simply increment the version number:
<script src="myScript.js?version=2"></script>Now, the browser will fetch and cache this “new” file, ensuring that your users get the latest and greatest version of your JavaScript.
When to Embed JavaScript, and When to Link It
Embed your JavaScript code inside the <script> tag of your HTML document when:
- Small Amount of JavaScript: If you have a small amount of JavaScript code that’s specific to a single page, embedding it directly into your HTML can be a convenient and sensible option.
- Page-specific Functionality: If the JavaScript is specific to a single page and will not be reused on other pages, it makes sense to embed the script directly into that page.
Link your JavaScript code using the src="" attribute of the <script> tag when:
- Large Amounts of JavaScript: If your website utilizes a significant amount of JavaScript code, keeping your scripts in separate files can help organize your code and make your HTML files easier to read and manage.
- Code Reuse: If you have JavaScript code that needs to be used on multiple pages, it’s more efficient to place it in a single file and link to that file from each page. This promotes reusability and helps maintain consistency across your website.
- Caching Benefits: Browsers can cache external JavaScript files. This means that when a user visits another page on your site that uses the same JavaScript file, the browser doesn’t need to download the file again. This can help your web pages load faster for repeat visitors.
In general, for large projects and professional web development, linking to external JavaScript files is often preferred due to these advantages in organization, reusability, and performance.
