孩子们的-JavaScript-项目-全-

孩子们的 JavaScript 项目（全）

原文：zh.annas-archive.org/md5/376bd136a8a7f1a58ba5477cd135fa0b

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

从书名可以猜到，这本书是为孩子们设计的，以便他们可以自学 JavaScript 并使用 JavaScript 创建一些项目。

通过以无与伦比的方式抽象核心网络编程，JavaScript 永远地改变了网站和 Web 应用。无聊的静态网站和非交互式网站现在在 JavaScript 的触碰下变得相当酷。使用 JavaScript，你可以快速开发 Web 应用，甚至智能手机应用，而不会降低质量。如果你开始玩 JavaScript，你可以非常高效，几乎不需要在硬件和软件上进行配置。请记住，这不是一本参考书，但你可以从中学到 JavaScript 的每一个基本概念。因此，对于 10 岁及以上的孩子来说，这将是一本发现 JavaScript 世界的完美书籍。

本书涵盖内容

第一章, 在控制台探索 JavaScript，讨论 JavaScript 和 JavaScript 开发环境，包括谷歌开发者工具。在本章中，我们将安装必要的软件，并打印几行简单的代码。

第二章, 使用 JavaScript 解决问题，涵盖了从主要语法到控制台中的一些简单命令的 JavaScript 基础知识。我们将学习变量是如何工作的，以及算术运算符可以实现什么。我们还将运行一些简单的命令来解决控制台中的问题。

第三章, 介绍 HTML 和 CSS，将真正使用 JavaScript，并涵盖 HTML，这使读者能够不仅在控制台，而且在浏览器视图中使用 JavaScript。我们还将解释 CSS 的基础知识，例如 CSS 选择器和 CSS 布局。

第四章, 深入探索，涵盖了 JavaScript 提供的一些更高级的功能。我们讨论了 for 和 while 循环、if 语句和 switch-case。

第五章, 啊哈！驶入战场，教我们如何开发著名的游戏，战舰。在前面章节所学的基础上，小家伙们将学会如何将这些信息付诸实践。

第六章, 探索 jQuery 的优势，全部关于著名的 JavaScript 库 jQuery 及其使用优势。

第七章, 介绍 Canvas，讨论 HTML canvas，我们将学习如何在我们的项目中使用它。

第八章, 构建鼠人！，教我们开发一个著名的游戏，吃豆人，只是这里有一个老鼠，一些猫，还有好多好多要吃的奶酪球！ 😉

第九章，使用面向对象编程整理代码，介绍了面向对象编程（OOP）并讨论了 JavaScript 是一种面向对象的语言。

第十章，可能性，向读者展示了他们通过阅读本书所掌握的技能可以实现的内容。

你需要这本书什么

在整本书中，我们使用 Google Chrome 作为浏览器在控制台运行我们的 JavaScript 代码。我们使用 Atom，一个著名的文本编辑器来编写代码。你可以使用任何现代网络浏览器和文本编辑器，但我强烈建议你使用这些开源软件来完成本书中讨论的任何项目。

本书面向对象

如果你以前从未编写过代码，或者你对网络编程的世界完全陌生，那么这本书就是你的正确选择。这本书适合 10 岁及以上的儿童以及那些对编程世界完全陌生并希望入门的成年人。

惯例

在这本书中，你会发现许多文本样式，用于区分不同类型的信息。以下是一些这些样式的示例及其含义的解释。

文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 处理方式如下所示：“点击 AtomSetup.exe 文件开始安装 Atom。”

代码块设置如下：

document.write("Hello");
document.write("World");
document.write("!");

新术语和重要词汇以粗体显示。你会在屏幕上看到的单词，例如在菜单或对话框中，在文本中如下所示：“点击下一步按钮将你带到下一个屏幕。”

注意

警告或重要注意事项以如下框中的形式出现。

小贴士

小贴士和技巧看起来像这样。

读者反馈

我们读者的反馈总是受欢迎的。请告诉我们你对这本书的看法——你喜欢什么或不喜欢什么。读者的反馈对我们来说很重要，因为它帮助我们开发出你真正能从中获得最大收益的标题。

要向我们发送一般反馈，只需发送电子邮件至 <feedback@packtpub.com>，并在邮件主题中提及本书的标题。

如果你在一个领域有专业知识，并且你对撰写或为书籍做出贡献感兴趣，请参阅我们的作者指南 www.packtpub.com/authors。

客户支持

现在你已经是 Packt 书籍的骄傲所有者，我们有一些东西可以帮助你从你的购买中获得最大收益。

下载示例代码

你可以从你的账户 www.packtpub.com 下载所有你购买的 Packt 出版物的示例代码文件。如果你在其他地方购买了这本书，你可以访问 www.packtpub.com/support 并注册，以便将文件直接通过电子邮件发送给你。

下载本书的颜色图像

我们还为您提供了一个包含本书中使用的截图/图表彩色图像的 PDF 文件。彩色图像将帮助您更好地理解输出的变化。您可以从www.packtpub.com/sites/default/files/downloads/JavaScript_Projects_for_Kids_ColorImages.pdf下载此文件。

勘误

尽管我们已经尽一切努力确保我们内容的准确性，但错误仍然会发生。如果您在我们的某本书中发现错误——可能是文本或代码中的错误——如果您能向我们报告，我们将不胜感激。通过这样做，您可以节省其他读者的挫败感，并帮助我们改进本书的后续版本。如果您发现任何勘误，请通过访问www.packtpub.com/submit-errata，选择您的书籍，点击勘误提交表单链接，并输入您的勘误详情来报告它们。一旦您的勘误得到验证，您的提交将被接受，勘误将被上传到我们的网站或添加到该标题的勘误部分下的现有勘误列表中。

要查看之前提交的勘误表，请访问www.packtpub.com/books/content/support，并在搜索字段中输入书籍名称。所需信息将在勘误部分显示。

盗版

互联网上对版权材料的盗版是一个跨所有媒体的持续问题。在 Packt，我们非常重视我们版权和许可证的保护。如果您在互联网上发现任何形式的我们作品的非法副本，请立即提供位置地址或网站名称，以便我们可以寻求补救措施。

请通过<copyright@packtpub.com>与我们联系，并提供疑似盗版材料的链接。

我们感谢您在保护我们作者和我们为您提供有价值内容的能力方面的帮助。

询问

如果您在这本书的任何方面遇到问题，您可以通过<questions@packtpub.com>联系我们，我们将尽力解决问题。

第一章。在控制台中探索 JavaScript

在我们开始讨论代码行、对象、变量等等之前，我们需要知道什么是 JavaScript。JavaScript 是一种用于向网页添加交互性和构建网络应用程序的编程语言。静态网站如今并不流行，因此我们使用 JavaScript 来使我们的网站交互式。

有些人也称它为脚本语言，因为它是一种易于使用的语言，并且不需要像其他语言那样的编译器。JavaScript 并非作为通用编程语言设计的，它是为了操作网页而设计的。你可以使用 JavaScript 编写桌面应用程序。JavaScript 还可以访问你的机器硬件。你可以尝试使用 软件开发工具包（SDK）如 PhoneGap（用于移动设备）或 Microsoft 应用 SDK（用于桌面）来制作桌面应用程序。JavaScript 代码在网页上被解释，然后由浏览器运行。任何现代网络浏览器，例如 Firefox、Safari、Google Chrome、UC 浏览器、Opera 等，都支持 JavaScript。

注意

编译器 是一种计算机程序，它处理代码并将它们转换为机器语言。使网站 交互式 的意思是为网站添加由用户控制的特性。例如，在线注册表单、在线计算器等等。静态网站具有固定的对象和内容，并且向所有访问者显示相同的信息。

基本上，JavaScript 包含在 HTML 页面中或写入一个具有 .js 扩展名的单独文件中。如果你对 HTML 一无所知，不要担心，你将在第三章 介绍 HTML 和 CSS 中学习它。那么，你可以在哪里使用 JavaScript？

答案很简单，你可以做以下操作：

你可以创建一个活跃的用户界面。
你可以控制网络浏览器。
你可以验证用户输入（如果他们输入错误）。
你可以创建自定义网页，这些网页可以在浏览器中弹出，显示信息或图片。
你可以不使用 通用网关接口（CGI）创建动态页面。CGI 由网络服务器用于处理浏览器的信息。

注意

你应该记住的是 JavaScript 不是由 Sun Microsystems 开发的编程语言 Java。

在整本书中，我们将使用 Google Chrome 作为默认浏览器，Atom 作为文本编辑器。

如果你还没有在计算机上安装这两种软件，则有必要下载并安装它们。

我们将使用 Atom 文本编辑器，因为它是一个跨平台编辑器，具有内置的包管理器，可以进行智能自动完成，并且具有许多其他优点。

安装 Google Chrome

要安装 Google Chrome，请访问 www.google.com/chrome，然后点击 立即下载，如图所示：

然后按以下截图所示的接受和安装按钮：

安装将根据您的网络速度和机器的硬件配置而完成。

注意

如果您不想使用 Google Chrome 作为默认浏览器，请取消选中将 Google Chrome 设置为我的默认浏览器。

安装 Atom

要安装 Atom 文本编辑器，请点击atom.io/链接，并按以下截图所示，点击下载 Windows 安装程序：

将开始下载名为AtomSetup.exe的文件。

点击AtomSetup.exe文件开始安装 Atom。

提示

在安装时确保您赋予它管理员权限以获得更好的性能。

安装完成后，Atom 将自动启动。

如果您使用的是其他平台，请使用其他平台链接：

如果您是 Mac 用户，请转到github.com/atom/atom/releases/latest链接并下载atom-X.X.X-full.nupkg文件，其中X.X.X是 Atom 的版本号。通过双击文件进行安装。
如果您是 Ubuntu 用户，您可以点击github.com/atom/atom/releases/latest链接并下载atom-amd64.deb文件。下载后，在同一文件夹中启动您的终端，该文件夹是您下载文件后放置文件的位置。然后，输入以下代码：
```
sudo dpkg --install atom-amd64.deb
```
您可能需要管理员密码才能安装它。安装完成后，您可以通过在终端中输入Atom并按Enter键来运行 Atom。

Chrome 开发者工具

让我们看看用于 JavaScript 的Chrome 开发者工具，特别是控制台。由于 Google Chrome 已下载并安装到您的机器上，请打开 Google Chrome 浏览器，转到菜单（右上角），将鼠标悬停在更多工具上，然后选择开发者工具，如下所示：

您将看到以下工具：

元素
网络
源
时间线
配置文件
资源
审计
控制台

我们的第一个程序

现在，让我们检查 JavaScript 是否在您的机器上运行。

从工具中选择控制台。如果您找不到控制台，请点击>>符号，如下所示：

一旦您的控制台打开，请输入以下代码并按键盘上的Enter键：

document.write("Hello World");

如果您在以下所示左侧面板上看到输出，则表示您已成功在浏览器上配置了 JavaScript：

您将看到的输出如下：

Hello World

恭喜！

注意

下载示例代码

你可以从你购买 Packt 书籍的账户下载所有示例代码文件。www.packtpub.com。如果你在其他地方购买了这本书，你可以访问 www.packtpub.com/support 并注册，以便直接将文件通过电子邮件发送给你。

如果你看不到文本，请检查你的代码或使用管理员权限安装 Google Chrome。

你也可以点击控制台的齿轮按钮。检查是否未取消选中“禁用 JavaScript”：

你也可以使用这个工具调试你的 JavaScript 代码。

如果你输入了错误的内容；考虑一下你是否忘记了 Hello World 字符串的引号，你将得到以下错误：

为了加快编写代码的速度，你可以学习控制台和 Atom 文本编辑器的快捷键。

这里有一些控制台的快捷键：

Ctrl + L: 清除控制台
Tab: 自动完成常见前缀
右箭头：接受建议
Ctrl + U: 清除控制台提示
上/下: 下一行/上一行
Enter: 执行命令

这里有一些 Atom 文本编辑器的快捷键：

Ctrl + B: 浏览打开的文件列表
Ctrl +Alt + R: 重新加载 Atom
Ctrl +Shift + L: 更改语法高亮
Alt +Shift + S: 显示可用的代码片段
Ctrl +Shift + M: 预览 Markdown
Ctrl +Alt + I: 切换开发者工具
Ctrl + N: 新建文件
Ctrl +Shift + N: 新建窗口
Ctrl + P: 打开文件（输入名称以执行搜索）
Ctrl + O: 打开文件
Ctrl +Shift + O: 打开文件夹
Ctrl + S: 保存
Ctrl +Shift + S: 另存为
Ctrl + W: 关闭标签页
Ctrl +Shift + W: 关闭窗口
Ctrl + G: 跳转到行
Ctrl + L: 选择行
Ctrl +Shift + D: 复制行
Ctrl +Shift + K: 删除行
Ctrl + Up/Down: 上移/下移行
Ctrl + /: 切换注释行
Ctrl + Enter: 在下方新建行
Ctrl + [/]: 缩进/取消缩进所选行
Ctrl + J: 合并行
Ctrl + Alt + .: 完成括号
Ctrl + M: 跳转到匹配的括号
Ctrl + Alt + M: 选择匹配括号内的代码
Ctrl + Alt + /: 折叠/展开代码
Ctrl + Alt + F: 折叠所选代码
Ctrl + Alt + [/]: 折叠/展开所有代码
Ctrl + F: 在当前文件中查找
Ctrl + Shift + F: 在项目中查找
F3: 查找下一个
Shift + F3: 查找上一个
Ctrl + Enter: 替换所有
Ctrl + Alt + /: 在搜索中使用正则表达式
Ctrl + Shift + =/-: 增加或减少文本大小
Ctrl + 0 (零): 重置文本大小
F11: 切换全屏

为什么我们使用 Chrome 开发者工具？

以下介绍了使用 Chrome 开发者工具的要点：

容易看到错误
使用行号轻松编辑/调试代码
实时输出（无需刷新页面）

为什么我们使用 Atom 作为文本编辑器？

以下介绍了使用 Atom 作为文本编辑器的要点：

零妥协的 hackability 和 usability 组合
一个开源文本编辑器
每个 Atom 窗口本质上是一个本地渲染的网页

练习

为了增强你对 JavaScript 的了解，编写一个程序来打印你的名字。

摘要

在本章中，我们看到了如何下载 Google Chrome 和 Atom，以及如何安装它们。

你学习了如何使用 Chrome 开发者工具（控制台）编写你的第一个代码。你还学习了 Chrome 开发者工具和 Atom 文本编辑器的一些快捷键。

你还学习了什么是 JavaScript，为什么学习 JavaScript 很重要，以及 JavaScript 与其他语言的不同之处。

我们现在可以进入 JavaScript 的世界了。

你的旅程从第二章 使用 JavaScript 解决问题 开始。

第二章。使用 JavaScript 解决问题

你在前一章中学习了如何使用 JavaScript 在控制台打印某些内容。现在，让我们看看 JavaScript 语法、变量、算术运算符和注释的基础知识。

在计算机世界中，只有数据。你可以读取、修改和创建新的数据；然而，任何不是数据的东西根本不存在。在 JavaScript 中，我们需要处理数据来开发网站。

要了解 JavaScript 的基本语法，首先你需要知道 JavaScript 是 区分大小写的。在 JavaScript 中你不能互换大小写字母。因此，在处理 JavaScript 语法时，你需要记住，编写代码不是唯一重要的任务，你还必须检查语法是否正确。

让我给你举一个例子。在前一章中，你已经成功地使用 document.write(); 语法在你的浏览器上打印了 Hello World。

如果你写了 Document.write("Hello World"); 会发生什么？是的！它将无法成功运行。你会得到一个错误信息。这种错误被称为 未捕获的语法错误。

JavaScript 语句通常在一行上编写。你可以用分号结束你的语句，也可以不结束。结束语句以分号不是强制性的。然而，在每条语句后添加分号是一个好习惯。

让我们考虑以下示例：

document.write("Hello");
document.write("World");
document.write("!");

它的输出将如下所示：

注意

JavaScript 关键字（如 for、while、if、switch、case 等）总是小写。内置对象（如 Date、Math、Number 等）以大写字母开头。

变量

我们已经知道计算机世界只有数据。

有不同类型的数据（我们称之为 数据类型），如下所示：

你的名字是一种数据
你的年龄是数据
你的成绩也是数据

然而，它们都是不同的。它们之间有什么区别？你的名字只包含一组字符，或者有些人也称之为 字符串。你的年龄是整数类型数据。你的成绩是 浮点数 类型数据。JavaScript 的奇妙之处在于，你不需要在编写变量的名字之前指定数据类型。

注意

JavaScript 允许处理三种数据类型。字符串（例如，"This is an example of string"），数字（例如，2015，3.1415 等），和布尔值（例如，true 或 false）。

我们是否讨论过变量？好吧，你已经知道了数据类型。你需要 某种东西 来存储你的数据。这个东西被称为变量。在 JavaScript 中，我们在变量名前使用 var。记住 var 是小写字母开头的。

让我们考虑以下示例：

var x;
var y;
var sum;
var name;

假设我们有两个苹果和六个橙子。为了将它们存储在变量中，我们将使用以下：

var apples = 14;
var oranges = 6;

以下示例不同。你能说出为什么吗？

var Apples = 14;
var apples = 14;
var APPLES = 14;
var appleS = 14;

是的，JavaScript 是区分大小写的。这里的所有变量都不同，尽管变量的值是相同的。

现在，让我们进行一些编码。之前，在控制台中，你作为作业打印了你的名字。我希望你没有遇到任何麻烦。我们现在用变量来打印你的名字，怎么样？假设你的名字是Sherlock Holmes。这是什么类型的数据？

你是对的，它是字符串类型。通常对于字符串类型的数据，我们将其放在两个引号之间。

让我们考虑以下示例：

var name = "Sherlock Holmes";
var occupation = "Detective"

要使用控制台打印它们，你需要输入每个语句并按Enter键。看看以下图片：

注意

不要在控制台中复制和粘贴代码。你可能会得到语法错误。

当你按Enter键后，你会看到多出一行，显示undefined。现在不用担心这个问题。这只是返回了一个控制台日志。

你将Sherlock Holmes字符串存储在name变量中，将Detective存储在occupation中。每次你访问name或occupation时，你都可以访问指定的字符串。

假设你想在屏幕上打印福尔摩斯。只需输入以下内容：

document.write(name);

输入后，按Enter键。你会在屏幕上看到福尔摩斯被打印出来，如下所示：

输入document.write(occupation);并按Enter键，如下所示截图所示：

