JavaScript 从零开始学习完整教程（小白友好版）#

这篇文章写给完全没写过代码的人。你不用懂任何编程概念，只要会打字、会用浏览器，就能跟着一步步学会 JavaScript。每个概念都会讲”是什么、为什么、怎么用”，并配上可以直接运行的例子。

一、JavaScript 是什么？为什么要学？#

JavaScript（简称 JS）是一种编程语言，它的主要工作是让网页”活”起来。

没有 JS 的网页：像一张打印好的报纸，只能看，不能动。
有了 JS 的网页：像手机 App，可以点击、弹窗、翻页、验证表单、播放动画。

现在全世界几乎每个网站都用到了 JavaScript。学会了它，你就掌握了网页交互的核心能力，这也是前端开发（网页开发）的必修第一课。

和 Java 有关系吗？ 没有。JavaScript 和 Java 是两个完全不同的语言，只是名字有点像，别被误导。

JS 能做什么？

给网页加交互：点击按钮弹窗、下拉菜单、图片轮播
处理数据：计算、筛选、排序
和服务器通信：登录、发评论、加载新内容
写小程序、小游戏、App（用一些框架）

二、准备工作：只需要一个浏览器和一个编辑器#

学 JS 起步不需要安装任何复杂软件。你只需要：

一个浏览器：Chrome、Edge、Firefox 都行，推荐 Chrome。
一个文本编辑器：新手推荐 VSCode（免费），也可以用系统自带的记事本。

先做个热身——打开开发者工具：

打开 Chrome 浏览器
随便打开一个网页（比如百度）
按键盘上的 F12 键（笔记本可能要按 Fn+F12）
在弹出的面板里，点上方选项卡中的 Console（控制台）

控制台就是”让你和 JS 对话的地方”。你在里面写的 JS 代码，回车后立刻执行。

在控制台里打出第一行代码： 在 Console 里输入下面这行，然后按回车：

1
console.log("你好，世界！");

你会看到控制台输出了 你好，世界！。恭喜！你已经运行了人生第一行 JavaScript 代码。

console.log() 的作用：把括号里的内容打印到控制台。它是 JS 学习阶段最常用的调试工具，相当于”跟电脑说：把这个东西显示出来给我看”。

三、怎么在网页里写 JS？三种方式#

方式一：直接在控制台写（适合练习）#

就像刚才那样，打开 Console 直接输入代码，回车运行。适合随手测试。

方式二：写在 HTML 文件的 script 标签里（最常见）#

用记事本新建一个文件，保存为 index.html，内容如下：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="UTF-8">
5
  <title>我的第一个页面</title>
6
</head>
7
<body>
8
  <h1>我的第一个页面</h1>
9
  <script>
10
    console.log("这段文字会打印到控制台");
11
    alert("这段文字会弹出窗口");
12
  </script>
13
</body>
14
</html>

用浏览器打开这个文件，你会看到：控制台打印了一句话，并且弹出了一个窗口。alert() 的作用是弹出一个提示框，是让新手最快看到”代码生效”的方式。

方式三：写在外部的 .js 文件里（正式项目做法）#

把 JS 代码单独保存成 script.js 文件，然后在 HTML 里引入：

1
<script src="script.js"></script>

这样 HTML 和 JS 分离，项目越大越清晰。正式开发都用这种方式。

四、变量：给数据起个名字#

程序就是”处理数据”。为了处理数据，我们需要把数据存起来，并给它起个名字——这就是变量。

声明变量的两种方式：

1
// let：可以变化的量（常用）
2
let age = 18;
3

4
// const：不可以变化的量（常量，常用）
5
const name = "小明";

怎么理解？ 你可以把变量想象成一个带标签的盒子：

let age = 18; 就是”拿一个盒子，贴上 age 标签，把 18 放进去”
之后想用这个数字，直接说 age 就行

规则：

