3 Ways To Include Javascript In HTML – Simple Examples

Welcome to a tutorial on how to include Javascript in HTML. So you have just started with Javascript and wondering how to properly “put Javascript” into an HTML file?

There are 3 ways to include Javascript in HTML:

  1. External Javascript, load a Javascript file – <script src="FILE.JS"></script>
  2. Internal Javascript, add a block of code in the HTML document itself – <script>DO SOMETHING</script>
  3. Inline Javascript, directly add Javascript to an HTML element – <input type="button" value="Test" onclick="FUNCTION()"/>

That covers the quick basics, but there are more things to take note of. Read on for more examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes JS In HTML Useful Bits & Links
Tutorial Video The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the example code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

INCLUDE JAVASCRIPT IN HTML

All right, let us now get into the examples of how to include Javascript in HTML.

 

1) EXTERNAL JAVASCRIPT FILE

1a-external.js
alert("1A Loaded");
1b-external.html
 <!-- (A) RELATIVE URL -->
<script src="1a-external.js"></script>
 
<!-- (B) ABSOLUTE URL -->
<script src="http://localhost/1a-external.js"></script>

This should be straightforward, we are simply loading external Javascript files. A couple of things to take note of:

  • We can load the same script twice, it will run twice.
  • Absolute URL refers to a “full address” with the host, path, and file name.
  • Relative URL refers to a “short address” with the path and file name only, it will be resolved based on the current URL. For example, if the current URL is http://site.com/pages/, the above will resolve to http://site.com/pages/1a-external.js.

Be careful when using relative URLs, beginners commonly confuse themselves with “script is not loading”. E.G. The script is placed in http://site.com/1a-external.js, but the relative URL resolves to http://site.com/pages/1a-external.js.

 

2) INTERNAL JAVASCRIPT

2-internal.html
<p>Some HTML</p>
<script>
alert("Loaded");
</script>

Captain Obvious once again, internal Javascript is simply a block of Javascript code within the HTML file itself.

 

 

3) INLINE JAVASCRIPT

3-inline.html
<p onmouseover="alert('Mouse Over');">Hover to alert.</p>
<input type="button" value="Say Hello" onclick="alert('Hello World!');"/>

Lastly, we can directly code Javascript into the HTML elements themselves. This is usually done to handle certain events and user actions, for example:

  • onclick – When the user clicks on the element.
  • onhover – As the mouse cursor hovers over the element.
  • onkeypress – When the user presses a key.

 

4) SCRIPT IN THE HEAD OR BODY?

4a-demo.js
function demoA () {
  alert("Demo A");
}
4b-demo.html
<!DOCTYPE html>
<html>
  <head>
    <title>JS In HTML</title>

    <!-- (A) SCRIPT IN HEAD -->
    <script src="4a-demo.js"></script>
  </head>
  <body>
    <!-- (B) SCRIPT IN BODY -->
    <script>
    function demoB () {
      alert("Demo B");
    }
    </script>

    <!-- (C) HTML ELEMENTS -->
    <p onclick="demoA()">Demo A</p>
    <p onclick="demoB()">Demo B</p>
  </body>
</html>

The next million-dollar question is – Shall we put the <script> tags in the <head> or <body> section of the HTML? Well, <script> tags can actually be put into both sections. But please take note that there is a difference where you put them and the order of the scripts does matter.

 

 

5) LOADING ORDER

5a-first.js
alert("First loaded");
5b-second.js
alert("Second loaded");
5c-order.html
<!DOCTYPE html>
<html>
  <head>
    <title>JS In HTML</title>
 
    <!-- (A) THIS WILL LOAD FIRST -->
    <script src="5a-first.js"></script>
  </head>
  <body>
    <!-- (B) FOLLOWED BY HTML ELEMENTS -->
    <p>Demo A</p>
    <p>Demo B</p>
 
    <!-- (C) THIS WILL LOAD LAST -->
    <script src="5b-second.js"></script>
  </body>
</html>

HTML and Javascript are loaded in the order of “top to bottom, left-to-right”; Scripts that are closer to the top will be loaded first, scripts at the bottom of the page will be loaded last. This is very important, for a number of reasons:

  • We place the critical scripts at the top.
  • Place non-critical Javascript at the bottom to speed up the loading.
  • The loading order does matter. Common beginner mistakes – Use library functions when the library itself is not loaded. Try to get an HTML element when it is not loaded.

Follow up with “How Javascript Files Load” in the extra links below if you are interested.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

A BLAST FROM THE PAST

<script src="my-script.js" type="text/javascript"></script>
<script src="my-script.js" language="javascript"></script>

If you have poked around the various tutorials all over the Internet, you might have spotted a few <script> tags with the type or language attribute. That is actually something from the past, where we have to define the type of script being used. But with today’s standards, we can safely omit it and browsers will automatically assume it is Javascript by default.

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

Ways to Include Javascript in HTML (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “3 Ways To Include Javascript In HTML – Simple Examples”

Leave a Comment

Your email address will not be published. Required fields are marked *