一、简介
HTML 文件使用 JavaScript 代码，有三种方式。
1、直接写入
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset="utf-8">
<title>加载 JavaScript 的方法</title>
<script>
// 法一：加载 JavaScript 代码
document.addEventListener("DOMContentLoaded", function () {
function createParagraph() {
let para = document.createElement('p');
para.textContent = '你点击了这个按钮！ from head <script>';
document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', createParagraph);
}
});
</script>
</head>
<body>
<h1>加载 JavaScript 的方法</h1>
<button>test</button>
</body>
</html>
2、标签
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset="utf-8">
<title>加载 JavaScript 的方法</title>
</head>
<body>
<h1>加载 JavaScript 的方法</h1>
<button>test</button>
<!-- 法二：加载 JavaScript 代码 -->
<script defer src="script1.js"></script>
</body>
</html>
// script1.js
function createParagraph() {
let para = document.createElement('p');
para.textContent = '你点击了这个按钮！';
document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', createParagraph);
}
-
defer 和 async
当页面有多个 js 文件需要加载时，并不能确定其先后顺序，也就是异步加载(async)，当js 文件之间有相互依赖时，可以加上 defer 关键字，这样页面会按照代码先后顺序进行加载。
3、import
impot 是 ES6 的 新语法，用于导入 js模块代码。详细内容，看这里！
