嗨翻-JavaScript-第三版-早期发布--全-

嗨翻 JavaScript 第三版（早期发布）（全）

原文：zh.annas-archive.org/md5/97bc15629f1b51a0671040c56db61b92

译者：飞龙

协议：CC BY-NC-SA 4.0

第一章：快速了解 Javascript：踏入水中

Image

JavaScript 赋予你超能力。作为网页的真正编程语言，JavaScript 允许你添加行为到你的网页中。不再有干燥、无聊、静态的页面只是呆在那里看着你——使用 JavaScript，你可以与用户互动，响应有趣的事件，从网络中获取数据以在你的页面中使用，直接在网页中绘制图形等等。一旦你掌握了 JavaScript，你还可以为用户创造全新的行为。

你也会处于很好的公司。JavaScript 不仅是最受欢迎的编程语言之一，而且在所有现代浏览器中支持，并且在浏览器之外的许多环境中使用。稍后会详细介绍；现在让我们开始吧！

JavaScript 的工作原理

如果你习惯在网页中创建结构、内容、布局和样式，那么是时候也加入一些行为了吧？毕竟，页面不应该只是呆在那里。优秀的页面应该是交互式和动态的。这就是 JavaScript 的用武之地。让我们首先看看 JavaScript 如何融入网页生态系统：

Image

你将如何编写 JavaScript

JavaScript 在编程世界中相当独特。对于典型的编程语言，你需要编写、编译、链接和部署。JavaScript 则更加流畅和灵活。使用 JavaScript，你只需将 JavaScript 写入页面中，然后加载到浏览器中。从那时起，浏览器将愉快地开始执行你的代码。让我们更详细地看看它是如何工作的：

Image

如何将 JavaScript 加入到你的页面中

首先得明确一件事。如果不知道如何将 JavaScript 加入到网页中，你将无法深入学习 JavaScript。那么，怎么做呢？当然是使用 <script> 元素！

让我们拿一个枯燥乏味的普通网页，通过 <script> 元素添加一些动态行为。此时，不要太担心我们将在 <script> 元素中添加什么具体内容——你现在的目标是让 JavaScript 开始起作用。

Image

小测试驾驶

Image

现在，打开一个名为“behavior.html”的文件，并将这个页面拖到你的浏览器中（或者使用“文件” > “打开”）。它会做什么？提示：你需要等待五秒钟才能找出答案。

Image

JavaScript，你已经走了很远……

ImageImage

使用 HTML 和 CSS 你可以创建一些漂亮的页面。但一旦你掌握了 JavaScript，你可以真正扩展你可以创建的页面类型。

注意

知道 JavaScript 可能也会增加你的薪水！

事实上，你可能会开始将你的页面视为应用程序（甚至是体验！），而不仅仅是简单的页面。

现在，你可能会说，“我已经知道这些，你为什么认为我在读这本书？”嗯，我们实际上想利用这个机会谈谈学习 JavaScript 的事情。如果你已经掌握了一门编程语言或脚本语言，那么你对接下来的内容有一些了解。但是，如果迄今为止你主要使用的是 HTML 和 CSS，你应该知道学习一门编程语言与学习编程语言有着根本上的不同。

与 HTML 和 CSS 不同，你所做的主要是声明性的—例如，你声明某些文本是段落或者所有“sale”类中的 HTML 元素应该是红色的。而使用 JavaScript，你要为页面添加行为，为此你需要描述计算。你需要能够描述诸如“通过总结所有正确答案来计算用户的得分”、“执行此操作十次”或者“当用户点击该按钮时播放获胜音效”甚至“去获取我的最新推文，并将其放在这个页面中”之类的事情。

要执行这些操作，你需要一种与 HTML 或 CSS 非常不同的语言。让我们看看怎么做…

如何做出语句

当你创建 HTML 时，通常会标记文本以赋予其结构；为此，你需要向文本添加元素、属性和值：

图片

CSS 有点不同。使用 CSS 时，你编写一组规则，其中每个规则选择页面中的元素，然后为这些元素指定一组样式：

图片

使用 JavaScript，你会编写语句。每个语句都指定了计算的一个小部分，所有这些语句共同创建了页面的行为：

图片

变量和值