你可能想知道为什么福尔摩斯和侦探之间没有空格。因为，在控制台中，历史记录不会自动从网页左侧删除，在你为第二个输出（occupation）按Enter键后，字符串会自动放置在之前的字符串之后。这总是会发生的，除非你使用Ctrl + L键盘快捷键清除控制台，并通过按F5键重新加载网页。

注意

当你重新加载网页时，你存储的变量也将从内存中删除。别担心，你将在下一章学习如何使用文件存储变量。

如果你想要连接两个（或多个）变量，你可以在两个变量之间添加一个加号（+），如下所示：

document.write(name+occupation);
document.write(occupation+name);

你能告诉我这些命令的输出结果吗？

是的，你说得对。输出将如下所示：

福尔摩斯侦探

DetectiveSherlock Holmes

注意

你的输出可能在网页上是一行。如果你想分行，请添加一个<br> HTML 标签。添加这个标签最简单的方法是输入document.write("<br>");并按Enter键。你的下一个输出将在新的一行。

如果你想在两个字符串（例如，一个空格）之间添加任何字符串（除了变量），请输入以下内容：

document.write(name+" "+occupation);

输出将如下所示：

福尔摩斯侦探

当你输入以下代码并按Enter键时会发生什么？

document.write("My name is "+name+" and I am a "+occupation);

是的！你完全正确。输出将如下所示：

我的名字是福尔摩斯，我是一个侦探

现在，在控制台上添加另一个变量。假设夏洛克·福尔摩斯是 24 岁。你还记得年龄的数据类型是什么吗？

是的，它是一个整数类型的数字。因此，输入以下代码并按Enter键：

var age = 24;

你现在有以下三个变量：

姓名
职业
年龄

让我们在网页上打印以下输出：

我的名字是夏洛克·福尔摩斯，我 24 岁，我是一个侦探

我们的代码在控制台上会是什么样子？

代码如下：

document.write("My name is "+name+", I\'m "+age+" years old and I am a "+occupation);

输出结果如下：

小贴士

打印引号/反引号

如果你想使用document.write();语法打印莎士比亚说，“生存还是毁灭，这是一个值得考虑的问题！”，你可能需要输入以下代码：

document.write("Shakespeare said, "To be, or not to be: that is the question!"");

然而，这将导致一个名为SyntaxError的错误。要消除这个错误，你需要在两个反引号之前使用一个反斜杠（\）。正确的代码如下：

document.write("Shakespeare said, \"To be, or not to be: that is the question!\"");

输出结果将如下所示：

莎士比亚说，“生存还是毁灭，这是一个值得考虑的问题！”

对于单引号（'）也适用同样的规则。

这里有一个快速练习给你：

假设汤姆有一只猫（露西）。这只猫，露西，已经 2.4 岁了。将名字、猫的名字和它的年龄存储在三个不同的变量中，并使用控制台打印以下输出：

汤姆的猫露西 2.4 岁了。
假设你购买了4磅苹果。每磅苹果的价格是$1.2。将苹果的价格和数量存储在两个不同的变量中，并使用控制台打印以下输出：

我买了 4 磅苹果。我不得不为每磅苹果支付$1.2。

注释

假设你已经编写了很多代码，进行了一些逻辑操作，并在 JavaScript 中使用了多个变量，如果你在代码中遇到错误，希望我帮助你检查。当你把代码发给我时，除非我清楚了解 JavaScript，或者你在重要行上进行了注释，否则我不知道你输入了什么。

注释基本上是一行文本或代码，在浏览器运行时会被忽略。你可以将注释比作便利贴或提醒。

让我们考虑以下示例：

Var name = "Sherlock Holmes"; // This is a string
Var occupation = "Detective"; // This variable stores information
Var age = 14; // This is an integer type of data.

如何制作多行注释？你可以按照以下方式提及注释：

/*
  This is a multiline comment.
  The browser will ignore this.
  You can type any important information on your comment.
*/

你的多行注释应该位于/*和*/之间，如下所示：

算术运算符

在 JavaScript 中，就像其他编程语言一样，我们可以进行一些算术运算。在你的学校，你可能已经学会了如何将两个数字相加，从一个数字中减去另一个数字，将两个数字相乘，以及用另一个数字除以一个数字。你可以在 JavaScript 的帮助下，用几行代码完成所有这些操作。

在 JavaScript 中，我们使用以下算术符号进行操作：

运算符	描述
+	用于加法
-	用于减法
*	用于乘法
/	用于除法
%	用于找到余数（称为模运算符）

加法

假设你有两个变量 x 和 y，分别具有 3 和 4 的值。我们在控制台上应该做什么来存储这些变量的值？

是的，我们这样做：

var x = 3; // 3 is stored on variable x
var y = 4; // 4 is stored on variable y

然后，按 Enter。

取另一个变量来保存 x 和 y 的和，如下所示：

var z = x+y; // This syntax stores the sum of x and y on z

你能告诉我打印 z 时会发生什么吗？

document.write(z);

是的，你是对的，这将打印 7，如下截图所示：

减法

要从一个数减去另一个数，需要在它们之间放置一个减号（-）。

让我们考虑以下示例：

var x = 9; // 9 is assigned to the variable x.
var y = 3; // 3 is assigned to the variable y.
var z = x - y ; // This syntax subtracts y from x and stores on z.
document.write(z); // Prints the value of z.

以下截图显示了此代码的输出 6：

乘法

要乘以两个整数或浮点类型数据的数字或变量，只需在变量或数字之间放置一个星号（*）即可。

让我们看看以下示例：

var x = 6; // 6 is assigned to the variable x.
var y = 2; // 2 is assigned to the variable y.
var z = x * y; // For two numbers you can type z = 6 * 2 ;
document.write(z); // Prints the value of z

以下截图显示了此代码的输出 12：

除法

要用另一个数除以一个数，需要在两个数之间放置一个正斜杠（/）。

让我们看看以下示例：

var x = 14; // assigns 14 on variable x.
var y = 2; // assigns 2 on variable y. 
var z = x / y; // divides x with y and stores the value on z. 
document.write(z); // prints the value of z.

以下截图显示了此代码的输出 7：

模数

如果你想找到一个数与另一个数的模数，需要在两个数之间放置一个百分号（%）。

让我们考虑以下示例：

var x = 34; // assigns 34 on the variable x. 
var y = 3; // assigns 3 on the variable y. 
var z = x % y ; // divides x with y and returns the reminder and stores on the variable z
document.write(z);

以下截图显示了此代码的输出 1：

提示

模数（%）运算符的作用是什么？

好吧，从你的数学课中，你已经学会了如何用另一个数除以一个数。比如说，你用 10 除以 2。结果将是 5，这是一个整数类型的数字。然而，如果你用 10 除以 3 会发生什么？答案将不是一个整数。值是 3.333333333333。你也可以说答案是 3，余数是 1。考虑以下：

10 = 9 + 1;

即，(9+1)/3

= 9/3+1/3

= 3 + 1/3;

因此，余数是 1。模数的作用是找出余数并返回它。因此，10%3 = 1。

现在，让我们将我们迄今为止学到的所有算术运算符总结在一个单独的代码中。

你能告诉我以下行的输出吗？

var x = 5 ;
var y = 4 ;
var sum = x + y ;
var sub = x - y ;
var mul = x * y ;
var div = x / y ;
var mod = x % y ;
document.write("The summation of x and y is "+ sum + "<br>") ;
document.write("The subtraction of x and y is " + sub + "<br>") ;
document.write("The multiplication of x and y is " + mul + "<br>");
document.write("The division of x and y is " + div + "<br>") ;
document.write("The modulus of x and y is " + mod + "<br>") ;

你将得到以下输出：

x 和 y 的和是 9

x 和 y 的差是 1

x 和 y 的乘法是 20

x 和 y 的除法是 1.25

x 和 y 的模数是 1

以下截图显示了此输出：

我猜你已经答对了。现在，让我们在以下内容中解释它们：

我们将 5 和 4 分别赋值给 x 和 y
我们将 x 和 y 的和赋值给 sum 变量，x 和 y 的差赋值给 sub 变量，x 和 y 的乘积赋值给 mul 变量，x 和 y 的除法赋值给 div 变量，x 和 y 的模数赋值给 mod 变量
然后，我们使用document.write();语法打印它们
我们使用了<br>HTML 标签来分隔每行的输出

考虑以下示例：

约翰有 56 支笔。他想将它们排列在七行中。每一行将有相同数量的笔。编写一个代码，打印每行笔的数量。

（提示：为笔的数量和行数取两个变量，将笔的数量除以行数，并将值存储在一个新变量中。）

样本输出如下：

约翰必须将 XX 支笔放在每一行上。// XX 是笔的数量

运算符	描述
==	等于
!=	不等于
>	大于
<	小于
=>	等于或大于
<=	小于或等于

运算符	描述
&&	这表示与运算符。要检查两个或多个语句是否为真，我们使用这个。
\|\|	这表示或运算符。要检查任何语句是否为真，我们使用这个。
~	这表示非运算符。
^	这表示异或运算符。
>>	这表示右移运算符。
<<	这表示左移运算符。

摘要

在本章中，您学习了 JavaScript 的语法。我们讨论了 JavaScript 变量以及如何给变量赋值。您学习了如何注释代码。现在您知道为什么注释很重要。您最终学习了一个重要的话题：运算符和操作。没有使用运算符和逻辑函数，JavaScript 现在不会如此丰富。因此，了解逻辑操作是掌握 JavaScript 知识的关键。

我建议您在家练习本章中的所有代码。您只需在控制台输入它们，避免复制粘贴代码。这将妨碍您的学习。作为一个程序员，必须具备良好的打字速度，复制粘贴代码不会提高这项技能。您可能会在打字代码时遇到问题；然而，您会学会的。

您可以使用 JavaScript 解决任何算术问题。您还可以在控制台检查您的逻辑是否正确或错误。如果您能这样做，我们就可以继续到下一章，第三章，介绍 HTML 和 CSS，在那里您将学习 HTML、CSS 等内容。

第三章。介绍 HTML 和 CSS

在上一章中，你已经学习了 JavaScript 语法、算术运算符和注释。我们使用控制台来完成这些目的。现在，你想要学习一些有趣的东西，这将为你成为优秀的 JavaScript 程序员铺平道路？在这一章中，我们将研究超文本标记语言（HTML）语法、层叠样式表（CSS）语法，以及如何在 HTML 页面中使用 JavaScript。

HTML 是网页的源代码。你加载到网络浏览器上的所有网页都是用 HTML 构建的。访问任何网站（例如，www.google.com），然后在键盘上按Ctrl + U（在 Mac 上，点击command + U），你将获得网页的源代码。这在所有现代网络浏览器上都可以工作，例如 Firefox、Google Chrome、UC 等等。

你将看到的全部代码都是 HTML。你也可能找到几行 JavaScript。因此，为了了解网页的结构（页面背后的代码），你需要了解 HTML。这是网络上最容易的语言之一。

HTML

HTML 是一种标记语言。这意味着什么？嗯，标记语言使用特定的代码来处理和呈现文本，用于格式化、样式和布局设计。有许多标记语言（例如，商业叙事标记语言（BNML），ColdFusion 标记语言（CFML），Opera 二进制标记语言（OBML），系统生物学标记语言（SBML），虚拟人类标记语言（VHML）等等）；然而，在现代网络中，我们使用 HTML。HTML 基于标准通用标记语言（SGML）。SGML 基本上用于设计文档。

注意

有许多 HTML 版本。HTML 5 是最新版本。在这本书中，我们将使用 HTML 的最新版本。

在你开始学习 HTML 之前，让我请你想想你最喜欢的网站。网站包含什么？几个网页？你可能看到一些文本、几张图片、一个或两个文本字段、按钮，以及每个网页上的更多元素。这些元素中的每一个都是由 HTML 格式化的。

让我向你介绍一个网页。在你的网络浏览器中，访问www.google.com。你将看到一个如下所示的页面：

你在浏览器顶部看到的第一件事是网页的标题。让我们观察我们刚刚加载的页面：

这里，标记的框，1，是我们加载的网页的标题。
第二个框，2，表示一些链接或文本。
页面中间的单词Google是一张图片。
第三个框，3，由两个按钮组成。
你能告诉我页面右上角的登录是什么吗？是的，它是一个按钮。

让我们演示 HTML 的基本结构。术语标签将频繁用于演示结构。

HTML 标签不过是在小于号 (<) 和大于号 (>) 之间的一些预定义单词。因此，标签的结构是 <WORD>，其中 WORD 是网络浏览器能识别的预定义文本。这种类型的标签被称为开放标签。还有一种类型的标签，称为闭合标签。闭合标签的结构类似于 </WORD>。你只需在小于号后加上一个正斜杠即可。

在本节之后，你将能够使用 HTML 创建自己的网页，其中包含一些文本。HTML 页面的结构类似于以下图像。这个图像有八个标签。让我们介绍所有这些标签及其活动，如下所示：

1：<html> 标签是一个开放标签，并在第 15 行通过 </html> 标签关闭。
- 这些标签告诉你的网络浏览器，这两个标签之间的所有文本和脚本都是 HTML 文档。
2：这是 <head> 标签，是一个开放标签，并在第 7 行通过 </head> 标签关闭。
- 这些标签包含网页的标题、脚本、样式和元数据。
3：这是 <title> 标签，并在第 4 行通过 </title> 标签关闭。
- 这个标签包含网页的标题。之前的图像标题是 Google。要在网络浏览器上看到这个标题，你需要输入以下内容：
```
<title> Google </title>
```
4：这是 <title> 标签的闭合标签。
5：这是 <head> 标签的闭合标签。
6：这是 <body> 标签，并在第 13 行通过 </body> 标签关闭。

你在网页上看到的一切都是在这两个标签之间编写的。每个元素、图片、链接等等都是在这里格式化的。要在浏览器上看到“这是一个网页。”，你需要输入以下内容：
```
<body>
This is a web page.
</body>
```
7：</body> 标签在这里关闭。
8：</html> 标签在这里关闭。

您的第一个网页

你刚刚学习了 HTML 页面的八个基本标签。你现在可以创建自己的网页了。怎么做到的？为什么不和我一起试试？

打开你的文本编辑器（你已经在第 1 章探索控制台中的 JavaScript 中安装了 Atom）。
按 Ctrl + N，这将打开一个新文件，如下图所示：

在一个空白页面上输入以下 HTML 代码：

<html>
  <head>
    <title>
      My Webpage!
    </title>
  </head>
  <body>
    This is my webpage :)
  </body>
</html>

然后，按 Ctrl + Shift + S，这将提示你将代码保存在电脑上的某个位置：
在 文件名 字段中输入一个合适的名称。我想将我的 HTML 文件命名为 webpage，因此我输入了 webpage.html。你可能想知道为什么我添加了扩展名（.html）。

注意

由于这是一个 HTML 文档，你需要在给网页命名的名称后添加 .html 或 .htm。.htm 扩展名是 .html 的旧形式。它被限制在三个字符内保持文件扩展名，因此人们使用 .htm 而不是 .html。你也可以使用 .htm。
点击保存按钮。这将在你电脑上创建一个 HTML 文档。前往你刚刚保存 HTML 文件的目录。

注意

记住，你可以给你的网页起任何名字。然而，这个名称在浏览器中是不可见的。它不是你网页的标题。一个好的做法是在网页名称中不要保留空白空间。例如，你想要将你的 HTML 文件命名为This is my first webpage.html。你的电脑将没有问题在互联网浏览器上显示结果；然而，当你的网站在服务器上时，这个名称可能会遇到问题。因此，我建议你在需要添加空格的地方使用下划线（_），例如This_is_my_first_webpage.html。
你将找到一个与以下图像类似的文件：
现在，双击文件。你将在互联网浏览器上看到你的第一个网页！！你的第一个网页

你在<title>和</title>标签之间输入了My Webpage!，这就是为什么你的浏览器在第一个选择框中显示了它，1。你在<body>和</body>标签之间输入了This is my webpage :)。因此，你可以在第二个选择框中看到浏览器上的文本，2。

恭喜！你创建了你的第一个网页！

注意

你可以通过右键点击文件并选择用 Atom 打开来编辑webpage.html文件中的代码和其他文本。在用浏览器重新打开文件之前，你必须保存（Ctrl + S）你的代码和文本。

说明	语法示例	浏览器上的结果
粗体文本	`<b> This is bold </b>`	This is bold
斜体文本	`<i> This is italic </i>`	This is italic
下划线文本	`<u> Underline Text </u>`
删除文本	`<del> Delete me </del>`
下标文本	`CO<sub>2</sub>`	CO2
上标	`3x10<sup>8</sup>`	3x108
最大标题	`<h1> Hi Kids! </h1>`
最小标题	`<h6> Hi Kids </h6>`
段落文本	`<p>This is a paragraph </p>`	This is a paragraph
换行标签	`This <br>is <br>a break;`	This is a break;

HTML 文本着色

要着色 HTML 文本，我们可以输入以下内容：

<font color = "Green"> I am green </font>

你可以在两个反引号（"）之间输入任何标准颜色名称。你也可以使用十六进制颜色代码，如下所示：

<font color = "#32CD32"> I am green </font>

在这里，32CD32 是绿色的十六进制代码。看以下图片。左侧是代码，其中我们使用了颜色名称和十六进制代码。在右侧，我们得到了浏览器输出的结果：

注意

十六进制颜色代码由六个数字组成（它是一个十六进制数）。它以井号或哈希符号（#）开头，我们在其后放置六个数字的十六进制数。十六进制数代表红色、蓝色和绿色的数量。每两个数字代表 00 到 FF（十六进制数）。在示例中，我们使用了 #32CD32 来表示绿色。32、CD 和 32 分别是红色、蓝色和绿色的数量；分别以十六进制表示。

如果你不知道什么是十六进制数，记住我们使用十进制数，其中使用 10 个数字（0, 1, 2, 3, 4, 5, 6, 7, 8, 和 9）。然而，在十六进制数中，我们使用 16 个数字（0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, 和 F）。

我建议你使用这个网站 (html-color-codes.info/) 来获取你喜欢的颜色的十六进制代码，而无需考虑十六进制代码。

链接 HTML 文本

要超链接文本，我们使用以下形式的锚点标签：

<a href = "http://www.google.com"> Go to Google </a>

这段代码的输出将是一个链接。如果你点击这个链接，它将带你到我们用引号括起来的 URL（这里，www.google.com）。

如果你想在浏览器的新标签页中打开链接，你需要添加如下所示的 target：

<a href = "http://google.com" target = "_blank" > Go to Google </a>

