This is How to Add JavaScript to an HTML File

This is a simple guide that shows you how to add JavaScript to an HTML file in order to implement its interactive features on a webpage.

JavaScript is a scripting language that can be implemented by using JavaScript statements that are usually embedded or linked to a webpage.

There are two generally accepted ways to add JavaScript to an HTML file and both require a special HTML SCRIPT tag.

Add JavaScript With the HTML SCRIPT Tag

SCRIPT tags that come in the form of:

<script>
   …
</script>

Can be placed literally anywhere within your HTML document but it is recommended that you should keep it within the HEAD tags. For performance reasons, the other recommended place to insert JavaScript files is at the end of the HTML file just before the closing BODY tag

You need to do this because the SCRIPT tags alert the browser program to start interpreting all the text between these tags as a script.

Therefore you need to place your JavaScript code within the tags as follows:

<script ...="">
   JavaScript code
</script>

Here is a simple example that allows us to print out “Hello World“. We do this by calling the JavaScript function document.write, which takes a string parameter of what we want to print out.

With this function, you can write out plain text or even HTML. This is the basic syntax.

<script>
    document.write("Hello World!")
</script>

In the real world, you will find the need to implement JavaScript code that spans several hundred lines of code, if not thousands. Furthermore, you may find yourself needing to implement your scripts code from multiple sources.

Embedding this code in SCRIPT tags might not be the most ideal situation. The solution here would be to link to an external JavaScript file that usually ends with a .js file extension.

To do this you would simply modify the SCRIPT tag and add the SRC attribute which holds the URL or relative path to the JavaScript file.

Here are three main reasons why you would want to link to external JavaScript files.

• Portability: Externally linked scripts allow you to use that code on multiple web pages. It also allows you to maintain the source code independently of your HTML
• Codesharing: This allows you to share your JavaScript code as libraries that others can use. You also have the option of using other developers’ libraries
• Performance: externally linked scripts especially those loaded from another domain or server like a CDN (content delivery network) help reduce the number of HTTP requests. It also allows these filed to be cached locally by the web browser

Following is some very basic example code to add JavaScript in an HTML file That prints out:

Hello World From Script!
Hello World From Embedded!

This is the contents of the HTML file:

<meta charset="UTF-8"> 
<title>Document</title>
<script src="script.js" defer=""></script> 
   
<h1>Embed javascript in html file</h1>
<div id="elem"></div>
<script>
  let eleme = document.getElementById("elem");
  eleme.innerHTML += "Hello World From Embedded!<br>";
</script>

This is the contents of script.js

The above script finds an element within the HTML file with an id of “elem” and changes the contents to Hello World From Script!
.

The embedded script then finds the same element within the HTML file with an id of “elem” and appends Hello World From Embedded! to the content.

Conclusion

There you have it. You have just seen how to add JavaScript to an HTML file by either embedding the script statements wrapped in the SCRIPT tags or by linking to it externally.

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.