怎么创建并运行第一个js文件

一、准备工作与创建第一个 .js 文件

JavaScript 文件本质上是遵循 ECMAScript 语法规则的纯文本文件。创建该文件无需任何复杂的编译套件，只需要一个能够编辑纯文本的代码编辑器。推荐使用轻量级代码编辑器（如 Visual Studio Code、Sublime Text，或操作系统自带的文本记事本），切勿使用 Microsoft Word 或富文本编辑软件，因为富文本软件会自动向文件中添加二进制排版样式标签，破坏脚本结构。

1. 新建项目目录与文件

为了保持代码整洁，建议在电脑的任意工作磁盘（例如桌面或开发目录）新建一个英文命名的文件夹，命名为 hello-js。在该文件夹中执行以下操作：

1. 在 hello-js 文件夹内点击鼠标右键，新建一个文本文档。
2. 将新建的文件重命名为 app.js。

2. 编写第一行测试代码

使用编辑器打开刚创建的 app.js 文件，在第一行写入以下语句并保存（快捷键 Ctrl + S 或 macOS 下的 Cmd + S）：

// app.js - 打印第一行欢迎信息
console.log("Hello, JavaScript!");

这行代码中，console.log() 是 JavaScript 运行时提供的标准控制台输出函数。它接收圆括号内的参数（这里是字符串 "Hello, JavaScript!"），并将其打印输出到当前环境的控制台或标准输出流中，是排查代码与观察运行结果最常用的手段。

二、方式一：在网页浏览器中运行 .js 文件

初学者容易产生一个误解：以为双击 app.js 就能像运行普通软件一样打开它。但在操作系统中直接双击 .js 文件，通常会被系统关联到文本编辑器重新打开，或者在 Windows 系统下触发系统底层的 Windows Script Host 报错。

浏览器的 JavaScript 引擎（例如 Chrome 的 V8）无法直接脱离网页单独加载本地裸文件。想要在浏览器中运行 .js 文件，必须有一个 HTML 网页作为宿主，通过 <script> 标签将脚本引入。

1. 创建宿主 HTML 文件

在 app.js 所在的同一目录下，新建一个名为 index.html 的文件，并使用代码编辑器输入以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>运行第一个 JS 文件</title>
</head>
<body>
    <h1>我的第一个 JavaScript 页面</h1>
    <p>请按 F12 打开浏览器控制台查看脚本输出。</p>

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

这里的核心代码是 <script src="app.js"></script>。src 属性指定了脚本文件的相对路径。因为 index.html 和 app.js 存放在同一文件夹内，因此直接填写文件名即可。

2. 打开页面并查看控制台输出

完成文件编写后，请按照以下步骤执行并验证结果：

1. 在文件管理器中找到 index.html，直接双击（或右键选择“打开方式”，指定使用 Chrome、Edge 或 Firefox 浏览器打开）。
2. 浏览器会显示页面的标题和正文文字。此时 app.js 已经由浏览器内核自动加载并执行完毕，但因为代码使用的是 console.log()，内容不会直接印在网页白纸上，而是输出到了开发者工具的控制台中。
3. 按下键盘上的 F12 键（Mac 电脑请按 Option + Command + I），打开浏览器的开发者工具面板。
4. 在面板顶部标签页中点击 Console（控制台）。

如果你在 Console 窗口中看到了绿蓝色或者白色的 Hello, JavaScript! 字样，并且右侧标明了来源文件 app.js:2，说明你的第一个 JS 文件已经成功在浏览器中加载并完成了运行。

三、方式二：使用 Node.js 在终端命令行中直接运行

如果你编写 JavaScript 的目的是为了开发后端接口、构建自动化工具或练习算法，每次都创建一个 index.html 并在浏览器中按 F12 会非常繁琐。Node.js 是一个基于 Chrome V8 引擎构建的独立 JavaScript 运行时，它允许你像运行 Python 或 C 程序一样，直接在终端中运行 .js 文件。

1. 检查或安装 Node.js 环境

使用该方法的前提是电脑上已经安装了 Node.js。请打开系统的命令行工具：

• Windows 系统：按下快捷键 Win + R，输入 cmd 或 powershell 并回车。
• macOS 系统：按下 Cmd + 空格 唤出聚焦搜索，输入 终端 或 Terminal 并回车。

在弹出的终端窗口中输入以下命令并按回车：

node -v

如果终端返回类似 v18.x.x 或 v20.x.x 的版本号，说明环境已就绪。如果提示“'node' 不是内部或外部命令”或“command not found: node”，则需要先前往 Node.js 官方网站（nodejs.org）下载 LTS（长期支持）版本安装包，安装完成后重新打开终端即可。

2. 切换到文件所在目录并执行

在终端中运行脚本，必须先让命令行知道你的 app.js 放在哪里。假设你的文件夹位于桌面的 hello-js，请在终端中执行目录切换命令（cd 命令即 Change Directory）：

# 切换至存放 app.js 的目标文件夹（根据你的实际电脑路径调整）
cd Desktop/hello-js

切换到文件所在目录后，执行 node 文件名 命令：

node app.js

回车后，终端会在下一行立即打印出 Hello, JavaScript! 并结束当前进程。这种直接在终端执行脚本的方式不依赖任何网页结构，响应迅速且便于调试。

四、新手初次运行常见报错与自查排查

在创建并运行第一个 .js 文件的过程中，最容易由于细节配置或路径疏忽导致无法看到预期结果。以下是四种最高频的异常场景与应对方案：

1. 控制台报错 Failed to load resource: net::ERR_FILE_NOT_FOUND

原因分析：在浏览器中打开 index.html 时，控制台报出红色 404 错误。这说明 HTML 中的 <script src="app.js"> 找不到对应的脚本文件。
解决方法：

• 确认 app.js 与 index.html 是否处于完全相同的文件夹中。如果 app.js 放在了子目录 js/ 下，引入标签应改为 <script src="js/app.js"></script>。
• 核对大小写。在某些严格区分大小写的操作系统或服务器环境中，App.js 与 app.js 会被视为不同文件。

2. Windows 提示错误代码 800A03EA: 语法错误

原因分析：在资源管理器中直接双击了 .js 文件。Windows 默认使用古老的 wscript.exe（Windows Script Host）来运行脚本，该解释器不支持 ES6+ 现代 JavaScript 语法。
解决方法：不要双击 .js 文件。请严格按照本文所述，使用 index.html 在浏览器中打开，或者在终端中使用 node app.js 运行。

3. 终端提示 Error: Cannot find module '.../app.js'

原因分析：使用 Node.js 执行脚本时，当前命令行终端所在的工作目录（Current Working Directory）并不是 app.js 存放的真实位置。
解决方法：在终端中输入 pwd（Mac/Linux）或 cd（Windows 不加参数）查看当前所处目录。必须先使用 cd 你的文件夹路径 切换至文件所在路径后，再重新运行 node app.js。

五、总结

创建并运行第一个 JavaScript 文件的核心脉络非常清晰：首先确保文件扩展名是标准的纯文本 .js，并在其中写入 console.log() 测试语句；接着根据你的学习目标选择执行载体——网页交互学习优先选择在 index.html 中引入并在浏览器 Console 中观察，后端与纯逻辑开发则使用终端命令 node app.js 快速执行。掌握了这两条基础路径，便为后续学习变量、函数、DOM 操作以及全栈模块化开发打下了坚实的基础。