【前端开发之JavaScript】（一）JavaScript 入门宝典：从起源到运行全拆解

前言

如果说网页是一个鲜活的生命体，那 HTML 只是冰冷的骨骼架构，CSS 是精致的外表装扮，而JavaScript，就是让这个生命体拥有呼吸、动作、感知的核心灵魂。

对于每一位刚踏入编程领域的新手，尤其是主攻前端方向或全栈开发的同学来说，JavaScript 都是绕不开的 "必修课"。它不仅是前端开发的三大核心技术之一，如今更是跨界渗透到了后端开发（Node.js）、移动端开发（React Native）、桌面端开发（Electron）甚至物联网开发等多个领域，成为了真正的 "全栈语言"。

但对于小白而言，JavaScript 的学习往往伴随着诸多困惑：它和 Java 到底有什么关系？为什么明明写了代码，网页却毫无反应？它和 HTML、CSS 之间到底是如何协作的？今天，这篇文章就带你彻底破解这些谜题，从 JavaScript 的起源故事讲起，到它与 HTML、CSS 的联动逻辑，再到运行机制的底层原理，最后拆解其核心组成部分，搭配极简易懂的代码示例，让你真正实现 "初识 JavaScript，就懂核心逻辑"。

本文专为前端新手以及想转行前端的技术爱好者打造，全文无晦涩难懂的专业黑话，用生活化的类比拆解复杂概念，代码示例均经过严格验证，复制即可运行，帮你稳稳迈出前端学习的第一步！下面就让我们正式开始吧！

一、JavaScript 是什么？------ 不止是 "网页脚本"，更是全栈利器

要理解 JavaScript，我们首先要抛开一个常见的误区：JavaScript 和 Java 没有半毛钱关系。就像 "老婆饼里没有老婆"，"JavaScript 里也没有 Java"。这个名字的由来，其实藏着一段有趣的商业故事，我们会在后面的发展历史中详细拆解。

回归本质，JavaScript（简称 JS） 是一种解释型、弱类型、动态的高级编程语言，主要用于为网页添加交互性和动态效果。它由网景（Netscape）公司最初设计，如今已成为 ECMA 国际标准化的编程语言，遵循 ECMAScript（简称 ES）标准。

1.1 JavaScript 的核心定位：网页的 "交互引擎"

在静态网页时代，HTML 和 CSS 只能实现 "看" 的功能 ------ 用户打开网页，只能被动浏览文字、图片和排版，无法进行任何操作。而 JavaScript 的出现，彻底打破了这种 "单向输出" 的模式。

举个最简单的例子：当你在电商网站点击 "加入购物车" 按钮时，按钮会变色、弹出 "添加成功" 的提示框，购物车图标上的数字会自动加 1；当你在登录页面输入错误密码时，页面会实时显示 "密码错误" 的提示，而不需要刷新整个页面。这些看似简单的交互效果，背后都是 JavaScript 在默默工作。

用生活化的类比来说：

HTML 就像建筑的框架：决定了网页有哪些元素（标题、按钮、图片、输入框）；

CSS 就像建筑的装修：决定了这些元素的样子（颜色、大小、位置、字体）；

JavaScript 就像建筑的控制系统：决定了这些元素的行为（点击按钮会发生什么、输入文字会触发什么、滚动页面会显示什么）。

1.2 JavaScript 的 "全能属性"：不止前端，无处不在

很多新手会误以为 JavaScript 只能用于网页前端，但在 2026 年的今天，JavaScript 的应用场景早已突破了浏览器的限制，成为了真正的 "全栈语言"：

前端开发：这是 JavaScript 的 "老本行"，搭配 Vue、React、Angular 等框架，开发各类复杂的单页应用（SPA）、电商平台、管理后台等；

后端开发：通过 Node.js 运行环境，JavaScript 可以脱离浏览器，实现服务器端的逻辑开发，处理请求、操作数据库、搭建 API 接口等；

移动端开发：使用 React Native、UniApp 等框架，通过 JavaScript 编写代码，可同时编译为 iOS 和 Android 原生应用；

桌面端开发：借助 Electron 框架，开发出像 VS Code、Discord、网易云音乐桌面版这样的跨平台桌面应用；

物联网开发：通过 Node.js 连接硬件设备，实现智能家居、工业物联网等场景的开发。

可以说，学会了 JavaScript，你几乎可以开发出所有类型的应用程序，这也是它成为全球最流行编程语言之一的核心原因（根据 Stack Overflow 2025 年开发者调查，JavaScript 连续 12 年蝉联 "最常用编程语言" 榜首）。

1.3 JavaScript 的核心特性：新手必知的四大特点

作为一门独特的编程语言，JavaScript 拥有四个核心特性，这也是它与 C++、Java 等传统编程语言的最大区别，新手在学习时需要重点关注：

特性	核心含义	示例
解释型语言	不需要提前编译，浏览器 / 运行环境会逐行解析代码并执行，无需生成可执行文件	写好 JS 代码后，直接在浏览器中打开网页即可运行，无需像 C++ 那样编译成.exe 文件
弱类型语言	变量的类型不需要提前声明，且可以随时改变，由解释器在运行时动态判断	`let a = 10; a = "JavaScript";`（变量 a 先为数字类型，后变为字符串类型）
动态语言	支持动态修改对象属性、动态定义函数，运行时可以灵活调整程序结构	可以在代码运行过程中，给一个对象新增属性或方法
面向对象	基于原型（Prototype）的面向对象编程，而非传统的类（Class）继承（ES6 后新增了 Class 语法糖）	通过原型链实现属性和方法的继承，更灵活、更轻量化

