Home >Web Front-end >Front-end Q&A >How to add javascript to html
How to add javascript to html
- PHPzOriginal
- 2023-05-27 09:02:371696browse
HTML and JavaScript are the two most commonly used client-side technologies. HTML is the foundation of web pages, while JavaScript enhances the interactivity and dynamic nature of websites. When writing HTML code, we can easily add JavaScript code to achieve more functions and effects. This article explains how to add JavaScript to HTML.
I. Using built-in tags
HTML 5 introduced the built-in 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag for embedding JavaScript code in pages. You can place the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag at the beginning or end of your HTML code and add JavaScript code within it. For example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
<meta charset="UTF-8">
</head>
<body>
<h1>欢迎来到 JavaScript 世界</h1>
<script>
alert("Hello World!");
</script>
</body>
</html>In the above code, we added a simple alert dialog box in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag to use when the page loads Display message. It is important to note that if you put the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag in the head, you should use an async or lazy attribute to load the JavaScript file to ensure that the HTML page is not blocked by JavaScript code.
II. Using external files
If your JavaScript code is long or needs to be used in multiple pages, it is best to save it in a separate .js file and use external 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag for reference. For example:
<!DOCTYPE html> <html> <head> <title>JavaScript Demo</title> <meta charset="UTF-8"> <script src="script.js"></script> </head> <body> <h1>欢迎来到 JavaScript 世界</h1> </body> </html>
In the above code, we referenced a file named script.js## using the src attribute of the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. # of external JavaScript files. This approach improves the maintainability and reusability of the code and also helps shorten the length of the HTML code.
3f1c4e4b6b16bbbd69b2ee476dc4f83a tag in the 93f0f5c25f18dab9d176bd4f6de5d30e or # of the HTML document ##6c04bd5ca3fcae76e30b72ad730ca86d tag. Placing it in 93f0f5c25f18dab9d176bd4f6de5d30e ensures that the JavaScript code is executed before the page content is loaded, helping to improve page performance and responsiveness. However, if your JavaScript code implements dynamic effects or interactive features on the page, it should be placed in the 6c04bd5ca3fcae76e30b72ad730ca86d tag. IV. Event Listening
In JavaScript, event listening is an important way to achieve interactivity and dynamic special effects. For example, you can add a button in HTML and add event listeners in JavaScript code to respond to button clicks. For example:
<!DOCTYPE html> <html> <head> <title>JavaScript Demo</title> <meta charset="UTF-8"> <script src="script.js"></script> </head> <body> <h1>欢迎来到 JavaScript 世界</h1> <button id="myButton">点击我</button> </body> </html>
In the above code, we added a button element with the
id attribute as myButton. Then add the following code in the JavaScript file: <pre class='brush:php;toolbar:false;'>document.getElementById("myButton").addEventListener("click", function() {
alert("已点击按钮");
});</pre>In this code, we use the
method to add a click event listener for the myButton element so that Display a popup message when the user clicks the button. You can also use other event types, such as mouseover and keydown, to achieve more interactive functions. Summary
The above are the methods and techniques for adding JavaScript to HTML. Whether embedding JavaScript code into HTML pages or referencing external JavaScript files, we can easily achieve dynamic interactive effects on the website. If you want to learn JavaScript in more depth, there are some great tutorials and learning resources like MDN documentation, W3Schools, Codecademy, and more. Happy studying!
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!