Javascript 零基础教程

JavaScript 开发环境搭建

想要真正驾驭 JavaScript 的力量，你首先需要一个专属的空间和合适的工具来编写、测试和运行你的代码。

就像木匠需要车间和锯子、锤子等特定工具一样，开发者也需要一个配备了代码编辑器、具有强大调试功能的浏览器，以及通常还需要一种在网页之外运行 JavaScript 的方法的开发环境。

本章节将指导你搭建这个至关重要的环境，将你的计算机改造成一个 JavaScript 开发的强大工作台。在课程结束时，你将准备好所有基础组件，并在我们之前讨论的“JavaScript 是什么”的基础上，开始编写你的第一个 JavaScript 程序。

1. 选择你的代码编辑器：开发者的工作台

代码编辑器是专门为编写计算机程序而设计的软件。虽然你在技术上可以使用像 Windows 上的记事本 (Notepad) 或 macOS 上的文本编辑 (TextEdit) 这样的简单文本编辑器来写代码，但专用的代码编辑器能提供显著增强的体验，提高生产力并有助于防止常见错误。

1.1 什么是代码编辑器？

与基本的文本编辑器不同，代码编辑器提供了专门为编程量身定制的功能：

  • 语法高亮 (Syntax Highlighting)： 代码的不同部分（关键字、字符串、注释、变量）以不同的颜色显示。这使得你的代码一眼就能看懂，也能帮你快速发现拼写错误。
  • 自动补全/智能感知 (Autocompletion/IntelliSense)： 当你输入时，编辑器会根据你的代码和语言的语法建议可能的单词、函数名或变量名。这既节省时间又减少错误。
  • 错误检测 (Error Detection)： 许多编辑器可以在你输入时高亮显示潜在的语法错误或警告，在你尝试运行代码之前就提供即时反馈。
  • 代码格式化 (Code Formatting)： 编辑器可以自动缩进你的代码，对齐元素，并确保风格一致，这对于可读性和协作项目至关重要。
  • 集成终端 (Integrated Terminal)： 通常，你可以直接在编辑器内运行命令行命令，无需在应用程序之间切换。
  • 扩展和插件 (Extensions and Plugins)： 代码编辑器的功能可以通过成千上万的插件进行扩展，增加对新语言、调试工具、代码检查工具 (Linters) 等的支持。

1.2 Visual Studio Code (VS Code)

对于 JavaScript 开发，特别是对于初学者来说，Visual Studio Code (VS Code) 是无可争议的行业标准。它由 Microsoft 开发，免费、开源、极其强大且高度可定制。它可以在 Windows、macOS 和 Linux 上运行，在不同的操作系统上提供一致的体验。

1.3 为什么 VS Code 是我们的首选：

  • 轻量且快速： 尽管功能丰富，VS Code 的启动速度相对较快且响应迅速。
  • 卓越的 JavaScript 支持： 它内置了对 JavaScript 的支持，包括智能自动补全、语法高亮和调试功能。
  • 庞大的扩展生态系统： 几乎你能想到的任何功能都有对应的扩展，从新语言支持到主题、代码检查工具和特定的开发框架。
  • 集成终端： 你可以直接在 VS Code 内部打开和使用命令行界面。
  • Git 集成： 无缝配合 Git（最流行的版本控制系统）工作，用于管理你的代码变更。

1.4 Visual Studio Code 安装指南：

  1. 访问官方网站： 打开你的 Web 浏览器并访问 https://code.visualstudio.com。
  2. 下载安装程序： 网站通常会检测你的操作系统并提供相应的下载按钮（例如，“Download for Windows”，“Download for macOS”）。点击此按钮下载安装程序。
  3. 运行安装程序：
    1. Windows： 双击下载的 .exe 文件。接受许可协议。强烈建议在安装过程中勾选 "Add 'Open with Code' action to Windows Explorer context menu"（将“通过 Code 打开”操作添加到 Windows 资源管理器上下文菜单） 复选框，因为这使得在 VS Code 中打开文件夹非常方便。按照屏幕上的提示完成安装。
    2. macOS： 双击下载的 .zip 文件以解压应用程序。将 "Visual Studio Code" 应用程序图标拖入你的“应用程序 (Applications)”文件夹。首次启动时你可能需要授予安全权限。
    3. Linux： 根据你的发行版，你可能下载 .deb（用于 Debian/Ubuntu）或 .rpm（用于 Fedora/RHEL）包。双击该包或使用系统的包管理器安装它（例如，sudo dpkg -i code_*.deb 或 sudo rpm -i code_*.rpm）。
  4. 启动 VS Code： 安装完成后，从你的应用程序文件夹、开始菜单启动 VS Code，或者在终端中输入 "code"（如果你在安装期间将其添加到了 PATH 中）。

