How do I link a JavaScript file to an HTML file?

javascript

script-loading

html5

javascript-best-practices

byAlex Kataev·Oct 28, 2024

Add a <script> tag right before the </body> tag in your HTML document. The src attribute is used to reference your JavaScript file:

<script src="your-script.js"></script>

Ensure the src value matches the exact relative or absolute path to your JavaScript file. This ensures the script is properly fetched and executed.

Script loading 101

Web pages load resources in the order they're mentioned in your HTML document. Hence, placing <script> tags near the end of the <body> ensures the rendering of your page is not blocked by the script's loading or execution. This is particularly useful when your scripts use libraries like jQuery, which needs to load prior to scripts that depend on it.

If you're using jQuery, it's a good idea to include it from a CDN for better performance and reliability:

<script src="https://code.jquery.com/jquery-3.x.x.min.js"></script>

After this, include your custom scripts:

<script src="path/to/your-script.js"></script>

Specifics of script loading and performance

While scripts are typically placed at the end of <body>, you can use the async and defer attributes to control the script loading behaviour.

async: Downloads the script while parsing the HTML but pauses parsing to execute the script once it's ready.
defer: Downloads the script during HTML parsing but only executes it after HTML parsing is complete.

Example usage:

<script src="your-script.js" defer></script>
<script src="another-script.js" async></script>

Note: async and defer are only applicable to external scripts having a src attribute.

Keeping up with HTML5

In HTML5, it is no longer required to include the type="text/javascript" attribute. It's cleaner to simply use:

<script src="your-awesome-script.js"></script>

Note: HTML5 knows we're cool kids and don't write scripts in anything but JavaScript.

Making use of jQuery

The jQuery library provides a shorthand version $(function(){...}); for jQuery(document).ready(...). This ensures that your JavaScript code is only executed once the DOM is fully loaded.

Example usage:

$(function(){
    // Your jQuery code goes here
});

Note: Waiting is tough, but sometimes necessary.

Writing maintainable code

It's good practice to separate your concerns for clean, maintainable code. Use comments and keep your scripts modular. For instance, categorize your scripts into utilities, components, and services and link them in your HTML:

<!-- Utility Scripts -->
<script src="utils/format-date.js"></script>

<!-- Component Scripts -->
<script src="components/modal.js"></script>

<!-- Service Scripts -->
<script src="services/api-service.js"></script>

Note: Well-organized scripts are like tidy desk drawers, you know where everything is.

Scripts execution and debugging

Always double-check your file paths and monitor your console for errors. Incorrect paths or loading orders can cause JavaScript errors. Also, version control is a godsend - make good use of it to effectively manage your scripts and debug when needed.

explain-codes / Javascript / How do I link a JavaScript file to an HTML file?

Linked

Can I run JavaScript before the whole page is loaded?



Jquery - $ is not defined



Is it wrong to place the



Where should I put `



Include another HTML file in a HTML file

