- 1.1 How to use
- 1.2 Advantages
- 1.3. Disadvantages
- 1.4. Discuss
- 2.1 How to use
- 2.2 Advantages
- 2.3. Disadvantages
- 2.4. Discuss
- 3.1 How to use
- 3.2 Advantages
- 3.3. Disadvantages
- 3.4 Discuss
- 4. Summary
Okay, I will example and explain the advantages and disadvantages of each way.
1.1 How to use
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>
Try click button below:
- Fast code.
- Easy to begin code js.
- 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.
2.1 How to use
<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
- Can write long code js.
- 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.
3.1 How to use
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.
<!DOCTYPE html> <html> <head> <title>Example import external js</title> <script src="home.js"></script> </head> <body> </body> </html>
document.write("<h2>Hello world</h2>"); document.write("current time : " + new Date().toString());
- 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.
- 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.
If you are a beginner this will be more difficult to approach because it starts with more steps.
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!!