二、JavaScript 的发展历史 ------ 从 "仓促诞生" 到 "全球标准" 的传奇之路

任何一门编程语言的诞生，都离不开时代的背景和技术的需求。JavaScript 的发展历史，堪称 "互联网发展史的缩影"，从最初的仓促上线，到后来的百家争鸣，再到如今的标准化统一，短短 30 年，它完成了从 "配角" 到 "主角" 的逆袭。

为了让大家更清晰地梳理时间线，我们将 JavaScript 的发展历史划分为四个关键阶段，搭配关键节点事件，带你看懂它的成长之路。

2.1 第一阶段：仓促诞生（1995 年）------ 为了 "对抗 Java" 而生

20 世纪 90 年代初，互联网刚刚兴起，网景（Netscape）公司凭借其 "Navigator" 浏览器占据了超过 90% 的市场份额，成为了当时的 "浏览器霸主"。

1995 年，Sun 公司（Java 的诞生地）推出了 Java 语言，凭借其 "跨平台" 的特性迅速走红。网景公司担心 Java 会抢占浏览器的市场，于是决定开发一门属于自己的脚本语言，用于在浏览器中实现简单的交互功能，与 Java 形成互补（而非竞争）。

这个任务交给了网景公司的工程师布兰登・艾奇（Brendan Eich） ，而给他的开发时间，只有10 天。

在这 10 天里，布兰登・艾奇结合了 C 语言的语法、Scheme 语言的函数特性、Self 语言的原型继承，快速开发出了一门全新的脚本语言，最初命名为Mocha。

1995 年 9 月，网景公司将其重命名为LiveScript ；同年 12 月，为了借助 Java 的名气推广这门语言，网景公司与 Sun 公司达成合作，将其正式更名为JavaScript。

这就是 "JavaScript 和 Java 没关系" 的核心原因 ------ 这个名字只是一场商业营销的结果。

1995 年的 JavaScript 非常简陋，仅支持基本的表单验证、页面跳转等功能，但它的出现，标志着网页从 "静态" 走向了 "动态"。

2.2 第二阶段：百家争鸣与混乱期（1996-2005 年）------ 浏览器大战引发的 "语言分裂"

JavaScript 的快速走红，引起了微软的注意。1996 年，微软在其 IE 浏览器中推出了一门兼容 JavaScript 的脚本语言，命名为JScript。

随后，网景公司将 JavaScript 提交给 ECMA 国际（欧洲计算机制造商协会），希望将其标准化，避免各大浏览器各自为政。1997 年，ECMA 国际发布了第一版 ECMAScript 标准（ES1），这也是 JavaScript 的官方标准 ------ECMAScript 是语言的标准，JavaScript 是网景公司对该标准的实现（就像 W3C 制定了 HTML 标准，各大浏览器厂商实现这个标准一样）。

但在随后的 "浏览器大战" 中，网景公司落败，IE 浏览器占据了市场主导地位。微软为了垄断市场，故意偏离 ECMAScript 标准，导致 JScript 和 JavaScript 出现了兼容性问题：同一段代码，在 IE 浏览器中能正常运行，在网景浏览器中却会报错，反之亦然。

这一时期，JavaScript 的发展陷入了混乱，开发者需要为不同的浏览器编写不同的代码，极大地增加了开发成本。同时，由于 JavaScript 只能用于简单的网页交互，被很多开发者视为 "玩具语言"，得不到重视。

2.3 第三阶段：崛起与革新（2005-2015 年）------ 框架兴起，走向成熟

2005 年，随着 AJAX（异步 JavaScript 和 XML）技术的诞生，JavaScript 迎来了第一次 "爆发"。AJAX 允许网页在不刷新的情况下，与服务器进行数据交互，实现了 "局部刷新" 的功能。

谷歌的 Gmail 邮箱、地图服务（Google Maps）就是最早采用 AJAX 技术的应用，它们的出现，让开发者看到了 JavaScript 的潜力 ------ 它不仅能做简单的交互，还能开发复杂的应用程序。

随后，一系列优秀的 JavaScript 框架相继诞生，解决了兼容性问题和开发效率问题：

2006 年，jQuery 诞生，凭借其 "写更少的代码，做更多的事情" 的理念，成为了最流行的前端框架，彻底解决了浏览器兼容性问题；

2010 年，Node.js 发布，由瑞安・达尔（Ryan Dahl）开发，让 JavaScript 可以脱离浏览器，在服务器端运行，开启了 JavaScript 的 "全栈时代"；

2013 年，React、AngularJS、Vue 等现代前端框架相继诞生，让 JavaScript 可以开发大型、复杂的单页应用。

这一时期，JavaScript 从 "玩具语言" 蜕变为 "企业级开发语言"，成为了前端开发的核心。

2.4 第四阶段：标准化与普及（2015 年至今）------ ES6 落地，生态完善

2015 年，ECMA 国际发布了ECMAScript 6（简称 ES6） 标准，这是 JavaScript 历史上最重大的一次更新，新增了类（Class）、箭头函数、模板字符串、解构赋值、Promise 等一系列核心特性，让 JavaScript 的语法更简洁、更强大，彻底摆脱了 "语法丑陋" 的标签。

此后，ECMA 国际确立了 "每年更新一次标准" 的规则，从 ES7 到 ES2025，每次更新都在原有基础上进行小幅优化，让 JavaScript 的生态越来越完善。

到 2026 年的今天，JavaScript 已经成为了全球开发者数量最多的编程语言，其生态系统涵盖了框架、库、工具、运行环境等各个方面，形成了一个庞大的技术体系。