你可能已经注意到，JavaScript 语句通常涉及变量。变量用于存储值。哪些值？以下是一些示例：

图片

变量除了可以包含数字、字符串和布尔值外，还可以包含其他值，我们很快就会介绍这些，但无论变量包含什么，我们都是以相同的方式创建所有变量。让我们更仔细地看看如何声明变量：

图片

我们说“可选”，因为如果你愿意，你可以创建一个没有初始值的变量，然后稍后再为其赋值。要创建一个没有初始值的变量，只需省略赋值部分，像这样：

图片图片

常量，另一种变量类型

到目前为止，我们使用关键字**let**来声明变量。对于那些值可以变化的变量，这通常是我们想要做的事情，换句话说，随着时间的推移可以改变它们的值。例如，如果我们使用let来声明变量**winners**，将其赋值为 2，如果另一个赢家出现，我们可以稍后将winners的值更改为 3：

图片

然而，有时候我们不希望变量中的值变化。有些情况下，我们可能希望给一个我们将在代码中使用的值起个名字，但我们永远不希望那个值发生变化。比如，地球半径就是一个很好的例子。把这个值分配给一个变量可能会很方便，这样我们可以在代码中使用**EARTH_RADIUS**而不是这个数字。我们不希望有人无意中改变这个值，那么怎么确保EARTH_RADIUS的值永远不变呢？我们可以使用一个常量而不是变量，像这样：

图片

离开那个键盘！

你知道变量有名字，也知道它们有一个值。

你还知道变量可以保存数字、字符串和布尔值。

但你可以如何称呼你的变量？任何名字都可以吗？ 嗯，不是的，但是关于创建变量名的规则很简单：只需遵循下面两条规则来创建有效的变量名：

  • 图片 变量名要以字母、下划线或美元符号开头。

  • 图片 之后，可以使用任意数量的字母、数字、下划线或美元符号。

哦，还有一件事；我们真的不希望通过使用任何内置的关键字来混淆 JavaScript，比如let、function或false，所以请把它们视作你自己的变量名时的禁区。我们会在本书的其余部分介绍其中一些关键字及其含义，但这里是一个快速浏览的列表：

  • break

  • case

  • catch

  • class

  • const

  • continue

  • debugger

  • default

  • delete

  • do

  • else

  • enum

  • export

  • extends

  • false

  • finally

  • for

  • function

  • if

  • implements

  • import

  • in

  • instanceof

  • interface

  • let

  • new

  • package

  • private

  • protected

  • public

  • return

  • static

  • super

  • switch

  • this

  • throw

  • true

  • try

  • typeof

  • var

  • void

  • while

  • with

  • yield

图片图片

表达自己

要真正地在 JavaScript 中表达自己，你需要表达式。表达式会评估出值。在我们的代码示例中，你已经偶尔看到了一些。例如，看看这个语句中的表达式：

图片

如果你曾经上过数学课，做过银行对账或者报税，我们相信这些数值表达式对你来说并不陌生。

这里也有字符串表达式；以下是一些例子：

图片

我们也有表达式会评估为true或false，也就是所谓的布尔表达式。逐个来看这些表达式，看看它们是如何得出 true 或 false 的：

图片

而且表达式还可以评估为其他几种类型；我们将在本书后面详细讨论这些。目前重要的是要意识到所有这些表达式都会评估出某个值：一个数字、一个字符串或一个布尔值。让我们继续前进，看看这给你带来了什么！

图片

做很多次的事情

你经常要做很多事情不止一次：

洗、涮、重复...

上蜡，下蜡...

吃掉碗里的糖果，直到它们都没了。

当然，你经常需要在代码中重复执行某些操作，而 JavaScript 给了你几种循环执行代码的方式：while、for、for in 和 forEach。最终，我们会看看所有这些循环的方式，但现在让我们专注于 while。

我们刚刚讨论了会产生布尔值的表达式，比如 scoops > 0，而这些类型的表达式是 while 语句的关键。这是如何实现的：

图像

while 循环的工作原理

由于这是你的第一个 while 循环，让我们跟踪一轮其执行过程，看看它是如何工作的。请注意，我们添加了一个声明来声明 scoops 并将其初始化为值 5。

