JavaScript（简称 JS）是一门解释型、弱类型、面向对象的脚本语言，它不需要提前编译，直接由浏览器（或 JS 运行环境，如 Node.js）逐行解析执行，我们常说的 “JavaScript 脚本”，就是用 JavaScript 语法编写的、用于实现特定功能的代码片段（或完整文件）。
如果说 HTML 是用来搭建了一间房子的墙体、门窗、家具（固定结构），CSS 是把房子刷上好看的颜色、摆放好家具位置、装饰细节（静态外观）。那么，JavaScript 脚本就是给房子装上电灯开关、空调遥控、自动门，实现 “有人按开关灯就亮”、“温度高了空调自动启动”（动态交互、逻辑处理）。
实现页面交互：响应用户的各种操作，比如点击按钮、鼠标悬浮、输入文字、滚动页面等，触发对应的效果。
修改网页内容和样式：JavaScript 脚本可以动态操作 HTML 结构和 CSS 样式，无需刷新页面就能更新页面内容。
处理数据与逻辑：JavaScript 脚本还可以完成前端的数据计算、格式转换、逻辑判断等工作。
与服务器进行数据交互：我们可以不刷新整个页面，就能向服务器发送请求、获取数据并更新页面（俗称 “AJAX”），这是实现前后端分离的核心基础。
实现复杂功能与动画：JavaScript 脚本可以构建更复杂的前端功能，甚至完整的前端应用，也能实现比 CSS 更灵活的动画效果。
弱类型语言：声明变量时不需要指定数据类型，变量类型可以随时改变（如一开始是数字，后来可以变成字符串）。
解释型执行：不需要提前编译成机器码，运行时由解析引擎逐行解析、逐行执行，调试更便捷。
事件驱动：核心逻辑常围绕 “事件” 展开（如点击、输入、加载完成），事件触发时才执行对应的脚本代码。
跨平台：只要有对应的 JS 解析引擎，就能在不同设备 / 系统上运行（如浏览器、Windows、Mac、Linux）。
所有现代浏览器都内置了 JS 解析引擎（如 Chrome 的 V8 引擎），用于解析和执行前端 JS 脚本，核心作用是操作网页（DOM/CSSOM）、实现页面交互。
浏览器环境提供了专属 API，如 DOM（操作 HTML）、BOM（操作浏览器窗口，如弹出窗口、获取浏览器信息）。
Node.js 是基于 Chrome V8 引擎搭建的 JS 运行环境，让 JS 可以脱离浏览器运行，用于编写后端接口、命令行工具、桌面应用等，拓展了 JS 的使用边界。
Node.js 环境提供了专属 API，如文件操作、网络请求、数据库连接等，无法直接操作 DOM/BOM（因为没有浏览器）。
直接在 HTML 元素的事件属性中编写 JS 代码，仅作用于当前元素，优先级高但无法复用，可读性差，仅适合极简单的临时需求。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<!-- 点击按钮弹出提示框，onclick 是点击事件 -->
<button onclick="alert('你点击了这个按钮！')">点击我</button>
<!-- 鼠标悬浮时修改自身文字颜色 -->
<div onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
鼠标移过来看看
</div>
</body>
</html>内部脚本（嵌入式脚本）
在 HTML 页面的 <head> 或 <body> 标签中，通过 <script> 标签编写 JS 代码，仅作用于当前 HTML 页面，适合单页面的简单功能实现。
注意：推荐将脚本放在 <body> 标签末尾（</body>之前），这样会先加载完页面所有 HTML 元素，再执行 JS，避免 JS 操作未加载的元素而出错。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<h1>点击按钮触发弹窗</h1>
<button id="btn" type="button">点击我</button>
<!-- 嵌入内部JS代码，放在body末尾（推荐，确保页面元素先加载完成） -->
<script>
// 获取页面中的按钮元素
const btn = document.getElementById('btn');
// 给按钮添加点击事件，点击时弹出弹窗
btn.addEventListener('click', function() {
alert('Hello, JavaScript! 这是内部脚本实现的弹窗');
});
</script>
</body>
</html>外部脚本（链接式脚本）
将 JavaScript 代码单独写在 .js 后缀的文件中，再在 HTML 中通过 <script> 标签引入，最推荐的方式，可被多个 HTML 页面引用，实现代码复用，便于维护和后期优化，也是大型项目的标准写法。
（1）创建一个 simple.js 文件
// 获取页面中的按钮元素
const btn = document.getElementById('btn');
// 给按钮添加点击事件，点击时弹出弹窗
btn.addEventListener('click', function() {
alert('Hello, JavaScript! 这是内部脚本实现的弹窗');
});（2）在 HTML 页面中引用该 js 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<h1>点击按钮触发弹窗</h1>
<button id="btn" type="button">点击我</button>
<!-- 引入外部JS文件，src属性指定文件路径 -->
<script type="text/JavaScript" src="simple.js"></script>
</body>
</html>关于更多HTML相关知识请学习后续教程……
川公网安备51010802032098