How to add javascript to HTML page

As web applications continue to develop, JavaScript is becoming more and more popular, which can provide dynamic interactions and more complex functions for web pages and web applications. This article will help you learn how to add JavaScript to HTML pages.

1. Internal JavaScript

Internal JavaScript refers to placing JavaScript code directly in the HTML document. This code must be enclosed in a tag and placed within the or .

For example:

Example function welcome() { alert("Hello World!"); } Click me! When the user clicks the button, a message box will pop up showing "Hello World!".

2. External JavaScript

When there is a lot of JavaScript code, it is more appropriate to put it into a separate external file than to put it into the HTML document. This makes the code easier to maintain, modify, and reuse across multiple pages.

To add external JavaScript code to an HTML document, use the tag and set the src attribute to the URL of the JavaScript file.

For example:

Example Click me! Here, we added a tag in and specified the src attribute as the URL of the JavaScript file "example.js". Where JavaScript code is needed, we can directly reference the functions.

3. External libraries

JavaScript libraries are a set of reusable functions and code snippets that can be used to speed up web development. These libraries make it easier for developers to implement common tasks such as jQuery, React, and Vue.js.

To add an external library to an HTML document, use the same method as an external JavaScript script.

For example:

Example Click me! Hello World!

Here, we added a tag in and specified the CDN link whose src attribute is jQuery. Where we need to use jQuery, we can directly use its functions.

Summary:

The above are three methods of how to add JavaScript to HTML pages: internal JavaScript, external JavaScript and external libraries. We can flexibly choose different methods to write JavaScript code according to the needs of the project.

No matter which method you use, it’s important to remember to always keep your code clear, easy to read, and easy to maintain.