现在让我们开始执行这段代码。首先，我们将 scoops 设置为五。

图像

然后我们遇到了 while 语句。当评估 while 语句时，我们首先评估条件以查看它是 true 还是 false。

图像

因为条件为 true，我们开始执行代码块。体中的第一条语句将字符串“Another scoop!
”写入浏览器。

图像

要跟着一起做，请从 wickedlysmart.com/hfjs 获取本章的代码，并将 icecream.html 文件拖放到浏览器中。

接下来的语句从冰淇淋数目中减去一个，然后将 scoops 设置为新值，即四。

图像

这是代码块中的最后一条语句，因此我们回到条件语句并重新开始。

图像

再次评估我们的条件语句，这次 scoops 是四。但这仍然比零多。

图像

我们再次向浏览器写入字符串“Another scoop!
”。

图像

接下来的语句从冰淇淋数目中减去一个，并将 scoops 设置为该新值，即三。

图像

这是代码块中的最后一条语句，因此我们回到条件语句并重新开始。

图像

再次评估我们的条件语句，这次 scoops 是三。但这仍然比零多。

图像

我们再次向浏览器写入字符串“Another scoop!
”。

图像

正如你所看到的，这种情况会继续下去... 每次循环时，我们减少（减少 1），向浏览器写入另一个字符串，然后继续。

图像

然后继续...

图像

直到最后一次... 这次有些不同。Scoops 是零，所以我们的条件返回 false。就这样吧，我们不会再进入循环，不会执行代码块。这一次，我们跳过块并执行其后的语句。

图像

现在我们执行另一个 document.write，并写入字符串“没有冰淇淋的生活不一样”。我们完成了！

图片

if (cashInWallet > 5) {
   order = "I’ll take the works:
cheeseburger, fries and a coke";
} else {
   order = "I’ll just have a glass of
water";
}

使用 JavaScript 做决策

您刚刚看到如何使用条件来决定是否继续在while语句中循环。您还可以使用布尔表达式在 JavaScript 中做决策，使用if语句。if语句仅在条件测试为真时执行其代码块。这里是一个例子：

图片

使用if语句，我们还可以通过添加一个或多个else if来串联多个测试，就像这样：

图片

而且，当您需要做很多决策时

您可以串联尽可能多的if/else语句，如果需要，甚至可以添加一个最终的全捕获else，以便在所有条件失败时进行处理。就像这样：

图片图片

与用户联系和沟通

我们一直在讨论如何使您的页面更具交互性，为此您需要能够与用户进行通信。事实证明有几种方法可以做到这一点，而您已经看到了其中一些。让我们快速概述一下，然后我们将在整本书中更详细地介绍这些内容：

创建一个警报

正如您所见，浏览器通过alert函数为您提供了一种快速警告用户的方法。只需调用带有包含警报消息的字符串的alert，浏览器将以一个漂亮的对话框向用户显示消息。不过，小小的坦白：我们一直在过度使用它，因为它很容易；alert真的应该只在您真正想要停止一切并让用户知道某事时使用。

直接写入您的文档

将您的网页视为一个文档（这就是浏览器称呼它的方式）。您可以使用document.write函数在任何时候将任意 HTML 和内容写入您的页面。一般来说，这被认为是不好的做法，尽管您会在这里那里看到它的使用。我们在本章中也稍微使用了一点，因为这是一个开始的简单方式。

注意

我们在本章中使用了这三种方法。

使用控制台

每个 JavaScript 环境都有一个控制台，可以记录来自您代码的消息。要将消息写入控制台的日志，您可以使用console.log函数，并将要打印到日志中的字符串传递给它（有关如何使用控制台日志的更多详细信息稍后）。您可以将console.log视为调试代码的好工具，但通常您的用户不会看到您的控制台日志，因此这不是与他们沟通的非常有效的方式。

注意

控制台是帮助您在代码中查找错误的非常方便的方法！如果您犯了一个打字错误，比如漏掉了引号，JavaScript 通常会在控制台中给您一个错误，以帮助您追踪它。

直接操作您的文档