1.5 初识 VS Code：

当你第一次打开 VS Code 时，你会看到一个欢迎屏幕。主界面通常由以下部分组成：

  • 活动栏 (Activity Bar)（最左侧）： 用于切换不同视图的图标，如资源管理器（文件管理）、搜索、源代码管理、运行和调试以及扩展。
  • 侧边栏 (Sidebar)（左侧）： 显示从活动栏中选择的视图的内容（例如，资源管理器中的项目文件）。
  • 编辑器组 (Editor Group)（中心）： 你编写和查看代码文件的地方。
  • 面板 (Panel)（底部）： 可以托管集成终端、输出、调试控制台和问题视图。

现在不用担心记下每一个按钮。最重要的区域是中央的编辑器，你将在这里花费大部分时间编写 JavaScript。

2. 浏览器：你的第一个 JavaScript 运行环境

JavaScript 最初是为了让网页具有交互性而创建的。因此，每一个现代 Web 浏览器都配备了一个内置的 JavaScript 引擎，它能够解释和执行 JavaScript 代码。这使得你的浏览器成为运行 JavaScript 的一个极其强大且易于获取的环境，特别是当你刚开始学习时。

2.1 为什么选择浏览器？

  • 无处不在： 每个人都有 Web 浏览器，使其成为运行 JavaScript 的通用平台。
  • 无需额外设置： 与某些需要复杂编译器或运行时的其他编程语言不同，你的浏览器随时准备好执行 JavaScript。
  • 视觉反馈： 当你编写操作网页的 JavaScript 时，你在浏览器中会得到即时的视觉反馈，这对于理解代码如何工作非常有帮助。
  • 开发者工具： 现代浏览器包含强大的开发者工具，这对于检查、调试和理解你的 JavaScript 代码是必不可少的。

2.2 开发者工具

每一个主流 Web 浏览器（Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari）都包含一套“开发者工具”（通常简称为“DevTools”）。这些工具对于前端 Web 开发和 JavaScript 调试来说绝对是游戏规则的改变者。虽然 DevTools 提供了许多功能，但在本课程的初期课程中，我们将主要关注 控制台 (Console)。

2.2.1 控制台 (Console) 是 DevTools 的关键部分，在这里：

  1. 你可以看到来自 JavaScript 代码的输出消息（例如，错误消息，或你为了理解代码正在做什么而故意打印的消息）。
  2. 你可以直接编写并执行单行 JavaScript 代码，这对于快速测试和实验非常棒。
  3. 你可以检查网络活动、查看 HTML 和 CSS 以及分析性能，尽管这些是更高级的 Web 开发主题。

2.2.2 如何打开开发者工具：

大多数浏览器的方法都很相似：

  • Google Chrome, Mozilla Firefox, Microsoft Edge:
    • 快捷键： Windows/Linux 按 F12，或 macOS 按 Cmd + Option + I。
    • 菜单： 在网页的任意位置右键点击，选择“检查 (Inspect)”或“检查元素 (Inspect Element)”。
  • Apple Safari:
    • 首先，你需要启用“开发 (Develop)”菜单。去 Safari > 偏好设置 (Preferences) > 高级 (Advanced) 并勾选“在菜单栏中显示‘开发’菜单 (Show Develop menu in menu bar)”。
    • 然后，你可以通过 开发 (Develop) > 显示网页检查器 (Show Web Inspector) 打开 DevTools，或者按 Cmd + Option + I。

一旦 DevTools 打开，寻找标签为 "Console" (控制台) 的选项卡。这就是你将看到 JavaScript 输出并可以输入命令的地方。

3. Node.js：浏览器之外的 JavaScript（可选，但推荐）

虽然浏览器是运行网页 JavaScript 的绝佳环境，但现代 JavaScript 开发通常会扩展到浏览器之外。Node.js 是一个 JavaScript 运行时环境，允许你在 Web 浏览器之外执行 JavaScript 代码。它使用与 Google Chrome 相同的 V8 JavaScript 引擎，使其速度极快。

3.1 什么是 Node.js？

