Home >Web Front-end >Front-end Q&A >How to add javascript to html
How to add javascript to html
- WBOYOriginal
- 2023-05-21 09:04:072987browse
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>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>In this example, the external JavaScript file is specified via the src attribute of the 3f1c4e4b6b16bbbd69b2ee476dc4f83a 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>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!