第一段JavaScript代码怎么写？Hello World示例与调试方法

作者：白露时间：2026-10-30 19:09:12浏览：357

面向新手的第一段JavaScript代码编写指南，详细介绍在浏览器控制台、HTML文件内联以及外部引入三种Hello World运行方式，并提供常用的断点与调试排错技巧。

编写第一段 JavaScript 代码并不需要预先安装庞大的编译工具或配置复杂的运行环境，现代浏览器本身就是一个功能完备的 JavaScript 运行平台。最快的路径是在浏览器自带的控制台中直接输入指令，或者创建一个简单的 HTML 文件通过 <script> 标签运行代码。本文将通过标准的“Hello World”示例演示三种编写与运行方式，并系统讲解如何利用开发者工具排查代码错误。

一、无需安装软件：在浏览器控制台中运行第一行代码

假设你此时正在阅读网页并想要立即验证 JavaScript 是否正常工作，只需打开当前浏览器的“开发者工具”。无论是 Chrome、Edge 还是 Firefox，都内置了可即时交互的 JavaScript 解释器。

打开控制台的具体快捷键如下：

Windows / Linux：按下键盘上的 F12 键，或按组合键 Ctrl + Shift + J（在 Firefox 中为 Ctrl + Shift + K）。
macOS：按下组合键 Command + Option + J（Chrome/Edge）或 Command + Option + K（Firefox）。

在打开的面板中切换到 Console（控制台） 标签页。光标停在提示符 > 旁边后，输入以下代码并按下回车键：

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

按下回车后，控制台下方会立即输出无引号的纯文本 Hello, World!。同时下方可能伴随一行灰色的 undefined，这是 console.log() 函数执行完毕后的返回值，属于正常现象。

图 1：在浏览器内置控制台中执行单行 JavaScript 语句的操作步骤

二、保存为文件：HTML 页面中运行 JavaScript 的两种方式

控制台适合随手测试，但如果要长期保存代码，就必须将代码写入文件中。JavaScript 是一门依附于 HTML 的前端脚本语言，通常通过 HTML 文档被浏览器解析加载。

方法 1：内联脚本（在 HTML 文件内部编写）

新建一个名为 index.html 的纯文本文件（可以使用 VS Code 或系统自带记事本），输入以下内容并保存：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个JS页面</title>
</head>
<body>
  <h1>欢迎学习 JavaScript</h1>

  <!-- 通过 script 标签直接嵌入 JavaScript 代码 -->
  <script>
    alert("Hello, World!");
    console.log("页面已成功加载并输出日志。");
  </script>
</body>
</html>

双击在浏览器中打开该文件，屏幕中央会弹出一个原生对话框，显示 Hello, World!。点击确定后，打开控制台可以看到第二行代码记录的输出日志。alert() 会阻塞页面加载，常用于快速教学演示；而在实际项目中，绝大部分信息都通过 console.log() 输出。

方法 2：外链脚本（推荐的工程化组织方式）

当项目逻辑变多后，把 JavaScript 代码与 HTML 标签混合存放会导致维护困难。行业标准做法是将代码单独放在 .js 文件中，通过 src 属性引入。

在 index.html 相同目录下创建 app.js 文件，写入纯 JavaScript 逻辑：

// app.js
console.log("Hello, World! 来自外部独立的 JS 脚本文件。");

随后修改 index.html，在 </body> 结束前引入该文件：

<!-- 引入外部文件 -->
<script src="app.js"></script>

图 2：HTML 承载 JavaScript 代码的两种形态与职责关系

三、运行初学者代码常见的三类错误与排查

很多新手输入第一行代码时，页面没有任何反应，也没有弹窗。这通常不是系统故障，而是触发了语法或加载层面的错误：

常见现象 / 报错信息	根本原因	解决方法
`Uncaught SyntaxError: Invalid or unexpected token`	在代码中误用了中文全角符号，例如中文双引号（`“”`）或全角括号。	将输入法切换为半角英文状态，重新输入标准 ASCII 字符符号。
`Uncaught ReferenceError: consol is not defined`	标识符拼写错误，JavaScript 严格区分大小写。例如 `consol` 漏了 `e`，或写成 `Console`。	检查拼写，对象名称应为全小写的 `console`，方法名称为 `log`。
页面空白且没有任何控制台日志	外链脚本路径写错（404 错误），或代码标签放在了未解析的节点中。	打开开发者工具的 Network（网络）面板查看 `app.js` 是否为红色的 404 状态。