logo

第一章：初识 JavaScript

作者
Modified on
Reading time
5 分钟阅读:..评论:..

JavaScript 是现代 Web 开发的核心技术之一，任何想要成为全栈开发者的人都必须掌握它。 这一章将带你初步了解 JavaScript，从其历史、发展到应用领域，再到实际的环境搭建和第一个 JavaScript 程序编写。

1. JavaScript 简介

1.1 JavaScript 的历史与发展

JavaScript 诞生于 1995 年，由 Brendan Eich 在 Netscape Communications 公司开发。

最初，它被命名为 Mocha，后改为 LiveScript，最终命名为 JavaScript。JavaScript 迅速成为 Web 浏览器的标准编程语言，并在 1997 年被 ECMA（European Computer Manufacturers Association）标准化，称为 ECMAScript。

在过去的几十年里，JavaScript 进行了多次迭代和改进，从简单的脚本语言演变为强大的编程语言，支持面向对象编程、函数式编程和事件驱动编程等多种范式。

1.2 JavaScript 的应用领域

JavaScript 最初用于客户端编程，即在浏览器中运行。然而，随着技术的发展，JavaScript 的应用领域逐渐扩大，现在它在以下几个方面有广泛应用：

  • Web 开发：主要用于创建交互式和动态的网页。
  • 服务器端编程：使用 Node.js，JavaScript 也可以在服务器端运行。
  • 移动应用开发：通过框架如 React Native，可以开发跨平台的移动应用。
  • 桌面应用开发：使用 Electron，可以创建跨平台的桌面应用。
  • 游戏开发：通过 HTML5 和 Canvas API，可以创建浏览器游戏。

1.3 为什么选择 JavaScript

选择 JavaScript 有几个重要原因：

  • 简单易学：JavaScript 语法相对简单，适合初学者学习。
  • 广泛应用：几乎所有的 Web 应用都使用 JavaScript。
  • 强大的社区支持：JavaScript 拥有庞大的开发者社区，丰富的资源和工具。
  • 全栈开发：通过 Node.js，JavaScript 可以在前端和后端同时使用，实现全栈开发。

2. 安装与设置

在开始编写 JavaScript 代码之前，我们需要设置开发环境。以下是一些基本的安装与配置步骤。

2.1 浏览器自带的 JavaScript 环境

所有现代浏览器都自带 JavaScript 引擎，这使得我们可以直接在浏览器中编写和运行 JavaScript 代码。常见的浏览器如 Google Chrome、Mozilla Firefox、Microsoft Edge 和 Safari 都支持 JavaScript。

打开浏览器的开发者工具（通常可以通过按 F12 或右键点击网页然后选择“检查”），在控制台（Console）中输入以下代码，按 Enter 键运行：

console.log("Hello, World!");

你应该会看到控制台输出了 Hello, World! 这表示你的浏览器已经准备好运行 JavaScript 代码。

2.2 安装 Node.js

虽然浏览器可以运行 JavaScript，但为了在服务器端使用 JavaScript，我们需要安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，可以让 JavaScript 在服务器端运行。

安装步骤

  1. 下载 Node.js：访问 Node.js 官方网站，选择合适的版本（LTS 版本推荐）下载并安装。
  2. 验证安装：安装完成后，打开命令行工具（如终端或命令提示符），输入以下命令验证安装是否成功：
node -v
npm -v

这些命令会输出 Node.js 和 npm（Node Package Manager）的版本号，表示安装成功。

2.3 配置开发环境

为了编写和调试 JavaScript 代码，我们需要一个代码编辑器。这里推荐使用 Visual Studio Code (VS Code)，它是一个流行的免费开源代码编辑器，支持多种编程语言和丰富的扩展。

安装 VS Code

  1. 下载 VS Code：访问 VS Code 官方网站，下载并安装适合你操作系统的版本。
  2. 安装扩展：打开 VS Code，点击左侧的扩展图标，然后搜索并安装以下常用扩展：
    • ESLint：用于检查和修复 JavaScript 代码中的语法错误和风格问题。
    • Prettier：用于代码格式化，使代码风格统一。
    • Debugger for Chrome：用于在 VS Code 中调试 Chrome 浏览器中的代码。

3. 第一个 JavaScript 程序

3.1 编写 Hello, World 程序

在学习编程语言时，第一个编写的程序通常是 "Hello, World!"。让我们来编写一个简单的 JavaScript 程序，在浏览器中显示 "Hello, World!"。

步骤

  1. 创建文件：打开 VS Code，创建一个新的文件 index.html。
  2. 编写代码：
<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
    <script>
      console.log("Hello, World!");
    </script>
  </body>
</html>
  1. 运行程序：在浏览器中打开 index.html 文件，打开开发者工具，在控制台中你会看到 Hello, World! 的输出。

3.2 在浏览器中运行 JavaScript

除了在 HTML 文件中嵌入 JavaScript 代码，我们还可以直接在浏览器的控制台中编写和运行 JavaScript 代码。这对于快速测试和调试非常有用。

示例

打开浏览器的开发者工具，在控制台中输入以下代码并运行：

alert("Hello, World!");

这会弹出一个包含 "Hello, World!" 的消息框。

3.3 基本的代码编辑与调试

在编写 JavaScript 代码时，调试是一个重要的环节。浏览器的开发者工具提供了强大的调试功能。

设置断点

  1. 打开开发者工具：按 F12 或右键点击网页选择“检查”。
  2. 切换到 Sources 面板：找到并打开你的 JavaScript 文件。
  3. 设置断点：点击代码行号处，可以设置断点。执行到该行代码时，程序会暂停运行，方便你检查变量和代码执行情况。

调试代码

  1. 查看变量：在调试过程中，你可以在 Scope 面板中查看当前变量的值。
  2. 单步执行：使用 Step Over、Step Into 和 Step Out 按钮逐行执行代码，方便你深入了解代码的执行过程。

通过这章的学习，你已经了解了 JavaScript 的基本概念和历史，安装了开发环境，并编写了第一个 JavaScript 程序。在接下来的章节中，我们将深入学习 JavaScript 语言的基础语法和更多实用的编程技巧。

< JavaScript
第二章：JavaScript 基础语法 >