JavaScript基础篇：二、环境搭建与第一个程序

一、JavaScript运行环境概述

在开始JavaScript的编程之旅前，了解其运行环境至关重要。JavaScript是一种主要运行在浏览器和服务器端的脚本语言，不同的环境为JavaScript提供了不同的功能和API。

（一）浏览器环境

浏览器是JavaScript最常用的运行环境。现代浏览器如Chrome、Firefox、Safari等都内置了JavaScript引擎，负责解析和执行JavaScript代码。在浏览器中，JavaScript可以操作HTML和CSS，实现网页的动态效果和交互功能。例如，通过DOM（文档对象模型）操作可以改变网页的内容、结构和样式，通过BOM（浏览器对象模型）可以获取浏览器的相关信息和操作浏览器窗口。

（二）服务器环境

借助Node.js平台，JavaScript可以在服务器端运行。Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，它允许开发者使用JavaScript编写服务器端代码，处理HTTP请求、操作文件系统、连接数据库等。服务器端的JavaScript代码通常不直接与用户交互，而是通过网络与客户端进行通信，为客户端提供数据和服务支持。

二、浏览器控制台的使用

浏览器控制台是运行和测试JavaScript代码最便捷的工具之一。它允许开发者直接在浏览器中输入和执行JavaScript代码，无需创建HTML文件，适合快速测试和调试简单的代码片段。

（一）打开浏览器控制台

不同浏览器打开控制台的方式略有不同，但通常有以下几种方法：

使用快捷键

在大多数浏览器中，可以同时按下`F12`键或`Ctrl+Shift+J`（Windows）/`Command+Option+J`（Mac）来打开开发者工具，然后切换到“控制台”标签页。

通过浏览器菜单：

在浏览器的菜单中找到“开发者工具”或“更多工具”，然后选择“开发者工具”，再切换到“控制台”标签页。

（二）在控制台中运行JavaScript代码

打开控制台后，就可以直接在输入框中输入JavaScript代码并按回车键执行。例如，输入`console.log("Hello, JavaScript!");`，控制台将输出`Hello, JavaScript!`。可以尝试一些简单的表达式，如`2 + 3`，控制台会立即显示结果`5`。此外，还可以在控制台中定义变量、函数，并调用它们，以便快速测试代码的逻辑和功能。

三、使用HTML文件运行JavaScript

在实际的web开发中，JavaScript代码通常嵌入在HTML文件中。通过创建HTML文件并在其中引入JavaScript代码，可以实现更复杂的网页功能和交互。

（一）创建HTML文件

使用文本编辑器（如Notepad、VS Code等）创建一个新的文件，将其保存为`.html`格式，例如`index.html`。在文件中编写基本的HTML结构，如下所示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JavaScript示例</title>

</head>

<body>

    <!-- HTML内容 -->

    <h1>欢迎学习JavaScript</h1>

    <button id="myButton">点击我</button>

    <p id="demo"></p>



    <!-- 引入JavaScript代码 -->

    <script>

        // JavaScript代码

        document.getElementById("myButton").onclick = function() {

            document.getElementById("demo").innerHTML = "Hello, JavaScript!";

        };

    </script>

</body>

</html>

（二）运行HTML文件

在浏览器中打开创建的HTML文件，可以通过以下几种方式：

直接拖放：将HTML文件拖放到浏览器窗口中。

使用文件菜单：在浏览器的“文件”菜单中选择“打开文件”，然后浏览到HTML文件并打开。

设置为本地服务器：使用一些工具（如Live Server插件在VS Code中）将当前文件夹设置为本地服务器，然后在浏览器中访问生成的本地地址。

打开文件后，浏览器会解析HTML和其中的JavaScript代码，展示相应的网页内容和交互效果。在上述示例中，点击按钮后，段落文本将被更新为“Hello, JavaScript!”，这展示了JavaScript如何与HTML元素交互，实现动态网页功能。

四、Node.js环境的安装与使用

Node.js是一个让JavaScript在服务器端运行的平台，安装Node.js后，就可以在命令行中运行JavaScript代码，开发服务器端应用程序。

（一）下载与安装Node.js

访问Node.js官方网站（https://nodejs.org/），根据操作系统选择合适的版本进行下载。下载完成后，运行安装程序，按照提示完成安装过程。安装过程中，建议勾选添加到系统路径的选项，以便在命令行中直接使用Node.js命令。

（二）验证安装

安装完成后，在命令行中输入以下命令，验证Node.js是否安装成功：

node -v

