HTML中引入JavaScript
HTML 中引入 JavaScript
在 HTML 中引入 JavaScript 代码主要有以下几种方式：
HTML 事件属性（不推荐）
直接在 HTML 元素的事件属性中写 JS 代码（已过时）：
<button onclick="alert('按钮被点击')">点击</button>
- 缺点：混合了结构与行为，难以维护。
知识点：
- JavaScript 是一种基于事件驱动（Event-Driven）的编程语言。
click是事件， onclick是事件句柄。事件句柄可作为 HTML 标签的属性形式存在。- 在事件句柄中注册回调函数。例如
onclick="sayHello()" ，其中sayHello()就是回调函数。 - 原理：页面加载的时候，当加载到该 HTML 标签时，完成回调函数与事件的绑定（注册）。后续当用户点击该按钮时，发生
click事件，浏览器负责调用回调函数。 - 弹窗代码：
window.alert('Hello JavaScript') ，其中window是 JS 内置对象，代表当前浏览器窗口， alert是window对象的方法，功能是弹出警告框。
内联方式（Inline Script）
直接在 HTML 文件中使用<script> 标签包裹 JavaScript 代码：
<script>
console.log('内联JavaScript代码');
</script>
- 位置：可以放在
<head>或<body>中。 - 特点：代码直接嵌入 HTML，适合少量逻辑。
关于快速生成打印语句：
console.log() 是向控制台上打印输出，在 VS Code 中如何快速生成该语句呢？可进行这样的配置：
打开 javascript.json文件后，添加如下的配置，然后保存文件，随后在 js 文件中输入 cl 即可快速生成 console.log(); 语句：
{
"Print to console": {
"prefix": "cl",
"body": [
"console.log($1);"
],
"description": "Log output to console"
}
}
另外以后也会学习 TypeScript，以后也需要在 .ts文件中快速生成打印语句，因此可以将以上的配置在 typescript.json 文件中进行重复配置。
IDEA 的配置方法
外部引入（External Script）
通过<script>标签的src 属性引入外部 JS 文件：
<script src="script.js"></script>
-
位置：通常放在
<body> 末尾（避免阻塞渲染），也可在<head>中配合defer或async使用。 -
特点：
- 模块化：代码可复用，便于维护。
- 缓存优势：浏览器会缓存外部 JS 文件。
-
注意：
<script> 标签如果设置了 src 属性，标签内部的代码会被完全忽略。
动态加载（Dynamic Script Loading）
通过 JavaScript 动态创建<script> 标签：
const script = document.createElement('script');
script.src = 'script.js';
document.body.appendChild(script);
- 用途：按需加载脚本，提升性能。
defer 与 async 属性
defer与async属性（仅限外部脚本）
defer 延迟执行
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
defer 的执行时机：
DOM 构建完成 → (开始执行 defer 脚本) → (所有 defer 脚本执行完毕) → DOMContentLoaded 事件触发 → 浏览器继续加载页面中引用的外部资源，如图片、视频等 → load 事件发生。
重点注意事项：defer 脚本在执行时，已经完全可以获取页面中所有的 dom 元素了。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>defer关键字</title>
<script src="test.js"></script>
<script src="test.js" defer></script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
test.js
console.log(document.getElementById('myDiv'));
async 异步加载
<script src="script1.js" async></script>
<script src="script2.js" async></script>
- ✅
async脚本：下载完 js 文件就执行，不保证 DOM 是否就绪，适合独立任务。 - ✅ 什么是异步加载：不保证先执行
script1.js再执行script2.js。谁先下载完，谁先执行。