JavaScript, jQuery, TypeScript：第一章

注意：这部分内容来自我的技术博客，但图片未能同步。我正在更新文章并保存。不知何故，这篇文章似乎不再是技术博客了。

为什么要学习纯 JavaScript？

学习纯 JavaScript（即不使用 jQuery 等其他库的 JavaScript）很重要，因为你对 JavaScript 越熟悉，就越容易使用其他基于 JavaScript 的库。这还有助于你理解为什么会创建其他库（在大多数情况下，是为了让 JavaScript 更易于使用）。

此外，一旦你看到在 JavaScript 中做某些事情有多困难，你就会更好地理解 jQuery 和 TypeScript 使某些事情变得更容易的用意。

看到结果会使学习更容易

对你的学习来说，第一件重要的事情是知道如何看到结果。如今，浏览器开发者通过在浏览器中内置开发工具，使事情变得容易得多。

如果你按 F12（大多数浏览器都支持，FireFox、Chrome、Edge 肯定支持），你就会看到一个新窗口弹出来。

我在我的 Arduino 博客上的 FireFox 中按下了 F12，以便你能看到它的样子。

红色线条以下的部分是浏览器控制台。下方区域还有许多选项卡。第一个是 [imposter]，第二个是当前选中的 [Console]。第三个是 [Debugger]，其余的你也可以看到。

按下 F12 会打开子窗口，并已选中 [Console] 选项卡，这通过淡蓝色的线条和蓝色的文本（“Console”）来指示。

在 FireFox 中，你可以在底部显示着灰色 **>>** 的地方输入 JavaScript 语句。只需点击它右侧，然后输入你想运行的 JavaScript，按 **<ENTER>** 键，你的代码就会运行。

请继续输入：**2+2<ENTER>**

当你这样做时，FireFox 会让 JavaScript 解释器运行以评估代码，然后它会在控制台中打印结果。另外请注意，当你按下 **<ENTER>** 键时，控制台窗口会清除掉你在 **>>** 行输入的文本。这只是为了方便你输入下一个命令。

其他浏览器略有不同

如果你使用的是 Microsoft Edge，控制台窗口看起来会有些不同，但你应该能够找到你需要的东西。

错误也会显示出来

如果你输入了 JavaScript 解释器无法理解的内容，它就会给你一个错误。

我输入了一些无意义的内容

sda =ewwlj<ENTER>

JavaScript 解释器不知道如何处理它，所以它试图给我一个关于它不理解的提示。

控制台会记住你输入的所有代码

你可以输入多行 JavaScript 代码，控制台会记住它们，就像你在输入一个更大的程序一样。

例如，我将输入以下命令

>> var x = 2 + 2<ENTER>
>> console.log(“This value of  x is “ + x)<ENTER>

每次我输入一行并按下 **<ENTER>** 后，JavaScript 解释器都会响应 ← undefined。这没问题。它只是表明浏览器对正在发生的事情有些困惑。它认为你正在运行一个没有返回值的函数。现在你不用担心这个问题。

奇怪的字符和文本

有时，屏幕上的一个字符与 JavaScript 解释器认为的不同。对于双引号字符来说就是如此。在不同的编辑器中，它们由各种字符表示。这是一个长篇故事，但重点是，如果你复制我的代码而不是自己输入双引号，你可能会看到一个不同且错误的输出。如果你看到奇怪的事情发生，那可能是问题所在。

最后，正如你所见，当你输入引用变量 x 的第二行（var x）时，解释器会记住 `x` 的值并能够将其打印出来。

如果你还没有定义 `x`，那么解释器就会给你一个错误。

例如，输入字母 `q` 并按 **<ENTER>**。

现在解释器告诉你 `q` 未定义，并且有一个 `ReferenceError`。这意味着 JavaScript 解释器不知道你正在引用的东西。

JavaScript 解释器的奇怪错误语言

你已经开始体验 JavaScript 解释器用来警告你的奇怪语言了。你还注意到，有时解释器告诉你某事是 ← undefined，而你可以忽略它。然后，有时它会告诉你发生了一个 `ReferenceError`，某事未定义，你需要注意。

这些消息是由浏览器开发者创建的。这意味着这些消息通常会在不同浏览器之间有所不同（Edge 与 FireFox 等不同）。通常，它们是相似的，所以你应该能够弄清楚。这是 Microsoft Edge 中的 `q` 错误。