在这里，target = "_blank" 是一个属性，告诉浏览器在新标签页中打开链接。还有一些其他属性。你可以在家里尝试它们，并告诉我们你在浏览器上看到的内容。

其他属性包括 _parent、_self 和 _top。以下图片中的代码包含 _blank 属性。它将在新标签页中打开 google.com。我建议你找出其他属性的作用：

插入图片

在 HTML 文档中插入图片非常简单。你只需要找到图片文件的扩展名。我们用来插入图片的标签如下所示：

<img src = "Image_name.extension">

src 属性是图片的来源。如果你的图片放置在 HTML 文件的同一目录下，你不需要写出整个文件源。在这本书中，我们将保持我们的图片文件与我们的 HTML 文件在同一目录下。

假设我有一个与保存 HTML 文档相同的文件夹中的图片。图片的名称是 physics，其扩展名为 .png。现在，为了在 HTML 文档中添加这个图片，我需要添加以下代码：

<img src= "physics.png">

注意

在 HTML 文档中，我们使用三种类型的图片。可移植网络图形（PNG），图形交换格式（GIF）和联合照片专家组（JPG 或 JPEG）。要找到你图片的扩展名，右键点击你的图片，转到属性，然后点击详细信息标签，向下滚动直到找到名称字段。你将找到带有扩展名的图片名称。根据你的操作系统，此过程可能有所不同。

如果你想要设置图片的高度和宽度，你需要使用两个属性，如下所示：

< img src = "physics.png" width="100" height="40">

在这里，100 和 40 是图片的像素。在 HTML 的早期版本中，它被定义为像素或百分比。

注意

像素是图像的最小单位。如果你想在不同屏幕尺寸上看到相同比例的图片，使用百分比（%）会更好，否则你可以使用像素（px）单位。

输出将类似于以下内容：

有更多的 HTML 标签；然而，我们已经涵盖了构建网页时使用的标签的大部分。你能想象以下代码的输出吗？

<html>
  <head>
    <title>
      Example
    </title>
  </head>
  <body>
    <h1> This is a headline </h1>
    <h2> This is a headline </h2>
    <h3> This is a headline </h3>
    <h4> This is a headline </h4>
    <h5> This is a headline </h5>
    <h6> This is a headline </h6>
    <b>This is a bold text</b>. But <i>This is an italic text</i>. We can <u> underline</u> our text. <a href = "http://www.google.com">Go to Google </a> <br>
    <font color = "#AA2FF">This is colorful text</font>
    <br>
    <img src="img/math.png">
  </body>
</html>

输出将类似于以下图片：

CSS

如果你想让你的网页变得美观，你必须了解 CSS。CSS 是一种语言，它允许你描述你的网页，为文本着色，更改文本的字体，并修改网页布局。

CSS 语法有两部分：

选择器
装饰器

在学习 CSS 之前，你需要用 HTML 标签来介绍自己：

<style>

</style>

这个标签应该位于 <head></head> 标签之间。因此，代码的结构将如下所示：

<html>
  <head>
    <title>
    </title>
    <style>
      // your codes will be typed here
    </style>
  </head>
  <body>
  </body>
</html>

CSS 代码将写入 <style></style> 标签之间。

要格式化你的文本，你需要记住你使用的文本标签。假设你在 HTML 文档的主体中有一个 <h1></h1> 标签中的文本，如下所示：

<h1> This is an example of HTML text. </h1>

要应用 CSS，你需要在 <style> </style> 标签之间输入以下内容：