2.5 关键时间线总结

为了方便大家记忆，我们将 JavaScript 发展历史中的关键节点整理成了时间线：

年份	关键事件	影响
1995 年	布兰登・艾奇用 10 天开发出 JavaScript（原名 Mocha）	动态脚本语言正式诞生，网页进入动态时代
1997 年	ECMA 国际发布 ES1 标准	JavaScript 开始标准化，为跨浏览器兼容奠定基础
2005 年	AJAX 技术诞生	实现网页局部刷新，开启 JavaScript 的崛起之路
2006 年	jQuery 发布	解决浏览器兼容性问题，成为最流行的前端框架
2010 年	Node.js 发布	JavaScript 脱离浏览器，进入后端开发领域
2015 年	ES6 标准发布	语法全面升级，JavaScript 走向成熟
2026 年	ES2026 标准发布	生态持续完善，成为全球最主流的全栈语言

三、JavaScript 和 HTML、CSS 的关系 ------ 三位一体的 "前端铁三角"

对于零基础新手来说，搞清楚 JavaScript、HTML、CSS 三者之间的关系，是学习前端开发的关键。这三者就像 "前端铁三角"，缺一不可，各自承担着不同的职责，却又紧密协作，共同构建出完整的网页。

为了让大家更直观地理解，我们先通过一个核心公式来概括：

完整的动态网页 = HTML（结构） + CSS（样式） + JavaScript（行为）

接下来，我们从协作逻辑 、具体联动方式 和代码示例三个维度，详细拆解这三者的关系。

3.1 核心协作逻辑：各司其职，层层依赖

HTML、CSS、JavaScript 三者的协作，遵循 "结构先行，样式辅助，行为压轴" 的逻辑：

第一步：HTML 搭建基础结构：开发者首先编写 HTML 代码，定义网页中的所有元素，比如标题、按钮、输入框、图片等，就像盖房子先搭建框架；

第二步：CSS 美化页面样式：在 HTML 结构的基础上，编写 CSS 代码，为各个元素设置样式，比如颜色、大小、位置、字体、背景等，就像给房子进行装修；

第三步：JavaScript 实现交互行为：最后，编写 JavaScript 代码，为元素添加交互逻辑，比如点击按钮触发事件、输入文字实时校验、滚动页面加载数据等，就像给房子安装控制系统。

三者的依赖关系可以总结为：

JavaScript依赖于 HTML：如果没有 HTML 元素，JavaScript 就没有 "操作对象"，就像没有按钮，就无法实现 "点击按钮" 的交互；

JavaScript可以操作 CSS：JavaScript 可以动态修改元素的 CSS 样式，比如点击按钮后，将按钮的背景色从蓝色改为红色；

HTML 和 CSS不依赖于 JavaScript：即使没有 JavaScript，HTML 和 CSS 也能构建出静态的网页，只是没有交互功能。

3.2 具体联动方式：三种核心交互模式

在实际开发中，JavaScript 与 HTML、CSS 的联动，主要通过三种模式实现，这也是新手必须掌握的核心知识点：

模式一：JavaScript 操作 HTML 元素（获取 / 修改内容）

JavaScript 可以通过 "DOM（文档对象模型）" 获取 HTML 页面中的任何元素，并修改其内容。DOM 是浏览器将 HTML 页面解析后生成的 "对象树"，JavaScript 通过操作 DOM 对象，就能实现对 HTML 元素的控制。

模式二：JavaScript 修改 CSS 样式（动态美化）

JavaScript 不仅能操作 HTML 内容，还能动态修改元素的 CSS 样式，实现 "样式随行为变化" 的效果。比如鼠标悬停在按钮上时，按钮变大、变色；滚动页面时，导航栏固定在顶部。

模式三：JavaScript 监听 HTML 事件（触发交互）

HTML 元素会产生各种 "事件"，比如点击（click）、鼠标悬停（mouseover）、键盘输入（keydown）、页面加载完成（load）等。JavaScript 可以 "监听" 这些事件，当事件发生时，执行对应的代码，实现交互逻辑。

3.3 代码示例：前端铁三角的联动实战

为了让大家彻底理解三者的联动关系，我们编写了一个极简的 **"点击按钮修改页面"** 的示例，包含 HTML、CSS、JavaScript 三部分代码，复制即可在浏览器中运行。

步骤 1：编写 HTML 结构

首先，我们创建一个 HTML 文件（命名为index.html），搭建页面的基础结构：包含一个标题、一个按钮和一个显示内容的盒子。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 指定字符编码 -->
    <meta charset="UTF-8">
    <!-- 设置页面视口，适配移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题 -->
    <title>JS与HTML/CSS联动示例</title>
    <!-- 引入CSS样式表（内部样式） -->
    <style>
        /* 步骤2：编写CSS样式 */
        /* 页面整体样式 */
        body {
            font-family: "Microsoft YaHei", sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        /* 标题样式 */
        h1 {
            color: #333;
            margin-bottom: 30px;
        }

        /* 按钮样式 */
        #btn {
            padding: 12px 24px;
            font-size: 18px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        /* 按钮鼠标悬停样式 */
        #btn:hover {
            background-color: #0056b3;
        }

        /* 内容盒子样式 */
        #content {
            margin-top: 30px;
            font-size: 20px;
            color: #666;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #fff;
            width: 300px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 标题元素 -->
    <h1>前端铁三角联动演示</h1>
    <!-- 按钮元素，设置id为btn，用于JS获取 -->
    <button id="btn">点击我触发联动</button>
    <!-- 内容盒子，设置id为content，用于JS修改 -->
    <div id="content">等待点击按钮...</div>

    <!-- 步骤3：编写JavaScript代码 -->
    <script>
        // 1. 获取HTML元素（通过id获取按钮和内容盒子）
        const btn = document.getElementById('btn');
        const content = document.getElementById('content');

        // 2. 监听按钮的点击事件（核心交互）
        btn.addEventListener('click', function() {
            // 3. 修改HTML内容：改变盒子里的文字
            content.innerText = '你点击了按钮！JS联动成功！';

            // 4. 动态修改CSS样式：改变盒子的背景色和文字颜色
            content.style.backgroundColor = '#007bff';
            content.style.color = '#fff';
            content.style.borderColor = '#0056b3';

            // 5. 修改按钮的文字（额外交互）
            btn.innerText = '已点击，再次点击重置';

            // 6. 再次点击按钮，恢复初始状态
            btn.onclick = function() {
                content.innerText = '等待点击按钮...';
                content.style.backgroundColor = '#fff';
                content.style.color = '#666';
                content.style.borderColor = '#ddd';
                btn.innerText = '点击我触发联动';
            }
        });
    </script>