你越能辨别这些晦涩的小消息的含义，你就会成为一个更好的 JavaScript 程序员，因为你将能够弄清楚自己的程序出了什么问题。

这并不是我们编写 JavaScript 程序的方式

当然，将代码输入 JavaScript 控制台并不是我们编写 JavaScript 程序的方式。我们这样做至少有两个原因：

1. 你无法保存你的工作——一旦关闭浏览器标签页或刷新网页，所有代码都会消失。它只存储在内存中，而不是保存到磁盘。
2. 你无法轻松地与其他用户共享代码，让他们也能运行。由于代码未保存到文件，程序仅存在于内存中，你无法让其他用户运行你的代码。

这就是为什么我们通常使用文本编辑器编写代码并将其保存到文件。

应该使用哪个文本编辑器？

你应该使用对你来说最容易使用、你最舒适的文本编辑器。以下是一些你可能会考虑使用的文本编辑器建议，以及选择每个编辑器的原因。

我只打算介绍 100% 免费的编辑器，所以你会发现一些流行的编辑器不在其中，但考虑到市面上免费的专业文本编辑器数量众多，我实在想不出花钱买一个文本编辑器的理由。稍后，当你做了很多 JavaScript 编程后，你可能会想要那些编辑器。但现在，我们只看免费的。

Notepad++

优点：易于获取，免费且易于使用。你可以在这里获取：https://notepad-plus-plus.org/。

Notepad++ 也不占用大量资源，这意味着运行它不会消耗你很多内存或处理器。其他编辑器可能会更占用资源，因为它们可能添加了更多使用你计算机资源的附加功能。

Notepad++ 还具有语法高亮显示功能，以及列出你 JavaScript 中所有函数的 ToDo。

语法高亮显示意味着 Notepad++ 会对它知道的特殊内容（如变量、函数名等）进行着色。这是一种简单而有效的方式，可以帮助你更轻松地查看你的代码。

缺点：你无法调试*你的 JavaScript。

*我们将在稍后深入讨论调试 JavaScript。现在，你只需要知道调试 JavaScript 一直是个挑战，但 Visual Studio 可以让你单步跟踪 JavaScript 并逐行运行。浏览器开发工具（控制台等）在某些情况下也允许这样做。

Atom

优点

• 易于获取且免费。https://atom.io/
• 可在三大平台（Mac、Win、Linux）上使用。如果你在不同操作系统之间切换，你可能会想使用 Atom。
• 出色的语法高亮显示。主题可以使屏幕对你的眼睛更友好。
• 多个窗格用于多个文件：你可以打开多个文件并同时查看它们。这非常有帮助，因为有时你需要同时编辑 HTML 和多个 JS 文件。
• 内置项目树视图，这样你就可以看到你的项目文件夹和文件列表，就像在文件资源管理器中看到它们一样。
• 你可以轻松地同时显示和处理多个文件。你很快就会发现这很重要，因为当你看到 JavaScript 和 HTML 应（必须）拆分成自己的源文件时。

缺点

Atom 是用 HTML、CSS 和 JavaScript 构建的，并运行在 Node.js（允许 JavaScript 在浏览器之外运行的 JavaScript 引擎）之上。

这意味着 Atom 占用的资源更多，你可能会觉得你的电脑运行得慢一些。

刚开始编写 JavaScript 时需要学习的东西更多。界面更庞大，因为它提供了更多功能，这使得它一开始使用起来有点令人不知所措。

Visual Studio Code

这是一个基于 Microsoft Visual Studio 的较小的、较新的编辑器。我试用了一下，虽然它是免费的，但我不太喜欢它。如果你打算使用一个更大的编辑器，我建议你使用 Atom。Visual Studio Code 并没有比 Atom 提供多少好处，而且它会做一些恼人的事情，比如将一个 `\.vscode` 文件夹添加到你的 HTML/JavaScript 项目中。

我将在本书中使用哪个编辑器？

我经常会使用 Notepad++，因为它启动速度快，易于开始编辑 JS 文件。但是，如果我构建的项目比简单的单文件 JavaScript 大，你就会看到我转向 Atom 编辑器。

现在你已经有了文本编辑器，并准备就绪，我们可以开始编写第一个基本的 JavaScript 和 HTML。我们将在下一章开始这项工作。

CodeProject