开发环境搭建

1. 浏览器控制台

• 打开 Chrome 浏览器
• 按 F12 或右键 → 检查
• 点击 Console 标签
• 直接输入代码测试

2. 代码编辑器（选一个即可）

编辑器	特点	适合人群
VS Code	功能强大，免费，插件丰富	推荐所有人
Sublime Text	轻量快速	喜欢简洁的开发者
WebStorm	专业强大，收费	专业前端开发者

VS Code 推荐插件：

• Chinese (Simplified) Language Pack：中文界面
• Live Server：实时预览网页
• Prettier：代码自动格式化
• JavaScript (ES6) code snippets：代码片段

3. Node.js 安装

3.1 官网下载
访问官网下载 LTS 版本

3.2 使用 nvm（Node 版本管理器）
Windows: https://github.com/coreybutler/nvm-windows
Mac/Linux: https://github.com/nvm-sh/nvm

3.3 Windows/Mac 安装后验证

node --version
npm --version

第一个 HTML+JS 文件

<!DOCTYPE html>
<html>
    <head>
        <title>我的第一个JS程序</title>
    </head>
    <body>
        <h1 id="greeting">Hello World!</h1>
        <button onclick="changeText()">点击我</button>

        <script>
            // 这里是JavaScript代码
            function changeText() {
                document.getElementById("greeting").innerHTML = "你好，JavaScript！";
            }
        </script>
    </body>
</html>

现代 JavaScript 开发环境

1. 项目初始化

# 创建项目目录
mkdir my-project
cd my-project

# 初始化 package.json
npm init -y

2. 构建工具配置（Webpack 示例）

# 安装 webpack
npm install --save-dev webpack webpack-cli webpack-dev-server

# 安装 Babel（支持 ES6+）
npm install --save-dev @babel/core @babel/preset-env babel-loader

# 安装基础依赖
npm install --save-dev html-webpack-plugin clean-webpack-plugin

3. 配置文件示例

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    },
    devServer: {
        static: "./dist",
        hot: true,
        open: true,
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
        }),
    ],
};