</body>
</html>

代码运行效果：

打开浏览器，运行index.html文件，页面显示标题、蓝色按钮和灰色内容盒子，盒子里显示 "等待点击按钮..."；
鼠标悬停在按钮上，按钮背景色变为深蓝色（CSS 的:hover 效果）；
点击按钮，内容盒子的文字变为 "你点击了按钮！JS 联动成功！"，背景色变为蓝色，文字颜色变为白色；按钮文字变为 "已点击，再次点击重置"；
再次点击按钮，页面恢复初始状态。

代码核心解析：

HTML ：通过id属性为按钮和盒子标记唯一标识，方便 JavaScript 获取；
CSS ：通过类选择器、ID 选择器设置元素样式，通过transition实现过渡效果，提升交互体验；
JavaScript ：
- document.getElementById('btn')：通过 ID 获取 HTML 元素，建立 JS 与 HTML 的关联；
- addEventListener('click', function(){})：监听按钮的点击事件，这是 JS 与 HTML 的交互入口；
- content.innerText = ...：修改 HTML 元素的内容，实现 JS 操作 HTML；
- content.style.backgroundColor = ...：动态修改 CSS 样式，实现 JS 操作 CSS。

这个示例完美体现了 "前端铁三角" 的协作关系：HTML 提供操作对象，CSS 提供初始样式，JavaScript 提供交互逻辑。

四、JavaScript 的运行过程 ------ 从代码到效果的 "幕后之旅"

很多新手在编写 JavaScript 代码时，都会有这样的疑问："我写的代码，到底是如何被浏览器执行，最终呈现出交互效果的？"

JavaScript 的运行过程，并不是 "代码直接运行" 那么简单，而是需要经过浏览器的解析、编译、执行 三个核心阶段，同时依赖DOM 和BOM两个重要的对象模型。

为了让大家看懂这个 "幕后之旅"，我们将 JavaScript 的运行过程拆解为四个关键步骤，从 "代码输入" 到 "效果输出"，一步步还原其底层逻辑。

4.1 前提：JavaScript 的运行环境

首先，我们需要明确：JavaScript 是一门 "解释型语言"，它的运行必须依赖 "运行环境"。

对于前端开发来说，最核心的运行环境是浏览器 （如 Chrome、Edge、Firefox）；对于后端开发来说，运行环境是Node.js（基于 Chrome 的 V8 引擎开发）。

本文重点讲解浏览器中的 JavaScript 运行过程，其核心依赖的是浏览器的内核（渲染引擎），不同浏览器的内核不同，但运行 JavaScript 的逻辑基本一致。以 Chrome 浏览器为例，其内核是 Blink，内置了V8 引擎（目前最强大的 JavaScript 引擎），负责解析和执行 JavaScript 代码。

4.2 步骤一：浏览器加载 HTML 文件

当用户在浏览器地址栏输入网址，或双击本地 HTML 文件时，浏览器会开始加载（Load） 过程：

浏览器向服务器发送请求（本地文件则直接读取），获取 HTML 文件的内容；

浏览器将 HTML 文件的内容加载到内存中，准备进行解析。

此时，JavaScript 代码还只是 "纯文本"，存在于 HTML 文件的<script>标签中，浏览器还没有对其进行任何处理。

4.3 步骤二：解析 HTML，构建 DOM 树和 CSSOM 树

浏览器加载完 HTML 文件后，会启动解析器，对 HTML 代码进行逐行解析，这个过程会同时完成两件事：

1. 构建 DOM 树（文档对象模型）

HTML 是由一系列标签组成的，浏览器会将每个标签解析为一个DOM 节点，然后按照标签的嵌套关系，将这些节点组织成一棵 "树状结构"，即 DOM 树。

举个例子，对于以下 HTML 代码：

html 复制代码

<html>
    <head>
        <title>测试页面</title>
    </head>
    <body>
        <h1>JS运行过程</h1>
        <p>这是一个测试段落</p>
    </body>
</html>

浏览器会构建出如下的 DOM 树：

HTML 节点（根节点）

HEAD 节点

TITLE 节点（内容：测试页面）

BODY 节点

H1 节点（内容：JS 运行过程）

P 节点（内容：这是一个测试段落）

DOM 树是 JavaScript 操作 HTML 元素的 "桥梁"------JavaScript 中的document.getElementById、document.querySelector等方法，本质上都是在 DOM 树中查找对应的节点。

2. 构建 CSSOM 树（CSS 对象模型）

