If you are a beginner in javascript the first question you will ask: How to add javascript to the HTML page? This is the first step to using javascript.
Answer: We have 3 ways to include javascript to the Html page.
Okay, I will example and explain the advantages and disadvantages of each way.
1. Include javascript inline to Html page
1.1 How to use
All Html tags always have one or more attributes to fire some events when users interact. So write javascript inline is write inside of that attribute ex: Attribute onclick of a button.
Example: I want to display box information show “Hello world” when I click onto the “Click me” button.
<button type="button" onclick="alert('Hello world')">Click me </button>
1.2 Advantages
- Fast code.
- Easy to begin code js.
1.3. Disadvantages
- Very difficult to maintain source code
- Cannot handle complex operations
- Cannot write long code in the attribute of the Html tag.
- Reduce the performance load time of websites.
- Can not reusable source code js.
1.4. Discuss
This is not a good way to add javascript to Html page. You can use this way if you have something small code you want to do ex: show info, fire trigger, call a certain function... but I recommend not to use this way.
2. Include internal javascript
2.1 How to use
To import internal javascript into the Html page, we use <script> tag to write code inside this tag.
Example :
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<script>
document.write("current time : " + new Date().toString());
</script>
</body>
</html>
- Where can I put a <script> tag?
Answer: You can put a <script> tag inside of the head or body tag, put start or before end tag. I recommend putting the <script> tag before the end of the <body> tag. Because it will help web pages load faster.
- How many <script> tags can be put into a Html page?
Answer: You can put more than one <script> tag
2.2 Advantages
- Reuse better than write javascript inline.
- Can write long code js.
- Can be optimization page-load better compare with javascript inline.
2.3. Disadvantages
- Only reuse code for that page, can not reuse code for other pages.
- Make the Html page heavy, slow load page.
- You can optimize time load but it is not better, you can not use load js async.
- Still difficult to manage source code.
2.4. Discuss
Using include internal javascript in Html is better than when comparing it with javascript inline. But it still has more impacts. You can use this way for small pages and this page is not important or you are studying … I do not recommend using this way for real projects.
3. Add javascript external file to Html page
3.1 How to use
First, we need to create a javascript file with extension .js.
I just created a home.js file and now we need to add an external js file into the html page. To add using <script> tag to import.
Index.html file
<!DOCTYPE html>
<html>
<head>
<title>Example import external js</title>
<script src="home.js"></script>
</head>
<body>
</body>
</html>
Home.js file
document.write("<h2>Hello world</h2>");
document.write("current time : " + new Date().toString());
And result:
- Where to put the js external file in HTML??
Answer: You should put it before the end <body> tag is a better way because js file is no need to load when load Html & CSS, put here js file will load finally.Mabe as you know js will stop generating GUI when reading it. This will make low page load if you put js to <head> tag or begin of <body> tag.
3.2 Advantages
- Centralized management
- Easy to manage and maintain
- Best load page performance with load async.
- Best reusable, we can create utility files and reuse in many pages of Html.
3.3. Disadvantages
If you are a beginner this will be more difficult to approach because it starts with more steps.
3.4 Discuss
This is a better way to add javascript code to the Html page. I recommend you use this way when you learn javascript.
4. Summary
I just introduced 3 ways to import js to Html page and the advantages & disadvantages of them.
I hope this article is helpful to you if you are a beginner and can not understand which is a better way to do it.
If you have any questions, please comment below. I will support you soon.
Thank you for reading my article!!