第十八天：进入 JavaScript 世界 — 从环境搭建到六大数据类型

蜗牛往上爬 · 前端工业可视化学习笔记第 18 篇
阶段0 的 HTML/CSS 大屏搭好了，但它是"静态的"——数据是写死的，时间不更新，图表是占位符。从今天开始进入阶段1：用 JavaScript 让大屏真正"活"起来。第一步：搭建环境、认识变量和数据类型。

一、JS 能跑在哪里？

JavaScript 不是"只能跑在浏览器里"的语言。它有三个运行环境：

环境	怎么用	适合场景
浏览器控制台	`F12` → Console	快速试验、调试
HTML `<script>` 标签	内嵌或外链 `.js` 文件	网页交互
Node.js	终端 `node xxx.js`	后端、脚本、学习

本周重点用浏览器控制台 + Node.js 学习语法，不需要写 HTML。

二、安装 Node.js

Node.js 是 JS 的"脱离浏览器运行环境"，让我们在终端里跑 JS 代码。

访问 https://nodejs.org，下载 LTS 版
安装后打开终端验证：

node --version   # v18.x.x 或更高
npm --version    # 9.x.x 或更高

三、第一个 JS 程序

浏览器控制台版

打开浏览器，F12 → Console，输入：

console.log("Hello 工业可视化！");
console.log("今天开始学 JavaScript");

// 模拟工业场景
var deviceName = "CNC-001";
var temperature = 65;
console.log("设备", deviceName, "当前温度：", temperature, "°C");

Node.js 文件版

创建 hello.js：

// hello.js —— 第一个 Node.js 程序
console.log("=== 智慧工厂监控系统启动 ===");
console.log("系统时间：", new Date().toLocaleString());

var devices = [
  { name: "CNC-001", temp: 65, status: "运行中" },
  { name: "AGV-002", temp: 42, status: "待机" },
  { name: "ARM-003", temp: 38, status: "运行中" }
];

console.table(devices);  // 表格输出

终端运行：

node hello.js

四、console.log 调试全家桶

console.log 不只是 print，它有丰富的调试方法：

// 基础输出
console.log("普通文本");

// 多个值
console.log("设备：", "CNC-001", "温度：", 65);

// 对象输出（可展开）
console.log({ name: "CNC-001", temp: 65, status: "运行中" });

// ⭐ 表格输出——工业场景必备
console.table([
  { name: "CNC-001", temp: 65, status: "运行中" },
  { name: "AGV-002", temp: 42, status: "待机" },
  { name: "ARM-003", temp: 38, status: "运行中" }
]);

// 计时
console.time("计算耗时");
// ... 一些计算 ...
console.timeEnd("计算耗时");  // 输出：计算耗时: 0.123ms

// 警告和错误（红色高亮）
console.warn("⚠ 温度接近阈值");
console.error("❌ 设备离线");

五、变量声明 var

// 声明 + 赋值
var deviceName = "CNC-001";
var temperature = 65;
var isRunning = true;

// 一次声明多个
var name = "CNC-001", temp = 65, status = "运行中";

// 命名规则
// ✅ 合法：字母、数字、下划线、$，不能以数字开头
var device1;       // 数字在后
var _private;      // 下划线开头
var deviceName;    // 驼峰命名（推荐）

// ❌ 非法
// var 1device;    // 不能以数字开头
// var my-name;    // 不能有连字符
// var var;        // 不能是关键字

var 是 ES5 的声明方式，第 11 周会学更安全的 let/const。先理解变量概念，再升级声明方式。

六、六大数据类型

JS 有 7 种类型（ES6 新增 Symbol），本周学 6 种：

Number（数字）

var count = 100;          // 整数
var rate = 0.875;         // 浮点数
var temperature = -10;    // 负数
var big = 1.2e6;          // 科学计数法 = 1200000

// 特殊值
var inf = Infinity;       // 无穷大
var nan = NaN;            // Not a Number（非数值）

String（字符串）

var single = '单引号';
var double = "双引号";
var name = "CNC-001";

// 转义字符
var path = "C:\\Users\\fK";   // 反斜杠
var multi = "第一行\n第二行";   // 换行

// 字符串拼接
var message = "设备 " + name + " 正在运行";

Boolean（布尔）

var isRunning = true;
var isOffline = false;

undefined 与 null

var x;                    // 声明未赋值 → undefined
var device = null;        // 主动设为空 → null

// 区别：
// undefined = 系统给的（还没定义）
// null = 开发者给的（主动置空）

Object（对象）

// 对象（键值对）
var device = {
  name: "CNC-001",
  temp: 65,
  status: "运行中"
};

// 数组（也是对象）
var list = [1, 2, 3, 4, 5];

七、typeof 运算符

console.log(typeof 65);          // "number"
console.log(typeof "hello");     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" ← JS 历史 bug！
console.log(typeof { a: 1 });    // "object"
console.log(typeof [1, 2, 3]);   // "object" ← 数组也是 object
console.log(typeof console.log); // "function"

typeof null === "object" 是 JS 最著名的 bug，记住就行。

八、算术与赋值运算符

// 算术运算符
var a = 10, b = 3;
console.log(a + b);   // 13  加法
console.log(a - b);   // 7   减法
console.log(a * b);   // 30  乘法
console.log(a / b);   // 3.333... 除法
console.log(a % b);   // 1   取余（常用：判断奇偶）
console.log(a ** b);  // 1000 指数（ES6）

// 自增自减
var count = 0;
count++;  // 1（后置：先返回再自增）
++count;  // 2（前置：先自增再返回）

// 赋值运算符
var x = 10;
x += 5;   // 15（等价于 x = x + 5）
x -= 3;   // 12
x *= 2;   // 24
x /= 4;   // 6

九、动手练：数据类型 15 题

在控制台或 Node.js 中完成以下练习：

// 1. 声明 name 变量赋值为你的名字
// 2. 声明 age 变量赋值为你的年龄
// 3. 用 typeof 检测 name 和 age 的类型
// 4. 声明 isStudent 并赋值为 true/false
// 5. 计算 100 / 3，观察结果
// 6. 用 % 判断 7 是奇数还是偶数
// 7. 声明变量不赋值，用 typeof 检测
// 8. 声明变量赋值为 null，用 typeof 检测
// 9. 计算 2 的 10 次方
// 10. "设备" + "CNC-001" 的结果？
// 11. count = 5，count++ 后 count 是多少？
// 12. a = 10，a += 5 后 a 是多少？
// 13. 用 console.table 输出设备列表
// 14. Number("123") 和 Number("abc") 的结果？
// 15. "5" + 3 和 "5" - 3 的结果？为什么？

十、总结

今天学了什么	关键点
运行环境	浏览器控制台、Node.js、HTML `<script>`
调试	console.log / table / warn / error / time
变量	var 声明，驼峰命名
六种类型	Number / String / Boolean / undefined / null / Object
typeof	检测类型，注意 null 的 bug
运算符	+ - * / % ** 和 += -= *= /=

🚀 变量和类型是 JS 的"地基"。地基打牢了，明天学条件判断和循环就水到渠成。

【JavaScript】day18-js-env-types