在解析 HTML 的过程中，浏览器遇到**<link>标签（外部 CSS）或<style>标签（内部 CSS）时，会同时启动 CSS 解析器，对 CSS 代码进行解析，构建出CSSOM 树**。

CSSOM 树记录了所有的 CSS 样式规则，以及这些规则对应的 HTML 元素。比如 "所有的<h1>标签颜色为红色"、"id 为 btn 的按钮背景色为蓝色" 等，都会被存储在 CSSOM 树中。

4.4 步骤三：遇到 JavaScript 代码，触发执行流程

当浏览器解析 HTML 到**<script>标签时，会暂停 HTML 的解析** （除非设置了defer或async属性，后面会讲解），并将控制权交给JavaScript 引擎（如 V8 引擎） ，启动 JavaScript 的执行流程，这个流程分为编译和执行两个阶段。

阶段 1：编译阶段（V8 引擎的预处理）

很多人误以为 JavaScript 是 "纯解释型语言"，但实际上，现代 JavaScript 引擎（如 V8）会采用 "即时编译（JIT）" 技术，在执行代码前进行简单的编译处理，提升执行效率。

编译阶段主要完成三件事：

词法分析 ：将 JavaScript 代码的 "纯文本" 拆分为一个个 "词法单元"，比如**let a = 10;**会被拆分为let、a、=、10、;等词法单元；

语法分析：将词法单元按照 JavaScript 的语法规则，组装成 "抽象语法树（AST）"。如果代码中有语法错误（比如少写了分号、括号不匹配），会在这个阶段抛出错误，终止执行；

生成字节码：将抽象语法树转换为 V8 引擎能理解的 "字节码"（而非机器码），为执行阶段做准备。

阶段 2：执行阶段（核心逻辑）

编译阶段完成后，JavaScript 引擎会启动执行器 ，逐行执行字节码，这个过程会依赖执行上下文 和调用栈，同时结合 DOM 树和 CSSOM 树，实现交互效果。

执行阶段的核心步骤：

创建执行上下文 ：对于全局代码（<script>标签中的代码），会创建全局执行上下文 ；对于函数代码，会创建函数执行上下文。执行上下文中会包含变量对象、作用域链、this 指向等核心信息；

变量提升 ：在执行代码前，JavaScript 引擎会将变量声明（var）和函数声明提升到当前作用域的顶部。比如**console.log(a); var a = 10;**不会报错，只会输出undefined，因为var a被提升了，而赋值操作a = 10还没执行；

逐行执行代码 ：按照代码的顺序，逐行执行字节码。当遇到DOM 操作 （如document.getElementById）时，会去 DOM 树中查找对应的节点；当遇到样式修改 （如element.style）时，会去 CSSOM 树中更新样式规则；当遇到事件监听 （如addEventListener）时，会将事件处理函数注册到浏览器的事件队列中；

垃圾回收：V8 引擎会自动回收不再使用的内存（比如不再引用的变量、对象），避免内存泄漏。

4.5 步骤四：渲染页面，呈现最终效果

当 JavaScript 代码执行完成后，浏览器会恢复 HTML 的解析，直到整个 HTML 文件解析完毕。

随后，浏览器会将DOM 树 和CSSOM 树 结合，构建出渲染树（Render Tree） ------ 渲染树只包含需要显示的元素（比如display: none的元素不会出现在渲染树中），以及这些元素的样式规则。

最后，浏览器会按照渲染树的结构，进行布局（Layout） 和绘制（Paint）：

布局：计算每个元素的位置、大小、宽高，确定其在页面中的坐标；

绘制：将元素的像素绘制到屏幕上，包括颜色、字体、背景、边框等。

此时，JavaScript 代码的逻辑就会转化为可视化的页面效果，用户就能看到并操作交互功能了。

4.6 关键注意点：`<script>`标签的加载属性

在实际开发中，**<script>**标签的位置和属性，会直接影响 JavaScript 的运行顺序和页面的加载效率，新手必须掌握defer和async两个核心属性：

属性	作用	运行顺序	适用场景
无属性	浏览器解析到`<script>`时，立即暂停 HTML 解析，加载并执行 JS 代码	按照`<script>`标签的顺序执行	简单的 JS 代码，依赖 DOM 元素的代码（需放在`<body>`底部）
`defer`	异步加载 JS 文件，不暂停 HTML 解析，在 HTML 解析完成后，按照标签顺序执行	顺序执行	多个依赖的 JS 文件，需要按顺序执行的场景
`async`	异步加载 JS 文件，不暂停 HTML 解析，加载完成后立即执行，不保证顺序	无序执行	独立的 JS 文件，不依赖其他 JS 文件的场景（如统计代码）

最佳实践 ：为了避免 JS 代码阻塞 HTML 解析，导致页面加载缓慢，建议将**<script>标签放在<body>**标签的最后，或者使用defer属性。

4.7 代码示例：验证 JavaScript 的运行顺序

为了让大家理解**<script>**标签的加载属性，我们编写了一个简单的示例，对比 "无属性"、"defer"、"async" 三种情况的运行效果。

创建script-load.html文件，代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS加载顺序示例</title>
    <!-- 外部JS文件1：script1.js -->
    <script src="script1.js"></script>
    <!-- 外部JS文件2：script2.js（无属性） -->
    <script src="script2.js"></script>
    <!-- 外部JS文件3：script3.js（defer属性） -->
    <script src="script3.js" defer></script>
    <!-- 外部JS文件4：script4.js（async属性） -->
    <script src="script4.js" async></script>