这是大联盟；这是你希望与页面和用户交互的方式 —— 使用 JavaScript，你可以访问你的实际网页，读取和更改其内容，甚至修改其结构和样式！这一切都是通过使用你浏览器的文档对象模型实现的（稍后会详细介绍）。正如你将看到的，这是与你的用户交流的最佳方式。但是，使用文档对象模型需要了解页面结构及用于读取和写入页面的编程接口的知识。我们很快就会到达那里。但首先，我们还有更多的 JavaScript 需要学习。

注意

这就是我们的工作目标。当你达到这个目标时，你将能够以各种方式阅读、修改和操作你的页面。

更详细地看看console.log

让我们更仔细地看看console.log的工作原理，以便在本章中使用它来查看我们代码的输出，并在整本书中检查和调试我们代码的输出。但请记住，控制台不是大多数网页的普通用户会遇到的浏览器功能，因此你不会想在最终版本的网页中使用它。在开发页面时，写入控制台日志通常用于故障排除。也就是说，在学习 JavaScript 基础知识时，查看代码的运行情况是一个很好的方法。它的工作原理如下：

Image

打开控制台

每个浏览器对控制台的实现略有不同。而且，更复杂的是，浏览器实现控制台的方式相对频繁地会有所更改 —— 变动不会很大，但足以让你读到这里时，你的浏览器控制台看起来可能与我们展示的有些不同。

因此，我们将向您展示如何在 Mac 上的 Chrome 浏览器（版本 120）中访问控制台，并在wickedlysmart.com/hfjsconsole上提供有关如何在所有主要浏览器中访问控制台的说明。一旦您掌握了一个浏览器中的控制台，就很容易弄清楚如何在其他浏览器中使用它，我们鼓励您尝试在至少两个浏览器中使用控制台，以便熟悉它们。

注意

注意：你不需要输入 Howdy 代码。我们只是在学习控制台的位置。过一会儿我们就会开始输入代码...

Image

编写严肃的 JavaScript 应用程序

让我们将所有这些新的 JavaScript 技能和console.log技巧用于一些实际操作。我们需要一些变量，一个while语句，一些带有else的if语句。稍微加工一下，你会发现我们不知不觉中已经拥有了一个超级严肃的商业应用程序。但是，在你查看代码之前，请想想你如何编写那个经典的“99 瓶根啤”的代码。

Image

const word = "bottles";
let count = 99;
while (count > 0) {
    console.log(count + " " + word + " of rootbeer on the wall");
    console.log(count + " " + word + " of rootbeer,");
    console.log("Take one down, pass it around,");
    count = count - 1;
    if (count > 0) {
        console.log(count + " " + word + " of rootbeer on the wall.");
    } else {
        console.log("No more " + word + " of rootbeer on the wall.");
    }
}

Image

好主意！ 是的，是时候了。在我们到达那里之前，我们希望确保你已经掌握了足够的 JavaScript，使它变得有趣。也就是说，你已经在本章的开头看到，你可以像添加 CSS 一样添加 JavaScript 到你的 HTML 中；也就是说，你只需将它嵌入到适当的 <script> 标签中。

现在，就像 CSS 一样，你也可以把你的 JavaScript 放在外部文件中。

让我们首先将这个严肃的业务应用程序放到一个页面上，然后在彻底测试后，我们将把 JavaScript 移到外部文件中。

我如何将代码添加到我的页面？（让我数数这些方法）

你已经知道你可以将 <script> 元素与你的 JavaScript 代码添加到页面的 <head> 或 <body> 中，但是还有几种其他方法可以将你的代码添加到页面上。让我们看看可以放置 JavaScript 的所有位置（以及为什么你可能想要把它放在一个地方而不是另一个地方）：

图像图像

我们必须把你们分开

分开走也许会伤害，但我们知道我们必须这样做。是时候把你的 JavaScript 移到自己的文件中去了。这是你做到这一点的方法...

图像图像

JavaScript 交叉

图像

是时候通过一个谜题来拉伸你的树突，以帮助所有这些都深深地印在你的脑海中。

图像

横向

1. 变量用于存储这些。

4. 使用 __ 调试器 __ 来排除你的代码问题。

7. 今天的 JavaScript 运行比以前 __ 快得多 __ 。

8. 墙上有 99 瓶 __ 根啤 __ 。

9. 要从 HTML 链接到外部 JavaScript 文件，你需要 <script> 元素的 src 属性。