可以把 Node.js 想象成将 Chrome 的核心 JavaScript 引擎拿出来，放入你电脑上的一个独立应用程序中。这意味着你可以使用 JavaScript 进行：

  • 服务端应用程序： 构建 Web 服务器和 API（应用程序编程接口）。
  • 命令行工具： 创建自动化你电脑任务的脚本。
  • 桌面应用程序： 使用 Electron 等框架。
  • 构建工具： 管理项目依赖、编译代码和运行测试。

对于这个初学者课程，我们将主要关注基于浏览器的 JavaScript。然而，强烈建议尽早安装 Node.js，因为它是现代 JavaScript 生态系统的基础部分，如果你以后探索工具链、构建流程或全栈开发，它将是无价之宝。即使只是为了学习，它也提供了一种无需浏览器或 HTML 页面即可运行简单 JavaScript 文件的简便方法。

3.2 安装 Node.js

  1. 访问官方网站： 前往 https://nodejs.org/zh-cn。
  2. 下载 LTS 版本： 你通常会看到两个下载选项：“LTS”（长期支持版）和“Current”（当前最新版）。始终选择 LTS 版本。这个版本更稳定，推荐给大多数用户，特别是初学者。
  3. 运行安装程序：
    1. Windows/macOS： 双击下载的安装程序。按照提示操作。通常可以安全地接受所有默认设置。安装程序还会自动包含 npm（Node 包管理器）。
    2. Linux： 网站提供了各种 Linux 发行版的说明。通常建议使用像 nvm（Node 版本管理器）这样的版本管理器以获得更多控制，但对于简单的初学者设置，通过你的包管理器直接安装（例如，在添加 NodeSource 仓库后在 Ubuntu 上运行 sudo apt install nodejs）或使用官方安装程序就足够了。

3.3 验证你的 Node.js 和 npm 安装：

安装后，打开你的系统终端或命令提示符（在 Windows 上，搜索 "cmd" 或 "Powershell"；在 macOS/Linux 上，搜索 "Terminal"）。

输入以下命令并在每个命令后按 Enter 键：

node -v

此命令应输出已安装的 Node.js 版本（例如 v18.17.0）。

npm -v

此命令应输出已安装的 npm（Node 包管理器）版本（例如 9.6.7）。npm 是一个随 Node.js 捆绑的关键工具，允许你为项目安装和管理 JavaScript 包和库。我们将在未来的课程中更多地探索 npm，但现在，只需确认它的存在就足够了。

如果两个命令都返回版本号，说明你的 Node.js 和 npm 安装成功！

4. 实践活动：确认你的设置

既然你已经安装了必要的工具，让我们执行一些快速检查，以确保一切工作正常，并且你对新环境感到舒适。

4.1 打开 Visual Studio Code：

  1. 启动 VS Code。花点时间看看界面。
  2. 从“文件 (File)”菜单中，选择“打开文件夹... (Open Folder...)”（或 macOS 上的“打开... (Open...)”）。
  3. 在你电脑上易于访问的地方创建一个新文件夹（例如 Documents/javascript_basics/lesson1）。将其命名为类似 my_javascript_projects 的名字。
  4. 选择此文件夹并点击“打开”。你应该在左侧的“资源管理器”侧边栏中看到该文件夹的名称。这是你组织 JavaScript 文件的地方。

4.2 探索浏览器开发者工具：

  1. 打开你首选的 Web 浏览器（Chrome, Firefox, Edge）。
  2. 使用前面讨论的方法之一（例如 F12 或右键点击 检查）打开开发者工具。
  3. 导航到 "Console" (控制台) 标签页。
  4. 在控制台中，输入 2 + 2 并按 Enter。你应该看到输出 4。这证实了浏览器的 JavaScript 引擎正在工作并准备好执行命令。
  5. 现在尝试输入 console.log("来自控制台的问候！"); 并按 Enter。你应该看到下方打印出 "来自控制台的问候！"。这是在 JavaScript 中显示信息的常用方法。

4.3 验证 Node.js 和 npm（如果已安装）：

  1. 打开你的系统终端或命令提示符。
  2. 输入 node -v 并按 Enter。
  3. 输入 npm -v 并按 Enter。
  4. 确认两个命令都显示版本号，表明安装成功。

这些活动确认了你的开发环境已设置完毕并准备就绪。你现在拥有了开始 JavaScript 之旅的基础工具！