<html>
  <head>
    <title>
    </title>
    <style>
      h1 {
      color:green;
      text-decoration: underline;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>This is an example of HTML text </h1>
  </body>
</html>

代码的输出将如下所示：

仔细查看代码。我们为 <h1></h1> 标签中的文本使用了以下 CSS：

      h1 {
      color:green;
      text-decoration: underline;
      text-align: center;
      }

在这里，我们使用了一些 CSS 语法（color，text-decoration 等）。CSS 有许多语法，也称为属性（每个属性可能包含多个值）。

HTML 页面上的 JavaScript

你已经学会了如何在控制台使用 JavaScript 打印内容。我们何不在 HTML 页面上做这件事呢？在这样做之前，让我们先介绍一个 HTML 标签，<script></script>。我们的 JavaScript 代码将位于这些标签之间。

由于存在许多脚本语言，我们需要在这些标签之间定义我们使用的是哪种语言。因此，我们输入以下内容：

<script type = "text/javascript">
  // Our JavaScript Codes will be here. 
</script>

让我们来看一个例子。在上一章中，你学习了如何使用 JavaScript 在控制台中进行基本操作。现在，我们将在一个 HTML 页面的<script></script>标签之间执行一些操作。仔细看看以下代码：

<html>
  <head>
    <title>
      JavaScript Example
    </title>
  </head>
  <body>
    <script type="text/javascript">
      var x = 34;
      var y = 93;
      var sum = x+y;
      document.write("The sum of "+x+" and "+y+" is "+sum);
    </script>
  </body>
</html>

代码的输出将如下所示：

我希望你能自己猜出代码的输出。

概述

在本章中，你学习了 HTML、CSS 及其语法和用法。我们还介绍了如何在 HTML 文档中实现 JavaScript。现在，你能够使用 JavaScript 构建自己的网页，并使其变得精彩。我建议你不要跳过本章的任何部分，以便更好地理解下一章，第四章, 深入一点。

第四章. 深入探索

在我们迄今为止学习的多数 JavaScript 程序中，代码的执行顺序与它们在程序中出现的顺序相同。每行代码只执行一次。因此，代码中不包含测试条件是否为真或假的测试，或者我们没有执行任何逻辑语句。

在本章中，你将学习一些逻辑编程。你将了解以下主题：

循环
If 语句
Switch case

你已经知道如何在 HTML 文档中嵌入 JavaScript 代码。在开始本章之前，你将学习一些 HTML 标签和 JavaScript 方法。这些方法和标签将在整本书中使用。

注意

在面向对象编程中，我们不会直接对对象外部的数据进行任何操作；我们通过传递一个或多个参数来请求对象执行操作。这个任务被称为对象的方法。

JavaScript 方法

在前面的章节中，你学习了如何使用document.write()打印一些内容。现在，你将学习更多。

我们将检查控制台和 HTML 文档上的方法，如下所示：

要使用 JavaScript 显示一个警告或弹窗，我们使用以下方法：
```
alert("Hello World");
```
在控制台输入以下内容并按Enter键，你将看到一个显示Hello World的弹窗：

你可以在 HTML 文档上编写代码以显示类似于以下弹窗：
```
<html>
  <head>
    <title>Alert</title>
  </head>
  <body>
    <script type="text/javascript">
      alert("Hello World");

    </script>
  </body>
</html>
```
输出将如下所示：
如果你想要从用户那里获取信息，你需要使用提示框来完成这个操作。以下是一个例子：
- 你想要获取用户名并将其打印在主网页上。
- 你可以使用window.prompt()方法来完成这个操作。
- window.prompt()的结构类似于以下内容：
```
window.prompt("What is your name?"); // You can type anything between the inverted commas.
```
- 现在，你需要将信息存储在一个变量中。你已经从前面的章节中知道了如何做。输入以下内容并按Enter键：
```
var name = window.prompt("what is your name?");
```
- 在控制台运行此代码后，你将在文本框中输入一些信息。输入你的信息后，你需要按下确定按钮。现在，你的信息已经存储在name变量中：
- 如果你想在网页上打印变量，你可以使用document.write();方法，如下所示：
```
document.write("Hello "+name+"!");
```
- 这些步骤的输出可以在以下屏幕截图中看到：
- HTML 文档上的代码将如下所示：
```
<html>
  <head>
    <title>Prompt</title>
  </head>
  <body>
    <script type="text/javascript">
      var name = window.prompt("What is your name?");
      document.write("Hello "+name+"!"); 
    </script>
  </body>
</html>
```

HTML 按钮和表单

在上一章中，你学习了几个 HTML 标签。现在，我们将研究一些会使学习 HTML 更有趣的标签。

按钮

如果你想在你的 HTML 网页上添加按钮，你可以使用<button></button>标签。标签的结构如下：

<button type="button">Click Here </button>

如果你想让你的按钮执行某些操作，例如打开一个 URL；你可以考虑以下代码：

<a href="http://google.com/"><button type="button">Click Me </button> </a>

代码的输出将如下所示：

表单

在 HTML 中，我们使用表单来表示包含交互控件以提交信息到 Web 服务器的文档部分。HTML 表单的基本结构如下所示：

<form>
  User ID: <input type = "text"><br>
  Password: <input type ="password"><br>
</form>

代码的输出将如下所示：

现在让我们深入一点！

If 语句

假设约翰有 23 个苹果，汤姆有 45 个苹果。我们想使用 JavaScript 编程来检查谁有更多的苹果。我们需要让浏览器理解if 语句。

注意

If 语句比较两个变量。

要检查我们的条件，我们需要声明包含苹果数量的两个变量，如下所示：

var john = 23;
var tom = 45;

要检查哪个数字更大，我们可以应用如下的 if 语句：

if(john > tom)
{
  alert("John has more apples than tom");
}

假设我们不知道哪个变量更大。然后，我们需要检查两个变量。因此，我们需要将以下代码包含到我们的程序中：

if(tom > john )
{
  alert("Tom has more apples than John");
}

HTML 页面中的整个代码如下所示：

<html>
  <head>
    <title>
      If statement
    </title>
  </head>
  <body>
    <script type="text/javascript">
      var john = 23;
      var tom = 45;
      if(john > tom){
        alert("John has more apples than Tom");
      }
    if(tom> john ){
      alert("Tom has more apples than John");
    }
    </script>
  </body>
</html>

输出将如下所示：

在前面的章节中，你学习了条件运算符。在 if 语句中，你可以使用所有这些。以下是一些带有注释的示例：

If(tom => john){
//This will check if the number of apples are equal or greater. 
}
If(tom <= john)
{
//This will check if the number of apples are equal or less. 
}
If(tom == john)
{
//This will check if the number of apples are equal. 
}

要检查多个条件，你需要使用 OR（||）或 AND（&&）。

考虑以下示例：

If(john == 23 || john => tom)
{
/* This will check if John has 23 apples or the number of John's apple is equal to or greater than Tom's. This condition will be full filled if any of these two conditions are true. 
*/
}
If(tom == 23 && john <= tom)
{
/* This will check if Tom has 23 apples or the number of john's apple is less than Tom's or equal. This condition will be full filled if both of these two conditions are true. 
*/
}

Switch-case

如果你有多于三个条件，使用switch-case语句是一个好的做法。switch-case 的基本结构如下所示：

switch (expression) {
  case expression1:
    break;
  case expression2:
    break;
  case expression3:
    break;
//-------------------------------
//-------------------------------
//  More case
//-------------------------------
//  -------------------------------
  default:    
}

每个case都有一个break。然而，default不需要break。

考虑到汤姆有 35 支笔。他的朋友约翰、辛迪、劳拉和特里分别有 25、35、15 和 18 支笔。现在，约翰想检查谁有 35 支笔。我们需要比较汤姆的笔数和每个人的笔数。我们可以使用 switch-case 来做这种类型的比较。代码如下：

<html>
  <head>
    <title>
      Switch-Case
    </title>
  </head>
  <body>
    <script type="text/javascript">
      var Tom = 35;
      switch (Tom) {
        case 25: //Number of John's pens
          document.write("John has equal number of pens as Tom");
        break;
        case 35: //Number of Cindy's pens
          document.write("Cindy has equal number of pens as Tom");
        break;
        case 15: //Number of Laura's pens
          document.write("Laura has equal number of pens as Tom");
        break;
        case 18: //Number of Terry's pens
          document.write("Terry has equal number of pens as Tom");
        break; 
        default:
          document.write("No one has equal pens as Tom");
      }
    </script>
  </body>
</html>

输出将如下所示：

注意

现在，将第二个 case（35）的值更改为其他值并检查你的结果。

练习

假设你除了周六和周日外每天都需要去学校。编写一个代码，其中你可以输入今天的日期数字，网页会显示你是否需要去学校。（提示：使用 switch case。）
考虑到你有一个花园，你会在每月的双日给所有的植物浇水。编写一个代码，它会显示你那天是否需要给植物浇水。（提示：使用 if 条件和取模运算符（%）。）

循环

在本段中，我们将学习一个有趣的概念，称为循环。

考虑到你需要使用 JavaScript 打印一行 100 次。你会怎么做？

你可以在你的程序中输入document.write("The line I want You to Write"); 100 次，或者你可以使用循环。

循环的基本用法是做多次同一件事。比如说，你需要打印出从 1 到 100 的所有整数，即1 + 2 + 4 + 6 +……+100系列。计算是相同的，你只需要多次做这件事。在这些情况下，我们使用循环。

我们将讨论两种类型的循环，即for 循环和while 循环。

for 循环

for 循环的基本结构如下：

for(starting ; condition ; increment/decrement)
{
  statement
}

starting参数是循环的初始化。你需要初始化循环才能启动它。condition参数是控制循环的关键元素。increment/decrement参数定义了循环如何增加/减少。

让我们看看一个例子。你想要打印javascript is fun 10 次。代码如下所示：

<html>
  <head>
    <title>For Loop</title>
  </head>
  <body>
  <script type="text/javascript">
    var java; 
    for(java=0;java<10;java++){
      document.write("javascript is fun"+"<br>");
    }
  </script>
  </body>
</html>

输出将类似于以下内容：

是的！你打印了 10 次行。如果你仔细查看代码，你会看到以下内容：

我们声明了一个名为java的变量
在for循环中，我们将0初始化为其值
我们添加了一个java<10条件，使得浏览器从0计数到10
我们将变量增加了1；这就是为什么我们添加了java++

练习

使用 JavaScript 编写一个代码，将打印以下输出：

I have 2 apples.
I have 4 apples.
I have 6 apples.
I have 8 apples.
I have 10 apples.
I have 12 apples.
I have 14 apples.
I have 16 apples.
I have 18 apples.
I have 20 apples.

编写一个代码，将打印从 2 到 500 的所有偶数。

while 循环

你已经学习了如何使用 for 循环多次执行某个操作。现在，我们将学习另一种循环，称为 while 循环。while 循环的结构如下：

initialize;
while(condition){
  statement; 
  increment/decrement; 
}

之前示例的代码如下：

<html>
  <head>
    <title>For Loop</title>
  </head>
  <body>
    <script type="text/javascript">
      var java = 0;
      while(java < 10){
        document.write("javascript is fun"+"<br>");
        java++;
      }
    </script>
  </body>
</html>

输出将与for循环相同。

练习

编写一个代码，使用 while 循环打印从 1 到 600 的所有奇数。（提示：使用取模运算符。）

编写一个代码，将打印以下输出：

5 x 1  = 5
5 x 2  = 10
5 x 3  = 15
5 x 4  = 20
5 x 5  = 25
5 x 6  = 30
5 x 7  = 35
5 x 8  = 40
5 x 9  = 45
5 x 10 = 50

概述

在本章中，你学习了使用 JavaScript 进行逻辑运算。你学习了循环、条件运算和其他 HTML 标签。

我们需要关注本章，因为我们在这里讨论了 JavaScript 中最重要的属性。如果你练习本章和最后三章，你就可以成为 JavaScript 大师。我建议你在没有掌握所有四个章节之前不要继续前进。如果你已经学习了我们之前讨论的所有主题，那么让我们继续到第五章，嘿！战斗中的航行。

第五章。Ahoy! Sailing into Battle

在本章中，我们将使用 HTML、CSS 和 JavaScript 开发一个完整的游戏。我们将专注于 JavaScript 编程，因此，我们不会关心游戏的图形。我们将编写一个名为Battleship的游戏。你们中的许多人以前都听说过它。这是一个记忆游戏。你的想象力和直觉将帮助你赢得游戏。游戏有多种玩法。

让我们讨论一下游戏的外观。以下图中展示了几个相互连接的方形几何物体：

行和列通常用数字系统或字母来命名。比如说，行是1、2、3、4、5、6、7、8、9和10。列是A、B、C、D、E、F、G、H、I和J。我们可以用数字或字母来命名它们：

这是一个两人游戏。以下是其规则：

两位玩家将秘密地将他们的船（可以是不同类型的船只或水上交通工具）放置在他们的矩阵/网格上。
玩家可以将他们的船只垂直或水平放置；然而，不能对角放置。
玩家必须在开始游戏之前将所有船只放置在网格上。
他们的船只不能相互重叠。
当所有船只都放置好后，玩家不能将他们的船只从网格中移动。
放置所有船只后，第一位玩家将声明第二位玩家的坐标，如果第二位玩家有船，则该船将被击沉。
然后，第二位玩家将声明第一位玩家的坐标。如果第一位玩家有船，它将被击沉。
坐标可能看起来像A2、B2、D5等等。第一个字母将是网格的x轴，数字将代表网格的y轴。
击沉对手所有船只的玩家将获胜。

以下图显示了网格上放置的一些船只：

现在，我们将进入游戏的编程部分。

我们将坚持以下规则，以便我们的游戏不会变得难以编码：

将有一艘属于两位玩家的船。
船将占据网格的四个部分。
玩家必须在提示符中输入x和y轴的坐标。
网格将是 9 x 9。
玩家需要输入h或v来表示船的水平或垂直位置。
为了简化绘图，我们将在网格的位置上放置点（.）。网格看起来将类似于以下图像：
我们需要一个Fire按钮来开始游戏。

HTML 部分

HTML 部分将类似于以下代码：

<html>
  <head>
  </head>
  <body>
    <h1> Battleship Game </h1>
  </body>
  <style>
// We will code in CSS here
  </style>
  <script type = "text/javascript">
//We will code in JavaScript here
  </script>
</html>

代码的输出将如下所示：

CSS 部分

我们在<style></style>标签中使用 CSS 代码来设置页面样式。因为我们只关注 JavaScript 的编码，所以我们不会关心游戏的视觉部分。为了使游戏页面更加多彩，我们将使用以下代码：

  <style>
    body { 
      background-color: #eff; 
    }
  </style>

JavaScript 部分

这部分是游戏的主要部分，我们将最关注这部分。我们将在<script></script>标签中编写所有代码。

对于网格，我们需要一个二维数组。我们将使用一个game变量来存储数据，如下所示：

注意

许多程序可能需要处理具有共同特征的多项数据项。在这种情况下，将数据项放置在数组中通常很方便，它们将共享相同的名称。单个数据可以是字符、浮点数、整数等。然而，它们必须都是同一类型和类。

var game = [    [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
                [".", ".", ".", ".", ".", ".", ".", ".", "."],
           ];

我们将使用一个变量来在 HTML 页面上显示二维数组：

var board = document.createElement("PRE");

我们现在将此代码附加到主体并创建一个按钮：

document.body.appendChild(board);
var button=document.createElement("BUTTON");

此按钮将调用fire函数（我们稍后会编写该函数）：

button.onclick = fire;

现在，我们将按钮放置在页面主体部分：

var t=document.createTextNode("Fire!");
  document.body.appendChild(button);
  button.appendChild(t);

让我们创建一个绘制棋盘的函数：

  function drawBoard() {
    var boardContents = "";
    var i;
    var j;
    for (i=0; i<9; i++) {
      for (j=0; j<9; j++) {
        boardContents = boardContents + game[i][j]+" ";
        // Append array contents for each board square
      }
      boardContents = boardContents + "<br>";
      // Append a line break at the end of each horizontal line
    }
    return boardContents;
    // Return string representing board in HTML
  }

现在，通过编写以下代码在 HTML 页面上绘制棋盘：

board.innerHTML = drawBoard();

我们将使用prompt()函数询问玩家他想要将船只放置在哪里：

var x=prompt("Where would you like to place your ship? Enter an X coordinate: (0-8)");
  var y=prompt("Where would you like to place your ship? Enter a Y coordinate: (0-8)");
  var direction=prompt("Place (h)orizontally, (v)ertically");
  x = Number(x);  // Convert the string returned by "prompt" into a number
  y = Number(y);  // Convert the string returned by "prompt" into a number

如果玩家选择水平方向放置他们的船只，我们需要用以下代码替换点：

if (direction[0] == "h") {
  var c;
  for (c = x; c < (x + 4); c++)
  {
    game[y][c] = '#';
  }
}

如果玩家选择垂直方向放置他们的船只，我们需要用以下代码替换点：

if (direction[0] == "v") {
  var c;
  for (c = y; c < (y + 4); c++)
  {
    game[c][x] = '#';
  }
}

在放置船只后，我们需要重新绘制棋盘，如下所示：

  board.innerHTML = drawBoard();

让我们创建fire()函数。

我们的fire()函数如下所示：

function fire() {
//We will write codes here.
}

当调用fire()函数时，我们需要从玩家那里获取输入，如下所示：

  var fireX=prompt("Where would you like to fire? Enter an X coordinate: (0-8)");
  var fireY=prompt("Where would you like to fire? Enter a Y coordinate: (0-8)");

将输入转换为数字，如下所示：

  fireX = Number(fireX);
  // Convert the string returned by "prompt" into a number
  fireY = Number(fireY);
  //  Convert the string returned by "prompt" into a number

如果输入不匹配#字符，我们将使用以下代码打印You Missed.：

  if (game[fireY][fireX] == ".") {
    // Check if the specified coordinate is occupied by the cruiser
    alert("You Missed.");
  }

如果输入击中船只，我们将打印一些消息并重新绘制棋盘：

  else if (game[fireY][fireX] == "*") {
    alert("You already hit the ship there.");
  } else {
    alert("Kaboom! You hit a ship");
    game[fireY][fireX] = "*";
    board.innerHTML = drawBoard();
    // Redraw board with hit marker at specified coordinate
  }

现在，我们需要检查棋盘上是否还有剩余船只。我们将使用以下代码：

  var shipfound;
  var i;
  var j;
  // Check if there are any ships remaining on the board
  for (i=0; i<9; i++) {
    for (j=0; j<9; j++) {
      if (game[i][j] != "." && game[i][j] != "*") {
        shipfound = true;
        // Taking a boolean data type to set it if a ship is found
      }
    }
  }

如果没有剩余船只，我们将结束游戏：

if (!shipfound) {
  // If no ships are found end the game
  alert("All ships have been sunk. Well done Captain! Game over");
  document.body.removeChild(button);
  // Remove the fire button from the page after game over
}

最终代码

我们最终的代码将类似于以下内容：

<html>
  <head>
  </head>
  <body>
    <h1> Battleship Game </h1>
  </body>
  <style>
  body {
    background-color: #eff;
  }
  </style>
  <script>
    var game = [  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
                  [".", ".", ".", ".", ".", ".", ".", ".", "."],
               ];
    var board = document.createElement("PRE");
    // preparing the HTML <pre> element to display the board on the page
    document.body.appendChild(board);
    var button=document.createElement("BUTTON");
    // Preparing the "Fire! button to allow the player to fire at the ship
    button.onclick = fire;       // Clicking the button calls the fire() function
    var t=document.createTextNode("Fire!");
    document.body.appendChild(button);
    button.appendChild(t);
    function drawBoard() {
      var boardContents = "";
      var i;  var j;
      for (i=0; i<9; i++) {
        for (j=0; j<9; j++) {
          boardContents = boardContents + game[i][j]+" ";
          // Append array contents for each board square
        }
        boardContents = boardContents + "<br>";
        // Append a line break at the end of each horizontal line
      }  return boardContents;
      // Return string representing board in HTML
    }
    board.innerHTML = drawBoard();
    // Display the board on the page using the above function
    var x=prompt("Where would you like to place your cruiser? Enter an X coordinate: (0-8)");
    var y=prompt("Where would you like to place your cruiser? Enter a Y coordinate: (0-8)");
    var direction=prompt("Place (h)orizontally, (v)ertically");
    x = Number(x);  // Convert the string returned by "prompt" into a number
    y = Number(y);  // Convert the string returned by "prompt" into a number
    if (direction[0] == "h") {
      var c;
      for (c = x; c < (x + 4); c++)
      {
        game[y][c] = '4';
      }
    }
    // Draw cruiser vertically
    if (direction[0] == "v") {
      var c;
      for (c = y; c < (y + 4); c++)
      {
        game[c][x] = '4';
      }
    }
    board.innerHTML = drawBoard(); // Redraw board with cruiser added
    // Function for firing a shot when the "Fire! button is pressed
    function fire() {
      var fireX=prompt("Where would you like to fire? Enter an X coordinate: (0-8)");
      var fireY=prompt("Where would you like to fire? Enter a Y coordinate: (0-8)");
      fireX = Number(fireX);
      // Convert the string returned by "prompt" into a number
      fireY = Number(fireY);
      //  Convert the string returned by "prompt" into a number
      if (game[fireY][fireX] == ".") {
        // Check if the specified coordinate is occupied by the cruiser
        alert("Missed.");
      }
      else if (game[fireY][fireX] == "*") {
        alert("You already hit the ship there.");
      } else {
        alert("Kaboom! You hit a ship");
        game[fireY][fireX] = "*";
        board.innerHTML = drawBoard();
        // Redraw board with hit marker at specified coordinate
      } 
      var shipfound;  
      var i;  
      var j;
      // Check if there are any ships remaining on the board
      for (i=0; i<9; i++) {
        for (j=0; j<9; j++) {
          if (game[i][j] != "." && game[i][j] != "*") {
            shipfound = true;
            // Set to true if a ship is found
          }
        }
      }if (!shipfound) {
        // If no ships are found end the game
        alert("All ships have been sunk. Well done Captain! Game over");
        document.body.removeChild(button);
        // Remove the fire button from the page after game over
      }
    }
  </script>
</html>

如果运行前面的代码，您将看到以下提示：

让我们玩我们创建的游戏。第一位玩家必须放置他的船只。他必须输入船只的坐标。

假设我们在x轴上输入3，在y轴上输入2。将我们的船只放置在垂直方向。游戏屏幕将如下所示：

你可以看到你的船只已经放置好了。现在，你可以通过按下开火按钮来射击对手（电脑）。你将被要求输入你想要射击的网格坐标。如果你射偏了，你会看到一个我们编写的消息，你错过了。

我希望你能玩到你构建的游戏。

恭喜！

如果你想要进一步开发你的游戏（例如增强图形、船只数量等），你只需要开发 CSS 和 JavaScript。

现在，我们将看到 Battleship 游戏的更好代码，如下所示：

在你的电脑的任何位置创建一个js文件夹。
在js文件夹中，放置本章包含的三个文件：battleship.js、functions.js和jquery.min.js。
在js文件夹外，放置battleship.css和index.html文件。

在记事本中打开index.html文件，你会看到以下代码：

<html>
  <head>
    <title>Battleship</title>
    <meta name="viewport" content="width=device-width" />
    <link href="battleship.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <h1>BATTLESHIP</h1>
    <div class="game-types">
      <h2 class='game-choice'>Choose a game type</h2>
      <dl class="game-description">
        <dt>Standard</dt>
        <dd>Classic Battleship with randomly placed ships</dd>
        <dt>Custom</dt>
        <dd>Choose any 5 ships and place them where you like. The computer will have the same 5 ships, randomly placed</dd>
      </dl>
      <div class='button-wrapper'>
        <button class="standard">Standard</button>
        <button class="custom">Custom</button>
      </div>
    </div>
    <div class='ship-picker'>
      <h2>Pick 5 Ships</h2>
      <h3>Selected ships</h3>
      <ul class="ship-list">
        <li>
          <p></p>
          <div class='remove'>X</div>
        </li>
        <li>
          <p></p>
          <div class='remove'>X</div>
        </li>
        <li>
          <p></p>
          <div class='remove'>X</div>
        </li>
        <li>
          <p></p>
          <div class='remove'>X</div>
        </li>
        <li>
          <p></p>
          <div class='remove'>X</div>
        </li>
      </ul>
      <ul class='ship-choices button-wrapper'>
        <li class="ship-choice">Carrier</li>
        <li class="ship-choice">Battleship</li>
        <li class="ship-choice">Submarine</li>
        <li class="ship-choice">Cruiser</li>
        <li class="ship-choice">Destroyer</li>
      </ul>
      <div class='button-wrapper'>
        <button class='build-fleet inactive'>Build Fleet</button>
      </div>
    </div>
    <div class="ship-placer">
      <div class="board placer-board">
        <div class="labels">
          <div class="row-label">
          </div>
          <div class="column-label">
          </div>
        </div>
        <div class="playable-area">
        </div>
      </div>
      <div class='ships-to-place'>
        <h3>Ships to place</h3>
        <ul>
        </ul>
      </div>

      <div class="clear"></div>
      <div class="instructions">
        <p>Use 'WASD' keys to rotate pieces</p>
      </div>

      <div class='button-wrapper'>
        <button class="start inactive">Start game</button>
      </div>
    </div>
    <div class="game-area">
      <div class="board-wrap">
        <h1 class="hidden">BATTLESHIP</h1>
        <div class="single-board-wrap">
          <div class="board human-board">
            <div class="labels">
              <div class="row-label">
              </div>
              <div class="column-label">
              </div>
            </div>
            <div class="playable-area">
            </div>
          </div>
          <h2>Human Board</h2>
        </div>
        <div class="single-board-wrap">
          <div class="board ai-board">
            <div class="labels">
              <div class="row-label">
              </div>
              <div class="column-label">
              </div>
            </div>
            <div class="playable-area">
            </div>
          </div>
          <h2>Opponent Board</h2>
        </div>
        <div class="button-wrapper">
          <button class="new-game">New Game</button>
          <button class="stats hidden">Show Stats</button>
        </div>
      </div>
      <div class="info-area">
        <h2>Enemy ships remaining</h2>
        <div class="scoreboard">
          <div class="ships-left">
          </div>
        </div>
        <div class="gamelog-container">
          <h2>GAME LOG</h2>
        </div>
      </div>
    </div>
    <script src="img/jquery.min.js"></script>
    <script src="img/functions.js"></script>
    <script src="img/battleship.js"></script>
  </body>
</html>

我们在 HTML 文件中包含了这三个 JavaScript 文件。我们添加了一个 jQuery 文件，我们将在下一章讨论。前面代码的输出将显示以下屏幕：

你可以点击标准按钮来玩标准战场游戏，或者点击自定义按钮来玩非标准战场游戏。

如果你选择标准按钮，你会得到以下屏幕：

现在，你可以猜测对手船只的位置并点击网格。屏幕右侧将有一个日志面板。你还可以从游戏日志面板的前一个面板中看到你摧毁了多少艘以及哪些船只。

如果你选择自定义玩法，你会看到以下屏幕：

添加了五艘船之后，你就可以玩游戏了。如果需要，你可以添加相同船只两次或更多。

你可以将你的船只垂直或水平放置，并点击方块来击沉对手的船只。你一次只能点击一个方块。

概述

在本章中，我们构建了一个完整的游戏并进行了游戏。我们还玩了一个我们构建的游戏的更好版本。你需要记住的是，你必须了解我们之前讨论的所有代码背后的逻辑。本章提供了游戏更好版本的源代码。我希望你会研究代码并编写你自己的 Battleship 游戏。我们在改进的 Battleship 中使用了jquery.js JavaScript 文件。jquery.js文件有很多行代码（我们将在第六章，探索 jQuery 的优势中讨论这一点）。

如果你掌握了本章我们讨论的所有代码，我们现在可以进入下一章。

第六章。探索 jQuery 的优势

如果你已经阅读了上一章，你可能已经在你的战舰游戏中实现了jQuery。在本章中，我们将详细讨论 jQuery。

jQuery 库是一个 JavaScript 框架。它于 2006 年发布。人们曾经称它为jSelect。我们在网站上使用 jQuery，以便我们可以轻松地使用 JavaScript 并给我们的网页添加效果。你可能认为 jQuery 与 JavaScript 不同。不！jQuery 只是另一个 JavaScript 文件。它是一个非常轻量级的库，可以帮助你用更少的代码更轻松地装饰你的网页。

我们使用 jQuery 的原因如下：

它是开源的；如果需要，你可以编辑或修改其代码
它是一个小库（大约 150 KB 的文件）
jQuery 的社区支持非常强大；你可以很容易地从用户那里得到帮助
它用户友好且受欢迎
它支持跨浏览器
它是公开开发的；你可以通过编辑代码来修复任何错误或添加功能
它通过使用 AJAX 帮助开发者构建响应式网站
它内置了动画功能，可以帮助开发者轻松地在他们的网站上创建动画

安装 jQuery

问题是哪里可以找到 jQuery。嗯，你可以在jquery.com/找到它。我还在这本书中附上了文件。你可以从那里下载。

如果你访问jquery.com/，你会看到以下屏幕：

点击下载 jQuery按钮。你将被重定向到以下页面：

jQuery 有两个版本：1.x.x和2.x.x。这两个版本之间只有很少的差异。压缩版本的代码不可读，因为版本中没有空白和注释；然而，未压缩版本代码清晰且格式化，它还包含重要的注释，有助于理解代码和函数的工作。如果你想了解 jQuery 中某个函数的工作原理，我建议你查看 jQuery 的未压缩版本。

在本章中，我们将使用2.x.x版本。2.x.x的最新版本是2.2.0。

注意

你可以下载压缩版或未压缩版的 jQuery。

我建议你使用压缩版本，因为它更轻量。

我们将使用未压缩版本，这样你可以学习jquery.js，并清楚地了解它是如何工作的。点击下载未压缩的开发版 jQuery 2.2.0后，你将在浏览器中看到 jQuery 库。按键盘上的Ctrl + S保存文件，如下面的截图所示：

下载 jQuery 后，将其放置在您的计算机上。为了简单起见，将其重命名为jquery。

在同一文件夹中创建一个新的 HTML 文件，并在 HTML 文档的<head></head>标签中包含jquery.js，通过输入以下代码：

<script src="img/jquery.js"></script>

要检查你导入的 jquery.js 是否工作，输入以下代码。我稍后会解释代码：

<html>
  <head>
    <script type="text/JavaScript" src="img/jquery.js"></script>
  </head>
  <script type="text/JavaScript">
    jQuery(document).ready(function()
    {
      jQuery('h1').click(function()
      {
        alert("jQuery is working!");
      } //click function ends here.
      );
    } // ready function ends here.
    );
  </script>
  <body>
    <h1>Click Here!</h1>
  </body>
</html>

打开 HTML 文件后，点击 Click Here! 你将看到以下屏幕：

这意味着你的 jQuery 正在正常工作。

让我们讨论一下我们编写的代码。

注意

你也可以不下载就安装 jQuery。这种安装方式被称为 内容分发网络 (CDN) 安装。

你需要将以下行添加到你的 HTML 文档中，如果你在线连接，你的浏览器将自动加载 jQuery。

<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

解释代码

现在，让我们讨论一下我们之前使用的代码。我们在代码中使用了以下函数：

jQuery(document).ready(function(){
//our codes. 
});

这是一个允许你设置 jQuery 以便使用的 jQuery 函数。你可以像下面这样用美元符号 ($) 替换 jQuery：

$(document).ready(function(){
//our codes.
});

你需要考虑你想要应用 jQuery 的地方。我们在 body 标签中写了 <h1>Click Here!</h1>。我们希望当点击 Click Here! 时，它能够执行某些操作，这就是为什么我们添加了一个类似于以下格式的 click 函数：

  jQuery('h1').click(function(){
    //our codes.
  });

如前所述，jQuery 可以用 $ 替换。

我们添加了一个 alert 函数，这样当我们点击文本时，会出现一个警告框。

深入探讨

让我们详细讨论一下我们经常使用的 jQuery 函数和方法。

所有方法都应该写在 ready() 函数中。一些常用的方法如下：

Load
Keyup
Keydown
改变
Focus
模糊
调整大小
滚动

load() 方法

使用这个方法，你可以在浏览器中加载一个文件。假设你想要从浏览器中的 .txt 文件中获取一些文本。你可以编写以下代码：

<html>
  <head>
    <script type="text/JavaScript" src="img/jquery.js"></script>
  </head>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#click").load("test.txt");
      });
    });
  </script>
  <body>
    <div id="click">
      Hello;
    </div>
    <button type="button" name="button">Click to replace "Hello" from text file</button>
  </body>
</html>

点击按钮后，click div 中的文本将更改为 恭喜！你已经加载了你的文件!!，如下所示：

keyup() 和 keydown() 方法

使用这个方法，你可以控制键盘按钮的按键。当按键被按下或未按下时，你可以让浏览器执行某些操作。假设你有一个文本框，你想要从那里获取输入。当按键被按下时，你希望你的文本框变为红色；否则颜色应保持绿色。你可以通过实现/编写以下代码来实现：

<html>
  <head>
    <script type="text/JavaScript" src="img/jquery.js"></script>
  </head>
  <script>
    $(document).ready(function(){
      $("input").keydown(function(){
        $("input").css("background-color", "green");
      });
      $("input").keyup(function(){
        $("input").css("background-color", "red");
      });
    });
  </script>
  <body>
    Type Something:  <input type="text">
  </body>
