Node.js/JS 环境配置

本站的教程中提供了大量可运行的代码示例,你可以直接在网页上编辑和运行代码,不需要在本地安装任何东西:

每篇教程都有很多这样的可运行示例,建议你边看边动手改代码试试,动手实践能加深理解。

同时,代码框上方有一个下载按钮,可以把代码文件下载到本地。所以你完全可以在线编辑运行,想在本地跑的时候再下载下来。

不过在搭建本地环境之前,我们先聊一个初学者经常困惑的问题:JavaScript 到底在哪里运行?

JavaScript 的两种运行环境

学 Python、Java、C++ 这些语言,运行环境很明确:装好运行时,在终端里执行就行。但 JavaScript 比较特殊,它有两个主要的运行环境

浏览器是 JavaScript 最早也是最原始的运行环境。每个浏览器内部都内置了一个 JavaScript 引擎(Chrome 用的是 V8 引擎,Firefox 用的是 SpiderMonkey),网页上的交互效果,比如点击按钮弹出对话框、动态加载内容、表单验证,这些都是浏览器里的 JavaScript 在工作。

Node.js 是后来出现的。有人把 Chrome 的 V8 引擎从浏览器中拿出来,加上文件读写、网络通信等操作系统接口,做成了一个独立的运行时。这样 JavaScript 就能脱离浏览器,像 Python 一样在命令行里运行脚本、写后端服务了。

简单类比一下:浏览器里的 JavaScript 相当于住在一个沙盒里,只能操作网页内容(DOM、CSS),不能读写你电脑上的文件。而 Node.js 里的 JavaScript 和 Python、Java 一样,可以访问文件系统、连接数据库、监听网络端口,但它没有浏览器的 windowdocument 这些对象,因为它不在浏览器里。

我们这个教程主要用 Node.js 环境来学习和刷题,因为算法题都是在命令行里跑的。但先来感受一下浏览器里运行 JavaScript 是什么样的。

在浏览器中运行 JavaScript

你现在就可以试试。打开 Chrome(或任何浏览器),按 F12 打开开发者工具,切换到 Console(控制台)标签页,直接输入:

console.log("Hello from browser!");

按回车,你会看到控制台输出了 Hello from browser!

熟悉 Python 的读者应该感到亲切,这个控制台和 Python 的交互式解释器(REPL)很像。

你还可以试试浏览器独有的能力,比如弹出一个对话框:

alert("这是浏览器弹出的对话框");

或者直接操作当前网页的内容。试试在控制台里粘贴下面这行代码:

document.querySelectorAll("p").forEach(p => p.style.color = "red");

执行后你会发现页面上所有的段落文字都变成红色了。刷新页面就会恢复原样,因为你只是临时修改了当前页面的显示,没有改动网页的源代码。

这就是浏览器环境中 JavaScript 的能力:操作网页上的元素。

这些浏览器专属的功能(alertdocumentwindow)在 Node.js 中是不存在的,因为 Node.js 没有网页可以操作。

反过来,Node.js 能做的文件读写、启动服务器这些事情,浏览器里的 JavaScript 也做不到。两者用的是同一种语言语法,但各自有各自的能力范围。

好了,了解了这个背景,下面我们来安装 Node.js,运行你的第一个 JavaScript 程序。

安装 Node.js

# 推荐用 Homebrew 安装
# 如果还没装 Homebrew,先运行下面这行:
# /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node

# 验证安装
node --version

Windows 用户可以从 Node.js 官网 下载安装包,点击页面上的下载按钮即可:

Node.js download

安装完成后,运行 node --version,看到版本号就说明安装成功了。

编写和运行代码

用任意文本编辑器创建一个文件 hello.js,写入以下内容:

console.log("Hello, World!");

打开终端,进入文件所在的目录,执行以下命令运行:

node hello.js

你会看到终端输出 Hello, World!,说明你的 Node.js 环境已经搭建好了。就这么简单,是不是和 Python 很像?

后续学习中,你可以把本站的代码示例下载到本地,用同样的方式运行。