零基础学JavaScript：手把手带你搭建环境，写出第一个程序！

作者：良山有风来日期：2025/10/11

开头：你是不是也遇到过这些问题？

刚学JavaScript的时候，你是不是一脸懵？ 打开教程，满屏的“Node.js”、“npm”、“VS Code”，完全不知道从哪下手？ 照着网上的教程配置环境，结果各种报错，心态爆炸？ 写了半天代码，连个“Hello World”都显示不出来？

别担心！这篇文章就是为你准备的。 我会用最直白的方式，带你一步步搭建JavaScript开发环境，并写出你的第一个程序。 看完这篇文章，你不仅能顺利运行第一个JavaScript程序，还能理解背后的原理，为后续学习打下坚实基础。

为什么要搭建开发环境？

很多新手会问：我直接在浏览器里写JavaScript不行吗？ 当然可以，但那就像在沙滩上盖房子——玩玩可以，但盖不了高楼大厦。

专业的开发环境能让你： 写代码更高效（有智能提示、自动补全） 调试更方便（可以一步步跟踪代码执行） 项目管理更轻松（可以安装各种有用的工具包）

这就好比你要做木工，直接在路边捡块木头雕刻，和使用专业工作室里的全套工具，效率和效果天差地别。

环境搭建：三件套搞定一切

现在我们来安装三个必备工具：Node.js、VS Code和浏览器开发者工具。

安装Node.js

Node.js是什么？简单说，它让JavaScript不再局限于浏览器，可以在你的电脑上直接运行。

安装步骤：

  1. 打开Node.js官网（nodejs.org）
  2. 下载LTS版本（长期支持版，更稳定）
  3. 双击安装包，一路点击“下一步”就行
  4. 打开命令行工具（Windows用CMD或PowerShell，Mac用终端）
  5. 输入 node -v 并按回车

如果你看到显示了版本号（比如v18.17.0），恭喜你，安装成功了！

这里有个小技巧：安装Node.js时，npm（Node Package Manager）会自动一起安装。npm是JavaScript的包管理器，以后你会经常用到。

安装VS Code

VS Code是微软出品的代码编辑器，免费、轻量、功能强大，是前端开发的首选。

安装同样简单：

  1. 访问VS Code官网（code.visualstudio.com）
  2. 下载对应你操作系统的版本
  3. 安装时记得勾选“添加到PATH”，这样可以在命令行直接打开

安装完成后，我建议安装几个实用的插件：

  • Chinese (Simplified) Language Pack：中文语言包
  • Live Server：实时预览网页效果
  • Prettier：代码自动格式化

浏览器开发者工具

现代浏览器（Chrome、Firefox、Edge等）都自带开发者工具。 按F12就能打开，这里是你调试JavaScript的利器。

创建第一个JavaScript项目

环境准备好了，现在我们来创建第一个项目。

创建项目文件夹

在你喜欢的位置（比如桌面）新建一个文件夹，命名为my-first-js-project。 用VS Code打开这个文件夹：在文件夹里右键，选择“通过Code打开”。

创建基础文件

在项目文件夹里创建两个文件：

第一个是index.html：

1<!DOCTYPE html>
2<html>
3<head>
4    <title>我的第一个JS程序</title>
5</head>
6<body>
7    <h1>欢迎学习JavaScript！</h1>
8    <!-- 引入外部的JavaScript文件 -->
9    <script src="script.js"></script>
10</body>
11</html>
12

第二个是script.js（这就是我们要写JavaScript代码的地方）：

1// 这是单行注释，不会执行
2// 我们在浏览器控制台输出一句话
3
4console.log("Hello, JavaScript World!");
5
6// 这行代码的意思是：在控制台输出括号里的内容
7// 你可以在浏览器按F12，切换到Console标签页看到结果
8

让我解释一下这些代码：console.log() 是JavaScript的内置函数，用来在控制台输出信息。 分号;表示一句代码的结束，虽然现代JavaScript可以省略，但初学者建议都加上。 双斜杠//后面是注释，是写给人看的，电脑会忽略。

运行你的第一个程序

现在我们来让代码跑起来！

在VS Code里，右键点击index.html，选择“Open with Live Server”。 如果你的Live Server安装正确，浏览器会自动打开并显示“欢迎学习JavaScript！”。

接下来按F12打开开发者工具，切换到Console（控制台）标签页。 你应该能看到一行显示：Hello, JavaScript World!

恭喜！这就是你的第一个JavaScript程序！

深入理解：JavaScript的三种写法

刚才我们写的是外部JavaScript，其实JavaScript有三种写法：

内联写法（直接在HTML里）

1<button onclick="alert('按钮被点击了！')">点击我</button>
2

这种写法简单，但代码多了会很乱，不推荐大量使用。

内部写法（在script标签里）

1<script>
2// 在这里写JavaScript代码
3document.write("页面加载时显示这句话");
4</script>
5

这种比内联好一些，但还是把HTML和JavaScript混在一起。

外部写法（我们刚才用的）

