YogeshChauhan.com
What is the best way to add JavaScript Code into HTML?
July 24, 2019

I know it’s a common question when you start learning JavaScript and ask people or professor or any teacher that where should you put your JavaScript code when including 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.

<!DOCTYPE html> <html> <head> <script> function Function() { document.getElementById("example").innerHTML = "Script tag is in head tag."; }</script> </head><body data-rsssl=1><p id="example">A Paragraph</p> <button type="button" onclick="Function()">Try it</button><script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async src="https://www.yogeshchauhan.com/wp-content/cache/minify/1615d.js?x75580"></script> </body></html>

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

<!DOCTYPE html><html><body data-rsssl=1> <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> </body></html>

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?x75580"></script>

That's it guys. I hope it helped you guys to choose the right method for your JavaScript code. Thank you!

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 4 How to use data-* Attributes in HTML? Mar 4 The substr() method in JavaScript and how it’s different from substring() Mar 4 A complete guide to add responsive YouTube videos using HTML and CSS Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript

You might also like these

Solution to “NullInjectorError: No provider for module” in Angular 9AngularJavaScript Number MethodsJavaScriptHow to create a Progress Bar using JavaScript?JavaScriptArray destructuring and Object destructuring in JavaScriptJavaScriptIs there a way to do a FULL OUTER JOIN in MySQL?SQL/MySQLList of social media icon logo color codes in HEXMisc