一、开篇：脚本与语句 ——JavaScript 的执行单元

在 JavaScript 中，一段脚本就是一系列计算机能够一步步遵照执行的指令，而每一条独立的指令，我们称之为语句。语句是代码的最小执行单元，它定义了程序要执行的具体操作。

1. 语句的核心规则

• 以分号结尾：每条语句末尾的分号（;）告诉 JavaScript 解释器 “这个步骤已执行完毕，准备执行下一个步骤”，避免解释器误判语句边界。
• 独立成行：每条语句通常从新行开始，这不仅是书写规范，更能大幅提升代码的可读性，让逻辑一目了然。
• 大小写敏感：JavaScript 对大小写严格区分，例如hourNow、HourNow和HOURNOW代表三个完全不同的变量 / 标识符，编写时务必注意大小写一致性。

2. 代码块：语句的组织方式

多条语句可以被一对花括号{}包裹，组成代码块。代码块是逻辑分组的核心，常用于条件判断、循环等场景，让代码结构更清晰。

我们来看一个根据时间输出问候语的完整示例，直观感受语句与代码块的协作：

javascript

运行

// 1. 获取当前日期时间（语句1）
var today = new Date();
// 2. 提取当前小时数（语句2）
var hourNow = today.getHours();
// 3. 声明问候语变量（语句3）
var greeting;

// 条件判断代码块（包含多条语句的逻辑分组）
if (hourNow > 18) {
  // 代码块内语句：18点后赋值为“晚上好”
  greeting = 'Good evening';
} else if (hourNow > 12) {
  // 代码块内语句：12-18点赋值为“下午好”
  greeting = 'Good afternoon';
} else if (hourNow > 0) {
  // 代码块内语句：0-12点赋值为“早上好”
  greeting = 'Good morning';
} else {
  // 代码块内语句：异常情况赋值为“欢迎”
  greeting = 'Welcome';
}

// 4. 将问候语输出到页面（语句4）
document.write(greeting);

在这段代码中，每一行绿色的代码都是一条独立语句，而粉红色的花括号则标识了不同的代码块边界。

---

二、注释：让代码 “会说话” 的关键技巧

代码是写给计算机执行的指令，而注释是写给人看的说明。编写清晰的注释，不仅能让你自己在数月后快速理解代码逻辑，更能帮助团队伙伴高效协作，避免 “看不懂自己写的代码” 的尴尬。

JavaScript 提供了两种注释方式，分别适用于不同场景：

1. 单行注释：// 简短说明

单行注释以双斜杠//开头，从//到行尾的所有内容都会被解释器忽略，常用于对单条语句或小段逻辑的说明。

javascript

运行

var today = new Date(); // 创建一个新的日期对象
var hourNow = today.getHours(); // 获取当前的小时数

2. 多行注释：/* 块级说明 */

多行注释以/*开头，以*/结尾，中间的所有内容（包括换行）都会被忽略，常用于对整个脚本、函数或复杂逻辑的整体说明，也可以用来临时注释一段代码（调试时非常实用）。

javascript

运行

/* 
  这段代码根据当前时间向用户显示一句问候语
  逻辑：18点后→晚上好，12-18点→下午好，0-12点→早上好，异常→欢迎
*/
var today = new Date();
var hourNow = today.getHours();
var greeting;

// 条件判断逻辑（单行注释补充说明）
if (hourNow > 18) {
  greeting = 'Good evening';
}
// ... 后续逻辑省略

---

三、变量：JavaScript 的 “临时记忆”

脚本执行过程中，往往需要暂时存储数据（比如计算结果、用户输入、临时状态），而变量就是 JavaScript 提供的 “临时记忆工具”，它可以用来存储脚本中需要使用的各种信息。

1. 变量的核心概念

变量就像一个带名字的盒子，我们可以把数据放进盒子里，后续通过盒子的名字随时取用、修改数据。

• 可变性：变量的名字是固定的，但盒子里的数据可以在脚本运行过程中被修改，这也是 “变量” 名字的由来。
• 临时性：变量存储的数据仅在页面加载期间有效，一旦用户离开页面，浏览器就会清空所有变量中的数据。

我们用 “计算墙的面积” 来理解变量的作用： 数学中，墙的面积 = 宽度 × 高度，这个计算在大脑中可以瞬间完成，但脚本执行时，需要计算机一步步执行指令：

1. 记住宽度的值（存储到变量）
2. 记住高度的值（存储到变量）
3. 将宽度 × 高度，得到面积（计算）
4. 将结果返回给用户（输出） 这里的宽度、高度、面积，都需要用变量来 “记住”，否则计算机无法完成多步骤的计算。

2. 变量的声明与赋值：两步走

在 JavaScript 中，使用变量前必须先声明，再赋值（也可以声明和赋值一步完成）。

步骤 1：声明变量

声明变量的作用是告诉解释器：“我要创建一个叫 X 的变量，请为它分配内存空间”。在 ES5 及之前，使用var关键字声明变量，语法为：

javascript

运行

var quantity; // 声明一个名为quantity的变量
var price; // 声明一个名为price的变量
var total; // 声明一个名为total的变量