</html>

change() 方法

要更改一些文本，你可以通过实现以下代码使用此方法：

<html>
  <head>
    <script type="text/JavaScript" src="img/jquery.js"></script>
  </head>
  <script>
  $(document).ready(function(){
    $("input").change(function(){
      alert("The text has been changed.");
    });
  });
  </script>
  <body>
    Type Something:  <input type="text">
  </body>
</html>

你的输出将类似于以下图片：

blur() 和 focus() 方法

要使文本或按钮模糊或聚焦，你可以实现以下代码：

<html>
  <head>
    <script type="text/JavaScript" src="img/jquery.js"></script>
  </head>
  <script>
  $(document).ready(function(){
    $("button").blur(function(){
      alert("Your button is not focused!");
    });
  });
  </script>
  <body>
    <button type="button">CLick Me!</button>
  </body>
</html>

你也可以为 focus() 方法做同样的事情，如下所示：

resize() 方法

如果你想看到浏览器调整大小的次数，你可以在你的 HTML 文档中做以下操作：

scroll() 方法

你可以使用以下代码向鼠标滚动添加动作：

<html>
  <head>
    <script src="img/jquery.js"></script>
    <script>
      $(document).ready(function(){
        $("div").scroll(function(){
          $("span").text("You are scrolling!");
        });
      });
    </script>
  </head>
  <body>
    <div style="border:2px solid black;width:200px; height:200px;overflow:scroll;">
      Cowards die many times before their deaths;<br>
      The valiant never taste of death but once.<br>
      Of all the wonders that I yet have heard,<br>
      It seems to me most strange that men should fear;<br>
      Seeing that death, a necessary end,<br>
      Will come when it will come.<br>
    </div>
    <span></span>
  </body>
</html>

当你用鼠标滚动时，你可以在 scroll() 函数中看到你创建的事件，如下所示：

概述

jQuery 库非常有趣，对于新学习者来说也很容易使用。你只需要练习 jQuery 的方法和函数。网上有很多 jQuery 插件。你还可以将它们下载并安装到你的网页上。使用 jQuery 及其插件，你可以轻松地美化并编写你的网站代码。对我来说，jQuery 最有趣的部分是动画。我将在下一章解释如何使用 jQuery 来实现动画。

第七章. 介绍 Canvas

在本章中，我们将学习 HTML canvas。HTML canvas 可以帮助你在 HTML 页面上绘制图形，特别是图形（例如，圆形、正方形、矩形等）。<canvas></canvas> 标签通常由 JavaScript 控制。Canvas 可以绘制文本，这些文本也可以被动画化。让我们看看我们可以使用 HTML canvas 做什么。

实现画布

要在你的 HTML 页面上添加画布，你需要在 <canvas></canvas> 标签中定义画布的高度和宽度，如下所示：

<html>
  <head>
    <title>Canvas</title>
  </head>
  <body>
  <canvas id="canvasTest" width="200" height="100" style="border:2px solid #000;">

    </canvas>
  </body>
</html>

我们定义了画布 ID 为 canvasTest，它将被用来与画布交互。我们在画布上使用了内联 CSS。2 像素的实线边框用于更好地查看画布。

添加 JavaScript

现在，我们将添加几行 JavaScript 代码到我们的画布中。我们需要在 <canvas></canvas> 标签之后立即添加我们的 JavaScript 代码到 <script></script> 标签中。

绘制矩形

为了测试我们的画布，让我们通过输入以下代码在画布上绘制一个矩形：

<script type="text/javascript">
  var canvas = document.getElementById("canvasTest"); //called our canvas by id
  var canvasElement = canvas.getContext("2d"); // made our canvas 2D
  canvasElement.fillStyle = "black"; //Filled the canvas black
  canvasElement.fillRect(10, 10, 50, 50); //created a rectangle
</script>

在脚本中，我们声明了两个 JavaScript 变量。canvas 变量用于通过 canvas ID 保存画布的内容，我们在 <canvas></canvas> 标签中使用了这个 ID。canvasElement 变量用于保存画布的上下文。我们将 black 分配给 fillstyle，这样当我们填充矩形时，我们想要绘制的矩形就会变成黑色。我们使用了 canvasElement.fillRect(x, y, w, h); 来绘制矩形的形状。其中 x 是矩形与 x 轴的距离；y 是矩形与 y 轴的距离；而 w 和 h 分别是矩形的宽度和高度。

完整的代码如下所示：

<html>
  <head>
    <title>Canvas</title>
  </head>
  <body>
    <canvas id="canvasTest" width="200" height="100" style="border:2px solid #000;">
    </canvas>
    <script type="text/javascript">
      var canvas = document.getElementById("canvasTest"); //called our canvas by id
      var canvasElement = canvas.getContext("2d"); // made our canvas 2D
      canvasElement.fillStyle = "black"; //Filled the canvas black
      canvasElement.fillRect(10, 10, 50, 50); //created a rectangle
    </script>
  </body>
</html>

代码的输出如下：

绘制线条

要在画布上绘制线条，你需要在你的 <script></script> 标签中插入以下代码：

<script type="text/javascript">
  var c = document.getElementById("canvasTest");
  var canvasElement = c.getContext("2d");
  canvasElement.moveTo(0,0);
  canvasElement.lineTo(100,100);
  canvasElement.stroke();
</script>

这里，canvasElement.moveTo(0,0); 用于使我们的线条从画布的(0,0)坐标开始。canvasElement.lineTo(100,100); 语句用于使线条对角。canvasElement.stroke(); 语句用于使线条可见。我建议你更改 canvasElement.lineTo(100,100); 和 canvasElement.moveTo(0,0); 中的数字，并查看由 canvas 绘制的线条的变化。

以下是代码的输出：

快速练习

使用 canvas 和 JavaScript 绘制线条，该线条将与画布的 y 轴平行。
绘制一个高度为 300 像素、宽度为 200 像素的矩形。在同一画布上绘制一条与矩形接触的线条。

绘制圆形

要在画布上绘制圆形，你需要在你的 <script></script> 标签中添加以下代码：

<script type="text/javascript">
  var c = document.getElementById("canvasTest");
  var canvasElement = c.getContext("2d");
  canvasElement.beginPath();
  canvasElement.arc(95,50,40,0,2*Math.PI);
  canvasElement.stroke();
</script>

在这里，我们使用了 canvasElement.beginPath(); 来开始绘制圆形，canvasElement.arc(95,50,40,0,2*Math.PI); 用于绘制圆形的形状，以及 canvasElement.stroke(); 来使圆形可见。

注意

canvasElement.arc(95,50,40,0,2*Math.PI); 这条语句类似于 canvasElement.arc(x, y, r, sA, eA, ac);，

其中 x 是从 x 轴的起始坐标，y 是从 y 轴的起始坐标，r 是圆的半径，sA 是圆的起始角度，eA 是圆的结束角度，ac 是圆的方向。在这里，ac 表示逆时针。

我们代码的输出将是以下图像：

绘制线性渐变

让我们绘制一些新内容。我们将绘制一个矩形并使其颜色逐渐淡化。在 <script></script> 标签中输入以下代码：

<script type="text/javascript">
  var c = document.getElementById("canvasTest");
  var canvasElement = c.getContext("2d");
  // Create the gradient
  var grdient = canvasElement.createLinearGradient(0,0,100,0);
  grdient.addColorStop(0,"blue"); // here we added blue as our primary color
  grdient.addColorStop(1,"white"); //here we used white as our secondary color. 
  // Fill with gradient
  canvasElement.fillStyle = grdient;
  canvasElement.fillRect(10,10,150,80);
</script>

我们添加了 canvasElement.createLinearGradient(0,0,100,0); 来创建渐变或淡化效果。我们添加了 grdient.addColorStop(0,"blue"); 和 grdient.addColorStop(1,"white"); 来着色矩形。

代码的输出如下所示：

快速练习

使用 HTML canvas 绘制以下笑脸。(提示：您将需要绘制三个完整的圆和一个半圆。技巧在于您可以通过玩转 canvas 的圆代码来绘制这个图形。):
绘制具有颜色渐变的圆。

让我们做一个时钟！

我们将绘制一个模拟时钟并使其像真实时钟一样工作。在 HTML 文档的 body 部分，输入以下代码：

<canvas id="myclock" height="500" width="500"></canvas>
In your <script></script> tags, take the following variables:
Var canvas; // the clock canvas
var canvasElement; // canvas's elements

// clock settings
var cX = 0; 
var cY = 0;
var radius = 150;

这里，cX 和 cY 是我们时钟的中心坐标。我们取 150 px 作为时钟的半径。您可以增加或减少它。

然后，我们需要初始化变量。在定义前面的变量之后，创建一个 init(); 函数。

函数应类似于以下内容：

function init() {

  canvas = document.getElementById("myclock");
  //Called the element to work on. 
  canvasElement = canvas.getContext("2d");
  //Made the context 2d. 

  cX = canvas.width / 2;
  // we divided by two to get the middle point of X-axis
  cY = canvas.height / 2;
  // we divided by two to get the middle point of Y-axis
  initTime(); //called the initTime() function.
  drawClock(); //Called the drawClock() function to draw the graphics. 

  setInterval("animateClock()", 1000); // Made the animation for each second. Here 1000 is equal to 1 second. 

}

让我们初始化时钟的秒针、分针和时针：

function initTime() {
  date = new Date();
  hours = date.getHours() % 12; // Divided by 12 to make our clock 12 hours. 
  minutes = date.getMinutes(); 
  seconds = date.getSeconds();

}

这里，date.getHours()、date.getMinutes() 和 date.getSeconds() 将返回您的计算机时间并将它们保存在我们的变量中。

创建另一个函数来使我们的时钟动画化：

function animateClock() {
  //This function will help our 'second' hand to move after an interval. 
  clearCanvas(); // This will clear the canvas 
  refreshTime(); // This will refresh time after 1 second. 
  drawClock();   // This will draw the clock. 

}

我们现在将编写 clearCanvas()、refreshTime() 和 drawClock()：

function clearCanvas() {
  canvasElement.clearRect(0, 0, canvas.width, canvas.height);
}

这里，canvasElement.clearRect(0, 0, canvas.width, canvas.height); 将在特定时间间隔后重置我们的画布。

我们的 refreshTime() 函数应如下所示：

function refreshTime() {
  seconds += 1;
  if (Math.floor((seconds / 60)) != 0) { //we divide seconds by 60 until second is equal to zero. 
    minutes += 1; // If 60 second is passed we increment minute by 1\. 
    seconds %= 60; 
  }
  if (Math.floor((minutes / 60)) != 0) { 
    hours += 1; //We increment hour by 1 after 60 minutes. 
    minutes %= 60; 
  }
}

在 refreshTime() 函数中，我们增加了我们的 seconds 变量。因此，每当此函数被调用时，我们的变量将增加 1。然后，我们对 hours 和 minutes 执行了两个条件操作。

现在，让我们绘制时钟：

function drawClock() {
  drawClockBackground(); //This draws clock background. 
  drawSecondsHand(); //This draws clock's second hand. 
  drawMinutesHand(); //This draws clock's minute hand. 
  drawHoursHand(); //This draws clock's hour hand.
}

我们将编写 drawClockBackground()、drawSecondsHand()、drawMinutesHand() 和 drawHoursHand() 函数：

function drawClockBackground() {
  //this function will draw the background of our clock. We are declaring few variables for mathematical purposes. 
  var correction = 1/300;
  var shift_unit = 1/170;
  var shift_factor = 1/30;
  var angle_initial_position = 2;
  var angle_current_position_begin = 0;
  var angle_current_position_end = 0;
  var repeat = 60;
  var lineWidth = 10;

  for (var i=0; i < repeat; i+=1) {
  //These lines are written for making our clock error free with the angle of the hands (hands' positions)
  angle_current_position_begin = angle_initial_position - (i * shift_factor) - correction;
  angle_current_position_end = angle_current_position_begin + shift_unit;

  if (i % 5 === 0) 
  lineWidth = 20;
  else 
  lineWidth = 10;

  drawArcAtPosition(cX, cY, radius, angle_current_position_begin*Math.PI, angle_current_position_end*Math.PI, false, lineWidth);
  }
  drawLittleCircle(cX, cY);
}

在此函数中，我们进行了一些数学运算，并编写了 drawLittleCircle(cX, cY) 函数，用于在时钟中心绘制一个小圆。

函数应类似于以下内容：

function drawLittleCircle(cX, cY) {
  drawArcAtPosition(cX, cY, 4, 0*Math.PI, 2*Math.PI, false, 4);
}

编写 drawSecondsHand() 函数。此函数将绘制秒针，如下所示：

function drawSecondsHand() {
  /* Simple mathematics to find the co ordinate of the second hand; 
    You may know this: x = rcos(theta), y = rsin(theta). We used these here.
    We divided the values n=by 30 because after 5 seconds the second hand moves 30 degree. 
  */ 
  endX = cX + radius*Math.sin(seconds*Math.PI / 30);
  endY = cY - radius*Math.cos(seconds*Math.PI / 30);
  drawHand(cX, cY, endX, endY);
}

我们的 drawMinutesHand() 函数应该看起来像下面这样。这个函数将绘制我们时钟的分钟指针，如下所示：

function drawMinutesHand() {
  var rotationUnit = minutes + seconds / 60;
  var rotationFactor = Math.PI / 30;
  var rotation = rotationUnit*rotationFactor;
  var handLength = 0.8*radius;
  endX = cX + handLength*Math.sin(rotation);
  endY = cY - handLength*Math.cos(rotation);
  drawHand(cX, cY, endX, endY);
}

现在，让我们看看我们的 drawHoursHand(); 函数。这个函数将绘制小时指针：

function drawHoursHand() {
  var rotationUnit = 5 * hours + minutes / 12;
  var rotationFactor = Math.PI / 30;
  var rotation = rotationUnit*rotationFactor;
  var handLength = 0.4*radius;

  endX = cX + handLength*Math.sin(rotation);
  endY = cY - handLength*Math.cos(rotation);
  drawHand(cX, cY, endX, endY);
}

我们在前面的函数中使用了 drawHand(); 函数。让我们按照以下方式编写这个函数：

function drawHand(beginX, beginY, endX, endY) {
  canvasElement.beginPath();
  canvasElement.moveTo(beginX, beginY);
  canvasElement.lineTo(endX, endY);
  canvasElement.stroke();
  canvasElement.closePath();
}

现在，我们将编写我们时钟的最后一个函数，如下面的代码片段所示：

function drawArcAtPosition(cX, cY, radius, start_angle, end_angle, counterclockwise, lineWidth) {
  canvasElement.beginPath();
  canvasElement.arc(cX, cY, radius, start_angle, end_angle, counterclockwise);
  canvasElement.lineWidth = lineWidth;
  canvasElement.strokeStyle = "black";
  canvasElement.stroke();
  canvasElement.closePath();
}

我们时钟的完整代码应该看起来类似于以下代码：

<html>
  <head>
    <script type="text/javascript">
      var canvas; 
      var canvasElement;

      // clock settings
      var cX = 0;

      var cY = 0;
      var radius = 150;

      // time settings
      var date;
      var hours;
      var minutes;
      var seconds;

      function init() {
        canvas = document.getElementById("myclock");
        canvasElement = canvas.getContext("2d");

        cX = canvas.width / 2;
        cY = canvas.height / 2;

        initTime();
        drawClock();
        setInterval("animateClock()", 1000);
      }

      // get your system time
      function initTime() {
        date = new Date();
        hours = date.getHours() % 12;
        minutes = date.getMinutes();
        seconds = date.getSeconds();
      }

      // animate the clock
      function animateClock() {
        clearCanvas();
        refreshTime();
        drawClock();
      }

      // clear the canvas
      function clearCanvas() {
        canvasElement.clearRect(0, 0, canvas.width, canvas.height);
      }

      // refresh time after 1 second
      function refreshTime() {
        seconds += 1;
        if (Math.floor((seconds / 60)) != 0) { minutes += 1; seconds %= 60; }
        if (Math.floor((minutes / 60)) != 0) { hours += 1; minutes %= 60; }
      }

      // draw or redraw Clock after time refresh function is called
      function drawClock() {
        drawClockBackground();
        drawSecondsHand();
        drawMinutesHand();
        drawHoursHand();
      }
      function drawHand(beginX, beginY, endX, endY) {
        canvasElement.beginPath();
        canvasElement.moveTo(beginX, beginY);
        canvasElement.lineTo(endX, endY);
        canvasElement.stroke();
        canvasElement.closePath();
      }

      // draw Hand for seconds
      function drawSecondsHand() {
        endX = cX + radius*Math.sin(seconds*Math.PI / 30);
        endY = cY - radius*Math.cos(seconds*Math.PI / 30);
        drawHand(cX, cY, endX, endY);
      }

      // draw Hand for minutes
      function drawMinutesHand() {
        var rotationUnit = minutes + seconds / 60;
        var rotationFactor = Math.PI / 30;
        var rotation = rotationUnit*rotationFactor;
        var handLength = 0.8*radius;

        endX = cX + handLength*Math.sin(rotation);
        endY = cY - handLength*Math.cos(rotation);
        drawHand(cX, cY, endX, endY);
      }

      // draw Hand for hours
      function drawHoursHand() {
        var rotationUnit = 5 * hours + minutes / 12;
        var rotationFactor = Math.PI / 30;
        var rotation = rotationUnit*rotationFactor;
        var handLength = 0.4*radius;

        endX = cX + handLength*Math.sin(rotation);
        endY = cY - handLength*Math.cos(rotation);
        drawHand(cX, cY, endX, endY);
      }

      function drawClockBackground() {
        var correction = 1/300;
        var shift_unit = 1/170;
        var shift_factor = 1/30;
        var angle_initial_position = 2;
        var angle_current_position_begin = 0;
        var angle_current_position_end = 0;
        var repeat = 60;
        var lineWidth = 10;

        for (var i=0; i < repeat; i+=1) {
          angle_current_position_begin = angle_initial_position - (i * shift_factor) - correction;
          angle_current_position_end = angle_current_position_begin + shift_unit;

          if (i % 5 == 0) lineWidth = 20;
          else lineWidth = 10;

          drawArcAtPosition(cX, cY, radius, angle_current_position_begin*Math.PI, angle_current_position_end*Math.PI, false, lineWidth);
        }
        drawLittleCircle(cX, cY);
      }

      function drawArcAtPosition(cX, cY, radius, start_angle, end_angle, counterclockwise, lineWidth) {
        canvasElement.beginPath();
        canvasElement.arc(cX, cY, radius, start_angle, end_angle, counterclockwise);
        canvasElement.lineWidth = lineWidth;
        canvasElement.strokeStyle = "black";
        canvasElement.stroke();
        canvasElement.closePath();
      }
      function drawLittleCircle(cX, cY) {
        drawArcAtPosition(cX, cY, 4, 0*Math.PI, 2*Math.PI, false, 4);
      }

    </script>
  </head>
  <body onload="init()">
    <canvas id="myclock" height="500" width="500"></canvas>
  </body>
