How to add javascript to html-Front-end Q&A-php.cn

How to add javascript to html

WBOY

Release： 2023-05-21 09:04:07

Original

2951 people have browsed it

JavaScript is an object-based and event-driven scripting language widely used in web development. Web pages can be made more interactive and dynamic through JavaScript, and during development it is often necessary to add JavaScript code to HTML to realize the functions of the page.

This article will introduce how to add JavaScript to HTML, including internal scripts, external scripts and inline scripts.

1. Internal script

Internal script is to write JavaScript code directly in the HTML page. This method is suitable for situations where the amount of code is small, such as some simple interactive effects. The following is an example of using an internal script to change the text color when the mouse is placed:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内部脚本示例</title>
</head>

<body>
    <h1 onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">鼠标放上去改变颜色</h1>
</body>

</html>

Copy after login

In this example, the JavaScript code is directly added to the HTML element h1 through the onmouseover and onmouseout events to make the text color change when the mouse is placed. It turns red and black respectively when going up and moving away.

2. External script

External script stores JavaScript code in a separate file and then introduces it through the HTML page. This method is suitable for situations where the amount of code is large or multiple pages need to be shared, and can improve the maintainability and reusability of the code. The following is an example of introducing an external JavaScript file into an HTML page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外部脚本示例</title>
    <script src="example.js"></script>
</head>

<body>
    <h1>Hello World!</h1>
</body>

</html>

Copy after login

In this example, the external JavaScript file is specified via the src attribute of the <script> tag path, and then introduce the JavaScript code in the file into the HTML file, thereby realizing code reuse.

3. Inline script

Inline script means writing JavaScript code in the attributes of HTML tags. This method is suitable for situations where some specific interactive effects need to be implemented using JavaScript and only work in this tag. The following is an example of using inline script to pop up a prompt box when clicking a button:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行内脚本示例</title>
</head>

<body>
    <button onclick="alert('Hello World!')">点击这里弹出提示框</button>
</body>

</html>

Copy after login

In this example, the JavaScript code is directly added to the HTML button element through the onclick event, so that a prompt box pops up when the button is clicked.

The above three methods can add JavaScript code to HTML to achieve a more interactive and dynamic web page. In actual development, choose the corresponding method to add JavaScript code as needed, and pay attention to the readability, maintainability and reusability of the code.

The above is the detailed content of How to add javascript to html. For more information, please follow other related articles on the PHP Chinese website!