如果显示Node.js的版本号，说明安装成功。例如，输出`v18.12.1`表示当前安装的Node.js版本为18.12.1。

（三）使用Node.js运行JavaScript代码

创建一个JavaScript文件，例如`server.js`，在文件中编写以下代码：

// server.js

const http = require('http');



const server = http.createServer((req, res) => {

    res.writeHead(200, { 'Content-Type': 'text/plain' });

    res.end('Hello, Node.js!');

});



const port = 3000;

server.listen(port, () => {

    console.log(`服务器运行在 http://localhost:${port}/`);

});

在命令行中，导航到文件所在目录，输入以下命令运行代码：

node server.js

打开浏览器，访问`http://localhost:3000/`，如果看到页面显示“Hello, Node.js!”，说明服务器成功运行，Node.js环境配置正确。这展示了如何使用Node.js创建一个简单的HTTP服务器，处理客户端请求并返回响应。

五、代码编辑器的选择与使用

一个合适的代码编辑器能够大大提高JavaScript开发的效率和体验。以下是一些流行的代码编辑器及其特点介绍：

（一）Visual Studio Code（VS Code）

VS Code是由微软开发的免费、开源的代码编辑器，支持多种编程语言，包括JavaScript。它具有丰富的扩展市场，可以安装各种插件来增强功能，如调试工具、主题、代码格式化等。VS Code的界面简洁美观，支持代码自动补全、语法高亮、错误提示等功能，对JavaScript开发非常友好。

（二）Sublime Text

Sublime Text是一款轻量级、高性能的代码编辑器，具有快速的文件浏览和编辑功能。它的界面简洁，响应迅速，适合快速编写和修改代码。Sublime Text通过安装插件可以支持JavaScript开发的多种需求，如语法检查、代码格式化等。

（三）WebStorm

WebStorm是 JetBrains 公司开发的一款商业JavaScript开发工具，专为前端开发设计。它提供了强大的代码分析、调试、版本控制等功能，能够智能地提示代码错误和优化建议。WebStorm对框架和库（如React、Vue等）有很好的支持，适合大型项目的开发。

（四）使用编辑器的基本操作

无论选择哪种编辑器，都应熟悉其基本操作，如文件的新建、保存、打开，代码的复制、粘贴、撤销、重做等。此外，学会使用编辑器的快捷键可以大大提高工作效率，例如`Ctrl+S`（保存）、`Ctrl+C`（复制）、`Ctrl+V`（粘贴）、`Ctrl+Z`（撤销）等。在编写JavaScript代码时，利用编辑器的语法高亮功能可以更清晰地分辨代码的不同部分，如关键字、变量、字符串等，有助于发现潜在的语法错误。

六、编写并运行第一个JavaScript程序

现在，已经了解了JavaScript的运行环境和相关工具的使用，接下来将编写并运行一个简单的JavaScript程序，体验完整的开发流程。

（一）使用浏览器控制台

1. 打开浏览器并进入任意网页（如`https://www.example.com`）。

2. 按下`F12`键打开开发者工具，切换到“控制台”标签页。

3. 在控制台输入以下代码并按回车键：

console.log("Hello, JavaScript! This is my first program.");

控制台将输出`Hello, JavaScript! This is my first program.`，表示代码成功运行。这展示了如何在浏览器控制台中快速测试和运行JavaScript代码片段。

（二）使用HTML文件

1. 使用文本编辑器创建一个新的HTML文件`firstProgram.html`。

2. 在文件中输入以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>第一个JavaScript程序</title>

</head>

<body>

    <h1>第一个JavaScript程序</h1>

    <script>

        // 输出欢迎信息

        console.log("Welcome to the world of JavaScript!");



        // 在网页上显示消息

        document.write("<p>Hello, JavaScript! This is my first program.</p>");



        // 使用alert显示消息框

        alert("JavaScript is fun! Let's start learning.");

    </script>

</body>

</html>

3. 保存文件并在浏览器中打开。浏览器将显示一个包含标题“第一个JavaScript程序”的网页，同时在页面上输出一段文字“Hello, JavaScript! This is my first program.”。此外，控制台中会显示“Welcome to the world of JavaScript!”，并且会弹出一个消息框显示“JavaScript is fun! Let's start learning.”。这展示了如何在HTML文件中嵌入JavaScript代码，实现多种输出方式，包括控制台输出、网页内容输出和消息框提示。

（三）使用Node.js

1. 使用文本编辑器创建一个新的JavaScript文件`firstProgram.js`。