变量名只能包含字母、数字、下划线 _、美元符 $，且不能以数字开头
不能是 JS 保留字（如 let、const、if、for 等）
区分大小写：age 和 Age 是两个不同变量
命名习惯：多个单词用小驼峰，如 myName、totalPrice

完整示例：

1
let age = 18;              // 声明变量并赋值
2
age = 19;                  // 修改值：let 允许重新赋值
3
console.log(age);          // 输出 19
4

5
const birthday = "2026-01-01";
6
// birthday = "2027-01-01"; // 这行会报错！const 不能再赋值
7
console.log(birthday);     // 输出 2026-01-01

什么时候用 let，什么时候用 const？ 新手记住一条：默认用 const，确定要改的才用 let。这样代码更安全、意图更清楚。

五、数据类型：JS 世界里有什么”东西”？#

JS 里常见的数据类型有这些：

类型	中文	例子	说明
number	数字	`18`、`3.14`	整数和小数都属于 number
string	字符串	`"你好"`、`'hello'`	文字，用单引号或双引号包起来
boolean	布尔	`true`、`false`	只有真/假两个值
null	空	`null`	表示”故意什么都没有”
undefined	未定义	不赋值时的默认值	表示”还没有值”
array	数组	`[1, 2, 3]`	一组数据的列表
object	对象	`{name: "小明", age: 18}`	一组”键值对”的数据

逐个看例子：

1
// 数字
2
let price = 9.9;
3
let count = 3;
4

5
// 字符串
6
let message = "Hello";
7
let name2 = '小明';
8
let sentence = "他说：\"你好\""; // 字符串里有引号要加反斜杠转义
9

10
// 布尔
11
let isOpen = true;
12
let isClose = false;
13

14
// null 和 undefined
15
let nothing = null;      // 主动置空
16
let notSet;              // 没赋值，值是 undefined
17

18
// 用 typeof 查看类型
19
console.log(typeof price);   // number
20
console.log(typeof message); // string
21
console.log(typeof isOpen);  // boolean

怎么知道一个值的类型？ 用 typeof 运算符，如上所示。

六、运算符：让数据”动起来”#

1. 算术运算符#

1
let a = 10;
2
let b = 3;
3

4
console.log(a + b);   // 13 加
5
console.log(a - b);   // 7  减
6
console.log(a * b);   // 30 乘
7
console.log(a / b);   // 3.333... 除
8
console.log(a % b);   // 1  取余数（10 除以 3 余 1）
9
console.log(a ** 2);  // 100 次方（10 的 2 次方）

2. 字符串拼接（加号的特殊用法）#

1
let firstName = "张";
2
let lastName = "三";
3
let fullName = firstName + lastName;   // "张三"
4
console.log(fullName);
5

6
let age = 20;
7
console.log("我今年" + age + "岁");     // 我今年20岁

3. 模板字符串（更优雅的拼接，用反引号）#

1
let name = "小红";
2
let score = 95;
3
// 反引号 ` 在键盘左上角，Tab 键上方
4
console.log(`你好，${name}，你的成绩是${score}分`);
5
// 输出：你好，小红，你的成绩是95分

模板字符串用反引号（不是单引号），里面用 ${} 插入变量，写长句子时特别方便。

4. 比较运算符（结果是 true 或 false）#

1
console.log(5 > 3);    // true  大于
2
console.log(5 < 3);    // false 小于
3
console.log(5 >= 5);   // true  大于等于
4
console.log(5 === 5);  // true  全等（值和类型都一样）
5
console.log(5 !== 3);  // true  不等于

重点提醒： 比较相等尽量用 ===（全等），不要用 ==（宽松相等）。因为 == 会把不同类型自动转换，容易出奇怪的 bug：

1
console.log(1 == "1");   // true ！数字1 和 字符串"1" 被认为相等（自动转了类型）
2
console.log(1 === "1");  // false ！严格比较，类型不同就不等

5. 逻辑运算符（与、或、非）#