• var是声明变量的关键字，解释器通过它识别变量声明；
• quantity是变量名（也叫标识符），变量名需要遵循命名规范：
  • 必须以字母、下划线_或美元符号$开头；
  • 后续可以跟字母、数字、下划线或美元符号；
  • 多个单词通常采用驼峰式命名（camelCase），比如userName、hourNow，第一个单词小写，后续单词首字母大写；
  • 不能使用 JavaScript 的关键字（如var、if、else等）作为变量名。

步骤 2：给变量赋值

声明变量后，变量默认值为undefined（未定义），需要通过赋值操作符=给变量赋予具体的值：

javascript

运行

quantity = 3; // 给quantity赋值为3
price = 5; // 给price赋值为5
total = price * quantity; // 计算总价，并赋值给total

• =是赋值操作符，它的作用是把右边的值，存到左边的变量中，和数学中的 “等于号” 含义完全不同（数学中=表示两边相等，而 JavaScript 中=表示 “赋值”）；
• 也可以声明和赋值一步完成，这是更常见的写法：

  javascript

  运行

  var quantity = 3;
  var price = 5;
  var total = price * quantity;
  

---

四、数据类型：变量存储的 “数据种类”

变量可以存储不同类型的数据，JavaScript 中最基础、最常用的数据类型有三种：数字、字符串、布尔值。JavaScript 是弱类型语言，声明变量时不需要指定数据类型，解释器会根据赋值自动判断类型。

1. 数字类型（Number）

数字类型用于存储数值，包括整数、小数、负数，常用于计数、计算、尺寸、时间等场景。

javascript

运行

var age = 25; // 整数
var price = 9.99; // 小数
var temperature = -5; // 负数
var total = 100 + 200; // 计算结果也是数字类型

• 数字不需要用引号包裹，直接书写即可；
• 可以进行加减乘除等数学运算，比如price * quantity、age + 1。

2. 字符串类型（String）

字符串类型用于存储文本，包括字母、数字、符号等任意字符，常用于用户姓名、消息、页面文本等场景。

javascript

运行

var username = 'Molly'; // 单引号包裹的字符串
var message = "See our upcoming range"; // 双引号包裹的字符串
var htmlText = '<div>Hello World</div>'; // 包含HTML标签的字符串

• 字符串必须用引号包裹，单引号' '或双引号" "都可以，但必须成对匹配（开头和结尾的引号必须一致）；
• 引号必须是英文半角引号，不能使用中文全角引号；
• 字符串可以拼接，比如'$' + total，可以把文本和数字拼接成新的字符串。

3. 布尔类型（Boolean）

布尔类型只有两个值：true（真）和false（假），常用于条件判断、状态标记（比如用户是否登录、按钮是否点击），是控制程序流程的核心类型。

javascript

运行

var isLogin = true; // 表示用户已登录
var isExpired = false; // 表示状态未过期

• 布尔值不需要用引号包裹，直接写true或false即可；
• 条件判断语句（如if）的判断条件，本质上就是布尔值，比如hourNow > 18的结果就是true或false。

---

五、实战示例：变量与数据类型的完整应用

我们通过两个实际场景，感受变量和数据类型在代码中的使用方式。

示例 1：用变量存储数字，计算总价

javascript

运行

// 1. 声明变量并赋值（数字类型）
var price = 5; // 单个卡片的价格
var quantity = 14; // 客户需要的卡片数量
var total = price * quantity; // 计算总价

// 2. 将结果写入页面
var el = document.getElementById('cost');
el.textContent = '$' + total; // 字符串拼接：把"$"和数字拼接成文本

对应的 HTML 代码：

html

预览

<div id="cost">Cost: $5 per tile</div>
<script src="js/numeric-variable.js"></script>

运行后，页面中id="cost"的元素会被更新为$70，实现了动态计算并展示结果的效果。

示例 2：用变量存储字符串，更新页面文本

javascript

运行

// 1. 声明变量并赋值（字符串类型）
var username = 'Molly'; // 用户名
var message = 'See our upcoming range'; // 提示消息

// 2. 将字符串写入页面元素
var elName = document.getElementById('name');
elName.textContent = username;

var elNote = document.getElementById('note');
elNote.textContent = message;

对应的 HTML 代码：

html

预览

<div id="title">Howdy <span id="name">friend</span>!</div>
<div id="note">Take a look around...</div>
<script src="js/string-variable.js"></script>

运行后，页面会显示Howdy Molly!和See our upcoming range，实现了用变量动态更新页面文本的效果。

---

六、总结：JavaScript 入门核心知识点回顾

1. 语句：脚本的执行单元，以分号结尾，独立成行，组成代码块；
2. 注释：单行注释//和多行注释/* */，提升代码可读性，方便调试与协作；
3. 变量：临时存储数据的 “盒子”，先声明（var）后赋值，变量名遵循驼峰式命名规范；
4. 数据类型：数字、字符串、布尔值是基础类型，解释器自动识别，弱类型语言无需提前声明类型；
5. 实战应用：变量可存储数字、字符串，通过计算、拼接实现动态页面效果。

这些基础知识点是 JavaScript 的 “地基”，后续的条件判断、循环、函数等复杂逻辑，都建立在语句、变量和数据类型的基础上。掌握这些核心概念，你就能迈出 JavaScript 入门的关键一步。