</head>
<body>
    <h1>JS加载顺序测试</h1>
    <p>打开浏览器控制台（F12），查看输出顺序！</p>
</body>
</html>

分别创建 4 个外部 JS 文件，内容如下：

script1.js：console.log('我是script1：无属性，第一个执行');

script2.js：console.log('我是script2：无属性，第二个执行');

script3.js：console.log('我是script3：defer属性，HTML解析完后执行');

script4.js：console.log('我是script4：async属性，加载完立即执行，顺序不确定');

运行结果分析：

打开浏览器控制台（F12），会发现script1和script2的输出顺序固定，依次为 "我是 script1"、"我是 script2"；

script3的输出会在页面加载完成后（HTML 解析完毕），出现在最后；

script4的输出顺序不确定，可能在script1、script2之前，也可能在之后，取决于文件的加载速度。

这个示例直观地验证了**<script>**标签不同属性的运行规则，新手在实际开发中可以根据需求选择合适的属性。

五、JavaScript 的组成 ------ 三大核心部分，缺一不可

经过前面的学习，我们已经对 JavaScript 有了整体的认知。从技术层面来说，JavaScript 并不是一门 "单一" 的语言，而是由三大核心部分组成的，这三大部分共同构成了 JavaScript 的完整体系，也是 ECMAScript 标准和浏览器实现的核心内容。

这三大核心部分分别是：

ECMAScript（ES） ：JavaScript 的语法标准；

DOM（文档对象模型） ：JavaScript 操作HTML的接口；

BOM（浏览器对象模型） ：JavaScript 操作浏览器的接口。

很多新手容易混淆这三者的关系，接下来我们逐一拆解，让你彻底搞懂 JavaScript 的组成逻辑。

5.1 核心基础：ECMAScript（语法标准）

ECMAScript 是 JavaScript 的语言本身，它定义了 JavaScript 的核心语法规则，包括变量、数据类型、运算符、函数、循环、条件语句、类、模块等。

简单来说，ECMAScript 就是 JavaScript 的 "语法手册"------ 无论你在浏览器中运行 JavaScript，还是在 Node.js 中运行 JavaScript，ECMAScript 的语法都是通用的。

比如以下代码，就是纯 ECMAScript 语法，不依赖浏览器的任何功能，在浏览器和 Node.js 中都能运行：

javascript 复制代码

// 变量声明（ES6语法）
let name = "JavaScript";
const version = "ES2026";

// 数据类型
let num = 10; // 数字类型
let isOk = true; // 布尔类型
let arr = [1, 2, 3]; // 数组类型
let obj = { name: "张三", age: 20 }; // 对象类型

// 函数定义
function sayHello() {
    console.log(`你好，${name}！当前版本：${version}`);
}

// 调用函数
sayHello();

// 条件语句
if (num > 5) {
    console.log(`${num}大于5`);
} else {
    console.log(`${num}小于等于5`);
}

// 循环语句
for (let i = 0; i < arr.length; i++) {
    console.log(`数组第${i+1}个元素：${arr[i]}`);
}

// 类（ES6语法）
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHi() {
        console.log(`我是${this.name}，今年${this.age}岁`);
    }
}

// 创建类的实例
const person = new Person("李四", 22);
person.sayHi();

ECMAScript 的核心作用：

**统一语法标准：**让不同的浏览器、不同的运行环境，都能理解相同的 JavaScript 代码；

**提供核心功能：**包括数据类型、流程控制、函数、类、模块化等，是 JavaScript 的 "基础骨架"；

**持续迭代更新：**从 ES1 到 ES2026，每次更新都会新增实用的语法特性，简化开发。

注意：ECMAScript 不包含任何操作网页、操作浏览器的功能 ------ 它只是一门纯编程语言，需要结合 DOM 和 BOM，才能在浏览器中实现交互效果。

5.2 网页操作接口：DOM（文档对象模型）

DOM（Document Object Model，文档对象模型） 是浏览器 提供的一套API（应用程序编程接口） ，它将 HTML 页面解析为一棵节点树，让 JavaScript 可以通过这些 API，对 HTML 元素进行获取、创建、修改、删除等操作。

DOM 是 JavaScript 与 HTML 之间的 "桥梁"，如果没有 DOM，JavaScript 就无法操作网页中的任何元素。

DOM 的核心特点：

树状结构 ：DOM 以 "节点树" 的形式组织 HTML 元素，每个元素都是一个节点，包括元素节点（如<div>、<p>）、文本节点（如标签中的文字）、属性节点（如id="btn"）；

跨平台：DOM 是 W3C 制定的标准，所有浏览器都遵循这个标准，保证了跨浏览器的兼容性；

动态性：JavaScript 可以实时修改 DOM 树，从而实现页面的动态更新。

DOM 的核心操作（新手必学）

DOM 的操作分为获取元素 、修改内容 、修改属性 、修改样式 、创建 / 删除元素五大类，我们结合代码示例，逐一讲解核心 API。