1
// && 与：两边都为 true 结果才是 true
2
console.log(true && true);    // true
3
console.log(true && false);   // false
4

5
// || 或：只要一边是 true 结果就是 true
6
console.log(true || false);   // true
7
console.log(false || false);  // false
8

9
// ! 非：取反
10
console.log(!true);           // false
11
console.log(!false);          // true

实际例子： 判断一个分数是否及格且在 60 到 100 之间

1
let score = 75;
2
let isPass = score >= 60 && score <= 100;
3
console.log(isPass);   // true

七、条件判断：让程序”会思考”#

程序经常要根据情况走不同的路，这就要用 if。

基本 if 语句#

1
let age = 20;
2

3
if (age >= 18) {
4
  console.log("成年了，可以考驾照");
5
}

如果条件成立，就执行大括号里的代码；不成立就跳过。

if / else：二选一#

1
let age = 15;
2

3
if (age >= 18) {
4
  console.log("成年了");
5
} else {
6
  console.log("还没成年");
7
}

else if：多选一#

1
let score = 85;
2

3
if (score >= 90) {
4
  console.log("优秀");
5
} else if (score >= 80) {
6
  console.log("良好");
7
} else if (score >= 60) {
8
  console.log("及格");
9
} else {
10
  console.log("不及格");
11
}

执行逻辑： 从上往下检查，第一个满足的条件会执行，后面的都不再判断。

三元运算符（简写版 if else）#

1
let age = 20;
2
let result = age >= 18 ? "成年" : "未成年";
3
console.log(result);   // 成年

格式：条件 ? 值1 : 值2，条件为 true 取值1，否则取值2。适合简单的二选一。

八、循环：让程序”重复干活”#

如果让你输出 1 到 100，你肯定不会手写 100 行。循环就是干这个的。

for 循环（知道要循环几次）#

1
for (let i = 1; i <= 5; i++) {
2
  console.log(i);
3
}
4
// 输出：1 2 3 4 5

拆解一下 for (let i = 1; i <= 5; i++)：

let i = 1：起点，从 1 开始
i <= 5：条件，只要成立就继续
i++：每次循环结束 i 加 1（等价于 i = i + 1）

while 循环（条件满足就一直循环）#

1
let i = 1;
2
while (i <= 5) {
3
  console.log(i);
4
  i++;
5
}

注意： 如果忘记写 i++，条件永远成立，程序就会死循环卡死。新手最常犯这个错。

循环数组（最常见场景）#

1
let fruits = ["苹果", "香蕉", "橘子"];
2

3
for (let i = 0; i < fruits.length; i++) {
4
  console.log(fruits[i]);
5
}
6
// 输出：苹果 香蕉 橘子

fruits.length 是数组的长度（有几个元素），fruits[i] 是取第 i 个元素。注意下标从 0 开始：第 0 个是”苹果”，第 1 个是”香蕉”。

还有更简洁的 for...of：

1
for (let fruit of fruits) {
2
  console.log(fruit);
3
}

for...of 直接拿元素，不用管下标，新手用这个更不容易错。

九、函数：把一段代码打包，随时调用#

函数就是把一段可重复使用的代码打包起来，起个名字，用的时候叫它。

定义和调用#

1
// 定义函数
2
function sayHello() {
3
  console.log("你好！");
4
}
5

6
// 调用函数
7
sayHello();
8
sayHello();

调用几次，就执行几次。

带参数：函数像”加工厂”#

1
function greet(name) {
2
  console.log(`你好，${name}！`);
3
}
4

5
greet("小明");   // 你好，小明！
6
greet("小红");   // 你好，小红！

参数就是”加工厂”的原料：同一个函数，传入不同的原料，产出不同的结果。

带返回值：函数还能”给结果”#

1
function add(a, b) {
2
  return a + b;
3
}
4

5
let sum = add(3, 4);
6
console.log(sum);   // 7

return 会把结果交还给调用处。注意：函数遇到 return 就立刻结束，后面的代码不会执行。

