JavaScript 第一个程序

Begindev 编辑部 March 25, 2026

在之前的章节中，我们探索了 JavaScript 是什么以及它为何如此强大，并且你已经搭建好了开发环境。现在，是时候通过实践来使用这些设置了。

在几乎所有编程语言中，传统的第一个程序都是显示消息 "Hello, World!"。这个看似简单的任务极其重要，因为它确认了你的开发环境已配置正确，并且你能够成功地编写、保存和执行一个基础程序。

掌握这一基本步骤，为你理解代码如何从文本编辑器转化为网页或浏览器中的动作打开了大门。

1. console.log() 语句

我们 "Hello, World!" 程序的核心是 console.log() 语句。

这是一个 JavaScript 中的基础命令，允许开发者直接在浏览器的开发者控制台（或其他 JavaScript 环境，如 Node.js）中显示消息、变量或其他信息。它是调试和理解程序流程不可或缺的工具。

1.1 什么是 console.log() ？

console.log() 是一个属于 console 对象的方法（函数）。console 对象提供了对浏览器调试控制台的访问权限。log 方法专门用于向控制台输出一条消息。

你可以把它想象成你的 JavaScript 代码在该“告诉”你（开发者）内部正在发生什么。

1.2 console.log() 的语法

基本语法非常直观：

console.log(message);

console: 指的是控制台对象，它在浏览器和其他 JavaScript 环境中是全局可用的。
.: 这是点运算符，用于访问对象的属性或方法。
log: 这是 console 对象的一个方法（与对象关联的函数）。它接受一个或多个参数并将它们打印到控制台。
(): 这些括号是你传递想要记录的信息的地方。
message: 这是你想要显示的数据。它可以是一个字符串（文本）、数字、变量、对象或几乎任何其他 JavaScript 值。

注意：当记录文本时，需要用引号（单引号 '' 或双引号 "" 均可）将其括起来，以表示它是一个字符串字面量。

1.3 为什么是 "Hello, World!"？

几十年来，"Hello, World!" 一直是无数程序员的入门程序。它的目的简单而优雅：验证整个工具链——从文本编辑器到编译器/解释器再到输出设备——都在正常工作。如果你能让 "Hello, World!" 显示出来，你就知道你的基础设置是稳固的，可以自信地继续进行更复杂的任务。

2. 为 "Hello, World!" 设置文件

要运行你的第一个 JavaScript 程序，你需要两个文件：一个 HTML 文件和一个 JavaScript 文件。HTML 文件充当网页的容器，我们将在这里链接我们的 JavaScript 代码。

2.1 第 1 步：创建一个 HTML 文件

打开你的文本编辑器（比如你在上一课中设置的 VS Code）。创建一个新文件，并将其命名为 index.html 保存在一个新的文件夹中，例如 my-first-program。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个 JavaScript 程序</title>
</head>
<body>
    <h1>我的第一个 JavaScript 程序</h1>
    <p>打开浏览器控制台查看 "Hello, World!" 消息！</p>
    <script src="script.js"></script>
</body>
</html>

2.2 第 2 步：创建一个 JavaScript 文件

在与 index.html 文件相同的文件夹中，创建另一个新文件并将其保存为 script.js。这是你的 JavaScript 代码存放的地方。

// script.js
// 这是一个单行注释。这一行 // 之后的所有内容都会被 JavaScript 忽略。
// console.log() 函数用于向浏览器的开发者控制台输出消息。
// 在这里，我们要输出字符串 "Hello, World!"。
console.log("Hello, World!");

2.3 第 3 步：理解链接

注意你的 index.html 文件中的 <script src="script.js"></script> 这一行。

这一行至关重要，因为它告诉浏览器加载并执行包含在 script.js 文件中的 JavaScript 代码。在本课中，我们使用 src 属性指向一个外部 JavaScript 文件。<script> 标签本身还有更多内容，我们将在下一章深入探讨。现在，只需知道这一行将你的 HTML 和 JavaScript 连接在了一起。

3. 编写并运行你的第一个程序

现在你已经设置好了文件，让我们确认一切都按预期工作。

3.1 第 1 步：确保文件已保存

确保 index.html 和 script.js 都保存在同一个目录（文件夹）中。

3.2 第 2 步：在浏览器中打开 index.html

导航到保存文件的文件夹。双击 index.html。这将在你的默认 Web 浏览器（如 Chrome, Firefox, Edge, 或 Safari）中打开该 HTML 文件。

你会看到一个简单的网页，标题是“我的第一个 JavaScript 程序”和一些文本。但是，你不会在页面本身直接看到 "Hello, World!"。

3.3 第 3 步：打开浏览器控制台

要查看 console.log("Hello, world!"); 的输出，你需要打开浏览器的开发者控制台。

Google Chrome (谷歌浏览器):

在网页任意位置右键点击，选择“检查 (Inspect)”（或“检查元素”）。在出现的面板中，点击“Console (控制台)”标签。

Mozilla Firefox (火狐浏览器):

在网页任意位置右键点击，选择“检查元素 (Inspect Element)”。在出现的面板中，点击“Console (控制台)”标签。

Microsoft Edge:

在网页任意位置右键点击，选择“检查 (Inspect)”（或“检查元素”）。在出现的面板中，点击“Console (控制台)”标签。

Safari (macOS):

首先，启用开发菜单：前往 Safari > 偏好设置 > 高级，勾选“在菜单栏中显示‘开发’菜单”。然后，前往开发 > 显示 JavaScript 控制台。

一旦你打开控制台，你应该会看到那里打印出了消息 Hello, world!。如果你看到了，恭喜！你已经成功编写并执行了你的第一个 JavaScript 程序！

4. 实践示例与演示

让我们扩展 console.log() 的用法，输出不同类型的信息。

4.1 示例 1：记录多个字符串

你可以记录不止一个字符串。让我们在 script.js 中再加一行。

// script.js
console.log("Hello, World!"); // 我们的第一条消息
console.log("这是我的第二条 JavaScript 消息！"); // 一条新消息

保存 script.js，在浏览器中刷新 index.html，然后检查控制台。你应该能看到两条消息，每条消息占一行。

4.2 示例 2：记录数字

console.log() 不仅仅用于文本。它也可以显示数字。注意，数字不需要用引号括起来。

// script.js
console.log("Hello, World!");
console.log("这是我的第二条 JavaScript 消息！");
console.log(123); // 记录一个数字
console.log(3.14159); // 记录一个浮点数

保存 script.js，刷新 index.html，并观察控制台。你会看到数字被显示出来。

4.3 示例 3：记录简单的计算

你甚至可以直接记录基础算术运算的结果。

// script.js
console.log("Hello, World!");
console.log("这是我的第二条 JavaScript 消息！");
console.log(123);
console.log(3.14159);
console.log(5 + 3); // 记录加法的结果 (8)
console.log(10 * 2); // 记录乘法的结果 (20)

保存 script.js，刷新 index.html，并确认控制台显示了 8 和 20。这演示了 JavaScript 执行计算的能力，而 console.log() 是即时查看这些结果的好方法。