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>



amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
How to refresh a page using PHP at regularly occurring intervals?PHPHow to get recent posts in WordPress?WordPressHow to create a secure random number using JavaScript?JavaScriptIntroduction to components and templates Part 3: Data bindingAngularJavaScript arrays: a separate data type or Objects?JavaScriptWhy do we need HAVING Clause in SQL?SQL/MySQL