箭头函数（现代写法，越来越常用）#

1
// 普通写法
2
function add(a, b) {
3
  return a + b;
4
}
5

6
// 箭头函数写法
7
const add = (a, b) => a + b;

箭头函数用 =>，如果函数体只有一行，可以省略大括号和 return。写熟悉普通函数后再学箭头函数，两者效果一样。

十、数组：数据的”列表”#

数组用来存一组相关的数据。

创建和访问#

1
let colors = ["红", "绿", "蓝"];
2
console.log(colors[0]);   // 红（下标从0开始）
3
console.log(colors[2]);   // 蓝
4
console.log(colors.length); // 3 长度

增删改查#

1
let list = ["a", "b", "c"];
2

3
list.push("d");      // 末尾加：["a","b","c","d"]
4
list.pop();          // 删除末尾：["a","b","c"]
5
list.unshift("x");   // 开头加：["x","a","b","c"]
6
list.shift();        // 删除开头：["a","b","c"]
7
list[1] = "B";       // 修改下标1：["a","B","c"]
8

9
// 查找位置
10
console.log(list.indexOf("B"));  // 1，找不到返回 -1

常用方法#

1
let nums = [3, 1, 4, 1, 5];
2

3
// 排序
4
nums.sort();
5
console.log(nums);   // [1, 1, 3, 4, 5]
6

7
// 遍历（对每个元素做操作）
8
nums.forEach(n => console.log(n));
9

10
// 筛选（返回满足条件的新数组）
11
let big = nums.filter(n => n > 2);
12
console.log(big);    // [3, 4, 5]
13

14
// 映射（每个元素转换）
15
let doubled = nums.map(n => n * 2);
16
console.log(doubled); // [2, 2, 6, 8, 10]
17

18
// 求和（累加）
19
let sum = nums.reduce((total, n) => total + n, 0);
20
console.log(sum);    // 14

filter、map、reduce 这三个方法非常强大，是 JS 处理数组的”三件套”，后面写项目会天天用到。

十一、对象：数据的”档案袋”#

对象用来描述一个”事物”，用键值对的形式存数据。

创建和访问#

1
let student = {
2
  name: "小明",
3
  age: 18,
4
  grade: "高三",
5
  score: 95
6
};
7

8
// 两种访问方式
9
console.log(student.name);     // 小明（点号方式）
10
console.log(student["age"]);   // 18（方括号方式，变量名是动态时用）

修改和添加属性#

1
student.age = 19;        // 修改
2
student.hobby = "篮球";  // 新增属性
3
console.log(student);

对象里可以放函数（方法）#

1
let calculator = {
2
  add: function (a, b) {
3
    return a + b;
4
  }
5
};
6

7
console.log(calculator.add(2, 3));   // 5

数组里可以放对象（实际项目最常见的组合）#

1
let students = [
2
  { name: "小明", score: 95 },
3
  { name: "小红", score: 88 },
4
  { name: "小刚", score: 76 }
5
];
6

7
for (let s of students) {
8
  console.log(`${s.name} 得了 ${s.score} 分`);
9
}

理解”数组里放对象”是看懂真实项目代码的关键一步，很多数据（用户列表、商品列表）都是这个结构。

十二、DOM 操作：让 JS 真正操控网页#

前面学的都是在控制台里算数据。真正让 JS 发光的是操作网页——这就要用到 DOM（文档对象模型）。简单说，DOM 就是”网页内容的编程接口”，JS 通过它来找到网页上的元素，然后修改它们。

第一步：拿到网页元素#

1
// 通过 id 拿元素（id 在 HTML 里是唯一的）
2
let title = document.getElementById("title");
3

4
// 通过标签名拿元素（返回数组，哪怕只有一个）
5
let paragraphs = document.getElementsByTagName("p");
6

7
// 通过 CSS 选择器拿元素（最灵活，推荐）
8
let first = document.querySelector(".box");      // 第一个 class 为 box 的元素
9
let all = document.querySelectorAll(".box");     // 所有 class 为 box 的元素

