How to Include Javascript Code in HTML Page

I have shared the introduction of JavaScript with an example and today I am going to tell you in detail How ...

Where To Add Your JavaScript File, how to include external javascript in html, how to create external javascript file, how to link javascript to html and css, javascript include external jsHello, I hope you all are doing well. In the last post, I have shared the introduction to JavaScript with an example and today I am going to tell you in detail How to Include Javascript Code in HTML Page and many more things that can help you in understand JavaScript easily. All right guys lets revise what we have learned in the past article, you saw me adding <script> </script> code at the bottom of the <body> tags. Today, I will show you in detail that what was the reason for adding the tags at the bottom and how can you add an external JS file.

How to Include Javascript Code in HTML Page

We have two methods to include the JS code in the Html file. 
  • Put the <script> tag in the Html head or body with Javascript code

<script type="text/javascript">

 alert("I am learning JavaScript");

</script>

  •  Put the script tag in the HTML head or bottom of the body with src attribute to the JavaScript file location. 

 <script type="text/javascript" src="Test.js"></script>

Best way to include JavaScript Code in HTML

  • You can add <script> tag in the <head> section of your HTML file, in the start of the <body> tag and also at the <bottom> of the body tag.
  • But I would advise you to add it at the end of the <body> tag. I will show you, why it should be at the bottom of the body tag.
  • The HTML page always loads from top to bottom & if your JS file will be present in <head> or opening of the <body> tag, then browser will run JavaScript first, before loading any of the content and it will leave a negative impact on your webpage.
  • As you can see in below image that I have added <script> tag at the start of <body> tag and add a new tag of <h1> and <p> to know how code works.
Where To Add Your JavaScript File, how to include external javascript in html, how to create external javascript file, how to link javascript to html and css, javascript include external js
  • Save these file and press ALT + B to execute this code.
  • You will notice that as you see in the picture underneath that only <script> tag alert comes up first without loading the rest of page. 
Where To Add Your JavaScript File, how to include external javascript in html, how to create external javascript file, how to link javascript to html and css, javascript include external js
  • But once I click at ok then it has loaded the rest of the page now, as indicated in the image here:
Where To Add Your JavaScript File, how to include external javascript in html, how to create external javascript file, how to link javascript to html and css, javascript include external js
  • If I put the <script> at the bottom of the <body> tag and you can see image down:
Where To Add Your JavaScript File, how to include external javascript in html, how to create external javascript file, how to link javascript to html and css, javascript include external js
  • Now save it go again to the browser and reload the page.
  • Content will appear first and then we will have the alert form.
  • So, placing JavaScript code at the end of <body> tag is the best way.

Where To Add Your JavaScript File

So, short scripts like this can be added at the bottom of the <body> content in HTML pages. In case, your JS content is large and has more than 10 lines of code and full with links here and there.  
  1. It would not mess up your Html file content page.  
  2. You have to update it once if you are using multiple pages.
  3. It would make your code easy to read and clear.
Its time to show you how to do this. Create a new file by pressing Ctrl + N and add your script   alert("I am learning JavaScript");”  content in this file. Save it with the name “Test.Js”. All JavaScript files have JS ending.Where To Add Your JavaScript File, how to include external javascript in html, how to create external javascript file, how to link javascript to html and css, javascript include external jsNow go back to the “index.html” file and add the code as you see down. When you will refresh the web browser then it will automatically reload and JS file through source code. Look down the image.Where To Add Your JavaScript File, how to include external javascript in html, how to create external javascript file, how to link javascript to html and css, javascript include external jsHere is a little preview of what we have done up. If you have a small script then you should definitely include in Html file at the bottom of the body tag. Otherwise, externalize it and add in a separate file as I have shown you before in images. That’s it for today. I hope you understand it and if you have any question related to this topic. Let me ask in the comment section and I will answer you. Take good care of yourself and see you in my next tutorial. Have a nice day!

Leave a Reply

Leave a Reply