Yogesh Chauhan's Blog

What is the best way to add JavaScript Code into HTML?

in HTML & JavaScript on July 24, 2019

It’s a common question when you start learning JavaScript and wonder that where should you put your JavaScript code in HTML file. I have faced it. Many others have as well. Let’s go through that amazing JavaScript script tag one by one and decide together.

First of all, all the JavaScript code must be inserted between script tag. I know, I know. That is really basic information but for those who don’t know how JavaScript works, I needed to tell them. Let me show the code as well.



document.getElementById("example").innerHTML = 
  "All JavaScript code must be written in script tag, like this code.";
  

PLEASE NOTE: Although JavaScript is the default scripting language in HTML, there are many old JavaScript examples in which you’ll see type attribute:



  <script type="text/javascript">
  

which is not required at all but it used to be required. Also, in php, you need to add that type attribute as well in order to include JavaScript files.

How many script tags you can insert in one HTML page?

The answer is AS MANY AS YOU WANT.

And script tags can be placed in either body or head tag.

Can you add script tag in body and head both?

YES, YOU SURELY CAN.

Let's look at the following examples for adding script tag to HTML head tag.



  <head>
  <script>
  function Function() {
    document.getElementById("example").innerHTML = "Script tag is in head tag.";
  }
  </script>
  </head>


Now, let's look at the following examples for adding script tag to HTML body tag.



  <body>
  <button type="button" onclick="Function2()">Click to know about script placement</button> <br>
  <p id="example2"></p> <br>

  <script>
    function Function2() {
      document.getElementById("example2").innerHTML = "Script tag is in body tag.";
    }
  </script>


REMEMBER to place JavaScript code at the bottom of the HTML code, right before closing the body tag. When the browser interprets and displays the page, the JavaScript code takes longer time to interpret. So if you place the code at the bottom, it'll improve the display speed.

Now, apart from above methods to add JavaScript code, there is one more and that is to add external javascript file to the HTML code. All you do is write down the same code which is in between the script tag to a different file and name it as "filename.js". Just add ".js" at the end to make it a JavaScript file. for e.g.



  // This is our .js file code
  function Function2() {
    document.getElementById("example2").innerHTML = "Script tag is in body tag.";
  }

REMEMBER that external .js file does not contain any script tag itself.

Now add that file to the HTML code like this..using script tag.



  <script src="FILENAME.js"></script>


You can place this line between the head tag or body tag.

Now, that brings us to our main question of what is the best way to add js code to HTML code.

The answer is "external JS files".

Because...

   It separates the HTML code and JS code.

   It's really easy to read both files and maintain easily.

   It's really convenient when you want to use the same JS code to many webpages.

   Browser caches the JS files separately. So, it can really speed up the page loads.

You can even use a .js file from external references like from the web... for e.g.


  
    <script src="https://www.yogeshchauhan.com/JS/FILENAME.js"></script>



Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Use inline if to make a shorter conditional syntax in ReactReactHow to create bouncing balls using HTML canvas and JavaScript?HTMLWhat’s a Strict mode in JavaScript?JavaScriptHow to Make a Simple Module with a Form and Menu Link in Drupal 7.x?Drupal3 Ways we can create URLSearchParams Objects in JavaScriptJavaScriptWordPress: How to display slider repeater fields in ACF?WordPress