第二步：修改内容#

1
<h1 id="title">旧标题</h1>
2
<script>
3
  let title = document.getElementById("title");
4
  title.textContent = "新标题！";   // 修改文字
5
  title.style.color = "red";        // 修改样式（CSS 属性用驼峰命名）
6
  title.style.fontSize = "30px";    // CSS 里是 font-size，JS 里写 fontSize
7
</script>

第三步：响应用户操作（事件）#

1
<button id="btn">点我</button>
2
<p id="msg">还没点</p>
3

4
<script>
5
  let btn = document.getElementById("btn");
6
  let msg = document.getElementById("msg");
7

8
  // 监听点击事件
9
  btn.addEventListener("click", function () {
10
    msg.textContent = "你点了我！";
11
    msg.style.color = "green";
12
  });
13
</script>

addEventListener("click", 函数) 的意思是：当用户点击这个按钮时，执行后面的函数。这是网页交互的核心写法。

一个小练习：点击计数器#

把下面代码保存成 counter.html，用浏览器打开试试：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="UTF-8">
5
  <title>计数器</title>
6
</head>
7
<body>
8
  <h1>点击计数器</h1>
9
  <p>点击次数：<span id="count">0</span></p>
10
  <button id="btn">+1</button>
11

12
  <script>
13
    let num = 0;
14
    let countEl = document.getElementById("count");
15
    let btn = document.getElementById("btn");
16

17
    btn.addEventListener("click", function () {
18
      num = num + 1;              // 每次点击加 1
19
      countEl.textContent = num;  // 把数字显示到页面上
20
    });
21
  </script>
22
</body>
23
</html>

每次点按钮，页面上的数字就会 +1。恭喜你，你已经写出了第一个真正的”交互程序”！

十三、新手常犯的错误和排错方法#

忘记加分号：JS 大多能自动补分号，但建议自己写清楚
大小写写错：Console.log 是错的，必须是 console.log
变量未定义就用：要先 let x = ... 再使用
数组下标越界：arr[10] 但数组只有 3 个元素，结果是 undefined
死循环：while 条件永远为真，页面卡死（把浏览器关了重开）
函数忘记调用：只写了函数定义，没写 函数名()，所以没反应

排错万能方法： 在可疑位置加 console.log(变量)，把中间结果打印出来看。这比猜快一百倍。

看报错： 代码出错时，Console 会显示红色的错误信息，点开会告诉你是哪一行出错、什么错误。学会读报错是程序员的必修课。

十四、学习路线：接下来学什么？#

你已经掌握了 JS 的全部基础语法。接下来按这个顺序进阶：

ES6+ 新特性：解构赋值、展开运算符、模块化 import/export
异步编程：setTimeout、Promise、async/await（处理网络请求的关键）
网络请求：fetch 请求后端数据
HTML + CSS 强化：把页面做得更漂亮
框架：Vue / React（目前最流行的两个，二选一深入）
动手做项目：待办清单 App、天气查询页、简易商城

给新手的三个建议：

代码一定要自己敲，不要复制粘贴。手敲才能形成肌肉记忆
每学一个概念，就写一个小例子验证，哪怕只有三行
遇到不懂的先自己查（MDN 文档是官方权威资料），实在不行再问

十五、总结#

这一篇我们从头到尾学会了：

JavaScript 是什么、怎么在控制台和 HTML 里运行
变量（let / const）、常见数据类型
运算符：算术、比较、逻辑
条件判断 if / else
循环 for / while
函数与箭头函数
数组的增删改查和 filter / map / reduce
对象以及”数组里放对象”的数据结构
用 DOM 操作网页：找元素、改内容、监听点击事件

从按下 F12 输出第一行 console.log，到写出能点击加一的计数器，你已经完成了从零到入门的过程。接下来就是多写多练——编程没有捷径，唯一的捷径就是自己动手写。加油！