js书写位置_直接在标签内部书写js-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_57605288/article/details/143029281

1. 内联式（Inline）

JavaScript 代码可以直接写在 HTML 标签中，这种方式通常用于简单的页面交互。

<button onclick="alert('按钮被点击了！')">点击我</button>

2. 嵌入式（Embedded）

JavaScript 代码可以嵌入在 HTML 文档中，通常放在 <head> 或 <body> 标签内部的 <script> 标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <script>
        function sayHello() {
            alert('Hello!');
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">点击说Hello</button>
</body>
</html>

3. 外部式（External）

JavaScript 代码可以写在一个单独的 .js 文件中，然后通过 HTML 中的 <script> 标签引用这个文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <script src="scripts.js"></script>
</head>
<body>
    <button id="myButton">点击我</button>
    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            alert('按钮被点击了！');
        });
    </script>
</body>
</html>

注意事项：

加载顺序：将 <script> 标签放在 <body> 标签的底部可以确保在 JavaScript 执行之前页面已经完全加载，从而避免页面重新渲染。
异步加载：为了提高性能，可以使用 async 属性来异步加载外部脚本文件，这样脚本不会阻塞页面的渲染。如果脚本之间没有依赖关系，也可以使用 defer 属性，这样脚本会在文档解析完成后，但在 DOMContentLoaded 事件触发之前执行。
延迟加载：使用 defer 属性可以让脚本在文档解析完成后执行，而不是在下载时立即执行。

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src=" script.js"></script>
	</body>
</html>

script.js

 alert('按钮被点击了！')