</html>

如果你可以看到你的代码输出如下面的图像，那么恭喜你！你已经成功使用 canvas 创建了你的 HTML 时钟：

摘要

在本章中，我们学习了 HTML canvas 的基础知识。我希望你现在可以使用 HTML canvas 绘制任何东西。你可能玩过在线游戏；它们的大部分组件都是使用 HTML canvas 绘制的。因此，如果你想开发自己的网络应用程序或游戏，你需要了解 canvas。你可以使用 JavaScript 轻松编写代码来绘制和动画化形状。

在下一章中，我们将使用 HTML canvas 开发一个名为 Rat-man 的游戏。在开始第八章，构建 Rat-man！ 之前，我希望你已经通过本章学到了很多关于 HTML canvas 的知识。如果你已经学到了，那么我们现在就开始开发我们的游戏吧。

第八章。构建 Rat-man！

在本章中，我们将构建一个名为Rat-man的游戏，这实际上是一个著名游戏Pac-Man的修改版。我们将使用 canvas、JavaScript、CSS 和 HTML 来构建我们的游戏。

让我们先介绍我们游戏的角色：

我们的游戏将有一个老鼠。玩家将扮演老鼠的角色。
将有四只猫试图抓住老鼠，以及很多奶酪供老鼠吃。
游戏的主要目标是吃掉所有奶酪，不被怪物猫抓住。

听起来很有趣，对吧？让我们直接开始吧...

注意

为了使我们的代码更整洁，我们将保持我们的 JavaScript、CSS 和图像文件在单独的文件夹中。我们将有三个主要文件夹，名称如下：

css
img
scripts

游戏用户界面

为了开始构建我们的游戏，我们需要准备我们的画布。我们的 HTML 文件应类似于以下内容：

<html>
  <head>
  </head>
  <body>
    <canvas id="main_canvas"></canvas>
  </body>
</html>

我们的游戏用户界面将在<body></body>标签中。我们很快将为我们的画布添加 JavaScript。

在css文件夹中，创建一个名为styles.css的 CSS 文件，该文件将包含以下代码，用于我们的 HTML body、canvas和一个播放button：

body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
}

canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: 10px solid rgba(63, 72, 204, 0.7);
  border-radius: 20px;
  box-shadow: 0 0 500px 100px #ffffff;
}

button {
  width: 100%;
  height: 100%;
  background-color: #000000;
  color: #FFFFFF;
  font-size: 60px;
  opacity: 0;
  z-index: 1000;
  transition: 5s ease;
  visibility: hidden;
}

在同一文件夹中创建另一个 CSS 文件，命名为reset.css，并将以下代码添加到 CSS 文件中。此文件将设计游戏的初始屏幕的用户界面：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 0;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

保存这两个文件，并在<head></head>标签中使用以下代码将它们包含在你的 HTML 文件中：

<link href="css/styles.css" rel="stylesheet"/>
<link href="css/reset.css" rel="stylesheet"/>

如果你现在打开一个浏览器的 HTML 文件，你会看到以下图片：

我们将在前面的矩形中绘制我们的游戏界面。

为游戏添加功能

为了添加用户界面和游戏功能，我们需要 JavaScript。在scripts文件夹中，我们需要以下 JavaScript 文件：

app.main.js
app.display_functions.js
app.init.js
app.key_handler.js
app.movement_functions.js
app.constants.js

`app.main.js`文件

我们的app.main.js文件应包含以下函数，该函数将处理app.key_handler.js文件和你的电脑键盘。它还将调用app.init.js文件以初始化我们的变量。

注意

这里我们使用了app.main.js；你不需要将你的 JavaScript 文件命名为这样。但保持命名约定是一个好习惯。

以下代码是app.main.js文件的内容：

(function () {
  "use strict";
  APP.Init();
  APP.timer = setInterval(APP.Show_World, 1000 / APP.GAME_FPS);
  window.addEventListener("keydown", APP.Keydown_Handler, false);
  APP.Reset = function () {
    APP.map.Init();
    APP.player.Init();
    APP.monsters.Init();
    APP.blackout.style.transition = "0s";
    APP.blackout.style.visibility = "hidden";
    setTimeout(function () {
      APP.timer = setInterval(APP.Show_World, 1000 / APP.GAME_FPS);
      APP.blackout.style.opacity = 0;
      APP.blackout.style.transition = "5s ease";
    }, 100);
  };
}());

`app.display_functions.js`文件

在我们的app.display_functions.js文件中，我们将编写一个函数，其中我们将包含APP.Show_world函数，该函数在app.init.js文件中使用。

函数应包含以下代码（参考注释以了解每一步的作用）：

  APP.Show_World = function () {
    var i,
    dots = 0; //initialized cheese number
    dots = APP.map.Draw(); //put our cheese on the canvas
    if (!dots) {
      APP.Game_Over("YOU WIN!"); //if all cheese are ate by the rat, then the screen should display this.
    }
    */This loop is determine if the rat is caught by the cats  */
    for (i = 0; i < APP.MONSTERS_QUANTITY; i++) {
      if (APP.monsters[i].x === APP.player.x) {
        if (APP.monsters[i].y === APP.player.y) {
          APP.Game_Over("YOU LOSE!");
        }
      }
    }
    APP.monsters.Move(); //cats' movement function
    APP.player.Move();  // rat's movement function
    APP.player.Check_For_Dots(); //This function will check number of chees. 
    APP.portals.Show(); //This will display two portals by using these the rat can escape. 
    APP.player.Show(); //This will show the rat on the canvas. 
      /* this function will show the monster on the canvas */
    for (i = 0; i < APP.MONSTERS_QUANTITY; i++) {
      APP.monsters[i].Show();
    }
  };

APP.map.Draw函数将包含以下代码：

    APP.map.Draw = function () {
      var i, j, image, x, y, dot_counter = 0; //initialized variables. 
      /*this loop will create our game map/maze */
      for (i = 0; i < APP.MAP_WIDTH; i++) {
        for (j = 0; j < APP.MAP_HEIGHT; j++) {
          image = APP.images[APP.map.cells[j][i]];
          x = i * APP.CELL_WIDTH;
          y = j * APP.CELL_HEIGHT;
          APP.context.drawImage(image, x, y);
          if (APP.map.cells[j][i] === APP.DOT_CELL_DIGIT) {
            dot_counter++;
          }
        }
      }
      return dot_counter;
    };

对于猫的移动，我们将使用APP.monsters.Move函数，以下代码：

    APP.monsters.Move = function () {
      var i;
      /*This loop will define the cats' quantity */
      for (i = 0; i < APP.MONSTERS_QUANTITY; i++) {
        if (APP.monsters[i].frame === APP.monsters[i].speed) {
          if (APP.monsters[i].direction !== APP.Direction.STOP) {
            APP.monsters[i].previus_direction =
            APP.monsters[i].direction;
          }
          APP.monsters[i].Select_Direction(); //Will select the cats' direction.
          APP.monsters[i].Check_Direction(); //Will check the cats' direction.
          APP.monsters[i].Check_Wall();//Will check the surroundings of the canvas or any block. 
        }
        /* These conditions will check the boundaries of the canvas and make the cats move. */
        if (APP.monsters[i].direction !== APP.Direction.STOP) {
          if (APP.monsters[i].up) {
            APP.monsters[i].Move_Up();
          }
          if (APP.monsters[i].down) {
            APP.monsters[i].Move_Down();
          }
          if (APP.monsters[i].left) {
            APP.monsters[i].Move_Left();
          }
          if (APP.monsters[i].right) {
            APP.monsters[i].Move_Right();
          }
        }
      }
    };

当使用以下代码调用APP.player.Move()函数时，我们的老鼠将会移动：

    APP.player.Move = function () {
      if (APP.player.frame === APP.player.speed) {
        APP.player.Check_Direction();
        APP.player.Check_Wall(); //This will check wall
      }
      /* these conditions will check our rat's valid movements */
      if (APP.player.direction !== APP.Direction.STOP) {
        if (APP.player.up) {
          APP.player.Move_Up(); 
        }
        if (APP.player.down) {
          APP.player.Move_Down();
        }
        if (APP.player.left) {
          APP.player.Move_Left();
        }
        if (APP.player.right) {
          APP.player.Move_Right();
        }
      }
    };
    /*this function will feed our rat the chees */
    APP.player.Check_For_Dots = function () {
      if (APP.map.marks[APP.player.y][APP.player.x] === APP.DOT_MARK) {
        APP.player.bonuses++;
        APP.map.marks[APP.player.y][APP.player.x] = APP.BLANK_MARK;
        APP.map.cells[APP.player.y][APP.player.x] = APP.BLANK_CELL_DIGIT;
      }
    };

现在，我们将通过调用以下代码的函数，在移动老鼠的同时使我们的老鼠在画布上可见：

APP.player.Show = function () {
  //initializing our needed variables. 
  var figure_offset = 5,
  frame_number = 2 - Math.floor(this.frame / 3),
  frame_offset = 1 - this.frame / this.speed,
  image, x, y;
  /* conditions for the rat's direction for up, down, left, right*/
  if (this.up) {
    image = this.up_images[frame_number];
    x = (this.x * APP.CELL_WIDTH) - figure_offset;
    y = ((this.y - frame_offset) * APP.CELL_HEIGHT) - figure_offset;

  } else if (this.down) {
    image = this.down_images[frame_number];
    x = (this.x * APP.CELL_WIDTH) - figure_offset;
    y = ((this.y + frame_offset) * APP.CELL_HEIGHT) - figure_offset;

  } else if (this.right) {
    image = this.right_images[frame_number];
    x = ((this.x + frame_offset) * APP.CELL_WIDTH) - figure_offset;
    y = (this.y * APP.CELL_HEIGHT) - figure_offset;

  } else {
    image = this.left_images[frame_number];
    x = ((this.x - frame_offset) * APP.CELL_WIDTH) - figure_offset;
    y = (this.y * APP.CELL_HEIGHT) - figure_offset;

  }
  APP.context.drawImage(image, x, y);
};

要在画布上显示我们的猫，我们需要在APP.Show_Monster()函数中使用以下代码：

APP.Show_Monster = function () {
  //initializing needed variables. 
  var figure_offset = 15,
  frame_offset = 1 - this.frame / this.speed,
  image, x, y;
  /* binding the cats' directions for 4 directions*/
  if (this.up) {
    image = this.up_images[0];
    x = (this.x * APP.CELL_WIDTH) - figure_offset;
    y = ((this.y - frame_offset) * APP.CELL_HEIGHT) - figure_offset;

  } else if (this.down) {

    image = this.down_images[0];
    x = (this.x * APP.CELL_WIDTH) - figure_offset;
    y = ((this.y + frame_offset) * APP.CELL_HEIGHT) - figure_offset;

  } else if (this.right) {

    image = this.right_images[0];
    x = ((this.x + frame_offset) * APP.CELL_WIDTH) - figure_offset;
    y = (this.y * APP.CELL_HEIGHT) - figure_offset;

  } else {

    image = this.left_images[0];
    x = ((this.x - frame_offset) * APP.CELL_WIDTH) - figure_offset;
    y = (this.y * APP.CELL_HEIGHT) - figure_offset;

  }

  APP.context.drawImage(image, x, y);
};

要显示门户，我们需要编写另一个名为APP.portals.Show ()的函数，包括以下代码：

    APP.portals.Show = function () {
      //initialized variables and incremented. 
      var offset, frame_offset, sw = +!this.raise;
      frame_offset = sw - this.frame_counter / (this.speed * APP.GAME_FPS); 
      /*controlled frame of the game */
      offset = Math.abs(this.width * frame_offset);
      APP.context.drawImage(this[0].image, this[0].x - offset, this[0].y);
      APP.context.drawImage(this[1].image, this[1].x + offset, this[1].y);
      this.frame_counter++;
      if (this.frame_counter === this.speed * APP.GAME_FPS) {
        this.frame_counter = 0;
        this.raise = !this.raise;
      }
    };

游戏结束后，用户需要看到一条消息或使屏幕模糊。为此，我们需要声明另一个名为APP.Game_Over()的函数，包括以下代码：

    APP.Game_Over = function (condition) {
      clearInterval(APP.timer);
      APP.blackout = document.getElementById("blackout");
      APP.blackout.textContent = condition;
      APP.blackout.style.visibility = "visible";
      APP.blackout.style.opacity = 0.7;
    };

app.init.js 文件

我们的app.init.js文件将包含一个函数。在这个函数中，我们将声明以下变量：

  APP.map = {};
  APP.player = {};
  APP.monsters = [{}, {}, {}, {}];
  APP.portals = [{}, {}];
  APP.images = [];
  APP.timer = {};
  APP.canvas = {};
  APP.context = {};
  APP.blackout = document.getElementById("blackout");

编写一个包含更多变量的函数，如下所示：

  APP.Init = function () {
    APP.map.Init();
    APP.player.Init();
    APP.portals.Init();
    APP.monsters.Init();
    APP.images.Init();
    APP.canvas.Init();
  };

现在，我们将初始化我们的游戏地图：

APP.map.Init = function () {

  //initializing few variables ; few of them may look ugly, but don't worry they are a little bit random. 
  var i, j, map_in_strings = [
                "5000000000000250000000000002",
                "1777777777777117777777777771",
                "1750027500027117500027500271",
                "1716617166617117166617166171",
                "1740037400037437400037400371",
                "1777777777777777777777777771",
                "1750027527500000027527500271",
                "1740037117400250037117400371",
                "1777777117777117777117777771",
                "4000027140026116500317500003",
                "0000217150036436400217150000",
                "6666117116666666666117116666",
                "0000317116502665026117140000",
                "0000037436153664216437400000",
                "6666667666116666116667666666",
                "0000027526140000316527500000",
                "0000217116400000036117150000",
                "6666117116666666666117116666",
                "0000317116500000026117140000",
                "5000037436400250036437400002",
                "1777777777777117777777777771",
                "1750027500027117500027500271",
                "1740217400037437400037150371",
                "1777117777777777777777117771",
                "4027117527500000027527117503",
                "5037437117400250037117437402",
                "1777777117777117777117777771",
                "1750000340027117500340000271",
                "1740000000037437400000000371",
                "1777777777777777777777777771",
                "4000000000000000000000000003"
            ];
  APP.map.cells = [];
  for (i = 0; i < APP.MAP_HEIGHT; i++) {
    APP.map.cells[i] = [];
    for (j = 0; j < APP.MAP_WIDTH; j++) {
      APP.map.cells[i][j] = +map_in_strings[i].charAt(j);
    }
  }
  APP.map.marks = [];
  /* This loop will determine the map's size */
  for (i = 0; i < APP.MAP_HEIGHT; i++) {
    APP.map.marks[i] = [];
    for (j = 0; j < APP.MAP_WIDTH; j++) {
      if (APP.map.cells[i][j] <= APP.WALL_CELL_DIGIT) {
        APP.map.marks[i][j] = APP.WALL_MARK;
      } else if (APP.map.cells[i][j] === APP.BLANK_CELL_DIGIT) {
        APP.map.marks[i][j] = APP.BLANK_MARK;
      } else if (APP.map.cells[i][j] === APP.DOT_CELL_DIGIT) {
        APP.map.marks[i][j] = APP.DOT_MARK;
      }
    }
  }
};

Rat-man!的图片！

要构建游戏，我们需要一些图片。我们将把所有图片保存在img文件夹中。在img文件夹中，我们将创建四个文件夹，如下所示：

monsters
player
portal
walls

我们将在img文件夹中保留两张图片，分别命名为dot.png和blank.png。

怪物文件夹

在monsters文件夹中，创建四个以我们猫的名字命名的文件夹。

假设我们的猫的名字如下（你可以随意命名）：

blinky
inky
pinky
clyde

每个猫文件夹将包含四个文件夹，用于存放猫的定向图片。文件夹名称如下：

up
down
left
right

每个方向的文件夹都应该包含我们猫的图片。图片名称应该是0.png。

你需要保持你的图片是 50 x 50 px。

玩家文件夹

player文件夹应该包含四个文件夹，用于我们老鼠的方向。文件夹的命名如下所示：

up
down
left
right

每个文件夹都应该包含老鼠的定向图片。需要两张图片，0.png和1.png。一张是张嘴的老鼠，另一张是闭嘴的老鼠。图片需要是 50 x 50 px。

门户文件夹

portal文件夹应该包含两张门户图片，我们的老鼠将通过这个门户从一端移动到另一端。图片名称应该是0.png和1.png。

墙壁文件夹

walls文件夹应该有五张图片来绘制画布中的墙壁。

图片应该命名为0.png、1.png、2.png、3.png和4.png。这些图片将是墙壁的角落和直线。

我们游戏构建中使用的图片的层次结构表示如下：

为我们的猫添加图片

我们将编写四个函数来为我们的猫添加完美的图片。函数应该类似于以下函数：

  APP.monsters[0].Init = function () {
    APP.monsters[0].up_images = [];
    APP.monsters[0].right_images = [];
    APP.monsters[0].down_images = [];
    APP.monsters[0].left_images = [];
    APP.monsters[0].up_images[0] = new Image();
    APP.monsters[0].up_images[0].src = "img/monsters/blinky/up/0.png";
    APP.monsters[0].right_images[0] = new Image();
    APP.monsters[0].right_images[0].src = "img/monsters/blinky/right/0.png";
    APP.monsters[0].down_images[0] = new Image();
    APP.monsters[0].down_images[0].src = "img/monsters/blinky/down/0.png";
    APP.monsters[0].left_images[0] = new Image();
    APP.monsters[0].left_images[0].src = "img/monsters/blinky/left/0.png";
    APP.monsters[0].up = false;
    APP.monsters[0].right = true;
    APP.monsters[0].down = false;
    APP.monsters[0].left = false;
    APP.monsters[0].x = APP.INITIAL_BLINKY_X;
    APP.monsters[0].y = APP.INITIAL_BLINKY_Y;
    APP.monsters[0].frame = APP.INITIAL_BLINKY_FRAME;
    APP.monsters[0].speed = APP.BLINKY_SPEED;
  };