创建dom-operation.html文件，代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM核心操作示例</title>
    <style>
        .box {
            padding: 20px;
            border: 1px solid #ddd;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1 id="title">DOM操作演示</h1>
    <p class="content">这是一个测试段落</p>
    <button id="btn">点击执行DOM操作</button>
    <div class="box" id="container"></div>

    <script>
        // 一、获取元素（核心：通过ID、类名、标签名、选择器获取）
        // 1. 通过ID获取（返回单个元素）
        const title = document.getElementById('title');
        // 2. 通过类名获取（返回元素集合）
        const contentList = document.getElementsByClassName('content');
        const content = contentList[0]; // 取第一个元素
        // 3. 通过标签名获取（返回元素集合）
        const buttonList = document.getElementsByTagName('button');
        const btn = buttonList[0];
        // 4. 通过CSS选择器获取（返回单个元素/元素集合）
        const container = document.querySelector('#container'); // 单个元素
        const allElements = document.querySelectorAll('h1, p, button'); // 元素集合

        // 二、监听按钮点击事件，执行DOM操作
        btn.addEventListener('click', function() {
            // 1. 修改元素内容（两种方式：innerText 和 innerHTML）
            // innerText：纯文本，不解析HTML标签
            title.innerText = 'DOM操作已执行！';
            // innerHTML：解析HTML标签，可添加子元素
            content.innerHTML = '这是修改后的段落，<span style="color:red">包含红色文字</span>';

            // 2. 修改元素属性（原生属性和自定义属性）
            // 修改原生属性（如src、href、class）
            title.setAttribute('class', 'new-title'); // 添加类名
            // 获取原生属性
            console.log('标题的类名：', title.getAttribute('class'));
            // 修改自定义属性（data-*）
            container.setAttribute('data-id', '1001');
            console.log('容器的自定义ID：', container.dataset.id);

            // 3. 修改元素样式（行内样式）
            title.style.color = '#007bff';
            title.style.fontSize = '28px';
            container.style.backgroundColor = '#f5f5f5';

            // 4. 创建元素并添加到页面中
            const newDiv = document.createElement('div'); // 创建div元素
            newDiv.innerText = '这是动态创建的元素'; // 设置内容
            newDiv.style.marginTop = '10px';
            newDiv.style.padding = '10px';
            newDiv.style.border = '1px solid #007bff';
            container.appendChild(newDiv); // 将新元素添加到容器中

            // 5. 删除元素（移除容器中的第一个子元素）
            // if (container.firstChild) {
            //     container.removeChild(container.firstChild);
            // }
        });
    </script>
</body>
</html>

代码核心解析：

获取元素 ：getElementById是最常用的方法（效率最高），querySelector是最灵活的方法（支持 CSS 选择器）；

修改内容 ：innerText适合纯文本，innerHTML适合包含 HTML 标签的内容；

修改属性 ：setAttribute和getAttribute用于操作所有属性，dataset专门用于操作自定义属性（data-*）；

修改样式 ：通过style属性操作行内样式，优先级高于 CSS 中的样式；

创建 / 删除元素 ：createElement创建元素，appendChild添加元素，removeChild删除元素。

5.3 浏览器操作接口：BOM（浏览器对象模型）

BOM（Browser Object Model，浏览器对象模型） 是浏览器 提供的另一套API ，它允许 JavaScript 操作浏览器本身，包括浏览器的窗口、地址栏、历史记录、状态栏、弹出框等。

与 DOM 不同，BOM 没有统一的 W3C 标准（除了window对象的部分属性），但各大浏览器都遵循通用的实现规范，保证了基本的兼容性。

BOM 的核心是 window对象 ------ 它是浏览器的顶级对象，所有的 BOM API 都是window对象的属性或方法，同时，全局的 JavaScript 变量和函数，也会成为window对象的属性和方法。

BOM 的核心组成部分

BOM 主要包含以下几个核心对象，每个对象对应浏览器的一个功能模块：

对象	核心功能	常用 API
window	浏览器窗口本身，顶级对象	`alert()`、`confirm()`、`prompt()`、`setTimeout()`、`setInterval()`
location	浏览器的地址栏，管理 URL	`href`（获取 / 设置 URL）、`reload()`（刷新页面）、`search`（获取查询参数）
history	浏览器的历史记录	`back()`（后退）、`forward()`（前进）、`go()`（跳转指定步数）
navigator	浏览器的信息，如版本、内核、设备	`userAgent`（获取浏览器用户代理）、`platform`（获取操作系统）
screen	用户屏幕的信息，如分辨率、宽高	`width`（屏幕宽度）、`height`（屏幕高度）

BOM 的核心操作（新手必学）

我们结合代码示例，讲解 BOM 中最常用的操作，创建bom-operation.html文件，代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM核心操作示例</title>
</head>
<body>
    <h1>BOM操作演示</h1>
    <button onclick="showAlert()">弹出提示框</button>
    <button onclick="confirmAction()">弹出确认框</button>
    <button onclick="promptInput()">弹出输入框</button>
    <button onclick="refreshPage()">刷新页面</button>
    <button onclick="goBack()">后退一页</button>
    <button onclick="showBrowserInfo()">查看浏览器信息</button>
    <button onclick="showScreenInfo()">查看屏幕信息</button>

    <script>
        // 1. window对象：弹出框系列（全局函数，无需写window.）
        function showAlert() {
            // 提示框：只有确定按钮
            alert('这是一个提示框！');
        }

        function confirmAction() {
            // 确认框：有确定和取消按钮，返回布尔值
            const isConfirm = confirm('确定要执行这个操作吗？');
            if (isConfirm) {
                alert('你点击了确定！');
            } else {
                alert('你点击了取消！');
            }
        }

        function promptInput() {
            // 输入框：可输入内容，返回输入的字符串（取消则返回null）
            const name = prompt('请输入你的名字：', '张三');
            if (name) {
                alert(`你好，${name}！`);
            }
        }

        // 2. location对象：操作地址栏
        function refreshPage() {
            // 刷新页面（true表示强制刷新，不缓存）
            location.reload(true);
        }

        // 扩展：获取URL中的查询参数
        console.log('当前URL：', location.href);
        console.log('查询参数：', location.search); // 如URL为?name=张三，则返回?name=张三

        // 3. history对象：操作历史记录
        function goBack() {
            // 后退一页（相当于浏览器的后退按钮）
            // history.forward()：前进一页
            // history.go(-2)：后退两页，go(1)：前进一页
            history.back();
        }

        // 4. navigator对象：获取浏览器信息
        function showBrowserInfo() {
            const info = `
                浏览器用户代理：${navigator.userAgent}
                操作系统：${navigator.platform}
                浏览器语言：${navigator.language}
            `;
            alert(info);
        }

        // 5. screen对象：获取屏幕信息
        function showScreenInfo() {
            const info = `
                屏幕宽度：${screen.width}px
                屏幕高度：${screen.height}px
                可用宽度：${screen.availWidth}px
                可用高度：${screen.availHeight}px
            `;
            alert(info);
        }

        // 6. 定时器：window对象的核心方法
        // 一次性定时器：3秒后执行
        setTimeout(function() {
            console.log('3秒后执行的代码');
        }, 3000);

        // 循环定时器：每隔1秒执行一次
        let count = 0;
        const timer = setInterval(function() {
            count++;
            console.log(`循环执行第${count}次`);
            // 执行5次后，清除定时器
            if (count >= 5) {
                clearInterval(timer);
                console.log('定时器已清除');
            }
        }, 1000);
    </script>
</body>
</html>

代码核心解析：

弹出框系列 ：alert、confirm、prompt是开发中常用的调试和交互方法，适合简单的用户反馈；

location 对象 ：reload用于刷新页面，href可用于跳转到新的 URL（如location.href = 'https://www.baidu.com'）；

history 对象：用于模拟浏览器的前进 / 后退功能，适合单页应用的路由管理；

定时器 ：setTimeout（一次性）和setInterval（循环）是实现异步操作的核心方法，如轮播图、倒计时等功能都依赖定时器。

5.4 三大核心部分的关系总结

为了方便大家记忆，我们用一句话总结 JavaScript 的三大核心部分的关系：

ECMAScript 是 JavaScript 的语法基础，决定了 "怎么写代码"；

DOM 是 JavaScript 操作网页的接口，决定了 "怎么操作 HTML"；

BOM 是 JavaScript 操作浏览器的接口，决定了 "怎么操作浏览器"。

三者结合，就构成了完整的 JavaScript 语言体系，让我们可以开发出功能丰富、交互流畅的网页应用。

总结

最后，送给所有新手一句话：编程学习没有捷径，唯有多写、多练、多思考。JavaScript 的学习过程中，你会遇到各种报错和问题，但这正是成长的必经之路。希望这篇文章能成为你前端学习之路的 "敲门砖"，祝你在 JavaScript 的江湖里，一路披荆斩棘，早日成为前端大神！

【前端开发之JavaScript】（一）JavaScript 入门宝典：从起源到运行全拆解

前言

一、JavaScript 是什么？------ 不止是 "网页脚本"，更是全栈利器

1.1 JavaScript 的核心定位：网页的 "交互引擎"

1.2 JavaScript 的 "全能属性"：不止前端，无处不在

1.3 JavaScript 的核心特性：新手必知的四大特点

二、JavaScript 的发展历史 ------ 从 "仓促诞生" 到 "全球标准" 的传奇之路

2.1 第一阶段：仓促诞生（1995 年）------ 为了 "对抗 Java" 而生

2.2 第二阶段：百家争鸣与混乱期（1996-2005 年）------ 浏览器大战引发的 "语言分裂"

2.3 第三阶段：崛起与革新（2005-2015 年）------ 框架兴起，走向成熟

2.4 第四阶段：标准化与普及（2015 年至今）------ ES6 落地，生态完善

2.5 关键时间线总结

三、JavaScript 和 HTML、CSS 的关系 ------ 三位一体的 "前端铁三角"

3.1 核心协作逻辑：各司其职，层层依赖

3.2 具体联动方式：三种核心交互模式

模式一：JavaScript 操作 HTML 元素（获取 / 修改内容）

模式二：JavaScript 修改 CSS 样式（动态美化）

模式三：JavaScript 监听 HTML 事件（触发交互）

3.3 代码示例：前端铁三角的联动实战

步骤 1：编写 HTML 结构

代码运行效果：

代码核心解析：

四、JavaScript 的运行过程 ------ 从代码到效果的 "幕后之旅"

4.1 前提：JavaScript 的运行环境

4.2 步骤一：浏览器加载 HTML 文件

4.3 步骤二：解析 HTML，构建 DOM 树和 CSSOM 树

1. 构建 DOM 树（文档对象模型）

2. 构建 CSSOM 树（CSS 对象模型）

4.4 步骤三：遇到 JavaScript 代码，触发执行流程

阶段 1：编译阶段（V8 引擎的预处理）

阶段 2：执行阶段（核心逻辑）

4.5 步骤四：渲染页面，呈现最终效果

4.6 关键注意点：<script>标签的加载属性

4.7 代码示例：验证 JavaScript 的运行顺序

运行结果分析：

五、JavaScript 的组成 ------ 三大核心部分，缺一不可

5.1 核心基础：ECMAScript（语法标准）

ECMAScript 的核心作用：

5.2 网页操作接口：DOM（文档对象模型）

DOM 的核心特点：

DOM 的核心操作（新手必学）

代码核心解析：

5.3 浏览器操作接口：BOM（浏览器对象模型）

BOM 的核心组成部分

BOM 的核心操作（新手必学）

代码核心解析：

5.4 三大核心部分的关系总结

总结

4.6 关键注意点：`<script>`标签的加载属性