1.1 什么是JavaScript
JavaScript = 给网页添加"行为"的编程语言
HTML 负责页面有什么（结构），CSS 负责长什么样（样式），JavaScript 负责能做什么（行为）。
举个例子：一个按钮，HTML 把它画出来，CSS 把它变漂亮，JavaScript 让点击它的时候弹出一句话。
💡 HTML/CSS/JS 三件套能力表：
| 技术 | 职责 | 大白话 |
|---|---|---|
| HTML | 结构 | 决定页面有什么（标题、段落、按钮） |
| CSS | 样式 | 决定页面长什么样（颜色、大小、位置） |
| JavaScript | 行为 | 决定页面能做什么（点击、弹窗、计算） |
🎯 JavaScript 能干什么？
| 能力 | 大白话解释 |
|---|---|
| 修改页面内容 | 不用刷新页面就能换文字、换图片 |
| 跟用户交互 | 点击按钮弹窗、鼠标滑过变颜色 |
| 控制浏览器 | 弹出提示框、跳转页面 |
| 处理数据 | 计算、判断、循环、整理信息 |
💡 JavaScript 和 Java 是两种完全不同的语言，名字像但关系不大，就像"老婆"和"老婆饼"。
🎮 试一试：点击按钮体验 JS 交互！
1<button onclick="alert('你点击了按钮！')">点击我</button>
2<button onclick="alert('你好，JavaScript！')">另一个按钮</button>
1.2 JS的引入方式
想写 JavaScript，有三种办法把它放进 HTML 页面里。
方式一：行内引入（写在 HTML 标签的事件属性里）
直接写在标签的 onclick 这类属性中，最简单但不推荐（代码混在一起难维护）。
1<button onclick="alert('你点了我一下！')">点我</button>
方式二：内嵌引入（写在 <script> 标签里）
在 HTML 的 <body> 底部或 <head> 中放一对 <script> 标签，中间写 JS 代码。
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4 <meta charset="UTF-8">
5 <title>内嵌JS示例</title>
6</head>
7<body>
8 <h1>我的第一个JS页面</h1>
9 <script>
10 alert('你好，世界！');
11 </script>
12</body>
13</html>
方式三：外部引入（推荐 ✅，写在单独的 .js 文件里）
创建一个 script.js 文件，用 <script src="..."> 引入。
这是最推荐的方式，便于维护和缓存。
1<!-- HTML 文件 -->
2<!DOCTYPE html>
3<html lang="zh-CN">
4<head>
5 <meta charset="UTF-8">
6 <title>外部JS示例</title>
7</head>
8<body>
9 <h1>外部JS文件</h1>
10 <!-- src 指向 js 文件的路径 -->
11 <script src="script.js"></script>
12</body>
13</html>
14
15<!-- script.js 文件内容 -->
16alert('这段代码来自外部JS文件！');
📊 三种方式对比
| 方式 | 代码 | 适用场景 |
|---|---|---|
| 行内 | onclick="alert(1)" |
极简单的交互，不推荐 |
| 内嵌 | <script>代码</script> |
小页面、学习阶段 |
| 外部 | <script src="a.js"> |
推荐 ✅，便于维护和缓存 |
⚠️ 重要提醒：
<script> 标签建议放在 </body> 闭合标签之前，而不是 <head> 里。因为浏览器是从上往下解析 HTML 的，如果把 JS 放在 <head> 里，它会在页面内容还没加载完时就执行，可能导致找不到页面元素。
⚠️ 新手易错：外部 JS 文件里不要写
⚠️
<script> 标签，那个标签只在 HTML 里用。.js 文件里直接写 JavaScript 代码就行。⚠️
<script src="xxx.js"></script> 是双标签，不能写成 <script src="xxx.js" />，闭合标签 </script> 不能省略。
1.3 变量
变量就是装数据的盒子，给盒子贴个标签（变量名），以后通过这个名字来拿里面的东西。
📦 JavaScript 有三种声明变量的方式：
var（ES5 传统方式）
1var name = '小明'; // 声明一个变量 name，里面放 '小明'
2var age = 18; // 声明一个变量 age，里面放 18
let（ES6 新方式，推荐）
1let city = '北京'; // 声明一个变量 city，里面放 '北京'
2let year = 2026; // 声明一个变量 year，里面放 2026
const（ES6 常量，值不能改变）
1const PI = 3.14; // 声明一个常量 PI，值永远不变
2const BIRTHDAY = '2026-06-12';
💡 记忆口诀：
var 老古董，let 新时代，const 不变心。
🎮 完整运行示例：试试打开浏览器控制台(F12)查看输出！
点击按钮运行代码，查看弹窗输出...
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4 <meta charset="UTF-8">
5 <title>变量示例</title>
6</head>
7<body>
8 <h1>变量示例</h1>
9 <script>
10 // 声明变量并赋值
11 var name = '小明';
12 let age = 18;
13 const PI = 3.14;
14
15 // 在控制台（浏览器按F12可看到）输出变量的值
16 console.log(name); // 控制台显示：小明
17 console.log(age); // 控制台显示：18
18 console.log(PI); // 控制台显示：3.14
19
20 // 弹窗显示
21 alert('我叫' + name + '，今年' + age + '岁');
22 </script>
23</body>
24</html>
📖 代码逐行讲解
| 代码 | 说明 |
|---|---|
var name = '小明'; |
用 var 声明一个叫 name 的变量，把 '小明' 放进去 |
let age = 18; |
用 let 声明 age，放数字 18 |
const PI = 3.14; |
用 const 声明常量 PI，值固定不能改 |
console.log(name); |
在浏览器控制台打印 name 的值 |
alert(...) |
弹出一个提示框 |
💡 运行结果：页面打开后弹出提示框"我叫小明，今年18岁"；按 F12 打开开发者工具 → Console（控制台）选项卡，能看到三行输出。
📊 var、let、const 的区别
| 关键字 | 是否可以重新赋值 | 是否可以重复声明 | 作用域 |
|---|---|---|---|
var |
✅ 可以 | ✅ 可以（会出问题） | 函数级 |
let |
✅ 可以 | ❌ 不可以 | 块级 |
const |
❌ 不可以 | ❌ 不可以 | 块级 |
1.3.2 命名规范：变量名要遵循以下规则：
- 只能包含字母、数字、下划线
_、美元符$ - 不能以数字开头
- 不能是保留字（如
if、for、var这些已经被语言用了的词） - 区分大小写（
name和Name是两个不同的变量）
1// ✅ 正确的命名
2let userName = '张三';
3let _temp = 100;
4let $id = 5;
5let myName123 = '李四';
6
7// ❌ 错误的命名
8// let 1name = 'test'; // 不能以数字开头
9// let my-name = 'test'; // 不能有连字符
10// let var = 'test'; // var 是保留字
💡 推荐命名风格：多个单词用驼峰命名法（camelCase），第一个单词首字母小写，后面每个单词首字母大写：
userName、myAge、isStudent。
⚠️ 新手易错：变量必须先声明再使用。直接写
age = 20（没写 var/let/const）虽然有时不报错，但会创建一个全局变量（整个页面都能访问），容易造成混乱。永远记得写 let 或 const。
1.4 数据类型
数据类型就是数据的不同种类。好比水果店里苹果、香蕉、榴莲都是水果，但长得不一样。
🍎 JavaScript 中有 5 种基础数据类型：
| 类型 | 中文含义 | 举例 | 大白话 |
|---|---|---|---|
Number |
数字 | 18、3.14、-5 |
任何数字，整数小数都算 |
String |
字符串 | '你好'、"hello" |
用引号包起来的文字 |
Boolean |
布尔值 | true、false |
只有"是"和"否" |
Undefined |
未定义 | undefined |
声明了没赋值 |
Null |
空值 | null |
故意设为"什么都没有" |
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4 <meta charset="UTF-8">
5 <title>数据类型示例</title>
6</head>
7<body>
8 <h1>基础数据类型</h1>
9 <script>
10 // 数字
11 let num = 100;
12 let price = 9.99;
13
14 // 字符串（用单引号或双引号包起来）
15 let name = '张三';
16 let greeting = "你好";
17
18 // 布尔值
19 let isStudent = true; // 是学生
20 let isMarried = false; // 没结婚
21
22 // undefined：声明了没赋值
23 let x;
24 console.log(x); // 输出：undefined
25
26 // null：主动设为空
27 let y = null;
28 console.log(y); // 输出：null
29
30 // 用 typeof 查看数据类型
31 console.log(typeof num); // 输出："number"
32 console.log(typeof name); // 输出："string"
33 console.log(typeof isStudent); // 输出："boolean"
34 console.log(typeof x); // 输出："undefined"
35 console.log(typeof y); // 输出："object"（JS的历史bug）
36 </script>
37</body>
38</html>
🔍 typeof 查看数据类型结果
| 代码 | 类型 | 说明 |
|---|---|---|
let num = 100; |
number | 数字，不加引号 |
let s = '你好'; |
string | 字符串，必须加引号 |
let b = true; |
boolean | 布尔值，只有 true 或 false |
let u; |
undefined | 声明但没赋值 |
let n = null; |
null（object） | 主动设为空（JS的历史bug，typeof 返回 "object"） |
📚 复杂数据类型（引用类型）
| 类型 | 说明 | 后续章节 |
|---|---|---|
Object |
对象，装多个数据的集合 | 1.10 节 |
Array |
数组，有序的数据列表 | 1.9 节 |
1.4.3 数据类型转换：有时候需要把一种类型转成另一种——比如从输入框拿到的都是字符串，但你要做加法计算，就得转成数字。
转数字：Number() 或 parseInt() / parseFloat()
1let str = '123';
2let num = Number(str); // 把字符串 '123' 转成数字 123
3console.log(num + 1); // 输出：124（数字相加）
4
5let str2 = '3.14';
6let floatNum = parseFloat(str2); // 转成小数 3.14
7let intNum = parseInt(str2); // 转成整数 3（去掉小数部分）
转字符串：String() 或 .toString()
1let num = 999;
2let str = String(num); // 数字 999 转成字符串 '999'
3let str2 = num.toString(); // 另一种写法
4console.log(str + 1); // 输出："9991"（字符串拼接，不是加法）
转布尔值：Boolean()
1console.log(Boolean(0)); // false（0 是假）
2console.log(Boolean('')); // false（空字符串是假）
3console.log(Boolean(null)); // false
4console.log(Boolean(undefined)); // false
5console.log(Boolean(1)); // true（非0数字是真）
6console.log(Boolean('hello')); // true（非空字符串是真）
🎮 完整类型转换运行示例
点击按钮运行代码，查看弹窗输出...
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4 <meta charset="UTF-8">
5 <title>类型转换示例</title>
6</head>
7<body>
8 <h1>类型转换</h1>
9 <script>
10 // 字符串转数字
11 let price = '99.9';
12 let numPrice = Number(price);
13 console.log('原类型：' + typeof price); // string
14 console.log('转换后：' + typeof numPrice); // number
15 console.log('打八折：' + numPrice * 0.8); // 79.92
16
17 // 数字转字符串
18 let count = 42;
19 let strCount = String(count);
20 console.log('原类型：' + typeof count); // number
21 console.log('转换后：' + typeof strCount); // string
22 console.log('拼接结果：' + strCount + '个商品'); // "42个商品"
23
24 // 隐式转换（JS自动帮你转）
25 console.log('5' - 2); // 3（减号会触发转数字）
26 console.log('5' + 2); // "52"（加号碰到字符串就变拼接）
27 </script>
28</body>
29</html>
📖 代码逐行讲解
| 代码 | 说明 |
|---|---|
let price = '99.9'; |
变量 price 是字符串 '99.9' |
Number(price) |
把字符串 '99.9' 转成数字 99.9 |
'5' - 2 |
减号触发隐式转换，'5' 转成 5，5-2=3 |
'5' + 2 |
加号遇到字符串就拼接，结果是 '52' |
⚡ 隐式转换互动演示
输入一个值，查看 JS 隐式转换的结果：
输入值后点击按钮查看结果...
1// 隐式转换规则：
2// '+' 遇到字符串 → 变成字符串拼接
3// '-' '*' '/' → 把字符串转成数字再计算
4
5console.log('5' + 2); // "52" ← 加号遇到字符串，变拼接
6console.log('5' - 2); // 3 ← 减号触发转数字
7console.log('5' * 2); // 10 ← 乘号触发转数字
8console.log('5' / 2); // 2.5 ← 除号触发转数字
9console.log('abc' + 1); // "abc1" ← 加号变拼接
10console.log('abc' - 1); // NaN ← 减号转数字失败
⚠️ 新手易错：
'5' + 2 结果是 '52' 不是 7！加号 + 既做加法又做拼接，一旦有一边是字符串，它就变成拼接。减号 -、乘号 *、除号 / 则会把字符串转成数字再计算。
⚠️ 新手易错：
Number('abc') 会得到 NaN（Not a Number——不是一个数字），表示转换失败。