1<script src="script.js"></script>
2

这是最推荐的方式，因为：

  • HTML和JavaScript分离，结构清晰
  • 同一个JavaScript文件可以被多个HTML使用
  • 浏览器会缓存JavaScript文件，加载更快

更多基础代码示例

光输出一句话不过瘾？我们来写点更有趣的。

变量和数据类型

1// 定义变量
2let name = "小明";  // 字符串类型
3let age = 18;       // 数字类型
4let isStudent = true; // 布尔类型（true或false）
5
6// 输出变量值
7console.log("姓名：" + name);
8console.log("年龄：" + age);
9console.log("是否是学生：" + isStudent);
10
11// 变量可以重新赋值
12age = 19;
13console.log("明年我就" + age + "岁了");
14

简单的计算

1// 基本的数学运算
2let a = 10;
3let b = 5;
4
5console.log("a + b = " + (a + b));  // 加法：15
6console.log("a - b = " + (a - b));  // 减法：5
7console.log("a * b = " + (a * b));  // 乘法：50
8console.log("a / b = " + (a / b));  // 除法：2
9
10// 字符串拼接
11let firstName = "张";
12let lastName = "三";
13let fullName = firstName + lastName;
14console.log("全名：" + fullName); // 输出：全名：张三
15

与网页交互

1// 获取页面元素并修改内容
2// 先在HTML里添加：<p id="demo">原始文本</p>
3
4let paragraph = document.getElementById("demo");
5paragraph.innerHTML = "JavaScript修改了这段文字！";
6
7// 弹出对话框
8alert("这是一个警告框！");
9
10// 确认对话框
11let isOK = confirm("你确定要继续吗？");
12console.log("用户选择了：" + isOK);
13

常见问题解决

新手常会遇到这些问题，我来帮你提前避坑：

代码没效果？

  • 检查浏览器控制台有没有红色报错信息
  • 确认JavaScript文件路径是否正确
  • 看看是不是忘了用console.log()，结果在控制台里找输出

中文显示乱码？

在HTML文件的<head>里添加：

1<meta charset="UTF-8">
2

代码修改后没变化？

  • 刷新浏览器页面
  • 检查Live Server是否正常运行
  • 清除浏览器缓存（Ctrl+F5）

下一步学习建议

成功运行第一个程序只是开始，接下来我建议你学习：

  1. JavaScript基础语法：变量、数据类型、运算符
  2. 流程控制：if条件判断、for/while循环
  3. 函数：如何封装可重用的代码块
  4. DOM操作：用JavaScript动态修改网页内容

学习的关键是多动手实践，不要只看不写。 每学一个知识点，就自己试着写代码验证。

结尾：你的编程之旅刚刚开始

看到这里，你已经成功搭建了开发环境，写出了第一个JavaScript程序，甚至还学会了一些基础语法。 这绝对值得给自己点个赞！

学习编程就像学骑自行车，开始可能会摔几次，但一旦掌握了，就会发现前所未有的自由和创造力。

现在你已经迈出了最重要的第一步。 接下来的路，我会继续陪你一起走。

**在评论区分享你的第一个JavaScript程序吧！**遇到了什么问题？有什么成功的喜悦？ 或者你还想了解JavaScript的哪个方面？ 我都会认真看每一条留言，帮你解答疑惑。

记住，每个大神都是从Hello World开始的。 你的编程之旅，现在正式启程！

《零基础学JavaScript：手把手带你搭建环境，写出第一个程序！》 是转载文章，点击查看原文。

上一篇：基于单片机的Boost升压斩波电源电路

下一篇：C/C++黑客帝国代码雨

相关推荐

【机器学习】无监督学习 —— K-Means 聚类、DBSCAN 聚类
一杯水果茶！2025/10/9

K-Means 聚类标准 K-Means 算法K-Means 评估：肘部法则（Elbow Method）与轮廓系数（Silhouette Score）1. 肘部法则（Elbow Method）2. 轮廓系数（Silhouette Score） DBSCAN 聚类（Density-Based Spatial Clustering of Applications with Noise）DBSCAN 的关键参数DBSCAN 算法 K-Means 聚类 K‑Means 聚类 是一种

一文读懂 Vue 组件间通信机制（含 Vue2 / Vue3 区别）
excel2025/10/8

一、组件间通信的概念 在 Vue 中，组件（Component） 是最核心的概念之一。每个 .vue 文件都可以视为一个独立的组件。 而 通信（Communication） 是指一个组件如何将信息传递给另一个组件。 通俗地说： 组件间通信，就是不同组件之间如何共享数据、触发行为、进行信息交互的过程。 例如：当我们使用 UI 框架中的 table 组件时，需要向它传入 data 数据，这个“传值”的过程本质上就是一种组件通信。 二、组件间通信解决了什么问题？ 在实际开发中，每个组件都有自己的

【Node】Node.js 多进程与多线程：Cluster 与 Worker Threads 入门
你的人类朋友2025/10/6