10. 每次通过循环，我们评估一个 __ 条件 __ 表达式。

13. if/else 语句用于制作一个 __ 选择 __ 。

14. 所有 JavaScript 语句都以 __ 分号 __ 结尾。

16. 把你的 JavaScript 放在一个 __ 脚本 __ 元素内。

纵向

2. 你可以使用 + 运算符把 __ 字符串 __ 连接在一起。

3. 将不变的值存储在这个 __ 常量 __ 中。

5. 3 + 4 是一个 __ 示例 __ 。

6. JavaScript 为你的网页添加 __ 动态功能 __ 。

9. JavaScript 代码的每一行称为 __ 语句 __ 。

10. 为了避免尴尬的命名错误，请使用 __ 驼峰 __ 样式。

11. 在 JavaScript 程序中多次执行某些操作，使用 __ 循环 __ 。

12. JavaScript 变量名是 __ 大小写 __ 敏感的。

15. 要声明一个变量，请使用这个关键字。

JavaScript 交叉 解答

图像图像

第二章：编写真实代码：更进一步

Image

你已经了解变量、类型、表达式……我们可以继续下去。 关键是，您已经了解一些关于 JavaScript 的东西。事实上，您已经足够了解以编写一些真实的代码。一些做一些有趣事情的代码，一些某人想要使用的代码。您缺少的是编写代码的真实经验，我们将在这里立即加以弥补。怎么做？通过全力以赴，编写一个用 JavaScript 编写的休闲游戏。我们的目标是宏伟的，但我们将一步步实现。来吧，让我们开始吧，如果您想启动下一个创业公司，我们不会阻碍您；代码是您的。

让我们来建造一个战舰游戏

这是您与浏览器的对抗：浏览器隐藏船只，您的任务是找出并摧毁它们。当然，与真正的战舰游戏不同，在这个游戏中，您不会放置任何自己的船只。相反，您的工作是以最少的猜测次数击沉计算机的船只。

目标： 以最少的猜测次数击沉浏览器的船只。根据您的表现，您将获得评级。

设置： 当游戏程序启动时，计算机会在虚拟网格上放置船只。完成后，游戏会询问您的第一个猜测。

玩法： 浏览器会提示您输入一个猜测，然后您将输入一个网格位置。根据您的猜测，您会看到“命中”、“未命中”或“你击沉了我的战舰！”的结果。当您击沉所有船只时，游戏将显示您的评级。

我们的第一次尝试…

…一个简化的战舰游戏

对于我们的第一次尝试，我们将从比全面的 7x7 图形版本少的简化版本开始，只有三艘船。相反，我们将从一个带有七个位置和一个要找到的船的不错的一维网格开始。它可能会很简陋，但我们的重点是设计游戏的基本代码，而不是外观和感觉（至少现在是这样）。

别担心；通过从游戏的简化版本开始，您将在稍后构建完整游戏时获得很大的优势。这还为您的第一个真正的 JavaScript 程序提供了一个不错的起点（当然，不算上第一章中的严肃商业应用）。因此，在本章中，我们将构建游戏的简化版本，并在您学到更多关于 JavaScript 的内容后，稍后再进入豪华版本。

ImageImage

首先，一个高层次的设计

我们知道我们将需要变量，一些数字和字符串，以及条件语句和循环……但是在哪里以及有多少？以及我们如何将所有这些组合在一起？为了回答这些问题，我们需要更多关于游戏应该做什么的信息。

首先，我们需要弄清楚游戏的一般流程。以下是基本想法：

Image

现在我们对程序需要做的事情有了一个高层次的概念。接下来，我们将为这些步骤进一步详细说明一些细节。

图片

还有一些细节...

我们对这个游戏如何工作有了一个相当好的想法，从高级设计和专业外观的流程图中，但在我们开始编写代码之前，让我们再确定一些细节。

表示战舰

首先，我们可以通过找出如何在我们的网格中表示一艘船来开始。请记住，虚拟网格是... 嗯，虚拟的。换句话说，它在程序中并不存在。只要游戏和用户知道战舰隐藏在可能的七个连续单元格中的三个单元格中（从零开始），则行本身在代码中不必表示。您可能会尝试构建一个保存所有七个位置的东西，然后尝试将船放置在这些位置中。但是，我们不需要这样做。我们只需要知道船位于哪些单元格，比如说，在单元格 1、2 和 3 处。

