JavaScript 环境配置

在开始编写 JavaScript 代码之前，我们需要配置开发环境。本章将介绍如何搭建 JavaScript 开发环境。

浏览器环境

使用浏览器开发者工具

现代浏览器都内置了 JavaScript 运行环境，你可以通过开发者工具直接运行 JavaScript 代码。

Chrome 浏览器：

按 F12 或 Ctrl+Shift+I 打开开发者工具
点击 "Console"（控制台）标签
在控制台中输入 JavaScript 代码并按 Enter 执行

Firefox 浏览器：

按 F12 或 Ctrl+Shift+I 打开开发者工具
点击 "控制台" 标签
输入并执行代码

浏览器中的代码执行方式

1. HTML 内联脚本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 演示</title>
</head>
<body>
    <h1>欢迎学习 JavaScript</h1>
    
    <script>
        console.log("Hello, World!");
        alert("这是一个弹出框");
        document.write("<p>这是通过 JavaScript 写入的内容</p>");
    </script>
</body>
</html>

2. 外部 JavaScript 文件

创建 script.js 文件：

// script.js
console.log("外部文件中的代码");
document.getElementById("demo").innerHTML = "Hello JavaScript!";

在 HTML 中引用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部脚本</title>
</head>
<body>
    <p id="demo"></p>
    
    <script src="script.js"></script>
</body>
</html>

Node.js 环境

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，允许你在服务器端运行 JavaScript。

安装 Node.js

Windows 系统：

访问 Node.js 官网
下载 LTS（长期支持）版本的安装包
运行安装程序，按提示完成安装

macOS 系统：

# 使用 Homebrew 安装
brew install node

# 验证安装
node --version
npm --version

Linux 系统：

# 使用 apt 安装
sudo apt update
sudo apt install nodejs npm

# 验证安装
node --version
npm --version

使用 npm

npm（Node Package Manager）是 Node.js 的包管理器，用于安装和管理 JavaScript 包。

# 初始化项目（创建 package.json）
npm init -y

# 安装依赖包
npm install <package-name>

# 安装开发依赖
npm install --save-dev <package-name>

# 全局安装
npm install -g <package-name>

# 查看已安装的包
npm list

# 卸载包
npm uninstall <package-name>

使用 npx

npx 用于执行 npm 包中的命令，无需全局安装：

# 创建 React 应用
npx create-react-app my-app

# 运行开发服务器
npx http-server

代码编辑器

VS Code（推荐）

Visual Studio Code 是微软开发的免费代码编辑器，强烈推荐用于 JavaScript 开发。

安装插件：

JavaScript (ES6) code snippets - ES6 代码片段
Prettier - Code formatter - 代码格式化
ESLint - 代码检查
Live Server - 本地开发服务器
Auto Rename Tag - 自动重命名标签
Bracket Pair Colorizer - 括号高亮

WebStorm

WebStorm 是 JetBrains 开发的专业 JavaScript IDE，功能强大但需要付费。

其他编辑器

Sublime Text - 轻量级编辑器
Atom - GitHub 开发的编辑器
Vim/Neovim - 命令行编辑器

开发服务器

Live Server（VS Code 插件）

在 VS Code 中安装 Live Server 插件，可以实现热重载：

在 VS Code 中按 Ctrl+Shift+X 打开扩展
搜索 "Live Server" 并安装
右键 HTML 文件，选择 "Open with Live Server"

http-server

使用 Node.js 的 http-server 包：

# 全局安装
npm install -g http-server

# 在项目目录启动服务器
http-server -p 8080

Vite（现代开发服务器）

Vite 是一个新型前端构建工具，开发体验极佳：

# 创建项目
npm create vite@latest my-project -- --template vanilla

# 进入项目
cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev

浏览器开发者工具

Console（控制台）

控制台用于输出调试信息和执行代码：

// 基本输出
console.log("信息日志");
console.info("提示信息");
console.warn("警告信息");
console.error("错误信息");

// 格式化输出
console.log("姓名：%s，年龄：%d", "张三", 20);
console.log("数字：%d，浮点数：%.2f", 10, 3.14159);

// 分组输出
console.group("用户信息");
console.log("姓名：张三");
console.log("年龄：20");
console.groupEnd();

// 计时
console.time("循环");
for (let i = 0; i < 1000; i++) {}
console.timeEnd("循环");

// 断言
console.assert(1 > 2, "这个条件为 false 时显示");

Elements（元素）

Elements 面板显示页面的 DOM 结构，可以实时编辑和调试样式。

Sources（源代码）

Sources 面板用于断点调试 JavaScript 代码。

设置断点：

在源代码行号上点击设置断点
使用 debugger 关键字设置断点

function calculateSum(n) {
    debugger; // 执行到这里会自动暂停
    let sum = 0;
    for (let i = 1; i <= n; i++) {
        sum += i;
    }
    return sum;
}

Network（网络）

Network 面板用于查看网络请求和资源加载情况。

Application（应用）

Application 面板用于查看和调试 localStorage、sessionStorage、Cookies 等。

第一个 JavaScript 程序

让我们创建第一个完整的 JavaScript 程序：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个 JavaScript 程序</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>JavaScript 演示</h1>
    <p id="demo">点击按钮查看效果</p>
    <button onclick="showMessage()">点击我</button>

    <script>
        function showMessage() {
            const name = prompt("请输入你的名字：");
            if (name) {
                document.getElementById("demo").innerHTML = 
                    "欢迎，" + name + "！";
                alert("你好，" + name + "！欢迎学习 JavaScript！");
            }
        }
    </script>
</body>
</html>

小结

本章我们学习了：

浏览器中的 JavaScript 执行方式
Node.js 环境配置
包管理器 npm 的使用
代码编辑器的选择和配置
开发者工具的基本使用

练习

在浏览器控制台中输出 "Hello, JavaScript!"
创建包含内联脚本的 HTML 文件
安装 Node.js 并验证版本
安装 VS Code 并配置 JavaScript 相关插件
使用开发者工具设置断点调试代码

浏览器环境​

使用浏览器开发者工具​

浏览器中的代码执行方式​

1. HTML 内联脚本​

2. 外部 JavaScript 文件​

Node.js 环境​

安装 Node.js​

使用 npm​

使用 npx​

代码编辑器​

VS Code（推荐）​

WebStorm​

其他编辑器​

开发服务器​

Live Server（VS Code 插件）​

http-server​

Vite（现代开发服务器）​

浏览器开发者工具​

Console（控制台）​

Elements（元素）​

Sources（源代码）​

Network（网络）​

Application（应用）​

第一个 JavaScript 程序​

小结​

练习​