前言 在 Node.js 开发中，处理 CPU 密集型任务和提升应用性能是常见需求。 今天我们来深入理解 Node.js 提供的两种并发处理方案：Cluster 模块和 Worker Threads 模块。 ☺️ 这边要求阅读本文的新手小伙伴要有一个印象：【Cluster】 与【进程】相关，【Worker Threads】 与【线程】相关 小贴士 📚： ✨Cluster 的中文意思是集群 ✨Worker Threads 的中文意思是工作线程 官方定义解析 Node.js 官方文档指出：

【Linux系统】快速入门一些常用的基础指令
落羽的落羽2025/10/5

各位大佬好，我是落羽！一个坚持不断学习进步的学生。 如果您觉得我的文章还不错，欢迎多多互三分享交流，一起学习进步！ 也欢迎关注我的blog主页: 落羽的落羽 文章目录 pwd、whoami、clearmkdir、touch、treecdlsrmdir、rmmanechocat、tac、more、less、head、tailcp、mvfind、which、whereisaliasgrepzip、unzip、taruname 开始学习使用Linux，我们首先要掌握一些Linux

快速搭建redis环境并使用redis客户端进行连接测试
你的人类朋友2025/10/4

前言 最近工作要用到 redis，所以这边简要记录一下自己搭建 redis 环境的过程，后面忘记了回头看比较方便。 正文 一、环境安装 这边推荐个跨 windows 和 mac 的 redis 客户端，another Redis Desktop Manager windows 一般安装Another-Redis-Desktop-Manager-win-1.7.1-x64.exe mac 一般安装Another-Redis-Desktop-Manager-mac-1.7.1-arm64.dmg 具

Java 设计模式在 Spring 框架中的实践：工厂模式与单例模式
武昌库里写JAVA2025/10/2

# Java 设计模式在 Spring 框架中的实践：工厂模式与单例模式 概述 在软件开发中，设计模式是为了解决特定问题的最佳实践经验的总结。而工厂模式和单例模式是其中两个最为常用和重要的设计模式，在 Java 开发中得到了广泛应用。在 Spring 框架中，工厂模式和单例模式也有着非常重要的应用。本文将从实际的案例出发，介绍工厂模式和单例模式在 Spring 框架中的实践。 工厂模式在 Spring 框架中的实践 工厂模式简介 工厂模式是一种创

如何用 CSS 中写出超级美丽的阴影效果
非优秀程序员2025/10/2

「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」。 在我看来，最好的网站和Web应用程序对它们具有切实的"真实"质量。实现这种质量涉及很多因素，但阴影是一个关键因素。 然而，当我环顾网络时，很明显，大多数阴影并不像它们所希望的那样丰富。网络上覆盖着模糊的灰色盒子，看起来并不像影子。 在本教程中，我们将学习如何将典型的箱形阴影转换为美丽、逼真的阴影： 为什么还要使用阴影？ 我保证，我们很快就会谈到有趣的CSS技巧。但首先，我想退后一步，谈谈为什么阴影存在于CSS中，以

Xrdp 远程桌面配置【笔记】
AnsonNie2025/10/2

Xrdp 远程桌面配置 Xrdp 是一个开源的 远程桌面协议（RDP）服务器。 核心功能：它允许您使用来自其他计算机的图形化桌面连接到运行它的 Linux 服务器。工作原理：它在 Linux 系统上创建一个 RDP 服务端。您可以从任何兼容 RDP 的客户端（如 Windows 自带的“远程桌面连接”、macOS 的 Microsoft Remote Desktop、Linux 的 Remmina 等）进行连接。底层技术：通常，Xrdp 本身并不直接提供桌面环境，而是与现有的 X Windo

starrocks查询伪代码
syty202010/1/2025

尽可能下推到存储层，在扫描时利用索引 (前缀索引、Bloom Filter、位图索引、ZoneMap) 提前过滤掉大量无关数据块，减少 I/O 和 CPU 处理量。​，实现了极致的查询性能。它将数据处理任务分解成高效的、针对现代硬件优化的批处理操作流，最大限度地榨干了 CPU 和 I/O 的性能。​ 在列数据上执行紧凑的循环，最大化 CPU 缓存利用率。​ 只读查询需要的列，利用列存格式的压缩和编码优势。​ (数据流驱动，最小化等待) 两大核心技术，结合​。​ (所有算子处理 Batch) 和 ​。

Midscene.js为什么能通过大语言模型成功定位页面元素
测试者家园9/30/2025

Midscene.js 能通过大语言模型成功定位页面元素并生成 XPath 这类路径，核心在于其多模态模型对网页视觉和语义信息的深度理解，从而实现了所见即所操作的能力。它改变了传统自动化测试严重依赖脆弱定位器的状况，用更高层的意图描述替代了底层的实现细节，在提升脚本稳定性和降低使用门槛方面是一次重要的创新。

上一篇：基于单片机的Boost升压斩波电源电路

下一篇：C/C++黑客帝国代码雨

首页编辑器站点地图

Copyright © 2025 聚合阅读

License: CC BY-SA 4.0