图片

获取用户输入

如何获取用户输入？我们可以使用 prompt 函数来完成。每当我们需要从用户那里获取一个新的位置时，我们将使用 prompt 来显示消息并获取用户的输入，这只是用户从 0 到 6 之间的一个数字。

显示结果

输出是怎么样的？目前，我们将继续使用 alert 来显示游戏的输出。这有点笨拙，但它会起作用。（在本书的后面，对于真实的游戏，我们将更新网页，但在那之前，我们还有很长的路要走。）

通过伪代码进行工作

我们需要一种计划和编写代码的方法。我们将从编写伪代码开始。伪代码介于真实的 JavaScript 代码和程序的纯英语描述之间，正如您将看到的那样，它将帮助我们思考程序将如何工作，而不必完全开发真正的代码。

在这个简单战舰的伪代码中，我们包括了一个描述我们将需要的变量的部分，以及描述程序逻辑的部分。变量将告诉我们在我们的代码中需要跟踪的内容，而逻辑描述了必须如实实现以创建游戏的代码。

图片

哦，在我们继续之前，别忘了 HTML！

如果没有一些 HTML 来链接到您的代码，您将无法取得太大进展。请继续在一个名为“battleship.html”的新文件中键入下面的标记。完成这些操作后，我们将继续编写代码。

图片图片

编写简单的战舰代码

我们将使用伪代码作为我们真正的 JavaScript 代码的蓝图。首先，让我们解决我们需要的所有变量。再次查看我们的伪代码，看看我们需要哪些变量：

图片

让我们把这些变量放到一个 JavaScript 文件中。创建一个名为“battleship.js”的新文件，并像这样输入你的变量声明：

图片

现在让我们编写游戏逻辑

现在我们已经搞定了变量，让我们深入研究实现游戏的伪代码。我们将其分解为几个部分。首先要做的事情是实现循环：只要船没有沉没，它就需要保持循环。接下来，我们将处理从用户处获取猜测并进行验证——确保它确实是一个介于 0 到 6 之间的数字——然后我们将编写检查船只是否被击中以及船只是否已沉没的逻辑。最后，我们将为用户创建一个小报告，报告沉船所用的猜测次数。

图片图片图片

第一步：设置循环，获取一些输入

现在我们将开始将游戏逻辑转换为实际的 JavaScript 代码。从伪代码到 JavaScript 并没有完美的映射，所以你会看到这里或那里有一些调整。伪代码给了我们一个关于代码需要做什么的好主意，现在我们必须编写 JavaScript 代码来实现具体的操作。

图片

让我们从目前为止的所有代码开始，然后我们将专注于我们正在添加的部分（为了节省一些纸张或者说节省电子，如果你正在阅读电子版本的书）：

图片

提示的工作原理

浏览器提供了一个内置函数，可以用来从用户那里获取输入，它叫做prompt。prompt函数与你已经使用过的alert函数非常相似——prompt会显示一个对话框，其中包含你提供的字符串，与alert类似——但它还为用户提供了一个可以输入响应的地方。这个响应以字符串的形式返回，并作为调用函数的结果。如果用户取消对话框或者没有输入任何内容，则返回null。

图片

检查用户的猜测

如果你看一下伪代码，要检查用户的猜测，我们首先需要确保用户输入了有效的内容。如果是这样，然后我们还要检查猜测是击中还是未击中。我们还需要确保适当地更新guesses和hits变量。让我们开始检查用户输入的有效性，如果输入有效，我们将增加guesses变量。之后我们将编写代码来判断用户是击中还是未击中。

图片图片

让我们更仔细地看一下有效性测试。你知道我们正在检查猜测是否介于零和六之间，但具体是如何进行条件测试的呢？让我们来详细分析一下：

图片

那么，我们击中了吗？

这就是事情变得有趣的地方——用户猜测了船的位置，我们需要编写代码来确定该猜测是否击中了船。更具体地说，我们需要查看猜测是否与船的位置之一匹配。如果匹配，那么我们将增加hits变量。

