HTML 文件使用 JavaScript 代码,有三种方式。
<!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>
<!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);
}
当页面有多个 js 文件需要加载时,并不能确定其先后顺序,也就是异步加载(async),当js 文件之间有相互依赖时,可以加上 defer 关键字,这样页面会按照代码先后顺序进行加载。
impot 是 ES6 的 新语法,用于导入 js模块代码。详细内容,看这里!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。