我们将把APP.monsters[0].Init = function ();函数的索引号改为APP.monsters[1].Init = function ();，用于第二只猫。第三和第四只猫分别是APP.monsters[2].Init = function ()和APP.monsters[3].Init = function ()。

我们还需要更改猫的图片位置和索引号。

为了使用图像初始化墙壁和奶酪，我们需要编写一个函数，如下所示：

  APP.images.Init = function () {
    var i;
    for (i = 0; i <= APP.DOT_CELL_DIGIT; i++) {
      APP.images[i] = new Image();
    }
    APP.images[0].src = "img/walls/0.png";
    APP.images[1].src = "img/walls/1.png";
    APP.images[2].src = "img/walls/2.png";
    APP.images[3].src = "img/walls/3.png";
    APP.images[4].src = "img/walls/4.png";
    APP.images[5].src = "img/walls/5.png";
    APP.images[6].src = "img/blank.png";
    APP.images[7].src = "img/dot.png";
  };

绘制画布

我们将通过将以下函数添加到app.init.js文件中来绘制我们的画布：

APP.canvas.Init = function () {
  APP.canvas = document.getElementById("main_canvas");
  APP.canvas.width = APP.MAP_WIDTH * APP.CELL_WIDTH;
  APP.canvas.height = APP.MAP_HEIGHT * APP.CELL_HEIGHT;
  APP.context = APP.canvas.getContext("2d");
  APP.context.fillStyle = APP.BG_COLOR;
  APP.context.fillRect(0, 0, APP.canvas.width, APP.canvas.height);
};

`app.key_handler.js`文件

现在，在app.key_handler.js文件中，我们将编写代码，让玩家能够通过键盘移动我们的老鼠。代码应该看起来类似于以下内容：

APP.Keydown_Handler = function (event) {
  "use strict";
  var KEYS = {
    /* We will initialize the arrow keys first. 37 = left key, 38 
      = up key, 39 = right key and 40 = down key. */
    LEFT    : 37,
    UP      : 38,
    RIGHT   : 39,
    DOWN    : 40
  }; 
  /* This switch-case will handle the key pressing and the rat's 
    movement. */
  switch (event.keyCode) {
    case KEYS.UP:
      APP.player.direction = APP.Direction.UP;
      break;
    case KEYS.RIGHT:
      APP.player.direction = APP.Direction.RIGHT;
      break;
    case KEYS.DOWN:
      APP.player.direction = APP.Direction.DOWN;
      break;
    case KEYS.LEFT:
      APP.player.direction = APP.Direction.LEFT;
      break;
  }
};

`app.movement_functions.js`文件

我们需要查看在按键时墙壁的结束或开始位置。当我们到达边缘时，我们需要停止移动老鼠。因此，我们必须为此设置一些条件。第一个是检查方向。函数可以写成以下内容：

  APP.Check_Direction = function () {
    switch (this.direction) {
      case APP.Direction.UP:
        if (APP.map.marks[this.y - 1][this.x] !== APP.WALL_MARK){
          this.up = true;
          this.down = false;
          this.right = false;
          this.left = false;
          return true;
        }
        break;
      case APP.Direction.DOWN:
        if (APP.map.marks[this.y + 1][this.x] !== APP.WALL_MARK) {
          this.up = false;
          this.down = true;
          this.right = false;
          this.left = false;
          return true;
        }
        break;
      case APP.Direction.RIGHT:
        if (APP.map.marks[this.y][this.x + 1] !== APP.WALL_MARK) {
          this.up = false;
          this.down = false;
          this.right = true;
          this.left = false;
          return true;
        }
        break;
      case APP.Direction.LEFT:
        if (APP.map.marks[this.y][this.x - 1] !== APP.WALL_MARK) {
          this.up = false;
          this.down = false;
          this.right = false;
          this.left = true;
          return true;
        }
        break;
    }
    return false;
  };

在检查方向的同时，我们也需要向正确的方向移动。选择方向的函数可以写成以下内容：

APP.Select_Direction = function () {
  var possible_directions = [],
  direction_quantity = 9,
  rnd;
  switch (this.previus_direction) {
    case APP.Direction.UP:
      possible_directions[0] = APP.Direction.UP;
      possible_directions[1] = APP.Direction.UP;
      possible_directions[2] = APP.Direction.UP;
      possible_directions[3] = APP.Direction.UP;
      possible_directions[4] = APP.Direction.UP;
      possible_directions[5] = APP.Direction.UP;
      possible_directions[6] = APP.Direction.RIGHT;
      possible_directions[7] = APP.Direction.DOWN;
      possible_directions[8] = APP.Direction.LEFT;
      break;
    case APP.Direction.RIGHT:
      possible_directions[0] = APP.Direction.RIGHT;
      possible_directions[1] = APP.Direction.RIGHT;
      possible_directions[2] = APP.Direction.RIGHT;
      possible_directions[3] = APP.Direction.RIGHT;
      possible_directions[4] = APP.Direction.RIGHT;
      possible_directions[5] = APP.Direction.RIGHT;
      possible_directions[6] = APP.Direction.UP;
      possible_directions[7] = APP.Direction.DOWN;
      possible_directions[8] = APP.Direction.LEFT;
      break;
    case APP.Direction.DOWN:
      possible_directions[0] = APP.Direction.DOWN;
      possible_directions[1] = APP.Direction.DOWN;
      possible_directions[2] = APP.Direction.DOWN;
      possible_directions[3] = APP.Direction.DOWN;
      possible_directions[4] = APP.Direction.DOWN;
      possible_directions[5] = APP.Direction.DOWN;
      possible_directions[6] = APP.Direction.UP;
      possible_directions[7] = APP.Direction.RIGHT;
      possible_directions[8] = APP.Direction.LEFT;
      break;
    case APP.Direction.LEFT:
      possible_directions[0] = APP.Direction.LEFT;
      possible_directions[1] = APP.Direction.LEFT;
      possible_directions[2] = APP.Direction.LEFT;
      possible_directions[3] = APP.Direction.LEFT;
      possible_directions[4] = APP.Direction.LEFT;
      possible_directions[5] = APP.Direction.LEFT;
      possible_directions[6] = APP.Direction.UP;
      possible_directions[7] = APP.Direction.RIGHT;
      possible_directions[8] = APP.Direction.DOWN;
      break;
  }
  rnd = Math.floor(Math.random() * direction_quantity);
  this.direction = possible_directions[rnd];
};

现在，我们必须检查墙壁。我们可以通过在函数中添加一些条件来实现这一点，如下所示：

  APP.Check_Wall = function () {
    if (this.up) {
      if (APP.map.marks[this.y - 1][this.x] !== APP.WALL_MARK) {
        this.up = true;
        this.down = false;
        this.right = false;
        this.left = false;
      } else {
        this.direction = APP.Direction.STOP;
      }
    }

    if (this.right) {
      if (APP.map.marks[this.y][this.x + 1] !== APP.WALL_MARK) {
        this.up = false;
        this.down = false;
        this.right = true;
        this.left = false;
      } else {
        this.direction = APP.Direction.STOP;
      }
    }

    if (this.down) {
      if (APP.map.marks[this.y + 1][this.x] !== APP.WALL_MARK) {
        this.up = false;
        this.down = true;
        this.right = false;
        this.left = false;
      } else {
        this.direction = APP.Direction.STOP;
      }
    }

    if (this.left) {
      if (APP.map.marks[this.y][this.x - 1] !== APP.WALL_MARK) {
        this.up = false;
        this.down = false;
        this.right = false;
        this.left = true;
      } else {
        this.direction = APP.Direction.STOP;
      }
    }
  };

箭头键的移动应该定义良好。我们应该为箭头键创建以下函数：

APP.Move_Up = function () {
  if (this.frame === 0) {
    this.frame = this.speed;
    this.y--;
  } else {
    this.frame--;
  }
  if (this.y < 0) {
    this.y = APP.MAP_HEIGHT - 1;
  }
};
APP.Move_Right = function () {
  if (this.frame === 0) {
    this.frame = this.speed;
    this.x++;
  } else {
    this.frame--;
  }
  if (this.x >= APP.MAP_WIDTH) {
    this.x = 0;
  }
};
APP.Move_Down = function () {
  if (this.frame === 0) {
    this.frame = this.speed;
    this.y++;
  } else {
    this.frame--;
  }
  if (this.y >= APP.MAP_HEIGHT) {
    this.y = 0;
  }
};
APP.Move_Left = function () {
  if (this.frame === 0) {
    this.frame = this.speed;
    this.x--;
  } else {
    this.frame--;
  }
  if (this.x < 0) {
    this.x = APP.MAP_WIDTH - 1;
  }
};

`app.constants.js`文件

为了保持我们的游戏画布干净整洁，我们需要使用一些固定变量（例如，地图高度、单元格高度、地图宽度、单元格宽度等）初始化几个变量。我们可以在app.constants.js文件中编写以下代码来完成。通过查看代码中的注释，你可以清楚地了解代码将如何工作：

var APP = {};
(function () {
  "use strict";
  //used for map's size and each cell's size
  APP.MAP_WIDTH = 28;
  APP.MAP_HEIGHT = 31;
  APP.CELL_WIDTH = 20;
  APP.CELL_HEIGHT = 20;
  APP.BG_COLOR = "#000000";
  APP.GAME_FPS = 40;
  APP.PLAYER_SPEED = 8;
  APP.INITIAL_PLAYER_FRAME = 8;
  APP.INITIAL_PLAYER_X = 14;
  APP.INITIAL_PLAYER_Y = 23;
  APP.WALL_CELL_DIGIT = 5;
  APP.BLANK_CELL_DIGIT = 6;
  APP.DOT_CELL_DIGIT = 7;
  APP.WALL_MARK = "W";
  APP.BLANK_MARK = "B";
  APP.DOT_MARK = "D";
  APP.PORTAL_BLINKING_SPEED = 2;
  APP.PORTAL_WIDTH = 20;
  APP.FIRST_PORTAL_X = 0;
  APP.FIRST_PORTAL_Y = 265;
  APP.SECOND_PORTAL_X = 510;
  APP.SECOND_PORTAL_Y = 265;
  APP.MONSTERS_QUANTITY = 4;
  APP.INKY_SPEED = 7;
  //for the cat's speed and position. 
  APP.INITIAL_INKY_X = 12;
  APP.INITIAL_INKY_Y = 14;
  APP.INITIAL_INKY_FRAME = 7;
  APP.PINKY_SPEED = 7;
  APP.INITIAL_PINKY_X = 13;
  APP.INITIAL_PINKY_Y = 14;
  APP.INITIAL_PINKY_FRAME = 4;
  APP.BLINKY_SPEED = 7;
  APP.INITIAL_BLINKY_X = 14;
  APP.INITIAL_BLINKY_Y = 11;
  APP.INITIAL_BLINKY_FRAME = 4;
  APP.CLYDE_SPEED = 7;
  APP.INITIAL_CLYDE_X = 15;
  APP.INITIAL_CLYDE_Y = 14;
  APP.INITIAL_CLYDE_FRAME = 7;
  APP.Direction = {
    UP      : "UP",
    RIGHT   : "RIGHT",
    DOWN    : "DOWN",
    LEFT    : "LEFT",
    STOP    : "STOP"
  };
})();

玩游戏

如果你正确地集成了代码，并且你的 HTML 文件现在看起来类似于以下内容，你现在可以运行 HTML 文件：

<html>
  <head>
    <link href="css/reset.css" rel="stylesheet"/>
    <link href="css/styles.css" rel="stylesheet"/>
  </head>
  <body>
    <canvas id="main_canvas"></canvas>
    <button id="blackout" onclick="APP.Reset()"></button>
    <script src="img/app.constants.js"></script>
    <script src="img/app.init.js"></script>
    <script src="img/app.display_functions.js"></script>
    <script src="img/app.movement_functions.js"></script>
    <script src="img/app.key_handler.js"></script>
    <script src="img/app.main.js"></script>
  </body>
</html>

在你的浏览器上运行 HTML 文件后，你将能够看到以下屏幕：

恭喜！你已经成功构建了“鼠人”！

要玩游戏，点击画布上的任何位置，并使用箭头键移动你的老鼠。

如果你失去了所有生命，你将看到以下屏幕：

如果你赢了，你将看到以下屏幕：

摘要

我们已经构建了“鼠人”！希望你现在正在玩你构建的游戏。如果你在编码数小时后无法玩游戏，不要担心。保持冷静，再试一次。整个源代码和所需图像都包含在书中。你可以下载并运行它。然而，在这样做之前，我建议你至少尝试两次。让我们继续前进到第九章，使用面向对象编程整理代码，以更好地了解创建文件或文件夹以及访问它们的方法。

第九章. 使用 OOP 整理你的代码

在本章中，我们将学习面向对象编程（OOP）并讨论著名游戏Hangman的代码。

"面向对象编程（OOP）是一种使用抽象来创建基于现实世界的模型的编程范式。OOP 使用了之前确立的范式中的几种技术，包括模块化、多态性和封装。" 或者 "面向对象编程语言通常通过它们使用类来创建具有相同属性和方法的多重对象来识别。"

你可能已经假设 JavaScript 是一种面向对象编程语言。是的，你完全正确。让我们看看为什么它是面向对象的。如果一个计算机编程语言具有以下几个特性，我们称之为面向对象：

继承
多态性
封装
抽象

在继续之前，让我们来讨论一下对象。我们在 JavaScript 中以以下方式创建对象：

var person = new Object();
person.name = "Harry Potter";
person.age = 22;
person.job = "Magician";

我们为一个人创建了一个对象。我们添加了一些人的属性。

如果我们想访问对象的任何属性，我们需要调用该属性。

假设你想显示前一个person对象的name属性弹窗。你可以使用以下方法来完成：

person.callName = function(){
  alert(this.name);
};

我们可以将前面的代码写成以下形式：

var person = {
  name: "Harry Potter",
  age: 22,
  job: "Magician",
  callName: function(){
  alert(this.name);
  }
};

JavaScript 中的继承

继承意味着从父母或祖先那里获得某些东西（例如，特征、品质等）。在编程语言中，当一个类或对象基于另一个类或对象，以保持父类或对象的行为时，这被称为继承。

我们也可以说这是一个获取其他事物属性或行为的概念。

假设 X 从 Y 那里继承了一些东西；这就像 X 是 Y 的一种类型。

JavaScript 具有继承能力。让我们看看一个例子。鸟从动物那里继承，因为鸟是动物的一种。因此，鸟可以做动物能做的事情。

在 JavaScript 中，这种关系稍微复杂一些，需要一种语法。我们需要使用一个特殊对象，称为prototype，它将属性分配给一个类型。我们需要记住，只有函数才有原型。我们的Animal函数应该看起来类似于以下内容：

function Animal(){
//We can code here. 
};

要添加一些函数的属性，我们需要添加一个原型，如下所示：

Animal.prototype.eat = function(){
  alert("Animal can eat.");
};

让我们为我们的Bird函数创建原型。我们的函数和原型应该看起来类似于以下内容：

function Bird(){
};
Bird.prototype = new Animal();
Bird.prototype.fly = function(){
  alert("Birds can fly.");
};
Bird.prototype.sing = function(){
  alert("Bird can sing.");
};

原型和函数的结果是，你创建的任何Bird都将具有Animal和Bird的属性。然而，如果你创建Animal，这将只具有Animal的属性。Animal的属性被Bird继承。

因此，我们可以说 JavaScript 具有继承属性。

JavaScript 中的封装

在面向对象编程（OOP）中，封装是允许对象将公共和私有类的成员组合在一个单一名称下的最重要的概念之一。我们使用封装来保护我们的类免受意外或故意的错误。封装意味着将某物封装在或好像它在一个胶囊中。

现在，我们将看看 JavaScript 是否支持封装。如果它支持，我们可以说 JavaScript 是一种面向对象编程语言。让我们看看以下示例：

var person = {
  "name" : "Harry Potter",
  "age" : 22,
};
alert(person.name);
person.name = "John";
alert(person.name);

如果我们在控制台运行这段代码，第一个警告框将显示以下图片：

我们将变量name改为John。因此，第二个警告框将与以下图片相似：

如果我们意外地将数字赋值给name变量会发生什么？

将数字赋值给name变量是完全可接受的。就 JavaScript 而言，一个变量可以接受任何类型的数据作为其值。然而，我们不想用数字代替名字。我们该怎么办？我们可以使用 JavaScript 的封装属性，如下所示：

var person = function () {
  var Name = "Harry Potter";
  var reg = new RegExp(/\d+/);
  return { 
    "setName" : function (newValue) {
      if( reg.test(newValue) ) {
        alert("Invalid Name");
      }
      else {
        Name = newValue;
      }
    },
    "getName" : function () {
      return Name; 
    }
  }; 
}(); 

alert(person.getName());   // Harry potter
person.setName( "John" );
alert(person.getName());  // John
person.setName( 42 ); // Invalid Name; the name is not changed.
person.Name = 42;     // Doesn't affect the private Name variable.
alert(person.getName());  // John is printed again.

现在，如果我们把上面的代码在控制台运行，第一个输出将显示一个弹出窗口，显示哈利·波特，因为我们只调用了getName()函数。getName()函数有一个初始值，即Harry Potter：

第二次输出如下，因为我们改变了person的Name属性为John，并再次调用了getName()函数：

第三次输出将如下所示，因为我们尝试将一个数字推送到字符串变量中。名字不能是整数，因此，在if语句下出现了无效名称：

第四次输出将如下所示，因为数字没有被添加到人的Name属性中。因此，我们将得到最后推送到Name属性中的数据：

我们现在可以确认 JavaScript 支持封装。

JavaScript 也支持多态和抽象。如果你想了解它们，可以参考以下链接：

developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

让我们来做些有趣的事情。你可能听说过一个叫做“猜字谜”的游戏。我们将讨论这个游戏中面向对象编程（OOP）的应用。首先，让我们来介绍一下这个游戏。

玩家需要猜一个单词。如果他猜对了单词，他就安全了；否则，他将被绞死。看看以下图片，以获得关于游戏的清晰概念，如下所示：

拆解猜字谜

Hangman 游戏有两个文件夹和一个 HTML 文件。这两个文件夹分别命名为css和js。index.html HTML 文件应该包含以下代码：