图片

这是对命中检测代码的第一次尝试；让我们逐步进行：

图片

添加命中检测代码

让我们将前几页的所有内容整合在一起：

图片图片

嘿，你击沉了我的战舰！

图片

我们快要完成了；我们几乎已经完全掌握了这个游戏逻辑。再次查看伪代码，我们现在需要做的是测试是否有三次命中。如果是的话，那么我们已经击沉了一艘战舰。而且，如果我们击沉了一艘战舰，那么我们需要将isSunk设置为 true，并告诉用户他们摧毁了一艘船。在添加代码之前，让我们再次勾勒出代码：

图片

提供一些游戏后分析

在isSunk设置为 true 之后，while 循环将停止循环。没错，我们已经非常熟悉的这个程序将停止执行 while 循环的主体，在你意识到之前游戏就结束了。但是，我们仍然需要向用户提供一些关于他们表现的统计数据。以下是执行此操作的一些代码：

图片图片

现在让我们将这个和击沉船只检测加入到其余的代码中：

图片

这样就完成了逻辑！

好了！我们现在已经完全将伪代码翻译成了实际的 JavaScript 代码。我们甚至发现了一些遗漏在伪代码中的内容，我们也已经考虑到了。在下面你会找到完整的代码。确保你已经将其键入并保存在“battleship.js”中：

图片

let location1 = 3;
let location2 = 4;
let location3 = 5;
let guess;
let hits = 0;
let guesses = 0;
let isSunk = false;

while (isSunk == false) {
    guess = prompt("Ready, aim, fire! (enter a number from 0-6):");
    if (guess < 0 || guess > 6) {
        alert("Please enter a valid cell number!");
    } else {
        guesses = guesses + 1;

        if (guess == location1 || guess == location2 || guess == location3) {
            alert("HIT!");
            hits = hits + 1;
            if (hits == 3) {
                isSunk = true;
                alert("You sank my battleship!");
            }
        } else {
            alert("MISS");
        }
    }
}
let stats = "You took " + guesses + " guesses to sink the battleship, " +
               "which means your shooting accuracy was " + (3/guesses);
alert(stats);

进行一些质量保证。

QA，或质量保证，是测试软件以查找缺陷的过程。所以我们将对这段代码进行一些质量保证。当你准备好时，在浏览器中加载“battleship.html”并开始游戏。尝试一些不同的事情。它是否完美运行？还是你发现了一些问题？如果是的话，请在这里列出它们。你也可以在此页面上看到我们的测试运行。

图片图片图片

布尔运算符允许您编写更复杂的逻辑语句。

你已经看到足够多的条件语句，知道如何测试，比如，温度是否大于 32 度。或者，表示物品是否有库存的变量是否为 true。但有时我们需要进行更多的测试。有时我们不仅需要知道一个值是否大于 32，还需要知道它是否小于 100。或者，一个物品是否有库存，还要打折。或者，只有在星期二且用户是 VIP 会员时，物品才打折。所以，你看，这些条件语句可能会变得复杂。

让我们逐步进行一些操作，以更好地了解它们的工作原理。

假设我们需要测试某个物品是否在库存并且在特价销售。我们可以这样做：

图片

我们可以通过将这两个条件结合在一起来简化此代码。与简单的战舰游戏不同，在那里我们测试了猜测是否 < 0 或 > 6，这里我们想知道的是如果 inStock 为真并且 onSale 也为真。让我们看看如何做到这一点……

图片

我们不必止步于此；我们可以使用多个布尔运算符以各种方式组合条件语句：

图片图片

我们能谈谈你的啰嗦吗……

我们不知道如何提出这个问题，但你在指定条件时有点啰嗦。我们是什么意思呢？例如，就拿这个条件来说：

图片

结果表明，这有点过头了。条件语句的整个要点在于它评估为 true 或 false，但我们的布尔变量 inStock 已经是这些值之一。所以，我们不需要将变量与任何东西进行比较；它可以单独存在。也就是说，我们可以改写成这样：

图片

现在，尽管有些人可能会说我们最初的冗长版本在意图上更清晰，但实际上更常见的是看到更简洁的版本。而且，你会发现少言简写的版本更易于阅读。

