核心 · 前端第 5 课 / 共 8 课免费阅读

JavaScript 基础 · 前端：HTML、CSS 与 JavaScript

怎么让网页「会思考」？

为什么需要它

HTML 是内容，CSS 是外观，JavaScript 是行为。每个能点的按钮、每个会检查输入的表单、每个不用刷新就能更新的页面，背后都是 JavaScript。它也是所有浏览器都能运行的唯一语言，所以是世界上用得最多的语言。

直觉理解

如果你会一点 Python，大部分概念都能直接搬过来；变的只是符号：

概念	Python	JavaScript
打印	`print(x)`	`console.log(x)`
变量	`x = 1`	`let x = 1;` 或 `const x = 1;`
带值的文字	`f"Hi {name}"`	`Hi ${name}`
相等吗	`==`	`===`
代码块	缩进	`{ }`
函数	`def f(a):`	`function f(a) { }` 或 `const f = a => …`

不会重新赋值的用 **const，会变的用 let**。用了没声明过的名字会报错。
比较时永远用 **===**。两个等号 == 会先转换类型，所以 1 == "1" 是 true，这会藏住 bug。
"5" + 1 是 "51"：只要有字符串，+ 就是拼接文字。

点运行：console.log 打印的内容会出现在「输出」里。

定义

let / const

Declare a variable. const can't be reassigned; let can.
声明变量。const 不能重新赋值；let 可以。

严格相等（===）

True only when both the type and the value are the same. 1 === "1" is false.
只有类型和值都相同时才为 true。1 === "1" 是 false。

箭头函数

A short way to write a function: const double = n => n * 2. With braces you need return: n => { return n * 2; }.
函数的简写：const double = n => n * 2。加了花括号就要写 return：n => { return n * 2; }。

示例

变量与模板字符串

动手试试

const 不会变，let 可以变，反引号用值拼出文字。

const name = "Ada";
let score = 7;
score = score + 3;
console.log(`${name} scored ${score}`);
console.log(typeof score, typeof name);

输出

Ada scored 10
number string

逐步执行

L1name 是 const：它永远是 "Ada"。
L3score 是 let，所以可以给它新值：10。score = 10
L4在反引号里，${...} 把值放进文字。Ada scored 10
L5typeof 告诉你一个值的类型。number string

== 和 ===

动手试试

宽松的 == 比较前会转换类型，结果常常出人意料。

console.log(1 == "1");
console.log(1 === "1");
console.log(0 == "");
console.log(0 === "");

输出

true
false
true
false

逐步执行

L1字符串 "1" 被转成数字 1，所以「相等」。true
L2类型不同：不相等。这几乎总是你想要的结果。false
L3空字符串被转成 0。意外吧！true
L4=== 说不相等。false

函数、if 和 for

动手试试

和 Python 一样的积木，换成了花括号。

function area(w, h) {
  return w * h;
}
const double = n => n * 2;

for (let i = 1; i <= 3; i++) {
  if (i % 2 === 0) {
    console.log(i, "even", area(i, i));
  } else {
    console.log(i, "odd", double(i));
  }
}

输出

1 odd 2
2 even 4
3 odd 6

逐步执行

L1一个有两个参数的函数。
L4箭头函数：接收 n，返回 n * 2。
L6for (起点; 继续的条件; 每轮之后)：i 依次是 1、2、3。
L7% 是取余数；偶数余 0。

常见错误

用 ==

== 会转换类型，所以 "" == 0 和 "1" == 1 都是 true。处处都用 === 和 !==。

+ 遇到文字

输入框里拿到的都是字符串："5" + 1 是 "51"。先用 Number(text) 转成数字。

忘了写 let 或 const

没有声明就写 total = 0，在这里会报错（在老代码里会变成一个隐藏的全局变量）。每个变量都要声明。

小测验

1. 这段代码会输出什么？

1
2

console.log("5" + 1);
console.log("5" - 1);

A
```
51
4
```
B
```
6
4
```
C
```
51
51
```

查看答案

答案：A

+ 遇到字符串就拼接文字。- 只能用于数字，所以 "5" 被转成了 5。

2. 你要保存用户 id，它永远不会被重新赋值。怎么声明？

Aconst userId = 42;
Blet userId = 42;
CuserId = 42;

查看答案

答案：A

const 表示「这个名字永远指向这个值」，也是在告诉读代码的人。

动手练习

3 道练习，分三层：先预测程序的输出，再按新需求改程序，最后从零写一个。代码在浏览器里运行，提交马上判题。

预测输出跟着循环走
准确写出它打印的内容。
改需求放得太宽的 PIN 检查
PIN 来自输入框，所以是字符串。这个检查连 "01234" 和 " 1234" 也放行了。让它只接受 "1234"，别的都不行。
从零写格式化价格
商店用分来存价格，避免舍入误差。写一个 formatPrice(cents)，返回带美元符号、两位小数的价格文字：
- formatPrice(1250) → "$12.50"
- formatPrice(5) → "$0.05"

在互动课里练这一课

打开互动课，这些例子都能直接改、直接运行，练习题提交马上判题。免费开始，不用注册。

打开互动课课程地图

互动课按顺序解锁：前面的课还没学，会先带你到课程地图。

本课术语

术语	中文	英文定义
JavaScript	JavaScript	The programming language every web browser runs.
console.log	console.log	Prints values to the console; JavaScript's print().
Template literal	模板字符串	Text in backticks where ${...} inserts values.