<html lang="en" ng-app="hangman"> 
  <head>
    <title>Hangman</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="img/angular.min.js"></script>
  </head>
  <body ng-controller="StartHangman">
    <p>Hangman</p>
    <svg width="400" height="400">
      <rect ng-show="failedGuess.length >= 1" x="0" y="0" width="40" height="400"></rect>
      <rect ng-show="failedGuess.length >= 2" x="40" y="20" width="200" height="40"></rect>
      <rect ng-show="failedGuess.length >= 3" x="173" y="50" width="4" height="100"></rect>
      <circle ng-show="failedGuess.length >= 3" cx="175" cy="120" r="40"></circle>
      <line ng-show="failedGuess.length >= 4" x1="175" y1="150" x2="175" y2="185" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
      <line ng-show="failedGuess.length >= 4" x1="175" y1="180" x2="100" y2="240" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
      <line ng-show="failedGuess.length >= 5" x1="175" y1="180" x2="250" y2="240" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
      <line ng-show="failedGuess.length >= 6" x1="175" y1="180" x2="175" y2="265" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
      <line ng-show="failedGuess.length >= 7" x1="175" y1="260" x2="120" y2="340" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
      <line ng-show="failedGuess.length >= 8" x1="175" y1="260" x2="230" y2="340" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
    </svg>

    <div ng-show="stage == 'initial'">
      <h2>Please enter your secret words:</h2>
      <input type="text" ng-model="secretWords" autofocus ng-keyup="$event.keyCode == 13 ? startGame() : null">
      <button ng-click="startGame()">Enter</button>
    </div>

    <div ng-show="stage == 'play'">
      <h1>{{ answer }}</h1>
      <h2>Failed guess ({{ failedGuess.length }}) = {{ failedGuess}}</h2>

      <input type="text" ng-model="charGuess" id="char-guess" ng-keyup="$event.keyCode == 13 ? guess(charGuess) : null" placeholder="Guess a letter">
      <button ng-click="guess(charGuess)">Enter</button>
    </div>

    <div ng-show="stage == 'won'">
      <h1>You Win! :)</h1>
      <h2>That's right, the secret words is {{ secretWords }}</h2>
      <p>Press F5 to replay</p>
    </div>

    <div ng-show="stage == 'lost'">
      <h1>You Lose! :(</h1>
      <h2>The secret word is {{ secretWords }}</h2>
      <p>Press F5 to replay</p>
    </div>

    <script src="img/hangman.js"></script>
  </body>
</html>

css文件夹应该有一个styles.css文件。styles.css文件应该包含以下代码：

body {
  font-family: monospace;
  text-align: center;
  font-size: 16px;
  line-height: 1.40;
}

input[type="text"] {
  padding: 5px;
  font-family: monospace;
  height: 30px;
  font-size: 1.8em;
  background-color: #fff;
  border: 2px solid #000;
  vertical-align: bottom;
}

svg {
  margin: 0 0 30px;
}

button {
  cursor: pointer;
  margin: 0;
  height: 44px;
  background-color: #fff;
  border: 2px solid #000;
}

js文件夹中应该有两个 JavaScript 文件，angular.min.js和hangman.js。

angular.min.js文件是一个框架。您可以从angularjs.org/下载它，或者它包含在本书的代码包中。

hangman.js文件应该包含以下代码：

var hangman = angular.module('hangman', []).controller('StartHangman', StartHangman);
  function StartHangman($scope, $document) {
    $scope.stage = "initial";
    $scope.secretWords = "";
    $scope.answer = "";
    $scope.failedGuess = [];
    var hasWon = function() {
      var foundDash = $scope.answer.search(/-/);
      return (foundDash == -1);
    }
    var hasLost = function() {
      return ($scope.failedGuess.length >= 8);
    }
    $scope.startGame = function() {
      $scope.secretWords = $scope.secretWords.toLowerCase();
      for(i in $scope.secretWords) {
        $scope.answer += $scope.secretWords[i] == ' ' ? ' ' : '-';
      }
      $scope.stage = "play"
    }
    $scope.guess = function(ch) {
      ch = ch.toLowerCase();
      $scope.charGuess = "";
      if(ch.length != 1) {
        if(ch.length > 1) {
          alert("Please only enter one character at a time");
        }
      return ;
    }
    /* If ch is already in the failed guess list */
    for(i in $scope.failedGuess) {
      if(ch == $scope.failedGuess[i]) return ;
    }
    /* Check if it's part of the answer */
    var found = false;
    $scope.answer = $scope.answer.split(""); /* convert to array of char */
    for(i in $scope.secretWords) {
      if($scope.secretWords[i] === ch) {
        found = true;
        $scope.answer[i] = ch;
      }
    }
    $scope.answer = $scope.answer.join(""); /* convert back to string */
    if(!found) {
      $scope.failedGuess.push(ch);
    }
    if(hasWon()) {
      $scope.stage = "won";
    }
    if(hasLost()) {
      $scope.stage = "lost";
    }
  }
}

让我们讨论一下代码。

我们使用var hangman = angular.module('hangman', []).controller('StartHangman', StartHangman);来导入我们的angular.min.js文件并开始控制游戏代码的其余部分。

我们编写了一个StartHangman($scope, $document) {}函数，我们将在这里编写代码。我们从angular.min.js文件中传递了两个变量，$scope和$document。

我们初始化了一些变量，如下所示：

$scope.stage = "initial";
$scope.secretWords = "";
$scope.answer = "";
$scope.failedGuess = [];

我们编写了两个函数，用于游戏的胜利和失败，如下所示：

var hasWon = function() {
  var foundDash = $scope.answer.search(/-/);
  return (foundDash == -1);
}
var hasLost = function() {
  return ($scope.failedGuess.length >= 8);
}

我们在这里固定了猜测次数。然后，我们编写了一个开始游戏的函数。我们创建了一个对象，并使用了 JavaScript 的继承属性，如下所示：

$scope.startGame = function() {
  $scope.secretWords = $scope.secretWords.toLowerCase();
  for(i in $scope.secretWords) {
    $scope.answer += $scope.secretWords[i] == ' ' ? ' ' : '-';
  }
  $scope.stage = "play"
}

我们从玩家那里获取输入以便将其存储为我们秘密的单词。

游戏的提示页面将类似于以下图片：

然后，我们最重要的函数$scope.guess = function(ch){}被引入。我们向该函数传递一个字符，并检查它是否与玩家输入的秘密单词中的任何字母匹配。

摘要

在本章中，你学习了面向对象语言的特点。我们还看到了在著名的 Hangman 游戏中使用面向对象特性的例子！我希望你喜欢创建和玩 Hangman。我们将在本书的下一章和最后一章中看到 JavaScript 的可能性。

第十章。可能性

在整本书中，我们探讨了与 JavaScript 相关的许多主题。你学习了如何与控制台玩耍；用 JavaScript、HTML 标签、CSS 属性和控制语句解决问题；使用 jQuery；在画布上绘制；构建项目等等。然而，你是否曾想过通过阅读本书和学习 JavaScript 而获得的机会？

好吧，在本章中，我们将探讨为什么学习 JavaScript 很重要，以及 JavaScript 的应用领域。

将 JavaScript 作为你的第一门编程语言

JavaScript 是最容易开始学习的语言。它不需要任何软件来运行。一个现代浏览器和记事本就足够开始用 JavaScript 编码了。JavaScript 拥有一些最好的在线学习材料。

例如 Codecademy (www.codecademy.com)、Code School (www.codeschool.com)、CodePen (codepen.io)、JS Bin (jsbin.com) 和 JSFiddle (jsfiddle.net) 等网站将帮助你快速学习 JavaScript。

JavaScript 到处都是

JavaScript 是几乎在所有浏览器中运行的唯一语言；甚至在智能手机浏览器中也是如此。由于网络无处不在，JavaScript 也无处不在。

JavaScript 开发者作为职业

如果你喜欢编程并想通过编程建立自己的职业生涯，JavaScript 是最适合这种需求的最佳语言之一。我可以这么说，很难找到比 JavaScript 更好的选择了。如果你看看一些网络开发趋势，你会发现实时网站就像桌面应用程序一样。在网站上进行大量用户交互，如拖放、音频和视频交互以及数据可视化，现在都很常见。所有这些大多都是使用 JavaScript 完成的。没有 JavaScript，我们就无法获得酷炫的网页应用程序（如 Google Map、Google Earth、Gmail、Facebook 等）。JavaScript 使一切成为可能。当你想构建网络应用程序时，没有其他语言比 JavaScript 更强大。现在的世界是基于网络的，而网络正是由 JavaScript 驱动的，以使其变得美丽、动态和安全。因此，选择 JavaScript 与 HTML 和 CSS 作为你的未来职业将是你在生活中做出的最佳决定之一。开发者被称为前端或全栈开发者。

所有任务都可以用 JavaScript 完成

使用 JavaScript，你可以做很多很酷的事情。从机器人技术到网络应用程序开发，JavaScript 是一个强大的工具。让我们看看人们如何在他们的技术生活中使用 JavaScript：

机器人技术
3D 游戏
为你的智能手机制作应用程序
运行网络服务器
运行 Ruby 和 Python
编写与操作系统无关的桌面应用程序
网络抓取和截图
网络分析
响应式和交互式内容
动画
创建 cookie

机器人技术

在机器人技术中，你需要用逻辑来控制你的机器人。在现实世界中，逻辑由微控制器处理。你可能听说过Arduino，这是一个处理微电子的开源硬件。基本上，Arduino 使用 C 代码来控制微控制器。然而，如果你知道 JavaScript，你也可以为其编写代码；与微处理器/微控制器一起工作并制作你的第一个机器人。你可以从nodebots.io/获取帮助，以了解 JavaScript 是如何用于构建机器人的。以下是一张 Arduino UNO 板子的图片：

Arduino UNO

三维游戏

我们在这本书中构建和开发了二维游戏。然而，相信我，你也可以用 JavaScript 构建令人惊叹的三维游戏。你甚至可以通过你喜欢的游戏手柄来玩它们。要使用游戏手柄玩游戏，你需要使用游戏手柄 API (wiki.mozilla.org/GamepadAPI)。

你可以在以下 URL 上玩一些用 JavaScript 构建的在线 3D 游戏：www.babylonjs.com/。

为你的智能手机制作应用

你有没有想过为你的智能手机制作一个应用？你可以用 JavaScript 为你的智能手机制作应用。智能手机有不同的平台（例如，Android、iOS、Tizen、Firefox OS 等）。每个平台都有自己的 API 和不同的编程语言。因此，我们需要考虑我们的代码库可能运行在任何设备上。为了确保这一点，我们可以使用 JavaScript 引擎，因为它可以在任何平台上运行。你可以使用Cordova (cordova.apache.org/)来了解如何使用 JavaScript 构建应用。Cordova 是一个基于每个设备 API 的 JavaScript 框架。你可以使用PhoneGap (phonegap.com/)或Meteor (www.meteor.com/)来用 JavaScript 构建智能手机应用。

运行网络服务器

你可能听说过网络服务器。服务器用于广播网站。你可以用 JavaScript 来管理你的服务器。JavaScript 可以处理所有操作并确保你域的安全。你可以使用Node.js (nodejs.org/)来运行最简单的网络服务器。要了解更多关于 JavaScript 网络服务器的信息，你可以看看www.firebase.com/。你可能对 JavaScript 有基本的了解，这是在服务器上执行任务所必需的。使用其他框架构建网络服务器可能会有很高的成本；然而，使用 JavaScript，你可以免费做到这一点，你甚至不需要为此购买任何软件。

运行 Ruby 和 Python

JavaScript 还可以用几行外部代码在你的浏览器上运行Python或Ruby。你可以通过添加库来在你的浏览器上包含这些编程语言的运行环境。要了解更多关于在浏览器上包含库和运行 Ruby 和 Python 代码的信息，你可以查看www.firebase.com。

编写与操作系统无关的桌面应用程序

由于 JavaScript 是平台无关的，你可以在 JavaScript 的帮助下构建 Web 应用程序，并在任何平台上运行它们。任何平台上的用户都可以在他们的浏览器上运行基于 JavaScript 的应用程序。你甚至可以使用 JavaScript 制作桌面应用程序。查看appjs.com/和electron.atom.io/来制作你的第一个基于 JavaScript 的桌面应用程序。

网络抓取和截图

从网站提取信息的技术称为网络抓取。要了解更多关于网络抓取的信息，你可以访问www.webscraper.io/。JavaScript 可以帮助你进行网络抓取。你可以查看nrabinowitz.github.io/pjscrape/来了解更多关于使用 JavaScript 进行网络抓取的信息。

你可以查看html2canvas.hertzen.com/来了解更多关于网站截图的信息。截图可以使用 JavaScript 完成。

网站分析

有时候，你可能需要知道谁在访问你的网站，你的网站通常被哪个 IP 地址访问，访问者属于哪个国家，以及更多关于跟踪访问者的信息。所有这些信息都可以使用 JavaScript 获取。

响应式和交互式内容

使用 JavaScript，你可以在你的网站和 Web 应用程序上创建响应式和交互式内容。你可以查看beta.rallyinteractive.com/、www.unfold.no/、www.2advanced.com/和www.newquest.fr/，了解他们如何使用 JavaScript 使他们的网站变得响应式和交互式。

动画

JavaScript 的神奇之处在于你可以用它来做动画。有很多酷炫的 JavaScript 动画库。查看greensock.com/gsap来了解更多关于著名的 JavaScript 动画库GreenSock的信息。还有一个著名的 JavaScript 动画库叫做Velocity.js(julian.com/research/velocity/)。

创建 cookies

你可能听说过网络饼干。考虑一下，你在网站上输入用户名和密码，突然弹出一个提示，告诉你可以保存用户名和信息。你点击记住密码，然后信息就被存储在电脑上作为饼干。你的网络饼干是通过 JavaScript 创建的。网络饼干对于网站快速加载很重要。你可以从 www.allaboutcookies.org/cookies/ 了解更多关于网络饼干的信息。

出色的 JavaScript 示例

有一些网站可以可视化用户最新的 JavaScript 作品。其中之一是 creativejs.com/。你还可以在那里找到一些教程。"CreativeJS.com" 是寻找令人兴奋的 JavaScript 演示、项目、游戏以及其他他们认为很棒的东西的必去之地。他们有一个专门的团队为你带来最好的内容。以下截图是 "CreativeJS.com" 的主页：

这里有一些带有链接的 JavaScript 项目示例：

出色的计算器：以下计算器是用 JavaScript、HTML 和 CSS 构建的。按钮发光的动画是通过 JavaScript 实现的：

这个计算器可以在 codepen.io/giana/pen/GJMBEv 找到。
拖放：你可以用鼠标拖动一个方块并将其拖放到另一个方块上。拖动操作是通过 JavaScript 实现的。以下是这个项目的截图：

这个项目可以在 greensock.com/draggable 找到。
随机迷宫生成器：你构建了一个名为 Rat-man 的游戏，其中你需要为猫和老鼠绘制地图，路径就像迷宫一样。以下链接将为你生成一个随机迷宫。我希望你注意他们那里使用的 JavaScript：

这个游戏可以在 codepen.io/GabbeV/pen/viAec 找到。
粒子连接：你可以在 codepen.io/garyconstable/pen/fEoLz 玩连接粒子的游戏。这些粒子的运动是通过 JavaScript 控制的。以下是这个项目的截图：
可撕布料：如果你想制作布料的模拟，你可以访问链接 codepen.io/dissimulate/pen/KrAwx 并在这里玩布料。布料的运动是通过 JavaScript 控制的。以下是这个项目的截图：
霓虹元素：你可以在你的网站上使用以下元素作为按钮。我希望你能学会它的代码是如何工作的。以下是这个项目的截图：

这个项目可以在codepen.io/simeydotme/details/Gzfuh找到。
智能手机子菜单：如果你在考虑用 JavaScript 制作智能手机应用，你肯定需要一个为应用设置的子菜单。你可以访问codepen.io/berdejitendra/pen/AgEzJ学习如何为你的移动应用制作一个酷炫的子菜单。以下是这个项目的截图：
3D 太阳系：如果你热爱天文学和行星的运动，链接codepen.io/juliangarnier/pen/idhuG将带给你邻近行星及其信息的令人惊叹的视觉展示。所有动态元素都是使用 JavaScript 创建的。以下是这个项目的截图：

摘要

我们已经到达了这本书的结尾。这本书并不是关于 JavaScript 的全部内容，而是 JavaScript 的起点。我希望你喜欢这本书，并且练习了书中讨论的所有练习和项目。我希望你会访问本章中的网站，并观察每个项目的代码，以便更多地了解 JavaScript。我希望有一天你能借助 JavaScript 创建自己的动态网站，用 JavaScript 构建智能手机应用，甚至可能用 JavaScript 构建一个机器人。你永远不知道！

我希望你已经学会了用 JavaScript 探索的许多令人惊叹的事物；现在是你用代码实验和玩转 JavaScript 的时候了。如果出了任何问题，不要担心。记住：

	"第一次做对并不重要。最后一次做对至关重要。"
	--安德鲁·亨特和戴维·托马斯

posted @ 2025-10-26 08:50 绝不原创的飞龙阅读(2) 评论(0) 收藏举报

刷新页面返回顶部

龙哥盟

掠夺·扩张·投机·博弈

孩子们的-JavaScript-项目-全-

孩子们的 JavaScript 项目（全）

前言

本书涵盖内容

你需要这本书什么

本书面向对象

惯例

注意

小贴士

读者反馈

客户支持

下载示例代码

下载本书的颜色图像

勘误

盗版

询问

第一章。在控制台中探索 JavaScript

注意

注意

安装 Google Chrome

注意

安装 Atom

提示

Chrome 开发者工具

我们的第一个程序

注意

为什么我们使用 Chrome 开发者工具？

为什么我们使用 Atom 作为文本编辑器？

练习

摘要

第二章。使用 JavaScript 解决问题

注意

变量

注意

注意

注意

注意

小贴士

注释

算术运算符

加法

减法

乘法

除法

模数

提示

更多运算符和操作

递增或递减运算符

小贴士

赋值运算符

JavaScript 比较和逻辑运算符

摘要

第三章。介绍 HTML 和 CSS

HTML

注意

您的第一个网页

注意

注意

注意

更多 HTML 标签

注意

HTML 文本着色

注意

链接 HTML 文本

插入图片

注意

注意

CSS

HTML 页面上的 JavaScript

概述

第四章. 深入探索

注意

JavaScript 方法

HTML 按钮和表单

按钮

表单

If 语句

注意

`app.main.js`文件

`app.display_functions.js`文件

`app.key_handler.js`文件

`app.movement_functions.js`文件

`app.constants.js`文件