完成简单战舰游戏

是的，我们还有一件小事要处理，因为现在你已经将船的位置硬编码了 —— 无论玩游戏多少次，船总是在位置 3、4 和 5。这对于测试来说确实很好，但我们真的需要随机放置船只，这样对用户来说更有趣。

让我们退后一步，考虑在七个单元格的一维网格上正确放置船只的方法。我们需要一个起始位置，可以在网格上放置三个连续的位置。这意味着我们需要一个从零到四的起始位置。

图片

如何分配随机位置

现在，一旦我们有了起始位置（在零到四之间），我们只需使用它和接下来的两个位置来放置船只。

注意

取随机位置以及接下来的两个连续位置。

let location1 = randomLoc;
let location2 = location1 + 1;
let location3 = location2 + 1;

好的，但是如何生成一个随机数呢？这就是我们求助于 JavaScript 及其内置函数的地方。更具体地说，JavaScript 自带了一堆与数学相关的内置函数，包括一些用于生成随机数的函数。现在我们将深入了解内置函数，以及一般的函数稍后会讲到。现在，我们只需利用这些函数来完成我们的工作。

生成随机数的配方

我们将从 Math.random 函数开始。通过调用此函数，我们将得到一个随机的十进制数：

图片

我们需要的是 0 到 4 之间的整数，即 0、1、2、3 或 4，而不是像 0.34 那样的小数。首先，我们可以将由Math.random返回的数字乘以 5，以更接近目标；这是我们的意思...

图片

那更接近了！现在我们只需要截取数字的末尾，以得到一个整数。为此，我们可以使用另一个内置的数学函数，Math.floor：

图片

再回到做一些质量保证的工作

这就是我们需要的一切。让我们把这段代码放在一起（我们已经在下面做过了），用它替换你现有的位置代码。完成后，进行几次测试运行，看看你能多快地击沉敌人。

图片

这是我们的一个测试会话之一。现在游戏变得更加有趣，因为我们为船只设置了随机位置。但我们仍然设法得到了一个相当不错的分数...

图片

恭喜你完成了你的第一个真正的 JavaScript 程序，并简短地谈一下代码重用的事项

你可能已经注意到，我们利用了一些内置函数，如alert、prompt、console.log和Math.random。几乎像魔术一样，这些函数凭借极少的努力就赋予了你弹出对话框、在控制台记录输出和生成随机数的能力。但是，这些内置函数只是已经为你编写好的封装代码，它们的威力在于你可以在需要时调用和重复使用它们。

现在关于函数有很多内容要学习，如何调用它们，可以传递什么样的值等等，我们将在下一章开始深入讨论，那时你将学会创建自己的函数。

但在你到达那里之前，你得复习一下要点，完成一个交叉字谜...哦，还有一个良好的夜间睡眠，让所有知识都能深入脑海。

JavaScript 交

图片

交叉字谜如何帮助你学习 JavaScript？心理上的转折将 JavaScript 深深地烙印在你的大脑中！

图片

ACROSS

1. 这帮助你思考程序如何运行。

7. while 和 if 语句都使用 _________ 测试。

8. 布尔运算符总是得出 true 或 _________。

9. 要从 AND 运算符（&&）获得 true 值，条件的两部分都必须 _________。

10. JavaScript 有许多内置 _________，如 alert 和 prompt。

11. 要随机选择一个位置放置船只，可以使用 Math._________。

DOWN

1. 要从用户那里获取输入，可以使用 _________ 函数。

2. == 是一个 ___________ 运算符，用于测试两个值是否相同。

3. OR（||）和 AND（&&）是 _________ 运算符。

4. 如果你擅长测试程序，你可能想成为一个 _________ 保证专家。

5. 如果不初始化一个变量，其值为 _________。

6. 我们使用一个 ________ 变量来跟踪船是否被击沉。

8. 要从或运算符（||）得到假值，条件的两部分都必须是假的。

JavaScript 跨越解决方案

图像

交叉字谜如何帮助你学习 JavaScript？这种心理上的转折将 JavaScript 深深烙印在你的大脑中！这是我们的解决方案。

图像

posted @ 2025-11-21 09:08  绝不原创的飞龙  阅读(9)  评论(0)    收藏  举报