PHP-MySQL-和-JavaScript-学习指南第六版-全-

PHP、MySQL 和 JavaScript 学习指南第六版（全）

原文：zh.annas-archive.org/md5/4aa97a1e8046991cb9f8d5f0f234943f

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

PHP 与 MySQL 的结合是实现动态、数据库驱动型网页设计最便捷的方法，面对一些更难学习的集成框架的挑战，它始终占据一席之地。由于其开源根源，它可以免费实现，因此是网页开发的极为流行的选择。

任何想要成为 Unix/Linux 甚至 Windows 平台开发者的人都需要掌握这些技术。再加上 JavaScript、React、CSS 和 HTML5 等合作技术，您将能够创建像 Facebook、Twitter 和 Gmail 这样的行业标准的网站。

受众

本书适合希望学习如何创建有效和动态网站的人士。这可能包括已经掌握创建静态网站或 CMS（如 WordPress）的网站管理员或平面设计师，但希望将他们的技能提升到更高水平的人，以及高中生、大学生、最近毕业生和自学者。

实际上，任何准备学习响应式网页设计背后基础原理的人都将获得 PHP、MySQL、JavaScript、CSS 和 HTML5 核心技术的全面掌握，您还将学习 React 库的基础知识。

本书的假设

本书假定您具有 HTML 的基本理解，并且至少能够编写简单的静态网站，但不假定您具有任何 PHP、MySQL、JavaScript、CSS 或 HTML5 的先前知识——尽管如果您有这些知识，您通过本书的进展会更快。

本书的组织结构

本书的各章按特定顺序编写，首先介绍它涵盖的所有核心技术，然后引导您在 Web 开发服务器上安装这些技术，以便您可以准备好处理示例。

在第一部分中，您将掌握 PHP 编程语言的基础，涵盖语法、数组、函数和面向对象编程。

随后，掌握了 PHP 之后，您将进入 MySQL 数据库系统的介绍，您将从 MySQL 数据库的结构到生成复杂查询的各个方面进行学习。

在此之后，您将学习如何将 PHP 和 MySQL 结合起来，通过整合表单和其他 HTML 特性开始创建自己的动态网页。然后，您将深入了解 PHP 和 MySQL 开发的实际细节，学习各种有用的函数以及如何管理 cookies 和 sessions，以及如何保持高水平的安全性。

在接下来的几章中，您将全面掌握 JavaScript 的基础知识，从简单函数和事件处理到访问文档对象模型、浏览器验证和错误处理。您还将全面了解如何使用流行的 React 库来进行 JavaScript 开发。

理解了这三种核心技术后，您将学习如何进行后台 Ajax 调用，将您的网站转变为高度动态的环境。

接下来，您将花两章时间学习如何使用 CSS 来为您的网页设置样式和布局，然后了解 React 库如何大大简化您的开发工作。然后，您将进入关于 HTML5 中的交互功能的最后一部分，包括地理位置、音频、视频和画布。之后，您将把所学的一切整合在一起，构建一个完整的程序集，这些程序共同构成一个完全功能的社交网络网站。

在此过程中，您将找到许多关于良好编程实践和可以帮助您找到和解决难以检测的编程错误的建议。还有许多链接指向包含所涵盖主题详细信息的网站。

本书使用的约定

本书中使用以下排版约定：

普通文本

指示菜单标题、选项和按钮。

斜体

指示新术语、URL、电子邮件地址、文件名、文件扩展名、路径名、目录和 Unix 实用程序。还用于数据库、表和列名。

常宽

指示命令和命令行选项、变量和其他代码元素、HTML 标签以及文件的内容。

常宽粗体

显示程序输出，并用于突出显示文本中讨论的代码部分。

常宽斜体

显示应替换为用户提供值的文本。

注意

此元素表示一般说明。

警告

此元素表示警告或注意事项。

提示

此元素表示提示或一般说明。

使用代码示例

附加资料（代码示例，练习等）可在GitHub上下载。

本书旨在帮助您完成工作。一般而言，如果本书提供示例代码，则可以在您的程序和文档中使用它。除非您复制了代码的大部分内容，否则无需征得我们的许可。例如，编写使用本书中多个代码片段的程序不需要许可。销售或分发从 O’Reilly 书籍中获取的示例集需要许可。通过引用本书并引用示例代码来回答问题不需要许可。将本书中大量示例代码合并到您产品的文档中需要许可。

我们感谢但不要求归属。归属通常包括标题、作者、出版商和 ISBN。例如：“Learning PHP, MySQL & JavaScript 6th Edition by Robin Nixon (O’Reilly). Copyright 2021 Robin Nixon, 9781492093824.”

如果您觉得您对代码示例的使用超出了合理使用范围或以上给出的许可，请随时通过permissions@oreilly.com与我们联系。

奥莱利在线学习

注意

超过 40 年来，奥莱利传媒为企业的技术和业务培训提供了知识和见解，助力它们取得成功。

我们独特的专家和创新者网络通过书籍、文章和我们的在线学习平台分享他们的知识和专长。奥莱利的在线学习平台为您提供按需访问直播培训课程、深度学习路径、交互式编码环境以及奥莱利和其他 200 多家出版商的大量文本和视频。有关更多信息，请访问http://oreilly.com。

如何联系我们

请将关于本书的评论和问题发送给出版商：

• 奥莱利传媒公司

• 1005 Gravenstein Highway North

• 加利福尼亚州，塞巴斯托波尔，95472

• (800) 998-9938（美国或加拿大）

• (707) 829-0515（国际或本地）

• (707) 829-0104（传真）

我们为这本书准备了一个网页，列出了勘误、示例和任何额外信息。你可以访问这个页面，网址为https://oreil.ly/learning-php-mysql-js-6e。

关于本书的问题，请发送电子邮件至bookquestions@oreilly.com。

有关我们的书籍和课程的新闻和更多信息，请访问我们的网站http://www.oreilly.com。

在 Facebook 上找到我们：http://facebook.com/oreilly

在 Twitter 上关注我们：http://twitter.com/oreillymedia

在 YouTube 上观看我们：http://www.youtube.com/oreillymedia

致谢

我要感谢高级内容采集编辑阿曼达·奎恩、内容开发编辑梅丽莎·波特和所有为这本书努力工作的人，包括米哈尔·斯帕切克和大卫·麦基对技术的全面审查，凯特琳·盖根监督制作，金·科弗进行编辑，金·桑多瓦尔进行校对，朱迪斯·麦康维尔创建索引，卡伦·蒙哥马利设计原始的飞翔树鼠封面，兰迪·科默更新书籍封面，我的最初编辑安迪·奥拉姆监督前五版的出版，以及其他无法一一列举的提供勘误和建议的人。

第一章：动态网页内容介绍

万维网是一个不断发展的网络，早在 1990 年代初期就已经远远超出了其创立时解决特定问题的概念。在欧洲核子研究中心（现已成为大型强子对撞机的运营者）进行的最先进实验产生了大量数据，这些数据分布在全世界各地的参与科学家之间变得异常棘手。

那个时候，互联网已经建立起来，连接了数十万台计算机，因此蒂姆·伯纳斯-李（一位欧洲核子研究中心的研究员）设计了一种使用超链接框架进行导航的方法，后来被称为超文本传输协议，或者 HTTP。他还创建了一种叫做超文本标记语言，或者 HTML 的标记语言。为了将它们结合起来，他写了第一个网页浏览器和网页服务器。

如今，我们认为这些工具理所当然，但在当时，这个概念是革命性的。迄今为止，家用调制解调器用户所体验到的最大连接性是拨号连接到一个公告板，你只能与该服务的其他用户交流和交换数据。因此，你需要成为许多公告板系统的成员，才能有效地通过电子方式与你的同事和朋友进行沟通。

但是伯纳斯-李一举改变了这一切，在 1990 年代中期，已经有三种主要的图形网页浏览器竞争吸引了五百万用户的注意。很快就显而易见，有些东西是缺失的。是的，文本和图片页面与超链接的概念非常出色，但其结果并未反映出计算机和互联网在满足每个用户具体需求方面的即时潜力。使用网络是一种非常枯燥和普通的体验，即使现在我们有了滚动文本和动画 GIF！

购物车、搜索引擎和社交网络明显改变了我们使用网络的方式。在本章中，我们将简要介绍构成网络的各种组件以及帮助使其使用成为丰富和动态体验的软件。

注意

现在我们需要立即开始使用一些缩写词。在继续之前，我已经试图清楚地解释它们，但不要太担心它们代表什么或者这些名称的含义，因为随着你继续阅读，细节会变得清晰起来。

HTTP 和 HTML：伯纳斯-李的基础

HTTP 是一种通信标准，它管理在运行在最终用户计算机上的浏览器和 Web 服务器之间发送的请求和响应。服务器的工作是接受来自客户端的请求并尝试以有意义的方式回复，通常是通过提供请求的 Web 页面 —— 这就是为什么使用术语服务器。与服务器的自然对应物是客户端，因此该术语同时适用于 Web 浏览器和运行它的计算机。

在客户端和服务器之间可能存在多个其他设备，例如路由器、代理、网关等等。它们在确保请求和响应在客户端和服务器之间正确传输方面扮演着不同的角色。通常情况下，它们使用互联网来发送这些信息。这些中间设备中的一些还可以通过在所谓的缓存中本地存储页面或信息，然后直接从缓存向客户端提供这些内容来帮助加速互联网。

Web 服务器通常可以处理多个同时连接，当不与客户端通信时，它会花时间监听传入连接。一旦连接到达，服务器就会发送回复以确认接收到连接。

请求/响应过程

在其最基本的水平上，请求/响应过程包括 Web 浏览器或其他客户端请求 Web 服务器发送 Web 页面，服务器然后发送页面。浏览器然后负责显示或渲染页面（参见图 1-1）。

图 1-1. 基本的客户端/服务器请求/响应序列

请求和响应序列中的步骤如下：

1. 您在浏览器的地址栏中输入http://server.com。

2. 您的浏览器查找server.com的 Internet 协议（IP）地址。

3. 您的浏览器发出请求，请求server.com的主页。

4. 请求通过互联网传输并到达server.com Web 服务器。

5. Web 服务器在收到请求后，在其磁盘上查找 Web 页面。

6. Web 服务器检索页面并将其返回给浏览器。

7. 您的浏览器显示 Web 页面。

对于平均网页，该过程还会为页面中的每个对象执行一次：图形、嵌入式视频或 Flash 文件，甚至 CSS 模板。

在第 2 步中，请注意浏览器查找server.com的 IP 地址。连接到互联网的每台机器都有一个 IP 地址 —— 包括您的计算机，但我们通常通过名称访问 Web 服务器，例如google.com。浏览器还要查询一个名为域名系统（DNS）的附加互联网服务，以查找服务器关联的 IP 地址，然后使用它与计算机通信。

对于动态网页，过程稍微复杂一些，因为可能会同时涉及 PHP 和 MySQL。例如，您可能会点击一件雨衣的图片。然后 PHP 将使用标准的数据库语言 SQL（本书中您将学习到其许多命令）组装一个请求，并将请求发送到 MySQL 服务器。MySQL 服务器将返回您选择的雨衣的信息，PHP 代码将其包装在一些 HTML 中，服务器将其发送到您的浏览器（见 图 1-2）。

图 1-2. 动态客户端/服务器请求/响应序列

步骤如下：

1. 您在浏览器的地址栏中输入 http://server.com。

2. 您的浏览器查找 server.com 的 IP 地址。

3. 您的浏览器向该地址发出请求，请求 Web 服务器的主页。

4. 请求穿过互联网并到达 server.com Web 服务器。

5. Web 服务器在收到请求后，从硬盘中获取主页文件。

6. 现在首页已经加载到内存中，Web 服务器注意到它是一个包含 PHP 脚本的文件，并将页面传递给 PHP 解释器。

7. PHP 解释器执行 PHP 代码。

8. 一些 PHP 包含 SQL 语句，这些语句现在由 PHP 解释器传递给 MySQL 数据库引擎。

9. MySQL 数据库将语句的结果返回给 PHP 解释器。

10. PHP 解释器将执行的 PHP 代码的结果与来自 MySQL 数据库的结果一起返回给 Web 服务器。

11. Web 服务器将页面返回给请求的客户端，客户端显示该页面。

虽然了解这个过程对于了解这三个元素如何协同工作是有帮助的，但实际上你不需要关心这些细节，因为它们都会自动发生。

每个示例中返回给浏览器的 HTML 页面可能包含 JavaScript，客户端会本地解释它，可能会发起另一个请求，就像嵌入对象（如图像）一样。

PHP、MySQL、JavaScript、CSS 和 HTML5 的好处

在本章开头，我介绍了 Web 1.0 的世界，但很快人们就开始创造 Web 1.1，随着诸如 Java、JavaScript、JScript（微软的 JavaScript 轻微变体）和 ActiveX 等浏览器增强功能的开发。在服务器端，使用脚本语言如 Perl（PHP 语言的替代方案）和 服务器端脚本（动态地将一个文件的内容（或运行本地程序的输出）插入另一个文件中）正在进行进展。

风云稍定后，三种主要技术脱颖而出。尽管 Perl 仍然是一种流行的脚本语言并拥有强大的追随者群体，PHP 的简单性和与 MySQL 数据库程序的内置链接使其用户数量超过了两倍。而 JavaScript 则已成为动态操作层叠样式表（CSS）和 HTML 的必不可少的组成部分，现在更承担了处理客户端异步通信的更强大任务（在网页加载后在客户端和服务器之间交换数据）。使用异步通信，网页在后台执行数据处理并向 web 服务器发送请求——而用户在浏览网页时并不知道这一切正在进行。

毫无疑问，PHP 和 MySQL 的共生特性帮助它们双双前进，但最初是什么吸引开发者呢？简单答案必须是你可以使用它们快速创建网站动态元素的简便性。MySQL 是一个快速而强大且易于使用的数据库系统，几乎提供了网站在查找和向浏览器提供数据时所需的一切。当 PHP 联合 MySQL 来存储和检索这些数据时，你拥有了构建 Web 2.0 所需的基本部件。

当你把 JavaScript 和 CSS 也加入进来时，你就有了构建高度动态和交互式网站的配方——尤其是现在有许多复杂的 JavaScript 框架可供调用，以加速网页开发。这些包括广为人知的 jQuery，直到最近仍是程序员访问异步通信特性的常见方式，以及近年来快速增长的 React JavaScript 库。它现在是下载和实施最广泛的框架之一，以至于自 2020 年以来，Indeed 网站列出的 React 开发者职位数量超过 jQuery 的两倍以上。

MariaDB：MySQL 的克隆品

在 Oracle 收购 Sun 微系统（MySQL 的所有者）之后，社区担心 MySQL 可能不会完全保持开源，因此从中分叉出了 MariaDB，以在 GNU GPL 下保持其自由。MariaDB 的开发由 MySQL 的一些原始开发者领导，它与 MySQL 保持极其密切的兼容性。因此，在一些服务器上，你可能会遇到 MariaDB 替代 MySQL，但不用担心，本书中的所有内容在 MySQL 和 MariaDB 上同样适用，你可以随意切换而不会有任何区别。

无论如何，事实证明，许多最初的担忧似乎已经消除，因为 MySQL 仍然是开源的，Oracle 只是为支持和提供附加功能（如地理复制和自动扩展）的版本收费。然而，与 MariaDB 不同，MySQL 不再由社区驱动，因此知道如果需要时 MariaDB 始终可用将让许多开发者安心，可能也确保了 MySQL 本身将继续保持开源。

使用 PHP

使用 PHP，将动态活动嵌入网页非常简单。给页面添加.php扩展名后，即可立即使用脚本语言。从开发者的角度来看，你只需编写如下的代码：

<?php
 echo " Today is " . date("l") . ". ";
?>

Here's the latest news.

开头的<?php告诉 Web 服务器允许 PHP 程序解释直到?>标签之间的所有代码。在这个结构之外，所有内容都将直接发送给客户端作为 HTML。因此，文本Here's the latest news.将简单地输出到浏览器；在 PHP 标记内，内置的date函数根据服务器系统时间显示当前星期几。

两部分的最终输出如下：

*Today is Wednesday. Here's the latest news.*

PHP 是一种灵活的语言，有些人更喜欢将 PHP 结构直接放在 PHP 代码旁边，如下所示：

Today is <?php echo date("l"); ?>. Here's the latest news.

还有更多格式化和输出信息的方式，我将在有关 PHP 的章节中进行解释。关键是，使用 PHP，Web 开发人员拥有一种脚本语言，虽然不像在 C 或类似语言中编译代码那样快速，但速度非常快，并且与 HTML 标记完美集成。

注意

如果你打算将本书中的 PHP 示例输入到程序编辑器中与我一起工作，你必须记住在它们前面加上<?php，并在后面加上?>，以确保 PHP 解释器可以处理它们。为了方便起见，你可能希望准备一个名为example.php的文件，并在适当位置添加这些标记。

使用 PHP，你可以对你的 Web 服务器进行无限制的控制。无论你需要在页面中动态修改 HTML、处理信用卡、将用户详细信息添加到数据库，还是从第三方网站获取信息，你都可以在同一个 PHP 文件中完成。

使用 MySQL

当然，能够动态更改 HTML 输出的能力没有太大意义，除非你还有一种方法跟踪用户在使用网站时提供的信息。在互联网早期，许多网站使用“平面”文本文件存储用户名和密码等数据。但是，如果文件没有正确锁定以防止多个同时访问导致的损坏，这种方法可能会导致问题。此外，平面文件在变得过大之前就变得难以管理，更不用说尝试合并文件和在合理时间内执行复杂搜索的困难了。

这就是关系型数据库与结构化查询变得至关重要的地方。而 MySQL 作为免费使用并安装在大量互联网服务器上的数据库管理系统，则非常出色地胜任了这一角色。它是一个强大且异常快速的数据库管理系统，使用类似英语的命令。

MySQL 结构的最高级别是数据库，您可以在其中拥有一个或多个包含您数据的表。例如，假设您正在处理一个名为users的表，在其中创建了surname、firstname和email列，现在希望添加另一个用户。您可能使用的一条命令如下：

INSERT INTO users VALUES('Smith', 'John', 'jsmith@mysite.com');

之前您已经发出了其他命令来创建数据库和表，并设置了所有正确的字段，但此处的 SQL INSERT命令显示了向数据库添加新数据可以多么简单。SQL 是上世纪 70 年代设计的一种语言，它让人联想起最古老的编程语言之一，COBOL。然而，它非常适合数据库查询，这就是为什么在这么长时间后它仍然在使用中的原因。

查找数据同样简单。假设您有一个用户的电子邮件地址并需要查找该人的姓名。为此，您可以发出如下所示的 MySQL 查询：

SELECT surname,firstname FROM users WHERE email='jsmith@mysite.com';

MySQL 然后将返回Smith, John及数据库中与该电子邮件地址可能关联的任何其他姓名对。

正如您所期望的那样，您可以在 MySQL 中做的远不止简单的INSERT和SELECT命令。例如，您可以组合相关数据集以将相关信息片段汇集在一起，请求以各种顺序返回结果，在您仅知道要搜索的字符串的一部分时进行部分匹配，仅返回第n个结果等等。

使用 PHP，您可以直接调用 MySQL 而无需自己直接访问 MySQL 命令行界面。这意味着您可以将结果保存在数组中进行处理，并执行多次查找，每次查找都依赖于从前面的查找返回的结果，以便深入到您需要的数据项。

更有力的是，正如稍后将看到的，MySQL 内置了额外的功能，可以高效地运行 MySQL 内部的常见操作，而不是通过多个 PHP 调用 MySQL 创建它们。

使用 JavaScript

JavaScript 的创建是为了使脚本能够访问 HTML 文档的所有元素。换句话说，它提供了一种动态用户交互的手段，例如在输入表单中检查电子邮件地址的有效性，并显示诸如“您是认真的吗？”之类的提示（尽管不能依赖其用于安全性，这应始终在 Web 服务器上执行）。

结合 CSS（请参阅下一节），JavaScript 是动态网页背后的动力，使页面能够在您眼前变化，而不是在服务器返回新页面时变化。

然而，JavaScript 以前使用起来很棘手，因为不同浏览器设计者选择实现方式存在显著差异。这主要是在一些制造商试图在其浏览器中添加额外功能，却牺牲了与竞争对手的兼容性时出现的问题。

幸运的是，开发者们大多已经理智过来，意识到彼此兼容的必要性，因此在如今不太需要为不同浏览器优化代码。然而，仍然有数百万用户在使用传统浏览器，而且这种情况可能在未来很多年内仍会存在。幸运的是，有解决不兼容性问题的解决方案，本书后面我们会看到一些库和技术，使您能够安全地忽略这些差异。

现在，让我们看看如何使用基本的 JavaScript，所有浏览器都支持：

<script type="text/javascript">
  document.write("Today is " + Date() );
</script>

此代码片段告诉 Web 浏览器解析 <script> 标签中的所有内容为 JavaScript，浏览器通过使用 JavaScript 函数 Date 将文本 Today is 与当前日期一起写入当前文档。结果将看起来像这样：

Today is Wed Jan 01 2025 01:23:45

注意

除非您需要指定确切的 JavaScript 版本，通常可以省略 type="text/javascript"，直接使用 <script> 开始 JavaScript 的解析。

如前所述，JavaScript 最初是为了在 HTML 文档中动态控制各种元素而开发的，这仍然是它的主要用途。但是越来越多地，JavaScript 被用于Ajax，即在后台访问 Web 服务器的过程。

异步通信使得网页开始类似独立程序，因为它们不需要完全重新加载以显示新内容。相反，异步调用可以拉取和更新网页上的单个元素，例如在社交网络网站上更改您的照片或替换您点击的按钮与问题答案。这个主题在第十八章中有详尽的介绍。

然后，在第二十二章中，我们仔细研究了 jQuery 框架，您可以在需要快速、跨浏览器的代码来操作网页时使用它，以免重复发明轮子。当然，还有其他可用的框架，因此我们还会看一下 React，在第二十四章中是当今最受欢迎的选择之一。它们都非常可靠，是许多经验丰富的网页开发者工具包中的主要工具。

使用 CSS

CSS 是 HTML 的重要伴侣，确保 HTML 文本和嵌入的图像在用户屏幕上一致且合适地排列。随着近年来 CSS3 标准的出现，CSS 现在提供了以前仅由 JavaScript 支持的动态交互水平。例如，不仅可以为任何 HTML 元素设置样式以更改其尺寸、颜色、边框、间距等，而且现在还可以仅使用几行 CSS 为网页添加动画过渡和转换效果。

使用 CSS 可能就像在网页头部的<style>和</style>标签之间插入几条规则一样简单，就像这样：

<style>
  p {
    text-align:justify;
    font-family:Helvetica;
  }
</style>

这些规则改变了<p>标签的默认文本对齐方式，使其中包含的段落完全对齐并使用 Helvetica 字体。

正如你将在第十九章中了解的那样，有许多不同的方式可以布置 CSS 规则，你还可以直接将它们包含在标签内部或保存为一个外部文件单独加载。这种灵活性不仅可以让你精确地为你的 HTML 设置样式，还可以（例如）提供内置的悬停功能来在鼠标悬停时为对象添加动画效果。你还将学习如何从 JavaScript 以及 HTML 中访问元素的所有 CSS 属性。

还有 HTML5

尽管所有这些对 Web 标准的增加都非常有用，但对于越来越雄心勃勃的开发者来说还不够。例如，在没有像 Flash 这样的插件的情况下，仍然没有简单的方法在 Web 浏览器中操作图形。同样，插入音频和视频到网页中也是如此。而且，在 HTML 的发展过程中还出现了一些令人讨厌的不一致性。

因此，为了澄清所有这些并将互联网推向 Web 2.0 之外，进入其下一个迭代，创建了一个新的 HTML 标准来解决所有这些缺陷：HTML5。其开发始于 2004 年，当时 Mozilla 基金会和 Opera Software（两个流行的 Web 浏览器开发者）起草了第一个草案，但直到 2013 年初，最终草案才被提交给了万维网联盟（W3C），这是国际上的 Web 标准管理机构。

HTML5 发展了几年，但现在我们有了一个非常稳定和稳健的版本 5.1（自 2016 年以来）。然而，这是一个永无止境的发展循环，随着时间的推移，肯定会向其中添加更多功能，例如计划在 2017 年作为 W3C 推荐发布的 5.2 版（计划使插件系统过时），以及截至 2020 年仍在计划中的 HTML 5.3（具有自动大写功能等提议功能）。HTML5 中用于处理和显示媒体的一些最佳功能包括<audio>、<video>和<canvas>元素，它们添加了声音、视频和高级图形。关于 HTML5 的所有这些以及其他方面的详细信息都在第二十五章中详细介绍。

注意

我喜欢 HTML5 规范的一点是不再需要 XHTML 语法来自动关闭元素。过去，你可以使用<br>元素显示一个换行。然后，为了确保与 XHTML（计划中用于替换 HTML 但从未实现的）的未来兼容性，这被改为<br />，其中添加了一个关闭/字符（因为预期所有元素都应包含带有此字符的关闭标记）。但现在情况已经完全变了，你可以使用这些类型元素的任一版本。因此，出于简洁和减少击键次数的考虑，在这本书中，我已经恢复 r>` 等样式。

Apache 网络服务器

除了 PHP、MySQL、JavaScript、CSS 和 HTML5，动态网站还有第六位英雄：网络服务器。在这本书中，这意味着 Apache 网络服务器。我们已经讨论过网络服务器在 HTTP 服务器/客户端交换过程中做了一些什么，但它在幕后做了更多的事情。

例如，Apache 不仅提供 HTML 文件，它还处理各种文件，从图像和 Flash 文件到 MP3 音频文件，RSS（真正简单联合）源等等。这些对象不必是静态文件，比如 GIF 图像。它们都可以由诸如 PHP 脚本之类的程序生成。没错：PHP 甚至可以为您创建图像和其他文件，无论是即时生成还是提前生成以供以后使用。

要做到这一点，通常你要么在 Apache 或 PHP 中预编译模块，要么在运行时调用模块。其中一个这样的模块是 GD（图形绘制）库，PHP 用它来创建和处理图形。

Apache 也支持各种各样的自己的模块。除了 PHP 模块外，作为网络程序员最重要的模块是处理安全性的模块。其他例子包括 Rewrite 模块，它使网络服务器能够处理各种 URL 类型并将它们重写为自己的内部要求，以及 Proxy 模块，你可以用它来从缓存中提供经常请求的页面，以减轻服务器的负载。

本书的后面，你将看到如何使用这些模块来增强三个核心技术提供的功能。

处理移动设备

我们现在完全进入了互联的移动计算设备世界，仅为桌面计算机开发网站的概念已经相当过时。相反，开发人员现在旨在开发响应式网站和 Web 应用程序，以适应它们运行的环境。

因此，在本版本中新加入的内容是，我展示了如何仅使用本书详细介绍的技术以及强大的 jQuery Mobile 库，轻松创建这些类型的产品。借助它，你将能够专注于网站和 Web 应用程序的内容和可用性，知道它们的显示方式将自动优化以适应各种不同的计算设备——这样你就少了一件需要担心的事情。

为了展示如何充分利用它的力量，本书的最后一章创建了一个简单的社交网络示例网站，使用 jQuery 使其完全响应，并确保它在从小型手机屏幕到平板电脑或台式电脑的任何设备上显示良好。我们同样可以使用 React（或其他 JavaScript 库或框架），但也许这是你在完成本书后想要自己尝试的一个练习。

关于开源

这本书中涉及的技术都是开源的：任何人都可以阅读和修改代码。关于这些技术之所以如此流行的原因，常常被争论，但 PHP、MySQL 和 Apache 确实 是它们类别中使用最广泛的三种工具。可以肯定的是，它们的开源性意味着它们是由社区中的团队开发的，这些团队编写了他们自己想要和需要的功能，原始代码对所有人都是开放的，可以随时查看和修改。可以迅速发现错误，并在它们发生之前预防安全漏洞。

还有另一个好处：所有这些程序都可以免费使用。不用担心如果要扩展你的网站并增加更多服务器就必须购买额外的许可证，也无需在决定是否升级到这些产品的最新版本之前检查预算。

将所有内容整合在一起

PHP、MySQL、JavaScript（有时候辅助 React 或其他框架）、CSS 和 HTML5 的真正美妙之处在于它们如何协同工作来生成动态的 Web 内容：PHP 在 Web 服务器上处理所有主要工作，MySQL 管理所有数据，而 CSS 和 JavaScript 的组合则负责网页的呈现。JavaScript 还可以在需要更新某些内容（无论是在服务器上还是在网页上）时与你的 PHP 代码进行通信。借助 HTML5 中强大的功能，如画布、音频和视频以及地理位置，你可以使你的网页高度动态、互动且多媒体丰富。

在不使用程序代码的情况下，让我们通过查看将一些技术组合到每日异步通信功能中的过程来总结本章的内容，这是许多网站在用户注册新帐户时使用的功能的示例：检查所需的用户名是否已存在于站点上。这在 Gmail 中有一个很好的例子（见图 1-3）。

图 1-3. Gmail 使用异步通信来检查用户名的可用性

这个异步过程涉及的步骤将类似于以下内容：

1. 服务器输出 HTML 创建网页表单，要求输入必要的详细信息，如用户名、名字、姓氏和电子邮件地址。

2. 同时，服务器将一些 JavaScript 附加到 HTML 上，以监视用户名输入框并检查两件事情：是否已输入了一些文本，以及是否取消了输入选择，因为用户已点击了另一个输入框。

3. 一旦文本被输入并取消选定该字段，JavaScript 代码会将输入的用户名传回到 Web 服务器上的 PHP 脚本，并等待响应。

4. Web 服务器查找用户名并回复 JavaScript，告知该名称是否已被占用。

5. 然后，JavaScript 在用户名输入框旁边放置一个指示，显示用户名对用户是否可用的状态——可能是一个绿色的勾或一个红色的叉，以及一些文本。

6. 如果用户名不可用，并且用户仍然提交表单，JavaScript 将中断提交并重新强调（可能通过更大的图形和/或警报框）用户需要选择另一个用户名。

7. 可选地，这个过程的改进版本甚至可以查看用户请求的用户名，并建议当前可用的替代用户名。

所有这些都在后台静静地进行，为用户提供了舒适且无缝的使用体验。没有异步通信，整个表单都必须提交到服务器，然后服务器会返回 HTML，并突出显示任何错误。这也算是一个可行的解决方案，但远不及即时处理表单字段那样整洁和令人愉悦。

然而，异步通信不仅仅可以用于简单的输入验证和处理，我们将在本书的后续部分探讨许多其他可以使用它来实现的功能。

在本章中，您已经读到了 PHP、MySQL、JavaScript、CSS 和 HTML5（以及 Apache）的核心技术的很好介绍，并学习了它们如何共同工作。在第二章中，我们将讨论如何在自己的 Web 开发服务器上安装和练习您将要学习的所有内容。

问题

1. 至少需要哪四个组件才能创建一个完全动态的网页？

2. HTML 是什么意思？

3. 为什么 MySQL 的名称包含字母 SQL？

4. PHP 和 JavaScript 都是能够为网页生成动态结果的编程语言。它们的主要区别是什么，为什么你会同时使用它们呢？

5. CSS 代表什么？

6. 列出 HTML5 中引入的三个主要新元素。

7. 如果你在一个开源工具中遇到一个（很少见的）Bug，你认为你能如何修复它？

8. 为什么像 jQuery 或 React 这样的框架对于开发现代网站和 Web 应用程序如此重要？

查看 “第一章答案” 在 附录 A 中，获取这些问题的答案。

第二章：建立开发服务器

如果你想开发互联网应用程序但没有自己的开发服务器，你将不得不在能够测试之前将每一次修改上传到 Web 上的某个其他服务器。

即使在快速的宽带连接上，这仍可能导致开发时间显著减慢。然而，在本地计算机上，测试可以像保存更新一样简单（通常只需点击图标一次），然后在浏览器中点击刷新按钮。

另一个开发服务器的优点是，当你编写和测试时，你不必担心尴尬的错误或安全问题，而在公共网站上，你需要意识到人们可能会看到或使用你的应用程序。最好在你仍然在家庭或小办公室系统上，预计受到防火墙和其他保护措施保护的时候，把一切都搞定。

一旦你拥有了自己的开发服务器，你会想知道之前是如何没有它的，而且设置一个是很容易的。只需按照以下各节中的步骤进行操作，根据你使用的是 PC、Mac 还是 Linux 系统，选择适当的说明。

在本章中，我们只涵盖了 Web 体验的服务器端，正如在第一章中描述的那样。但是为了测试你的工作结果——特别是当我们稍后在本书中开始使用 JavaScript、CSS 和 HTML5 时——你最好有一个至少包含 Microsoft Edge、Mozilla Firefox、Opera、Safari 和 Google Chrome 的主要 Web 浏览器的实例运行在方便你的某个系统上。一旦准备好发布产品，你可能需要所有这些，以确保在所有浏览器和平台上一切都如预期运行。如果你计划确保你的网站在移动设备上看起来良好，你应该尽量安排访问各种 iOS 和 Android 设备。

什么是 WAMP, MAMP 或 LAMP？

WAMP、MAMP 和 LAMP 是 “Windows, Apache, MySQL 和 PHP”，“Mac, Apache, MySQL 和 PHP”，以及 “Linux, Apache, MySQL 和 PHP”的缩写。这些缩写描述了用于开发动态互联网页面的完整功能设置。

WAMPs、MAMPs 和 LAMPs 以捆绑程序包的形式出现，这些程序将捆绑的程序一起绑定，以便你不必单独安装和设置它们。这意味着你只需下载和安装一个单一的程序，并按照几个简单的提示进行操作，就可以快速启动和运行你的 Web 开发服务器，几乎没有任何麻烦。

在安装过程中，会为你创建几个默认设置。这样的安装的安全配置不会像生产 Web 服务器上那样严格，因为它被优化用于本地使用。因此，你绝对不应该将这样的设置作为生产服务器安装。

然而，对于开发和测试网站和应用程序来说，其中一个这样的安装完全足够了。

警告

如果您选择不通过 WAMP/MAMP/LAMP 方式构建自己的开发系统，您应知道自行下载和集成各部分可能非常耗时，并可能需要大量研究来完全配置所有内容。但如果您已经安装并集成了所有组件，它们应该可以与本书中的示例一起工作。

在 Windows 上安装 AMPPS

有几个可用的 WAMP 服务器，每个提供稍有不同的配置。在各种开源和免费选项中，最好的之一是 AMPPS。您可以通过点击网站的主页上显示的按钮来下载，如图 2-1 所示。（也有 Mac 和 Linux 版本可用；参见“在 macOS 上安装 AMPPS”和“在 Linux 上安装 LAMP”。）

注意

最近，Chrome 已更新以禁止从混合来源（例如从 https:// 网页下载的 http:// 文件）下载。其他浏览器可能也会遵循这一安全倡议。当前 AMPPS 网站使用混合来源，您可能会遇到此问题。解决方法是当 Chrome（或其他浏览器）提示“无法安全下载 AMPPS”时，不要选择 DISCARD，而是使用上箭头选择 Keep，然后下载将继续。此外，如果单击下载链接似乎无任何反应，您将需要右键单击并选择 另存为 来启动下载。

我建议您始终下载最新的稳定版本（截至我写作时，版本为 3.9，大小约为 114 MB）。各种 Windows、macOS 和 Linux 安装程序列在下载页面上。

图 2-1. AMPPS 网站

注意

在本版本的生命周期内，以下步骤中显示的某些屏幕和选项可能会发生变化。如果确实如此，请凭常识尽量按照所描述的操作顺序进行。

下载安装程序后，请运行它以显示图 2-2 中显示的窗口。不过，在到达该窗口之前，如果您使用防病毒程序或在 Windows 上激活了用户账户控制，可能会首先显示一个或多个提示通知，您需要点击“是”和/或“确定”以继续安装。

单击“下一步”，然后必须接受协议。再次单击“下一步”，然后再次单击以跳过信息屏幕。现在，您需要确认安装位置。这可能会建议为主硬盘的某个字母，但如果您希望，可以更改此选项：

C:\Program Files (x86)\Ampps

图 2-2. 安装程序的初始窗口

接下来，您必须在下一个屏幕上接受协议并点击下一步，然后在阅读信息摘要后再次点击下一步，然后系统会询问您希望将 AMPPS 安装到哪个文件夹。

一旦您决定安装 AMPPS 的位置，请点击下一步，决定保存快捷方式的位置（通常默认即可），然后再次点击下一步选择您希望安装的图标，如图 2-3 所示。在接下来的屏幕上，点击“安装”按钮开始安装过程。

图 2-3. 选择要安装的图标

安装过程将需要几分钟，之后您将看到图 2-4 中的完成屏幕，然后点击“完成”。

图 2-4. AMPPS 现在已安装

最后一件事是安装 Microsoft Visual C++ Redistributable，如果您尚未安装。一个窗口将弹出以提示您，如图 2-5 所示。点击“是”开始安装，或者如果您确定已经安装了它，则点击“否”。或者，您也可以无论如何继续，系统会告知您是否需要重新安装。

图 2-5. 如果尚未安装，请安装 Visual C++ Redistributable

如果您选择继续安装，您需要在弹出的窗口中同意条款和条件，然后点击安装。安装过程应该相当快速。点击关闭以完成。

安装完成后，您的桌面右下角将会显示图 2-6 中显示的控制窗口。如果您允许创建这些图标，您也可以通过“开始”菜单或桌面上的 AMPPS 应用程序快捷方式调出此窗口。

在继续之前，如果您有任何进一步的问题，我建议您熟悉AMPPS 文档，否则您已准备好开始了——控制窗口底部始终有一个支持链接，您可以通过它访问 AMPPS 网站，以便在需要时打开故障申请。

图 2-6. AMPPS 控制窗口

注意

您可能会注意到 AMPPS 中默认的 PHP 版本是 7.3。如果由于任何原因您希望尝试版本 5.6，请在 AMPPS 控制窗口内点击选项按钮（一个方形中的九个白色框），然后选择“更改 PHP 版本”，接着会弹出一个新菜单，您可以在其中选择 5.6 到 7.3 之间的版本。

安装测试

此时，首先要做的一件事是验证一切是否正常工作。为此，请在浏览器的地址栏中输入以下任何一个 URL：

localhost
127.0.0.1

这将调出一个介绍屏幕，在这里您将有机会通过给它设置密码来保护 AMPPS（参见图 2-7）。我建议您不要勾选复选框，只需点击提交按钮即可继续而不设置密码。

图 2-7. 初始安全设置屏幕

一旦完成这些步骤，您将被带到主控页面，位于localhost/ampps/（从现在开始，我假设您通过localhost而不是127.0.0.1访问 AMPPS）。从这里，您可以配置和控制 AMPPS 堆栈的所有方面，所以请记下这一点以备将来参考，或者在浏览器中设置书签。

接下来，键入以下内容以查看新 Apache Web 服务器的文档根目录（在以下部分描述）：

localhost

这一次，您不会看到关于设置安全性的初始屏幕，而是应该看到类似于图 2-8 的内容。

图 2-8. 查看文档根目录

访问文档根目录（Windows）

文档根目录是包含域的主要 Web 文档的目录。当在浏览器中键入基本 URL 而没有路径时，例如http://yahoo.com或对于您的本地服务器是http://localhost，服务器将使用此目录。

默认情况下，AMPPS 将使用以下位置作为文档根目录：

C:\Program Files\Ampps\www

为确保配置正确，现在应创建“Hello World”文件。因此，请使用 Windows 记事本（或 Windows 上的Notepad++，或 Mac 上的Atom，或您选择的其他许多可用选项，但不要使用 Microsoft Word 等富文本编辑器）创建一个如下所示的小型 HTML 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>A quick test</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

输入完毕后，将文件保存到文档根目录，文件名为test.html。如果您使用的是记事本，请确保“另存为类型”框中的值已从文本文档 (.txt) 更改为所有文件 (.*)

您现在可以通过在浏览器地址栏中输入以下 URL 来调用此页面（参见图 2-9）：

localhost/test.html

图 2-9. 您的第一个网页

注意

请记住，从文档根目录（或子文件夹）提供网页与从计算机文件系统加载网页到 Web 浏览器不同。前者将确保访问 PHP、MySQL 和 Web 服务器的所有功能，而后者仅将文件加载到浏览器中，并尽力显示它，但无法处理任何 PHP 或其他服务器指令。因此，您通常应该从浏览器的地址栏中使用localhost前缀来运行示例，除非您确信文件不依赖于 Web 服务器功能。

替代 WAMPs

当软件更新时，有时它的工作方式可能与您的预期不同，甚至可能会引入错误。因此，如果您在 AMPPS 中遇到无法解决的困难，您可能更喜欢选择网上其他可用的解决方案之一。

您仍然可以使用本书中的所有示例，但您需要按照每个 WAMP 附带的说明进行操作，这可能不像前面的指南那样易于理解。

这是我认为的一些最佳选择：

• EasyPHP

• XAMPP

• WAMPServer

注意

在本书的整个版本周期内，AMPPS 的开发人员很可能会对软件进行改进，因此安装屏幕和使用方法可能会随时间而演变，Apache、PHP 或 MySQL 的版本也可能会更新。因此，请不要假设某些东西出了问题，如果屏幕和操作看起来不同，请跟随任何提示，并参考网站上的文档。

在 macOS 上安装 AMPPS

AMPPS 也可在 macOS 上使用，并且您可以从网站下载它，如前所示在图 2-1 中（在我写作时，当前版本是 3.0，大小约为 270 MB）。

如果您的浏览器在下载完成后未自动打开，请双击.dmg文件，然后将AMPPS文件夹拖到应用程序文件夹中（参见图 2-10）。

图 2-10. 将 AMPPS 文件夹拖到应用程序

现在以通常的方式打开您的应用程序文件夹，然后双击 AMPPS 程序。如果您的安全设置阻止文件被打开，请按住 Control 键并单击一次图标。将弹出一个新窗口询问您是否确定要打开它。点击打开以继续。启动应用程序时，您可能需要输入 macOS 密码。

一旦 AMPPS 启动，类似于图 2-6 所示的控制窗口将出现在您桌面的左下角。

注意

您可能注意到 AMPPS 中的默认 PHP 版本是 7.3。如果出于任何原因您希望尝试 5.6 版本，请单击 AMPPS 控制窗口内的选项按钮（一个有九个白色方框的正方形），然后选择更改 PHP 版本，这时会出现一个新菜单，您可以在其中选择 5.6 至 7.3 之间的版本。

访问文档根目录（macOS）

默认情况下，AMPPS 将使用以下位置作为文档根目录：

/Applications/Ampps/www

为了确保您已正确配置一切，现在您应该创建强制性的“Hello World”文件。因此，请使用 TextEdit 程序或任何其他程序或文本编辑器创建以下类型的小型 HTML 文件，但不要使用像 Microsoft Word 这样的富文本处理器：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>A quick test</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

输入完毕后，请使用文件名 test.html 将文件保存到文档根目录中。

您现在可以通过在地址栏中输入以下 URL 来在浏览器中打开此页面（以查看与 图 2-9 类似的结果）：

localhost/test.html

注意

请记住，从文档根目录（或子文件夹）提供网页与从计算机文件系统加载网页到 Web 浏览器是不同的。前者确保访问 PHP、MySQL 和 Web 服务器的所有功能，而后者仅将文件加载到浏览器中，浏览器尽其所能显示它，但无法处理任何 PHP 或其他服务器指令。因此，通常应从浏览器地址栏中使用 localhost 前缀来运行示例，除非您确信该文件不依赖于 Web 服务器功能。

在 Linux 上安装 LAMP

本书主要面向 PC 和 Mac 用户，但其内容在 Linux 计算机上同样适用。不过，有数十种流行的 Linux 版本，每种版本可能需要以略有不同的方式安装 LAMP，因此我无法在本书中全部涵盖。但是，Linux 也有一种名为 AMPPS 的版本可供使用，可能是您最简单的选择。

尽管如此，一些 Linux 版本预装了 Web 服务器和 MySQL，您可能已经准备就绪。要确认，请在浏览器中输入以下内容，查看是否能获取默认的文档根网页：

localhost

如果此操作成功，您可能已安装 Apache 服务器，并且可能已经运行 MySQL；请向系统管理员确认。

但是，如果您尚未安装 Web 服务器，可以从网站下载 AMPPS 的版本。

安装步骤与前一节中显示的顺序类似。如果需要进一步了解如何使用软件，请参阅文档。

远程工作

如果您已经可以访问配置了 PHP 和 MySQL 的 Web 服务器，您可以随时用于 Web 开发。但是，除非您拥有高速连接，否则这可能并非您的最佳选项。在本地进行开发允许您测试修改，几乎没有上传延迟。

远程访问 MySQL 也许不是件容易的事情。您应该使用安全的 SSH 协议登录服务器，通过命令行手动创建数据库并设置权限。您的 Web 主机公司将为您提供最佳操作建议，并提供 MySQL 访问的任何密码（当然也包括首次登录服务器的密码）。我建议您永远不要使用不安全的 Telnet 协议远程登录任何服务器。

登录

我建议至少 Windows 用户应安装诸如 PuTTY 之类的程序进行 SSH 访问（请记住 SSH 比 Telnet 安全得多）。

在 Mac 上，你已经可以使用 SSH。只需选择应用程序文件夹，然后选择实用工具，然后启动终端。在终端窗口中，使用 SSH 登录服务器如下：

ssh *mylogin*@*server.com*

其中server.com是你希望登录的服务器名称，mylogin是你要使用的用户名。然后系统会提示你输入该用户名的正确密码，如果输入正确，你将登录成功。

使用 SFTP 或 FTPS

要在您的 Web 服务器上传输文件，通常需要 FTP、SFTP 或 FTPS 程序。虽然 FTP 不是安全协议，但仍然经常用软件上传和下载文件，称为 FTP，但确保 Web 服务器安全的是 FTPS 或 SFTP。如果你在网上寻找一个好的客户端，你会发现有很多选择，可能需要一段时间才能找到适合你的功能完备的程序。

不要使用 FTP

FTP 是不安全的，不应使用。有比 FTP 更安全的文件传输方法，如使用 Git 或类似技术。此外，基于 SSH 的 SFTP（安全文件传输协议）和 SCP（安全复制协议）也越来越受欢迎。好的 FTP 程序通常也支持 SFTP 和 FTPS（FTP-SSL）。文件传输方式通常取决于你所在公司的政策，但对于个人使用来说，如 FileZilla（下面讨论）这样的 FTP 程序将提供你所需的大部分（如果不是全部）功能和安全性。

我偏爱的 FTP/SFTP 程序是开源软件FileZilla，支持 Windows、Linux 和 macOS 10.5 或更新版本（参见图 2-11）。有关如何使用 FileZilla 的完整说明，请参阅wiki。

图 2-11. FileZilla 是一个功能齐全的 FTP 程序

当然，如果你已经有一个 FTPS 或 SFTP 程序，那就更好了——坚持你熟悉的工具。

使用代码编辑器

尽管纯文本编辑器可以用于编辑 HTML、PHP 和 JavaScript，但专用代码编辑器的改进显著，现在它们具备了非常实用的功能，如彩色语法突出显示。今天的程序编辑器很智能，甚至可以在你运行程序之前就显示语法错误的位置。一旦你使用了现代编辑器，你会想知道自己以前是怎么没有用它们的。

有很多优秀的程序可供选择，但我选择了微软的 Visual Studio Code（VSC），因为它功能强大，在 Windows、Mac 和 Linux 上都能运行，并且是免费的（参见图 2-12）。尽管每个人的编程风格和偏好不同，如果你对它不习惯，还有很多其他代码编辑器可供选择，或者你可能希望直接选择一个集成开发环境（IDE），正如下一节所述。

图 2-12. 程序编辑器（如 Visual Studio Code）优于纯文本编辑器

如你所见，通过图 2-12，VSC 适当地突出语法，使用颜色帮助澄清正在发生的事情。此外，你可以将光标放在括号或大括号旁边，它会突出显示匹配的括号，这样你可以检查是否有过多或过少。事实上，VSC 还有更多功能，随着你的使用，你会发现并享受它们。你可以从code.visualstudio.com下载副本。

如果你有其他喜欢的编辑器，可以使用它；使用你已经熟悉的程序是个好主意。

使用 IDE

尽管专用程序编辑器对你的编程生产力可能非常有用，但与集成开发环境相比，它们的效用显得微不足道。IDE 提供许多额外功能，如编辑器内调试和程序测试，以及函数描述等，尽管这些功能如今也在一些代码编辑器中慢慢加入，比如之前推荐的 VSC。图 2-13 展示了流行的 Eclipse IDE，主框架加载了一些 HTML（它还允许你使用 PHP、JavaScript 和其他文件类型）。

图 2-13. 使用 IDE 时，代码开发变得更快、更容易

在使用 IDE 进行开发时，你可以设置断点，然后运行所有（或部分）代码，它将在断点处停止，并为你提供关于程序当前状态的信息。

作为学习编程的辅助工具，本书中的示例可以直接输入到集成开发环境（IDE）中运行，无需打开网页浏览器。不同平台都有多种 IDE 可供选择。表 2-1 列出了一些最受欢迎的免费 PHP IDE 以及它们的下载 URL。

表 2-1. 免费 IDE 选择

IDE	下载链接		Windows	macOS	Linux
Eclipse PDT	eclipse.org/downloads/packages		✓	✓	✓
NetBeans	www.netbeans.org		✓	✓	✓
Visual Studio	code.visualstudio.com		✓	✓	✓

选择一个 IDE 可能是非常个人化的事情，所以如果你打算使用一个，我建议你先下载几个或更多来试用；它们都有试用版或免费使用，所以不会花费你任何费用。

现在花时间安装一个你熟悉的代码编辑器或 IDE，然后你将准备好在接下来的章节中尝试示例。

有了这些工具，现在你已经准备好继续进入《第三章》，我们将深入探讨 PHP，并了解如何使 HTML 和 PHP 协同工作，以及 PHP 语言本身的结构。但在继续之前，我建议你用以下问题来测试你的新知识。

问题

1. 什么是 WAMP、MAMP 和 LAMP 之间的区别？

2. IP 地址 127.0.0.1 和 URL http://localhost 有什么共同点？

3. FTP 程序的目的是什么？

4. 远程 Web 服务器的主要缺点是什么？

5. 为什么使用程序编辑器而不是纯文本编辑器更好？

请参阅《第二章答案》在《附录 A》中查看这些问题的答案。

第三章：PHP 简介

在第一章中，我解释了 PHP 是您用来使服务器生成动态输出的语言——每次浏览器请求页面时，输出可能会有所不同。在这一章中，您将开始学习这种简单但功能强大的语言；接下来几章将深入探讨这个主题，直到第七章。

我鼓励您使用第二章中列出的 IDE 之一或良好的代码编辑器来开发您的 PHP 代码。

这些程序中的许多程序将允许您运行 PHP 代码并查看本章讨论的输出。我还将向您展示如何创建 PHP 代码，以便您可以看到 Web 页面中的输出（最终用户将如何看待它）。但是，在这个阶段，这一步骤虽然一开始可能会令人兴奋，但实际上并不重要。

在生产中，您的网页将是 PHP、HTML、JavaScript 和一些 MySQL 语句的组合，使用 CSS 布局。此外，每个页面都可以导向其他页面，以便用户通过链接点击和填写表单。尽管如此，在学习每种语言时，我们可以避开所有这些复杂性。现在专注于编写 PHP 代码，并确保您得到预期的输出，或者至少理解实际得到的输出！

将 PHP 嵌入 HTML 中

默认情况下，PHP 文档以扩展名.php结尾。当 Web 服务器在请求的文件中遇到此扩展名时，它会自动将其传递给 PHP 处理器。当然，Web 服务器高度可配置，一些 Web 开发者选择强制以.htm或.html结尾的文件也由 PHP 处理，通常是因为他们想隐藏其对 PHP 的使用。

您的 PHP 程序负责传回一个干净的文件，适合在 Web 浏览器中显示。在最简单的情况下，一个 PHP 文档只会输出 HTML。为了证明这一点，您可以拿任何普通的 HTML 文档，并将其保存为 PHP 文档（例如，将index.html另存为index.php），它将与原始文档显示完全一致。

要触发 PHP 命令，您需要学习一个新的标签。这是第一部分：

<?php

您可能注意到的第一件事是标签没有关闭。这是因为整个 PHP 部分可以放置在此标签内，只有当遇到关闭部分时才会结束，其看起来像这样：

?>

一个小的 PHP“Hello World”程序可能看起来像示例 3-1。

示例 3-1. 调用 PHP

<?php
  echo "Hello world";
?>

使用此标签可以非常灵活。一些程序员在文档开头就打开标签，并在文档末尾关闭它，直接从 PHP 命令输出任何 HTML。然而，其他人选择仅在这些标签中插入 PHP 的最小可能片段，只在需要动态脚本时，将文档的其余部分保持为标准 HTML。

后一种类型的程序员通常认为，他们的编码风格会导致更快的代码，而前者则认为速度提升是如此微小，以至于不能证明在单个文档中多次进出 PHP 的额外复杂性。

随着你的学习深入，你肯定会发现自己偏好的 PHP 开发风格，但为了使本书中的示例更易于理解，我采用了尽量减少 PHP 和 HTML 之间转换次数的方法——通常在一个文档中只有一两次。

顺便说一句，PHP 语法还有一种轻微的变体。如果你在互联网上搜索 PHP 示例，你可能会遇到打开和关闭语法看起来像这样的代码：

<?
  echo "Hello world";
?>

尽管 PHP 解析器被调用的情况不太明显，但这是一种有效的替代语法，通常也可以工作。但我不鼓励使用，因为它与 XML 不兼容，现在已经被弃用（意味着不再推荐使用，并且未来版本可能会移除支持）。

注意

如果你的文件中只有 PHP 代码，可以省略结尾的 ?>。这是一个很好的做法，因为它可以确保你的 PHP 文件没有多余的空白字符泄漏（特别是在你编写面向对象的代码时尤为重要）。

本书的示例

为了节省你输入所有内容的时间，本书中的所有示例都已存储在 GitHub 上。你可以通过访问以下链接将存档下载到你的计算机中：GitHub。

除了按章节和示例编号列出所有示例（如 example3-1.php），某些示例可能需要显式的文件名，此时示例的副本也将使用相同文件夹中的文件名保存（例如即将出现的 示例 3-4，应保存为 test1.php）。

PHP 的结构

在本节中，我们将涵盖相当广泛的内容。这并不太困难，但我建议你仔细阅读，因为这为本书中的所有其他内容奠定了基础。和往常一样，章节末尾有一些有用的问题，可以用来测试你学到了多少知识。

使用注释

有两种方式可以向你的 PHP 代码添加注释。第一种通过在前面加上一对斜杠将单行变为注释：

// This is a comment

这种版本的注释功能是暂时从一个给你错误的程序中移除一行代码的好方法。例如，你可以使用这样的注释隐藏一个调试代码行，直到你需要它，就像这样：

// echo "X equals $x";

你也可以直接在一行代码后使用这种类型的注释描述它的操作，就像这样：

$x += 10; // Increment $x by 10

当你需要使用多行时，有第二种类型的注释，看起来像 示例 3-2。

示例 3-2. 多行注释

<?php
/* This is a section
 of multiline comments
 which will not be
 interpreted */
?>

您可以使用/*和*/字符对来在代码的几乎任何位置打开和关闭注释。大多数程序员使用这种结构来暂时注释掉整个不起作用或由于某种原因他们不希望解释的代码部分。

警告

一个常见的错误是使用/*和*/来注释一个已包含使用这些字符的注释部分的大段代码。您不能以这种方式嵌套注释；PHP 解释器不会知道注释何时结束，并显示错误消息。但是，如果您使用具有语法高亮的编辑器或 IDE，这种错误更容易发现。

基本语法

PHP 是一种相当简单的语言，起源于 C 和 Perl（如果您曾经接触过这些语言），但它看起来更像 Java。它也非常灵活，但您需要学习关于其语法和结构的一些规则。

分号

您可能已经注意到在前面的示例中，PHP 命令以分号结尾，就像这样：

$x += 10;

在 PHP 中，您将遇到的最常见的错误之一是忘记分号。这会导致 PHP 将多个语句视为一个语句，PHP 无法理解，因此会生成一个Parse error消息。

$ 符号

$ 符号已经被许多不同的编程语言以多种方式使用。例如，在 BASIC 语言中，它被用来终止变量名称以表示它们是字符串。

然而，在 PHP 中，您必须在所有变量前面放置一个$。这是必需的，以使 PHP 解析器更快，因为它可以立即知道何时遇到变量。无论您的变量是数字、字符串还是数组，它们都应该看起来像示例 3-3 中的那些。

示例 3-3. 三种不同类型的变量赋值

<?php
  $mycounter = 1;
  $mystring  = "Hello";
  $myarray   = array("One", "Two", "Three");
?>

这实际上就是您必须记住的语法。与 Python 等严格要求缩进和布局的语言不同，PHP 完全自由，您可以随意使用或不使用缩进和空格。事实上，合理使用空白通常是鼓励的（以及全面注释），这有助于您在回顾代码时理解它。它还有助于其他程序员在维护代码时理解。

变量

有一个简单的比喻可以帮助您理解 PHP 变量的含义。只需将它们想象成小（或大）火柴盒！没错，就是您粉刷过并写上名称的火柴盒。

字符串变量

想象一下，您有一盒火柴上面写着用户名。然后，您在一张纸上写下Fred Smith并将其放入盒子中（参见图 3-1）。好吧，这与将字符串值分配给变量的过程相同，就像这样：

$username = "Fred Smith";

引号表明“Fred Smith”是一个由字符组成的字符串。你必须用引号或撇号（单引号）将每个字符串括起来，尽管这两种引号之间存在微妙的差异，稍后会进行解释。当你想看看盒子里面装了什么时，你打开它，拿出那张纸，然后阅读它。在 PHP 中，这样做看起来像这样（显示变量的内容）：

echo $username;

或者您可以将其分配给另一个变量（复印纸张并将副本放入另一个火柴盒），如下所示：

$current_user = $username;

图 3-1. 您可以将变量视为装有物品的火柴盒

示例 3-4. 你的第一个 PHP 程序

<?php // test1.php
  $username = "Fred Smith";
  echo $username;
  echo "<br>";
  $current_user = $username;
  echo $current_user;
?>

现在，您可以通过在浏览器地址栏中输入以下内容来调用它：

http://localhost/test1.php

注意

如果在安装网络服务器期间（详见第二章）不太可能发生，您将服务器分配的端口更改为 80 以外的任何数字，则必须将该端口号放在本书中的所有示例中的 URL 中，例如，如果将端口更改为 8080，则前述 URL 将变成如下所示：

http://localhost:8080/test1.php

我不会再提到这一点了，所以请记住在尝试示例或编写自己的代码时使用端口号（如果需要）。

运行此代码的结果应该是两次出现名称Fred Smith，第一次是echo $username命令的结果，第二次是echo $current_user命令的结果。

数值变量

变量不一定只能包含字符串，它们也可以包含数字。如果我们回到火柴盒类比，要在变量$count中存储数字 17，相当于在火柴盒里放入 17 颗珠子，并在盒子上写上单词count：

$count = 17;

你也可以使用浮点数（包含小数点）。语法是一样的：

$count = 17.5;

要查看火柴盒的内容，只需打开它并计算珠子的数量。在 PHP 中，您可以将$count的值分配给另一个变量，或者可能只是将其回显到 Web 浏览器中。

数组

您可以将数组视为几个粘在一起的火柴盒。例如，假设我们要在名为$team的数组中存储一个五人足球队的球员姓名。为此，我们可以侧向粘合五个火柴盒，并在分别的纸片上写下所有球员的名字，将每个名字放入一个火柴盒中。

在整个火柴盒组件的顶部，我们将写下team（参见图 3-2）。在 PHP 中，这的等效物将是以下内容：

$team = array('Bill', 'Mary', 'Mike', 'Chris', 'Anne');

图 3-2. 数组就像粘在一起的几个火柴盒

此语法比您迄今看到的其他示例更复杂。数组构建代码包括以下结构：

array();

内部包含五个字符串。每个字符串用单引号或双引号括起来，并用逗号分隔。

如果我们想知道第四名玩家是谁，我们可以使用这个命令：

echo $team[3]; // Displays the name Chris

前述声明中的数字为 3 而不是 4 的原因是 PHP 数组的第一个元素实际上是零索引，因此玩家编号将从 0 到 4。

二维数组

数组还有更多用途。例如，它们不仅可以是单维线条的火柴盒，还可以是二维矩阵，甚至具有更多维度。

举例说明二维数组，比如我们想要跟踪井字棋游戏，这需要一个 3 × 3 的九个单元格的数据结构。要用火柴盒表示这个结构，想象九个火柴盒按照 3 行 3 列的矩阵排列在一起（见图 3-3）。

图 3-3. 用火柴盒模拟的多维数组

现在，你可以在每个移动中正确的火柴盒上放置一个带有x或o的纸条。要在 PHP 代码中实现这一点，你必须设置一个包含三个更多数组的数组，就像示例 3-5 中那样，其中数组已经设置了进行中的游戏。

示例 3-5. 定义一个二维数组

<?php
  $oxo = array(array('x', ' ', 'o'),
               array('o', 'o', 'x'),
               array('x', 'o', ' '));
?>

再次，我们在复杂性上迈出了一步，但是如果你掌握了基本的数组语法，这是很容易理解的。在外部array()结构中嵌套了三个array()结构。我们用一个字符填充了每一行的数组：x，o或空格。（我们使用空格以便所有单元格在显示时宽度相同。）

要返回该数组中第二行的第三个元素，你可以使用以下 PHP 命令，它将显示一个x：

echo $oxo[1][2];

注意

记住，数组索引（指向数组元素的指针）从零开始，而不是从一开始，所以前一个命令中的[1]指的是三个数组中的第二个，[2]则指的是该数组中的第三个位置。此命令将返回火柴盒中第三行第二列的内容。

正如前文所述，我们可以通过简单地在数组中创建更多数组来支持更多维度的数组。但是，在本书中我们不会涉及超过二维的数组。

如果你仍然难以掌握使用数组，不要担心，因为这个主题在第六章中有详细解释。

变量命名规则

在创建 PHP 变量时，必须遵循以下四条规则：

• 变量名在美元符号后必须以字母或下划线字符开头。

• 变量名只能包含字符a到z，A到Z，0到9，和_（下划线）。

• 变量名不得包含空格。如果变量名必须由多个词组成，一个好主意是用下划线 _（下划线）字符分隔单词（例如，$user_name）。

• 变量名区分大小写。变量 $High_Score 与变量 $high_score 不同。

注意

为了允许包含带重音的扩展 ASCII 字符，PHP 还支持变量名中从 127 到 255 的字节。但除非你的代码只由习惯使用这些字符的程序员维护，否则最好避免使用它们，因为使用英文键盘的程序员将难以访问它们。

运算符

运算符 允许你指定执行的数学运算，比如加法、减法、乘法和除法。但还有其他类型的运算符，如字符串、比较和逻辑运算符。在 PHP 中数学运算看起来很像普通算术运算——例如，以下语句输出 8：

echo 6 + 2;

在继续学习 PHP 能为你做什么之前，花点时间了解它提供的各种运算符。

算术运算符

算术运算符执行你所期望的操作——它们用于执行数学运算。你可以用它们进行四个主要运算（加、减、乘、除），以及找到模数（除法后的余数），并对值进行增加或减少（参见 表 3-1）。

表 3-1. 算术运算符

运算符	描述	示例
+	加法	$j + 1
–	减法	$j – 6
*	乘法	$j * 11
/	除法	$j / 4
%	取模（除法后的余数）	$j % 9
++	递增	++$j
--	递减	--$j
**	指数（或幂）	$j******2

赋值运算符

这些运算符将值赋给变量。它们从简单的 = 开始，然后是 +=、-= 等等（参见 表 3-2）。运算符 += 将右侧的值加到左侧的变量上，而不是完全替换左侧的值。因此，如果 $count 初始值为 5，则语句：

$count += 1;

将 $count 设置为 6，就像更熟悉的赋值语句一样：

$count = $count + 1;

/= 和 *= 运算符类似，但用于除法和乘法，.= 运算符将变量连接起来，使 $a .= "." 将句点附加到 $a 的末尾，而 %= 分配一个百分比值。

表 3-2. 赋值运算符

运算符	示例	等价于
=	$j **`=`** 15 | $j = 15
+=	$j **`+=`** 5 | $j = $j + 5
–=	$j **`-=`** 3 | $j = $j – 3
*=	$j **`*=`** 8 | $j = $j * 8
/=	$j **`/=`** 16 | $j = $j / 16
.=	$j **`.=`** $k	$j = $j . $k
%=	$j **`%=`** 4 | $j = $j % 4

比较运算符

比较运算符通常用于诸如 if 语句等结构中，需要比较两个项的情况下。例如，您可能希望知道一个您一直在递增的变量是否达到了特定值，或者另一个变量是否小于一个设定值等（参见 表 3-3）。

表 3-3. 比较运算符

运算符	描述	示例
==	等于	$j **==** 4
!=	不等于	$j **`!=`** 21
>	大于	$j **`>`** 3
<	小于	$j **`<`** 100
>=	大于或等于	$j **`>=`** 15
<=	小于或等于	$j **`<=`** 8
<>	不等于	$j **`<>`** 23
===	全等于	$j **`===`** "987"
!==	不全等于	$j **`!==`** "1.2e3"

请注意 = 和 == 之间的差异。前者是赋值运算符，而后者是比较运算符。即使是高级程序员有时在编码时也可能混淆这两者，所以请小心。

逻辑运算符

如果你以前没有使用过逻辑运算符，刚开始可能会感到有些令人畏惧。但只需像在英语中运用逻辑一样思考即可。例如，你可能会对自己说，“如果现在时间晚于下午 12 点而早于下午 2 点，则吃午饭。”在 PHP 中，这段代码可能看起来像以下示例（使用军事时间）：

if ($hour > 12 && $hour < 14) dolunch();

在这里，我们已经将去吃午饭的一系列指令移到一个稍后需要创建的名为 dolunch 的函数中。

如前面的示例所示，通常使用逻辑运算符来组合前一节中显示的比较运算符的结果。逻辑运算符也可以输入到另一个逻辑运算符中：“如果现在时间晚于下午 12 点且早于下午 2 点，或者如果烤肉的香味弥漫在走廊上并且桌子上有盘子。”通常情况下，如果某物具有 TRUE 或 FALSE 值，它可以输入到一个逻辑运算符中。逻辑运算符需要两个真值或假值输入，并生成一个真值或假值结果。

表 3-4 显示了逻辑运算符。

表 3-4. 逻辑运算符

运算符	描述	示例
&&	与	$j == 3 **&&** $k == 2
and	低优先级的 and	$j == 3 **and** $k == 2
&#124;&#124;	或	$j < 5 **&#124;&#124;** $j > 10
or	低优先级的 or	$j < 5 **or** $j > 10
!	非	! ($j **==** $k)
xor	异或	$j **xor** $k

注意 && 通常可以和 and 互换；同样，|| 和 or 也是如此。然而，因为 and 和 or 的优先级较低，除非它们是唯一的选项，否则应避免使用它们，就像以下语句一样，这个语句必须使用 or 操作符（如果第一个失败，|| 不能用来强制执行第二个语句）：

$html = file_get_contents($site) `or` die("Cannot download from $site");

这些运算符中最不寻常的是 xor，它代表排他或，如果任一值为 TRUE，则返回 TRUE 值，但如果两个输入都为 TRUE 或都为 FALSE，则返回 FALSE 值。为了理解这一点，想象一下你想要自己调配家庭用品的清洁剂。氨水和漂白剂都是良好的清洁剂，所以你希望你的清洁剂有其中之一。但是清洁剂不能同时有两种，因为这种组合是危险的。在 PHP 中，你可以这样表示：

$ingredient = $ammonia xor $bleach;

在这个例子中，如果 $ammonia 或 $bleach 的任一值为 TRUE，$ingredient 也将被设置为 TRUE。但是如果两者都为 TRUE 或都为 FALSE，$ingredient 将被设置为 FALSE。

变量赋值

将值分配给变量的语法始终为 variable = value。或者，要将值重新分配给另一个变量，则为 other_variable = variable。

还有一些其他的赋值运算符可能会对你有用。例如，我们已经看到了这个：

$x += 10;

这告诉 PHP 解析器将右侧的值（在本例中为值 10）添加到变量 $x 中。同样，我们可以进行减法如下：

$y –= 10;

变量递增和递减

增加或减去 1 是一种常见的操作，PHP 提供了特殊的运算符来实现。你可以使用以下之一来代替 += 和 -= 运算符：

++$x;
--$y;

与测试（if 语句）结合使用的语法如下：

if (++$x == 10) echo $x;

这告诉 PHP 首先 递增 $x 的值，然后测试它是否为 10，如果是，则输出其值。但是你也可以要求 PHP 在测试值之后（或者，如下例中，递减）递增变量的值，就像这样：

if ($y-- == 0) echo $y;

这给出了一个略有不同的结果。假设 $y 在执行该语句之前初始值为 0。比较将返回一个 TRUE 结果，但是在进行比较后，$y 将被设置为 -1。那么 echo 语句会显示 0 还是 -1？试着猜一下，然后在 PHP 处理器中尝试这个语句以确认。因为这些语句的组合很令人困惑，应该只作为教育例子而不是良好编程风格的指南。

简而言之，如果运算符放在变量之前，则变量在测试之前被递增或递减，而如果运算符放在变量之后，则变量在测试之后被递增或递减。

顺便说一句，前面问题的正确答案是 echo 语句将显示结果 –1，因为 $y 在 if 语句中被访问后立即递减，然后在 echo 语句之前。

字符串连接

连接 是一个有些古怪的术语，用于将某物放在另一物后面。因此，字符串连接使用句点（.）将一个字符串附加到另一个字符串。这样做的最简单方法如下：

echo "You have " . $msgs . " messages.";

假设变量 $msgs 被设置为值 5，那么这行代码的输出将是：

You have 5 messages.

就像你可以使用 += 运算符向数字变量添加值一样，你可以使用 .= 将一个字符串附加到另一个字符串上，像这样：

$bulletin .= $newsflash;

在这种情况下，如果 $bulletin 包含新闻公告，而 $newsflash 包含新闻快讯，这条命令将新闻快讯附加到新闻公告中，使得 $bulletin 现在包含了两个文本字符串。

字符串类型

PHP 支持两种类型的字符串，根据你使用的引号类型来表示。如果你希望赋值一个字面字符串，保留其确切内容，你应该使用单引号（撇号），像这样：

$info = 'Preface variables with a $ like this: $variable';

在这种情况下，单引号字符串中的每个字符都被赋值给 $info。如果你使用了双引号，PHP 将尝试将 $variable 解析为一个变量。

另一方面，当你想在字符串中包含变量的值时，你可以使用双引号字符串：

echo "This week $count people have viewed your profile";

正如你将会意识到的，这种语法还提供了一个更简单的选项，用于连接字符串而无需使用句点或关闭和重新打开引号来附加一个字符串到另一个字符串上。这称为 变量替换，一些程序员广泛使用它，而其他人则根本不使用它。

转义字符

有时字符串需要包含具有特殊含义的字符，这些字符可能会被错误地解释。例如，以下代码行将无法工作，因为在 spelling’s 中遇到的第二个引号告诉 PHP 解析器字符串已经结束。因此，剩余的部分将被拒绝作为错误：

$text = 'My spelling's atroshus'; // Erroneous syntax

要纠正这个问题，你可以直接在有问题的引号前加上反斜杠，告诉 PHP 将该字符视为字面量，而不解释它：

$text = 'My spelling\'s still atroshus';

你可以在 PHP 几乎所有可能导致解释字符错误的情况下使用这个技巧。例如，以下双引号字符串将被正确赋值：

$text = "She wrote upon it, \"Return to sender\".";

此外，你可以使用转义字符插入各种特殊字符到字符串中，如制表符、换行符和回车符。你可能猜到，它们分别用 \t、\n 和 \r 表示。这里有一个使用制表符布局标题的示例—这仅用于说明转义，因为在网页中总有更好的布局方式：

$heading = "Date\tName\tPayment";

这些特殊的反斜杠前缀字符只在双引号包围的字符串中起作用。在单引号包围的字符串中，前面的字符串将显示为丑陋的\t序列而不是制表符。在单引号包围的字符串中，只有转义的撇号（\'）和转义的反斜杠本身（\\）被识别为转义字符。

多行命令

有时你需要从 PHP 中输出大量文本，使用多个echo（或print）语句会耗时且混乱。为了解决这个问题，PHP 提供了两个便利的方法。第一个是将多行放在引号中，如示例 3-6 所示。变量也可以像在示例 3-7 中那样赋值。

示例 3-6. 多行字符串echo语句

<?php
  $author = "Steve Ballmer";

  echo "Developers, developers, developers, developers, developers,
 developers, developers, developers, developers!

 - $author.";
?>

示例 3-7. 多行字符串赋值

<?php
  $author = "Bill Gates";

  $text = "Measuring programming progress by lines of code is like
 Measuring aircraft building progress by weight.

 - $author.";
?>

PHP 还提供了使用<<<运算符的多行序列——通常称为here-document或heredoc——作为指定字符串文字的一种方式，保留文本中的换行和其他空白（包括缩进）。其使用方法可以在示例 3-8 中看到。

示例 3-8. 替代的多行echo语句

<?php
  $author = "Brian W. Kernighan";

  echo <<<_END
 Debugging is twice as hard as writing the code in the first place.
 Therefore, if you write the code as cleverly as possible, you are,
 by definition, not smart enough to debug it.

 - $author.
_END;
?>

这段代码告诉 PHP 输出两个_END标签之间的所有内容，就好像它是一个双引号包围的字符串（但在 heredoc 中，引号不需要转义）。这意味着开发者可以直接在 PHP 代码中编写整个 HTML 部分，然后只需用 PHP 变量替换特定的动态部分。

重要的是要记住，关闭的_END; 必须 出现在新行的开头，并且它必须是那一行中唯一 的内容—甚至不能在它后面添加注释（甚至是一个空格）。一旦你关闭了一个多行块，你可以自由地再次使用相同的标签名。

注意

记住：使用<<<_END..._END;这种 heredoc 结构时，你不需要添加\n换行符来换行，只需按回车键并开始新的一行。与双引号或单引号包围的字符串不同的是，在 heredoc 中，你可以自由地使用所有单引号和双引号，无需通过在它们前面加上反斜杠（\）进行转义。

示例 3-9 展示了如何使用相同的语法将多行赋值给一个变量。

示例 3-9. 多行字符串变量赋值

<?php
  $author = "Scott Adams";

  $out = <<<_END
 Normal people believe that if it ain't broke, don't fix it.
 Engineers believe that if it ain't broke, it doesn't have enough
 features yet.

 - $author.
_END;
echo $out;
?>

变量$out将被填充为两个标签之间的内容。如果你是在追加而不是赋值，你也可以使用.=来将字符串追加到$out而不是使用=。

要小心不要在第一次出现的_END后面直接加上分号，因为这会在多行块甚至开始之前终止它，并导致Parse error消息。

顺便说一句，_END 标签只是我为这些示例选择的一个，因为在 PHP 代码中不太可能使用它，因此是唯一的。你可以使用任何你喜欢的标签，比如 _SECTION1 或 _OUTPUT 等等。此外，为了区分这样的标签和变量或函数，一般的做法是在它们之前加上一个下划线。

注意

将文本布置在多行上通常只是为了使你的 PHP 代码更易于阅读，因为一旦它在网页中显示，HTML 格式规则就接管了，空白会被抑制（但是在我们的例子中，$author 仍然会被替换为变量的值）。

因此，例如，如果你将这些多行输出示例加载到浏览器中，它们将不会显示在几行上，因为所有浏览器都像对待空格一样对待换行符。但是，如果你使用浏览器的查看源代码功能，你会发现换行符被正确放置，PHP 保留了换行符。

变量类型

PHP 是一种弱类型语言。这意味着变量在使用之前不必声明，并且 PHP 总是在访问时根据上下文需要的类型来转换变量。

例如，你可以创建一个多位数，并通过假设它为字符串来提取它的第n位数字。在示例 3-10 中，数字12345和67890相乘，返回结果838102050，然后放入变量$number中。

示例 3-10. 数字自动转换为字符串

<?php
  $number = 12345 * 67890;
  echo substr($number, 3, 1);
?>

在赋值点，$number是一个数值变量。但是在第二行，调用了 PHP 函数substr，它要求从$number中返回一个字符，从第四个位置开始（记住 PHP 偏移从零开始）。为此，PHP 将$number转换为一个九个字符的字符串，以便substr可以访问并返回字符，而在本例中是1。

同样适用于将字符串转换为数字，等等。在示例 3-11 中，变量$pi被设置为一个字符串值，然后通过计算圆的面积的方程，在第三行自动转换为浮点数，输出值78.5398175。

示例 3-11. 将字符串自动转换为数字

<?php
  $pi     = "3.1415927";
  $radius = 5;
  echo $pi * ($radius * $radius);
?>

实际上，这一切的意思是你不必过于担心你的变量类型。只需给它们赋予对你来说有意义的值，PHP 将根据需要自动转换它们。然后，当你想检索值时，只需请求它们，例如，使用echo语句，但请记住，有时自动转换的操作可能不像你期望的那样运行。

常量

常量与变量类似，用于保存稍后访问的信息，但它们就像它们听起来的那样——常量。换句话说，一旦定义了常量，其值在程序的其余部分设置，并且无法更改。

例如，你可以使用一个常量来保存服务器根目录的位置（网站主文件夹的位置）。你可以像这样定义这样一个常量：

define("ROOT_LOCATION", "/usr/local/www/");

然后，要读取变量的内容，只需像普通变量一样引用它（但不需要前面加上美元符号）：

$directory = ROOT_LOCATION;

现在，每当你需要在不同配置的服务器上运行你的 PHP 代码时，你只需要改变一行代码。

注意

关于常量，你必须记住的两件主要事情是它们不应该以$开头（不像普通变量），并且只能使用define函数来定义它们。

通常被认为是一个良好的实践是只为常量变量名使用大写字母，特别是如果其他人也会阅读你的代码。

预定义常量

PHP 准备了几十个预定义的常量，作为初学者通常不会使用。然而，有一些被称为魔术常量，你会发现它们非常有用。魔术常量的名称总是以两个下划线开头和两个下划线结尾，这样你就不会意外地尝试使用已经被占用的名称来定义自己的常量。它们在 Table 3-5 中有详细介绍。表中提到的概念将在后续章节中介绍。

表 3-5. PHP 的魔术常量

魔术常量	描述
__LINE__	文件的当前行号。
__FILE__	文件的完整路径和文件名。如果在include中使用，则返回被包含文件的文件名。一些操作系统允许目录的别名，称为符号链接；在 __FILE__ 中，这些始终会被更改为实际的目录。
__DIR__	文件所在的目录。如果在include中使用，返回被包含文件的目录。这相当于dirname(__FILE__)。这个目录名没有尾随的斜杠，除非它是根目录。
__FUNCTION__	函数名。以声明时的大小写形式返回函数名。在 PHP 4 中，其值始终是小写的。
__CLASS__	类名。以声明时的大小写形式返回类名。在 PHP 4 中，其值始终是小写的。
__METHOD__	类方法名。方法名将以声明时的大小写形式返回。
__NAMESPACE__	当前命名空间的名称。此常量在编译时定义（区分大小写）。

这些变量的一个方便用法是调试时，当你需要插入一行代码以查看程序流是否到达它：

echo "This is line " . __LINE__ . " of file " . __FILE__;

这会将当前文件中的当前程序行（包括路径）打印到 Web 浏览器。

echo 和 print 命令之间的区别

到目前为止，您已经看到了echo命令在多种不同方式下从服务器向浏览器输出文本。在某些情况下，已输出字符串文字。在其他情况下，首先连接字符串或评估变量。我还展示了分布在多行的输出。

但是有一种可以使用的echo替代方案：print。这两个命令非常相似，但print是一个类似函数的结构，接受一个参数并返回一个值（始终为1），而echo纯粹是 PHP 语言的构造。由于这两个命令都是构造，所以都不需要括号。

总的来说，echo命令通常比print命令稍快一点，因为它不设置返回值。另一方面，由于它不像函数实现，echo不能作为更复杂表达式的一部分使用，而print可以。下面是一个使用print输出变量值为TRUE或FALSE的示例——使用echo无法以同样的方式执行，因为它将显示Parse error消息：

$b ? print "TRUE" : print "FALSE";

问号仅仅是一种询问变量$b是否为TRUE或FALSE的方法。如果$b为TRUE，则执行冒号后面左侧的命令，而如果$b为FALSE，则执行冒号后面右侧的命令。

尽管如此，本书中的示例通常使用echo，我建议您在 PHP 开发中达到需要使用print的阶段之前也这样做。

函数

函数分离执行特定任务的代码部分。例如，也许您经常需要查找日期并以特定格式返回。这将是一个将其转换为函数的好例子。执行此操作的代码可能只有三行，但如果您不使用函数，则不得不在程序中粘贴它十几次，这将使您的程序变得不必要地庞大和复杂。而且，如果以后决定更改日期格式，将其放在函数中意味着只需更改一个地方。

将代码放入函数中不仅可以缩短程序并提高可读性，还可以增加额外的功能（双关语），因为函数可以接受参数以使其执行不同的操作。它们还可以将值返回给调用代码。

要创建函数，请按照示例 3-12 中所示的方式声明它。

示例 3-12. 一个简单的函数声明

<?php
  function longdate($timestamp)
  {
    return date("l F jS Y", $timestamp);
  }
?>

此函数以2025 年 5 月 2 日星期五的格式返回日期。初始括号之间可以传递任意数量的参数；我们选择只接受一个。花括号包围后续调用该函数时执行的所有代码。请注意，在此示例中date函数调用中的第一个字母是小写字母 L，不要与数字 1 混淆。

要使用这个函数输出今天的日期，请在你的代码中放置以下调用：

echo longdate(time());

如果你需要打印出 17 天前的日期，现在只需要发出以下调用：

echo longdate(time() - 17 * 24 * 60 * 60);

它传递给longdate当前时间减去 17 天前的秒数（17 天 × 24 小时 × 60 分钟 × 60 秒）。

函数也可以接受多个参数并返回多个结果，使用我将在接下来的章节中介绍的技术。

变量作用域

如果你有一个非常长的程序，很可能你会开始用尽好的变量名，但是在 PHP 中你可以决定变量的作用域。换句话说，你可以告诉它你想要变量$temp仅在特定函数内部使用，并在函数返回时忘记它曾经被使用过。事实上，这是 PHP 变量的默认作用域。

或者，你可以告诉 PHP 一个变量的作用域是全局的，因此可以被程序中的任何其他部分访问。

局部变量

局部变量是仅在函数内部创建并且只能被函数访问的变量。它们通常是临时变量，用于存储函数返回之前部分处理的结果。

一组局部变量是函数的参数列表。在前一节中，我们定义了一个接受名为$timestamp参数的函数。这仅在函数体中有意义；你不能在函数外部获取或设置它的值。

对于局部变量的另一个例子，请再看一下稍微修改过的longdate函数，在示例 3-13 中。

示例 3-13。longdate函数的扩展版本

<?php
  function longdate($timestamp)
  {
    $temp = date("l F jS Y", $timestamp);
    return "The date is $temp";
  }
?>

在这里，我们将date函数返回的值赋给临时变量$temp，然后将其插入到函数返回的字符串中。一旦函数返回，$temp变量及其内容就会消失，就像它们从未被使用过一样。

现在，为了看到变量作用域的影响，让我们看一些类似的代码，如示例 3-14。在这里，$temp在调用longdate函数之前被创建。

示例 3-14。试图在函数longdate中访问$temp将失败

<?php
  $temp = "The date is ";
  echo longdate(time());

  function longdate($timestamp)
  {
    return $temp . date("l F jS Y", $timestamp);
  }
?>

然而，因为$temp既不是在longdate函数内创建的，也没有作为参数传递给它，所以longdate无法访问它。因此，这段代码仅输出日期，而不是前面的文本。事实上，根据 PHP 的配置方式，它可能首先显示错误消息Notice: Undefined variable: temp，这是你不希望用户看到的。

这是因为，默认情况下，函数内创建的变量仅在该函数内部可用，而在任何函数之外创建的变量只能被非函数代码访问。

修复 示例 3-14 的一些方法出现在示例 3-15 和 3-16 中。

示例 3-15. 重新编写以在其本地作用域内引用 $temp 修复了问题

<?php
  $temp = "The date is ";
  echo $temp . longdate(time());

  function longdate($timestamp)
  {
    return date("l F jS Y", $timestamp);
  }
?>

示例 3-15 将对 $temp 的引用移出函数。引用出现在变量定义的同一作用域内。

示例 3-16. 另一种解决方案：将 $temp 作为参数传递

<?php
  $temp = "The date is ";
  echo longdate($temp, time());

  function longdate($text, $timestamp)
  {
    return $text . date("l F jS Y", $timestamp);
  }
?>

示例 3-16 中的解决方案将 $temp 作为额外参数传递给 longdate 函数。longdate 函数将其读入一个临时变量 $text 中，并输出所需的结果。

注意

忘记变量作用域是一个常见的编程错误，所以记住变量作用域是如何工作的将有助于你调试一些非常晦涩的问题。可以说，除非你另有声明，否则变量的作用域仅限于局部：要么是当前函数内，要么是在任何函数外的代码中，这取决于它是在函数内首次创建还是访问。

全局变量

有些情况下，你需要一个具有全局范围的变量，因为你希望所有的代码都能访问它。此外，有些数据可能又大又复杂，你不想把它作为函数的参数来回传递。

要从全局作用域访问变量，需添加关键字 global。假设你有一种方法将用户登录到网站，并希望所有代码都知道它是与已登录用户还是访客进行交互。一种方法是在变量前使用 global 关键字，如 $is_logged_in：

global $is_logged_in;

现在你的登录函数只需在成功登录尝试时将该变量设置为 1，失败时设置为 0。由于变量的作用域设置为全局，你程序中的每一行代码都可以访问它。

尽管如此，你应该谨慎使用给予全局访问权限的变量。我建议只有在完全找不到其他实现结果的方法时才创建它们。通常，将程序分成小部分并隔离数据会减少 bug 并更容易维护。如果你有一个千行的程序（总有一天你会有这样的程序），发现某个全局变量在某个时刻有错误的值，你将需要多长时间才能找到设置它错误的代码？

另外，如果你有太多全局作用域的变量，你就有可能在本地再次使用其中的一个变量名，或者至少认为你已经在本地使用过它，实际上它已经声明为全局。这种情况可能导致各种奇怪的 bug。

注意

我通常采用所有需要全局访问的变量名大写的约定（就像建议将常量设为大写一样），这样我一眼就能看到变量的作用域。

静态变量

在“本地变量”章节（#local_variables）中，我提到当函数结束时，局部变量的值将被清除。如果函数运行多次，它将以变量的新副本开始，并且先前的设置不会产生影响。

这里有一个有趣的案例。如果您在函数内部有一个局部变量，不希望代码的其他部分访问它，但又希望保留其值以供下次调用函数时使用怎么办？为什么？也许是因为您想要一个计数器来跟踪函数调用的次数。解决方案是声明一个 静态 变量，如 示例 3-17 所示。

示例 3-17. 使用静态变量的函数

<?php
  function test()
  {
    static $count = 0;
    echo $count;
    $count++;
  }
?>

函数 test 的第一行创建了一个名为 $count 的静态变量，并将其初始化为 0。下一行输出变量的值；最后一行增加变量的值。

下次调用该函数时，由于 $count 已经声明，函数的第一行将被跳过。然后显示 $count 先前增加的值，然后再次增加变量。

如果您计划使用静态变量，应注意不能在定义中分配表达式的结果。它们只能用预定义的值初始化（参见 示例 3-18）。

示例 3-18. 允许和不允许的静态变量声明

<?php
  static $int = 0;         // Allowed
  static $int = 1+2;       // Correct (as of PHP 5.6)
  static $int = sqrt(144); // Disallowed
?>

超全局变量

从 PHP 4.1.0 开始，几个预定义变量可用。它们被称为 超全局变量，这意味着它们由 PHP 环境提供，但在程序中是全局的，可在任何地方访问。

这些超全局变量包含关于当前运行程序及其环境的大量有用信息（见 表 3-6）。它们结构化为关联数组，这是第六章讨论的主题（参见 第 6 章）。

表 3-6. PHP 超全局变量

超全局变量名称	内容
$GLOBALS	当前脚本全局范围内定义的所有变量。数组的键是变量名。
$_SERVER	包含头信息、路径和脚本位置等信息。此数组的条目由 Web 服务器创建，并不能保证每个 Web 服务器都提供所有或部分条目。
$_GET	通过 HTTP GET 方法传递给当前脚本的变量。
$_POST	通过 HTTP POST 方法传递给当前脚本的变量。
$_FILES	通过 HTTP POST 方法上传到当前脚本的项目。
$_COOKIE	通过 HTTP cookie 传递给当前脚本的变量。
$_SESSION	当前脚本可用的会话变量。
$_REQUEST | 浏览器传递的信息的内容；默认包括 $_GET、$_POST 和 $_COOKIE。
$_ENV	通过环境方法传递给当前脚本的变量。

所有超全局变量（除了$GLOBALS）都以单个下划线和大写字母命名；因此，应避免以此方式命名您自己的变量，以避免潜在的混淆。

为了说明您如何使用它们，让我们看一个常见的例子。超全局变量提供的众多信息中，有一个是指向当前网页的引用页面的 URL。可以这样访问这些引用页面信息：

$came_from = $_SERVER['HTTP_REFERER'];

就是这么简单。哦，如果用户直接访问您的网页，比如直接在浏览器中输入其 URL，那么$came_from将被设置为空字符串。

超全局变量和安全性

在您开始使用超全局变量之前，需要注意一点，因为黑客经常利用它们来寻找可能破坏您网站的漏洞。他们会通过加载$_POST、$_GET或其他超全局变量来注入恶意代码，如 Unix 或 MySQL 命令，如果您天真地访问它们，可能会导致损坏或显示敏感数据。

因此，在使用它们之前，您应始终对超全局变量进行清理。通过 PHP 的htmlentities函数是一种方法。它将所有字符转换为 HTML 实体。例如，小于号和大于号（<和>）被转换为字符串<和>，这样它们就变得无害了，所有的引号和反斜杠等也是如此。

因此，更好的访问$_SERVER（以及其他超全局变量）的方法是：

$came_from = htmlentities($_SERVER['HTTP_REFERER']);

警告

在任何需要处理用户或其他第三方数据以进行输出的情况下，使用htmlentities函数进行清理是一种重要的实践，而不仅仅是超全局变量。

本章为你提供了使用 PHP 的坚实基础。在第四章中，你将开始运用所学内容来构建表达式和控制程序流程，换句话说，进行实际编程。

但在继续之前，我建议你通过以下（如果可能的话，全部都做）问题来测试自己，确保你已经完全消化了本章的内容。

问题

1. 用于启动 PHP 解释程序代码的标记是什么？它的简写形式是什么？

2. 有哪两种类型的注释标签？

3. 每个 PHP 语句的结尾必须放置哪个字符？

4. 哪个符号用于定义所有 PHP 变量的前缀？

5. 变量可以存储什么？

6. $variable = 1和$variable == 1之间有什么区别？

7. 为什么变量名允许使用下划线（$current_user），而不允许使用连字符（$current-user）？

8. 变量名区分大小写吗？

9. 变量名可以包含空格吗？

10. 如何将一个变量类型转换为另一个变量类型（比如从字符串到数字）？

11. ++$j和$j++之间有什么区别？

12. 运算符&&和and可以互换使用吗？

13. 如何创建多行的echo或赋值？

14. 能重新定义一个常量吗？

15. 如何转义引号？

16. echo 和 print 命令有什么区别？

17. 函数的目的是什么？

18. 如何使一个变量在 PHP 程序的所有部分都可访问？

19. 如果在函数内生成数据，有哪些方法可以将数据传递给程序的其余部分？

20. 将字符串和数字结合的结果是什么？

请参阅“第三章答案”，在附录 A 中找到这些问题的答案。

第四章：PHP 中的表达式和控制流

前一章只是简单介绍了一些这一章更全面涵盖的主题，如做出选择（分支）和创建复杂表达式。在前一章中，我想专注于 PHP 中最基本的语法和操作，但无法避免触及更高级的主题。现在我可以填补你需要正确使用这些强大 PHP 功能的背景。

在本章中，你将深入了解 PHP 编程的实践工作以及如何控制程序的流程。

表达式

让我们从任何编程语言中最基础的部分开始：表达式。

表达式是值、变量、运算符和函数的组合，其结果是一个值。对于任何已经学过高中代数的人来说，这是熟悉的。这里有一个例子：

*`y`* = 3 (|2*`x`*| + 4)

在 PHP 中，它将是:

$y = 3 * (abs(2 * $x) + 4);

这个数学声明中返回的值（y在这个数学声明中，或者在 PHP 中是$y）可以是一个数字，一个字符串，或者一个布尔值（以 19 世纪英国数学家和哲学家乔治·布尔命名）。到现在为止，你应该熟悉前两种值类型，但我将解释第三种。

真还是假？

基本的布尔值可以是TRUE或FALSE。例如，表达式20 > 9（20 大于 9）是TRUE，表达式5 == 6（5 等于 6）是FALSE。（你可以使用其他经典布尔运算符如AND、OR和XOR来结合这些操作，这些在本章后面会介绍。）

注意

请注意，我在TRUE和FALSE的名称中使用了大写字母。这是因为它们在 PHP 中是预定义常量。如果你愿意，你也可以使用小写版本，因为它们也是预定义的。事实上，小写版本更稳定，因为 PHP 不允许重新定义它们；大写的可能会被重新定义，这是在导入第三方代码时需要注意的事情。

如果你要求 PHP 打印预定义的常量，它实际上不会这样做，就像在示例 4-1 中一样。对于每一行，示例打印出一个字母，后面跟着一个冒号和一个预定义常量。当示例运行时，PHP 将数字值1随意分配给TRUE，因此在a:之后显示1。更神秘的是，因为b:评估为FALSE，它不显示任何值。在 PHP 中，常量FALSE被定义为NULL，另一个表示无值的预定义常量。

示例 4-1。输出TRUE和FALSE的值

<?php // test2.php
  echo "a: [" . TRUE  . "]<br>";
  echo "b: [" . FALSE . "]<br>";
?>

<br>标签用于创建换行符，从而在 HTML 中将输出分为两行。这是输出：

a: [1]
b: []

转向布尔表达式，示例 4-2 展示了一些简单的表达式：前面提到的两个，再加上另外两个。

示例 4-2。四个简单的布尔表达式

<?php
  echo "a: [" . (20 > 9) . "]<br>";
  echo "b: [" . (5 == 6) . "]<br>";
  echo "c: [" . (1 == 0) . "]<br>";
  echo "d: [" . (1 == 1) . "]<br>";
?>

这段代码的输出是：

a: [1]
b: []
c: []
d: [1]

顺便说一句，在某些语言中，FALSE 可能被定义为 0 或者甚至是 -1，所以在使用每种语言时，检查其定义是很重要的。幸运的是，布尔表达式通常深藏在其他代码中，因此你通常不必担心 TRUE 和 FALSE 在内部的具体表现。事实上，这些名称在代码中很少出现。

文字和变量

这些是编程的最基本元素，也是表达式的构建块。文字 简单地意味着评估为其自身的东西，比如数字 73 或字符串 "Hello"。变量，我们已经看到其名称以美元符号开头，评估为已分配给它的值。最简单的表达式只是一个单一的文字或变量，因为两者都返回一个值。

示例 4-3 显示了三个文字和两个变量，它们都返回值，尽管类型不同。

示例 4-3. 文字和变量

<?php
  $myname = "Brian";
  $myage  = 37;

  echo "a: " . 73      . "<br>"; // Numeric literal
  echo "b: " . "Hello" . "<br>"; // String literal
  echo "c: " . FALSE   . "<br>"; // Constant literal
  echo "d: " . $myname . "<br>"; // String variable
  echo "e: " . $myage  . "<br>"; // Numeric variable
?>

正如你所期望的那样，你会从所有这些运算中看到返回值，除了 c:，它评估为 FALSE，在以下输出中不返回任何内容：

a: 73
b: Hello
c:
d: Brian
e: 37

结合运算符，可以创建更复杂的表达式，评估为有用的结果。

程序员将表达式与我们早些时候看到的赋值操作符等其他语言结构结合起来，形成语句。 示例 4-4 显示了两个语句。第一个将表达式 366 - $day_number 的结果赋给变量 $days_to_new_year，第二个仅在表达式 $days_to_new_year < 30 评估为 TRUE 时输出友好消息。

示例 4-4. 表达式和语句

<?php
  $days_to_new_year = 366 - $day_number; // Expression

  if ($days_to_new_year < 30)
  {
     echo "Not long now till new year";  // Statement
  }
?>

运算符

PHP 提供了许多强大的不同类型的运算符——算术、字符串、逻辑、赋值、比较等等（参见 表 4-1）。

表 4-1. PHP 运算符类型

运算符	描述	示例
算术	基本数学运算	$a + $b
数组	数组并集	$a + $b
赋值	赋值操作	$a = $b + 23
位运算	在字节内操作位	12 ^ 9
比较	比较两个值	$a < $b
执行	执行反引号内容	`ls -al`
增量/减量	加或减 1	$a++
逻辑	布尔运算	$a and $b
字符串	连接	$a . $b

每个运算符接受不同数量的操作数：

• 一元 运算符，如递增（$a++）或否定（!$a），接受一个操作数。

• 二元 运算符，代表大多数 PHP 运算符（包括加法、减法、乘法和除法），接受两个操作数。

• 唯一的三元 运算符，采用 expr ? x : y 的形式，需要三个操作数。它是一个简洁的单行 if 语句，如果 expr 是 TRUE，则返回 x，如果 expr 是 FALSE，则返回 y。

运算符优先级

如果所有运算符的优先级相同，则按遇到的顺序处理它们。实际上，许多运算符确实具有相同的优先级。看看 示例 4-5。

示例 4-5. 三个等价表达式

1 + 2 + 3 - 4 + 5
2 - 4 + 5 + 3 + 1
5 + 2 - 4 + 1 + 3

在这里，您会看到尽管数字（及其前面的运算符）已经移动，但每个表达式的结果是值7，因为加号和减号运算符具有相同的优先级。我们可以用乘法和除法来尝试同样的事情（参见 示例 4-6）。

示例 4-6. 三个同等表达式

1 * 2 * 3 / 4 * 5
2 / 4 * 5 * 3 * 1
5 * 2 / 4 * 1 * 3

这里的结果值始终为7.5。但是当我们在一个表达式中混合具有不同优先级的运算符时，情况就会改变，就像 示例 4-7 中一样。

示例 4-7. 使用混合优先级运算符的三个表达式

1 + 2 * 3 - 4 * 5
2 - 4 * 5 * 3 + 1
5 + 2 - 4 + 1 * 3

如果没有运算符优先级，这三个表达式的计算结果将分别为25，–29和12。但是因为乘法和除法优先于加法和减法，这些表达式被计算为如果在表达式的这些部分周围有括号，就像数学表示法一样（参见 示例 4-8）。

示例 4-8. 显示隐含括号的三个表达式

1 + (2 * 3) - (4 * 5)
2 - (4 * 5 * 3) + 1
5 + 2 - 4 + (1 * 3)

PHP 首先计算括号内的子表达式，以得出半完成的表达式在 示例 4-9 中的结果。

示例 4-9. 在评估括号中的子表达式后

1 + (6) - (20)
2 - (60) + 1
5 + 2 - 4 + (3)

这些表达式的最终结果分别为–13，–57和6（与没有运算符优先级时得到的25，–29和12完全不同）。

当然，您可以通过插入自己的括号并强制希望的任何顺序来覆盖默认的运算符优先级（参见 示例 4-10）。

示例 4-10. 强制左到右的评估

((1 + 2) * 3 - 4) * 5
(2 - 4) * 5 * 3 + 1
(5 + 2 - 4 + 1) * 3

正确插入括号后，现在可以看到值分别为25，–29和12。

表 4-2 按优先级从高到低列出了 PHP 的运算符。

表 4-2. PHP 运算符的优先级（从高到低）

运算符	类型
()	括号
++ --	自增/自减
!	逻辑
* / %	算术
+ - .	算术和字符串
<< >>	位
< <= > >= <>	比较
== != === !==	比较
&	位（及引用）
^	位
&#124;	位
&&	逻辑
&#124;&#124;	逻辑
? :	三元
= += -= *= /= .= %= &= != ^= <<= >>=	赋值
and	逻辑
xor	逻辑
or	逻辑

此表中的顺序并非任意排列，而是精心设计，以便您可以在不使用括号的情况下获取最常见和直观的优先级。例如，您可以使用and或or分隔两个比较，以获得预期的结果。

结合性

我们一直在讨论从左到右处理表达式，除非运算符优先级生效。但是有些运算符要求从右到左处理，这种处理方向称为运算符的结合性。对于某些运算符，没有结合性。

结合性（如表 4-3 所详细说明的）在不显式强制优先级的情况下变得重要，因此您需要了解运算符的默认操作。

表 4-3. 运算符结合性

Operator	描述	Associativity
< <= >= == != === !== <>	比较	None
!	逻辑 NOT	Right
~	位 NOT	Right
++ --	增加和减少	Right
(int)	转换为整数	Right
(double) (float) (real)	转换为浮点数	Right
(string)	转换为字符串	Right
(array)	转换为数组	Right
(object)	转换为对象	Right
@	抑制错误报告	Right
= += -= *= /=	赋值	Right
.= %= &= &#124;= ^= <<= >>=	赋值	Right
+	加法和一元加	Left
-	减法和取反	Left
*	乘法	Left
/	除法	Left
%	取模	Left
.	字符串连接	Left
<< >> & ^ &#124;	位运算	Left
?:	三元运算符	Left
&#124;&#124; && and or xor	逻辑	Left
,	分隔符	Left

例如，让我们看一下赋值运算符在示例 4-11 中的应用，其中三个变量都设置为值0。

示例 4-11. 多重赋值语句

<?php
  $level = $score = $time = 0;
?>

只有在先评估表达式的最右部分，然后继续从右到左处理时，才可能进行多重赋值。

注意

作为 PHP 的新手，您应该避免运算符结合性的潜在陷阱，始终将子表达式嵌套在括号中以强制评估顺序。这也将有助于其他可能需要维护您代码的程序员理解正在发生的事情。

关系运算符

关系运算符回答诸如“这个变量的值是否为零？”和“哪个变量的值更大？”的问题。这些运算符测试两个操作数并返回布尔结果，要么是TRUE要么是FALSE。关系运算符有三种类型：相等性，比较和逻辑。

相等性

就像我们在本章中已经看到的几次一样，等号运算符是==（两个等号）。重要的是不要将它与=（单个等号）赋值运算符混淆。在例子 4-12 中，第一条语句分配一个值，第二条测试它是否相等。

例子 4-12. 分配一个值并测试相等性

<?php
  $month = "March";

  if ($month == "March") echo "It's springtime";
?>

如你所见，通过返回TRUE或FALSE，等号运算符使你能够使用例如if语句来测试条件。但这并不是全部，因为 PHP 是一种弱类型语言。如果等号表达式的两个操作数类型不同，PHP 会将它们转换为它认为最合适的类型。很少使用的全等运算符由三个连续的等号组成，可以用来比较项目而不进行转换。

例如，任何完全由数字组成的字符串在与数字比较时将被转换为数字。在例子 4-13 中，$a和$b是两个不同的字符串，因此我们预期if语句都不会输出结果。

例子 4-13. 等号和全等运算符

<?php
  $a = "1000";
  $b = "+1000";

  if ($a == $b)  echo "1";
  if ($a === $b) echo "2";
?>

然而，如果你运行这个例子，你会看到它输出数字1，这意味着第一个if语句评估为TRUE。这是因为两个字符串首先被转换为数字，并且1000与+1000是相同的数值。相比之下，第二个if语句使用全等运算符，因此它将$a和$b作为字符串进行比较，发现它们不同，因此不输出任何内容。

就像强制操作符优先级一样，每当你对 PHP 如何转换操作数类型感到怀疑时，你可以使用全等运算符来关闭这种行为。

就像你可以使用等号运算符来测试操作数是否相等一样，你也可以使用!=，不等运算符来测试它们不相等。看一下例子 4-14，它是例子 4-13 的重写，其中等号和全等运算符已被它们的反向替换。

例子 4-14. 不等和非全等运算符

<?php
  $a = "1000";
  $b = "+1000";

  if ($a != $b)  echo "1";
  if ($a !== $b) echo "2";
?>

正如你可能期望的那样，第一个if语句不会输出数字1，因为代码询问$a和$b是否不在数值上相等。

相反，这段代码输出数字2，因为第二个if语句询问$a和$b是否在它们实际的字符串类型上不相同，答案是TRUE；它们不同。

比较运算符

使用比较运算符，你不仅可以测试相等和不相等，PHP 还提供了>（大于）、<（小于）、>=（大于等于）和<=（小于等于）等来使用。例子 4-15 展示了它们的使用。

示例 4-15. 四个比较运算符

<?php
  $a = 2; $b = 3;

  if ($a > $b)  echo "$a is greater than $b<br>";
  if ($a < $b)  echo "$a is less than $b<br>";
  if ($a >= $b) echo "$a is greater than or equal to $b<br>";
  if ($a <= $b) echo "$a is less than or equal to $b<br>";
?>

在此示例中，其中$a为2，$b为3，输出如下：

2 is less than 3
2 is less than or equal to 3

请尝试自己运行此示例，改变$a和$b的值，看看结果。尝试将它们设置为相同的值，看看会发生什么。

逻辑运算符

逻辑运算符产生true或false的结果，因此也称为布尔运算符。共有四种运算符（请参见表 4-4）。

表 4-4. 逻辑运算符

逻辑运算符	描述
AND	如果两个操作数都为TRUE则为TRUE
OR	如果任一操作数为TRUE则为TRUE
XOR	如果两个操作数中的一个为TRUE则为TRUE
! (NOT)	如果操作数为FALSE则为TRUE，如果操作数为TRUE则为FALSE

您可以在示例 4-16 中看到这些运算符的使用。请注意，PHP 要求使用!符号代替NOT。此外，这些运算符可以是小写或大写。

示例 4-16. 使用的逻辑运算符

<?php
  $a = 1; $b = 0;

  echo ($a AND $b) . "<br>";
  echo ($a or $b)  . "<br>";
  echo ($a XOR $b) . "<br>";
  echo !$a         . "<br>";
?>

逐行分析，此示例输出空值、1、1和空值，意味着只有第二个和第三个echo语句评估为TRUE。（请记住，NULL—或空值—表示FALSE的值。）这是因为AND语句要求如果要返回TRUE值，那么两个操作数都必须为TRUE，而第四个语句对$a的值执行NOT操作，将其从TRUE（值为1）转换为FALSE。如果你想要试验一下，请尝试运行代码，并为$a和$b赋予不同的1和0值。

注意

在编码时，请记住AND和OR的优先级低于操作符的其他版本，如&&和||。

OR运算符可能会在if语句中造成意外问题，因为如果第一个操作数被评估为TRUE，则不会评估第二个操作数。在示例 4-17 中，如果$finished的值为1，则函数getnext将永远不会被调用。

示例 4-17. 使用OR运算符的语句

<?php
  if ($finished == 1 OR getnext() == 1) exit;
?>

如果需要在每个if语句中调用getnext，可以像示例 4-18 中所做的那样重写代码。

示例 4-18. 修改后的if...OR语句以确保调用getnext

<?php
  $gn = getnext();

  if ($finished == 1 OR $gn == 1) exit;
?>

在这种情况下，在执行getnext函数并将返回的值存储在$gn之前，会执行if语句。

注意

另一个解决方案是交换两个子句以确保执行getnext，因为它将首先出现在表达式中。

表 4-5 显示了使用逻辑运算符的所有可能变体。还应注意，!TRUE等于FALSE，!FALSE等于TRUE。

表 4-5. 所有可能的 PHP 逻辑表达式

输入		运算符和结果
a	b	AND
TRUE	TRUE	TRUE
TRUE	FALSE	FALSE
FALSE	TRUE	FALSE
FALSE	FALSE	FALSE

条件语句

条件语句 改变程序流。它们使您能够对某些事物提出问题，并以不同的方式响应您得到的答案。条件语句是创建动态网页的核心（使用 PHP 的初衷），因为它们使得每次查看页面时都可以轻松地呈现不同的输出。

在本节中，我将介绍三种基本的条件语句：if语句、switch语句和?运算符。此外，循环条件语句（我们马上会讲到）会反复执行代码，直到满足条件为止。

if语句

想象一下程序流就像是你驾驶沿着的一条单车道公路。它基本上是一条笔直的路线，但偶尔会遇到各种指示牌，告诉你应该往哪个方向走。

对于if语句，你可以想象遇到一个绕行标志，如果某个条件为TRUE，你必须按照绕行标志的指示行驶。如果是这样，你会驶出去，沿着绕行路线直到回到主路，然后继续沿着原来的方向前进。或者，如果条件不为TRUE，你将忽略绕行路线，继续驾驶（见图 4-1）。

图 4-1。程序流就像是一条单车道公路

if条件的内容可以是任何有效的 PHP 表达式，包括相等测试、比较表达式、对0和NULL的测试，甚至函数（无论是内置函数还是你自己编写的函数）。

当if条件为TRUE时要执行的操作通常放在大括号内（{ }）。如果只有一个语句要执行，可以忽略大括号，但如果始终使用大括号，将避免因缺少大括号而导致的难以追踪的错误，例如当您向条件添加额外的行时，该行不会被评估。

注意

多年来，“goto fail”漏洞一直困扰着苹果产品中安全套接层（SSL）代码，因为一位程序员忘记在if语句周围加上大括号，导致有时函数会错误地报告成功连接，而实际上并非总是如此。这使得恶意攻击者能够让一个安全证书被接受，而本应被拒绝。如果有疑问，请在你的if语句周围加上大括号。

然而，出于简洁和清晰的考虑，本书中的许多示例忽略了这个建议，并省略了单语句的大括号。

在示例 4-19 中，想象一下现在是月底，你所有的账单都已经支付，所以你正在进行一些银行账户的维护工作。

示例 4-19。带有大括号的if语句

<?php
  if ($bank_balance < 100)
  {
    $money         = 1000;
    $bank_balance += $money;
  }
?>

在本例中，您正在检查您的余额，以查看是否少于$100（或您的货币单位）。如果是，则支付自己$1,000，然后将其添加到余额中。（如果赚钱那么简单！）

如果银行余额为$100 或更高，则忽略条件语句，程序流将跳到下一行（未显示）。

在本书中，开放的花括号通常从新行开始。有些人喜欢将第一个花括号放在条件表达式的右侧；其他人则从新行开始。无论哪种方式都可以，因为 PHP 允许您按照自己的方式设置空白字符（空格、换行和制表符）。但是，如果您每个条件级别都用制表符缩进，您会发现代码更易于阅读和调试。

else语句

有时，当条件不为TRUE时，您可能不希望立即继续主程序代码，而是希望执行其他操作。这就是else语句的用处。借助它，您可以在公路上设置第二个分支，就像图 4-2 中那样。

使用if...else语句，如果条件为TRUE，则执行第一个条件语句。但如果为FALSE，则执行第二个条件语句。两者之一 必须 被执行。在任何情况下都不能两者都执行（或都不执行）。示例 4-20 展示了使用if...else结构。

图 4-2. 现在的公路有一个if分支和一个else分支

示例 4-20. 使用花括号的if...else语句

<?php
  if ($bank_balance < 100)
  {
    $money         = 1000;
    $bank_balance += $money;
  }
  else
  {
    $savings      += 50;
    $bank_balance -= 50;
  }
?>

在这个例子中，如果您确定银行账户中有$100 或更多的金额，则执行else语句，将一部分资金存入您的储蓄账户。

与if语句一样，如果您的else只有一个条件语句，可以选择省略花括号。（但建议始终使用花括号。首先，它们使代码更易于理解。其次，它们让您可以轻松地在以后的分支中添加更多语句。）

elseif语句

有时您希望根据一系列条件发生不同的可能性。您可以使用elseif语句来实现这一点。正如您可能想象的那样，它类似于else语句，只是您在条件代码之前放置了进一步的条件表达式。在示例 4-21 中，您可以看到完整的if...elseif...else结构。

示例 4-21. 使用花括号的if...elseif...else语句

<?php
  if ($bank_balance < 100)
  {
    $money         = 1000;
    $bank_balance += $money;
  }
  elseif ($bank_balance > 200)
  {
    $savings      += 100;
    $bank_balance -= 100;
  }
  else
  {
    $savings      += 50;
    $bank_balance -= 50;
  }
?>

在本例中，在if和else语句之间插入了一个elseif语句。它检查您的银行余额是否超过$200，并且如果是，则决定您本月可以存下$100。

虽然我可能有些过度使用这个比喻，但你可以把它想象成一个多路的绕道 (见 图 4-3)。

图 4-3. 带有 if、elseif 和 else 的公路

注意

else 语句关闭 if...else 或 if...elseif...else 语句。如果不需要最终的 else，可以省略它，但不能在 elseif 之前留有 else；在 if 语句之前也不能有 elseif。

你可以有任意多个 elseif 语句。但是随着 elseif 语句的数量增加，如果符合你的需求，可能更适合考虑使用 switch 语句。接下来我们将详细讨论这一点。

switch 语句

switch 语句在一个变量或表达式的结果可能有多个值，并且每个值应该触发不同活动的情况下非常有用。

例如，考虑一个由 PHP 驱动的菜单系统，根据用户的请求向主菜单代码传递单个字符串。假设选项是主页、关于、新闻、登录和链接，我们将变量 $page 设置为其中一个，根据用户的输入。

如果我们使用 if...elseif...else 来编写这段代码，可能会像 示例 4-22。

示例 4-22. 多行 if...elseif...else 语句

<?php
  if     ($page == "Home")  echo "You selected Home";
  elseif ($page == "About") echo "You selected About";
  elseif ($page == "News")  echo "You selected News";
  elseif ($page == "Login") echo "You selected Login";
  elseif ($page == "Links") echo "You selected Links";
  else                      echo "Unrecognized selection";
?>

如果我们使用 switch 语句，代码可能看起来像 示例 4-23。

示例 4-23. switch 语句

<?php
  switch ($page)
  {
    case "Home":
        echo "You selected Home";
        break;
    case "About":
        echo "You selected About";
        break;
    case "News":
        echo "You selected News";
        break;
    case "Login":
        echo "You selected Login";
        break;
    case "Links":
        echo "You selected Links";
        break;
  }
?>

正如你所见，$page 只在 switch 语句的开头提到。此后，case 命令检查是否匹配。一旦匹配，执行匹配的条件语句。当然，在实际程序中，你会在这里编写代码来显示或跳转到一个页面，而不仅仅是告诉用户选择了什么。

注意

在 switch 语句中，你不使用花括号来定义 case 命令。相反，它们以冒号开头，并以 break 语句结束。整个 switch 语句中的所有 case 都包含在一对花括号中。

退出

如果你希望在 switch 语句中因为条件已满足而跳出，使用 break 命令。这个命令告诉 PHP 退出 switch 并跳转到下一条语句。

如果你在 示例 4-23 中省略了 break 命令，并且 Home 的情况被评估为 TRUE，那么所有五个情况都会被执行。或者，如果 $page 的值是 News，那么之后的所有 case 命令都会被执行。这是有意为之的，允许一些高级编程，但通常你应该记住每次一组 case 条件执行完毕时都要发出 break 命令。事实上，忽略 break 语句是一个常见的错误。

默认操作

switch语句中的典型要求是在未满足任何case条件时返回默认操作。例如，在示例 4-23 中的菜单代码中，你可以在最后一个大括号之前立即添加示例 4-24 中的代码。

示例 4-24. 添加到示例 4-23 的默认语句

default:
    echo "Unrecognized selection";
    break;

这复制了示例 4-22 中else语句的效果。

尽管此处不需要break命令，因为默认是最终的子语句，并且程序流会自动继续到结束大括号，但如果你决定将default语句放在较高位置，那么肯定需要一个break命令来防止程序流陷入后续语句。通常，最安全的做法是始终包含break命令。

替代语法

如果你愿意，可以在switch语句中用单个冒号替换第一个大括号，并用endswitch命令替换最后一个大括号，就像示例 4-25 中所示。然而，这种方法并不常用，仅在你在第三方代码中遇到时才会提到。

示例 4-25. 备选switch语句语法

<?php
  switch ($page):
    case "Home":
        echo "You selected Home";
        break;

    // etc

    case "Links":
        echo "You selected Links";
        break;
  endswitch;
?>

?（或三元）操作符

避免使用if和else语句的冗长方法之一是使用更紧凑的三元操作符?，这在使用中有些不同，因为它需要三个操作数而不是通常的两个。

我们在第三章中简要提到了这一点，讨论了print和echo语句之间的区别，作为与print良好配合但不与echo良好配合的操作符类型的示例。

?操作符接受一个必须评估的表达式，以及两个要执行的语句：一个是当表达式评估为TRUE时，另一个是当它为FALSE时。示例 4-26 展示了我们可能会用于向汽车数字仪表板写入有关燃油水平警告的代码。

示例 4-26. 使用?操作符

<?php
  echo $fuel <= 1 ? "Fill tank now" : "There's enough fuel";
?>

在此语句中，如果燃料少于或等于一加仑（换句话说，$fuel设置为1或更少），则将字符串Fill tank now返回给前面的echo语句。否则，将返回字符串There's enough fuel。你也可以将?语句返回的值赋给一个变量（参见示例 4-27）。

示例 4-27. 将?条件结果赋给变量

<?php
  $enough = $fuel <= 1 ? FALSE : TRUE;
?>

在这里，只有当燃料超过一加仑时，$enough才会被赋值为TRUE；否则，它将被赋值为FALSE。

如果您觉得?运算符令人困惑，可以继续使用if语句，但您应该熟悉这个运算符，因为您会在其他人的代码中看到它。它可能很难阅读，因为它经常混合多个相同变量的出现。例如，以下代码是相当流行的：

$saved = $saved >= $new ? $saved : $new;

如果仔细拆解，您可以弄清楚此代码的作用：

$saved =                // Set the value of $saved to...
        $saved >= $new  // Check $saved against $new
    ?                   // Yes, comparison is true...
        $saved          // ... so assign the current value of $saved
    :                   // No, comparison is false...
        $new;           // ... so assign the value of $new

这是在程序进行时跟踪所见到的最大值的简洁方法。您将最大值保存在$saved中，并在每次获得新值时将其与$new进行比较。熟悉?运算符的程序员发现它比用于这样的短比较的if语句更为方便。当不用于编写紧凑的代码时，它通常用于在行内做出一些决策，例如在将变量设置为函数参数之前测试是否已设置。

循环

计算机的一大优点是它们可以快速且不知疲倦地重复计算任务。通常情况下，您可能希望程序重复执行相同的代码序列，直到发生某些事件，如用户输入值或达到自然结束。PHP 的循环结构为实现这一点提供了完美的方式。

要想象这是如何工作的，请看图 4-4。这与用于说明if语句的公路隐喻大致相同，只是这条路也有一个循环部分，一旦车辆进入其中，只有在正确的程序条件下才能退出。

图 4-4. 将循环想象为程序高速公路布局的示意图

while循环

让我们将示例 4-26 中的数字汽车仪表板转变为一个循环，以在驾驶时持续检查燃油水平，使用一个while循环（示例 4-28）。

示例 4-28. 一个while循环

<?php
  $fuel = 10;

  while ($fuel > 1)
  {
    // Keep driving...
    echo "There's enough fuel";
  }
?>

实际上，您可能更喜欢保持绿灯亮起，而不是输出文本，但关键是您希望对燃油水平做出的任何正面指示都放在while循环内部。顺便说一句，如果您尝试这个示例，注意它会持续打印字符串，直到您在浏览器中单击停止按钮。

注意

与if语句一样，您会注意到while语句内部需要用花括号来容纳语句，除非只有一个语句。

查看另一个显示 12 倍表的while循环的示例，请参阅示例 4-29。

示例 4-29. 打印 12 倍表的while循环

<?php
  $count = 1;

  while ($count <= 12)
  {
    echo "$count times 12 is " . $count * 12 . "<br>";
    ++$count;
  }
?>

在这里，变量$count被初始化为1的值，然后开始一个while循环，其比较表达式为$count <= 12。此循环将继续执行，直到变量大于 12。从这段代码输出如下：

1 times 12 is 12
2 times 12 is 24
3 times 12 is 36
*and so on...*

在循环内部，打印一个字符串以及$count乘以 12 的值。为了整洁起见，接下来是一个<br>标签，强制换行。然后递增$count，准备最后的大括号，告诉 PHP 回到循环的起始处。

此时，再次测试$count是否大于 12。它不是，但现在它的值是2，再绕过循环 11 次后，它的值将变为13。当发生这种情况时，跳过while循环内的代码，执行转到循环后的代码，本例中即为程序的末尾。

如果没有++$count语句（同样也可以是$count++），这个循环就像本节中的第一个循环。它永远不会结束，只会一遍又一遍地打印1 * 12的结果。

但是有一种更整洁的方式可以编写这个循环，我想你会喜欢。看看示例 4-30。

示例 4-30。示例 4-29 的简化版本

<?php
  $count = 0;

  while (++$count <= 12)
    echo "$count times 12 is " . $count * 12 . "<br>";
?>

在这个例子中，可以将++$count语句从while循环内的语句移动到循环的条件表达式中。现在发生的是，PHP 在每次迭代循环开始时遇到变量$count，注意到它前面有递增操作符，首先递增变量，然后再将其与值12进行比较。因此，你可以看到现在必须将$count初始化为0，而不是1，因为一进入循环就会递增。如果保持初始化为1，则只会输出 2 到 12 之间的结果。

do...while 循环

对while循环的轻微变化是do...while循环，当您希望一段代码至少执行一次并在此后进行条件检查时使用。示例 4-31 展示了使用这种循环的修改版本的 12 乘法表代码。

示例 4-31。用于打印 12 乘法表的do...while循环

<?php
  $count = 1;
  do
    echo "$count times 12 is " . $count * 12 . "<br>";
  while (++$count <= 12);
?>

注意，我们又回到了将$count初始化为1（而不是0）的地方，因为在我们有机会递增变量之前，循环的echo语句就已执行了。尽管如此，代码看起来还是相当相似的。

当然，如果在do...while循环内有多个语句，记得使用大括号，就像示例 4-32 中那样。

示例 4-32。扩展示例 4-31 以使用大括号

<?php
  $count = 1;

  do {
    echo "$count times 12 is " . $count * 12;
    echo "<br>";
  } while (++$count <= 12);
?>

for 循环

最后一种循环语句是for循环，也是最强大的，因为它结合了在进入循环时设置变量、在迭代循环时测试条件以及在每次迭代后修改变量的能力。

示例 4-33 展示了如何使用for循环编写乘法表程序。

示例 4-33. 输出 12 乘法表的for循环

<?php
  for ($count = 1 ; $count <= 12 ; ++$count)
    echo "$count times 12 is " . $count * 12 . "<br>";
?>

看看代码是如何被简化为一个包含单个条件语句的for语句？这里发生了什么。每个for语句都有三个参数：

• 一个初始化表达式

• 一个条件表达式

• 一个修改表达式

这些用分号分隔开，像这样：for (expr1 ; expr2 ; expr3)。在循环的第一次迭代开始时，初始化表达式被执行。在乘法表代码中，$count被初始化为值1。然后，在每次循环中，条件表达式（在本例中是$count <= 12）被测试，只有在条件为TRUE时才进入循环。最后，在每次迭代结束时，修改表达式被执行。在乘法表代码中，变量$count被递增。

所有这些结构都清晰地消除了将循环控制放置在其主体内的要求，仅仅为你希望循环执行的语句保留空间。

如果for循环包含多个语句，记得要使用大括号，就像示例 4-34 中那样。

示例 4-34. 示例 4-33 中的for循环，加入了大括号

<?php
  for ($count = 1 ; $count <= 12 ; ++$count)
  {
    echo "$count times 12 is " . $count * 12;
    echo "<br>";
  }
?>

让我们比较何时使用for循环和while循环。for循环是专门设计用于一个在规律性变化的单一值上。通常情况下，你有一个增量值，例如你得到一个用户选择列表并想逐个处理每个选择。但你可以随意变换这个变量。for语句的更复杂形式甚至允许在每个参数中执行多个操作：

for ($i = 1, $j = 1 ; $i + $j < 10 ; $i++ , $j++)
{
  // ...
}

尽管这很复杂且不建议首次使用者使用。关键是要区分逗号和分号。这三个参数必须用分号分隔。在每个参数内部，多个语句可以用逗号分隔。因此，在前面的示例中，第一个和第三个参数每个包含两个语句：

$i = 1, $j = 1  // Initialize $i and $j
$i + $j < 10    // Terminating condition
$i++ , $j++     // Modify $i and $j at the end of each iteration

从这个例子中要理解的主要内容是，你必须使用分号来分隔这三个参数部分，而不是逗号（逗号只能用来分隔参数部分内的语句）。

那么，什么情况下使用while语句比for语句更合适？当你的条件不依赖于变量的简单、规律性变化时。例如，如果你想要检查某些特殊输入或错误，并在其发生时结束循环，就使用while语句。

退出循环

就像你看到如何跳出switch语句一样，你也可以使用相同的break命令跳出for循环（或任何循环）。当例如其中一个语句返回错误且循环无法继续安全执行时，这一步就是必要的。可能出现这种情况的一个案例是写入文件返回错误，可能是因为磁盘已满（参见示例 4-35）。

示例 4-35. 使用for循环编写文件并进行错误处理

<?php
  $fp = fopen("text.txt", 'wb');

  for ($j = 0 ; $j < 100 ; ++$j)
  {
    $written = fwrite($fp, "data");

    if ($written == FALSE) break;
  }

  fclose($fp);
?>

这是迄今为止你见过的最复杂的代码片段，但你已经准备好了。我们将在第七章中探讨文件处理命令，但现在你只需要知道，第一行以二进制模式打开文件text.txt进行写入，并将文件指针返回到变量$fp中，稍后用于引用打开的文件。

然后，循环迭代 100 次（从 0 到 99），将字符串data写入文件。每次写入后，变量$written由fwrite函数赋值，表示正确写入的字符数。但如果发生错误，fwrite函数则赋值为FALSE。

fwrite的行为使得代码可以轻松检查变量$written是否设置为FALSE，如果是，则跳出循环，并进入关闭文件的下一条语句。

如果你希望改进代码，可以简化这行代码：

if ($written == FALSE) break;

使用NOT运算符，像这样：

if (!$written) break;

实际上，内部循环语句对可以缩短为单个语句：

if (!fwrite($fp, "data")) break;

换句话说，你可以消除$written变量，因为它只是用来检查fwrite返回的值。你可以直接测试返回值而不是用$written变量。

break命令比你想象的更加强大，因为如果你的代码嵌套超过一层需要跳出，你可以在break命令后跟一个数字来指示跳出多少层：

break 2;

continue 语句

continue语句有点像break语句，不过它指示 PHP 停止处理当前循环的迭代，并直接进入下一次迭代。因此，PHP 不会跳出整个循环，而是仅退出当前迭代。

在某些情况下，这种方法非常有用，例如你知道在当前循环中继续执行没有意义，并且你想要节省处理器周期，或者通过直接进入循环的下一次迭代来防止发生错误。在示例 4-36 中，使用continue语句可以防止当变量$j的值为0时发生除以零的错误。

示例 4-36. 使用continue捕获除零错误

<?php
  $j = 11;

  while ($j > -10)
  {
    $j--;

    if ($j == 0) continue;

    echo (10 / $j) . "<br>";
  }
?>

对于 $j 在 10 到 -10 之间的所有值（0 除外），计算 10 除以 $j 的结果会显示出来。但是当 $j 为 0 时，会执行 continue 语句，并立即跳到循环的下一个迭代。

隐式和显式转换

PHP 是一种弱类型语言，允许你在使用变量时简单地声明其类型。它还会根据需要自动将值从一种类型转换为另一种类型。这称为隐式转换。

然而，有时 PHP 的隐式转换可能不是你想要的。在 示例 4-37 中，请注意除法的输入是整数。默认情况下，PHP 将输出转换为浮点数，以便提供最精确的值——4.66 循环。

示例 4-37. 这个表达式返回一个浮点数

<?php
  $a = 56;
  $b = 12;
  $c = $a / $b;

  echo $c;
?>

但是如果我们希望 $c 是一个整数呢？我们可以通过各种方式来实现这一点，其中一种方法是使用整数转换类型 (int) 强制将 $a / $b 的结果转换为整数值，就像这样：

$c = (int) ($a / $b);

这称为显式转换。请注意，为了确保整个表达式的值被转换为整数，我们将表达式置于括号中。否则，只有变量 $a 会被转换为整数，这将是毫无意义的练习，因为除以 $b 仍将返回一个浮点数。

您可以将变量和文字显式转换为 表 4-6 中所示的类型。

表 4-6. PHP 的类型转换

类型转换	描述
(int) (integer)	通过舍弃小数部分转换为整数。
(bool) (boolean)	转换为布尔值。
(float) (double) (real)	转换为浮点数。
(string)	转换为字符串。
(array)	转换为数组。
(object)	转换为对象。

注意

通常可以通过调用 PHP 的内置函数避免使用转换。例如，要获取整数值，可以使用 intval 函数。正如本书中的其他部分一样，本节主要是为了帮助您理解可能偶尔遇到的第三方代码。

PHP 动态链接

因为 PHP 是一种编程语言，其输出对于每个用户可能完全不同，因此一个完整的网站可以仅由单个 PHP 网页运行。每当用户点击某些内容时，细节可以发送回同一个网页，根据各种 cookie 和/或其他会话详细信息决定下一步该执行什么操作。

尽管可以通过这种方式构建整个网站，但并不推荐，因为您的源代码会越来越庞大，并开始变得难以管理，因为它必须考虑用户可能采取的每一个可能的操作。

相反，将您的网站开发分成不同的部分更加明智。例如，一个明确的过程是注册网站，以及所有这些操作的检查以验证电子邮件地址，确定用户名是否已被使用等等。

第二个模块可能是登录用户后将其传递到网站的主要部分之前的模块。然后您可能有一个具有用户留言功能的消息模块，一个包含链接和有用信息的模块，另一个允许上传图片的模块等等。

只要您已经通过 cookie 或会话变量创建了跟踪用户在网站上行动的方式（我们将在后面的章节中更详细地讨论这两者），您可以将您的网站分成 PHP 代码的合理部分，每个部分都是自包含的，因此在未来开发每个新功能和维护旧功能时会变得更加轻松。如果您有一个团队，不同的人可以分别工作在不同的模块上，这样每个程序员只需彻底了解一个部分。

动态链接实例

如今 Web 上更受欢迎的基于 PHP 的应用之一是内容管理系统（CMS）WordPress（见图 4-5）。您可能没有意识到，但每个主要部分都有自己的主 PHP 文件，并且一整套通用的共享函数已放置在根据需要由主 PHP 页面包含的单独文件中。

图 4-5. WordPress CMS

整个平台通过幕后的会话追踪来紧密连接，以便在从一个子部分过渡到另一个子部分时几乎感觉不到。因此，希望调整 WordPress 的 Web 开发人员可以轻松找到他们需要的特定文件，修改它，测试和调试它，而不必去破坏程序的不相关部分。下次您使用 WordPress 时，请关注您浏览器的地址栏，您会注意到它使用的一些不同的 PHP 文件。

本章内容涵盖了相当多的内容，到目前为止，您应该能够编写自己的小型 PHP 程序。但在开始下一章关于函数和对象之前，您可能希望通过回答以下问题来测试您的新知识。

问题

1. TRUE和FALSE分别表示什么实际底层值？

2. 什么是最简单的两种表达形式？

3. 什么是一元、二元和三元运算符的区别？

4. 强制自己操作符优先级的最佳方法是什么？

5. 运算符结合性是什么意思？

6. 何时使用===（身份）运算符？

7. 命名三种条件语句类型。

8. 您可以使用哪个命令来跳过当前循环迭代并继续下一个迭代？

9. 为什么for循环比while循环更强大？

10. if和while语句如何解释不同数据类型的条件表达式？

请查看“第四章答案”，在附录 A 中可以找到这些问题的答案。

第五章：PHP 函数和对象

任何编程语言的基本要求包括存储数据的地方，指导程序流的方法，以及一些细节，如表达式评估、文件管理和文本输出。PHP 具备所有这些功能，还有像 else 和 elseif 这样的工具，使生活更轻松。但即使在你的工具包中拥有所有这些，编程仍然可能笨拙和乏味，特别是在每次需要它们时必须重新编写非常相似的代码片段时。

函数和对象应运而生。正如你可能猜到的那样，函数是执行特定功能的一组语句，还可以选择性地返回一个值。当你需要使用多次的一段代码时，你可以将其放入一个函数中，并在需要时通过函数名调用该函数。

函数比连续的内联代码有很多优势。例如：

• 减少输入量

• 减少语法和其他编程错误

• 减少程序文件的加载时间

• 减少执行时间，因为每个函数只编译一次，无论调用多少次

• 接受参数，因此可以用于一般以及特定的情况

对象进一步推进了这个概念。对象将一个或多个函数及其使用的数据合并到一个称为类的单一结构中。

在本章中，你将学习如何使用函数，从定义和调用到来回传递参数。掌握这些知识后，你将开始创建函数，并在自己的对象中使用它们（在这里它们被称为方法）。

注意

现在使用低于 PHP 5.4 的任何版本已经非常不常见（而且绝对不推荐）。因此，本章假设您将使用此版本作为最低版本。一般建议使用版本 5.6，或者新版本 7.0 或 7.1（没有版本 6）。您可以从 AMPPS 控制面板中选择其中任何一个，如第二章所述。

PHP 函数

PHP 提供了数百个内置函数，使其成为一个非常丰富的语言。要使用函数，只需通过名称调用它。例如，你可以在这里看到 date 函数的运行效果：

echo date("l"); // Displays the day of the week

括号告诉 PHP 你正在引用一个函数。否则，它会认为你在引用一个常量或变量。

函数可以接受任意数量的参数，包括零个。例如，如下所示的 phpinfo 显示有关当前 PHP 安装的大量信息，并且不需要参数：

phpinfo();

调用该函数的结果可以在图 5-1 中看到。

图 5-1. PHP 内置函数 phpinfo 的输出

警告

phpinfo 函数非常有用，可以获取有关当前 PHP 安装的信息，但这些信息对潜在的黑客也可能非常有用。因此，在任何 Web 可用的代码中绝不要留下对此函数的调用。

一些使用一个或多个参数的内置函数出现在示例 5-1中。

示例 5-1. 三个字符串函数

<?php
  echo strrev(" .dlrow olleH"); // Reverse string
  echo str_repeat("Hip ", 2);   // Repeat string
  echo strtoupper("hooray!");   // String to uppercase
?>

此示例使用三个字符串函数输出以下文本：

Hello world. Hip Hip HOORAY!

正如您所见，strrev函数颠倒了字符串中字符的顺序，str_repeat重复了字符串"Hip "两次（根据第二个参数的要求），而strtoupper将"hooray!"转换为大写。

定义一个函数

函数的一般语法如下：

function *`function_name`*([*`parameter`* [, ...]])
{
  // *`Statements`*
}

语法的第一行指示如下：

• 定义以function开头。

• 名称紧随其后，必须以字母或下划线开头，后跟任意数量的字母、数字或下划线。

• 括号是必需的。

• 一个或多个用逗号分隔的参数是可选的（如方括号所示）。

函数名称不区分大小写，所以以下所有字符串都可以引用print函数：PRINT、Print和PrInT。

开放大括号开始执行调用函数时会执行的语句；匹配的大括号必须结束它。这些语句可以包括一个或多个return语句，它们会强制函数停止执行并返回到调用代码。如果return语句附有值，调用代码可以检索它，我们将在接下来看到。

返回一个值

让我们看一个简单的函数，将一个人的全名转换为小写，然后将每个部分的第一个字母大写。

我们已经在示例 5-1中看到了 PHP 内置的strtoupper函数的示例。对于我们当前的函数，我们将使用它的对应函数，strtolower：

$lowered = strtolower("aNY # of Letters and Punctuation you WANT");

echo $lowered;

此实验的输出如下：

any # of letters and punctuation you want

尽管我们不希望名字全部小写；我们希望将句子中每个部分的第一个字母大写。（对于这个示例，我们不打算处理 Mary-Ann 或 Jo-En-Lai 等细微情况。）幸运的是，PHP 还提供了一个ucfirst函数，可以将字符串的第一个字符设为大写：

$ucfixed = ucfirst("any # of letters and punctuation you want");

echo $ucfixed;

输出如下：

    Any # of letters and punctuation you want

现在我们可以进行第一步程序设计：将单词首字母大写，我们先调用strtolower函数将字符串转为小写，然后再调用ucfirst。这样做的方法是在ucfirst中嵌套调用strtolower。让我们看看为什么，因为理解代码评估顺序很重要。

假设你简单调用print函数：

print(5-8);

表达式5-8首先被评估，输出是–3。（如前一章所示，PHP 将结果转换为字符串以便显示。）如果表达式包含一个函数，那么该函数也将首先被评估：

print(abs(5-8));

PHP 在执行这个简短语句时做了几件事情：

1. 评估5-8以生成–3。

2. 使用abs函数将–3转换为3。

3. 将结果转换为字符串并使用print函数输出它。

这一切都有效是因为 PHP 从内到外评估每个元素。当我们调用以下内容时，同样的过程正在进行：

ucfirst(strtolower("aNY # of Letters and Punctuation you WANT"))

PHP 将我们的字符串传递给strtolower，然后传递给ucfirst，生成的结果如我们分别使用这些函数时所见：

    任意数量的字母和标点符号

现在让我们定义一个函数（显示在示例 5-2 中），该函数接受三个名称并将每个名称转换为小写，并以大写字母开头。

示例 5-2. 清理完整姓名

<?php
  echo fix_names("WILLIAM", "henry", "gatES");

  function fix_names($n1, $n2, $n3)
  {
    $n1 = ucfirst(strtolower($n1));
    $n2 = ucfirst(strtolower($n2));
    $n3 = ucfirst(strtolower($n3));

    return $n1 . " " . $n2 . " " . $n3;
  }
?>

你可能会发现自己写这种类型的代码，因为用户经常不小心将 Caps Lock 键保持打开状态，错误地插入大写字母，甚至完全忘记大写。此示例的输出如下所示：

**  William Henry Gates**

返回一个数组

我们刚刚看到一个函数返回单个值。还有从函数中获取多个值的方法。

第一种方法是在一个数组中返回它们。正如你在第 3 章中看到的那样，数组就像一排粘在一起的变量。示例 5-3 展示了如何使用数组返回函数值。

示例 5-3. 在数组中返回多个值

<?php
  $names = fix_names("WILLIAM", "henry", "gatES");
  echo $names[0] . " " . $names[1] . " " . $names[2];

  function fix_names($n1, $n2, $n3)
  {
    $n1 = ucfirst(strtolower($n1));
    $n2 = ucfirst(strtolower($n2));
    $n3 = ucfirst(strtolower($n3));

    return array($n1, $n2, $n3);
  }
?>

这种方法的好处是保持所有三个名称分开，而不是将它们连接成一个字符串，因此你可以仅仅通过名字或姓氏来引用任何用户，而不必从返回的字符串中提取任何一个名称。

按引用传递参数

在 PHP 5.3 之前的版本中，你可以在调用函数时用&符号作为变量的前缀（例如，increment(&$myvar);）告诉解析器传递变量的引用，而不是变量的值。这使函数可以访问变量（允许将不同的值写回到它）。

注意

在 PHP 5.3 中弃用了调用时传递引用，而在 PHP 5.4 中移除了这个特性。因此，除了在旧版网站上，你不应该使用这个特性，即使在那里也建议重新编写传递引用的代码，因为在较新版本的 PHP 上会产生致命错误。

但是，在函数定义内部，你仍然可以通过引用访问参数。这个概念可能很难理解，所以让我们回到第 3 章中的火柴盒比喻。

想象一下，不是从火柴盒里拿出一张纸，读取它，将上面的内容复制到另一张纸上，把原始的放回去，然后将复印件传递给一个函数（呼！），你可以简单地将一根线连接到原始的纸上，并将其一端传递给函数（参见图 5-2）。

图 5-2. 想象一个参考作为附加到变量的线索

现在函数可以跟随线索找到要访问的数据。这样可以避免为函数使用的变量创建副本的所有开销。更重要的是，函数现在可以修改变量的值。

这意味着您可以重写 示例 5-3，将所有参数的引用传递，然后函数可以直接修改这些参数（参见 示例 5-4）。

示例 5-4. 通过引用将值传递给函数

<?php
  $a1 = "WILLIAM";
  $a2 = "henry";
  $a3 = "gatES";

  echo $a1 . " " . $a2 . " " . $a3 . "<br>";
  fix_names($a1, $a2, $a3);
  echo $a1 . " " . $a2 . " " . $a3;

  function fix_names(&$n1, &$n2, &$n3)
  {
    $n1 = ucfirst(strtolower($n1));
    $n2 = ucfirst(strtolower($n2));
    $n3 = ucfirst(strtolower($n3));
  }
?>

与其直接将字符串传递给函数，不如先将它们分配给变量并打印出它们的“before”值。然后像以前一样调用函数，但在函数定义内部，您在每个参数前面放置一个 & 符号以按引用传递。

现在变量 $n1、$n2 和 $n3 都附加到通向 $a1、$a2 和 $a3 值的“线索”。换句话说，有一个值组，但允许两组变量名访问它们。

因此，函数 fix_names 只需要为 $n1、$n2 和 $n3 分配新值即可更新 $a1、$a2 和 $a3 的值。此代码的输出是：

    威廉·亨利·盖茨·威廉·亨利·盖茨

正如您所见，echo 语句只使用了 $a1、$a2 和 $a3 的值。

返回全局变量

给函数访问外部创建的不作为参数传递的变量更好的方法是通过在函数内部声明具有全局访问权限。在变量名后面跟着 global 关键字可以让代码的每个部分都完全访问它（参见 示例 5-5）。

示例 5-5. 在全局变量中返回值

<?php
  $a1 = "WILLIAM";
  $a2 = "henry";
  $a3 = "gatES";

  echo $a1 . " " . $a2 . " " . $a3 . "<br>";
  fix_names();
  echo $a1 . " " . $a2 . " " . $a3;

  function fix_names()
  {
    global $a1; $a1 = ucfirst(strtolower($a1));
    global $a2; $a2 = ucfirst(strtolower($a2));
    global $a3; $a3 = ucfirst(strtolower($a3));
  }
?>

现在您不必将参数传递给函数，函数也不必接受它们。一旦声明，这些变量保留全局访问权限，并且可以在程序的其余部分（包括其函数）中使用。

变量作用域回顾

快速回顾从 第三章 中所知的内容：

• 局部变量 只能从定义它们的代码部分访问。如果它们在函数外部，则可以被所有函数外部的代码访问，包括类等。如果一个变量在函数内部，只有该函数可以访问该变量，并且当函数返回时其值会丢失。

• 全局变量 可以从代码的所有部分访问，无论是在函数内部还是外部。

• 静态变量 只能在声明它们的函数内部访问，但在多次调用之间保留它们的值。

包含和需要文件

在您使用 PHP 编程时，您可能会开始构建您认为将来会再次使用的函数库。您还可能开始使用其他程序员创建的库。

没有必要将这些函数复制粘贴到你的代码中。你可以将它们保存在单独的文件中，并使用命令将它们拉入。有两个命令可以执行此操作：include 和 require。

include 语句

使用 include，你可以告诉 PHP 获取一个特定文件并加载其所有内容。就好像你把包含的文件粘贴到当前文件的插入点一样。示例 5-6 展示了如何包含一个名为 library.php 的文件。

示例 5-6. 包含一个 PHP 文件

<?php
  include "library.php";

  // Your code goes here
?>

使用 include_once

每次使用 include 指令，即使已经插入过，也会再次包含请求的文件。例如，假设 library.php 包含许多有用的函数，你将它包含在你的文件中，但你还包含了另一个包含 library.php 的库。通过嵌套，你无意中包含了 library.php 两次。这将产生错误消息，因为你尝试多次定义相同的常量或函数。所以，你应该使用 include_once 替代（参见 示例 5-7）。

示例 5-7. 仅包含一次 PHP 文件

<?php
  include_once "library.php";

  // Your code goes here
?>

然后，任何进一步尝试包含同一文件（使用 include 或 include_once）都将被忽略。要确定请求的文件是否已执行，需要在解析所有相对路径（到它们的绝对路径）并在你的 include 路径中找到文件后，匹配绝对文件路径。

注意

一般来说，最好坚持使用 include_once，忽略基本的 include 语句。这样，你就永远不会遇到多次包含文件的问题。

使用 require 和 require_once

include 和 include_once 的一个潜在问题是，PHP 只会 尝试 包含请求的文件。即使找不到文件，程序执行也会继续。

当绝对需要包含文件时，使用 require。出于同样的原因，我建议你在需要 require 文件时通常坚持使用 require_once（参见 示例 5-8）。

示例 5-8. 仅需要一次引入 PHP 文件

<?php
  require_once "library.php";

  // Your code goes here
?>

PHP 版本兼容性

PHP 正在持续开发中，有多个版本。如果需要检查特定函数是否可用于你的代码，可以使用 function_exists 函数，该函数检查所有预定义和用户创建的函数。

示例 5-9 检查 array_combine，这是仅适用于某些 PHP 版本的特定函数。

示例 5-9. 检查函数是否存在

<?php
  if (function_exists("array_combine"))
  {
    echo "Function exists";
  }
  else
  {
    echo "Function does not exist - better write our own";
  }
?>

使用这样的代码，你可以利用新版本 PHP 的功能，同时使你的代码在旧版本上运行，只要你复制了任何缺失的功能。你的函数可能比内置函数慢，但至少你的代码将更加可移植。

你也可以使用phpversion函数来确定你的代码运行在哪个版本的 PHP 上。返回的结果将类似于以下内容，具体取决于版本：

**  8.0.0**

PHP 对象

就像函数代表着编程力量在计算机早期时代的巨大增长一样，在那些时代，有时候最好的程序导航只是一个非常基本的GOTO或GOSUB语句一样，面向对象编程（OOP）将函数的使用带入了不同的方向。

一旦你掌握了将可重用的代码片段压缩成函数的技巧，将这些函数及其数据打包成对象就不是那么大的飞跃了。

让我们以一个有很多部分的社交网络站点为例。其中一个部分处理所有用户功能——也就是说，用于启用新用户注册和现有用户修改其详细信息的代码。在标准的 PHP 中，你可能会创建一些函数来处理这些，并嵌入一些调用 MySQL 数据库的代码来跟踪所有用户。

要创建一个表示当前用户的对象，你可以创建一个类，也许叫做User，其中包含处理用户所需的所有代码以及操作类内部数据所需的所有变量。然后，每当需要操作用户数据时，你可以简单地使用User类创建一个新对象。

你可以将这个新对象视为实际的用户。例如，你可以向对象传递姓名、密码和电子邮件地址；询问它是否已存在这样一个用户；如果不存在，让它使用这些属性创建一个新用户。你甚至可以有一个即时消息对象，或者用于管理两个用户是否是朋友的对象。

术语

当创建一个使用对象的程序时，你需要设计一个称为类的数据和代码的复合体。基于这个类创建的每个新对象称为该类的实例（或发生）。

与对象相关联的数据称为其属性；它所使用的函数称为方法。在定义一个类时，你提供其属性的名称和方法的代码。参见图 5-3 关于一个对象的自动唱机比喻。想象一下它在旋转碟盘中保存的 CD，就像是它的属性；播放它们的方法是在前面板上按按钮。还有一个插入硬币的槽口（用于激活对象的方法），以及一个激光唱片阅读器（用于从 CD 中检索音乐或属性的方法）。

图 5-3. 一个自包含对象的绝佳例子：自动唱机

当你创建对象时，最好使用封装，或者以这样一种方式编写类，即只有其方法才能用于操作其属性。换句话说，你拒绝外部代码直接访问其数据。你提供的方法被称为对象的接口。

这种方法使得调试变得容易：你只需修复类内的错误代码。 另外，当你想要升级程序时，如果使用了适当的封装并保持了相同的接口，你只需开发新的替代类，彻底调试它们，然后替换旧类。 如果它们不起作用，你可以重新替换旧类，立即修复问题，然后进一步调试新类。

一旦你创建了一个类，你可能会发现你需要另一个类，它与之类似但不完全相同。 最快最简单的方法是使用继承定义一个新类。 当你这样做时，你的新类拥有从它继承的所有属性。 原始类现在称为父类（或偶尔是超类），而新类则是子类（或派生类）。

在我们的点唱机示例中，如果你发明了一个新的点唱机，它可以同时播放视频和音乐，你可以继承原始点唱机超类的所有属性和方法，并添加一些新属性（视频）和新方法（电影播放器）。

这个系统的一个显著优点是，如果你提高了超类的速度或任何其他方面，其子类将获得同样的好处。 另一方面，对父/超类进行的任何更改可能会破坏子类。

声明类

在你可以使用对象之前，你必须用class关键字定义一个类。 类定义包含类名（区分大小写），其属性和其方法。 示例 5-10 定义了User类，具有两个属性$name和$password（由public关键字指示—参见“属性和方法范围”）。 它还创建了这个类的新实例（称为$object）。

示例 5-10. 声明一个类并检查一个对象

<?php
  $object = new User;
  print_r($object);

  class User
  {
    public $name, $password;

    function save_user()
    {
      echo "Save User code goes here";
    }
  }
?>

在这里，我还使用了一个称为print_r的宝贵函数。 它要求 PHP 以人类可读的形式显示关于变量的信息。 （_r代表人类可读。） 在新对象$object的情况下，它显示如下内容：

`User` `Object`
`(`
  `[``name``]`     `=>`
  `[``password``]` `=>`
`)`

然而，浏览器会压缩所有空白字符，因此在浏览器中输出稍微难以阅读：

    用户对象（[name] => [password] => ）

无论如何，输出显示$object是一个具有属性name和password的用户定义对象。

创建对象

要创建一个具有指定类的对象，请使用new关键字，如此：$object = new Class。 这里有几种我们可以这样做的方式：

$object = new User;
$temp   = new User('name', 'password');

在第一行中，我们只是将一个对象分配给User类。 在第二行，我们向调用传递参数。

一个类可能需要或禁止参数； 它也可能允许不明确需要的参数。

访问对象

让我们添加几行到示例 5-10，并检查结果。示例 5-11 通过设置对象属性并调用方法扩展了先前的代码。

示例 5-11. 创建并与对象交互

<?php
  $object = new User;
  print_r($object); echo "<br>";

  $object->name     = "Joe";
  $object->password = "mypass";
  print_r($object); echo "<br>";

  $object->save_user();

  class User
  {
    public $name, $password;

    function save_user()
    {
      echo "Save User code goes here";
    }
  }
?>

正如您所见，访问对象属性的语法是$object->property。同样，调用方法的方式是这样的：$object->method()。

您应该注意到，示例中的property和method并没有在它们前面加上$符号。如果您在它们前面加上$符号，代码将无法工作，因为它会尝试引用变量中的值。例如，表达式$object->$property会尝试查找分配给名为$property的变量的值（假设该值是字符串brown），然后尝试引用属性$object->brown。如果$property未定义，则会尝试引用$object->NULL并导致错误。

使用浏览器的查看源代码工具查看示例 5-11 的输出如下：

`User` `Object`
`(`
  `[``name``]`     `=>`
  `[``password``]` `=>`
`)`
`User` `Object`
`(`
  `[``name``]`     `=>` `Joe`
  `[``password``]` `=>` `mypass`
`)`
`Save` `User` `code` `goes` `here`

再次使用print_r通过在属性分配之前和之后提供$object的内容来展示其实用性。从现在开始，我将省略print_r语句，但是如果您在开发服务器上跟随本书工作，可以添加一些语句以准确了解发生了什么。

您还可以看到，在方法save_user中的代码通过调用该方法而执行。它打印了一个提醒我们创建一些代码的字符串。

注意

您可以将函数和类定义放置在代码的任何位置，无论是在使用它们的语句之前还是之后。不过，通常认为将它们放置在文件的末尾是一种良好的实践。

克隆对象

一旦创建了对象，在将其作为参数传递时，它将按引用传递。用火柴盒的比喻来说，这就像将几根线固定在一个放在火柴盒中的对象上，这样您就可以跟随任何附加的线来访问它。

换句话说，对象分配并不复制对象的整体内容。您将在示例 5-12 中看到这是如何工作的，我们定义了一个非常简单的User类，没有方法，只有属性name。

示例 5-12. 复制对象

<?php
  $object1       = new User();
  $object1->name = "Alice";
  $object2       = $object1;
  $object2->name = "Amy";

  echo "object1 name = " . $object1->name . "<br>";
  echo "object2 name = " . $object2->name;

  class User
  {
    public $name;
  }
?>

在这里，我们首先创建对象$object1并将值Alice分配给name属性。然后，我们创建$object2，将其赋值为$object1的值，并仅将Amy赋值给$object2的name属性——或者我们可能会这样认为。但是，此代码输出如下：

object1 name = Amy
object2 name = Amy

发生了什么？$object1和$object2都指向同一个对象，因此将$object2的name属性更改为Amy也会为$object1设置该属性。

为了避免混淆，可以使用clone操作符，它创建类的新实例，并从原始实例复制属性值到新实例中。示例 5-13 展示了这种用法。

示例 5-13. 克隆对象

<?php
  $object1       = new User();
  $object1->name = "Alice";
  $object2       = clone $object1;
  $object2->name = "Amy";

  echo "object1 name = " . $object1->name . "<br>";
  echo "object2 name = " . $object2->name;

  class User
  {
    public $name;
  }
?>

瞧！这段代码的输出正是我们最初想要的：

object1 name = Alice
object2 name = Amy

构造函数

当创建一个新对象时，你可以向被调用的类传递一系列参数。这些参数传递给类中的一个特殊方法，称为构造方法，它初始化各种属性。

要做到这一点，你使用函数名__construct（即，construct前面加上两个下划线字符），就像在示例 5-14 中一样。

示例 5-14. 创建构造方法

<?php
  class User
  {
    function __construct($param1, $param2)
    {
      // Constructor statements go here
    }
  }
?>

析构函数

你还可以创建析构方法。当代码已经引用了一个对象或脚本达到结尾时，这个功能非常有用。示例 5-15 展示了如何创建析构方法。析构函数可以进行清理工作，例如释放数据库连接或类中保留的其他资源。因为你在类中保留了资源，所以必须在这里释放它，否则它将无限期存在。许多系统-wide 问题是由程序保留资源并忘记释放它们引起的。

示例 5-15. 创建析构方法

<?php
  class User
  {
    function __destruct()
    {
      // Destructor code goes here
    }
  }
?>

编写方法

正如你所见，声明方法类似于声明函数，但有一些区别。例如，以双下划线 (__) 开头的方法名是保留的（例如，__construct 和 __destruct），你不应该创建这种形式的任何方法。

你还可以访问一个特殊的变量称为$this，它可以用来访问当前对象的属性。要了解它是如何工作的，请看示例 5-16，其中包含了User类定义中不同的方法get_password。

示例 5-16. 在方法中使用变量$this

<?php
  class User
  {
    public $name, $password;

    function get_password()
    {
      return $this->password;
    }
  }
?>

get_password使用$this变量来访问当前对象，然后返回该对象的password属性的值。请注意，当我们使用->操作符时，前面的$符号在$password属性中被省略了。在首次使用此功能时，保留$可能是一个典型的错误。

下面是如何使用在示例 5-16 中定义的类：

$object           = new User;
$object->password = "secret";

echo $object->get_password();

这段代码打印出密码secret。

声明属性

在类中显式声明属性并不是必需的，因为它们可以在首次使用时隐式定义。为了说明这一点，在示例 5-17 中，User类没有属性和方法，但是这是合法的代码。

示例 5-17. 隐式定义属性

<?php
  $object1       = new User();
  $object1->name = "Alice";

  echo $object1->name;

  class User {}
?>

这段代码正确输出字符串Alice，没有问题，因为 PHP 会隐式地为你声明属性$object1->name。但这种编程方式可能会导致极难发现的错误，因为name是从类外部声明的。

为了帮助自己和任何将来维护你代码的人，我建议你养成在类内部始终显式声明属性的习惯。你会为此感到高兴的。

此外，当你在类内声明一个属性时，你可以为其分配一个默认值。你使用的值必须是一个常量，而不是函数或表达式的结果。示例 5-18 展示了一些有效和无效的赋值。

示例 5-18. 有效和无效的属性声明

<?php
  class Test
  {
    public $name  = "Paul Smith"; // Valid
    public $age   = 42;           // Valid
    public $time  = time();       // Invalid - calls a function
    public $score = $level * 2;   // Invalid - uses an expression
  }
?>

声明常量

就像你可以使用define函数创建全局常量一样，你也可以在类内部定义常量。普遍接受的做法是使用大写字母以突出它们的重要性，如示例 5-19 所示。

示例 5-19. 在类内定义常量

<?php
  Translate::lookup();

  class Translate
  {
    const ENGLISH = 0;
    const SPANISH = 1;
    const FRENCH  = 2;
    const GERMAN  = 3;
    // ...

    static function lookup()
    {
      echo self::SPANISH;
    }
  }
?>

你可以直接引用常量，使用self关键字和双冒号操作符。请注意，此代码在第 1 行直接调用类，而不是先创建实例。运行此代码时打印的值将是1。

请记住，一旦定义了常量，就不能更改它。

属性和方法的作用域

PHP 提供了三个关键字来控制属性和方法（成员）的作用域：

public

公共成员可以在任何地方引用，包括其他类和对象的实例。这是使用var或public关键字声明变量时的默认值，或者在第一次使用变量时隐式声明的默认值。var和public关键字是可互换的，因为尽管var已被弃用，但为了与 PHP 的旧版本兼容，它仍然保留。方法默认被假定为public。

protected

这些成员只能通过对象的类方法及其任何子类的方法引用。

private

这些成员只能通过同一类内的方法引用，而不能通过子类引用。

下面是如何决定使用哪个：

• 当外部代码应该访问此成员且扩展类也应该继承它时，请使用public。

• 当外部代码不应该访问此成员但扩展类应该继承它时，请使用protected。

• 当外部代码不应该访问此成员且扩展类也不应该继承它时，请使用private。

示例 5-20 说明了这些关键字的使用。

示例 5-20. 改变属性和方法的作用域

<?php
  class Example
  {
    var $name   = "Michael"; // Same as public but deprecated
    public $age = 23;        // Public property
    protected $usercount;    // Protected property

    private function admin() // Private method
    {
      // Admin code goes here
    }
  }
?>

静态方法

您可以将方法定义为static，这意味着它是在类上调用而不是在对象上调用。静态方法无法访问任何对象属性，并且如在示例 5-21 中所示创建和访问。

示例 5-21. 创建和访问静态方法

<?php
  User::pwd_string();

  class User
  {
    static function pwd_string()
    {
      echo "Please enter your password";
    }
  }
?>

注意如何使用双冒号（也称为作用域解析运算符）而不是->来调用类本身以及静态方法。静态函数用于执行与类本身相关的操作，而不是特定类的实例。您可以在示例 5-19 中看到另一个静态方法的示例。

注意

如果尝试从静态函数内部访问$this->property或其他对象属性，将收到错误消息。

静态属性

大多数数据和方法适用于类的实例。例如，在User类中，您希望执行设置特定用户密码或检查用户注册时间等操作。这些事实和操作分别适用于每个用户，因此使用实例特定的属性和方法。

但偶尔您可能需要维护关于整个类的数据。例如，要报告注册用户的数量，您将存储一个适用于整个User类的变量。PHP 提供了用于此类数据的静态属性和方法。

如示例 5-21 中简要显示的那样，声明类成员为static使它们可以在不实例化类的情况下访问。声明为static的属性无法在类的实例内直接访问，但静态方法可以。

示例 5-22 定义了一个名为Test的类，其中包含一个静态属性和一个公共方法。

示例 5-22. 定义具有静态属性的类

<?php
  $temp = new Test();

  echo "Test A: " . Test::$static_property . "<br>";
  echo "Test B: " . $temp->get_sp()        . "<br>";
  echo "Test C: " . $temp->static_property . "<br>";

  class Test
  {
    static $static_property = "I'm static";

    function get_sp()
    {
       return self::$static_property;
    }
  }
?>

运行此代码时，将返回以下输出：

 Test A: I'm static
Test B: I'm static
Notice: Undefined property: Test::$static_property
Test C: 

此示例显示，通过 Test A 中的双冒号运算符，可以直接从类本身引用属性$static_property。另外，Test B 可以通过从类Test创建的对象$temp调用get_sp方法来获取其值。但是，Test C 失败了，因为对象$temp无法访问静态属性$static_property。

注意方法get_sp如何使用关键字self访问$static_property。这是在类内部直接访问静态属性或常量的方式。

继承

定义类后，可以从中派生子类。这可以节省大量费力的代码重写：您可以取一个与您需要编写的类类似的类，将其扩展为子类，并仅修改不同的部分。您可以使用extends关键字来实现这一点。

在示例 5-23 中，类Subscriber通过extends关键字声明为User的子类。

示例 5-23. 继承和扩展类

<?php
  $object           = new Subscriber;
  $object->name     = "Fred";
  $object->password = "pword";
  $object->phone    = "012 345 6789";
  $object->email    = "fred@bloggs.com";
  $object->display();

  class User
  {
    public $name, $password;

    function save_user()
    {
      echo "Save User code goes here";
    }
  }

  class Subscriber extends User
  {
    public $phone, $email;

    function display()
    {
      echo "Name:  " . $this->name     . "<br>";
      echo "Pass:  " . $this->password . "<br>";
      echo "Phone: " . $this->phone    . "<br>";
      echo "Email: " . $this->email;
    }
  }
?>

原始User类具有两个属性，$name和$password，以及一个将当前用户保存到数据库的方法。 Subscriber通过添加另外两个属性$phone和$email来扩展此类，并包括使用变量$this显示当前对象属性的方法，该变量引用正在访问的对象的当前值。 此代码的输出如下：

    名称:  弗雷德     密码:  密码     电话: 012 345 6789     电子邮件: fred@bloggs.com

父关键字

如果您在子类中编写与父类中同名的方法，其语句将覆盖父类的语句。 有时这不是您想要的行为，您需要访问父方法。 为此，可以使用parent运算符，如示例 5-24。

示例 5-24. 覆盖方法并使用parent运算符

<?php
  $object = new Son;
  $object->test();
  $object->test2();

  class Dad
  {
    function test()
    {
      echo "[Class Dad] I am your Father<br>";
    }
  }

  class Son extends Dad
  {
    function test()
    {
      echo "[Class Son] I am Luke<br>";
    }

    function test2()
    {
      parent::test();
    }
  }
?>

此代码创建了一个名为Dad的类和一个名为Son的子类，后者继承了其属性和方法，然后覆盖了方法test。 因此，当第 2 行调用方法test时，将执行新方法。 要执行Dad类中重写的test方法的唯一方法是使用parent运算符，如Son类的test2函数所示。 代码输出如下：

**    [类儿子] 我是卢克**

**    [类爸爸] 我是你的父亲**

如果希望确保您的代码调用当前类的方法，可以使用self关键字，如下所示：

self::method();

子类构造函数

当您扩展一个类并声明自己的构造函数时，应该意识到 PHP 不会自动调用父类的构造函数。 如果希望确保执行所有初始化代码，子类应始终调用父类构造函数，如示例 5-25。

示例 5-25. 调用父类构造函数

<?php
  $object = new Tiger();

  echo "Tigers have...<br>";
  echo "Fur: " . $object->fur . "<br>";
  echo "Stripes: " . $object->stripes;

  class Wildcat
  {
    public $fur; // Wildcats have fur

    function __construct()
    {
      $this->fur = "TRUE";
    }
  }

  class Tiger extends Wildcat
  {
    public $stripes; // Tigers have stripes

    function __construct()
    {
      parent::__construct(); // Call parent constructor first
      $this->stripes = "TRUE";
    }
  }
?>

此示例以典型方式利用继承。 Wildcat类创建了属性$fur，我们希望重用该属性，因此我们创建了Tiger类来继承$fur并额外创建了另一个属性$stripes。 为了验证已调用两个构造函数，程序输出如下：

    老虎有...     毛皮: TRUE     条纹: TRUE

最终方法

当你希望防止子类覆盖超类方法时，可以使用final关键字。 示例 5-26 演示了如何使用。

示例 5-26. 创建一个final方法

<?php
  class User
  {
    final function copyright()
    {
      echo "This class was written by Joe Smith";
    }
  }
?>

一旦您消化了本章的内容，您应该对 PHP 能为您做什么有很强的感觉。 您应该能够轻松使用函数，并且如果希望，编写面向对象的代码。 在第六章中，我们将通过查看 PHP 数组的工作方式来完成我们对 PHP 的初步探索。

问题

1. 使用函数的主要好处是什么？

2. 函数可以返回多少个值？

3. 通过名称和引用访问变量之间有什么区别？

4. 作用域在 PHP 中的含义是什么？

5. 如何在一个 PHP 文件中引用另一个？

6. 对象与函数有何不同？

7. 如何在 PHP 中创建一个新对象？

8. 使用什么语法可以从现有类创建一个子类？

9. 如何在创建对象时使其初始化？

10. 明确在类中声明属性是个好主意的原因是什么？

参见“第五章答案”，可以找到这些问题的答案。

第六章：PHP 数组

在第三章中，我对 PHP 数组进行了非常简要的介绍——仅仅足够让你略知一二它们的强大。在本章中，我将向你展示更多可以用数组做的事情，其中一些——如果你曾经使用过像 C 这样的强类型语言——可能会因其优雅和简洁而让你感到惊讶。

数组不仅消除了编写处理复杂数据结构的代码的枯燥感，而且提供了许多访问数据的方式，同时保持惊人的快速性。

基本访问

我们已经看过数组，就好像它们是粘在一起的火柴盒群。另一种思考数组的方法是把它看作是一串珠子，每个珠子代表一个可以是数字、字符串或甚至其他数组的变量。它们像珠串一样，因为每个元素都有自己的位置，并且（除了第一个和最后一个）每个元素两侧都有其他元素。

有些数组通过数字索引进行引用；其他允许使用字母数字标识符。内置函数允许你对它们进行排序、添加或移除部分，并通过一种特殊的循环来遍历它们处理每个项目。通过在另一个数组内放置一个或多个数组，你可以创建二维、三维或任意维数的数组。

数字索引数组

假设你被委托为当地一家办公用品公司创建一个简单的网站，目前正在处理与纸张相关的部分。管理该类别库存中各种物品的一种方式是将它们放入一个数字数组中。你可以在例子 6-1 中看到最简单的做法。

例子 6-1. 向数组添加项目

<?php
  $paper[] = "Copier";
  $paper[] = "Inkjet";
  $paper[] = "Laser";
  $paper[] = "Photo";

  print_r($paper);
?>

在这个例子中，每当你给数组$paper赋值时，都会使用该数组内的第一个空位置来存储值，并且 PHP 内部的指针会递增指向下一个空位置，为将来的插入做准备。熟悉的print_r函数（用于打印变量、数组或对象的内容）用于验证数组是否已正确填充。它打印出以下内容：

Array
(
  [0] => Copier
  [1] => Inkjet
  [2] => Laser
  [3] => Photo
)

之前的代码也可以像在例子 6-2 中展示的那样书写，其中指定了数组中每个项目的确切位置。但是，正如你所看到的，这种方法需要额外的输入，并且如果你想要在数组中插入或删除项目，会使得你的代码更难维护。所以，除非你希望指定不同的顺序，通常最好让 PHP 处理实际的位置编号。

例子 6-2. 使用显式位置向数组添加项目

<?php
  $paper[0] = "Copier";
  $paper[1] = "Inkjet";
  $paper[2] = "Laser";
  $paper[3] = "Photo";

  print_r($paper);
?>

这些例子的输出是相同的，但在开发网站时你不太可能使用print_r，所以例子 6-3 展示了如何使用for循环打印出网站提供的各种类型的纸张。

示例 6-3. 向数组添加项目并检索它们

<?php
  $paper[] = "Copier";
  $paper[] = "Inkjet";
  $paper[] = "Laser";
  $paper[] = "Photo";

  for ($j = 0 ; $j < 4 ; ++$j)
    echo "$j: $paper[$j]<br>";
?>

此示例打印出以下内容：

 0: Copier
  1: Inkjet
  2: Laser
  3: Photo

到目前为止，你已经看到了几种向数组添加项目和引用它们的方式。PHP 还提供了更多方法，稍后会详细介绍。但首先，我们将看看另一种类型的数组。

关联数组

通过索引跟踪数组元素可以很好地工作，但可能需要额外的工作来记住哪个数字指代哪个产品。这也可能使得其他程序员难以理解代码。

这就是关联数组发挥作用的地方。使用它们，您可以通过名称而不是数字引用数组中的项目。示例 6-4 扩展了先前的代码，为数组中的每个元素赋予了一个标识名称和一个更长、更详细的字符串值。

示例 6-4. 向关联数组添加项目并检索它们

<?php
  $paper['copier'] = "Copier & Multipurpose";
  $paper['inkjet'] = "Inkjet Printer";
  $paper['laser']  = "Laser Printer";
  $paper['photo']  = "Photographic Paper";

  echo $paper['laser'];
?>

现在，每个项目都有一个您可以在其他地方引用的唯一名称，例如 echo 语句—它仅仅打印出 激光打印机。这些名称（如 复印机、喷墨打印机 等）称为索引或键，而分配给它们的项目（如 激光打印机）称为值。

PHP 的这一强大功能经常用于从 XML 和 HTML 中提取信息。例如，像搜索引擎使用的 HTML 解析器可以将网页的所有元素放入一个关联数组中，其名称反映了页面的结构：

$html['title'] = "My web page";
$html['body']  = "... body of web page ...";

该程序还可能会将页面中找到的所有链接分解为另一个数组，并将所有标题和副标题分解为另一个数组。当您使用关联数组而不是数值数组时，引用所有这些项的代码变得易于编写和调试。

使用 array 关键字进行赋值

到目前为止，你已经学会了如何通过逐个添加新项目来向数组赋值。无论你指定键、指定数字标识符还是让 PHP 隐式分配数字标识符，这都是一种冗长的方法。使用 array 关键字，有一种更紧凑和更快速的赋值方法。示例 6-5 展示了使用这种方法分配的数字和关联数组。

示例 6-5. 使用 array 关键字向数组添加项目

<?php
  $p1 = array("Copier", "Inkjet", "Laser", "Photo");

  echo "p1 element: " . $p1[2] . "<br>";

  $p2 = array('copier' => "Copier & Multipurpose",
              'inkjet' => "Inkjet Printer",
              'laser'  => "Laser Printer",
              'photo'  => "Photographic Paper");

  echo "p2 element: " . $p2['inkjet'] . "<br>";
?>

此片段的前半部分将旧的、简短的产品描述分配给数组 $p1。有四个项目，因此它们将占据 0 到 3 的位置。因此，echo 语句打印出以下内容：

    p1 元素：激光

第二部分使用格式key => value 将关联标识符和伴随的较长产品描述分配给数组$p2。=>的使用类似于常规的=赋值运算符，不同之处在于你正在为索引而不是变量赋值。索引因此与该值紧密联系，除非它被赋予新值。因此，echo命令打印出以下内容：

    p2 元素: 墨水喷墨打印机

你可以验证$p1和$p2是不同类型的数组，因为将以下两个命令附加到代码后，都会导致Undefined index或Undefined offset错误，因为每个数组标识符都不正确：

echo $p1['inkjet']; // Undefined index
echo $p2[3];        // Undefined offset

foreach...as循环

PHP 的创建者为了使语言易于使用，做出了很大努力。因此，他们不满足于已经提供的循环结构，特别为数组添加了另一个循环：foreach...as循环。使用它，你可以逐个遍历数组中的所有项，并对它们进行操作。

这个过程从第一项开始，直到最后一项结束，因此你甚至不需要知道数组中有多少项。示例 6-6 展示了如何使用foreach...as重写示例 6-3。

示例 6-6. 使用foreach...as遍历数值数组

<?php
  $paper = array("Copier", "Inkjet", "Laser", "Photo");
  $j = 0;

  foreach($paper as $item)
  {
    echo "$j: $item<br>";
    ++$j;
  }
?>

当 PHP 遇到foreach语句时，它将数组的第一个项放入跟随as关键字的变量中；每次控制流返回到foreach时，下一个数组元素将被放入as关键字中。在这种情况下，变量$item依次设置为数组$paper中的每个值。一旦所有值都被使用，循环的执行结束。这段代码的输出与示例 6-3 完全相同。

现在让我们看看如何通过查看示例 6-7，了解foreach如何与关联数组一起使用，这是示例 6-5 的后半部分重写。

示例 6-7. 使用foreach...as 遍历关联数组

<?php
  $paper = array('copier' => "Copier & Multipurpose",
                 'inkjet' => "Inkjet Printer",
                 'laser'  => "Laser Printer",
                 'photo'  => "Photographic Paper");

  foreach($paper as $item => $description)
    echo "$item: $description<br>";
?>

请记住，关联数组不需要数值索引，因此在此示例中未使用变量$j。相反，数组$paper的每个项被传递到变量$item和$description的键/值对中，从中打印出它们。该代码的显示结果如下：

    复印机: 复印机和多用途     墨水喷墨: 墨水喷墨打印机     激光: 激光打印机     照片: 摄影纸

在 PHP 7.2 版本之前，作为foreach...as的替代语法，您可以将list函数与each函数结合使用。然而，each随后被弃用，因此不建议使用，因为它可能会在未来的版本中删除。对于需要更新的 PHP 程序员来说，这是一场噩梦，尤其是each函数非常有用。因此，我编写了一个名为myEach的替代品，它的功能与each完全相同，并且允许您轻松更新旧代码，如示例 6-8。

示例 6-8. 使用myEach和list遍历关联数组

<?php
  $paper = array('copier' => "Copier & Multipurpose",
                 'inkjet' => "Inkjet Printer",
                 'laser'  => "Laser Printer",
                 'photo'  => "Photographic Paper");

  while (list($item, $description) = myEach($paper))
    echo "$item: $description<br>";

  function myEach(&$array) // Replacement for the deprecated each function
  {
    $key    = key($array);
    $result = ($key === null) ? false :
              [$key, current($array), 'key', 'value' => current($array)];
    next($array);
    return $result;
  }
?>

在这个示例中，设置了一个while循环，并且将继续循环，直到myEach函数（等同于旧版 PHP 的each函数）返回FALSE为止。myEach函数类似于foreach，它返回一个包含数组$paper中的键/值对的数组，然后将其内置指针移动到该数组中的下一个对。当没有更多的对要返回时，myEach返回FALSE。

list函数接受一个数组作为其参数（在本例中，是函数myEach返回的键/值对），然后将数组的值分配给括号内列出的变量。

在示例 6-9 中，您可以更清楚地看到list函数的工作原理，其中一个数组由两个字符串Alice和Bob创建，然后传递给list函数，该函数将这些字符串分配为变量$a和$b的值。

示例 6-9. 使用list函数

<?php
  list($a, $b) = array('Alice', 'Bob');
  echo "a=$a b=$b";
?>

这段代码的输出如下所示：

    a=Alice b=Bob

因此，在处理数组时，您可以根据需要选择。使用foreach...as创建一个循环，将值提取到as后面的变量中，或者使用myEach函数创建自己的循环系统。

多维数组

PHP 数组语法中的一个简单设计特性使得可以创建多维数组。事实上，它们可以是任意多维（尽管很少有应用程序会超过三维）。

这个特性是将整个数组作为另一个数组的一部分包含进来，并且可以继续这样做，就像那首古老的韵文：“大跳蚤背上有小跳蚤来咬它们。小跳蚤有更小的跳蚤，继续蚤类，无穷尽。”

让我们通过扩展前面示例中的关联数组来看看它是如何工作的；参见示例 6-10。

示例 6-10. 创建一个多维关联数组

<?php
  $products = array(

    'paper' => array(

      'copier' => "Copier & Multipurpose",
      'inkjet' => "Inkjet Printer",
      'laser'  => "Laser Printer",
      'photo'  => "Photographic Paper"),

    'pens' => array(

      'ball'   => "Ball Point",
      'hilite' => "Highlighters",
      'marker' => "Markers"),

    'misc' => array(

      'tape'   => "Sticky Tape",
      'glue'   => "Adhesives",
      'clips'  => "Paperclips"
    )
  );

  echo "<pre>";

  foreach($products as $section => $items)
    foreach($items as $key => $value)
      echo "$section:\t$key\t($value)<br>";

  echo "</pre>";
?>

现在代码开始增长，为了使事情更清晰，我已经重新命名了一些元素。例如，因为前面的数组$paper现在只是更大数组的一个子部分，所以主数组现在称为$products。在这个数组内部，有三个条目——paper、pens和misc——每个条目都包含另一个带有键/值对的数组。

如果必要的话，这些子数组可能还包含更进一步的数组。例如，在 ball 下面可能有许多不同类型和颜色的圆珠笔可以在在线商店中获取。但是现在，我将代码限制在了只有两层的深度。

一旦数组数据被赋值，我使用一对嵌套的 foreach...as 循环来打印出各种值。外部循环从数组的顶层提取主要部分，内部循环提取每个部分内的键/值对。

只要记住每个数组级别都以相同方式工作（它是一个键/值对），你可以轻松编写代码来访问任何级别的任何元素。

echo 语句利用 PHP 转义字符 \t 输出制表符。尽管制表符通常对网页浏览器来说不重要，但我让它们被 <pre>...</pre> 标签使用，这告诉浏览器将文本格式化为预格式化和等宽字体，并且 不 忽略空白字符如制表符和换行符。从这段代码的输出看起来，如下所示：

paper:  copier  (Copier & Multipurpose)
paper:  inkjet  (Inkjet Printer)
paper:  laser   (Laser Printer)
paper:  photo   (Photographic Paper)
pens:   ball    (Ball Point)
pens:   hilite  (Highlighters)
pens:   marker  (Markers)
misc:   tape    (Sticky Tape)
misc:   glue    (Adhesives)
misc:   clips   (Paperclips)

你可以通过使用方括号直接访问数组的特定元素。

echo $products['misc']['glue'];

这输出值为 胶粘剂。

你也可以创建数值型多维数组，通过索引而不是通过字母数字标识符进行访问。示例 6-11 创建了一个象棋游戏的棋盘，其中各个棋子处于起始位置。

示例 6-11. 创建一个多维数值数组

<?php
  $chessboard = array(
    array('r', 'n', 'b', 'q', 'k', 'b', 'n', 'r'),
    array('p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'),
    array(' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '),
    array(' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '),
    array(' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '),
    array(' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '),
    array('P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'),
    array('R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R')
  );

  echo "<pre>";

  foreach($chessboard as $row)
  {
    foreach ($row as $piece)
      echo "$piece ";

    echo "<br>";
  }

  echo "</pre>";
?>

在这个例子中，小写字母表示黑色棋子，大写字母表示白色棋子。键为 r = 车，n = 马，b = 象，k = 王，q = 后，p = 兵。同样，一对嵌套的 foreach...as 循环遍历数组并显示其内容。外部循环将每一行处理为变量 $row，它本身是一个数组，因为 $chessboard 数组为每一行使用一个子数组。这个循环内有两条语句，所以用大括号将它们括起来。

然后内部循环处理每行中的每个方块，输出存储在其中的字符（$piece），后跟一个空格（以使打印输出更加整齐）。这个循环只有一条语句，所以不需要用大括号将其括起来。<pre> 和 </pre> 标签确保输出正确显示，如下所示：

r n b q k b n r
p p p p p p p p

P P P P P P P P
R N B Q K B N R

你可以通过使用方括号直接访问这个数组中的任何元素。

echo $chessboard[7][3];

这个语句输出大写字母 Q，在第八行向下和第四列向右的位置（请记住数组索引从 0 开始，不是从 1 开始）。

使用数组函数

你已经看到了 list 和 each 函数，但是 PHP 还配备了许多其他处理数组的函数。你可以在文档中找到完整的列表。然而，其中一些函数非常基础，值得花时间在这里仔细研究它们。

is_array

数组和变量共享相同的命名空间。这意味着你不能同时有一个名为 $fred 的字符串变量和一个名为 $fred 的数组。如果你不确定并且你的代码需要检查一个变量是否是数组，你可以使用 is_array 函数，如下所示：

echo (is_array($fred)) ? "Is an array" : "Is not an array";

注意，如果 $fred 还没有被赋值，将生成一个 Undefined variable 的消息。

count

虽然 each 函数和 foreach...as 循环结构是遍历数组内容的优秀方式，但有时你确实需要知道数组中有多少元素，特别是如果你将直接引用它们的话。要计算顶层数组中的所有元素数，使用如下命令：

echo count($fred);

如果你想知道多维数组中总共有多少元素，可以使用如下语句：

echo count($fred, 1);

第二个参数是可选的，设置要使用的模式。它应该是 0 以限制仅计算顶层，或者 1 以强制递归计算所有子数组元素。

排序

排序是如此常见，PHP 为此提供了一个内置函数。在其最简单的形式中，你可以像这样使用它：

sort($fred);

需要记住的是，与其他一些函数不同，sort 会直接对提供的数组进行操作，而不是返回已排序元素的新数组。它在成功时返回 TRUE，在出错时返回 FALSE，并且还支持一些标志——你可能希望使用的主要两个标志，强制按数字或字符串对项目进行排序，如下所示：

sort($fred, SORT_NUMERIC);
sort($fred, SORT_STRING);

你也可以使用 rsort 函数按照反向顺序对数组进行排序，如下所示：

rsort($fred, SORT_NUMERIC);
rsort($fred, SORT_STRING);

洗牌

有时候你可能需要将数组的元素随机排序，比如在创建一副扑克牌游戏时：

shuffle($cards);

与 sort 类似，shuffle 直接作用于提供的数组，并在成功时返回 TRUE，在出错时返回 FALSE。

explode

explode 是一个非常有用的函数，你可以用它将包含多个由单个字符（或字符串）分隔的项目的字符串转换成一个数组。一个方便的例子是将句子拆分成一个包含所有单词的数组，如 示例 6-12 所示。

示例 6-12. 使用空格将字符串分割成数组

<?php
  $temp = explode(' ', "This is a sentence with seven words");
  print_r($temp);
?>

此示例在浏览器中打印出以下内容（单行显示）：

Array
(
  [0] => This
  [1] => is
  [2] => a
  [3] => sentence
  [4] => with
  [5] => seven
  [6] => words
)

第一个参数，分隔符，不一定是空格，甚至不一定是单个字符。示例 6-13 展示了一个略有不同的变体。

示例 6-13. 将用 *** 分隔的字符串分割成数组

<?php
  $temp = explode('***', "A***sentence***with***asterisks");
  print_r($temp);
?>

示例 6-13 中的代码将打印出以下内容：

Array
(
  [0] => A
  [1] => sentence
  [2] => with
  [3] => asterisks
)

extract

有时候将数组中的键/值对转换为 PHP 变量可能会很方便。一个这样的时机可能是当你处理由表单发送到 PHP 脚本的 $_GET 或 $_POST 变量时。

当通过网络提交表单时，Web 服务器将变量解包到 PHP 脚本的全局数组中。如果使用 GET 方法发送变量，则会放入一个名为$_GET的关联数组；如果使用 POST 发送，则会放入一个名为$_POST的关联数组。

当然，您可以按照迄今为止的示例中所示的方式遍历这样的关联数组。但是，有时您只想将发送的值存储到变量中以供以后使用。在这种情况下，您可以让 PHP 自动执行这项工作：

extract($_GET);

因此，如果将查询字符串参数q发送到 PHP 脚本以及相关联的值Hi there，将创建一个名为$q的新变量，并为其分配该值。

虽然这种方法很有用，但要小心，因为如果提取的任何变量与您已经定义的变量冲突，您现有的值将被覆盖。为了避免这种可能性，您可以使用该函数提供的许多附加参数之一，就像这样：

extract($_GET, EXTR_PREFIX_ALL, 'fromget');

在这种情况下，所有新变量将以给定前缀字符串开始，后跟下划线，因此$q将变为$fromget_q。我强烈建议您在处理$_GET和$_POST数组或任何其他可能由用户控制键的数组时使用此函数版本，因为恶意用户可能会提交有意选择的键来覆盖常用变量名并危害您的网站。

compact

有时您可能想要使用compact（extract的反向操作）来创建一个包含变量及其值的数组。示例 6-14 展示了您可能如何使用此函数。

示例 6-14. 使用compact函数

<?php
  $fname         = "Doctor";
  $sname         = "Who";
  $planet        = "Gallifrey";
  $system        = "Gridlock";
  $constellation = "Kasterborous";

  $contact = compact('fname', 'sname', 'planet', 'system', 'constellation');

  print_r($contact);
?>

运行示例 6-14 的结果如下：

Array
(
  [fname] => Doctor
  [sname] => Who
  [planet] => Gallifrey
  [system] => Gridlock
  [constellation] => Kasterborous
)

请注意，compact要求以引号提供变量名称，而不是以$符号开头。这是因为compact正在寻找变量名列表，而不是它们的值。

另一个使用该函数的情况是调试时，您希望快速查看几个变量及其值，例如示例 6-15。

示例 6-15. 使用compact函数进行调试

<?php
  $j       = 23;
  $temp    = "Hello";
  $address = "1 Old Street";
  $age     = 61;

  print_r(compact(explode(' ', 'j temp address age')));
?>

这通过使用explode函数从字符串中提取所有单词到数组中实现，然后将其传递给compact函数，后者再返回一个数组给print_r，最终显示其内容。

如果您复制并粘贴print_r代码行，则只需修改那里命名的变量即可快速打印一组变量的值。在本例中，输出如下所示：

Array
(
  [j] => 23
  [temp] => Hello
  [address] => 1 Old Street
  [age] => 61
)

重置

当 foreach...as 结构或 each 函数遍历数组时，它会保持一个内部的 PHP 指针，记录应该返回的数组元素。如果你的代码需要返回数组的开头，你可以使用 reset，它也会返回那个元素的值。以下是如何使用此函数的示例：

reset($fred);         // Throw away return value
$item = reset($fred); // Keep first element of the array in $item

end

与 reset 类似，你可以使用 end 函数将 PHP 内部数组指针移动到数组的最后一个元素，并返回该元素的值。以下是一些示例：

end($fred);
$item = end($fred);

本章结束了你对 PHP 的基础介绍，现在你应该能够使用所学的技能编写相当复杂的程序。在下一章中，我们将讨论使用 PHP 处理常见实际任务的方法。

问题

1. 数值数组和关联数组有什么区别？

2. array 关键字的主要优势是什么？

3. foreach 和 each 有什么区别？

4. 如何创建多维数组？

5. 如何确定数组中元素的数量？

6. explode 函数的目的是什么？

7. 如何将 PHP 内部指针设置回数组的第一个元素？

请参阅“第六章答案”，位于附录 A 中，以获取这些问题的答案。

第七章：PHP 实用指南

前面的章节介绍了 PHP 语言的各个元素。本章将基于你的新编程技能，教你如何执行一些常见但重要的实际任务。你将学习如何处理字符串，以实现清晰简洁的代码，并在网页浏览器中显示你想要的效果，包括高级的日期和时间管理。你还将了解如何创建和修改文件，包括用户上传的文件。

使用 printf

你已经看到了 print 和 echo 函数，它们仅仅是将文本输出到浏览器。但是一个更强大的函数 printf 可以通过在字符串中添加特殊的格式化字符来控制输出的格式。对于每个格式化字符，printf 都希望你传递一个参数，它将使用该格式显示。例如，以下示例使用 %d 转换说明符来显示值 3 的十进制表示：

printf("There are %d items in your basket", 3);

如果你用 %b 替换 %d，那么值 3 将以二进制 (11) 形式显示。表 7-1 显示了支持的转换说明符。

表 7-1. printf 转换说明符

指示符	对参数arg的转换操作	示例（对于参数为 123）
%	显示 % 字符（不需要arg）	%
b	以二进制整数显示arg	1111011
c	显示arg的 ASCII 字符	{
d	以有符号十进制整数显示arg	123
e	使用科学计数法显示arg	1.23000e+2
f	以浮点数显示arg	123.000000
o	以八进制整数显示arg	173
s	以字符串形式显示arg	123
u	以无符号十进制显示arg	123
x	以小写十六进制显示arg	7b
X	以大写十六进制显示arg	7B

在 printf 函数中，你可以使用任意数量的转换说明符，只要你传递相匹配的参数，并且每个说明符前面都有 % 符号。因此，以下代码是有效的，并将输出 "我的名字是 Simon。我今年 33 岁，这在十六进制中是 21"：

printf("My name is %s. I'm %d years old, which is %X in hexadecimal",
  'Simon', 33, 33);

如果省略任何参数，你将收到一个解析错误，提示意外遇到右括号 ) 或参数不足。

更实际的 printf 示例是使用十进制值在 HTML 中设置颜色。例如，假设你想要一个颜色，其中红色为 65、绿色为 127、蓝色为 245，但不想自己将其转换为十六进制。这里有一个简单的解决方案：

printf("<span style='color:#%X%X%X'>Hello</span>", 65, 127, 245);

仔细检查撇号('')之间的颜色规范格式。颜色规范首先是井号 (#)。然后是三个 %X 格式说明符，分别对应你的数字。这个命令的输出如下所示：

<span style='color:#417FF5'>Hello</span>

通常，使用变量或表达式作为 printf 的参数会更方便。例如，如果您将颜色值存储在三个变量 $r、$g 和 $b 中，可以通过以下方式创建更深的颜色：

printf("<span style='color:#%X%X%X'>Hello</span>", $r-20, $g-20, $b-20);

精度设置

不仅可以指定转换类型，还可以设置显示结果的精度。例如，通常货币金额只显示两位小数。但是，在计算后，值可能具有更高的精度，例如 123.42 / 12，得到 10.285. 为确保这些值在内部正确存储但仅显示两位小数，可以在 % 符号和转换说明符之间插入字符串 ".2"：

printf("The result is: $%.2f", 123.42 / 12);

此命令的输出如下：

The result is $10.29

实际上，你拥有比这更多的控制权，因为你还可以指定输出是用零还是空格填充，通过在转换说明符前面加上特定的值。示例 7-1 展示了四种可能的组合。

示例 7-1. 精度设置

<?php
  echo "<pre>"; // Enables viewing of the spaces

  // Pad to 15 spaces
  printf("The result is $%15f\n", 123.42 / 12);

  // Pad to 15 spaces, fill with zeros
  printf("The result is $%015f\n", 123.42 / 12);

  // Pad to 15 spaces, 2 decimal places precision
  printf("The result is $%15.2f\n", 123.42 / 12);

  // Pad to 15 spaces, 2 decimal places precision, fill with zeros
  printf("The result is $%015.2f\n", 123.42 / 12);

  // Pad to 15 spaces, 2 decimal places precision, fill with # symbol
  printf("The result is $%'#15.2f\n", 123.42 / 12);
?>

此示例的输出如下：

The result is $      10.285000
The result is $00000010.285000
The result is $          10.29
The result is $000000000010.29
The result is $##########10.29

它的工作方式很简单，如果你从右到左看（见 表 7-2）。请注意：

• 最右边的字符是转换说明符：在本例中为浮点数 f。

• 如果在转换说明符之前有一个句点和一个数字在一起，则输出的精度被指定为该数字的值。

• 无论是否有精度说明符，如果有数字，则表示输出应填充到该字符数。在前面的示例中，这是 15 个字符。如果输出已等于或大于填充长度，则忽略此参数。

• 在 % 符号之后允许的最左边的参数是 0，除非设置了填充值，否则会被忽略，如果需要的是除零或空格之外的填充字符，则可以使用任意你选择的一个，并在其前面加上一个单引号，例如 '#。

• 左边是 % 符号，表示开始转换。

表 7-2. 转换说明符组件

开始转换	填充字符	填充字符数	显示精度	转换说明符	示例
%		15		f	10.285000
%	0	15	.2	f	000000000010.29
%	'#	15	.4	f	########10.2850

字符串填充

您还可以像处理数字一样，将字符串填充到所需的长度，选择不同的填充字符，甚至可以选择左对齐或右对齐。示例 7-2 展示了各种示例。

示例 7-2. 字符串填充

<?php
  echo "<pre>"; // Enables viewing of the spaces

  $h = 'Rasmus';

  printf("[%s]\n",         $h); // Standard string output
  printf("[%12s]\n",       $h); // Right justify with spaces to width 12
  printf("[%-12s]\n",      $h); // Left justify with spaces
  printf("[%012s]\n",      $h); // Pad with zeros
  printf("[%'#12s]\n\n",   $h); // Use the custom padding character '#'

  $d = 'Rasmus Lerdorf';        // The original creator of PHP

  printf("[%12.8s]\n",     $d); // Right justify, cutoff of 8 characters
  printf("[%-12.12s]\n",   $d); // Left justify, cutoff of 12 characters
  printf("[%-'@12.10s]\n", $d); // Left justify, pad with '@', cutoff 10 chars
?>

请注意，在 Web 页面布局方面，我使用了 <pre> HTML 标签来保留所有空格和每行后的 \n 换行字符。该示例的输出如下所示：

[Rasmus]
[      Rasmus]
[Rasmus      ]
[000000Rasmus]
[######Rasmus]

[    Rasmus L]
[Rasmus Lerdo]
[Rasmus Ler@@]

当您指定填充值时，长度等于或大于该值的字符串将被忽略，除非提供了截断值，将字符串缩短至小于填充值。

表 7-3 显示了可用于字符串转换说明符的组件。

表 7-3. 字符串转换说明符组件

开始转换	左/右对齐	填充字符	填充字符数	截断	转换说明符	示例（使用“Rasmus”）
%					s	[Rasmus]
%	-		10		s	[Rasmus ]
%		'#	8	.4	s	[####Rasm]

使用 sprintf

通常情况下，您不希望输出转换的结果，但需要将其用于代码中的其他地方。这就是 sprintf 函数的用武之地。使用它，您可以将输出发送到另一个变量，而不是直接发送到浏览器。

您可以使用它进行转换，就像以下示例中为 RGB 颜色组 65, 127, 245 返回十六进制字符串值 $hexstring 一样：

$hexstring = sprintf("%X%X%X", 65, 127, 245);

或者您可能希望将输出存储在变量中以供其他用途或显示：

$out = sprintf("The result is: $%.2f", 123.42 / 12);
echo $out;

日期和时间函数

PHP 使用标准的 Unix 时间戳来跟踪日期和时间，即从 1970 年 1 月 1 日开始的秒数。要确定当前时间戳，可以使用 time 函数：

echo time();

因为值以秒为单位存储，要获得下周此时刻的时间戳，您可以使用以下方法，将 7 天× 24 小时× 60 分钟× 60 秒添加到返回值中：

echo time() + 7 * 24 * 60 * 60;

如果您希望为给定日期创建时间戳，可以使用 mktime 函数。对于 2022 年 12 月 1 日的第一秒的时间戳是 1669852800：

echo mktime(0, 0, 0, 12, 1, 2022);

传递的参数从左到右依次为：

• 小时数（0–23）

• 分钟数（0–59）

• 秒数（0–59）

• 月份数（1–12）

• 日数（1–31）

• 年份（1970–2038，或者在 32 位有符号系统上的 PHP 5.1.0+中为 1901–2038）

注意

您可能会问为什么要将年份限制在 1970 到 2038 年之间。这是因为 Unix 的原始开发者选择了 1970 年作为基准日期，没有程序员需要在此之前使用！

幸运的是，从版本 5.1.0 开始，PHP 支持使用有符号 32 位整数的系统进行时间戳，支持 1901 年到 2038 年的日期。然而，这引入了一个比原问题更严重的问题，因为 Unix 的设计者还决定，在大约 70 年后没有人会继续使用 Unix，因此他们认为可以用 32 位值存储时间戳，而这将在 2038 年 1 月 19 日耗尽！

这将产生所谓的 Y2K38 问题（类似于千年虫问题，由于将年份存储为两位数值引起，也必须解决）。PHP 在 5.2 版本中引入了DateTime类以解决这个问题，但仅适用于 64 位架构，这在今天的大多数计算机上都是（但使用前请检查）。

要显示日期，请使用date函数，它支持众多格式选项，使您能够按任意方式显示日期。格式如下：

date($format, $timestamp);

参数$format应为包含格式说明符的字符串，如表 7-4 所详述，并且$timestamp应为 Unix 时间戳。有关所有说明符的完整列表，请参阅文档。以下命令将以格式"Monday February 17th, 2025 - 1:38pm"输出当前日期和时间：

echo date("l F jS, Y - g:ia", time());

Table 7-4. 主要日期函数格式说明符

格式	描述	返回值
日期说明符
d	日期，两位数，前导零	01 到 31
D	星期几，三个字母	Mon 到 Sun
j	日期，无前导零	1 到 31
l	星期几，全称	Sunday 到 Saturday
N	星期几，数字形式，星期一至星期日	1 到 7
S	日期后缀（与j说明符一起使用）	st、nd、rd 或 th
w	星期几，数字形式，星期日至星期六	0 到 6
z	年内的第几天	0 到 365
周说明符
W	年的周数	01 到 52
月份说明符
F	月份名称	January 到 December
m	月份，带前导零	01 到 12
M	月份名称，三个字母	Jan 到 Dec
n	月份，无前导零	1 到 12
t	给定月份的天数	28 到 31
年份说明符
L	闰年	1 = 是，0 = 否
y	年份，2 位数	00 到 99
Y	年份，4 位数	0000 到 9999
时间格式说明符
a	上午或下午，小写	am 或 pm
A	上午或下午，大写	AM 或 PM
g	小时，12 小时制，无前导零	1 到 12
G	小时，24 小时制，无前导零	0 到 23
h	小时，12 小时制，前导零	01 到 12
H	小时，24 小时制，前导零	00 到 23
i	分钟，前导零	00 到 59
s	秒，前导零	00 到 59

日期常量

有许多有用的常量可以与 date 命令一起使用，以返回特定格式的日期。例如，date(DATE_RSS) 返回符合 RSS 订阅格式的当前日期和时间。一些常用的常量如下：

DATE_ATOM

这是 Atom 订阅的格式。PHP 的格式是"Y-m-d\TH:i:sP"，示例输出是"2025-05-15T12:00:00+00:00"。

DATE_COOKIE

这是从 Web 服务器或 JavaScript 设置的 cookie 的格式。PHP 的格式是"l, d-M-y H:i:s T"，示例输出是"Thursday, 15-May-25 12:00:00 UTC"。

DATE_RSS

这是用于 RSS 订阅的格式。PHP 的格式是"D, d M Y H:i:s O"，示例输出是"Thu, 15 May 2025 12:00:00 UTC"。

DATE_W3C

这是用于万维网联盟的格式。PHP 的格式是"Y-m-d\TH:i:sP"，示例输出是"2025-05-15T12:00:00+00:00"。

可以在文档中找到完整的列表。

使用 checkdate

您已经看到如何以多种格式显示有效日期。但是如何检查用户是否向程序提交了有效日期？答案是将月、日和年传递给 checkdate 函数，如果日期有效则返回TRUE，否则返回FALSE。

例如，如果输入任意年份的 9 月 31 日，将始终是一个无效日期。示例 7-3 显示了您可以用于此目的的代码。目前，它会发现给定日期无效。

示例 7-3. 检查日期的有效性

<?php
  $month = 9;    // September (only has 30 days)
  $day   = 31;   // 31st
  $year  = 2025; // 2025

  if (checkdate($month, $day, $year)) echo "Date is valid";
  else echo "Date is invalid";
?>

文件处理

尽管 MySQL 强大，但并非在 Web 服务器上存储所有数据的唯一（或者说是最佳）方法。有时，直接访问硬盘上的文件可能更快、更便捷。这种情况包括修改用户上传头像或处理日志文件。

不过，首先要注意文件命名：如果您在编写可能在不同 PHP 安装中使用的代码，就无法确定这些系统是否区分大小写。例如，Windows 和 macOS 的文件名不区分大小写，但 Linux 和 Unix 的文件名区分大小写。因此，您应始终假定系统区分大小写，并坚持使用全小写文件名等约定。

检查文件是否存在

要确定文件是否已存在，可以使用 file_exists 函数。该函数返回TRUE或FALSE，用法如下：

if (file_exists("testfile.txt")) echo "File exists";

创建文件

此时，testfile.txt 不存在，让我们创建它并向其中写入几行内容。键入 示例 7-4 并将其保存为 testfile.php。

示例 7-4. 创建一个简单的文本文件

<?php // testfile.php
  $fh = fopen("testfile.txt", 'w') or die("Failed to create file");

  $text = <<<_END
Line 1
Line 2
Line 3
_END;

  fwrite($fh, $text) or die("Could not write to file");
  fclose($fh);
  echo "File 'testfile.txt' written successfully";
?>

如果程序调用die函数，打开的文件将作为终止程序的一部分自动关闭。

当你在浏览器中运行这个程序时，如果一切顺利，你将会收到消息File 'testfile.txt' written successfully。如果你收到错误消息，可能是你的硬盘已满，或者更可能的是你没有权限创建或写入文件，这时你应该根据你的操作系统修改目标文件夹的属性。否则，文件testfile.txt现在应该存储在你保存testfile.php程序的相同文件夹中。尝试用文本编辑器或程序打开文件——内容将会像这样：

Line 1
Line 2
Line 3

这个简单的例子展示了所有文件处理所需的顺序：

1. 总是通过调用fopen来开始打开文件。通过调用fopen函数来实现这一点。

2. 然后你可以调用其他函数；这里我们向文件写入（fwrite），但你也可以从现有文件中读取（fread或fgets）以及执行其他操作。

3. 最后通过关闭文件(fclose)来完成。尽管程序在结束时会自动关闭文件，但在你完成后手动关闭文件也是必要的。

每个打开的文件都需要一个文件资源，以便 PHP 可以访问和管理它。前面的例子将变量$fh（我选择用来表示文件句柄的变量名）设置为fopen函数返回的值。此后，每个访问已打开文件的文件处理函数，如fwrite或fclose，都必须将$fh作为参数传递，以标识正在访问的文件。不用担心$fh变量的内容；它是 PHP 用来引用有关文件的内部信息的数字——你只需将该变量传递给其他函数。

失败时，fopen会返回FALSE。前面的例子展示了捕获并响应失败的简单方法：调用die函数来结束程序并向用户显示错误消息。Web 应用程序绝不会以这种粗暴的方式中止（你应该创建一个带有错误消息的网页），但这对于我们的测试目的来说是可以接受的。

注意fopen调用的第二个参数。它只是字符w，告诉函数以写入模式打开文件。如果文件不存在，函数会创建该文件。在使用这些函数时要小心：如果文件已经存在，w模式参数会导致fopen调用删除旧内容（即使你没有写入任何新内容！）。

在这里可以使用几种不同的模式参数，详细说明见表 7-5。包含+符号的模式在“更新文件”部分有进一步解释。

表 7-5. 支持的fopen模式

模式	动作	描述
'r'	从文件开头读取	只读模式打开；将文件指针放在文件开头。如果文件不存在，则返回FALSE。
---	---	---
'r+'	从文件开头读取并允许写入	可读写打开；将文件指针放在文件开头。如果文件不存在，则返回FALSE。
---	---	---
'w'	从文件开头写入并截断文件	只写打开；将文件指针放在文件开头并截断文件为零长度。如果文件不存在，则尝试创建。
---	---	---
'w+'	从文件开头写入、截断文件并允许读取	可读写打开；将文件指针放在文件开头并截断文件为零长度。如果文件不存在，则尝试创建。
---	---	---
'a'	追加到文件末尾	只写打开；将文件指针放在文件末尾。如果文件不存在，则尝试创建。
---	---	---
'a+'	追加到文件末尾并允许读取	可读写打开；将文件指针放在文件末尾。如果文件不存在，则尝试创建。
---	---	---

从文件中读取

从文本文件中读取的最简单方法是通过fgets获取整行（最后的s可以理解为string），如示例 7-5。

示例 7-5. 使用fgets读取文件

<?php
  $fh = fopen("testfile.txt", 'r') or
    die("File does not exist or you lack permission to open it");

  $line = fgets($fh);
  fclose($fh);
  echo $line;
?>

如果你按照示例 7-4 创建文件，你会得到第一行：

Line 1

你可以通过fread函数检索多行或行的部分，如示例 7-6。

示例 7-6. 使用fread读取文件

<?php
  $fh = fopen("testfile.txt", 'r') or
    die("File does not exist or you lack permission to open it");

  $text = fread($fh, 3);
  fclose($fh);
  echo $text;
?>

我在fread调用中请求了三个字符，因此程序显示如下内容：

Lin

fread函数通常用于二进制数据。如果在跨越多行的文本数据上使用它，请记得计算换行符。

复制文件

让我们尝试 PHP copy 函数来创建testfile.txt的克隆。将其保存为copyfile.php，然后在浏览器中调用该程序，如示例 7-7。

示例 7-7. 复制文件

<?php // copyfile.php
  copy('testfile.txt', 'testfile2.txt') or die("Could not copy file");
  echo "File successfully copied to 'testfile2.txt'";
?>

如果再次检查你的文件夹，你会看到现在有了新文件testfile2.txt。顺便说一句，如果不希望程序在复制失败时退出，你可以尝试示例 7-8 中的替代语法。它使用!（NOT）运算符作为一个快捷简便的缩写。放在表达式前面，它会对其应用NOT运算符，所以这里的等效语句在英语中会以“如果无法复制...”开头。

示例 7-8. 复制文件的替代语法

<?php // copyfile2.php
  if (!copy('testfile.txt', 'testfile2.txt')) echo "Could not copy file";
  else echo "File successfully copied to 'testfile2.txt'";
?>

移动文件

要移动文件，请使用rename函数重命名，如示例 7-9。

示例 7-9. 移动文件

<?php // movefile.php
  if (!rename('testfile2.txt', 'testfile2.new'))
    echo "Could not rename file";
  else echo "File successfully renamed to 'testfile2.new'";
?>

你也可以在目录上使用rename函数。为了避免在原始文件不存在时出现任何警告消息，可以先调用file_exists函数进行检查。

删除文件

删除文件只需使用unlink函数从文件系统中删除，如示例 7-10 中所示。

示例 7-10. 删除文件

<?php // deletefile.php
  if (!unlink('testfile2.new')) echo "Could not delete file";
  else echo "File 'testfile2.new' successfully deleted";
?>

警告

每当直接访问硬盘上的文件时，您必须始终确保文件系统不会被破坏。例如，如果根据用户输入删除文件，则必须确保它是可以安全删除的文件，并且用户被允许删除它。

与移动文件一样，如果文件不存在，将显示警告消息，您可以通过首先使用file_exists检查其是否存在，然后再调用unlink来避免这种情况。

更新文件

通常，您可能希望向已保存的文件添加更多数据，有多种方法可以实现。您可以使用追加写模式之一（参见表 7-5），或者您可以简单地使用支持写入的其他模式之一打开文件进行读写，并将文件指针移动到希望写入或读取的文件中的正确位置。

文件指针是文件中下一个文件访问将发生的位置，无论是读取还是写入。它与文件句柄（在示例 7-4 中存储在变量$fh中）不同，后者包含有关正在访问的文件的详细信息。

您可以通过输入示例 7-11 并将其保存为update.php来查看其操作。然后在浏览器中调用它。

示例 7-11. 更新文件

<?php // update.php
  $fh   = fopen("testfile.txt", 'r+') or die("Failed to open file");
  $text = fgets($fh);

  fseek($fh, 0, SEEK_END);
  fwrite($fh, "\n$text") or die("Could not write to file");
  fclose($fh);

  echo "File 'testfile.txt' successfully updated";
?>

此程序通过使用'r+'设置模式同时打开testfile.txt进行读取和写入，将文件指针置于开头。然后使用fgets函数从文件中读取一行（直到第一个换行符）。之后，调用fseek函数将文件指针直接移动到文件末尾，在此时，从文件开头提取的文本行（存储在$text中）将以\n换行符开头附加到文件末尾，然后关闭文件。结果文件现在如下所示：

Line 1
Line 2
Line 3
Line 1

第一行已成功复制并附加到文件的末尾。

此处使用的$fh文件句柄外，还向fseek函数传递了另外两个参数，0和SEEK_END。SEEK_END告诉函数将文件指针移动到文件末尾，0告诉它从那一点开始向后移动多少位置。在示例 7-11 的情况下，使用0是因为需要保持指针在文件的末尾。

fseek函数还有两个其他的寻址选项：SEEK_SET和SEEK_CUR。SEEK_SET选项告诉函数将文件指针设置为前面参数给出的确切位置。因此，以下示例将文件指针移动到位置 18：

fseek($fh, 18, SEEK_SET);

SEEK_CUR将文件指针设置为当前位置加上给定偏移量的值。因此，如果文件指针当前位于位置 18，则以下调用将其移动到位置 23：

fseek($fh, 5, SEEK_CUR);

为多次访问锁定文件

Web 程序经常被许多用户同时调用。如果多个人尝试同时写入文件，可能会导致文件损坏。如果一个人在读取文件时另一个人在写入它，文件是没问题的，但读取它的人可能会得到奇怪的结果。为了处理同时使用者，你必须使用文件锁定flock函数。这个函数将所有其他访问文件的请求排队，直到你的程序释放锁。因此，每当你的程序对可能被多个用户同时访问的文件执行写入访问时，你还应该为它们添加文件锁定，如示例 7-12 中所示，这是示例 7-11 的更新版本。

示例 7-12. 使用文件锁更新文件

<?php
  $fh   = fopen("testfile.txt", 'r+') or die("Failed to open file");
  $text = fgets($fh);

  if (flock($fh, LOCK_EX))
  {
    fseek($fh, 0, SEEK_END);
    fwrite($fh, "$text") or die("Could not write to file");
    flock($fh, LOCK_UN);
  }

  fclose($fh);
  echo "File 'testfile.txt' successfully updated";
?>

对于文件锁定有一个技巧，以保持网站访问者最佳的响应时间：在对文件进行更改之前直接执行锁定操作，然后立即解锁。将文件锁定时间超过此时间将不必要地减慢应用程序。这就是为什么在示例 7-12 中的flock调用直接在fwrite调用之前和之后的原因。

第一次调用flock使用LOCK_EX参数在由$fh引用的文件上设置独占文件锁：

flock($fh, LOCK_EX);

从此时起，直到使用LOCK_UN参数释放锁为止，没有其他进程可以写入（甚至读取）该文件，如下所示：

flock($fh, LOCK_UN);

一旦释放锁定，其他进程就可以再次访问文件。这也是为什么每次需要读取或写入数据时都应重新定位到文件中希望访问的位置的原因之一——另一个进程可能在上次访问后更改了文件。

但是，你是否注意到请求独占锁的调用嵌套在一个if语句中？这是因为并非所有系统都支持flock；因此，明智的做法是检查是否成功获取了锁，以防无法获取锁。

另一件你必须考虑的事情是，flock被称为建议性锁定。这意味着它只锁定调用该函数的其他进程。如果你有任何直接修改文件而没有实现flock文件锁定的代码，它将始终覆盖锁定，并可能对你的文件造成严重破坏。

顺便说一句，实现文件锁定然后意外地在某个代码部分中留下它可能会导致一个极其难以定位的错误。

警告

flock 在 NFS 和许多其他网络文件系统上无法工作。 此外，当使用像 ISAPI 这样的多线程服务器时，您可能无法依赖 flock 来保护文件免受同一服务器实例的并行线程中运行的其他 PHP 脚本的影响。 另外，flock 不支持使用旧的 FAT 文件系统的任何系统，例如较旧版本的 Windows，尽管您不太可能遇到这些系统（希望如此）。

如果不确定，可以尝试在程序开始时快速锁定一个测试文件，看看是否可以锁定该文件。 检查后不要忘记解锁它（如果不需要，可能还要删除它）。

还要记住，任何对 die 函数的调用都会自动解锁锁定并关闭文件，作为结束程序的一部分。

读取整个文件

一个方便的函数用于读取整个文件，而无需使用文件句柄是 file_get_contents。 它非常容易使用，就像您可以在 Example 7-13 中看到的那样。

Example 7-13. 使用 file_get_contents

<?php
  echo "<pre>";  // Enables display of line feeds
  echo file_get_contents("testfile.txt");
  echo "</pre>"; // Terminates <pre> tag
?>

但是这个函数实际上比这更有用，因为您还可以使用它从 Internet 上的服务器获取文件，就像 Example 7-14 中请求 O’Reilly 主页的 HTML 并将其显示为用户已经浏览到页面本身一样。 结果类似于 Figure 7-1。

Example 7-14. 抓取 O’Reilly 主页

<?php
  echo file_get_contents("http://oreilly.com");
?>

Figure 7-1. 使用 file_get_contents 抓取的 O’Reilly 主页

文件上传

将文件上传到 Web 服务器是许多人看起来令人生畏的主题，但实际上却没有那么困难。 要从表单中上传文件，您需要选择一种特殊的编码类型称为 multipart/form-data，您的浏览器会处理其余部分。 要查看其工作原理，请输入 Example 7-15 中的程序并将其保存为 upload.php。 运行时，您将在浏览器中看到一个表单，让您上传您选择的文件。

Example 7-15. 图像上传程序 upload.php

<?php // upload.php
  echo <<<_END
 <html><head><title>PHP Form Upload</title></head><body>
 <form method='post' action='upload.php' enctype='multipart/form-data'>
 Select File: <input type='file' name='filename' size='10'>
 <input type='submit' value='Upload'>
 </form>
_END;

  if ($_FILES)
  {
    $name = $_FILES['filename']['name'];
    move_uploaded_file($_FILES['filename']['tmp_name'], $name);
    echo "Uploaded image '$name'<br><img src='$name'>";
  }

  echo "</body></html>";
?>

让我们逐段检查这个程序。 多行 echo 语句的第一行开始一个 HTML 文档，显示标题，然后开始文档的主体。

接下来我们来到表单，它选择表单提交的 POST 方法，将发布数据的目标设置为程序 upload.php（程序本身），并告诉 Web 浏览器应使用 multipart/form-data 的内容类型来编码发布的数据，这是文件上传的 MIME 类型。

设置好表单后，下一行显示提示 Select File:，然后请求两个输入。 第一个请求是文件，它使用 file 类型的输入，名称为 filename，并且输入字段宽度为 10 个字符。 第二个请求的输入只是一个提交按钮，标签为 Upload（取代默认的提交按钮文本 Submit Query）。 然后关闭表单。

这个简短的程序展示了 Web 编程中的一个常见技术，即一个程序被调用两次：用户首次访问页面时和用户点击提交按钮时。

接收上传数据的 PHP 代码非常简单，因为所有上传的文件都放置在关联数组$_FILES中。因此，仅需快速检查$_FILES是否包含任何内容即可确定用户是否已上传文件。这通过语句if ($_FILES)完成。

用户首次访问页面时，在上传文件之前，$_FILES是空的，所以程序会跳过此代码块。当用户上传文件时，程序再次运行，并在$_FILES数组中发现一个元素。

一旦程序意识到文件已上传，就会从 PHP 存储它的临时位置检索并将实际名称读取到变量$name中。现在只需要使用move_uploaded_file函数将上传的文件从 PHP 存储的临时位置移动到更永久的位置即可。我们通过将文件的原始名称传递给它来执行此操作，文件将保存到当前目录中。

最后，上传的图像将显示在一个IMG标签中，结果应该看起来像图 7-2。

警告

如果运行此程序并收到类似move_uploaded_file函数调用时Permission denied的警告消息，那么您可能没有为程序运行的文件夹设置正确的权限。

图 7-2. 以表单数据形式上传图像

使用 $_FILES

当上传文件时，$_FILES 数组中存储了五个东西，如表 7-6 所示（其中file是提交表单提供的文件上传字段名）。

表 7-6. $_FILES数组的内容

数组元素	内容
$_FILES['*file*']['*name*']	上传文件的名称（例如，smiley.jpg）
$_FILES['*file*']['*type*']	文件的内容类型（例如，image/jpeg）
$_FILES['*file*']['*size*']	文件的字节大小
$_FILES['*file*']['*tmp_name*']	服务器上存储的临时文件名
$_FILES['*file*']['*error*']	文件上传引起的错误代码

以前称为MIME（多用途互联网邮件扩展）类型的内容类型，但由于它们后来的使用扩展到整个互联网，现在通常称为互联网媒体类型。表 7-7 展示了在$_FILES['file']['type']中经常出现的一些类型。

表 7-7. 一些常见的互联网媒体内容类型

application/pdf	image/gif	multipart/form-data	text/xml
application/zip	image/jpeg	text/css	video/mpeg
audio/mpeg	image/png	text/html	video/mp4
audio/x-wav	application/json	text/plain	audio/webm

验证

我希望现在毋庸置疑（尽管我还是会这么说），表单数据验证是非常重要的，因为用户可能试图入侵你的服务器。

除了恶意构造的输入数据之外，你还需要检查一些其他事情，例如是否实际接收到了文件，以及如果有的话，是否发送了正确类型的数据。

考虑到所有这些因素，示例 7-16，upload2.php，是upload.php的更安全的重写。

示例 7-16. upload.php的更安全版本

<?php // upload2.php
  echo <<<_END
 <html><head><title>PHP Form Upload</title></head><body>
 <form method='post' action='upload2.php' enctype='multipart/form-data'>
 Select a JPG, GIF, PNG or TIF File:
 <input type='file' name='filename' size='10'>
 <input type='submit' value='Upload'></form>
 _END;

  if ($_FILES)
  {
    $name = $_FILES['filename']['name'];

    switch($_FILES['filename']['type'])
    {
      case 'image/jpeg': $ext = 'jpg'; break;
      case 'image/gif':  $ext = 'gif'; break;
      case 'image/png':  $ext = 'png'; break;
      case 'image/tiff': $ext = 'tif'; break;
      default:           $ext = '';    break;
    }
    if ($ext)
    {
      $n = "image.$ext";
      move_uploaded_file($_FILES['filename']['tmp_name'], $n);
      echo "Uploaded image '$name' as '$n':<br>";
      echo "<img src='$n'>";
    }
    else echo "'$name' is not an accepted image file";
  }
  else echo "No image has been uploaded";

  echo "</body></html>";
?>

非 HTML 代码部分从示例 7-15 的半打行扩展到超过 20 行，从if ($_FILES)开始。

就像之前的版本一样，这个if行检查是否实际上有任何数据被发布，但是现在在程序底部附近有一个匹配的else，当没有上传任何内容时向屏幕输出一条消息。

在if语句内部，变量$name被赋予从上传计算机检索到的文件名的值（就像以前一样），但是这一次我们不依赖于用户发送给我们有效数据。相反，switch语句根据此程序支持的四种图像类型检查上传的内容类型。如果找到匹配项，则变量$ext设置为该类型的三字母文件扩展名。如果没有找到匹配项，则上传的文件不属于接受的类型，变量$ext设置为空字符串""。

注意

在这个例子中，文件类型仍然来自浏览器，并且可以被上传文件的用户修改或更改。在这种情况下，此类用户操作并不令人担忧，因为这些文件只被视为图像。但是，如果文件可能是可执行的，你不应依赖于你未确认绝对正确的信息。

代码的下一部分然后检查变量$ext是否包含一个字符串，并且如果是这样的话，创建一个新的文件名叫做$n，基本名称为image，扩展名存储在$ext中。这意味着程序对要创建的文件类型有完全的控制，因为它只能是其中之一：image.jpg、image.gif、image.png或image.tif。

有了程序未被破坏的保证，PHP 代码的其余部分与之前的版本大致相同。它将上传的临时图像移动到新位置，然后显示它，同时显示旧图像和新图像的名称。

注意

不用担心必须删除 PHP 在上传过程中创建的临时文件，因为如果文件没有被移动或重命名，当程序退出时它会自动删除。

在if语句之后，有一个匹配的else语句，只有在上传了不受支持的图像类型时才会执行（此时显示适当的错误消息）。

当编写自己的文件上传例程时，我强烈建议您使用类似的方法，并为上传的文件预先选择名称和位置。这样，无法通过您使用的变量尝试添加路径名和其他恶意数据。如果这意味着多个用户可能使用相同的名称上传文件，则可以在这些文件前加上其用户的用户名前缀，或将它们保存到为每个用户单独创建的文件夹中。

但是，如果您必须使用提供的文件名，您应该通过允许仅包含字母数字字符和句点的方式进行清理，可以使用以下命令使用正则表达式（参见第十八章）对$name进行搜索和替换：

$name = preg_replace("/[^A-Za-z0-9.]/", "", $name);

这样，字符串$name中仅留下 A-Z、a-z、0-9 和句点，并删除所有其他内容。

更好的是，为了确保您的程序在所有系统上都能正常工作，无论它们是区分大小写还是不区分大小写，您可能应该改用以下命令，同时将所有大写字母改为小写字母：

$name = strtolower(preg_replace("[^A-Za-z0-9.]", "", $name));

注意

有时您可能会遇到image/pjpeg的媒体类型，表示渐进式 JPEG，但您可以安全地将其添加到代码中作为image/jpeg的别名，如下所示：

case 'image/pjpeg':
case 'image/jpeg': $ext = 'jpg'; break;

系统调用

有时 PHP 可能没有您执行某个操作所需的函数，但运行它的操作系统可能会有。在这种情况下，您可以使用exec系统调用来完成工作。

例如，要快速查看当前目录的内容，您可以使用诸如示例 7-17 的程序。如果您使用的是 Windows 系统，它将直接使用 Windows dir命令运行。在 Linux、Unix 或 macOS 上，请注释或删除第一行，并取消注释第二行以使用ls系统命令。您可能希望键入此程序，将其保存为exec.php，并在浏览器中调用它。

示例 7-17. 执行系统命令

<?php // exec.php
  $cmd = "dir";   // Windows, Mac, Linux
  // $cmd = "ls"; // Linux, Unix & Mac

  exec(escapeshellcmd($cmd), $output, $status);

  if ($status) echo "Exec command failed";
  else
  {
    echo "<pre>";
    foreach($output as $line) echo htmlspecialchars("$line\n");
    echo "</pre>";
  }
?>

调用htmlspecialchars函数用于将系统返回的任何特殊字符转换为 HTML 可以理解和正确显示的字符，整理输出。根据您使用的系统，运行此程序的结果将类似于以下内容（来自 Windows dir命令）：

Volume in drive C is Hard Disk
 Volume Serial Number is DC63-0E29

 Directory of C:\Program Files (x86)\Ampps\www

11/04/2025  11:58    <DIR>          .
11/04/2025  11:58    <DIR>          ..
28/01/2025  16:45    <DIR>          5th_edition_examples
08/01/2025  10:34    <DIR>          cgi-bin
08/01/2025  10:34    <DIR>          error
29/01/2025  16:18            1,150 favicon.ico
              1 File(s)      1,150 bytes
              5 Dir(s)  1,611,387,486,208 bytes free

exec接受三个参数：

• 命令本身（在前一种情况下为$cmd）

• 系统将从命令中获取输出的数组（在前一种情况下为$output）

• 一个变量，用于包含调用的返回状态（在前一种情况下是$status）

如果愿意，可以省略$output和$status参数，但将无法知道调用生成的输出，甚至不知道是否成功完成。

您还应注意escapeshellcmd函数的使用。在发出exec调用时，始终使用此函数是一个好习惯，因为它清理命令字符串，防止执行任意命令，如果您向调用提供用户输入。

警告

共享网络主机通常会禁用系统调用功能，因为它们存在安全风险。如果可能的话，你应该始终尝试在 PHP 内部解决问题，只有在确实必要时才直接访问系统。此外，访问系统相对较慢，如果你的应用程序预计在 Windows 和 Linux/Unix 系统上运行，你需要编写两种实现。

XHTML 还是 HTML5？

因为 XHTML 文档需要良好的格式，你可以使用标准的 XML 解析器解析它们——与 HTML 不同，后者需要宽松的专用 HTML 解析器。因此，XHTML 从未真正流行起来，当制定新标准时，万维网联盟选择支持 HTML5 而不是较新的 XHTML2 标准。

HTML5 同时具有 HTML4 和 XHTML 的一些特性，但使用起来更简单，验证时更宽松。幸运的是，现在你只需要在 HTML5 文档的头部放置一个单一的文档类型声明（而不是之前需要的多种 strict、transitional 和 frameset 类型）：

<!DOCTYPE html>

只需简单的单词html即可告诉浏览器你的网页是为 HTML5 设计的，因为自 2011 年左右，大多数流行浏览器的最新版本都支持大部分 HTML5 规范，所以这种文档类型通常是你唯一需要的，除非你选择支持旧版浏览器。

就 HTML 文档编写而言，Web 开发人员可以安全地忽略旧的 XHTML 文档类型和语法（例如使用<br />而不是更简单的<br>标签）。但如果你发现自己需要支持非常旧的浏览器或依赖于 XHTML 的特殊应用程序，你可以在http://xhtml.com获取更多信息。

问题

1. 哪个printf转换说明符用于显示浮点数？

2. 什么printf语句可用于将输入字符串"Happy Birthday"输出为字符串"**Happy"？

3. 要将printf的输出发送到变量而不是浏览器，你会使用哪个替代函数？

4. 如何为 2025 年 5 月 2 日上午 7:11 创建 Unix 时间戳？

5. 使用fopen以写入和读取模式打开文件，并将文件截断，并将文件指针置于起始位置时，会使用哪种文件访问模式？

6. 删除文件file.txt的 PHP 命令是什么？

7. 哪个 PHP 函数用于一次性从网络上读取整个文件？

8. 哪个 PHP 超全局变量包含有关上传文件的详细信息？

9. 哪个 PHP 函数启用运行系统命令？

10. HTML5 中更倾向于使用以下哪种标签风格：<hr>还是<hr />？

请参阅“第七章答案”，位于附录 A 中，以获取这些问题的答案。

第八章：MySQL 简介

MySQL 已经安装了超过一千万个实例，可能是最流行的用于 Web 服务器的数据库管理系统。在 1990 年代中期开发，现在是一种成熟的技术，支持如今最受欢迎的互联网目的地之一。

其成功之一是与 PHP 一样，它是免费使用的。但它也非常强大且速度异常快。MySQL 也具有高度可扩展性，这意味着它可以随着您的网站增长；最新的基准测试结果可以在线更新。

MySQL 基础知识

数据库是存储在计算机系统中的结构化记录或数据的集合，并以可以快速搜索并能迅速检索信息的方式组织。

MySQL 中的 SQL 代表 Structured Query Language。这种语言基于英语并且也用于其他数据库，如 Oracle 和 Microsoft SQL Server。它旨在通过命令允许从数据库中发出简单请求，例如：

SELECT title FROM publications WHERE author = 'Charles Dickens';

一个 MySQL 数据库包含一个或多个表，每个表包含记录或行。在这些行中有各种列或字段，包含数据本身。表 8-1 展示了一个包含五个出版物的示例数据库，详细说明了作者、标题、类型和出版年份。

表 8-1。简单数据库示例

作者	标题	类型	年份
马克·吐温	汤姆·索亚历险记	小说	1876
简·奥斯汀	傲慢与偏见	小说	1811
查尔斯·达尔文	物种起源	非虚构	1856
查尔斯·狄更斯	古玩店	小说	1841
威廉·莎士比亚	罗密欧与朱丽叶	戏剧	1594

表中的每一行与 MySQL 表中的一行相同，表中的每一列对应 MySQL 中的一列，行内的每个元素与 MySQL 中的字段相同。

为了唯一标识此数据库，我将在接下来的示例中称其为出版物数据库。同时，正如您已经注意到的，所有这些出版物都被认为是文学经典，所以我将称表中保存详细信息的表为经典文学。

数据库术语总结

您现在需要熟悉的主要术语如下：

数据库

包含 MySQL 数据集合的整体容器

表

数据库中存储实际数据的子容器

行

表内的单个记录，可能包含多个字段

列

一行中的字段名称

我应该指出，我并不试图复制关于关系数据库使用的精确术语，而只是提供简单、日常的术语，以帮助您快速掌握基本概念并开始使用数据库。

通过命令行访问 MySQL

有三种主要方式可以与 MySQL 交互：使用命令行、通过诸如 phpMyAdmin 的 Web 界面以及通过 PHP 等编程语言。我们将从第 11 章开始进行这些操作的第三种方法，但现在让我们先看看前两种方法。

启动命令行界面

下面的部分描述了 Windows、macOS 和 Linux 的相关说明。

Windows 用户

如果您按照第 2 章中解释的方式安装了 AMPPS，您将能够从以下目录访问 MySQL 可执行文件：

C:\Program Files\Ampps\mysql\bin

注意

如果您在其他位置安装了 AMPPS，则需要使用该目录，例如 32 位安装的 AMPPS 如下：

C:\Program Files (x86)\Ampps\mysql\bin

默认情况下，初始 MySQL 用户是root，默认密码是mysql。因此，要进入 MySQL 的命令行界面，请选择开始→运行，输入CMD到运行框中，然后按回车。这将调用 Windows 命令提示符。从那里，输入以下内容（根据刚才讨论做出适当更改）：

cd C:\"Program Files\Ampps\mysql\bin"
mysql -u root -pmysql

第一条命令切换到 MySQL 目录，第二条告诉 MySQL 使用用户root和密码mysql登录。您现在已登录到 MySQL，可以开始输入命令了。

如果您使用的是 Windows PowerShell（而不是命令提示符），它不会从当前位置加载命令，因此您必须明确指定要从何处加载程序，这种情况下，您应输入以下内容（注意在mysql命令之前加上前缀 ./）：

cd C:\"Program Files\Ampps\mysql\bin"
./mysql -u root -pmysql

要确保一切都按预期工作，请输入以下内容，结果应类似于图 8-1：

SHOW databases;

图 8-1. 从 Windows 命令提示符访问 MySQL

您现在可以继续下一节，“使用命令行界面”。

macOS 用户

要继续本章，您应按照第 2 章中详细介绍的方式安装 AMPPS。您还应该运行 Web 服务器并启动 MySQL 服务器。

要进入 MySQL 命令行界面，请启动 Terminal 程序（Finder→Utilities 中应该有）。然后调用已安装在目录/Applications/ampps/mysql/bin中的 MySQL 程序。

默认情况下，初始 MySQL 用户是root，密码为mysql。因此，要启动程序，请输入以下内容：

/Applications/ampps/mysql/bin/mysql -u root -pmysql

此命令告诉 MySQL 使用用户root和密码mysql登录。为了验证一切正常，请输入以下内容（应该会得到图 8-2 的结果）：

SHOW databases;

图 8-2. 从 macOS 终端程序访问 MySQL

如果收到类似Can't connect to local MySQL server through socket的错误，请首先按照第二章中描述的步骤启动 MySQL 服务器。

您现在应该准备好进入下一节，“使用命令行界面”。

Linux 用户

在运行类似 Linux 的 Unix 操作系统的系统上，您可能已经安装并运行了 PHP 和 MySQL，并且能够进入下一节的示例（如果没有，则可以按照第二章中的步骤安装 AMPPS）。首先，您应该输入以下内容以登录到您的 MySQL 系统：

mysql -u root -p

这告诉 MySQL 使用用户root登录，并要求输入密码。如果有密码，请输入；否则，只需按回车键即可。

一旦登录成功，请输入以下内容来测试程序——您应该会看到类似图 8-3 的响应：

SHOW databases;

图 8-3. 使用 Linux 访问 MySQL

如果此过程在任何时候失败，请参考第二章确保您已正确安装 MySQL。否则，您现在应该准备好进入下一节，“使用命令行界面”。

远程服务器上的 MySQL

如果您正在访问远程服务器上的 MySQL，它可能是 Linux/FreeBSD/Unix 类型的服务器，您应该通过安全的 SSH 协议连接到它（切勿使用不安全的 Telnet 协议）。一旦连接成功，您可能会发现事情有些不同，这取决于系统管理员如何设置服务器——尤其是如果它是共享主机服务器。因此，您需要确保已获得 MySQL 的访问权限，并且拥有您的用户名和密码。有了这些信息，您可以输入以下内容，其中username是您提供的用户名：

mysql -u *username* -p

提示输入密码。然后，您可以尝试以下命令，这应该会得到类似图 8-3 的结果：

SHOW databases;

可能已经存在其他数据库，而test数据库可能不存在。

还要记住系统管理员对所有事物有最终控制权，您可能会遇到一些意外的设置。例如，您可能会发现需要在创建的所有数据库名称之前加上唯一的标识字符串，以确保您的名称不会与其他用户创建的数据库名称发生冲突。

因此，如果您遇到任何问题，请与系统管理员交谈，他们将会帮助您解决问题。只需告诉系统管理员您需要用户名和密码。您还应该要求能够创建新的数据库或者至少为您创建一个准备好使用的数据库。然后，您可以在该数据库中创建所有需要的表格。

使用命令行界面

从现在开始，无论您使用 Windows、macOS 还是 Linux 直接访问 MySQL，使用的所有命令（以及可能出现的错误）都是相同的。

分号

让我们从基础知识开始。您注意到您键入的SHOW databases;命令末尾的分号（;）了吗？分号由 MySQL 用于分隔或结束命令。如果您忘记输入它，MySQL 将发出提示并等待您输入。所需的分号被纳入语法中，以便您输入多行命令，这可能很方便，因为有些命令变得相当长。它还允许您在每个命令后放置分号，一次输入多个命令。当您按下 Enter（或 Return）键时，解释器会将它们全部接收并按顺序执行。

注意

很常见的是，您会收到 MySQL 提示符而不是您命令的结果；这意味着您忘记了最后的分号。只需输入分号并按 Enter 键，您将得到您想要的结果。

MySQL 可能会向您展示六种不同的提示符（参见表 8-2），因此您始终会知道在多行输入时的位置。

表 8-2. MySQL 的六个命令提示符

MySQL 提示符	意义
mysql>	准备并等待命令
->	等待下一行命令
'>	等待下一行以单引号开头的字符串
">	等待下一行以双引号开头的字符串
`>	等待下一行以反引号开头的字符串
/*>	等待下一行以/*开头的注释

取消命令

如果您在输入命令的过程中决定不执行它，可以输入\c并按回车键。示例 8-1 展示了如何使用该命令。

示例 8-1. 取消输入行

meaningless gibberish to mysql \c

当您键入该行时，MySQL 将忽略您键入的所有内容并发出新的提示符。如果没有\c，它将显示错误消息。但要小心：如果您已打开字符串或注释，请先关闭它，然后再使用\c，否则 MySQL 会认为\c只是字符串的一部分。示例 8-2 展示了正确的做法。

示例 8-2. 从字符串内部取消输入

this is "meaningless gibberish to mysql" \c

还要注意，在分号后使用\c将不会取消之前的命令，因为这是一个新的语句。

MySQL 命令

您已经看到了SHOW命令，它列出了表、数据库和许多其他项目。您最常使用的命令列在表 8-3 中。

表 8-3. 常见的 MySQL 命令

命令	动作
ALTER	修改数据库或表
BACKUP	备份表
\c	取消输入
CREATE	创建数据库
DELETE	从表中删除一行
DESCRIBE	描述表的列
DROP	删除数据库或表
EXIT (Ctrl-C)	退出（某些系统上）
GRANT	更改用户权限
HELP (\h, \?)	显示帮助
INSERT	插入数据
LOCK	锁定表
QUIT `(`\q`)`	同EXIT
RENAME	重命名表
SHOW	列出对象的详细信息
SOURCE	执行文件
STATUS (\s)	显示当前状态
TRUNCATE	清空表
UNLOCK	解锁表
UPDATE	更新现有记录
USE	使用数据库

在我们继续之前，我将涵盖其中大部分内容，但首先，您需要记住 MySQL 命令的几个要点：

• SQL 命令和关键字不区分大小写。CREATE、create和CrEaTe都表示同一意思。然而，为了清晰起见，您可能更喜欢使用大写。

• 在 Linux 和 macOS 上，表名区分大小写，但在 Windows 上不区分大小写。因此，为了可移植性，请始终选择一种大小写风格并坚持使用。推荐的风格是对表名使用小写。

创建数据库

如果您正在远程服务器上工作，并且只有一个用户帐户和访问为您创建的单个数据库，请继续到“创建表”部分（#creating_a_table）。否则，通过执行以下命令来创建一个名为publications的新数据库：

CREATE DATABASE publications;

一条成功的命令将返回一条目前意义不大的消息—Query OK, 1 row affected (0.00 sec)—但很快就会变得合理。现在您已经创建了数据库，想要使用它，请执行以下命令：

USE publications;

您现在应该看到消息Database changed，然后可以继续执行以下示例。

创建用户

现在您已经看到了如何轻松使用 MySQL 并创建了您的第一个数据库，是时候看看如何创建用户了，因为您可能不想将 PHP 脚本授予 MySQL 的 root 访问权限——如果被黑客入侵将会带来真正的麻烦。

要创建用户，请发出CREATE USER命令，其形式如下（不要输入此命令；这不是一个实际的工作命令）：

CREATE USER '*`username`*'@'*`hostname`*' IDENTIFIED BY '*`password`*';
GRANT *`PRIVILEGES`* ON *`database``.``object`* TO '*`username`*'@'*`hostname`*';

这看起来都很简单，可能除了*database.object*部分，它指的是数据库本身及其包含的对象，如表（参见表 8-4）。

表 8-4. GRANT命令的示例参数

参数	意义
*.*	所有数据库及其所有对象
*`database`*.*	仅限名为database的数据库及其所有对象
*`database`*.*`object`*	仅限名为database的数据库及其名为object的对象

所以，让我们创建一个用户，他可以访问新的publications数据库及其所有对象，输入以下命令（用您选择的用户名jim和密码password替换）：

CREATE USER 'jim'@'localhost' IDENTIFIED BY 'password';
GRANT ALL ON publications.* TO 'jim'@'localhost';

这样做的效果是允许用户jim@localhost使用密码password完全访问publications数据库。你可以通过输入quit退出并重新运行 MySQL 来测试此步骤是否有效，但不要像以前那样以 root 身份登录，而是使用你创建的用户名登录（例如，jim）。参见 Table 8-5 获取适合你操作系统的正确命令。如果mysql客户端程序安装在系统的不同目录中，则需要根据需要修改。

表 8-5. 启动 MySQL 并作为 jim@localhost 登录

操作系统	示例命令
Windows	C:\"Program Files\Ampps\mysql\bin\mysql" -u jim -p
macOS	/Applications/ampps/mysql/bin/mysql -u jim -p
Linux	mysql -u jim –p

现在你只需要在提示时输入密码，就可以登录了。

如果你愿意，你可以在-p后立即输入你的密码（无需任何空格），以避免在提示时输入密码，但这被认为是不良实践，因为如果其他人登录到你的系统，可能有方法查看你输入的命令并找出你的密码。

注意

你只能授予你已经拥有的权限，并且你必须有权限执行GRANT命令。如果你不打算授予所有权限，你可以选择授予一系列的权限。有关GRANT命令和一旦授予就可以撤销的REVOKE命令的更多详细信息，请参阅文档。此外，请注意，如果你创建一个新用户但没有指定IDENTIFIED BY子句，该用户将没有密码，这是非常不安全的情况，应该避免。

创建表格

此时，你应该已经登录到 MySQL，为publications数据库（或为你创建的数据库）授予了ALL权限，因此你可以开始创建你的第一个表格了。确保输入以下内容以使用正确的数据库（如果名称不同，请替换publications）：

USE publications;

现在逐行输入 Example 8-3 中的命令。

Example 8-3. 创建名为 classics 的表

CREATE TABLE classics (
 author VARCHAR(128),
 title VARCHAR(128),
 type VARCHAR(16),
 year CHAR(4)) ENGINE InnoDB;

注意

此命令中的最后两个词需要稍作解释。MySQL 可以以多种不同的方式内部处理查询，这些不同的方式由不同的引擎支持。从版本 5.6 开始，InnoDB是 MySQL 的默认存储引擎，我们在这里使用它是因为它支持FULLTEXT搜索。只要你有一个相对最新的 MySQL 版本，你可以在创建表时省略命令中的ENGINE InnoDB部分，但我现在保留它以强调正在使用的引擎。

如果您使用的是 MySQL 5.6 之前的版本，则 InnoDB 引擎不支持FULLTEXT索引，因此您需要在命令中将InnoDB替换为MyISAM以指示您希望使用该引擎（参见“创建 FULLTEXT 索引”）。

InnoDB 通常更高效且是推荐的选项。如果您按照第二章中详细说明的方法安装了 AMPPS 堆栈，则应至少具有 MySQL 的 5.6.35 版本。

注意

您还可以将上一个命令一次性在一行上执行，就像这样：

CREATE TABLE classics (author VARCHAR(128), title
VARCHAR(128), type VARCHAR(16), year CHAR(4)) ENGINE
InnoDB;

但是 MySQL 命令可能会很长和复杂，因此我建议在您熟悉较长命令之前使用示例 8-3 中显示的格式。

然后 MySQL 应显示响应Query OK, 0 rows affected，以及执行命令所花费的时间。如果您看到错误消息，请仔细检查您的语法。每个括号和逗号都很重要，打字错误很容易出现。

要检查新表是否已创建，请输入以下内容：

DESCRIBE classics;

一切顺利的话，您将看到示例 8-4 中显示的一系列命令和响应，特别注意显示的表格式。

示例 8-4. MySQL 会话：创建和检查新表

mysql> USE publications;
Database changed
mysql> CREATE TABLE classics (
    ->  author VARCHAR(128),
    ->  title VARCHAR(128),
    ->  type VARCHAR(16),
    ->  year CHAR(4)) ENGINE InnoDB;
Query OK, 0 rows affected (0.03 sec)

mysql> DESCRIBE classics;
+--------+--------------+------+-----+---------+-------+
| Field  | Type         | Null | Key | Default | Extra |
+--------+--------------+------+-----+---------+-------+
| author | varchar(128) | YES  |     | NULL    |       |
| title  | varchar(128) | YES  |     | NULL    |       |
| type   | varchar(16)  | YES  |     | NULL    |       |
| year   | char(4)      | YES  |     | NULL    |       |
+--------+--------------+------+-----+---------+-------+
4 rows in set (0.00 sec)

当您需要确保已正确创建 MySQL 表时，DESCRIBE命令是一种无价的调试辅助工具。您还可以使用它来回顾表的字段或列名称以及每个字段中的数据类型。让我们详细查看每个标题：

Field

表内每个字段或列的名称

Type

字段中存储的数据类型

Null

字段是否允许包含NULL值

Key

已应用的键的类型（在 MySQL 中，键或索引是快速查找和搜索数据的一种方式）

Default

如果在创建新行时未指定值，则将分配给字段的默认值

Extra

附加信息，例如字段是否设置为自动增量

数据类型

在示例 8-3 中，您可能已经注意到表的三个字段被赋予了VARCHAR数据类型，而一个字段被赋予了CHAR类型。术语VARCHAR代表可变长度字符串，并且该命令接受一个数值，告诉 MySQL 在此字段中存储的字符串的最大长度。

CHAR和VARCHAR都接受文本字符串，并对字段大小施加限制。不同之处在于，CHAR字段中的每个字符串都具有指定的大小。如果插入较小的字符串，它将填充空格。VARCHAR字段不会填充文本；它允许字段的大小根据插入的文本变化。但是，VARCHAR需要一些开销来跟踪每个值的大小。因此，如果所有记录中的大小类似，CHAR稍微更有效率，而如果大小差异很大并且可能很大，则VARCHAR更有效率。此外，这种开销导致对VARCHAR数据的访问比对CHAR数据稍慢。

字符和文本列的另一个特性，对今天的全球网络覆盖非常重要的是字符集。这些为特定字符分配特定的二进制值。你用于英语的字符集显然与用于俄语的不同。你可以在创建字符或文本列时为其指定字符集。

在我们的示例中，VARCHAR非常有用，因为它可以容纳不同长度的作者名和标题，同时帮助 MySQL 规划数据库的大小，并更轻松地执行查找和搜索。只需注意，如果您尝试分配超过允许长度的字符串值，它将被截断为表定义中声明的最大长度。

然而，year字段具有可预测的值，因此我们使用更高效的CHAR(4)数据类型而不是VARCHAR。参数为4允许 4 个字节的数据，支持从–999 到 9999 年的所有年份；一个字节包括 8 位，可以具有 00000000 到 11111111 的值，即 0 到 255 的十进制数值。

当然，你可以只存储两位数值来表示年份，但如果你的数据在下个世纪仍然需要使用，或者可能会发生环绕，那么就需要先进行清理—考虑到可能导致日期从 2000 年 1 月 1 日开始被视为 1900 年的“千年虫”问题，在全球最大的计算机设施中都存在这个问题。

注意

我在classics表中没有使用YEAR数据类型，因为它仅支持 0000 年和 1901 年至 2155 年的年份。这是因为 MySQL 为了效率的原因将年份存储在单个字节中，但这意味着只有 256 年可用，并且classics表中的标题出版年份远在 1901 年之前。

CHAR数据类型

表 8-6 列出了CHAR数据类型。这两种类型都有一个参数，用于设置字段允许的字符串最大（或确切）长度。正如表所示，每种类型都有一个内置的最大字节数。

表 8-6. MySQL 的 CHAR 数据类型

数据类型	使用的字节	示例
CHAR(*`n`*)	精确 n（<= 255）	CHAR(5) “Hello” uses 5 bytes CHAR(57) “Goodbye” uses 57 bytes
VARCHAR(*`n`*)	最多 n (<= 65535)	VARCHAR(7) “Hello” 使用 5 字节 VARCHAR(100) “Goodbye” 使用 7 字节

BINARY 数据类型

BINARY 数据类型（参见 表 8-7）存储没有相关字符集的字节字符串。例如，你可以使用 BINARY 数据类型来存储 GIF 图像。

表 8-7. MySQL 的 BINARY 数据类型

数据类型	使用字节	示例
BINARY(n)	恰好 n (<= 255)	与 CHAR 相似但包含二进制数据
VARBINARY(n)	最多 n (<= 65535)	与 VARCHAR 相似但包含二进制数据

TEXT 数据类型

字符数据也可以存储在一个 TEXT 字段中。这些字段与 VARCHAR 字段之间的差异很小：

• 在版本 5.0.3 之前，MySQL 会从 VARCHAR 字段中删除前导和尾随空格。

• TEXT 字段不能有默认值。

• MySQL 仅索引 TEXT 列的前 n 个字符（创建索引时指定 n）。

这意味着，如果你需要搜索字段的整个内容，VARCHAR 是更好和更快的数据类型。如果你永远不会搜索字段中超过某个前导字符数，那么你可能应该使用 TEXT 数据类型（参见 表 8-8）。

表 8-8. MySQL 的 TEXT 数据类型

数据类型	使用字节	属性
TINYTEXT(*`n`*)	最多 n (<= 255)	被视为带有字符集的字符串
TEXT(*`n`*)	最多 n (<= 65535)	被视为带有字符集的字符串
MEDIUMTEXT(*`n`*)	最多 n (<= 1.67e + 7)	被视为带有字符集的字符串
LONGTEXT(*`n`*)	最多 n (<= 4.29e + 9)	被视为带有字符集的字符串

数据类型的最大值越小，效率也越高；因此，你应该使用你知道对于字段中存储的任何字符串都足够的最小最大值。

BLOB 数据类型

术语 BLOB 代表 二进制大对象，因此，正如你想的那样，BLOB 数据类型对于超过 65,536 字节大小的二进制数据最为有用。BLOB 和 BINARY 数据类型之间的主要区别是 BLOB 不能有默认值。BLOB 数据类型列在 表 8-9 中。

表 8-9. MySQL 的 BLOB 数据类型

数据类型	使用字节	属性
TINYBLOB(*`n`*)	最多 n (<= 255)	被视为二进制数据—无字符集
BLOB(*`n`*)	最多 n (<= 65535)	被视为二进制数据—无字符集
MEDIUMBLOB(*`n`*)	最多 n (<= 1.67e + 7)	被视为二进制数据—无字符集
LONGBLOB(*`n`*)	最多 n (<= 4.29e + 9)	被视为二进制数据—无字符集

数值数据类型

MySQL 支持各种数值数据类型，从单字节到双精度浮点数。尽管数值字段可以使用的最大内存为 8 字节，但建议您选择能够充分处理您期望的最大值的最小数据类型。这有助于保持数据库小并快速访问。

表 8-10 列出了 MySQL 支持的数值数据类型及其可包含的值范围。如果您对术语不熟悉，有符号数的可能范围从负值通过 0 到正值；无符号数的值范围从 0 到正值。它们都可以保存相同数量的值；可以想象有符号数被左移一半，使其一半的值为负数，另一半为正数。请注意，浮点数值（任何精度）可能只是有符号的。

表 8-10. MySQL 的数值数据类型

数据类型	使用字节	最小值	最大值
有符号	无符号	有符号	无符号
---	---	---	---
TINYINT	1	–128	0
SMALLINT	2	–32768	0
MEDIUMINT	3	–8.38e + 6	0
INT / INTEGER	4	–2.15e + 9	0
BIGINT	8	–9.22e + 18	0
FLOAT	4	–3.40e + 38	n/a
DOUBLE / REAL	8	–1.80e + 308	n/a

要指定数据类型是否为无符号，请使用UNSIGNED限定词。以下示例创建了一个名为tablename的表，其中包含一个名为fieldname的UNSIGNED INTEGER数据类型的字段：

CREATE TABLE tablename (fieldname INT UNSIGNED);

在创建数值字段时，您还可以传递一个可选的数字作为参数，如下所示：

CREATE TABLE tablename (fieldname INT(4));

但您必须记住，与BINARY和CHAR数据类型不同，此参数并不表示要使用的存储字节数。这似乎是反直觉的，但该数字实际上表示的是在检索字段中的数据时的显示宽度。它通常与ZEROFILL限定词一起使用，如下所示：

CREATE TABLE tablename (fieldname INT(4) ZEROFILL);

这样做的效果是使任何宽度小于四个字符的数字填充一个或多个零，以使字段的显示宽度为四个字符长度。当字段已经达到或超过指定宽度时，不会进行填充。

日期和时间类型

MySQL 支持的主要剩余数据类型涉及日期和时间，可以在表 8-11 中查看。

表 8-11. MySQL 的DATE和TIME数据类型

数据类型	时间/日期格式
DATETIME	'0000-00-00 00:00:00'
DATE	'0000-00-00'
TIMESTAMP	'0000-00-00 00:00:00'
TIME	'00:00:00'
YEAR	0000（仅年份 0000 和 1901–2155）

DATETIME和TIMESTAMP数据类型显示方式相同。主要区别在于TIMESTAMP具有非常狭窄的范围（从 1970 年到 2037 年），而DATETIME将保存几乎您可能指定的任何日期，除非您对古代历史或科幻感兴趣。

TIMESTAMP很有用，因为你可以让 MySQL 为你设置值。如果在添加行时未指定值，则自动插入当前时间。你还可以让 MySQL 在每次更改行时更新TIMESTAMP列。

自动增量属性

有时您需要确保数据库中每一行都保证是唯一的。您可以通过仔细检查输入的数据并确保至少有一个值在任何两行中不同来在程序中执行此操作，但这种方法容易出错，并且仅在某些情况下有效。例如，在classics表中，作者可能多次出现。同样，出版年份也会频繁重复，等等。很难保证没有重复行。

通用解决方案是专门为此目的使用额外的列。一会儿我们将讨论使用出版物的 ISBN（国际标准书号），但首先我想介绍AUTO_INCREMENT数据类型。

正如其名称所示，赋予此数据类型的列将将其内容的值设置为先前插入行中的列条目值加 1。示例 8-5 显示了如何向表classics添加名为id的新列，该列具有自增功能。

示例 8-5. 添加自增列 id

ALTER TABLE classics ADD id INT UNSIGNED NOT NULL AUTO_INCREMENT KEY;

这是你对ALTER命令的介绍，它与CREATE非常相似。ALTER操作现有表，可以添加、更改或删除列。我们的示例添加了一个名为id的列，具有以下特性：

INT UNSIGNED

使该列采用足够大的整数，以便我们在表中存储超过 40 亿条记录。

NOT NULL

确保每一列都有值。许多程序员在字段中使用NULL来指示其没有任何值。但这样做会允许重复，这将违反该列存在的整体原因，因此我们禁止NULL值。

AUTO_INCREMENT

如前所述，这会导致 MySQL 为每一行的该列设置一个唯一值。我们实际上无法控制该列在每行中将取得的值，但我们并不在乎：我们关心的是我们可以保证一个唯一的值。

KEY

自增列作为键很有用，因为你往往会基于这一列搜索行。这将在“索引”部分进行解释。

每个id列的条目现在都将具有唯一的编号，第一个从 1 开始，其他的依次递增。每次插入新行时，其id列将自动获得序列中的下一个数字。

而不是事后应用列，您可以通过以稍微不同的格式发布CREATE命令来包含它。在这种情况下，示例 8-3 中的命令将替换为示例 8-6。特别要注意最后一行。

示例 8-6. 在表创建时添加自增 id 列

CREATE TABLE classics (
 author VARCHAR(128),
 title VARCHAR(128),
 type VARCHAR(16),
 year CHAR(4),
 id INT UNSIGNED NOT NULL AUTO_INCREMENT KEY) ENGINE InnoDB;

如果您想检查列是否已添加，请使用以下命令查看表的列和数据类型：

DESCRIBE classics;

现在我们已经完成了，id列不再需要了，因此如果您是通过示例 8-5 创建它的，现在应该使用示例 8-7 中的命令来删除该列。

示例 8-7. 删除 id 列

ALTER TABLE classics DROP id;

向表添加数据

要向表中添加数据，请使用INSERT命令。让我们通过使用INSERT命令的一种形式，重复将来自表 8-1 的数据填充到表classics中来看看它的效果（示例 8-8）。

示例 8-8. 填充经典表

INSERT INTO classics(author, title, type, year)
 VALUES('Mark Twain','The Adventures of Tom Sawyer','Fiction','1876');
INSERT INTO classics(author, title, type, year)
 VALUES('Jane Austen','Pride and Prejudice','Fiction','1811');
INSERT INTO classics(author, title, type, year)
 VALUES('Charles Darwin','The Origin of Species','Nonfiction','1856');
INSERT INTO classics(author, title, type, year)
 VALUES('Charles Dickens','The Old Curiosity Shop','Fiction','1841');
INSERT INTO classics(author, title, type, year)
 VALUES('William Shakespeare','Romeo and Juliet','Play','1594');

每输入完两行之后，您应该看到一个Query OK消息。一旦所有行都已输入，请输入以下命令，它将显示表的内容。结果应该类似于图 8-4。

SELECT * FROM classics;

现在暂时不必担心SELECT命令——我们将在“查询 MySQL 数据库”一节中讨论它。简单来说，按照现在的方式输入，它将显示您刚刚输入的所有数据。

如果您看到返回的结果顺序不同也不要担心，这是正常的，因为此时的顺序是未指定的。在本章后面我们将学习如何使用ORDER BY来选择希望结果返回的顺序，但目前它们可能以任何顺序显示。

图 8-4. 填充经典表并查看其内容

让我们回头看看我们如何使用INSERT命令。首先部分INSERT INTO classics告诉 MySQL 在哪里插入以下数据。然后在括号内，列出了四个列名——author、title、type和year——所有列名之间用逗号分隔。这告诉 MySQL 这些是要插入数据的字段。

每个INSERT命令的第二行包含关键字VALUES，后面跟着括号内用逗号分隔的四个字符串。这向 MySQL 提供了要插入到先前指定的四个列中的四个值。（一如既往，我在哪里断行是任意选择的。）

每个数据项将插入到相应的列中，一一对应。如果您意外地按不同于数据的顺序列出列，则数据将进入错误的列中。此外，列的数量必须与数据项的数量匹配。（有更安全的INSERT使用方法，我们很快就会看到。）

重命名表

重命名表，如通过ALTER命令对表的结构或元信息进行的任何其他更改。因此，例如，要将表名classics更改为pre1900，您将使用以下命令：

ALTER TABLE classics RENAME pre1900;

如果您尝试过该命令，则应该通过输入以下内容恢复表名，以便本章后面的示例按照打印的方式运行：

ALTER TABLE pre1900 RENAME classics;

修改列的数据类型

更改列的数据类型还需使用ALTER命令，这次配合MODIFY关键字。要将列year的数据类型从CHAR(4)更改为SMALLINT（仅需要 2 个字节的存储空间，因此可以节省磁盘空间），请输入以下内容：

ALTER TABLE classics MODIFY year SMALLINT;

当您执行此操作时，如果数据类型的转换对 MySQL 有意义，它将自动更改数据并保持含义。在这种情况下，它将每个字符串转换为可比较的整数，只要该字符串可识别为指代整数。

添加新列

假设您已创建了一个表并填充了大量数据，但后来发现需要增加一个额外的列。别担心。以下是如何添加新列pages的方法，用于存储出版物的页数：

ALTER TABLE classics ADD pages SMALLINT UNSIGNED;

使用UNSIGNED SMALLINT数据类型添加名为pages的新列，足以容纳最多 65535 的值——希望这足够存储任何已发表的书籍！

如果您要求 MySQL 使用DESCRIBE命令描述更新后的表，如下所示，您将看到已进行了更改（参见图 8-5）：

DESCRIBE classics;

图 8-5。添加新页面列并查看表

重命名列

再次查看图 8-5，您可能会发现，拥有一个名为type的列很令人困惑，因为这是 MySQL 用来标识数据类型的名称。再次强调——没问题——让我们将其名称更改为category，如下所示：

ALTER TABLE classics CHANGE type category VARCHAR(16);

请注意，在此命令的末尾添加了VARCHAR(16)。这是因为CHANGE关键字要求指定数据类型，即使您不打算更改它，并且在最初创建该列时指定了VARCHAR(16)作为类型。

删除列

实际上，在反思之后，您可能会决定这个特定数据库中的页数列pages并不那么有用，因此下面是如何通过使用DROP关键字删除该列的方法：

ALTER TABLE classics DROP pages;

警告

记住，DROP是不可逆的。您应该始终谨慎使用它，因为如果不小心，它可能会意外删除整个表（甚至整个数据库）！

删除表

删除表确实非常简单。但是，因为我不希望您不得不重新输入classics表的所有数据，让我们快速创建一个新表，验证其存在，然后再删除它。您可以通过键入示例 8-9 中的命令来执行此操作。这四个命令的结果应如图 8-6 所示。

示例 8-9. 创建、查看和删除表

CREATE TABLE disposable(trash INT);
DESCRIBE disposable;
DROP TABLE disposable;
SHOW tables;

图 8-6. 创建、查看和删除表

索引

就目前而言，classics表可以在 MySQL 中无问题地工作和搜索，直到它的行数超过几百行。此时，随着每新增一行，数据库访问速度会变得越来越慢，因为 MySQL 在发出查询时必须搜索每一行。这就像在需要查找某物时搜索图书馆中的每一本书一样。

当然，你不必像这样搜索图书馆，因为它们要么有一个卡片索引系统，要么更可能有自己的数据库。对 MySQL 也是如此，因为通过稍微增加内存和磁盘空间的开销，您可以为 MySQL 创建一个“卡片索引”，用于进行极快的搜索。

创建索引

实现快速搜索的方法是在创建表时或随时以后添加索引。但是，决策并不那么简单。例如，有不同的索引类型，如常规INDEX、PRIMARY KEY或FULLTEXT索引。此外，您必须决定哪些列需要索引，这需要您预测是否会搜索每列的任何数据。索引也可以变得更加复杂，因为您可以将多个列组合到一个索引中。即使在做出了决策后，您仍然可以通过限制要索引的每列的数量来减少索引大小。

如果我们想象一下可能在classics表上进行的搜索，就会发现所有列都可能需要进行搜索。但是，如果在“添加新列”部分创建的pages列没有被删除，那么可能不需要索引，因为大多数人不太可能通过页面数来搜索书籍。不管怎样，继续为每个列添加索引，使用示例 8-10 中的命令。

示例 8-10. 为 classics 表添加索引

ALTER TABLE classics ADD INDEX(author(20));
ALTER TABLE classics ADD INDEX(title(20));
ALTER TABLE classics ADD INDEX(category(4));
ALTER TABLE classics ADD INDEX(year);
DESCRIBE classics;

前两个命令在author和title列上创建索引，将每个索引限制为仅前 20 个字符。例如，当 MySQL 索引以下标题时：

The Adventures of Tom Sawyer

它实际上只会存储索引的前 20 个字符：

The Adventures of To

这样做是为了减小索引的大小并优化数据库访问速度。我选择了 20，因为对于这些列中的大多数字符串来说，这可能足以确保唯一性。如果 MySQL 发现两个内容相同的索引，它将不得不浪费时间访问表本身，并检查索引的列，以找出真正匹配的行。

使用category列，目前只需要第一个字符来识别字符串的唯一性（F 表示 Fiction，N 表示 Nonfiction，P 表示 Play），但我选择了四个字符的索引，以便未来可能共享前三个字符的类别。当您有更完整的类别集时，还可以稍后重新索引此列。最后，我对year列的索引没有设置限制，因为它的长度明确定义为四个字符。

发出这些命令的结果（以及确认它们是否有效的DESCRIBE命令）可以在图 8-7 中看到，该图显示了每列的MUL关键字。此关键字表示该列中可能存在多个值的多次出现，这正是我们想要的，因为作者可能出现多次，同一书名可能由多位作者使用，等等。

图 8-7. 为经典表添加索引

使用 CREATE INDEX

添加索引的另一种方法是使用ALTER TABLE命令。它们是等效的，但CREATE INDEX不能用于创建PRIMARY KEY（参见“主键”一节）。此命令的格式显示在例子 8-11 的第二行中。

例子 8-11. 这两个命令是等效的

ALTER TABLE classics ADD INDEX(author(20));
CREATE INDEX author ON classics (author(20));

在创建表时添加索引

您无需等到创建表后才添加索引。事实上，这样做可能会很耗时，因为向大表添加索引可能需要很长时间。因此，让我们看一下一个命令，它创建了带有索引的classics表。

例子 8-12 是例子 8-3 的重新制作，在这个版本中，索引与表同时创建。请注意，为了融入本章所做的修改，此版本使用了新的列名category代替type，并将year的数据类型设置为SMALLINT，而不是CHAR(4)。如果您想在首先删除当前classics表之前尝试它，请将第 1 行中的classics改为其他名称，如classics1，然后在完成后删除classics1。

例子 8-12. 创建带索引的经典表

CREATE TABLE classics (
 author VARCHAR(128),
 title VARCHAR(128),
 category VARCHAR(16),
 year SMALLINT,
 INDEX(author(20)),
 INDEX(title(20)),
 INDEX(category(4)),
 INDEX(year)) ENGINE InnoDB;

主键

到目前为止，您已经创建了表classics并确保 MySQL 可以通过添加索引快速搜索它，但仍然有一些缺失。表中的所有出版物都可以进行搜索，但没有单个唯一的键用于即时访问行。当我们开始从不同的表中组合数据时，拥有具有唯一值的键的重要性将显现出来。

在“AUTO_INCREMENT 属性”一节中简要介绍了在创建自增列id时主键的概念，该列本可以用作此表的主键。然而，我希望将该任务保留给更合适的列：国际公认的 ISBN。

因此，让我们继续为此键创建一个新的列。请记住，ISBN 号码长度为 13 个字符，您可能认为以下命令将起作用：

ALTER TABLE classics ADD isbn CHAR(13) PRIMARY KEY;

但并非如此。如果您尝试，您将收到类似于Duplicate entry for key 1 的错误。原因是表已经填充了一些数据，并且此命令试图向每一行添加具有值NULL的列，这是不允许的，因为在具有主键索引的任何列中，所有值必须是唯一的。如果表中还没有数据，此命令将正常工作，就像在表创建时添加主键索引一样。

在我们当前的情况下，我们必须稍微狡猾地创建新列，而不添加索引，填充数据，然后使用示例 8-13 中的命令回顾性地添加索引。幸运的是，当前数据集中每年都是唯一的，因此我们可以使用year列来标识每一行进行更新。请注意，此示例使用了UPDATE命令和WHERE关键字，在“查询 MySQL 数据库”一节中有更详细的解释。

示例 8-13. 使用数据填充 isbn 列并使用主键

ALTER TABLE classics ADD isbn CHAR(13);
UPDATE classics SET isbn='9781598184891' WHERE year='1876';
UPDATE classics SET isbn='9780582506206' WHERE year='1811';
UPDATE classics SET isbn='9780517123201' WHERE year='1856';
UPDATE classics SET isbn='9780099533474' WHERE year='1841';
UPDATE classics SET isbn='9780192814968' WHERE year='1594';
ALTER TABLE classics ADD PRIMARY KEY(isbn);
DESCRIBE classics;

输入这些命令后，结果应该如图 8-8 所示。请注意，关键字PRIMARY KEY在ALTER TABLE语法中替代了关键字INDEX（比较示例 8-10 和 8-13）。

图 8-8. 回顾性地向经典表添加主键

当创建classics表时已经创建了主键，您可以使用示例 8-14 中的命令。同样，如果您希望尝试此示例，请在第 1 行中将classics重命名为其他名称，然后删除测试表。

示例 8-14. 创建具有主键的经典表

CREATE TABLE classics (
 author VARCHAR(128),
 title VARCHAR(128),
 category VARCHAR(16),
 year SMALLINT,
 isbn CHAR(13),
 INDEX(author(20)),
 INDEX(title(20)),
 INDEX(category(4)),
 INDEX(year),
 PRIMARY KEY (isbn)) ENGINE InnoDB;

创建 FULLTEXT 索引

不同于常规索引，MySQL 的FULLTEXT允许对整个文本列进行超快速的搜索。它会将每个数据字符串中的每个单词存储在特殊索引中，您可以使用“自然语言”进行搜索，类似于使用搜索引擎。

注意

MySQL 并不严格地存储FULLTEXT索引中的所有单词，因为它有一个内置的停用词列表，包含超过 500 个常见词汇，它们会被忽略，因为它们对搜索并不是非常有用。这些词称为停用词，列表包括the、as、is、of等。该列表有助于 MySQL 在执行FULLTEXT搜索时运行更快，并保持数据库的大小。

以下是关于FULLTEXT索引的一些事项，您应该知道：

• 自 MySQL 5.6 起，InnoDB 表可以使用FULLTEXT索引，但在此之前，FULLTEXT索引只能用于 MyISAM 表。如果需要将表转换为 MyISAM，通常可以使用 MySQL 命令ALTER TABLE tablename ENGINE = MyISAM;。

• 只能为CHAR、VARCHAR和TEXT列创建FULLTEXT索引。

• 在创建表时，可以在CREATE TABLE语句中定义FULLTEXT索引，也可以稍后使用ALTER TABLE（或CREATE INDEX）添加。

• 对于大型数据集，将数据加载到没有FULLTEXT索引的表中，然后再创建索引，速度会快得多。

要创建FULLTEXT索引，请将其应用于一个或多个记录，如示例 8-15 中所示，在classics表中的author和title列对上添加了一个FULLTEXT索引（此索引是额外创建的，并不影响已创建的索引）。

示例 8-15. 在经典表中添加FULLTEXT索引

ALTER TABLE classics ADD FULLTEXT(author,title);

您现在可以在这对列上执行FULLTEXT搜索。如果现在将这些出版物的整篇文章添加到数据库中（尤其是它们已经脱离版权保护期），那么它们将成为完全可搜索的。查看“MATCH...AGAINST”一节，了解使用FULLTEXT进行搜索的描述。

注意

如果发现 MySQL 在访问数据库时运行速度比预期慢，问题通常与索引有关。要么你在需要索引的地方没有索引，要么索引设计不够优化。调整表的索引通常可以解决这类问题。性能超出本书的范围，但在第九章中，我会给出一些提示，让你知道应该注意什么。

查询 MySQL 数据库

到目前为止，我们已经创建了一个 MySQL 数据库和表，填充了数据，并添加了索引以加快搜索速度。现在是时候看看这些搜索是如何执行的，以及可用的各种命令和限定符。

SELECT

如您在 图 8-4 中看到的，SELECT 命令用于从表中提取数据。在该部分中，我使用了最简单的形式来选择所有数据并显示它们——这是您除了最小的表外永远不希望做的事情，因为所有数据将以不可读的速度滚动。或者，在 Unix/Linux 计算机上，您可以通过发出以下命令告诉 MySQL 每次一页地分页输出屏幕：

pager less;

这将输出传输到 less 程序。要恢复标准输出并关闭分页，您可以发出以下命令：

nopager;

现在让我们更详细地研究 SELECT。其基本语法是：

SELECT *`something`* FROM *`tablename`*;

something 可以是 *（星号），如前所示，表示 每一列，或者您可以选择仅选择特定列。例如，示例 8-16 显示了如何仅选择 作者 和 标题，以及仅选择 标题 和 ISBN。输入这些命令的结果可以在 图 8-9 中看到。

示例 8-16. 两个不同的 SELECT 语句

SELECT author,title FROM classics;
SELECT title,isbn FROM classics;

图 8-9. 两个不同 SELECT 语句的输出

SELECT COUNT

something 参数的另一个替代品是 COUNT，它可以以多种方式使用。在 示例 8-17 中，它通过将 * 作为参数来显示表中的行数，这意味着 所有行。正如您所期望的那样，返回的结果是 5，因为表中有五个出版物。

示例 8-17. 计数行

SELECT COUNT(*) FROM classics;

SELECT DISTINCT

DISTINCT 修饰符（及其合作伙伴 DISTINCTROW）允许您在包含相同数据的多个条目时清除多个条目。例如，假设您想要列出表中所有的作者。如果您仅从包含同一作者多本书的表中选择 作者 列，通常会看到一个长列表，其中包含一遍又一遍相同的作者名字。但通过添加 DISTINCT 关键字，您可以仅显示每个作者一次。所以，让我们通过添加另一行来测试这一点，这行重复了我们现有的某个作者（示例 8-18）。

示例 8-18. 复制数据

INSERT INTO classics(author, title, category, year, isbn)
 VALUES('Charles Dickens','Little Dorrit','Fiction','1857', '9780141439969');

现在查尔斯·狄更斯在表中出现了两次，我们可以比较使用 SELECT 带有和不带有 DISTINCT 修饰符的结果。示例 8-19 和 图 8-10 显示，简单的 SELECT 列表将狄更斯列出两次，而带有 DISTINCT 修饰符的命令只显示一次。

示例 8-19. 带有和不带有 DISTINCT 修饰符

SELECT author FROM classics;
SELECT DISTINCT author FROM classics;

图 8-10. 带有和不带有 DISTINCT 的选择数据

DELETE

当您需要从表中删除行时，请使用 DELETE 命令。其语法与 SELECT 命令类似，并允许您使用 WHERE 和 LIMIT 等限定符来缩小要删除的确切行或行的范围。

现在您已经看到了DISTINCT限定词的效果，如果您输入了 Example 8-18，则应该通过输入 Example 8-20 中的命令来移除小杜丽。

Example 8-20. 移除新条目

DELETE FROM classics WHERE title='Little Dorrit';

本示例为所有标题列包含确切字符串小杜丽的行发出DELETE命令。

WHERE关键字非常强大，正确输入非常重要；错误可能导致命令应用于错误的行（或在没有匹配WHERE子句的情况下无效）。因此，我们现在将花一些时间来详细介绍这个子句，这是 SQL 的核心。

WHERE

WHERE关键字使您能够通过返回仅当某个表达式为真时的查询结果来缩小查询范围。Example 8-20 仅返回列完全匹配字符串Little Dorrit的行，使用等号操作符=。Example 8-21 显示了使用WHERE与=操作符的更多示例。

Example 8-21. 使用WHERE关键字

SELECT author,title FROM classics WHERE author="Mark Twain";
SELECT author,title FROM classics WHERE isbn="9781598184891";

鉴于我们当前的表格，在 Example 8-21 中的两个命令显示相同的结果。但是如果我们可以轻松地添加更多马克·吐温的书籍，那么第一行将显示他写的所有书名，第二行将继续（因为我们知道 ISBN 是唯一的）显示汤姆·索亚历险记。换句话说，使用唯一键进行搜索更加可预测，稍后您将看到唯一和主键的价值。

您还可以使用LIKE限定词进行搜索模式匹配，允许对字符串的部分进行搜索。此限定词应与%字符一起使用。当放置在关键字之前时，%表示任何内容在前面。放置在关键字之后时，表示任何内容在后面。Example 8-22 执行了三种不同的查询，分别是字符串开头的查询、字符串结尾的查询以及字符串中的任意位置的查询。

Example 8-22. 使用LIKE限定词

SELECT author,title FROM classics WHERE author LIKE "Charles%";
SELECT author,title FROM classics WHERE title LIKE "%Species";
SELECT author,title FROM classics WHERE title LIKE "%and%";

您可以在 Figure 8-11 中看到这些命令的结果。第一个命令输出了查尔斯·达尔文和查尔斯·狄更斯的出版物，因为LIKE限定词设置为返回与字符串Charles后跟任何其他文本匹配的内容。然后只返回了物种起源，因为这是唯一一行的列以Species结尾。最后，傲慢与偏见和罗密欧与朱丽叶都被返回，因为它们在列中任何位置匹配字符串and。如果占位符中没有内容，%也会匹配空字符串。

图 8-11. 使用WHERE与LIKE限定词

LIMIT

LIMIT限定符使您能够选择在查询中返回多少行以及从表中的哪个位置开始返回它们。当传递一个参数时，它告诉 MySQL 从结果的开头开始，并仅返回该参数中给定的行数。如果传递两个参数，则第一个指示 MySQL 从结果开头的偏移量开始显示，第二个指示要返回的行数。您可以将第一个参数视为指示“跳过开头这些结果行数”的内容。

Example 8-23 包括三条命令。第一条返回表中的前三行。第二条从位置 1 开始返回两行（跳过第一行）。最后一条命令从位置 3 开始返回单行（跳过前三行）。Figure 8-12 显示了执行这三条命令的结果。

Example 8-23. 限制返回的结果数

SELECT author,title FROM classics LIMIT 3;
SELECT author,title FROM classics LIMIT 1,2;
SELECT author,title FROM classics LIMIT 3,1;

警告

要注意LIMIT关键字，因为偏移量从 0 开始，但要返回的行数从 1 开始。因此，LIMIT 1,3意味着从第二行开始返回三行。您可以将第一个参数视为指定要跳过多少行，因此英文指令将是“返回 3 行，跳过第 1 行”。

Figure 8-12. 限制使用LIMIT返回的行

MATCH...AGAINST

MATCH...AGAINST结构可以用于已经添加了FULLTEXT索引的列（参见“创建FULLTEXT索引”部分）。使用它，您可以像在互联网搜索引擎中一样进行自然语言搜索。与使用WHERE...=或WHERE...LIKE不同，MATCH...AGAINST允许您在搜索查询中输入多个单词，并将它们与FULLTEXT列中的所有单词进行匹配。FULLTEXT索引不区分大小写，因此查询中使用的大小写不重要。

假设您已经在author和title列上添加了FULLTEXT索引，请输入 Example 8-24 中显示的三个查询。第一个查询要求返回包含单词and的任何行。如果您使用的是 MyISAM 存储引擎，由于and是该引擎中的停用词，MySQL 会忽略它，该查询将始终生成一个空集——无论列中存储的内容是什么。否则，如果您使用的是 InnoDB，and是一个允许的单词。第二个查询要求返回包含单词curiosity和shop的任何行，无论顺序如何。最后一个查询对单词tom和sawyer执行相同类型的搜索。Figure 8-13 显示了这些查询的结果。

Example 8-24. 在FULLTEXT索引上使用MATCH...AGAINST

SELECT author,title FROM classics
 WHERE MATCH(author,title) AGAINST('and');
SELECT author,title FROM classics
 WHERE MATCH(author,title) AGAINST('curiosity shop');
SELECT author,title FROM classics
 WHERE MATCH(author,title) AGAINST('tom sawyer');

图 8-13. 在 FULLTEXT 索引上使用 MATCH...AGAINST

在布尔模式中使用 MATCH...AGAINST

如果希望使您的 MATCH...AGAINST 查询具有更大的能力，可以使用 布尔模式。这将改变标准 FULLTEXT 查询的效果，使其搜索任何搜索词的组合，而不是要求所有搜索词都在文本中。列中的单个词的存在会导致搜索返回该行。

布尔模式还允许您在搜索词前加上 + 或 - 符号，以指示它们是必须包含还是排除的。如果普通布尔模式表示，“这些词中的任何一个都可以”，加号表示，“这个词必须存在；否则，不返回该行。” 减号表示，“这个词不能存在；其存在则使该行被排除在返回结果之外。”

示例 8-25 通过两个查询展示了布尔模式。第一个查询要求返回所有包含单词 charles 而不包含单词 species 的行。第二个使用双引号请求返回所有包含确切短语 origin of 的行。图 8-14 显示了这些查询的结果。

示例 8-25. 在布尔模式下使用 MATCH...AGAINST

SELECT author,title FROM classics
 WHERE MATCH(author,title)
 AGAINST('+charles -species' IN BOOLEAN MODE);
SELECT author,title FROM classics
 WHERE MATCH(author,title)
 AGAINST('"origin of"' IN BOOLEAN MODE);

图 8-14. 在布尔模式下使用 MATCH...AGAINST

如您所料，第一个请求只返回查尔斯·狄更斯的《老古玩店》；任何包含单词 species 的行均已排除，因此忽略了查尔斯·达尔文的出版物。

注

第二个查询中有一点值得注意：停用词 of 是搜索字符串的一部分，但仍然被搜索使用，因为双引号覆盖了停用词。

UPDATE...SET

此结构允许您更新字段的内容。如果要更改一个或多个字段的内容，首先需要缩小范围，就像使用 SELECT 命令一样。示例 8-26 展示了两种不同方式使用 UPDATE...SET。您可以在 图 8-15 中查看结果。

示例 8-26. 使用 UPDATE...SET

UPDATE classics SET author='Mark Twain (Samuel Langhorne Clemens)'
 WHERE author='Mark Twain';
UPDATE classics SET category='Classic Fiction'
 WHERE category='Fiction';

图 8-15. 更新经典表中的列

在第一个查询中，马克·吐温的真名塞缪尔·兰霍恩·克莱蒙斯被添加到他的笔名后面的括号中，这只影响了一行。然而，第二个查询影响了三行，因为它将 category 列中所有 Fiction 一词更改为 Classic Fiction。

在执行更新时，您还可以利用已经见过的限定词，比如 LIMIT，以及后续的 ORDER BY 和 GROUP BY 关键字。

ORDER BY

ORDER BY sorts returned results by one or more columns in ascending or descending order. 示例 8-27 shows two such queries, the results of which can be seen in 图 8-16.

示例 8-27. 使用 ORDER BY

SELECT author,title FROM classics ORDER BY author;
SELECT author,title FROM classics ORDER BY title DESC;

图 8-16. 请求结果排序

As you can see, the first query returns the publications by author in ascending alphabetical order (the default), and the second returns them by title in descending order.

If you wanted to sort all the rows by author and then by descending year of publication (to view the most recent first), you would issue the following query:

SELECT author,title,year FROM classics ORDER BY author,year DESC;

This shows that each ascending and descending qualifier applies to a single column. The DESC keyword applies only to the preceding column, year. Because you allow author to use the default sort order, it is sorted in ascending order. You could also have explicitly specified ascending order for that column, with the same results:

SELECT author,title,year FROM classics ORDER BY author ASC,year DESC;

GROUP BY

In a similar fashion to ORDER BY, you can group results returned from queries using GROUP BY, which is good for retrieving information about a group of data. For example, if you want to know how many publications there are of each category in the classics table, you can issue the following query:

SELECT category,COUNT(author) FROM classics GROUP BY category;

which returns the following output:

+-----------------+---------------+
| category        | COUNT(author) |
+-----------------+---------------+
| Classic Fiction |             3 |
| Nonfiction      |             1 |
| Play            |             1 |
+-----------------+---------------+
3 rows in set (0.00 sec)

Joining Tables Together

It is quite normal to maintain multiple tables within a database, each holding a different type of information. For example, consider the case of a customers table that needs to be able to be cross-referenced with publications purchased from the classics table. Enter the commands in 示例 8-28 to create this new table and populate it with three customers and their purchases. 图 8-17 shows the result.

示例 8-28. 创建和填充 customers 表

CREATE TABLE customers (
 name VARCHAR(128),
 isbn VARCHAR(13),
 PRIMARY KEY (isbn)) ENGINE InnoDB;
INSERT INTO customers(name,isbn)
 VALUES('Joe Bloggs','9780099533474');
INSERT INTO customers(name,isbn)
 VALUES('Mary Smith','9780582506206');
INSERT INTO customers(name,isbn)
 VALUES('Jack Wilson','9780517123201');
SELECT * FROM customers;

图 8-17. 创建 customers 表

注意

There’s also a shortcut for inserting multiple rows of data, as in 示例 8-28, in which you can replace the three separate INSERT INTO queries with a single one listing the data to be inserted, separated by commas, like this:

INSERT INTO customers(name,isbn) VALUES
 ('Joe Bloggs','9780099533474'),
 ('Mary Smith','9780582506206'),
 ('Jack Wilson','9780517123201');

Of course, in a proper table containing customers’ details there would also be addresses, phone numbers, email addresses, and so on, but they aren’t necessary for this explanation. While creating the new table, you should have noticed that it has something in common with the classics table: a column called isbn. Because it has the same meaning in both tables (an ISBN refers to a book, and always the same book), we can use this column to tie the two tables together into a single query, as in 示例 8-29.

示例 8-29. 合并两个表为一个 SELECT

SELECT name,author,title FROM customers,classics
 WHERE customers.isbn=classics.isbn;

这个操作的结果如下所示：

+-------------+-----------------+------------------------+
| name        | author          | title                  |
+-------------+-----------------+------------------------+
| Joe Bloggs  | Charles Dickens | The Old Curiosity Shop |
| Mary Smith  | Jane Austen     | Pride and Prejudice    |
| Jack Wilson | Charles Darwin  | The Origin of Species  |
+-------------+-----------------+------------------------+
3 rows in set (0.00 sec)

看看这个查询是如何巧妙地将表格链接在一起，展示了从classics表格中由customers表格中的人购买的出版物？

自然连接

使用NATURAL JOIN，您可以节省一些输入时间并使查询更加清晰。这种连接方式会自动连接具有相同名称的列。因此，要达到与示例 8-29 相同的结果，您可以输入以下内容：

SELECT name,author,title FROM customers NATURAL JOIN classics;

JOIN...ON

如果您希望指定连接两个表的列，请使用JOIN...ON结构，如下所示，以获得与示例 8-29 相同的结果：

SELECT name,author,title FROM customers
 JOIN classics ON customers.isbn=classics.isbn;

使用 AS

您还可以通过使用AS关键字创建别名来节省输入时间并提高查询的可读性。因此，下面的代码也与示例 8-29 的操作相同：

SELECT name,author,title from
 customers AS cust, classics AS class WHERE cust.isbn=class.isbn;

这个操作的结果如下所示：

+-------------+-----------------+------------------------+
| name        | author          | title                  |
+-------------+-----------------+------------------------+
| Joe Bloggs  | Charles Dickens | The Old Curiosity Shop |
| Mary Smith  | Jane Austen     | Pride and Prejudice    |
| Jack Wilson | Charles Darwin  | The Origin of Species  |
+-------------+-----------------+------------------------+
3 rows in set (0.00 sec)

您还可以使用AS来重命名列（无论是否连接表），如下所示：

SELECT name AS customer FROM customers ORDER BY customer;

这导致以下输出：

+-------------+
| customer    |
+-------------+
| Jack Wilson |
| Joe Bloggs  |
| Mary Smith  |
+-------------+
3 rows in set (0.00 sec)

当您的查询中多次引用相同的表名时，别名特别有用。

使用逻辑运算符

您还可以在 MySQL 的WHERE查询中使用逻辑运算符AND、OR和NOT来进一步缩小选择范围。示例 8-30 展示了每个运算符的一个实例，但您可以根据需要混合使用它们。

示例 8-30. 使用逻辑运算符

SELECT author,title FROM classics WHERE
 author LIKE "Charles%" AND author LIKE "%Darwin";
SELECT author,title FROM classics WHERE
 author LIKE "%Mark Twain%" OR author LIKE "%Samuel Langhorne Clemens%";
SELECT author,title FROM classics WHERE
 author LIKE "Charles%" AND author NOT LIKE "%Darwin";

我选择了第一个查询，因为查尔斯·达尔文有可能以他的全名查尔斯·罗伯特·达尔文出现在某些行中。该查询返回任何author列以Charles开头并以Darwin结尾的出版物。第二个查询搜索使用马克·吐温的笔名或他的真实姓名萨缪尔·兰霍恩·克莱门斯写的出版物。第三个查询返回由名为查尔斯但姓不是达尔文的作者写的出版物。

MySQL 函数

您可能会想知道为什么有人要在 PHP 中使用 MySQL 函数，因为 PHP 本身带有大量强大的函数。答案非常简单：MySQL 函数直接在数据库中处理数据。如果使用 PHP，您首先必须从 MySQL 提取原始数据，然后操作它，并执行所需的数据库查询。

在 MySQL 中内置的函数大大减少了执行复杂查询所需的时间及其复杂性。您可以从文档中了解更多有关所有可用的string和date/time函数的信息。

通过 phpMyAdmin 访问 MySQL

虽然使用 MySQL 需要学习这些主要命令及其工作原理，但一旦理解它们，使用诸如phpMyAdmin之类的程序来管理您的数据库和表将会更快更简单。

要完成此操作，请假设您已按照第二章中描述的方式安装了 AMPPS，输入以下内容打开程序（参见图 8-18）：

http://localhost/phpmyadmin

图 8-18. phpMyAdmin 主界面

在 phpMyAdmin 主界面的左侧窗格中，您可以单击以选择要操作的任何表（尽管在创建之前不会有可用的表）。您还可以单击“新建”以创建新数据库。

从这里，您可以执行所有主要操作，例如创建新数据库、添加表、创建索引等等。要了解更多关于 phpMyAdmin 的信息，请查阅文档。

如果您通过本章中的示例与我一起工作，那么恭喜您——这是一段相当漫长的旅程。您已经从学习如何创建 MySQL 数据库开始，通过发出结合多个表的复杂查询，到使用布尔运算符并利用 MySQL 的各种限定符。

在下一章中，我们将开始学习如何进行高效的数据库设计、高级 SQL 技术以及 MySQL 函数和事务。

问题

1. 在 MySQL 查询中，分号的作用是什么？

2. 您将使用哪个命令来查看可用的数据库或表？

3. 如何在本地主机上创建一个名为newuser、密码为newpass并具有对数据库newdatabase中所有内容访问权限的新 MySQL 用户？

4. 如何查看表的结构？

5. MySQL 索引的目的是什么？

6. FULLTEXT索引提供了哪些好处？

7. 什么是停用词？

8. SELECT DISTINCT和GROUP BY都导致显示只显示每个列中值的一个输出行，即使多行包含该值。SELECT DISTINCT和GROUP BY之间的主要区别是什么？

9. 使用SELECT...WHERE结构，如何返回只包含author列中的classics表中某处包含单词Langhorne的行？

10. 需要在两个表中定义什么才能使它们可以连接在一起？

参见附录 A 中的“第八章答案”，获取这些问题的答案。

第九章：精通 MySQL

第八章为您提供了使用结构化查询语言的关系数据库实践的良好基础。您已经了解了如何创建数据库及其包含的表，以及插入、查找、更改和删除数据。

掌握了这些知识后，我们现在需要看看如何设计数据库以实现最大速度和效率。例如，您如何决定将哪些数据放在哪个表中？多年来，已经制定了许多指导原则，如果您遵循这些原则，可以确保您的数据库高效，并且能够随着数据的增加而增长。

数据库设计

在开始创建数据库之前，正确设计数据库非常重要；否则，您几乎肯定需要返回并更改它，分割一些表，合并其他表，并移动各种列，以建立 MySQL 可以轻松使用的合理关系。

坐下来，拿起一张纸和一支铅笔，写下您认为您和您的用户可能会问的一些查询是一个很好的起点。对于在线书店的数据库，您的一些问题可能是：

• 数据库中有多少作者、书籍和客户？

• 哪位作者写了某本书？

• 哪些书是某个作者写的？

• 哪本书是最贵的？

• 哪本书是畅销书？

• 哪些书今年没有销售？

• 特定客户购买了哪些书籍？

• 哪些书与其他书同时购买？

当然，在这样的数据库上，您可以提出许多其他查询，但即使这样一个小样本也将开始为您提供如何布置表的见解。例如，书籍和 ISBN 可能可以合并到一个表中，因为它们密切相关（稍后我们将讨论一些微妙之处）。相反，书籍和客户应该在不同的表中，因为它们之间的连接非常松散。一个客户可以购买任何一本书，甚至是多本书，而一本书可以被许多客户购买，也可能被更多潜在客户忽略。

当您计划对某些内容进行大量搜索时，一个搜索通常可以从拥有自己的表中受益。当事物之间的耦合松散时，最好将它们放在单独的表中。

考虑到这些简单的经验法则，我们可以猜测我们至少需要三个表来容纳所有这些查询：

作者

将有很多搜索关于作者的信息，其中许多作者合作撰写了书籍，并且许多作者将出现在合集中。将每位作者的所有信息一起列出，并与该作者关联，将为搜索产生最佳结果，因此有一个 作者 表。

书籍

许多书籍有不同的版本。有时它们会更改出版商，有时它们与其他无关的书籍有相同的标题。因此，书籍和作者之间的链接足够复杂，需要一个单独的表格来处理。

顾客

明确起见，顾客应该有自己的表格，因为他们可以自由购买任何作者的任何书籍。

主键：关系数据库的关键

利用关系数据库的强大功能，我们可以在一个地方定义每位作者、每本书和每位顾客的信息。显然，我们感兴趣的是它们之间的链接——比如谁写了每本书以及谁购买了它——但我们可以通过仅在三个表格之间建立链接来存储这些信息。我将向你展示基本原则，然后你只需实践，它会变得自然而然。

这个神奇的方法是给每个作者一个唯一的标识符。我们将为每本书和每位顾客做同样的事情。我们在前一章中已经看到了这样做的方法：主键。对于书籍来说，使用 ISBN 是有意义的，尽管然后你必须处理具有不同 ISBN 的多个版本。对于作者和顾客，你可以简单地分配任意的键值，上一章中提到的AUTO_INCREMENT功能使这一过程变得容易。

简而言之，每个表格将围绕着你可能经常搜索的某个对象设计——在本例中是作者、书籍或顾客——并且该对象将有一个主键。不要选择可能对不同对象具有相同值的键。ISBN 是一个少见的情况，产业已经提供了一个可以依赖的主键，对于每个产品都是唯一的。大多数情况下，为此目的创建一个任意的键，使用AUTO_INCREMENT。

规范化

将数据分成表格并创建主键的过程称为规范化。它的主要目标是确保每个信息片段只出现在数据库中一次。数据重复是低效的，因为它使数据库变得比必要的更大，从而减慢访问速度。更重要的是，重复数据的存在会增加你只更新重复数据的一行的风险，从而在数据库中创建不一致性，可能引发严重的错误。

例如，如果你在作者表格和书籍表格中列出书籍的标题，并且你需要纠正标题中的印刷错误，你必须搜索这两个表格，并确保在书名出现的每个地方都做出相同的更改。最好将书名保留在一个地方，并在其他地方使用 ISBN。

但是在将数据库拆分成多个表格的过程中，重要的是不要走得太远，创建比必要更多的表格，这也会导致设计效率低下和访问速度变慢。

幸运的是，关系模型的发明者 E·F·科德分析了规范化的概念，并将其分为三个称为第一、第二和第三范式的独立模式。如果按顺序修改数据库以满足这些范式中的每一个，您将确保您的数据库在快速访问和最小内存和磁盘空间使用方面达到最佳平衡。

要了解规范化过程是如何工作的，请从表 9-1 中的相当庞大的数据库开始，该表格显示了一个包含所有作者姓名、书名和（虚构的）客户详细信息的表格。您可以考虑它是一个旨在跟踪哪些客户订购了书籍的第一个尝试。显然，这是一种低效的设计，因为数据到处重复（重复部分已经高亮显示），但这代表了一个起点。

表 9-1. 数据库表的高度低效设计

| 作者 1 | 作者 2 | 标题 | ISBN | 价格 | 客户姓名 | 客户地址 | 购买日期 |
| --- | --- | --- | --- | --- | --- | --- |
| 大卫·斯克拉 | 亚当·特拉彻伯格 | PHP Cookbook | 0596101015 | 44.99 | 艾玛·布朗 | 加利福尼亚州洛杉矶市彩虹路 1565 号 | 2009 年 3 月 3 日 |
| 丹尼·古德曼 |   | 动态 HTML | 0596527403 | 59.99 | 达伦·赖德 | 弗吉尼亚州里士满市艾米丽大道 4758 号 | 2008 年 12 月 19 日 |
| 休·威廉姆斯 | 大卫·莱恩 | PHP 和 MySQL | 0596005436 | 44.95 | 厄尔·B·瑟斯顿 | 肯塔基州法兰克福市格雷戈里大道 862 号 | 2009 年 6 月 22 日 |
| 大卫·斯克拉 | 亚当·特拉彻伯格 | PHP Cookbook | 0596101015 | 44.99 | 达伦·赖德 | 弗吉尼亚州里士满市艾米丽大道 4758 号 | 2008 年 12 月 19 日 |
| 拉斯穆斯·勒多夫 | 凯文·塔特罗 & 彼得·麦金泰尔 | 编程 PHP | 0596006815 | 39.99 | 大卫·米勒 | 马萨诸塞州沃尔瑟姆市思达克莲街 3647 号 | 2009 年 1 月 16 日 |

在接下来的三个部分中，我们将检查这个数据库设计，您将看到我们如何通过消除各种重复条目并将单个表格拆分为包含一种类型数据的多个表格来改进它。

第一范式

要使数据库符合第一范式，它必须满足三个要求：

• 不应存在包含相同类型数据的重复列。

• 所有列应包含单一值。

• 每行应该有一个主键，以唯一标识每一行。

顺序查看这些要求时，您应立即注意到作者 1和作者 2列均属于重复数据类型。因此，我们已经有了一个目标列，可以将其拉入单独的表格，因为重复的作者列违反了规则 1。

其次，最终书籍《编程 PHP》列出了三位作者。我通过让凯文·塔特罗和彼得·麦金泰尔共享作者 2列来处理这一点，这违反了规则 2——这也是将作者详细信息转移到单独表格的另一个原因。

然而，规则 3 已得到满足，因为 ISBN 的主键已经创建。

表 9-2 显示从表 9-1 中去除作者列的结果。尽管仍然有突出显示的重复项，但看起来清爽多了。

表 9-2. 从表 9-1 中去除作者列的结果

标题	ISBN	价格	客户姓名	客户地址	购买日期
PHP Cookbook	0596101015	44.99	艾玛·布朗	加利福尼亚州洛杉矶市彩虹路 1565 号	2009 年 3 月 3 日
动态 HTML	0596527403	59.99	达伦·赖德	弗吉尼亚州里士满市艾米丽大道 4758 号	2008 年 12 月 19 日
PHP 与 MySQL	0596005436	44.95	厄尔·B·瑟斯顿	肯塔基州法兰克福市格雷戈里巷 862 号	2009 年 6 月 22 日
PHP Cookbook	0596101015	44.99	达伦·赖德	弗吉尼亚州里士满市艾米丽大道 4758 号	2008 年 12 月 19 日
编程 PHP	0596006815	39.99	大卫·米勒	马萨诸塞州沃尔瑟姆市雪松巷 3647 号	2009 年 1 月 16 日

显示在表 9-3 中的新作者表规模小而简单。它只列出标题的 ISBN 及其作者。如果一本书有多位作者，其他作者将有他们自己的行。起初，你可能对这个表感到不适，因为你无法知道哪位作者写了哪本书。但别担心：MySQL 可以快速告诉你。你要做的就是告诉它你想获取信息的书籍，MySQL 将使用其 ISBN 在作者表中进行搜索，仅需几毫秒。

表 9-3. 新的作者表

ISBN	作者
0596101015	大卫·斯克拉
0596101015	亚当·特拉切伯格
0596527403	丹尼·古德曼
0596005436	休·E·威廉姆斯
0596005436	大卫·莱恩
0596006815	拉斯穆斯·勒多夫
0596006815	凯文·塔特罗
0596006815	皮特·麦金泰尔

正如我之前提到的，当我们创建书籍表时，ISBN 将成为其主键。我在这里提到这一点是为了强调 ISBN 不是作者表的主键。在现实世界中，作者表也应该有一个主键，以便每位作者都有一个唯一的标识符。

所以，在作者表中，ISBN只是一列，用于加快搜索速度，我们可能会将其作为一个键，但不是主键。实际上，在这个表中它不能成为主键，因为它不是唯一的：同一个 ISBN 在两个或更多作者合作撰写的书籍中会出现多次。

因为我们将用它来链接另一张表中的作者与书籍，所以这列被称为外键。

注意

键（也称为索引）在 MySQL 中有几个目的。定义键的根本原因是加快搜索速度。在第八章中的示例中，您已经看到键在WHERE子句中用于搜索。但键还可以用于唯一标识一个项。因此，唯一键通常用作一张表的主键，并用作外键以将该表中的行链接到另一张表中的行。

第二范式

第一范式处理多列之间的重复数据（或冗余）。第二范式则涉及多行之间的冗余。要实现第二范式，你的表必须已经处于第一范式。完成这一步后，通过识别数据在不同位置重复的列，然后将其移至自己的表中，即可实现第二范式。

因此，让我们再次看看表 9-2。请注意，达伦·赖德购买了两本书，因此他的详细信息重复了。这告诉我们需要将客户列单独提取到自己的表中。表 9-4 显示了从表 9-2 中移除客户列的结果。

表 9-4. 新的标题表

ISBN	标题	价格
0596101015	PHP Cookbook	44.99
0596527403	Dynamic HTML	59.99
0596005436	PHP and MySQL	44.95
0596006815	Programming PHP	39.99

正如您所见，在表 9-4 中，现在仅剩下四本唯一书籍的ISBN、标题和价格列，因此这现在构成了一个高效且自包含的表，满足了第一和第二范式的要求。在此过程中，我们设法将信息减少到与书名密切相关的数据。此表还可以包括出版年份、页数、再版次数等详细信息，因为这些详细信息也与书名密切相关。唯一的规则是不能在任何列中放入可能对于单本书有多个值的列，因为那样我们就必须在多行中列出同一本书，从而违反第二范式。例如，恢复作者列将违反这种规范化。

然而，看到提取的客户列，现在在表 9-5，我们可以看到仍然有更多的规范化工作要做，因为达伦·赖德的详细信息仍然重复。同时，也可以认为第一范式规则 2（所有列应包含单个值）尚未得到正确遵守，因为地址确实需要拆分为地址、城市、州和邮政编码的单独列。

表 9-5. 来自表 9-2 的客户详细信息

ISBN	客户名称	客户地址	购买日期
0596101015	Emma Brown	1565 Rainbow Road, Los Angeles, CA 90014	Mar 03 2009
0596527403	Darren Ryder	4758 Emily Drive, Richmond, VA 23219	Dec 19 2008
0596005436	Earl B. Thurston	862 Gregory Lane, Frankfort, KY 40601	Jun 22 2009
0596101015	Darren Ryder	4758 Emily Drive, Richmond, VA 23219	Dec 19 2008
0596006815	David Miller	3647 Cedar Lane, Waltham, MA 02154	Jan 16 2009

我们必须进一步分割此表，以确保每个客户的详细信息仅输入一次。因为 ISBN 不能用作标识客户（或作者）的主键，所以必须创建一个新的键。

表 9-6 是将Customers表规范化为第一和第二范式的结果。现在每个客户都有一个名为CustNo的唯一客户号，它是表的主键，很可能是通过AUTO_INCREMENT创建的。客户地址的所有部分也已分开为不同的列，以便于搜索和更新。

表 9-6. 新客户表

客户号	姓名	地址	城市	州	邮编
1	Emma Brown	1565 Rainbow Road	洛杉矶	加利福尼亚	90014
2	Darren Ryder	4758 Emily Drive	Richmond	VA	23219
3	Earl B. Thurston	862 Gregory Lane	Frankfort	KY	40601
4	David Miller	3647 Cedar Lane	Waltham	MA	02154

同时，为了规范化表 9-6，我们不得不删除有关客户购买的信息，否则每本书购买都会有客户详细信息的多个实例。相反，购买数据现在放在一个称为Purchases的新表中（参见表 9-7）。

表 9-7. 新购买表

客户号	ISBN	日期
1	0596101015	Mar 03 2009
2	0596527403	Dec 19 2008
2	0596101015	Dec 19 2008
3	0596005436	Jun 22 2009
4	0596006815	Jan 16 2009

在这里，来自表 9-6 的CustNo列被重用为将Customers和Purchases表联系在一起的键。因为ISBN列也在这里重复，所以这个表也可以与Authors和Titles表关联。

CustNo 列在Purchases表中可能是一个有用的键，但不是主键。一个客户可以购买多本书（甚至同一本书的多本副本），因此CustNo列不是主键。事实上，Purchases表没有主键。这没关系，因为我们不希望跟踪唯一的购买。如果一个客户在同一天购买了两本相同的书，我们会允许两行具有相同的信息。为了方便搜索，我们可以将CustNo和ISBN都定义为键，但不是主键。

注意

现在有四个表，比我们最初预计需要的三个多了一个。我们通过规范化过程做出了这个决定，方法是遵循第一和第二范式规则，这明确了还需要一个名为 Purchases 的第四个表。

现在我们有的表是 Authors（表 9-3）、Titles（表 9-4）、Customers（表 9-6）和 Purchases（表 9-7），我们可以使用 CustNo 或 ISBN 键将每个表与任何其他表链接起来。

例如，要查看 Darren Ryder 购买了哪些书，你可以在表 9-6，即 Customers 表中查找他；在这里你会看到他的 CustNo 是 2。拿着这个编号，你现在可以去表 9-7，即 Purchases 表；查看这里的 ISBN 列，你会看到他在 2008 年 12 月 19 日购买了书籍 0596527403 和 0596101015。对于人类来说，这看起来是一件很麻烦的事情，但对 MySQL 来说却并不难。

要确定这些标题是什么，你可以参考表 9-4，即 Titles 表，并看到他购买的书是 Dynamic HTML 和 PHP Cookbook。如果你想知道这些书的作者，你也可以使用刚刚在表 9-3 查找的 ISBN，即 Authors 表，你会发现 ISBN 0596527403 的 Dynamic HTML 是由 Danny Goodman 写的，而 ISBN 0596101015 的 PHP Cookbook 是由 David Sklar 和 Adam Trachtenberg 写的。

第三范式

一旦你有一个符合第一和第二范式的数据库，它就已经非常完善了，你可能不需要进一步修改它。然而，如果你希望对数据库非常严格，你可以确保它符合第三范式，这要求那些不直接依赖于主键但依赖于表中另一个值的数据也被移到单独的表中，根据依赖关系。

例如，在表 9-6 中，Customers 表中可以认为 State、City 和 Zip 键与每个客户并非直接相关，因为许多其他人的地址中也会有相同的细节。然而，它们在彼此之间是直接相关的，因为 Address 依赖于 City，而 City 又依赖于 State。

因此，为了满足表 9-6 的第三范式，你需要将它分解成表 9-8 至表 9-11。

表 9-8. 第三范式 Customers 表

CustNo	Name	Address	Zip
1	Emma Brown	1565 Rainbow Road	90014
2	Darren Ryder	4758 Emily Drive	23219
3	Earl B. Thurston	862 Gregory Lane	40601
4	David Miller	3647 Cedar Lane	02154

表 9-9. 第三范式邮政编码表

邮政编码	城市 ID
90014	1234
23219	5678
40601	4321
02154	8765

表 9-10. 第三范式城市表

城市 ID	名称	州 ID
1234	洛杉矶	5
5678	里士满	46
4321	法兰克福	17
8765	沃尔瑟姆	21

表 9-11. 第三范式州表

州 ID	名称	缩写
5	加利福尼亚州	CA
46	弗吉尼亚州	VA
17	肯塔基州	KY
21	马萨诸塞州	MA

那么，您将如何使用这四个表的集合，而不是单个的表 9-6？好吧，您将在表 9-8 中查找Zip code，然后在表 9-9 中找到匹配的CityID。有了这些信息，您可以在表 9-10 中查找城市名称，然后再找到StateID，您可以在表 9-11 中使用它来查找州的名称。

虽然以这种方式使用第三范式可能看起来有些多余，但它确实有其优势。例如，请参阅表 9-11，在这里可以同时包括一个州的名称及其两字母缩写。如果您希望，它还可以包含人口详细信息和其他人口统计数据。

注意

表 9-10 还可以包含更多对您和/或您的客户有用的本地化人口统计信息。通过拆分这些数据片段，您可以更轻松地在未来维护您的数据库，如果有必要添加列的话。

决定是否使用第三范式可能会有些棘手。您的评估应基于以后可能需要添加的数据。如果您绝对确定客户的姓名和地址是您所需要的全部信息，那么您可能希望跳过最后这个规范化阶段。

另一方面，假设您正在为美国邮政服务等大型组织编写数据库。如果一个城市改名了，您会怎么做？如果像表 9-6 这样的表，您将需要在每个该城市的实例上进行全局搜索和替换。但是如果您根据第三范式设置了数据库，您只需要在表 9-10 中更改一个条目，即可反映在整个数据库中。

因此，我建议您问自己两个问题，以帮助您决定是否对任何表执行第三范式规范化：

• 是否可能需要向这个表中添加许多新列？

• 这个表的任何字段在任何时候是否需要全局更新？

如果两个答案中有任何一个是肯定的，那么您可能应该考虑执行这个最后的规范化阶段。

不使用规范化的时机

现在你已经了解了规范化的所有内容，我要告诉你为什么在高流量站点上应该把这些规则丢掉。没错——在会导致 MySQL 抖动的站点上，你永远不应该完全规范化你的表。

规范化要求在多个表之间分布数据，这意味着每个查询需要对 MySQL 进行多次调用。在一个非常流行的站点上，如果你有规范化的表，一旦并发用户超过几十个，你的数据库访问速度将显著减慢，因为它们将在它们之间创建数百次数据库访问。事实上，我甚至会说，在你能够看到 MySQL 阻塞之前，你应该反规范化任何常常查找的数据。

如果你的表中存在重复的数据，你可以显著减少需要进行的额外请求的数量，因为大多数你想要的数据在每个表中都是可用的。这意味着你只需在查询中添加一个额外的列，该字段将对所有匹配结果可用。

当然，你必须处理之前提到的缺点，比如消耗大量的磁盘空间，并确保在需要修改数据时更新每一个副本。

多次更新可以自动化。MySQL 提供了一个名为触发器的功能，可以在你做出更改时自动修改数据库。（触发器超出了本书的范围。）另一种传播冗余数据的方法是设置一个定期运行的 PHP 程序来保持所有副本同步。该程序从“主”表中读取更改并更新所有其他表。（你将在下一章学习如何从 PHP 访问 MySQL。）

然而，在你对 MySQL 非常熟悉之前，我建议你完全规范化所有表（至少达到第一和第二范式），因为这将养成良好的习惯并使你处于良好的状态。只有当你真正开始看到 MySQL 日志阻塞时，你才应该考虑反规范化。

关系

MySQL 被称为关系型数据库管理系统，因为它的表不仅存储数据，还存储数据之间的关系。有三类关系。

一对一

一个一对一关系就像（传统的）婚姻：每个项目只与另一种类型的项目有关系。这种情况非常罕见。例如，一个作者可以写多本书，一本书可以有多个作者，甚至一个地址可以与多个客户关联。也许在本章中迄今为止最好的一个一对一关系的例子是一个州的名称与其两个字符缩写之间的关系。

但是，为了论证，让我们假设在任何地址只能始终存在一个客户。在这种情况下，图 9-1 中的 Customers–Addresses 关系是一对一关系：每个地址只有一个客户居住，并且每个地址只能有一个客户。

图 9-1. 客户表，表 9-8，分成两个表

通常，当两个项目具有一对一关系时，您只需将它们作为同一表中的列包括。将它们拆分为单独的表的两个原因是：

• 您希望做好准备，以防关系以后发生变化，并且不再是一对一。

• 表格有很多列，你认为通过拆分可以提高性能或维护。

当然，当您在现实世界中构建自己的数据库时，您将不得不创建一对多的客户-地址关系（一个 地址，多个 客户）。

一对多

一对多（或多对一）关系发生在一个表中的一行与另一个表中的多行相关联时。如果允许在同一地址有多个客户，如前所述，表 9-8 将形成一对多关系，这就是为什么在这种情况下必须拆分它。

因此，在 图 9-1 内查看表 9-8a 时，您可以看到它与 表 9-7 具有一对多关系，因为表 9-8a 中每个客户只有一个。然而 表 9-7，Purchases 表，可以（也确实）包含来自同一客户的多次购买。因此，一个 客户与 多个 购买之间存在关系。

您可以在 图 9-2 中并排查看这两个表，其中连接每个表中行的虚线从左侧表的单行开始，但可以连接到右侧表的多行。这种一对多关系也是描述多对一关系的首选方案，此时通常会交换左右表以将它们视为一对多关系。

图 9-2. 说明两个表之间的关系

要在关系数据库中表示一对多关系，请为“多”创建一个表和“一”创建一个表。 “多”表必须包含一个列，该列列出“一”表的主键。因此，Purchases 表将包含一个列，列出客户的主键。

多对多

在 多对多关系 中，一个表中的多行与另一个表中的多行关联。要创建此关系，请添加一个包含其他每个表中相同关键列的第三个表。该第三个表除了连接其他表之外什么也不包含，因为它的唯一目的就是连接其他表。

Table 9-12 就是这样一张表。它是从 Table 9-7，即 Purchases 表中提取的，但省略了购买日期信息。它包含每个售出书籍的 ISBN 及其购买者的客户号的副本。

Table 9-12. 一个中介表

CustNo	ISBN
1	0596101015
2	0596527403
2	0596101015
3	0596005436
4	0596006815

有了这个中介表，您可以通过一系列的关联遍历数据库中的所有信息。您可以以地址作为起点，查找住在该地址的客户购买的任何书籍的作者。

例如，假设您想了解邮政编码为 23219 的购买情况。在表 9-8b 中查找该邮政编码，您会发现客户号为 2 的客户至少购买了一件数据库中的物品。此时，您可以使用表 9-8a 查找该客户的姓名，或使用新的中介 Table 9-12 查看购买的书籍。

从这里，您将发现购买了两个标题，并可以跟踪它们回到 Table 9-4 查找这些书籍的标题和价格，或者到 Table 9-3 查看这些书籍的作者。

如果您觉得这实际上是将多个一对多关系结合在一起，那么您是完全正确的。为了说明这一点，Figure 9-3 将三个表结合在一起。

图 9-3. 通过第三张表创建多对多关系

跟随左侧表中的任何邮政编码到相关的客户 ID。从那里，您可以链接到中间表，该表通过链接客户 ID 和 ISBN 连接左侧和右侧表。现在您只需跟随一个 ISBN 到右侧表，即可查看它与哪本书相关联。

您还可以使用中介表从书名反向查找到邮政编码。Titles 表可以告诉您 ISBN，然后您可以在中间表中使用这个 ISBN 找到购买该书的客户的 ID 号码，最后您可以使用 Customers 表将客户 ID 号码与客户的邮政编码匹配。

数据库与匿名性

使用关系的一个有趣方面是，你可以累积关于某个项（如客户）的大量信息，而不需要实际了解该客户是谁。请注意，在前面的示例中，我们从客户的邮政编码到客户的购买记录，再返回，而无需了解客户的姓名。数据库可以用于跟踪人员，但也可以帮助保护人们的隐私，同时返回关于购买的信息，而不泄露其他客户详细信息，例如。

事务

在一些应用程序中，确保一系列查询按正确顺序运行，并且每个查询都成功完成非常重要。例如，假设你正在创建一系列用于从一个银行账户转账到另一个账户的查询。你不希望发生以下事件之一：

• 你将资金添加到第二个账户，但当你尝试从第一个账户扣除时，更新失败，现在两个账户都有资金。

• 你从第一个银行账户中扣除资金，但是添加到第二个账户的更新请求失败了，资金就这样消失了。

如你所见，在这种类型的事务中，查询的顺序非常重要，而且事务的每个部分都必须成功完成。但是，如何确保这种情况发生呢？因为一旦发生了查询，它就无法撤销了？你是否需要跟踪事务的所有部分，然后逐个撤销它们？答案绝对是否定的，因为 MySQL 提供了强大的事务处理功能，正好可以处理这些情况。

另外，事务允许多个用户或程序同时访问数据库。MySQL 通过确保所有事务排队执行，并确保用户或程序依次执行，而不会互相干扰，无缝处理这一过程。

事务存储引擎

要使用 MySQL 的事务功能，你必须使用 MySQL 的 InnoDB 存储引擎（从版本 5.5 开始默认使用）。如果不确定你的代码将在哪个版本的 MySQL 上运行，而不是假设 InnoDB 是默认引擎，你可以在创建表时强制使用它，如下所示。

通过在示例 9-1 中输入命令来创建一个银行账户表。（记住，为此你需要访问 MySQL 命令行，并且必须已经选择了一个适合创建此表的数据库。）

示例 9-1. 创建一个事务准备的表

CREATE TABLE accounts (
 number INT, balance FLOAT, PRIMARY KEY(number)
 ) ENGINE InnoDB;
DESCRIBE accounts;

此示例的最后一行显示了新表的内容，以确保它已正确创建。输出应如下所示：

+---------+---------+------+-----+---------+-------+
| Field   | Type    | Null | Key | Default | Extra |
+---------+---------+------+-----+---------+-------+
| number  | int(11) | NO   | PRI | NULL    |       |
| balance | float   | YES  |     | NULL    |       |
+---------+---------+------+-----+---------+-------+
2 rows in set (0.00 sec)

现在让我们在表内创建两行，以便你可以练习使用事务。在示例 9-2 中输入这些命令。

示例 9-2. 填充 accounts 表

INSERT INTO accounts(number, balance) VALUES(12345, 1025.50);
INSERT INTO accounts(number, balance) VALUES(67890, 140.00);
SELECT * FROM accounts;

第三行显示表格内容以确认行已正确插入。输出应如下所示：

+--------+---------+
| number | balance |
+--------+---------+
|  12345 |  1025.5 |
|  67890 |     140 |
+--------+---------+
2 rows in set (0.00 sec)

创建并预填充了这个表后，你可以开始使用事务了。

使用 BEGIN

MySQL 的事务以 BEGIN 或 START TRANSACTION 语句开始。键入 示例 9-3 中的命令将事务发送给 MySQL。

示例 9-3. MySQL 事务

BEGIN;
UPDATE accounts SET balance=balance+25.11 WHERE number=12345;
COMMIT;
SELECT * FROM accounts;

这个事务的结果由最后一行显示，应如下所示：

+--------+---------+
| number | balance |
+--------+---------+
|  12345 | 1050.61 |
|  67890 |     140 |
+--------+---------+
2 rows in set (0.00 sec)

正如你所见，账号 12345 的余额增加了 25.11，现在是 1050.61。你也许注意到了 示例 9-3 中的 COMMIT 命令，接下来将对其进行解释。

使用 COMMIT

当你确认事务中的一系列查询已成功完成时，使用 COMMIT 命令将所有更改提交到数据库。在接收到 COMMIT 命令之前，MySQL 认为你所做的所有更改只是临时的。这个功能让你有机会通过不发送 COMMIT 而是发出 ROLLBACK 命令来取消事务。

使用 ROLLBACK

使用 ROLLBACK 命令，你可以告诉 MySQL 忘记从事务开始以来的所有查询，并取消事务。通过在 示例 9-4 中输入资金转移事务来看看它的运行效果。

示例 9-4. 资金转移事务

BEGIN;
UPDATE accounts SET balance=balance-250 WHERE number=12345;
UPDATE accounts SET balance=balance+250 WHERE number=67890;
SELECT * FROM accounts;

输入完这些行后，你应该看到以下结果：

+--------+---------+
| number | balance |
+--------+---------+
|  12345 |  800.61 |
|  67890 |     390 |
+--------+---------+
2 rows in set (0.00 sec)

第一个银行账户的值比之前少了 250，第二个账户增加了 250；你已经在它们之间转移了 250 的价值。但假设出现了问题，你希望撤销这笔交易。你只需按照 示例 9-5 中的命令执行即可。

示例 9-5. 使用 ROLLBACK 取消事务

ROLLBACK;
SELECT * FROM accounts;

现在你应该看到以下输出，显示两个账户的先前余额已经恢复，因为整个事务已通过 ROLLBACK 命令被取消：

+--------+---------+
| number | balance |
+--------+---------+
|  12345 | 1050.61 |
|  67890 |     140 |
+--------+---------+
2 rows in set (0.00 sec)

使用 EXPLAIN

MySQL 提供了一个强大的工具来调查你向其发出的查询的解释方式。使用 EXPLAIN，你可以获取任何查询的快照，以查明是否可以以更好或更有效的方式发出它。示例 9-6 展示了如何与你之前创建的 accounts 表一起使用它。

示例 9-6. 使用 EXPLAIN 命令

EXPLAIN SELECT * FROM accounts WHERE number='12345';

这个 EXPLAIN 命令的结果应该如下所示：

+--+------+--------+------+-----+--------+-------+----+-----+----+------+-----+
|id|select|table   |part- |type |possible|key    |key |ref  |rows|fil-  |Extra|
|  |_type |        |itions|     |_keys   |       |_len|     |    |tered |     |
+--+------+--------+------+-----+--------+-------+----+-----+----+------+-----+
|1 |SIMPLE|accounts|NULL  |const|PRIMARY |PRIMARY|4   |const|1   |100.00|NULL |
+--+------+--------+------+-----+--------+-------+----+-----+----+------+-----+
1 row in set (0.00 sec)

MySQL 在此给出的信息如下：

select_type

选择类型是 SIMPLE。如果你正在将表连接在一起，这将显示连接类型。

table

当前正在查询的表是 accounts。

type

查询类型为const。从效率最低到最高的类型，可能的值可以是ALL、index、range、ref、eq_ref、const、system和NULL。

possible_keys

存在一个PRIMARY键，这意味着访问应该很快。

key

实际使用的键是PRIMARY。这很好。

key_len

键长度为4。这是 MySQL 将使用的索引字节数。

ref

ref列显示与键一起使用的列或常量。在这种情况下，正在使用一个常量键。

rows

此查询需要搜索的行数为1。这很好。

每当你有一个查询似乎执行时间比你预期的长时，请尝试使用EXPLAIN来查看可以优化的地方。你将会发现哪些键（如果有的话）正在使用，它们的长度等信息，从而可以相应地调整你的查询或表的设计。

注意

当您完成临时accounts表的实验后，可能希望通过输入以下命令将其删除：

DROP TABLE accounts;

备份与恢复

无论您在数据库中存储哪种类型的数据，它对您都必须有一定的价值，即使只是重新输入它所需的时间成本，如果硬盘发生故障。因此，重要的是您保持备份以保护您的投资。此外，有时您必须将数据库迁移到新服务器；通常最好的方法是先备份它。还重要的是，您定期测试备份以确保它们有效，并且在需要时能够使用。

幸运的是，使用mysqldump命令轻松备份和恢复 MySQL 数据。

使用 mysqldump

使用mysqldump，您可以将一个或多个数据库转储到一个或多个文件中，这些文件包含重新创建所有表并填充其数据所需的所有指令。此命令还可以生成CSV（逗号分隔值）和其他分隔文本格式的文件，甚至是 XML 格式的文件。其主要缺点是在备份时必须确保没有人在写入表。有各种方法可以做到这一点，但最简单的方法是在运行mysqldump之前关闭 MySQL 服务器，然后在mysqldump完成后重新启动服务器。

或者，在运行mysqldump之前，您可以锁定要备份的表。要锁定表以便读取数据（因为我们想要读取数据），请从 MySQL 命令行执行以下命令：

LOCK TABLES *`tablename1`* READ, *`tablename2`* READ ...

然后，要释放锁，请输入以下命令：

UNLOCK TABLES;

默认情况下，mysqldump的输出只是简单地打印出来，但您可以通过>重定向符号将其捕获到文件中。

mysqldump命令的基本格式如下所示：

mysqldump -u *user* -p*password database*

但在转储数据库内容之前，必须确保 mysqldump 在你的路径中，否则需在命令中指定其位置。表 9-13 显示了在不同安装和操作系统中可能的程序位置，这些已在第二章中涵盖。如果使用不同的安装程序，则其位置可能略有不同。

表 9-13. 不同安装的 mysqldump 的可能位置

操作系统和程序	可能的文件夹位置
Windows AMPPS	C:\Program Files\Ampps\mysql\bin
macOS AMPPS	/Applications/ampps/mysql/bin
Linux AMPPS	/Applications/ampps/mysql/bin

因此，要将你在第八章中创建的publications数据库的内容转储到屏幕上，首先退出 MySQL，然后输入示例 9-7 中的命令（必要时指定mysqldump的完整路径）。

示例 9-7. 将 publications 数据库转储到屏幕上

mysqldump -u *user* -p*password* publications

确保用你的 MySQL 安装的正确详细信息替换 user 和 password。如果用户没有设置密码，可以省略命令的这部分，但 -u user 部分是必需的，除非你以 root 身份执行而无需密码并且正在以 root 身份执行（不推荐）。执行此命令的结果将类似于 图 9-4。

图 9-4. 将 publications 数据库转储到屏幕上

创建备份文件

现在 mysqldump 可以工作，并且已验证其正确输出到屏幕，你可以使用 > 重定向符号直接将备份数据发送到文件。假设你希望将备份文件命名为 publications.sql，则输入 示例 9-8 中的命令（记得替换 user 和 password 为正确的详细信息）。

注意

示例 9-8 中的命令将备份文件存储到当前目录。如果需要保存到其他位置，应在文件名之前插入文件路径。还必须确保备份目录已设置正确的权限，允许写入文件，但不允许任何非特权用户访问！

示例 9-8. 将 publications 数据库转储到文件中

mysqldump -u *user* –p*password* publications > publications.sql

注意

有时在使用 Windows PowerShell 访问 MySQL 时可能会出现错误，而在标准命令提示符窗口中则看不到这些错误。

如果将备份文件 echo 到屏幕或加载到文本编辑器中，你会看到它包含如下的 SQL 命令序列：

DROP TABLE IF EXISTS 'classics';
CREATE TABLE 'classics' (
  'author' varchar(128) default NULL,
  'title' varchar(128) default NULL,
  'category' varchar(16) default NULL,
  'year' smallint(6) default NULL,
  'isbn' char(13) NOT NULL default '',
  PRIMARY KEY  ('isbn'),
  KEY 'author' ('author'(20)),
  KEY 'title' ('title'(20)),
  KEY 'category' ('category'(4)),
  KEY 'year' ('year'),
  FULLTEXT KEY 'author_2' ('author','title')
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

这是一个智能代码，可用于从备份中恢复数据库，即使当前数据库已存在；它将首先删除需要重新创建的任何表，从而避免可能出现的 MySQL 错误。

备份单个表

要仅从数据库备份中备份单个表（例如从publications数据库的classics表），您应首先从 MySQL 命令行内锁定该表，通过发出以下命令：

LOCK TABLES publications.classics READ;

这确保 MySQL 继续运行以进行读取，但不能进行写入。然后，保持 MySQL 命令行打开状态，使用操作系统命令行发出以下命令：

mysqldump -u *user* -p*password* publications classics > classics.sql

现在，您必须从 MySQL 命令行内释放表锁，通过在第一个终端窗口中输入以下命令，解锁在当前会话期间已锁定的所有表：

UNLOCK TABLES;

备份所有表

如果要一次备份所有 MySQL 数据库（包括系统数据库如mysql），可以使用类似示例 9-9 中的命令，这样可以恢复整个 MySQL 数据库安装。记得在需要时使用锁定。

示例 9-9. 将所有 MySQL 数据库转储到文件

mysqldump -u *user* -p*password* --all-databases > all_databases.sql

注意

当然，备份的数据库文件中不仅仅是几行 SQL 代码。建议您花几分钟时间查看一些文件，以熟悉备份文件中出现的命令类型及其工作原理。

从备份文件恢复

要从文件执行恢复，请调用mysql可执行文件，并使用<符号指定要从中恢复的文件。因此，要恢复使用--all-databases选项转储的整个数据库，可以使用类似示例 9-10 中的命令。

示例 9-10. 恢复整个数据库集

mysql -u *user* -p*password* < all_databases.sql

要恢复单个数据库，请使用-D选项，后跟数据库名称，如示例 9-11，其中publications数据库正在从示例 9-8 生成的备份中恢复。

示例 9-11. 恢复 publications 数据库

mysql -u *user* -p*password* -D publications < publications.sql

要将单个表恢复到数据库，请使用类似示例 9-12 中的命令，这里只恢复publications数据库中的classics表。

示例 9-12. 将 classics 表恢复到 publications 数据库

mysql -u *user* -p*password* -D publications < classics.sql

以 CSV 格式转储数据

如前所述，mysqldump程序非常灵活，支持各种输出格式，例如 CSV 格式，您可以将其用于将数据导入电子表格等其他用途。示例 9-13 展示了如何将publications数据库中的classics和customers表数据导出到c:/temp文件夹下的classics.txt和customers.txt文件中。在 macOS 或 Linux 系统上，您应修改目标路径为一个已存在的文件夹。

示例 9-13. 将数据转储到 CSV 格式文件

mysqldump -u *user* -p*password* --no-create-info --tab=c:/temp
  --fields-terminated-by=',' publications

此命令非常长，在这里显示为两行，但您必须将其作为单行输入。结果如下：

Mark Twain (Samuel Langhorne Clemens)','The Adventures of Tom Sawyer',
 'Classic Fiction','1876','9781598184891
Jane Austen','Pride and Prejudice','Classic Fiction','1811','9780582506206
Charles Darwin','The Origin of Species','Nonfiction','1856','9780517123201
Charles Dickens','The Old Curiosity Shop','Classic Fiction','1841','9780099533474
William Shakespeare','Romeo and Juliet','Play','1594','9780192814968

Mary Smith','9780582506206
Jack Wilson','9780517123201

计划您的备份

备份的黄金法则是在您认为合适的频率进行备份。数据越有价值，您就越应该频繁备份，并制作更多的副本。如果您的数据库每天至少更新一次，您应该真的每天备份一次。另一方面，如果更新频率不高，您可能可以更少地备份。

注意

您应考虑制作多份备份并将它们存储在不同的位置。如果您有多台服务器，将备份在它们之间复制将变得非常简单。您还应该考虑在可移动硬盘、闪存驱动器、CD 或 DVD 等物理介质上进行备份，并将其保管在不同的地方——最好是像防火保险柜之类的地方。

定期测试数据库的还原也很重要，以确保您的备份操作正确无误。您还需要熟悉数据库的还原操作，因为在压力和匆忙情况下，例如网站遭遇停电后，可能需要进行数据库的还原操作。您可以将数据库还原到私有服务器并运行一些 SQL 命令，以确保数据符合您的预期。

一旦您消化了本章的内容，您将能够熟练使用 PHP 和 MySQL；下一章概述了最新 PHP/MySQL 版本的变化。

问题

1. 在关系数据库中，“关系”一词的含义是什么？

2. 删除重复数据和优化表的过程术语是什么？

3. 第一范式有哪三条规则？

4. 如何使表满足第二范式？

5. 在一个包含一对多关系项的两个表中，您会在列中放置什么以将它们联系在一起？

6. 如何创建具有多对多关系的数据库？

7. 什么命令启动和结束 MySQL 事务？

8. MySQL 提供了哪个功能，使您能够详细查看查询的工作方式？

9. 您会使用什么命令将publications数据库备份到名为publications.sql的文件中？

参见“第九章答案”，在附录 A 中查看这些问题的答案。

第十章：PHP 8 和 MySQL 8 的新特性

到 21 世纪第二个十年结束时，PHP 和 MySQL 都已经成熟到了它们的第八个版本，并且按照软件技术标准可以被认为是高度成熟的产品。

根据w3techs.com网站的说法，到 2021 年初，PHP 在各种网站中以某种方式被使用，超过了 79%，远远超过最接近的竞争对手 ASP.NET 的 70%。explore-group.com 报告称，2019 年 MySQL 仍然是网页上使用最广泛的数据库，安装在 52%的网站上。尽管 MySQL 的市场份额在近年来有所下降，但它仍然比最接近的竞争对手 PostgreSQL 多 16%，后者在 36%的网站上使用。似乎这种情况在可预见的未来将继续存在，特别是由于几乎相同的 MariaDB 也在市场中占有一定比例。

随着这两种技术的最新 8 版本，以及 JavaScript，这些现代 Web 开发的支柱看起来将在未来多年内继续保持重要性。因此，让我们来看看最新版本的 PHP 和 MySQL 中有什么新功能。

关于本章

本书版本准备时，这两种技术的最新版本已经发布，因此本章更多地是一个总结或更新。它不仅包含对初学者和中级 PHP 和 MySQL 开发人员有用的信息，还利用机会详细介绍了这两种技术中所做的一些更高级的改进。

如果以下任何内容是您在本书或其他地方尚未涉及的话题，请不要担心；您还不需要（甚至不需要）在您的开发工具包中使用它。但对于那些您以前见过的，您将理解新增或更改的内容，并有一些如何利用它的提示。

本书的未来版本将在教程的主体中包含对新开发者最有用的部分。

PHP 8

PHP 8 的第 8 版标志着一个重大更新和一个重要的里程碑，为以下内容带来了许多新功能：类型，系统，语法错误处理，字符串，面向对象编程等等。

新功能使得 PHP 比以往更加强大和易于使用，同时最大限度地减少可能会破坏或修改现有安装的更改。

例如，命名参数，即时（JIT）编译，属性和构造函数属性带来了重大的改进和语法变化，改进的错误处理，以及操作符的变化和改进，以帮助减少忽视错误的机会。

PHP8 和 AMPPS 堆栈

在撰写本文时，建议您在第二章中安装的 AMPPS 堆栈版本包含 MySQL 8.0.18，但其 PHP 版本仍为 7.3.11。在本书出版过程中，预计 AMPPS 堆栈将包含 PHP 8 的版本，并建议您让 AMPPS 为您处理安装，特别是如果您是初学者。但如果 AMPPS 尚未提供 PHP 8，而您希望立即开始使用 PHP 8，您可以直接从php.net网站下载更新版本，并按照提供的说明安装和使用它。

命名参数

除了传统的位置参数外，在函数调用中还可以使用命名参数，就像这样：

str_contains(needle: 'ian', haystack: 'Antidisestablishmentarianism');

这使得函数（或方法）参数名成为公共 API 的一部分，并允许您根据它们的参数名而不是参数顺序将输入数据传递到函数中，大大提高了代码清晰度。因此，由于参数是按名称传递的，它们的顺序不再重要，这应该会减少难以找到的错误。顺便说一句，str_contains（稍后解释）也是 PHP 8 的新功能。

属性

在 PHP 8 中，属性（如属性和变量）映射到 PHP 类名，允许在类、方法和变量中包含元数据。以前，您必须使用 DocBloc 注释来推断它们。

属性是一种将一个系统或程序的细节提供给另一个系统（如插件或事件系统）的方法，是简单的带有#[Attribute]注释的类，可以附加到类、属性、方法、函数、类常量或函数/方法参数上。

在运行时，属性不起任何作用，对代码没有影响。但是，它们可以通过反射 API 使用，允许其他代码检查属性并采取额外的操作。

您可以在PHP.net 概述中找到有关属性（有些超出本书范围）的很好解释。

只要它们在一行上，属性在较旧的 PHP 版本中被解释为注释，因此安全地被忽略。

构造函数属性

使用 PHP 8，您现在可以直接从类构造函数中声明类属性，从而节省大量重复代码。例如，看看这段代码：

class newRecord
{
`    public` `string` `$username``;`
`    public` `string` `$email``;`

     public function __construct(
        string $username,
        string $email,
    ) {
        $this->username = $username;
        $this->email    = $email;
    }
}

使用构造函数属性，您现在可以将所有这些减少到以下内容：

class newRecord
{
     public function __construct(
`        public` `string` `$username``,`
`        public` `string` `$email``,`
    ){}
}

这是一个不兼容的特性，所以只有在确保已安装 PHP 8 的情况下才使用它。

即时编译

启用时，即时（JIT）编译并缓存本机指令（而不是所谓的 OPcache，它保存文件解析时间），以提供性能提升给 CPU 密集型应用程序。

您可以像这样在php.ini文件中启用 JIT：

opcache.enable          = 1
opcache.jit_buffer_size = 100M
opcache.jit             = tracing

请记住，JIT 对 PHP 来说是相对较新的，它目前使得调试和性能分析更加困难。此外，在初始发布前的一天，JIT 还存在问题，因此要注意可能在系统中存在一些未发现的 bug，在此期间最好禁用 JIT 编译，并且在调试时应该保持禁用。

联合类型

在 PHP 8 中，类型声明可以扩展为联合类型，以声明多个类型（也支持false作为布尔值false的特殊类型），例如：

function parse_value(`string``|``int``|``float`): string|null {}

空安全操作符

在以下内容中，?-> 空安全操作符会在遇到null值时立即返回null，而不会导致错误，并且会短路后续的代码块：

return $user->getAddress()?->getCountry()?->isoCode;

以前，你可能需要对每个部分使用多个连续的isset()调用进行测试，以检查它们是否为null值。

match 表达式

match表达式类似于switch语句块，但提供了类型安全的比较，支持返回值，不需要break语句跳出，同时支持多个匹配值。因此，这个相对繁琐的switch块：

`switch` ($country)
{
  case "UK":
  case "USA":
  case "Australia":
  default:
      $lang = "English";
      break;
  case "Spain":
      $lang = "Spanish";
      break;
  case "Germany":
  case "Austria":
      $lang = "German";
      break;
}

可以用以下简单得多的match表达式来替代：

$lang = `match`($country)
{
  "UK", "USA", "Australia", default => "English",
  "Spain"                           => "Spanish",
  "Germany", "Austria"              => "German",
};

关于类型安全比较，switch语句对以下代码会感到困惑，因为它将'0e0'视为零的指数值，并输出'null'，而实际上应该输出'a'。然而，match不会出现这个问题。

$a = '0e0';

switch ($a)
{
  case    0 : echo 'null'; break;
  case '0e0': echo 'a';    break;
}

新函数

PHP 8 提供了许多新函数，提供了更多功能和语言改进，涵盖字符串处理、调试和错误处理等领域。

str_contains

str函数将返回一个字符串是否包含在另一个字符串中。它比strpos函数更好，因为strpos返回一个字符串在另一个字符串中的位置，如果未找到则返回false。但是存在一个潜在的问题，如果字符串在位置零被找到并且返回值为 0，则使用==进行比较时会被解释为false，除非使用严格比较运算符（===）。

因此，使用strpos时，你需要编写以下不太清晰的代码：

if (`strpos`('Once upon a time', 'Once') !== false)
  echo 'Found';

而使用str_contains的代码如下所示，在快速扫描（和编写）代码时更加清晰，不太可能导致隐蔽的 bug：

if (`str_contains`('Once upon a time', 'Once'))
  echo 'Found';

str_contains函数是区分大小写的，所以如果需要进行不区分大小写的检查，应该先将$needle和$haystack都通过函数转换为小写，例如strtolower，像这样：

if (str_contains(`strtolower`('Once upon a time'),
                 `strtolower`('`o`nce')))
  echo 'Found';

如果您希望使用str_contains并确保您的代码与旧版本的 PHP 兼容，您可以使用兼容性解决方案（提供您的代码期望的功能的代码），创建自己的str_contains函数版本（如果尚不存在）。

帮助使用兼容性解决方案

而不是编写自己的兼容性解决方案，可能会无意中引入错误或与其他人的兼容性解决方案不兼容，您可以使用在GitHub上免费提供的 PHP 8 Symfony 兼容性解决方案包。

在以下 PHP 7+的兼容性解决方案函数中，对于$needle为空字符串的检查是必需的，因为 PHP 8 认为空字符串存在于每个字符串的每个位置（甚至包括在空字符串中），因此此行为必须与替换函数匹配：

if (!function_exists('str_contains'))
{
  function str_contains(string $haystack, string $needle): bool
  {
    return $needle === '' || strpos($haystack, $needle) !== false;
  }
}

str_starts_with

str_starts_with函数提供了一种更清晰的方法来检查一个字符串是否以另一个字符串开头。以前，您可能会使用strpos函数并检查它是否返回零值，但是由于我们已经看到在某些情况下 0 和false可能会混淆，str_starts_with显著减少了这种可能性。您可以像这样使用它：

if (`str_starts_with`('In the beginning', 'In'))
  echo 'Found';

就像str_contains一样，测试是区分大小写的，因此在两个字符串上使用类似strtolower的函数执行不区分大小写的测试。PHP 7+的此函数的兼容性解决方案可能如下所示：

if (!function_exists('str_starts_with'))
{
  function str_starts_with(string $haystack, string $needle): bool
  {
    return $needle === '' || strpos($haystack, $needle) === 0;
  }
}

由于 PHP 8 认为空字符串存在于字符串的每个位置，因此如果$needle为空字符串，此兼容性解决方案始终返回true。

str_ends_with

此函数提供了一种更清晰和更简单的方法来检查一个字符串是否以另一个字符串结尾。以前，您可能会使用substr函数，并传递$needle的负长度，但是str_ends_with使得这个任务变得简单得多。您可以像这样使用它：

if (`str_ends_with`('In the end', 'end'))
  echo 'Found';

就像其他新字符串函数一样，测试是区分大小写的，因此在两个字符串上使用类似strtolower的函数执行不区分大小写的测试。PHP 7+的此函数的兼容性解决方案可能如下所示：

if (!function_exists('str_ends_with'))
{
  function str_ends_with(string $haystack, string $needle): bool
  {
    return $needle === '' ||
           $needle === substr($haystack, `-`strlen($needle));
  }
}

如果传递给substr的第二个参数为负数（如本例），则从其末尾向后工作匹配该数字的字符数。同样，如果$needle是空字符串，则此兼容性解决方案始终返回true。还要注意使用===严格比较运算符确保在两个字符串之间进行精确比较。

fdiv

新的fdiv函数类似于现有的fmod（在除法后返回浮点余数）和intdiv（返回除法的整数商）函数，但允许除以 0 而不发出除以零错误，而是返回其中之一的值：INF，-INF或NAN，具体取决于情况。

例如，intdiv(1, 0) 将会发出除零错误，1 % 0 或者简单地 1 / 0 也一样。但是你可以安全地使用 fdiv(1, 0)，结果将是一个带有值 INF 的浮点数，而 fdiv(-1, 0) 返回 -INF。

这是一个 PHP 7+ 的兼容解决方案，您可以使用它使您的代码向后兼容：

if (!function_exists('fdiv'))
{
  function fdiv(float $dividend, float $divisor): float
  {
    return @($dividend / $divisor);
  }
}

get_resource_id

PHP 8 添加了新的 get_resource_id 函数，类似于将 (int) $resource 转换以更轻松地获取资源 ID，但是返回类型被检查为资源，返回值为整数，因此它们是类型安全的。

get_debug_type

get_debug_type 函数提供的值比现有的 gettype 函数更一致，并且最适合用于在异常消息或日志中获取意外变量的详细信息，因为它更冗长并提供额外信息。有关更多信息，请参阅Wiki。

preg_last_error_msg

PHP 的 preg_ 函数不会抛出异常，因此如果有错误，你必须使用 preg_last_error 来获取错误代码。但是如果你想要一个友好的错误消息而不仅仅是一个未解释的代码，在 PHP 8 中现在可以调用 preg_last_error_msg。如果没有错误，则返回“没有错误”。

由于本书面向初学者到中级水平，我只是真正触及了 PHP 8 中所有伟大新功能的皮毛，让您品尝可以立即开始使用的主要功能。然而，如果您渴望学习关于这个里程碑更新的所有内容，您可以在官方网页上获取完整详情。

MySQL 8

MySQL 8 首次发布于 2018 年，在本书之前的版本中无法覆盖更新中包含的功能。因此，现在，随着最新更新（至 8.0.22）在 2020 年底的发布，是一个很好的机会，了解 MySQL 8 相比早期版本提供的所有功能，如更好的 Unicode 支持、更好的 JSON 和文档处理、地理支持以及窗口函数。

在此摘要中，您将获得最新版本 8 中已经改进、升级或添加的八个领域的概述。

注意

MySQL 8 是版本 5.7 的继任者，因为版本 6 从未真正被开发社区接受，而当 Sun Microsystems 收购 MySQL 时，版本 6 的开发被中止。更重要的是，在版本 8 之前，最大的变化是从 5.6 到 5.7，因此根据 Sun 的说法，“由于我们在这个 MySQL 版本中引入了许多新的重要功能，我们决定启动一个全新的系列。由于 MySQL 之前实际上已经使用了系列号 6 和 7，所以我们选择了 8.0。”

SQL 更新

MySQL 8 现在引入了窗口函数（也称为分析函数）。它们类似于分组聚合函数，将行集的计算折叠为单行。然而，窗口或分析函数对结果集中的每一行执行聚合操作，是非聚合的。因为它们不是 MySQL 使用的核心部分，并且应被视为高级扩展，所以本书不涵盖它们。

新函数包括RANK、DENSE_RANK、PERCENT_RANK、CUME_DIST、NTILE、ROW_NUMBER、FIRST_VALUE、LAST_VALUE、NTH_VALUE，如果需要了解更多信息，可以在 MySQL 的官方网站上找到完整文档。

MySQL 8 还引入了递归通用表达式（CTE）、增强的 SQL 锁定子句中的NOWAIT和SKIP LOCKED的替代方法、降序索引、GROUPING函数和优化器提示。

所有这些以及更多内容可以在MySQL 网站上查看。

JSON（JavaScript 对象表示法）

有多个新函数用于处理 JSON，同时 JSON 值的排序和分组已得到改进。此外，路径表达式中的范围扩展语法和排序改进，还有新的表、聚合、合并和其他函数。

鉴于 MySQL 的这些改进和 JSON 的使用，可以认为 MySQL 现在可以用来替代 NoSQL 数据库。

使用 JSON 在 MySQL 中的使用超出了本书的范围，但如果这是你感兴趣的领域，你可以参考所有新特性的官方文档。

地理信息支持

MySQL 8 还引入了 GIS（地理信息系统）支持，包括对 SRS（空间参考系统）的元数据支持、SRS 数据类型、索引和函数。这意味着 MySQL 现在可以（例如）使用任何支持的空间参考系统中的纬度和经度坐标计算地球表面上两点之间的距离。

若要详细了解如何访问 MySQL GIS，可以参考官方网站。

可靠性

MySQL 已经非常可靠，但在版本 8 中进一步改进，通过将其元数据存储在 InnoDB 事务存储引擎中，使得用户、权限和字典表现在都位于InnoDB中。

在 MySQL 8 中，现在只有一个数据字典，而在 5.7 版本及更早版本中有两个数据字典（一个用于服务器，一个用于InnoDB层），这可能导致不同步问题。

从版本 8 开始，用户可以确保任何 DDL 语句（如CREATE TABLE）要么完全执行，要么完全不执行，以防止主副本服务器可能出现不同步的情况。

速度和性能

在 MySQL 中，通过在InnoDB中将表存储为简单视图的数据字典表上，信息模式的速度提高了多达 100 倍。此外，对性能模式表添加了超过 100 个索引，进一步提高了性能，读写速度更快，适用于 I/O 密集型工作负载和高竞争工作负载，此外，现在可以将用户线程映射到 CPU 以进一步优化性能。

MySQL 8 在处理大量写入工作负载时，与版本 5.7 相比，性能提升了多达四倍，并对读写工作负载提供了更显著的增长。

使用 MySQL，您可以充分利用每个存储设备的能力，提高在高竞争工作负载下的性能（事务排队等待锁的情况）。

总的来说，MySQL 8 的开发人员称其速度提高了最多两倍，您可以在官方网站了解他们的理由和如何在应用程序中实现这一性能增加的技巧。

管理

使用 MySQL 8，您现在可以在可见和不可见之间切换索引。不可见索引在创建查询计划时不被优化器考虑，但仍在后台维护，因此很容易使其再次可见，让您决定是否可以删除索引。

此外，现在用户完全控制 Undo 表空间，并且现在可以持久保存在服务器重启时会丢失的全局动态服务器变量。另外还有一个 SQL RESTART命令，允许通过 SQL 连接远程管理 MySQL 服务器，并提供了一个改进的RENAME COLUMN命令，以取代先前的ALTER TABLE...CHANGE语法。

更多详细信息，请参阅官方网站。

安全

安全性在计划第 8 版时绝对没有被忽视，因为有许多新的改进。

首先，从mysql_native_password更改为caching_sha2_password作为默认认证插件，并且在企业版和现在的社区版中选择了 OpenSSL 作为默认的 TLS/SSL 库，并且是动态链接的。

使用 MySQL 8，现在 Undo 和 Redo 日志已加密，实现了 SQL 角色，您可以向用户授予角色和角色的权限。在创建新用户时还可以使用强制角色。现在有一个安全存储的密码历史的全局或用户级密码轮换策略。

在认证过程中，根据连续失败的登录尝试，MySQL 8 增加了延迟，以减缓暴力攻击尝试。延迟触发和最大延迟长度是可配置的。

有关 MySQL 和安全性的更多信息，请访问官方网站。

问题

1. 当声明类属性时，PHP 8 现在允许您做什么？

2. 什么是空安全操作符，它有什么作用？

3. 如何在 PHP 8 中使用match表达式，并且它为什么比替代方法更好？

4. PHP 8 中现在可以使用什么简单易用的新函数来确定一个字符串是否存在于另一个字符串中？

5. 在 PHP 8 中，如何进行浮点数除法计算，而不会导致除以零错误？

6. 什么是 polyfill？

7. PHP 8 中，查看由preg_函数调用生成的最新错误的简单新方法是什么？

8. MySQL 8 默认使用什么作为其事务性存储引擎？

9. 在 MySQL 8 中，你可以使用什么命令来代替ALTER TABLE...CHANGE TABLE来修改列名？

10. MySQL 8 中默认的认证插件是什么？

参见 “第十章答案”，在 附录 A 中找到这些问题的答案。

第十一章：使用 PHP 访问 MySQL

如果你已经完成了前面的章节，那么你应该已经熟练掌握了使用 MySQL 和 PHP。在本章中，你将学习如何通过使用 PHP 的内置函数来集成这两者，以访问 MySQL。

使用 PHP 查询 MySQL 数据库。

使用 PHP 作为 MySQL 接口的原因是将 SQL 查询的结果格式化为在网页上可见的形式。只要你能使用用户名和密码登录到你的 MySQL 安装中，你也可以从 PHP 中进行这样的操作。

然而，与其使用 MySQL 的命令行来输入指令和查看输出，你可以创建传递给 MySQL 的查询字符串。当 MySQL 返回其响应时，它将以 PHP 可以识别的数据结构形式返回，而不是你在命令行工作时看到的格式化输出。进一步的 PHP 命令可以检索数据并为网页格式化它。

过程

使用 PHP 与 MySQL 的过程如下：

1. 连接到 MySQL 并选择要使用的数据库。

2. 准备一个查询字符串。

3. 执行查询。

4. 检索结果并将其输出到网页。

5. 重复步骤 2 至 4，直到检索到所有所需数据。

6. 与 MySQL 断开连接。

我们将依次完成这些步骤，但首先重要的是以安全的方式设置好你的登录细节，这样在你的系统上窥探的人们就很难访问你的数据库。

创建一个登录文件

大多数使用 PHP 开发的网站包含多个程序文件，这些文件将需要访问 MySQL，并因此需要登录和密码细节。因此，创建一个单独的文件来存储这些信息，并在需要的地方包含该文件是明智的。示例 11-1 展示了这样一个文件，我称之为login.php。

示例 11-1. login.php 文件

<?php // login.php   $host = '`localhost`';    // `Change as necessary`
  $data = '`publications`'; // `Change as necessary`
  $user = '`root`';         // `Change as necessary`
  $pass = '`mysql`';        // `Change as necessary`
  $chrs = 'utf8mb4';
  $attr = "mysql:host=$host;dbname=$data;charset=$chrs";
  $opts =
  [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
  ];
?>

键入示例，将用户名root和密码mysql替换为你在 MySQL 数据库中使用的值（如果需要，还要替换主机和数据库名称），并将其保存到你在第二章中设置的文档根目录中。我们很快将使用这个文件。

主机名localhost应该能正常工作，只要你在本地系统上使用 MySQL 数据库，并且数据库publications应该能正常工作，如果你一直使用的是我使用过的示例。

封闭的<?php和?>标签对于示例 11-1 中的login.php文件尤为重要，因为它们意味着只有在 PHP 代码中间的行才能被解释。如果你省略它们，并且有人从你的网站直接调用这个文件，它将显示为文本并暴露你的秘密。但是，如果标签放置正确，所有人将只会看到一个空白页面。文件将正确包含你的其他 PHP 文件。

注意

在本书的早期版本中，我们使用了直接访问 MySQL，这完全不安全，后来改用了 mysqli，这要安全得多。但是，俗话说时间在前进，现在有了从 PHP 访问 MySQL 数据库的最安全和最简便的方法，称为 PDO，在本书的这一版本中我们默认使用它作为 PHP 中访问数据库的轻量级和一致的接口。PDO 代表 PHP 数据对象，是一个使用统一 API 的数据访问层。实现 PDO 接口的每个数据库驱动程序都可以将特定于数据库的特性公开为常规扩展函数。

$host 变量将告诉 PHP 连接到数据库时要使用哪台计算机。这是必需的，因为您可以访问与您的 PHP 安装连接的任何计算机上的 MySQL 数据库，这可能包括任何连接到网络的主机。然而，本章中的示例将在本地服务器上运行。因此，不需要指定域名，如 mysql.myserver.com，您可以直接使用单词 localhost（或 IP 地址 127.0.0.1）。

我们将使用的数据库 $data 是我们在 第八章 中创建的名为 publications 的数据库（如果您使用的是服务器管理员提供的其他数据库，则必须相应修改 login.php）。

$chrs 表示字符集，在本例中我们使用 utf8mb4，而 $attr 和 $opts 包含访问数据库所需的附加选项。

注意

将这些登录详细信息保存在一个地方的另一个好处是，您可以随意更改密码，并且每当您更改时只需更新一个文件，无论有多少个 PHP 文件访问 MySQL。

连接到 MySQL 数据库

现在您已经保存了 login.php 文件，可以通过使用 require_once 语句将其包含到需要访问数据库的任何 PHP 文件中。这比使用 include 语句更可取，因为如果找不到包含登录数据库详细信息的文件，它将生成致命错误，相信我，找不到这个文件是致命错误。

此外，使用 require_once 而不是 require 意味着只有在之前未包含时才会读取文件，这可以防止多余的重复磁盘访问。示例 11-2 显示了使用的代码。

示例 11-2. 使用 PDO 连接到 MySQL 服务器

<?php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }
?>

此示例通过调用 PDO 方法的新实例来创建一个名为 $pdo 的新对象，并传递从 login.php 文件检索到的所有值。我们通过使用 try...catch 命令对错误进行检查。

PDO 对象在以下示例中用于访问 MySQL 数据库。

注意

永远不要试图输出从 MySQL 接收到的任何错误消息的内容。与其帮助用户，你可能会向黑客泄露敏感信息，如登录详细信息。相反，根据错误消息向你的代码报告的信息指导用户克服困难。

构建和执行查询

从 PHP 向 MySQL 发送查询就像在连接对象的query方法中包含相关 SQL 一样简单。示例 11-3 展示了如何做到这一点。

示例 11-3. 使用 PDO 查询数据库

<?php
  $query  = "SELECT * FROM classics";
  $result = $pdo->query($query);
?>

正如你所见，从 PHP 向 MySQL 发送查询与在命令行直接输入的内容几乎一样，唯一的区别是在访问 MySQL 时不需要尾随分号。

在这里，变量$query被赋予一个包含要执行的查询的字符串，然后传递给$pdo对象的query方法，该方法返回一个结果，我们将其放入$result对象中。

所有由 MySQL 返回的数据现在以易于查询的格式存储在$result对象中。

获取结果

一旦你在$result中得到一个对象返回，你可以使用它逐个提取你想要的数据项，使用对象的fetch方法。示例 11-4 将之前的示例结合并扩展为一个程序，你可以自己运行以检索结果（如图 11-1 所示）。输入此脚本并使用文件名 query.php 保存它，或者从示例仓库下载它。

示例 11-4. 逐行提取结果

<?php // query.php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $query  = "SELECT * FROM classics";
  $result = $pdo->query($query);

  while ($row = $result->fetch())
  {
    echo 'Author:   ' . htmlspecialchars($row['author'])   . "<br>";
    echo 'Title:    ' . htmlspecialchars($row['title'])    . "<br>";
    echo 'Category: ' . htmlspecialchars($row['category']) . "<br>";
    echo 'Year:     ' . htmlspecialchars($row['year'])     . "<br>";
    echo 'ISBN:     ' . htmlspecialchars($row['isbn'])     . "<br><br>";
  }
?>

图 11-1. 来自 query.php 的输出

在这里，每次循环时，我们调用$pdo对象的fetch方法来检索存储在每行中的值，并使用echo语句输出结果。如果你看到结果顺序不同，不要担心。这是因为我们没有使用ORDER BY命令指定应返回的顺序，所以顺序是未指定的。

当在浏览器中显示数据时，其源可能是（或可能是）用户输入时，总会存在嵌入其中的阴险 HTML 字符的风险，即使你认为它已经经过了先前的清理。这些字符可能会被用于跨站点脚本（XSS）攻击。防止这种可能性的简单方法是将所有此类输出嵌入到htmlspecialchars函数的调用中，该函数将所有这些字符替换为无害的 HTML 实体。这种技术已在前面的示例中实施，并将在许多后续示例中使用。

在 第九章 中，我讨论了第一、第二和第三范式。您可能已经注意到 classics 表不符合这些范式，因为作者和书籍详情都包含在同一个表中。这是因为我们在遇到规范化之前创建了这个表。但是，为了说明从 PHP 访问 MySQL 的目的，重新使用此表可以避免输入新的测试数据，因此我们暂时保留它。

在指定样式的情况下获取一行

fetch 方法可以以各种风格返回数据，包括以下方式：

PDO::FETCH_ASSOC

返回下一行作为一个由列名作为索引的数组

PDO::FETCH_BOTH （默认）

返回下一行作为一个既由列名又由列号索引的数组

PDO::FETCH_LAZY

返回下一行作为一个匿名对象，其中属性名作为属性

PDO::FETCH_OBJ

返回下一行作为一个匿名对象，其中列名作为属性

PDO::FETCH_NUM

返回一个由列号索引的数组

如需查看 PDO 提取样式的完整列表，请参考 在线参考。

因此，下面（稍作更改）的示例（在 示例 11-5 中显示）更清楚地显示了在这种情况下 fetch 方法的意图。您可能希望使用名称 fetchrow.php 保存此修订文件。

示例 11-5. 逐行获取结果

<?php //fetchrow.php   require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $query  = "SELECT * FROM classics";
  $result = $pdo->query($query);

  while ($row = $result->fetch(`PDO``::``FETCH_BOTH`)) // Style of fetch   {
    echo 'Author:   ' . htmlspecialchars($row['author'])   . "<br>";
    echo 'Title:    ' . htmlspecialchars($row['title'])    . "<br>";
    echo 'Category: ' . htmlspecialchars($row['category']) . "<br>";
    echo 'Year:     ' . htmlspecialchars($row['year'])     . "<br>";
    echo 'ISBN:     ' . htmlspecialchars($row['isbn'])     . "<br><br>";
  }
?>

在这个修改后的代码中，仅对 $result 对象进行了五分之一的询问（与前一个示例相比），并且每次迭代循环中仅进行一次对象搜索，因为每行数据都通过 fetch 方法完整地返回为一个数组，然后分配给数组 $row。

此脚本使用关联数组。关联数组通常比数值数组更有用，因为您可以通过名称引用每列，如 $row['author']，而不是试图记住其在列顺序中的位置。

关闭连接

PHP 在脚本结束后会释放为对象分配的内存，因此在小型脚本中通常不需要担心释放内存。然而，如果您希望手动关闭 PDO 连接，只需将其设置为 null 即可：

$pdo = null;

实际示例

现在是时候编写我们的第一个示例，使用 PHP 向 MySQL 表中插入数据并从中删除。建议您输入 示例 11-6 并将其保存到您的 Web 开发目录中，文件名为 sqltest.php。您可以在 图 11-2 中看到该程序输出的示例。

注意

示例 11-6 创建了一个标准的 HTML 表单。 第十二章 详细解释了表单，但在本章中，我默认处理表单处理并只处理数据库交互。

示例 11-6. 使用 sqltest.php 进行插入和删除

<?php // sqltest.php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  if (isset($_POST['delete']) && isset($_POST['isbn']))
  {
    $isbn   = get_post($pdo, 'isbn');
    $query  = "DELETE FROM classics WHERE isbn=$isbn";
    $result = $pdo->query($query);
  }

  if (isset($_POST['author'])   &&
      isset($_POST['title'])    &&
      isset($_POST['category']) &&
      isset($_POST['year'])     &&
      isset($_POST['isbn']))
  {
    $author   = get_post($pdo, 'author');
    $title    = get_post($pdo, 'title');
    $category = get_post($pdo, 'category');
    $year     = get_post($pdo, 'year');
    $isbn     = get_post($pdo, 'isbn');

    $query    = "INSERT INTO classics VALUES" .
      "($author, $title, $category, $year, $isbn)";
    $result = $pdo->query($query);
  }

  echo <<<_END
  <form action="sqltest.php" method="post"><pre>
    Author <input type="text" name="author">
     Title <input type="text" name="title">
  Category <input type="text" name="category">
      Year <input type="text" name="year">
      ISBN <input type="text" name="isbn">
           <input type="submit" value="ADD RECORD">
  </pre></form>
_END;

  $query  = "SELECT * FROM classics";
  $result = $pdo->query($query);

  while ($row = $result->fetch())
  {
    $r0 = htmlspecialchars($row['author']);
    $r1 = htmlspecialchars($row['title']);
    $r2 = htmlspecialchars($row['category']);
    $r3 = htmlspecialchars($row['year']);
    $r4 = htmlspecialchars($row['isbn']);

    echo <<<_END
  <pre>
    Author $r0
     Title $r1
  Category $r2
      Year $r3
      ISBN $r4
  </pre>
  <form action='sqltest.php' method='post'>
  <input type='hidden' name='delete' value='yes'>
  <input type='hidden' name='isbn' value='$r4'>
  <input type='submit' value='DELETE RECORD'></form>
_END;
  }

  function get_post($pdo, $var)
  {
    return $pdo->quote($_POST[$var]);
  }
?>

图 11-2. 来自示例 11-6，sqltest.php 的输出

这个程序大约有 80 行代码，可能看起来令人生畏，但不用担心——你已经在示例 11-4 中涵盖了许多行，并且代码的功能实际上非常简单。

首先检查可能已经输入的任何输入内容，然后根据提供的输入要么将新数据插入到publications数据库中的classics表中，要么从中删除一行。不管是否有输入，程序都会将表中的所有行输出到浏览器中。那么，让我们看看它是如何工作的。

新代码的第一部分开始使用isset函数检查是否已经向程序发送了所有字段的值。确认后，if语句中的每行调用get_post函数，该函数出现在程序末尾。此函数有一个小但至关重要的工作：从浏览器获取输入。

注意

出于清晰和简洁的原因，并且为了尽可能简单地解释事物，许多后续示例省略了某些非常明智的安全预防措施，这些措施本应使示例变得更长，可能会削弱对其功能的最清晰解释。因此，重要的是不要跳过本章后面关于防止数据库被黑客攻击的部分（“防止黑客攻击”），在这部分中，您将了解有关通过代码采取的额外措施来保护数据库的信息。

$_POST 数组

我在前面的章节中提到，浏览器通过 GET 请求或 POST 请求发送用户输入。通常首选 POST 请求（因为它可以防止在浏览器地址栏中放置不雅观的数据），因此我们在这里使用它。Web 服务器将所有用户输入（即使表单填写了一百个字段）捆绑到名为$_POST的数组中。

$_POST 是一个关联数组，在第六章中已经遇到过。根据表单设置为使用 POST 还是 GET 方法，$_POST或$_GET关联数组将被填充表单数据。它们可以以完全相同的方式读取。

每个字段在数组中都有一个以该字段命名的元素。因此，如果表单包含名为isbn的字段，则$_POST数组包含以单词isbn为键的元素。PHP 程序可以通过引用$_POST['isbn']或$_POST["isbn"]（在这种情况下，单引号和双引号具有相同的效果）来读取该字段。

如果 $_POST 语法对你来说仍然复杂，可以放心地使用我在 示例 11-6 中展示的惯例，将用户的输入复制到其他变量中，之后就可以忘记 $_POST。这在 PHP 程序中很正常：它们在程序开头从 $_POST 中检索所有字段，然后忽略它。

注意

没有理由向 $_POST 数组中的元素写入。它的唯一目的是从浏览器传递信息给程序，最好在修改数据之前将数据复制到自己的变量中。

因此，回到 get_post 函数，该函数将检索到的每个项通过 PDO 对象的 quote 方法传递，以转义黑客可能插入以破坏或更改数据库的引号，并为你的每个字符串添加引号，例如这样：

function get_post($pdo, $var)
{
  return $pdo->quote($_POST[$var]);
}

删除记录

在检查新数据是否已发布之前，程序会检查变量 $_POST['delete'] 是否有值。如果有，用户已点击“DELETE RECORD”按钮来删除记录。在这种情况下，$isbn 的值也将已发布。

正如你可能记得的那样，ISBN 唯一标识每个记录。HTML 表单将 ISBN 追加到变量 $query 中创建的 DELETE FROM 查询字符串中，然后将其传递给 $conn 对象的 query 方法以发送到 MySQL。

如果 $_POST['delete'] 没有设置（并且没有记录需要删除），会检查 $_POST['author'] 和其他已发布值。如果它们都有值，$query 将设置为 INSERT INTO 命令，后跟要插入的五个值。然后将字符串传递给 query 方法。

如果任何查询失败，try...catch 命令将导致错误的发生。在生产网站上，你不希望显示这些面向程序员的错误消息，你需要将你的 CATCH 语句替换为一个能够整洁地处理错误并决定向用户提供何种错误消息（如果有的话）的语句。

显示表单

在显示小表单之前（如在 图 11-2 中所示），程序通过将它们传递给 htmlspecialchars 函数，将从 $row 数组输出的元素的副本转义到变量 $r0 到 $r4 中，以替换任何潜在危险的 HTML 字符为无害的 HTML 实体。

接下来是显示输出的代码部分，使用了像在前几章中看到的 echo <<<_END..._END 结构输出 _END 标记之间的所有内容。

注意

程序可以不使用 echo 命令，而是使用 ?> 退出 PHP，输出 HTML，然后使用 <?php 重新进入 PHP 处理。使用哪种风格是程序员的个人偏好问题，但我始终建议保持在 PHP 代码内部，出于以下原因：

• 它清楚地表明，当您调试时（以及其他用户时），.php 文件中的所有内容都是 PHP 代码。因此，没有必要去寻找回到 HTML 的点。

• 当您希望直接在 HTML 中包含 PHP 变量时，您可以直接输入它。如果您回到 HTML，您将不得不暂时重新进入 PHP 处理，访问变量，然后再退出。

HTML 表单部分简单地将表单的操作设置为sqltest.php。这意味着当提交表单时，表单字段的内容将发送到文件sqltest.php，即程序本身。表单还设置为将字段作为 POST 请求发送，而不是 GET 请求。这是因为 GET 请求会附加到正在提交的 URL 中，并且在浏览器中可能看起来混乱。它们还允许用户轻松修改提交并尝试黑客攻击您的服务器（尽管这也可以通过浏览器开发者工具实现）。此外，避免 GET 请求可以防止过多的信息出现在服务器日志文件中。因此，尽可能使用 POST 提交，这还有利于减少提交的数据量。

在输出表单字段之后，HTML 显示一个名为添加记录的提交按钮，并关闭表单。请注意这里的<pre>和</pre>标签，它们用于强制使用等宽字体，以便所有输入都整齐地对齐。当位于<pre>标签内时，每行末尾的换行符也会输出。

查询数据库

接下来，代码回到了熟悉的示例 11-4 领域，其中向 MySQL 发送一个查询，请求查看classics表中的所有记录，如下所示：

$query  = "SELECT * FROM classics";
$result = $pdo->query($query);

接下来进入一个while循环以显示每行的内容。然后，程序通过调用$result的fetch方法，将结果行填充到数组$row中。

有了$row中的数据，现在很容易在随后的 heredoc echo语句中显示它，我选择使用<pre>标签来使每个记录的显示对齐。

在每个记录显示后，还有一个第二个表单，也会提交到sqltest.php（程序本身），但这次包含两个隐藏字段：delete和isbn。delete字段设置为yes，isbn设置为$row[isbn]中包含的值，其中包含记录的 ISBN。

然后显示名为删除记录的提交按钮，并关闭表单。然后一个花括号完成了while循环，该循环将继续，直到显示所有记录为止。

最后，您会看到函数get_post的定义，我们已经看过了。这就是我们的第一个 PHP 程序，用于操作 MySQL 数据库。因此，让我们看看它能做什么。

一旦你输入了程序（并纠正了任何输入错误），尝试在各种输入字段中输入以下数据，为书籍 Moby Dick 添加一个新记录到数据库中：

Herman Melville
Moby Dick
Fiction
1851
9780199535729

运行程序

当你使用“添加记录”按钮提交这些数据后，向下滚动网页以查看新添加的内容。它应该类似于 图 11-3，尽管由于我们没有使用 ORDER BY 对结果进行排序，因此它出现的位置是不确定的。

图 11-3. 向数据库中添加白鲸的结果

现在让我们看看通过创建一个虚拟记录来了解删除记录的工作原理。尝试在每个五个字段中只输入数字1，然后点击“添加记录”按钮。如果现在向下滚动，你会看到一个新的记录，只包含数字 1。显然，在这个表中这条记录是没有用的，所以现在点击“删除记录”按钮，再次向下滚动确认记录已删除。

注意

假设一切正常，现在你可以随意添加和删除记录。试着多做几次，但保留主要记录（包括 Moby Dick 的新记录），因为我们稍后会用到它们。你也可以尝试再次添加全 1 的记录几次，并注意第二次收到的错误消息，表明已经有一个 ISBN 号为 1 的记录。

实用的 MySQL

现在你可以开始学习一些实用的技术，以便在 PHP 中访问 MySQL 数据库，包括创建和删除表格；插入、更新和删除数据；以及保护数据库和网站免受恶意用户的侵害。请注意，以下示例假定你已经创建了本章前面讨论过的 login.php 程序。

创建表格

假设你正在一个野生动物园工作，需要创建一个数据库来存储它所养的各种类型猫的详细信息。据告知，这里有九个猫科动物——狮子、老虎、美洲豹、豹子、美洲狮、猎豹、山猫、瓜哇金钱豹和家猫，所以你需要一个用于这个的列。然后每只猫都被赋予了一个名字，所以又需要一个列，并且你还想要跟踪它们的年龄，这是另一个列。当然，你可能以后需要更多列，比如饮食需求、接种疫苗和其他细节，但现在已经足够开始了。每个动物还需要一个唯一标识符，所以你还决定创建一个叫做 id 的列。

示例 11-7 展示了你可能用来创建一个 MySQL 表来存储这些数据的代码，其中主要查询指定为粗体文本。

示例 11-7. 创建一个名为 cats 的表

<?php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $query = "`CREATE TABLE cats (     id SMALLINT NOT NULL AUTO_INCREMENT,     family VARCHAR(32) NOT NULL,     name VARCHAR(32) NOT NULL,     age TINYINT NOT NULL,     PRIMARY KEY (id)` )";

  $result = $pdo->query($query);
?>

正如你所看到的，MySQL 查询看起来就像直接在命令行中键入的内容，只是没有末尾的分号。

描述表格

当你未登录到 MySQL 命令行时，这里有一段方便的代码可以在浏览器内部验证表格是否已经正确创建。它简单地执行查询DESCRIBE cats，然后输出一个带有四个标题——Column、Type、Null 和 Key——以及表格中所有列的 HTML 表格。要在其他表格中使用它，只需将查询中的cats替换为新表格的名称（参见示例 11-8）。

示例 11-8. 描述 cats 表格

<?php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $query  = "`DESCRIBE cats`";
  $result = $pdo->query($query);

  echo "<table><tr><th>Column</th><th>Type</th><th>Null</th><th>Key</th></tr>";

  while ($row = $result->fetch(`PDO``::``FETCH_NUM`))
  {
    echo "<tr>";
    for ($k = 0 ; $k < 4 ; ++$k)
      echo "<td>" . htmlspecialchars($row[$k]) . "</td>";
    echo "</tr>";
  }

  echo "</table>";
?>

看看如何使用FETCH_NUM的 PDO 获取样式返回数值数组，以便轻松显示返回数据的内容，而不使用名称。程序的输出应如下所示：

Column Type        Null Key
id     smallint(6) NO   PRI
family varchar(32) NO
name   varchar(32) NO
age    tinyint(4)  NO

删除表格

删除表格非常容易，因此非常危险，请务必小心。示例 11-9 显示了您需要的代码。但是，在您通过其他示例（直到“执行其他查询”）之前，我不建议您尝试它，因为它将删除表 cats，您将需要使用 示例 11-7 重新创建它。

示例 11-9. 删除 cats 表格

<?php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $query  = "`DROP TABLE cats`";
  $result = $pdo->query($query);
?>

添加数据

现在让我们使用 示例 11-10 中的代码向表格中添加一些数据。

示例 11-10. 向 cats 表格添加数据

<?php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $query  = "`INSERT INTO cats VALUES(NULL, 'Lion', 'Leo', 4)`";
  $result = $pdo->query($query);
?>

你可能希望通过修改 $query 来添加一些更多的数据项，然后再次在浏览器中调用程序：

$query = "INSERT INTO cats VALUES(NULL, 'Cougar', 'Growler', 2)";
$query = "INSERT INTO cats VALUES(NULL, 'Cheetah', 'Charly', 3)";

顺便提一句，注意作为第一个参数传递的NULL值？这是因为 id 列的类型是 AUTO_INCREMENT，MySQL 将根据序列中的下一个可用编号决定分配什么值。因此，我们只需传递一个NULL值，这将被忽略。

当然，用数组创建并插入数据是将数据快速填充到 MySQL 中的最有效方法。

注意

在本书的这一部分，我专注于向您展示如何直接将数据插入到 MySQL 中（并提供一些保持过程安全的安全预防措施）。然而，在本书的后续部分，我们将介绍一种更好的方法，您可以使用占位符（见“使用占位符”），这几乎使用户无法向数据库中注入恶意攻击。因此，在阅读本节时，请理解这是 MySQL 插入操作的基础知识，并记住我们将在以后进一步完善它。

检索数据

现在已经向 cats 表格中输入了一些数据，示例 11-11 显示了如何检查其是否已正确插入。

示例 11-11. 从 cats 表格检索行

<?php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $query  = "`SELECT * FROM cats`";
  $result = $pdo->query($query);

  echo "<table><tr> <th>Id</th> <th>Family</th><th>Name</th><th>Age</th></tr>";

  while ($row = $result->fetch(`PDO``::``FETCH_NUM`))
  {
    echo "<tr>";
    for ($k = 0 ; $k < 4 ; ++$k)
      echo "<td>" . htmlspecialchars($row[$k]) . "</td>";
    echo "</tr>";
  }

  echo "</table>";
?>

此代码只需执行 MySQL 查询SELECT * FROM cats，然后显示所有以数值方式访问的数组形式返回的行。其输出如下：

Id Family  Name    Age
1  Lion    Leo     4
2  Cougar  Growler 2
3  Cheetah Charly  3

在这里，您可以看到id列已经正确地自动增加。

更新数据

修改您已经插入的数据也非常简单。您是否注意到猎豹 Charly 的名字的拼写错误？让我们将其更正为 Charlie，就像示例 11-12 中所示。

示例 11-12. 将猎豹 Charly 的名称更改为 Charlie

<?php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $query  = "`UPDATE cats SET name='Charlie' WHERE name='Charly'`";
  $result = $pdo->query($query);
?>

如果您再次运行示例 11-11，您将看到它现在输出以下内容：

Id Family  Name    Age
1  Lion    Leo     4
2  Cougar  Growler 2
3  Cheetah Charlie 3

删除数据

Cougar Growler 已被转移到另一个动物园，所以现在是时候从数据库中删除它了；参见示例 11-13。

示例 11-13. 从 cats 表中删除 Cougar Growler

<?php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $query  = "`DELETE FROM cats WHERE name='Growler'`";
  $result = $pdo->query($query);
?>

这使用了标准的DELETE FROM查询，当您运行示例 11-11 时，您可以看到行已在以下输出中被移除：

Id Family  Name    Age
1  Lion    Leo     4
3  Cheetah Charlie 3

使用 AUTO_INCREMENT

当使用AUTO_INCREMENT时，您无法知道在插入行之前列已经被赋予了什么值。相反，如果您需要知道它，您必须在之后使用mysql_insert_id函数询问 MySQL。这种需求很常见：例如，当您处理购买时，您可能会将新客户插入Customers表中，然后在将购买插入Purchases表时引用新创建的CustId。

注意

建议使用AUTO_INCREMENT而不是选择id列中的最高 ID 并将其递增一，因为并发查询可能会在获取最高值后并在计算值存储之前更改该列中的值。

示例 11-10 可以重写为示例 11-14，以在每次插入后显示此值。

示例 11-14. 向 cats 表中添加数据并报告插入 ID

<?php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $query  = "`INSERT INTO cats VALUES(NULL, 'Lynx', 'Stumpy', 5`)";
  $result = $pdo->query($query);

  echo "The Insert ID was: " . `$pdo``->``lastInsertId``()`;
?>

表的内容现在应该像下面这样（请注意先前的id值为2没有被重用，因为这可能在某些情况下会引起问题）：

Id Family  Name    Age
1  Lion    Leo     4
3  Cheetah Charlie 3
4  Lynx    Stumpy  5

使用插入 ID

在多个表中插入数据是非常常见的：一本书及其作者，一个客户及其购买记录等等。当在具有自动增量列的情况下进行此操作时，您需要保留返回的插入 ID 以存储在相关表中。

例如，假设这些猫可以作为筹集资金的手段被公众“领养”，当新猫被存储在cats表中时，我们还希望创建一个键将其与动物的领养主绑定。用于实现此目的的代码类似于示例 11-14，不同之处在于返回的插入 ID 存储在变量$insertID中，并作为后续查询的一部分使用：

$query    = "INSERT INTO cats VALUES(NULL, 'Lynx', 'Stumpy', 5)";
$result   = $pdo->query($query);
`$insertID` = $pdo->lastInsertId();

$query    = "INSERT INTO owners VALUES(`$insertID`, 'Ann', 'Smith')";
$result   = $pdo->query($query);

现在，通过猫的唯一 ID 将猫连接到其“所有者”，该 ID 是通过AUTO_INCREMENT自动创建的。此示例，尤其是最后两行，是展示如何在我们创建了一个名为owners的表后，如何使用插入 ID 作为键的理论代码。

执行附加查询

好了，关于猫的趣味就到此为止。要探索一些稍微复杂的查询，我们需要恢复使用您在第八章中创建的customers和classics表。customers表中将有两位客户；classics表包含一些书籍的详细信息。它们还共享一个名为isbn的常见列，您可以使用它来执行附加查询。

例如，要显示所有客户以及他们购买的书籍的标题和作者，您可以使用示例 11-15 中的代码。

示例 11-15. 执行次要查询

<?php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $query  = "`SELECT * FROM customers`";
  $result = $pdo->query($query);

  while ($row = $result->fetch())
  {
    $custname = htmlspecialchars($row['name']);
    $custisbn = htmlspecialchars($row['isbn']);

    echo "$custname purchased ISBN $custisbn: <br>";

    $subquery  = "`SELECT * FROM classics WHERE isbn='``$custisbn``'`";
    $subresult = $pdo->query($subquery);
    $subrow    = $subresult->fetch();

    $custbook  = htmlspecialchars($subrow['title']);
    $custauth  = htmlspecialchars($subrow['author']);

    echo "&nbsp;&nbsp; '$custbook' by $custauth<br><br>";
  }
?>

此程序使用对customers表的初始查询来查找所有客户，然后根据每个客户购买的书籍的 ISBN，对classics表进行新的查询，以查找每本书的标题和作者。此代码的输出应类似于以下内容：

Joe Bloggs purchased ISBN 9780099533474:
  'The Old Curiosity Shop' by Charles Dickens

Jack Wilson purchased ISBN 9780517123201:
  'The Origin of Species' by Charles Darwin

Mary Smith purchased ISBN 9780582506206:
  'Pride and Prejudice' by Jane Austen

注意

当然，尽管它不会说明执行附加查询，但在这种特定情况下，您也可以使用NATURAL JOIN查询返回相同的信息（参见第八章），如下所示：

SELECT name,isbn,title,author FROM customers
 NATURAL JOIN classics;

防止黑客攻击

如果您还没有研究过，您可能很难意识到将未经检查的用户输入传递给 MySQL 有多么危险。例如，假设您有一个简单的代码片段来验证用户，看起来像这样：

$user  = $_POST['user'];
$pass  = $_POST['pass'];
$query = "SELECT * FROM users WHERE user='$user' AND pass='$pass'";

乍一看，您可能会认为这段代码完全没问题。如果用户为$user和$pass分别输入fredsmith和mypass的值，则作为传递给 MySQL 的查询字符串将如下所示：

SELECT * FROM users WHERE user='fredsmith' AND pass='mypass'

这一切都很好，但是如果有人为$user输入以下内容（甚至不为$pass输入任何内容）会怎么样？

admin' #

让我们看一下将发送到 MySQL 的字符串：

SELECT * FROM users WHERE user='admin' #' AND pass=''

您看到问题了吗？发生了SQL 注入攻击。在 MySQL 中，#符号表示注释的开始。因此，用户将以管理员（假设存在用户admin）身份登录，而无需输入密码。以下是将执行的查询部分显示为粗体；其余部分将被忽略。

`SELECT` `*` `FROM` `users` `WHERE` `user``=``'admin'` `#`' AND pass=''

但是，如果这只是一个恶意用户对您做的一切，您可以算自己非常幸运。至少您可能仍然可以进入应用程序并撤消用户作为管理员所做的任何更改。但是，如果您的应用程序代码从数据库中删除用户呢？代码可能看起来像这样：

$user  = $_POST['user'];
$pass  = $_POST['pass'];
$query = "DELETE FROM users WHERE user='$user' AND pass='$pass'";

再次，乍一看，这看起来很正常，但是如果有人为$user输入以下内容会怎样？

anything' OR 1=1 #

MySQL 将按以下方式解释这个字符串：

`DELETE` `FROM` `users` `WHERE` `user``=``'anything'` `OR` `1``=``1` `#`' AND pass=''

噢——由于任何陈述后面跟着的OR 1=1都会始终为TRUE，所以该 SQL 查询将始终为TRUE，因此，由于 # 字符而忽略了其余部分的陈述，您现在失去了整个用户数据库！那么对于这种攻击，你能做些什么呢？

您可以采取的步骤

首先，不要依赖于 PHP 的内置魔术引号，它会自动转义任何字符，例如单引号和双引号，并在它们之前加上反斜杠（\）。为什么？因为此功能可以关闭。许多程序员这样做是为了在服务器上放置他们自己的安全代码，并不能保证这在您所使用的服务器上没有发生。实际上，此功能已自 PHP 5.3.0 起不建议使用，并在 PHP 5.4.0 中删除。

相反，正如我们之前展示的那样，你可以使用 PDO 对象的quote方法来转义所有字符并用引号包围字符串。示例 11-16 是一个你可以使用的函数，它将删除用户输入字符串中添加的任何魔术引号，然后为您正确地进行了清理。

示例 11-16. 如何正确清理 MySQL 的用户输入

<?php
  function mysql_fix_string($pdo, $string)
  {
    if (get_magic_quotes_gpc()) $string = stripslashes($string);
    return $pdo->quote($string);
  }
?>

如果魔术引号处于活动状态，则get_magic_quotes_gpc函数将返回TRUE。在这种情况下，必须删除添加到字符串中的任何反斜杠，否则quote方法可能会导致一些字符双重转义，从而创建损坏的字符串。示例 11-17 演示了如何在您自己的代码中使用mysql_fix_string。

示例 11-17. 如何安全地使用用户输入访问 MySQL

<?php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $user  = mysql_fix_string($pdo, $_POST['user']);
  $pass  = mysql_fix_string($pdo, $_POST['pass']);
  $query = "`SELECT * FROM users WHERE user=``$user` `AND pass=``$pass`";

  // Etc... 
  function mysql_fix_string($pdo, $string)
  {
    if (get_magic_quotes_gpc()) $string = stripslashes($string);
    return $pdo->quote($string);
  }
?>

注意

请记住，由于引号方法会自动在字符串周围添加引号，因此您不应在任何使用这些经过清理的字符串的查询中使用它们。因此，在使用以下查询之前：

 $query = "SELECT * FROM users WHERE user=`'``$user``'` AND pass=`'``$pass``'`";

您应该输入以下内容：

 $query = "SELECT * FROM users WHERE user=`$user` AND pass=`$pass`";

然而，这些预防措施正变得不那么重要，因为有一种更简单和更安全的访问 MySQL 的方法，可以避免这些类型的函数——即使用占位符，下面将对此进行解释。

使用占位符

到目前为止，您看到的所有方法都适用于 MySQL，但都存在安全风险，因为字符串需要不断转义以防止安全风险。因此，现在您已经了解了基础知识，让我介绍与 MySQL 交互的最佳和推荐方法，从安全角度来看几乎是防弹的。阅读完本节后，您不应再直接将数据插入 MySQL（尽管重要的是向您展示如何做到这一点），而应始终使用占位符。

那么什么是占位符？它们是准备语句中的位置，其中数据直接传输到数据库，无法将用户提交的（或其他）数据解释为 MySQL 语句（以及可能导致的黑客攻击）。

这项技术要求您首先准备要在 MySQL 中执行的语句，但是保留所有与数据有关的语句部分为简单的问号。

在普通的 MySQL 中，准备语句看起来像示例 11-18。

示例 11-18. MySQL 占位符

PREPARE statement FROM "INSERT INTO classics VALUES(?,?,?,?,?)";

SET @author   = "Emily Brontë",
    @title    = "Wuthering Heights",
    @category = "Classic Fiction",
    @year     = "1847",
    @isbn     = "9780553212587";

EXECUTE statement USING @author,@title,@category,@year,@isbn;
DEALLOCATE PREPARE statement;

这可能对提交到 MySQL 很繁琐，因此PDO扩展使您更容易处理占位符，提供了一个名为prepare的现成方法，您可以像这样调用它：

$stmt = $pdo->prepare('INSERT INTO classics VALUES(?,?,?,?,?)');

该方法返回的对象$stmt（简称statement）用于将数据发送到服务器，代替问题标记。首次使用是将一些 PHP 变量绑定到每个问题标记（占位符参数）中，如下所示：

$stmt->bindParam(1, $author,   PDO::PARAM_STR, 128);
$stmt->bindParam(2, $title,    PDO::PARAM_STR, 128);
$stmt->bindParam(3, $category, PDO::PARAM_STR, 16 );
$stmt->bindParam(4, $year,     PDO::PARAM_INT     );
$stmt->bindParam(5, $isbn,     PDO::PARAM_STR, 13 );

bindParam的第一个参数是表示要插入的值在查询字符串中的位置的数字（换句话说，指的是哪个问号占位符），其后是将为该占位符提供数据的变量，然后是变量必须是的数据类型，如果是字符串，还有另一个值指定其最大长度。

当将变量绑定到准备好的语句中时，现在有必要填充它们的数据传递给 MySQL，就像这样：

$author   = 'Emily Brontë';
$title    = 'Wuthering Heights';
$category = 'Classic Fiction';
$year     = '1847';
$isbn     = '9780553212587';

此时，PHP 已经拥有执行准备语句所需的一切，因此您可以发出以下命令，调用先前创建的$stmt对象的execute方法，并将要插入的值作为数组传递：

$stmt->execute([$author, $title, $category, $year, $isbn]);

在继续之前，验证命令是否成功执行是有意义的。以下是您如何通过调用$stmt的rowCount方法来执行验证：

printf("%d Row inserted.\n", $stmt->rowCount());

在这种情况下，输出应指示已插入一行。

当你把所有这些结合起来，结果就是示例 11-19。

示例 11-19. 发出准备语句

<?php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $stmt = $pdo->prepare('INSERT INTO classics VALUES(?,?,?,?,?)');
  $stmt->bindParam(1, $author,   PDO::PARAM_STR, 128);
  $stmt->bindParam(2, $title,    PDO::PARAM_STR, 128);
  $stmt->bindParam(3, $category, PDO::PARAM_STR, 16 );
  $stmt->bindParam(4, $year,     PDO::PARAM_INT     );
  $stmt->bindParam(5, $isbn,     PDO::PARAM_STR, 13 );

  $author   = 'Emily Brontë';
  $title    = 'Wuthering Heights';
  $category = 'Classic Fiction';
  $year     = '1847';
  $isbn     = '9780553212587';

  $stmt->execute([$author, $title, $category, $year, $isbn]);
  printf("%d Row inserted.\n", $stmt->rowCount());
?>

每当你能够在非准备语句的地方使用准备语句时，你都将关闭一个潜在的安全漏洞，因此值得花些时间了解如何使用它们。

防止 JavaScript 注入到 HTML 中

还有另一种类型的注入需要关注——不是为了您自己网站的安全，而是为了用户的隐私和保护。那就是跨站脚本攻击，也称为XSS 攻击。

当你允许用户输入 HTML 或者更常见的 JavaScript 代码，并且在你的网站上显示时，这种情况就会发生。一个常见的场景是在评论表单中。最常见的情况是，恶意用户会尝试编写代码，从你网站的用户那里窃取 cookie，甚至可以发现用户名和密码对（如果处理不当），或者其他可能导致会话劫持的信息（即黑客接管用户登录，然后接管该人的账户！）。或者恶意用户可能会发起攻击，下载特洛伊木马到用户的计算机上。

防止这种情况发生就像调用 htmlentities 函数一样简单，它会剥离所有的 HTML 标记并用一种显示字符但不允许浏览器执行的形式替换它们。例如，考虑以下 HTML：

<script src='http://x.com/hack.js'></script>
<script>hack();</script>

此代码加载一个 JavaScript 程序，然后执行恶意函数。但如果先通过 htmlentities 处理，它将变成以下完全无害的字符串：

<script src='http://x.com/hack.js'> </script>
<script>hack();</script>

因此，如果您要显示用户输入的任何内容，无论是立即显示还是在将其存储到数据库后显示，都需要首先使用 htmlentities 函数对其进行清理。为此，建议您创建一个新函数，就像示例 11-20 中的第一个函数一样，可以同时清理 SQL 和 XSS 注入。

示例 11-20. 用于预防 SQL 和 XSS 注入攻击的函数

<?php
  function mysql_entities_fix_string($pdo, $string)
  {
    return htmlentities(mysql_fix_string($pdo, $string));
  }    

  function mysql_fix_string($pdo, $string)
  {
    if (get_magic_quotes_gpc()) $string = stripslashes($string);
    return $pdo->real_escape_string($string);
  }
?>

mysql_entities_fix_string 函数首先调用 mysql_fix_string，然后将结果通过 htmlentities 处理后返回完全清理过的字符串。要使用这两个函数之一，您必须已经有一个活动的连接对象打开到一个 MySQL 数据库。

示例 11-21 展示了示例 11-17 的新“更高保护”版本。这只是示例代码，您需要在看到 //Etc... 注释行的地方添加访问返回结果的代码。

示例 11-21. 如何安全访问 MySQL 并预防 XSS 攻击

<?php
  require_once 'login.php';

  try
  {
    $pdo = new PDO($attr, $user, $pass, $opts);
  }
  catch (PDOException $e)
  {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
  }

  $user  = mysql_entities_fix_string($pdo, $_POST['user']);
  $pass  = mysql_entities_fix_string($pdo, $_POST['pass']);
  $query = "SELECT * FROM users WHERE user='$user' AND pass='$pass'";

  //Etc…

  function mysql_entities_fix_string($pdo, $string)
  {
    return htmlentities(mysql_fix_string($pdo, $string));
  }    

  function mysql_fix_string($pdo, $string)
  {
    if (get_magic_quotes_gpc()) $string = stripslashes($string);
    return $pdo->quote($string);
  }
?>

问题

1. 如何使用 PDO 连接到 MySQL 数据库？

2. 如何使用 PDO 向 MySQL 提交查询？

3. 什么样的 fetch 方法可以用来将行作为按列编号的数组返回？

4. 如何手动关闭 PDO 连接？

5. 在向具有 AUTO_INCREMENT 列的表添加行时，该列应传递什么值？

6. 哪个 PDO 方法可以用来正确转义用户输入以防止代码注入？

7. 在访问数据库时确保数据库安全的最佳方法是什么？

请查看“第十一章答案”在附录 A 中查找这些问题的答案。

第十二章：表单处理

网站用户与 PHP 和 MySQL 交互的主要方式之一是通过 HTML 表单。这些在互联网的早期开发中引入，1993 年甚至在电子商务出现之前就已经存在，并且由于其简单性和易用性而成为主流，尽管格式化它们可能会是一场噩梦。

当然，多年来对 HTML 表单处理进行了增强以添加额外功能，因此本章将使您了解技术的最新进展，并展示实施具有良好可用性和安全性的表单的最佳方法。另外，正如稍后您将看到的，HTML5 规范进一步改进了表单的使用。

构建表单

处理表单是一个多部分的过程。首先是创建一个用户可以输入所需详细信息的表单。然后，这些数据被发送到 Web 服务器，在那里进行解释，通常伴随一些错误检查。如果 PHP 代码识别出一个或多个需要重新输入的字段，可能会重新显示表单并显示错误消息。当代码对输入的准确性感到满意时，它会执行某些操作，通常涉及数据库，如输入有关购买的详细信息。

要构建一个表单，您至少必须有以下元素之一：

• 一个开头的<form>和结尾的</form>标签

• 指定使用 GET 或 POST 方法的提交类型

• 一个或多个 input 字段

• 表单数据要提交的目标 URL

示例 12-1 展示了一个用 PHP 创建的非常简单的表单，您应该键入并保存为 formtest.php。

示例 12-1. formtest.php ——一个简单的 PHP 表单处理程序

<?php // formtest.php
  echo <<<_END
 <html>
 <head>
 <title>Form Test</title>
 </head>
 <body>
 <form method="post" action="formtest.php">
 What is your name?
 <input type="text" name="name">
 <input type="submit">
 </form>
 </body>
 </html>
_END;
?>

关于这个示例的第一件事情是，正如您在本书中已经看到的，而不是在 PHP 代码中进出，echo <<<_END..._END 结构在必须输出多行 HTML 时使用。

在这个多行输出内部是一些标准代码，用于开始 HTML 文档、显示其标题，并启动文档的正文。然后是表单，设置为使用 POST 方法将其数据发送到名为 formtest.php 的 PHP 程序，这就是程序本身的名称。

程序的其余部分只是关闭它打开的所有项目：表单、HTML 文档的正文以及 PHP echo <<<_END 语句。在 Web 浏览器中打开此程序的结果如 图 12-1 所示。

图 12-1. 在 Web 浏览器中打开 formtest.php 的结果

检索提交的数据

示例 12-1 只是多部分表单处理过程的一部分。如果您输入一个名称并单击“提交查询”按钮，除了重新显示表单（和输入的数据丢失）之外，绝对什么都不会发生。所以现在是时候添加一些 PHP 代码来处理表单提交的数据了。

示例 12-2 扩展了前一个程序，包括数据处理。键入或修改 formtest.php，通过添加新行保存为 formtest2.php，并自行尝试该程序。运行该程序并输入名称的结果如 图 12-2 所示。

示例 12-2. formtest.php 的更新版本

<?php // formtest2.php
  if (!empty(($_POST['name']))) $name = $_POST['name'];
  else $name = "(Not Entered)";

  echo <<<_END
 <html>
 <head>
 <title>Form Test</title>
 </head>
 <body>
 Your name is: $name<br>
 <form method="post" action="formtest2.php">
 What is your name?
 <input type="text" name="name">
 <input type="submit">
 </form>
 </body>
 </html>
_END;
?>

图 12-2. 带数据处理的 formtest.php

唯一的变化是在开始时检查 $_POST 关联数组的 name 字段并将其回显给用户的几行代码。第十一章 介绍了 $_POST 关联数组，它包含 HTML 表单中每个字段的元素。在 示例 12-2 中，使用的输入名称是 name，表单方法是 POST，因此 $_POST 数组的 name 元素包含 $_POST['name'] 中的值。

PHP 的 isset 函数用于检测 $_POST['name'] 是否已被赋值。如果没有任何内容被提交，程序会赋予值 (Not entered)；否则，它会存储输入的值。然后，在 <body> 语句后添加了一行来显示存储在 $name 中的值。

默认值

有时在 Web 表单中为您的访问者提供默认值是很方便的。例如，假设您在房地产网站上放置了一个贷款还款计算器小部件。输入默认值，比如说，15 年和 3% 的利率，使用户只需输入贷款总额或每月可支付金额即可。

在这种情况下，这两个值的 HTML 可能如 示例 12-3 所示。

示例 12-3. 设置默认值

<form method="post" action="calc.php"><pre>
      Loan Amount <input type="text" name="principal">
  Number of Years <input type="text" name="years"    value="15">
    Interest Rate <input type="text" name="interest" value="3">
                  <input type="submit">
</pre></form>

看一下第三个和第四个输入。通过填充 value 属性，您可以在字段中显示默认值，用户可以在需要时更改。通过合理的默认值，您通常可以通过减少不必要的输入，使您的网络表单更加用户友好。之前代码的结果看起来像是 图 12-3。当然，这是为了说明默认值而创建的，因为程序 calc.php 还没有被编写，如果您提交它，表单将返回 404 错误消息。

如果您希望从您的网页向程序传递额外信息，除了用户输入的信息，也可以使用默认值来隐藏字段。我们将在本章后面讨论隐藏字段。

图 12-3. 使用所选表单字段的默认值

输入类型

HTML 表单非常灵活，允许您提交各种输入类型，从文本框和文本区域到复选框、单选按钮等。

文本框

您可能最常使用的输入类型是文本框。它接受单行框中的广泛字母数字文本和其他字符。文本框输入的一般格式如下：

<input type="text" name="*`name`*" size="*`size`*" maxlength="*`length`*" value="*`value`*">

我们已经讨论了name和value属性，但在这里引入了两个新属性：size和maxlength。size属性指定框的宽度（以当前字体的字符数表示），maxlength指定用户允许输入的最大字符数。

唯一必需的属性是type，它告诉 Web 浏览器期望的输入类型，以及name，用于在接收提交的表单时处理字段的名称。

文本区域

当您需要接受超过短行文本的输入时，请使用文本区域。它类似于文本框，但因为允许多行输入，因此具有一些不同的属性。其一般格式如下：

<textarea name="*`name`*" cols="*`width`*" rows="*`height`*" wrap="*`type`*">
</textarea>

首先要注意的是，<textarea>具有自己的标签，并不是<input>标签的子类型。因此，需要使用闭合标签</textarea>来结束输入。

如果没有默认属性，但有要显示的默认文本，则必须将其放在闭合的</textarea>之前，然后用户可以看到并且可以编辑它：

<textarea name="*`name`*" cols="*`width`*" rows="*`height`*" wrap="*`type`*"> This is some default text. </textarea>

要控制宽度和高度，请使用cols和rows属性。两者均使用当前字体的字符间距来确定区域的大小。如果省略这些值，将创建一个默认输入框，其尺寸将根据使用的浏览器而异，因此应始终定义它们，以确保表单的外观。

最后，您可以使用wrap属性控制输入框中输入的文本如何换行（以及如何将此类换行发送到服务器）。表 12-1 显示了可用的换行类型。如果您省略了wrap属性，则使用软换行。

表 12-1. </em> 输入中可用的换行类型</p> <table> <thead> <tr> <th>类型</th> <th>动作</th> </tr> </thead> <tbody> <tr> <td><code>off</code></td> <td>文本不换行，行与用户输入的完全一样显示。</td> </tr> <tr> <td><code>soft</code></td> <td>文本自动换行，但作为一个长字符串发送到服务器，不包含换行和换行符。</td> </tr> <tr> <td><code>hard</code></td> <td>文本自动换行，并以软换行或硬换行及换行符的形式发送到服务器。</td> </tr> </tbody> </table> <h3 id="复选框">复选框</h3> <p>当您希望向用户提供多个不同选项以供选择时，复选框是一个不错的选择。以下是使用的格式：</p> <pre><code class="language-php"><input type="checkbox" name="*`name`*" value="*`value`*" checked="checked"> </code></pre> <p>默认情况下，复选框是方形的。如果包含<code>checked</code>属性，当浏览器显示时该框将已被选中。您为属性分配的字符串应该用双引号或单引号括起来，或者使用值<code>"checked"</code>，或者不赋值（只写<code>checked</code>）。如果不包括该属性，则该框显示为未选中。这里是一个创建未选中框的示例：</p> <pre><code class="language-php">I Agree <input type="checkbox" name="agree"> </code></pre> <p>如果用户不选中复选框，则不会提交任何值。但如果他们这样做，名为<code>agree</code>的字段将提交值<code>"on"</code>。如果您希望自己的值提交而不是单词<em>on</em>（比如数字 1），您可以使用以下语法：</p> <pre><code class="language-php">I Agree <input type="checkbox" name="agree" value="1"> </code></pre> <p>另一方面，如果您希望在提交表单时为读者提供一个通讯快讯，您可能希望复选框已默认为选中状态：</p> <pre><code class="language-php">Subscribe? <input type="checkbox" name="news" checked="checked"> </code></pre> <p>如果您希望允许一次选择多个项目组，请为它们分配相同的名称。然而，只有最后一个选中的项目将被提交，除非您将数组作为名称传递。例如，示例 12-4 允许用户选择他们喜欢的冰淇淋（请参见图 12-4 了解其在浏览器中的显示方式）。</p> <h5 id="示例12-4-提供多个复选框选项">示例 12-4. 提供多个复选框选项</h5> <pre><code class="language-php"> Vanilla <input type="checkbox" name="ice" value="Vanilla"> Chocolate <input type="checkbox" name="ice" value="Chocolate"> Strawberry <input type="checkbox" name="ice" value="Strawberry"> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1204.png" alt="使用复选框快速选择" loading="lazy"></p> <h6 id="图12-4-使用复选框进行快速选择">图 12-4. 使用复选框进行快速选择</h6> <p>如果只有一个复选框被选中，例如第二个，只有该项将被提交（名为<code>ice</code>的字段将被赋值为<code>"巧克力"</code>）。但是如果选择了两个或更多个，只有最后一个值将被提交，之前的值将被忽略。</p> <p>如果您<em>希望</em>实现独占行为——即只能提交一个项目——那么您应该使用单选按钮而不是复选框（请参见下一节）。否则，要允许多次提交，您必须稍微更改 HTML，如示例 12-5 所示（请注意在<code>ice</code>值后添加方括号<code>[]</code>）。</p> <h5 id="示例-12-5-使用数组提交多个值">示例 12-5. 使用数组提交多个值</h5> <pre><code class="language-php"> Vanilla <input type="checkbox" name="ice[]" value="Vanilla"> Chocolate <input type="checkbox" name="ice[]" value="Chocolate"> Strawberry <input type="checkbox" name="ice[]" value="Strawberry"> </code></pre> <p>现在，当表单被提交时，如果这些项目中有任何项目被选中，将提交一个名为<code>ice</code>的数组，其中包含所有选定的值。您可以像这样将单个提交的值或值数组提取到一个变量中：</p> <pre><code class="language-php">$ice = $_POST['ice']; </code></pre> <p>如果字段<code>ice</code>已经作为单个值发布，<code>$ice</code>将是一个单一的字符串，比如<code>"草莓"</code>。但是，如果<code>ice</code>在表单中被定义为数组（如在示例 12-5 中），<code>$ice</code>将是一个数组，并且其元素数量将是提交的值的数量。表 12-2 展示了此 HTML 提交的一个、两个或三个选择的七个可能的值集合。在每种情况下，将创建一个包含一个、两个或三个项目的数组。</p> <p>表 12-2. 数组<code>$ice</code>的七种可能值集合</p> <table> <thead> <tr> <th>提交一个值</th> <th>提交两个值</th> <th>提交三个值</th> </tr> </thead> </table> <p>|</p> <pre><code class="language-php">$ice[0] => Vanilla $ice[0] => Chocolate $ice[0] => Strawberry </code></pre> <p>|</p> <pre><code class="language-php">$ice[0] => Vanilla $ice[1] => Chocolate $ice[0] => Vanilla $ice[1] => Strawberry $ice[0] => Chocolate $ice[1] => Strawberry </code></pre> <p>|</p> <pre><code class="language-php">$ice[0] => Vanilla $ice[1] => Chocolate $ice[2] => Strawberry </code></pre> <p>|</p> <p>如果 <code>$ice</code> 是一个数组，用于显示其内容的 PHP 代码非常简单，可能看起来像这样：</p> <pre><code class="language-php">foreach($ice as $item) echo "$item<br>"; </code></pre> <p>这里使用标准的 PHP <code>foreach</code> 结构来迭代数组 <code>$ice</code> 并将每个元素的值传递到变量 <code>$item</code>，然后通过 <code>echo</code> 命令显示。<code><br></code> 只是 HTML 格式设备，用于在显示中每种口味之后强制换行。</p> <h3 id="单选按钮">单选按钮</h3> <p>单选按钮得名于许多旧收音机上找到的推入预置按钮，其中任何先前按下的按钮在按下另一个按钮时会弹起。当您只想要从两个或多个选项的选择中返回单个值时使用。组中的所有按钮必须使用相同的名称，并且由于只返回一个值，您不必传递数组。</p> <p>例如，如果您的网站为从您的商店购买的物品提供交货时间选择，您可以使用类似于 示例 12-6 中的 HTML（参见 图 12-5 了解其显示方式）。默认情况下，单选按钮是圆形的。</p> <h5 id="示例-12-6-使用单选按钮">示例 12-6. 使用单选按钮</h5> <pre><code class="language-php">8am-Noon<input type="radio" name="time" value="1"> Noon-4pm<input type="radio" name="time" value="2" checked="checked"> 4pm-8pm<input type="radio" name="time" value="3"> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1205.png" alt="使用单选按钮选择单个值" loading="lazy"></p> <h6 id="图-12-5-使用单选按钮选择单个值">图 12-5. 使用单选按钮选择单个值</h6> <p>这里，默认选择了第二个选项 Noon–4pm。此默认选择确保用户至少选择一个交货时间，如果他们喜欢，可以将其更改为其他两个选项之一。如果没有一个项目已经被选中，用户可能会忘记选择选项，而对于交货时间则根本不提交任何值。</p> <h3 id="隐藏字段">隐藏字段</h3> <p>有时候，拥有隐藏的表单字段会很方便，这样您可以跟踪表单输入的状态。例如，您可能希望知道表单是否已经提交过。您可以通过在 PHP 代码中添加一些 HTML 来实现，例如以下内容：</p> <pre><code class="language-php">echo '<input type="hidden" name="submitted" value="yes">' </code></pre> <p>这是一个简单的 PHP <code>echo</code> 语句，将一个 <code>input</code> 字段添加到 HTML 表单中。假设表单是在程序外创建并显示给用户的。第一次 PHP 程序接收到输入时，这行代码还没有运行，因此不会有名为 <code>submitted</code> 的字段。PHP 程序重新创建表单，添加 <code>input</code> 字段。因此，当访问者重新提交表单时，PHP 程序将收到带有 <code>submitted</code> 字段设置为 <code>"yes"</code> 的输入。代码可以简单地检查该字段是否存在：</p> <pre><code class="language-php">if (isset($_POST['submitted'])) {... </code></pre> <p>隐藏字段还可以用于存储其他详细信息，例如您可能创建用于识别用户的会话 ID 字符串等。</p> <h6 id="警告-11">警告</h6> <p>永远不要将隐藏字段视为安全的，因为它们并非如此。某人可以通过使用浏览器的“查看源代码”功能轻松查看包含它们的 HTML。恶意攻击者也可以制作一个帖子，以删除、添加或更改隐藏字段。</p> <h3 id="_"><select></h3> <p><code><select></code>标签允许您创建一个包含单个或多个选择项的下拉列表。它遵循以下语法：</p> <pre><code class="language-php"><select name="*`name`*" size="*`size`*" multiple="multiple"> </code></pre> <p>属性<code>size</code>表示展开下拉列表前要显示的行数。单击显示内容时，将显示一个下拉列表，其中包含所有选项。如果使用<code>multiple</code>属性，用户可以按住 Ctrl 键并单击以从列表中选择多个选项。例如，要求用户从五个选择中选择其最喜欢的蔬菜，您可以像示例 12-7 中的 HTML 那样使用单选。</p> <h5 id="示例-12-7-使用select">示例 12-7. 使用<code><select></code></h5> <pre><code class="language-php">Vegetables <select name="veg" size="1"> <option value="Peas">Peas</option> <option value="Beans">Beans</option> <option value="Carrots">Carrots</option> <option value="Cabbage">Cabbage</option> <option value="Broccoli">Broccoli</option> </select> </code></pre> <p>此 HTML 提供五个选项，第一个选项<em>Peas</em>被预先选择（因为它是第一个项目）。图 12-6 显示了单击列表以展开它，并且选项<em>Carrots</em>已被突出显示的输出。如果您想要提供不同的默认选项（如<em>Beans</em>），请使用<code>selected</code>属性，如下所示：</p> <pre><code class="language-php"><option selected="selected" value="Beans">Beans</option> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1206.png" alt="创建带有下拉选择的列表" loading="lazy"></p> <h6 id="图12-6-创建一个带有select的下拉列表">图 12-6. 创建一个带有<code><select></code>的下拉列表</h6> <p>用户也可以选择多个项目，例如示例 12-8。</p> <h5 id="示例-12-8-使用带有multiple属性的select">示例 12-8. 使用带有<code>multiple</code>属性的<code><select></code></h5> <pre><code class="language-php">Vegetables <select name="veg" size="5" multiple="multiple"> <option value="Peas">Peas</option> <option value="Beans">Beans</option> <option value="Carrots">Carrots</option> <option value="Cabbage">Cabbage</option> <option value="Broccoli">Broccoli</option> </select> </code></pre> <p>此 HTML 并没有太大的不同；<code>size</code>已更改为<code>"5"</code>，并添加了<code>multiple</code>属性。但是，正如您从图 12-7 中看到的那样，用户现在可以通过在单击时按住 Ctrl 键来选择多个选项。如果愿意，可以省略<code>size</code>属性，输出结果将相同；但是，对于更大的列表，下拉框可能会显示更多的项目，因此建议选择合适的行数并坚持使用。我还建议不要使用高度小于两行的多重选择框 —— 一些浏览器可能无法正确显示所需的滚动条以访问它们。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1207.png" alt="使用带有多重属性的选择" loading="lazy"></p> <h6 id="图12-7-使用带有multiple属性的select">图 12-7. 使用带有<code>multiple</code>属性的<code><select></code></h6> <p>您还可以在多选中使用<code>selected</code>属性，并且如果需要，可以预先选择多个选项。</p> <h3 id="标签">标签</h3> <p>您可以通过使用<code><label></code>标签来提供更好的用户体验。使用它，您可以包围表单元素，使其可通过点击位于开放和关闭<code><label></code>标签之间的任何可见部分来选择。</p> <p>例如，回到选择交货时间的示例，您可以允许用户同时单击单选按钮本身和相关文本，如下所示：</p> <pre><code class="language-php"><label>8am-Noon<input type="radio" name="time" value="1"></label> </code></pre> <p>这样做时文本不会像超链接一样带有下划线，但当鼠标指针悬停在其上时，指针将变为箭头而不是文本光标，表示整个项是可点击的。</p> <h3 id="提交按钮">提交按钮</h3> <p>为了匹配被提交的表单类型，你可以通过使用<code>value</code>属性将提交按钮的文本更改为任何你喜欢的内容，像这样：</p> <pre><code class="language-php"><input type="submit" value="Search"> </code></pre> <p>你还可以使用类似以下的 HTML 来用图像替换标准文本按钮：</p> <pre><code class="language-php"><input type="image" name="submit" src="image.gif"> </code></pre> <h2 id="清理输入">清理输入</h2> <p>现在我们回到 PHP 编程。处理用户数据永远不能过分强调其安全性风险，从一开始就学会以最高的警惕性对待所有这些数据至关重要。事实上，清理用户输入以防止潜在的黑客攻击并不难，但必须做好。</p> <p>首先要记住的是，无论你在 HTML 表单中设置了什么限制来限制输入的类型和大小，对于黑客来说，使用浏览器的查看源代码功能提取表单并修改以提供恶意输入到你的网站是微不足道的事情。</p> <p>因此，在对从<code>$_GET</code>或<code>$_POST</code>数组中获取的任何变量进行彻底清理之前，你绝不能信任它们。如果不这样做，用户可能会尝试将 JavaScript 注入到数据中以干扰你网站的运行，甚至试图添加 MySQL 命令以威胁你的数据库。</p> <p>因此，不要仅仅在读取用户输入时使用如下代码：</p> <pre><code class="language-php">$variable = $_POST['user_input']; </code></pre> <p>你还应该使用以下一个或多个代码行。例如，为了防止注入到将提交给 MySQL 的字符串中的转义字符，使用以下方法转义所有必要的字符，并在字符串的开头和结尾添加引号。记住，此函数考虑了 MySQL 连接的当前字符集，因此必须与 PDO 连接对象一起使用（在本例中为<code>$pdo</code>），如在第十一章讨论的那样：</p> <pre><code class="language-php">$variable = $pdo->quote($variable); </code></pre> <h6 id="注意-70">注意</h6> <p>记住，确保 MySQL 免受黑客攻击的最安全方法是使用占位符和准备语句，如在第十一章中所述。如果你对所有对 MySQL 的访问都这样做了，那么在转移数据进出数据库时就不需要转义数据。然而，当在 HTML 中包含数据时，仍然需要对其进行清理。</p> <p>要消除不需要的斜杠，你应该首先检查是否启用了 PHP 的魔术引号功能（这将通过添加斜杠来转义引号），如果是，则调用<code>stripslashes</code>函数，如下所示：</p> <pre><code class="language-php">if (get_magic_quotes_gpc()) $variable = stripslashes($variable); </code></pre> <p>要从字符串中删除任何 HTML，请使用以下方法：</p> <pre><code class="language-php">$variable = htmlentities($variable); </code></pre> <p>例如，这将把像<code><b>hi</b></code>这样的可解释 HTML 代码字符串转换为<code>&lt;b&gt;hi&lt;/b&gt;</code>，然后显示为文本，而不会被解释为 HTML 标签。</p> <p>最后，如果你希望完全从输入中删除 HTML，请使用以下方法（但确保在调用<code>htmlentities</code>之前使用它，后者会替换任何用作 HTML 标签的尖括号）：</p> <pre><code class="language-php">$variable = strip_tags($variable); </code></pre> <p>实际上，直到你确切地知道一个程序需要什么样的净化处理，示例 12-9 展示了一对函数，将所有这些检查结合在一起，提供了非常好的安全级别。</p> <h5 id="示例-12-9-sanitizestring-和-sanitizemysql-函数">示例 12-9. <code>sanitizeString</code> 和 <code>sanitizeMySQL</code> 函数</h5> <pre><code class="language-php"><?php   function sanitizeString($var)   {     if (get_magic_quotes_gpc())       $var = stripslashes($var);     $var = strip_tags($var);     $var = htmlentities($var);     return $var;   }   function sanitizeMySQL($pdo, $var)   {     $var = $pdo->quote($var);     $var = sanitizeString($var);     return $var;   } ?> </code></pre> <p>将此代码添加到您的 PHP 程序的末尾，然后您可以像这样调用它来对每个用户输入进行净化：</p> <pre><code class="language-php">$var = sanitizeString($_POST['user_input']); </code></pre> <p>或者，当您拥有一个开放的 MySQL 连接和一个 PDO 连接对象（在本例中称为 <code>$pdo</code>）时：</p> <pre><code class="language-php">$var = sanitizeMySQL($pdo, $_POST['user_input']); </code></pre> <h1 id="一个示例程序">一个示例程序</h1> <p>让我们看看一个真实的 PHP 程序如何通过创建名为 <em>convert.php</em> 的程序与 HTML 表单集成，程序列出了 示例 12-10。按照示例输入并尝试运行它。</p> <h5 id="示例-12-10-一个用于在华氏度和摄氏度之间转换值的程序">示例 12-10. 一个用于在华氏度和摄氏度之间转换值的程序</h5> <pre><code class="language-php"><?php // convert.php $f = $c = ''; if (isset($_POST['f'])) $f = sanitizeString($_POST['f']); if (isset($_POST['c'])) $c = sanitizeString($_POST['c']); if (is_numeric($f)) { $c = intval((5 / 9) * ($f - 32)); $out = "$f &deg;f equals $c &deg;c"; } elseif(is_numeric($c)) { $f = intval((9 / 5) * $c + 32); $out = "$c &deg;c equals $f &deg;f"; } else $out = ""; echo <<<_END <html> <head> <title>Temperature Converter</title> </head> <body> <pre> Enter either Fahrenheit or Celsius and click on Convert <b>$out</b> <form method="post" action=""> Fahrenheit <input type="text" name="f" size="7"> Celsius <input type="text" name="c" size="7"> <input type="submit" value="Convert"> </form> </pre> </body> </html> _END; function sanitizeString($var) { if (get_magic_quotes_gpc()) $var = stripslashes($var); $var = strip_tags($var); $var = htmlentities($var); return $var; } ?> </code></pre> <p>当您在浏览器中调用 <em>convert.php</em> 时，结果应该看起来类似于 图 12-8。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1208.png" alt="运行中的温度转换程序" loading="lazy"></p> <h6 id="图12-8-运行中的温度转换程序">图 12-8. 运行中的温度转换程序</h6> <p>为了解析该程序，第一行初始化了变量 <code>$c</code> 和 <code>$f</code>，以防它们未被提交到程序。接下来的两行获取名为 <code>f</code> 或名为 <code>c</code> 的字段的值，用于输入的华氏度或摄氏度值。如果用户输入了两者，摄氏度值会被简单地忽略，而华氏度值会被转换。作为安全措施，还使用了来自 示例 12-9 的新函数 <code>sanitizeString</code>。</p> <p>因此，无论 <code>$f</code> 和 <code>$c</code> 中是提交的值还是空字符串，代码的下一部分构成一个 <code>if...elseif...else</code> 结构，首先测试 <code>$f</code> 是否具有数值。如果没有，它会检查 <code>$c</code>；如果 <code>$c</code> 也没有数值，变量 <code>$out</code> 被设置为空字符串（稍后详细介绍）。</p> <p>如果 <code>$f</code> 被发现具有数值，变量 <code>$c</code> 被分配一个简单的数学表达式，用于将 <code>$f</code> 的值从华氏度转换为摄氏度。使用的公式是 摄氏度 = (5 / 9) × (华氏度 – 32)。然后变量 <code>$out</code> 被设置为一个解释转换的消息字符串。</p> <p>另一方面，如果 <code>$c</code> 被发现具有数值，执行一个补充操作来将 <code>$c</code> 的值从摄氏度转换为华氏度，并将结果赋给 <code>$f</code>。使用的公式是 华氏度 = (9 / 5) × 摄氏度 + 32。与前一节类似，字符串 <code>$out</code> 被设置为包含有关转换的消息。</p> <p>在两种转换中，调用 PHP 的 <code>intval</code> 函数将转换的结果转换为整数值。虽然这不是必需的，但看起来更好。</p> <p>所有算术运算完成后，程序现在输出 HTML，其中包含基本的头部和标题，然后是一些介绍性文本，然后显示 <code>$out</code> 的值。如果没有进行温度转换，<code>$out</code> 将具有 <code>NULL</code> 的值，并且不会显示任何内容，这正是在表单尚未提交时所希望的。但是如果进行了转换，<code>$out</code> 包含结果，将会显示出来。</p> <p>在此之后，我们来到了表单，它设置为使用 POST 方法提交到程序本身（用一对双引号表示，以便文件可以以任何名称保存）。在表单内部，有两个输入框，用于输入华氏度或摄氏度的值。然后显示一个带有文本“Convert”的提交按钮，并关闭表单。</p> <p>在输出 HTML 以关闭文档后，我们最终来到了来自 示例 12-9 的函数 <code>sanitizeString</code>。尝试通过输入不同的值来玩弄示例；为了有趣，您能找到一个华氏度和摄氏度相同的值吗？</p> <h6 id="注意-71">注意</h6> <p>本章中的所有示例都使用 POST 方法发送表单数据。我建议使用这种方法，因为它既整洁又安全。但是，只要从 <code>$_GET</code> 数组中获取值而不是 <code>$_POST</code> 数组，表单就可以轻松更改为使用 GET 方法。可能需要这样做的原因包括使搜索结果可书签化或直接从另一页链接。</p> <h1 id="html5-增强功能">HTML5 增强功能</h1> <p>使用 HTML5，开发者可以利用一系列有用的增强功能来处理表单，使表单的使用比以往更加简便，包括新的属性；颜色、日期和时间选择器；以及新的输入类型。您可以随时参考 <em>caniuse.com</em> 查看各种浏览器对某一功能的广泛实现情况。</p> <h2 id="autocomplete-属性">autocomplete 属性</h2> <p>您可以将 <code>autocomplete</code> 属性应用于 <code><form></code> 元素，或应用于 <code><input></code> 元素的 <code>color</code>、<code>date</code>、<code>email</code>、<code>password</code>、<code>range</code>、<code>search</code>、<code>tel</code>、<code>text</code> 或 <code>url</code> 类型中的任何一个。</p> <p>启用自动完成后，先前的用户输入将被召回并自动输入到字段中作为建议。您也可以通过关闭自动完成来禁用此功能。以下是如何为整个表单启用自动完成但对特定字段禁用它（用粗体标出）的方法：</p> <pre><code class="language-php"><form action='myform.php' method='post' `autocomplete=``'on'`> <input type='text' name='username'> <input type='password' name='password' `autocomplete=``'off'`> </form> </code></pre> <h2 id="autofocus-属性">autofocus 属性</h2> <p><code>autofocus</code> 属性在页面加载时立即将焦点设置到元素上。可以应用于任何 <code><input></code>、<code><textarea></code> 或 <code><button></code> 元素，如下所示：</p> <pre><code class="language-php"><input type='text' name='query' `autofocus=``'autofocus'`> </code></pre> <h6 id="注意-72">注意</h6> <p>使用触摸界面的浏览器（如 Android 或 iOS）通常会忽略 <code>autofocus</code> 属性，使用户需点击字段以获取焦点；否则，这一属性可能会产生的缩放、聚焦和弹出键盘将会变得非常令人讨厌。</p> <p>因为此功能会导致焦点移动到输入元素中，所以退格键将不再将用户带回网页（尽管 Alt-左箭头和 Alt-右箭头仍将在浏览历史中向后和向前移动）。</p> <h2 id="placeholder-属性">placeholder 属性</h2> <p><code>placeholder</code> 属性允许您在任何空白输入字段中放置一个有用的提示，以解释用户应该输入什么。您可以像这样使用它：</p> <pre><code class="language-php"><input type='text' name='name' size='50' `placeholder=``'First & Last name'`> </code></pre> <p>输入字段将显示占位符文本作为提示，直到用户开始输入，此时占位符将消失。</p> <h2 id="required-属性">required 属性</h2> <p><code>required</code> 属性确保在提交表单之前已填写字段。像这样使用它：</p> <pre><code class="language-php"><input type='text' name='creditcard' `required=``'required'`> </code></pre> <p>当浏览器检测到尝试提交表单时存在未完成的 <code>required</code> 输入时，会显示一条消息，提示用户完成字段。</p> <h2 id="覆盖属性">覆盖属性</h2> <p>使用覆盖属性，您可以逐元素地覆盖表单设置。例如，使用 <code>formaction</code> 属性，您可以指定提交按钮应将表单提交到与表单本身指定的不同 URL，如下所示（其中默认和被覆盖的操作 URL 以粗体显示）：</p> <pre><code class="language-php"><form `action=``'url1.php'` method='post'> <input type='text' name='field'> <input type='submit' `formaction=``'url2.php'`> </form> </code></pre> <p>HTML5 还支持 <code>formenctype</code>、<code>formmethod</code>、<code>formnovalidate</code> 和 <code>formtarget</code> 这些覆盖属性，您可以像使用 <code>formaction</code> 一样使用它们来覆盖这些设置之一。</p> <h2 id="width-和-height-属性">width 和 height 属性</h2> <p>使用这些新属性，您可以更改输入图像的显示尺寸，像这样：</p> <pre><code class="language-php"><input type='image' src='picture.png' `width=``'120'` `height=``'80'`> </code></pre> <h2 id="min-和-max-属性">min 和 max 属性</h2> <p>使用 <code>min</code> 和 <code>max</code> 属性，您可以指定输入的最小和最大值。您可以像这样使用这些属性：</p> <pre><code class="language-php"><input type='time' name='alarm' value='07:00' `min=``'05:00'` `max=``'09:00'`> </code></pre> <p>然后，浏览器将为允许的值范围提供上下选择器，或者简单地禁止超出该范围的值。</p> <h2 id="步骤属性">步骤属性</h2> <p>常与 <code>min</code> 和 <code>max</code> 一起使用，<code>step</code> 属性支持遍历数字或日期值，像这样：</p> <pre><code class="language-php"><input type='time' name='meeting' value='12:00' min='09:00' max='16:00' `step=``'3600'`> </code></pre> <p>当您遍历日期或时间值时，每个单位代表 1 秒。</p> <h2 id="表单属性">表单属性</h2> <p>使用 HTML5，您不再必须将 <code><input></code> 元素放置在 <code><form></code> 元素内，因为您可以通过提供 <code>form</code> 属性来指定输入适用于哪个表单。以下代码显示了创建表单的示例，但其输入位于 <code><form></code> 和 <code></form></code> 标签之外：</p> <pre><code class="language-php"><form action='myscript.php' method='post' `id=``'form1'`> </form> <input type='text' name='username' `form=``'form1'`> </code></pre> <p>为此，您必须使用 <code>id</code> 属性为表单指定一个 ID，并在 <code>input</code> 元素的 <code>form</code> 属性中引用此 ID。这对于添加隐藏的输入字段非常有用，因为您无法控制字段在表单内的布局，或者使用 JavaScript 在运行时修改表单和输入。</p> <h2 id="列表属性">列表属性</h2> <p>HTML5 支持将列表附加到输入框，以便用户可以轻松从预定义列表中进行选择，您可以像这样使用它：</p> <pre><code class="language-php">Select destination: <input type='url' name='site' `list=``'links'`> <`datalist` `id=``'links'`> <option label='Google' value='http://google.com'> <option label='Yahoo!' value='http://yahoo.com'> <option label='Bing' value='http://bing.com'> <option label='Ask' value='http://ask.com'> <`/datalist`> </code></pre> <h2 id="颜色输入类型">颜色输入类型</h2> <p><code>color</code> 输入类型调用颜色选择器，以便您可以简单地点击您选择的颜色。您可以像这样使用它：</p> <pre><code class="language-php">Choose a color <input `type=``'color'` name='color'> </code></pre> <h2 id="数字和范围输入类型">数字和范围输入类型</h2> <p><code>number</code> 和 <code>range</code> 输入类型限制输入为数字，并且还可以指定允许的范围，如下所示：</p> <pre><code class="language-php"><input type='number' name='age'> <input type='range' name='num' min='0' max='100' value='50' step='1'> </code></pre> <h2 id="日期和时间选择器">日期和时间选择器</h2> <p>当您选择<code>date</code>、<code>month</code>、<code>week</code>、<code>time</code>、<code>datetime</code>或<code>datetime-local</code>输入类型时，在支持的浏览器上会弹出选择器，用户可以从中选择，例如，这个选择时间的输入：</p> <pre><code class="language-php"><input `type=``'time'` name='time' value='12:34'> </code></pre> <p>下一章将向您展示如何使用 cookie 和认证来存储用户的偏好并保持登录状态，以及如何维护完整的用户会话。</p> <h1 id="问题-11">问题</h1> <ol> <li> <p>您可以使用 POST 或 GET 方法提交表单数据。用于将这些数据传递给 PHP 的关联数组是哪些？</p> </li> <li> <p>文本框和文本区域有什么区别？</p> </li> <li> <p>如果一个表单必须向用户提供三个选择，每个选择都是互斥的，因此只能选择其中之一，那么在复选框和单选按钮之间选择时，您会使用哪种输入类型？</p> </li> <li> <p>如何使用单个字段名提交 web 表单中的一组选择？</p> </li> <li> <p>如何在浏览器中不显示的情况下提交表单字段？</p> </li> <li> <p>用哪个 HTML 标签封装表单元素及其支持的文本或图形，使整个单元可用鼠标点击选择？</p> </li> <li> <p>哪个 PHP 函数将 HTML 转换为可以显示但不会被浏览器解释为 HTML 的格式？</p> </li> <li> <p>什么表单属性可用于帮助用户完成输入字段？</p> </li> <li> <p>如何确保在提交表单之前完成输入？</p> </li> </ol> <p>参见“第十二章答案”，位于附录 A 中，以查看这些问题的答案。</p> <h1 id="第十三章cookies会话和认证">第十三章：Cookies、会话和认证</h1> <p>随着您的 Web 项目变得越来越大和复杂，您将发现越来越需要跟踪您的用户。即使您不提供登录和密码，您也经常需要存储关于用户当前会话的详细信息，并在他们返回您的站点时识别他们。</p> <p>几种技术支持这种互动，从简单的浏览器 cookies 到会话处理和 HTTP 身份验证。它们之间为您提供了配置您的站点以符合用户偏好并确保流畅愉快过渡的机会。</p> <h1 id="在-php-中使用-cookies">在 PHP 中使用 Cookies</h1> <p><em>Cookie</em>是通过 web 浏览器将数据项保存到计算机硬盘的一种数据。它几乎可以包含任何字母数字信息（只要在 4 KB 以下），并且可以从计算机检索并返回到服务器。常见用途包括会话跟踪，跨多次访问保持数据，保存购物车内容，存储登录详细信息等。</p> <p>由于其隐私影响，<strong>cookies</strong>只能从发行域中读取。换句话说，如果一个 cookie 是由例如<em>oreilly.com</em>发行的，只有使用该域的 web 服务器才能检索它。这可以防止其他未经授权的网站获取这些细节。</p> <p>由于互联网的工作方式，网页上的多个元素可以嵌入来自多个域的内容，每个域都可以发行自己的 cookies。当这种情况发生时，它们被称为<em>第三方 cookies</em>。最常见的是由广告公司创建，用于跨多个网站跟踪用户或进行分析。</p> <p>因此，大多数浏览器允许用户关闭 cookies，无论是对当前服务器的域、第三方服务器还是两者都可以。幸运的是，大多数禁用 cookies 的人只对第三方网站这样做。</p> <p>Cookies 在传输头部期间交换，在实际 HTML 网页发送之前，一旦 HTML 已经传输，发送 cookie 是不可能的。因此，仔细规划 cookie 的使用非常重要。图 13-1 说明了一个典型的浏览器和 web 服务器之间传递 cookies 的请求和响应对话。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1301.png" alt="带有 cookies 的浏览器/服务器请求/响应对话框" loading="lazy"></p> <h6 id="图-13-1-带有-cookies-的浏览器服务器请求响应对话框">图 13-1. 带有 cookies 的浏览器/服务器请求/响应对话框</h6> <p>这个交换显示浏览器接收到两个页面：</p> <ol> <li> <p>浏览器发出请求以检索网站<em><a href="http://www.webserver.com" target="_blank">http://www.webserver.com</a></em>上的主页面<em>index.html</em>。第一个头部指定文件，第二个头部指定服务器。</p> </li> <li> <p>当 <em>webserver.com</em> 的 Web 服务器收到这对标头时，将返回一些自己的标头。第二个标头定义要发送的内容类型（<code>text/html</code>），第三个标头发送具有名称 <code>name</code> 和值 <code>value</code> 的 cookie。然后才传输网页内容。</p> </li> <li> <p>浏览器接收到 cookie 后，将在以后向发出请求的服务器发送该 cookie，直到 cookie 过期或被删除。因此，当浏览器请求新页面 <em>/news.html</em> 时，它还会返回具有值 <code>value</code> 的 cookie <code>name</code>。</p> </li> <li> <p>由于 cookie 已经设置，当服务器接收到发送 <em>/news.html</em> 的请求时，它不需要重新发送 cookie，而只需返回请求的页面。</p> </li> </ol> <h6 id="注意-73">注意</h6> <p>可以通过浏览器内置的开发者工具或扩展程序直接编辑 cookie。因此，由于用户可以更改 cookie 的值，您不应在 cookie 中放置用户名等关键信息，否则可能导致您的网站被意外操纵。Cookie 最适合用于存储语言或货币设置等数据。</p> <h2 id="设置-cookie">设置 Cookie</h2> <p>在 PHP 中设置 cookie 很简单。只要还未传输任何 HTML，您可以调用 <code>setcookie</code> 函数，其语法如下（参见表 13-1）：</p> <pre><code class="language-php">setcookie(name, value, expire, path, domain, secure, httponly); </code></pre> <p>表 13-1. <code>setcookie</code> 参数</p> <table> <thead> <tr> <th>参数</th> <th>描述</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td><code>name</code></td> <td>cookie 的名称。这是服务器在后续浏览器请求中使用的名称，用于访问 cookie。</td> <td><code>location</code></td> </tr> <tr> <td><code>value</code></td> <td>cookie 的值或 cookie 的内容。这可以包含最多 4 KB 的字母数字文本。</td> <td><code>USA</code></td> </tr> <tr> <td><code>expire</code></td> <td>（<em>可选</em>）过期日期的 Unix 时间戳。通常，您可能会使用 <code>time()</code> 加上一定的秒数。如果未设置，该 cookie 将在浏览器关闭时过期。</td> <td><code>time() + 2592000</code></td> </tr> <tr> <td><code>path</code></td> <td>（<em>可选</em>）服务器上 cookie 的路径。如果是 <code>/</code>（斜杠），则该 cookie 在整个域内有效，例如 <em>www.webserver.com</em>。如果是子目录，则 cookie 仅在该子目录中有效。默认为设置 cookie 的当前目录，这通常是您会使用的设置。</td> <td><code>/</code></td> </tr> <tr> <td><code>domain</code></td> <td>（<em>可选</em>）cookie 的互联网域。如果是 <em>webserver.com</em>，则该 cookie 对所有 <em>webserver.com</em> 及其子域（如 <em>www.webserver.com</em> 和 <em>images.webserver.com</em>）可用。如果是 <em>images.webserver.com</em>，则该 cookie 仅对 <em>images.webserver.com</em> 及其子域（如 <em>sub.images.webserver.com</em>）可用，但对例如 <em>www.webserver.com</em> 不可用。</td> <td><code>webserver.com</code></td> </tr> <tr> <td><code>secure</code></td> <td>（<em>可选</em>）cookie 是否必须使用安全连接（<em>https://</em>）。如果该值为 <code>TRUE</code>，则该 cookie 只能在安全连接上传输。默认为 <code>FALSE</code>。</td> <td><code>FALSE</code></td> </tr> <tr> <td><code>httponly</code></td> <td>（<em>可选</em>；自 PHP 版本 5.2.0 起实现。）Cookie 是否必须使用 HTTP 协议。如果该值为 <code>TRUE</code>，脚本语言（如 JavaScript）无法访问 Cookie。默认值为 <code>FALSE</code>。</td> <td><code>FALSE</code></td> </tr> </tbody> </table> <p>因此，要创建一个名为 <code>location</code>、值为 <code>USA</code> 的 Cookie，在当前域上整个 Web 服务器上都可以访问，并且将在七天内从浏览器缓存中删除，使用以下方法：</p> <pre><code class="language-php">setcookie('location', 'USA', time() + 60 * 60 * 24 * 7, '/'); </code></pre> <h2 id="访问-cookie">访问 Cookie</h2> <p>读取 Cookie 的值就像访问 <code>$_COOKIE</code> 系统数组一样简单。例如，如果您想要查看当前浏览器是否已经存储了名为 <code>location</code> 的 Cookie，并且如果有的话，读取其值，可以使用以下方法：</p> <pre><code class="language-php">if (isset($_COOKIE['location'])) $location = $_COOKIE['location']; </code></pre> <p>请注意，只有在将 Cookie 发送到 Web 浏览器后，您才能读取 Cookie。这意味着当您发出一个 Cookie 时，直到浏览器重新加载页面（或另一个具有访问权限的页面）从您的网站返回 Cookie 给服务器时，您无法再次读取它。</p> <h2 id="销毁-cookie">销毁 Cookie</h2> <p>要删除一个 Cookie，您必须再次发出它并将日期设置为过去。在您的新 <code>setcookie</code> 调用中，除了时间戳之外，所有参数都必须与首次发出 Cookie 时的参数相同；否则，删除操作将失败。因此，要删除之前创建的 Cookie，您将使用以下方法：</p> <pre><code class="language-php">setcookie('location', 'USA', time() - 2592000, '/'); </code></pre> <p>只要给定的时间是过去的，Cookie 就应该被删除。然而，我已经在过去使用了 2,592,000 秒（一个月）的时间，以防客户端计算机的日期和时间设置不正确。您也可以为 Cookie 值提供一个空字符串（或一个值为 <code>FALSE</code> 的值），PHP 将自动为您将其时间设置为过去。</p> <h1 id="http-身份验证">HTTP 身份验证</h1> <p>HTTP 身份验证使用 Web 服务器来管理应用程序的用户和密码。对于要求用户登录的简单应用程序来说，这是足够的，尽管大多数应用程序会有专门的需求或更严格的安全要求，需要使用其他技术。</p> <p>要使用 HTTP 身份验证，PHP 发送一个头部请求，请求与浏览器开始身份验证对话。服务器必须启用此功能才能正常工作，但由于它是如此常见，您的服务器很可能提供此功能。</p> <h6 id="注意-74">注意</h6> <p>尽管它通常与 Apache 一起安装，但 HTTP 身份验证模块不一定安装在您使用的服务器上。因此，尝试运行这些示例可能会生成一个错误，告诉您该功能未启用，这种情况下，您必须安装该模块并更改配置文件以加载它，或者要求系统管理员进行这些更改。</p> <p>在将您的 URL 输入浏览器或通过链接访问页面后，用户将看到一个“需要身份验证”的提示弹出窗口，请求两个字段：用户名和密码（图 13-2 显示了在 Firefox 中的外观）。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1302.png" alt="HTTP 鉴权登录提示" loading="lazy"></p> <h6 id="图-13-2-http-鉴权登录提示">图 13-2. HTTP 鉴权登录提示</h6> <p>示例 13-1 展示了使其发生的代码。</p> <h5 id="示例-13-1-php-鉴权">示例 13-1. PHP 鉴权</h5> <pre><code class="language-php"><?php if (isset($_SERVER['PHP_AUTH_USER']) && isset($_SERVER['PHP_AUTH_PW'])) { echo "Welcome User: " . htmlspecialchars($_SERVER['PHP_AUTH_USER']) . " Password: " . htmlspecialchars($_SERVER['PHP_AUTH_PW']); } else { header('WWW-Authenticate: Basic realm="Restricted Area"'); header('HTTP/1.1 401 Unauthorized'); die("Please enter your username and password"); } ?> </code></pre> <p>程序首先查找两个特定数组值：<code>$_SERVER['PHP_AUTH_USER']</code> 和 <code>$_SERVER['PHP_AUTH_PW']</code>。如果它们都存在，它们代表用户在身份验证提示中输入的用户名和密码。</p> <h6 id="注意-75">注意</h6> <p>注意，在显示到屏幕上时，返回到<code>$_SERVER</code>数组中的值首先通过<code>htmlspecialchars</code>函数进行处理。这是因为这些值是用户输入的，因此不能信任，黑客可能通过添加 HTML 字符和其他符号尝试跨站点脚本攻击。<code>htmlspecialchars</code>将任何这样的输入转换为无害的 HTML 实体。</p> <p>如果任一值不存在，则用户尚未通过身份验证，并且您通过发出以下标题显示图 13-2，其中<code>Basic realm</code>是受保护部分的名称，并作为弹出提示的一部分显示：</p> <pre><code class="language-php">WWW-Authenticate: Basic realm="Restricted Area" </code></pre> <p>如果用户填写了字段，PHP 程序会再次从顶部运行。但如果用户点击取消按钮，则程序继续执行以下两行代码，发送以下标题和错误消息：</p> <pre><code class="language-php">HTTP/1.1 401 Unauthorized </code></pre> <p><code>die</code> 语句导致文本“请键入您的用户名和密码”被显示（参见图 13-3）。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1303.png" alt="点击取消按钮的结果" loading="lazy"></p> <h6 id="图-13-3-点击取消按钮的结果">图 13-3. 点击取消按钮的结果</h6> <h6 id="注意-76">注意</h6> <p>一旦用户已经通过身份验证，您将无法再次弹出身份验证对话框，除非用户关闭并重新打开所有浏览器窗口，因为 Web 浏览器将持续将相同的用户名和密码返回给 PHP。在通过此部分并尝试不同操作时，您可能需要关闭并重新打开浏览器几次。最简单的方法是打开一个新的私密或匿名窗口来运行这些示例，这样您就无需关闭整个浏览器。</p> <p>现在让我们检查有效的用户名和密码。在示例 13-1 中的代码无需太多更改即可添加此检查，只需修改先前的欢迎消息代码以测试正确的用户名和密码，然后发出欢迎消息。认证失败会导致发送错误消息（参见示例 13-2）。</p> <h5 id="example-13-2-php-鉴权与输入检查">Example 13-2. PHP 鉴权与输入检查</h5> <pre><code class="language-php"><?php $username = 'admin'; $password = 'letmein'; if (isset($_SERVER['PHP_AUTH_USER']) && isset($_SERVER['PHP_AUTH_PW'])) { if ($_SERVER['PHP_AUTH_USER'] === $username && $_SERVER['PHP_AUTH_PW'] === $password) echo "You are now logged in"; else die("Invalid username/password combination"); } else { header('WWW-Authenticate: Basic realm="Restricted Area"'); header('HTTP/1.0 401 Unauthorized'); die ("Please enter your username and password"); } ?> </code></pre> <p>在比较用户名和密码时，使用<code>===</code>（全等）运算符，而不是<code>==</code>（等于）运算符。这是因为我们要检查两个值是否<em>完全</em>匹配。例如，<code>'0e123' == '0e456'</code>，这对于用户名或密码目的来说不是合适的匹配。</p> <p>在前面的例子中，0e123 是 0 乘以 10 的 123 次方，结果为零，0e456 也是 0 乘以 10 的 456 次方，同样计算结果为零。因此，使用<code>==</code>运算符，它们会匹配，因为它们的值都评估为零，因此比较的结果将为<code>true</code>，但<code>===</code>运算符表示两个部分在每个方面都必须完全相同，而这两个字符串是不同的，所以测试将返回<code>false</code>。</p> <p>现在已经有了一个机制来验证用户，但只能针对单个用户名和密码进行。此外，密码以明文形式出现在 PHP 文件中，如果有人成功入侵您的服务器，他们将立即知道密码。因此，让我们看看更好地处理用户名和密码的方法。</p> <h2 id="存储用户名和密码">存储用户名和密码</h2> <p>MySQL 是存储用户名和密码的自然方式。但同样，我们不希望以明文形式存储密码，因为如果数据库被黑客访问，我们的网站可能会受到威胁。相反，我们将使用一个称为<em>单向函数</em>的巧妙技巧。</p> <p>这种类型的函数易于使用，并将文本字符串转换为看似随机的字符串。由于它们的单向性质，这些函数是不可能逆转的，因此它们的输出可以安全地存储在数据库中——窃取它的人将无法知道使用的密码。</p> <p>在本书的早期版本中，我建议您使用<em>MD5</em>散列算法来保护数据安全。然而，时间过去了，现在 MD5 被认为是易于被破解的，因此不安全。实际上，甚至其先前推荐的替代方案<em>SHA-1</em>也似乎可以被破解。</p> <p>所以，现在 PHP 5.5 几乎是到处的最低标准，我已经转而使用其内置的散列函数，这在安全性上更为可靠，并且以一种整洁的方式处理所有事务。</p> <p>以前，要安全地存储密码，您需要对密码进行<em>盐</em>处理，这是指向密码添加用户未输入的额外字符（以进一步混淆它）。然后，您需要通过单向函数将其结果转换为看似随机的字符集，这曾经是难以破解的。</p> <p>例如，如下代码（现在非常不安全，因为现代图形处理单元具有如此速度和功率）：</p> <pre><code class="language-php">echo hash('ripemd128', '`saltstring`mypassword'); </code></pre> <p>将显示此值：</p> <pre><code class="language-php">9eb8eb0584f82e5d505489e6928741e7 </code></pre> <p>请记住，这并不是建议您使用的方法。请将其视为<em>不</em>应该做的示例，因为它非常不安全。请继续阅读。</p> <h3 id="使用-password_hash">使用 password_hash</h3> <p>从 PHP 版本 5.5 开始，有一种更好的方法来创建加盐的密码哈希：<code>password_hash</code> 函数。将 <code>PASSWORD_DEFAULT</code> 作为其第二个（必需的）参数，要求函数选择当前可用的最安全的哈希函数。<code>password_hash</code> 还会为每个密码选择一个随机盐。（不要试图添加额外的盐，因为这可能会损害算法的安全性。）因此，以下代码：</p> <pre><code class="language-php">echo password_hash("mypassword", PASSWORD_DEFAULT); </code></pre> <p>将返回以下形式的字符串，其中包括盐和验证密码所需的所有信息。</p> <pre><code class="language-php">$2y$10$k0YljbC2dmmCq8WKGf8oteBGiXlM9Zx0ss4PEtb5kz22EoIkXBtbG </code></pre> <h6 id="注意-77">注意</h6> <p>如果你让 PHP 自行选择哈希算法，你应该允许返回的哈希随着时间的推移而扩展，以实现更好的安全性。PHP 的开发者建议你将哈希存储在数据库字段中，该字段至少可以扩展到 255 个字符（即使现在的平均长度为 60–72）。如果你希望，你可以手动选择 BCRYPT 算法，通过向函数的第二个参数提供常量 <code>PASSWORD_BCRYPT</code> 来保证哈希字符串仅为 60 个字符。然而，我不建议这样做，除非你有很好的理由。</p> <p>你可以提供选项（以可选的第三个参数形式），以进一步定制如何计算哈希值，比如分配给哈希计算的成本或处理器时间的量（更多时间意味着更多安全性，但服务器速度较慢）。成本的默认值为 <code>10</code>，这是你在使用 BCRYPT 时应该使用的最低值。</p> <p>然而，我不想用比你需要的更多信息来使你困惑，所以如果你希望获取有关可用选项的更多细节，请参考 <a href="http://php.net/password-hash" target="_blank">文档</a>。你甚至可以选择自己的盐（尽管从 PHP 7.0 开始已不建议这样做，因为除非你确切知道自己在做什么，否则这并不安全，就像 WordPress 仍然处理其自己的盐一样）。</p> <h3 id="使用-password_verify">使用 <code>password_verify</code></h3> <p>要验证密码是否与哈希匹配，使用 <code>password_verify</code> 函数，向其传递用户刚输入的密码字符串以及存储在数据库中的该用户密码的哈希值。</p> <p>所以，假设你的用户之前输入了（非常不安全的）密码 <em>mypassword</em>，现在你在变量 <code>$hash</code> 中存储了他们密码的哈希字符串（用户创建密码时），你可以像这样验证它们是否匹配：</p> <pre><code class="language-php">if (password_verify("mypassword", $hash)) echo "Valid"; </code></pre> <p>如果提供了哈希的正确密码，则 <code>password_verify</code> 返回值 <code>TRUE</code>，因此此 <code>if</code> 语句将显示单词 “Valid.” 如果不匹配，则返回 <code>FALSE</code>，然后你可以要求用户再试一次。</p> <h2 id="一个示例程序-1">一个示例程序</h2> <p>让我们看看这些函数与 MySQL 结合使用时是如何协同工作的。首先需要创建一个新表来存储密码哈希，因此在程序中键入 示例 13-3 并将其保存为 <em>setupusers.php</em>（或从 <a href="https://github.com/RobinNixon/lpmj6" target="_blank">GitHub</a> 下载），然后在浏览器中打开它。</p> <h5 id="示例-13-3-创建用户表并添加两个帐户">示例 13-3. 创建用户表并添加两个帐户</h5> <pre><code class="language-php"><?php //setupusers.php   require_once 'login.php';   try   {     $pdo = new PDO($attr, $user, $pass, $opts);   }   catch (\PDOException $e)   {     throw new \PDOException($e->getMessage(), (int)$e->getCode());   }   $query = "CREATE TABLE users (     forename VARCHAR(32) NOT NULL,     surname  VARCHAR(32) NOT NULL,     username VARCHAR(32) NOT NULL UNIQUE,     password VARCHAR(255) NOT NULL   )";   $result = $pdo->query($query);   $forename = 'Bill';   $surname  = 'Smith';   $username = 'bsmith';   $password = 'mysecret';   $hash     = password_hash($password, PASSWORD_DEFAULT);   add_user($pdo, $forename, $surname, $username, $hash);   $forename = 'Pauline';   $surname  = 'Jones';   $username = 'pjones';   $password = 'acrobat';   $hash     = password_hash($password, PASSWORD_DEFAULT);   add_user($pdo, $forename, $surname, $username, $hash);   function add_user($pdo, $fn, $sn, $un, $pw)   {     $stmt = $pdo->prepare('INSERT INTO users VALUES(?,?,?,?)');     $stmt->bindParam(1, $fn, PDO::PARAM_STR,  32);     $stmt->bindParam(2, $sn, PDO::PARAM_STR,  32);     $stmt->bindParam(3, $un, PDO::PARAM_STR,  32);     $stmt->bindParam(4, $pw, PDO::PARAM_STR, 255);     $stmt->execute([$fn, $sn, $un, $pw]);   } ?> </code></pre> <p>此程序将在 <em>publications</em> 数据库中创建名为 <em>users</em> 的表（或者您为 第十一章 中的 <em>login.php</em> 文件设置的任何数据库）。在此表中，它将创建两个用户：Bill Smith 和 Pauline Jones。他们的用户名和密码分别为 <em>bsmith/mysecret</em> 和 <em>pjones/acrobat</em>。</p> <p>使用此表中的数据，我们现在可以修改 示例 13-2 以正确验证用户，并且 示例 13-4 显示了执行此操作所需的代码。将其键入或从伴随网站下载，然后确保将其保存为 <em>authenticate.php</em>，并在浏览器中调用它。</p> <h5 id="示例-13-4-使用-mysql-进行-php-身份验证">示例 13-4. 使用 MySQL 进行 PHP 身份验证</h5> <pre><code class="language-php"><?php // authenticate.php   require_once 'login.php';   try   {     $pdo = new PDO($attr, $user, $pass, $opts);   }   catch (\PDOException $e)   {     throw new \PDOException($e->getMessage(), (int)$e->getCode());   }   if (isset($_SERVER['PHP_AUTH_USER']) &&       isset($_SERVER['PHP_AUTH_PW']))   { `$un_temp` `=` `sanitize``(``$pdo``,` `$_SERVER``[``'PHP_AUTH_USER'``]);`     `$pw_temp` `=` `sanitize``(``$pdo``,` `$_SERVER``[``'PHP_AUTH_PW'``]);`     `$query `  `=` `"``SELECT * FROM users WHERE username=``$un_temp``"``;`     `$result ` `=` `$pdo``->``query``(``$query``);`     `if` `(``!``$result``->``rowCount``())` `die``(``"``User not found``"``);`     `$row` `=` `$result``->``fetch``();`     `$fn ` `=` `$row``[``'forename'``];`     `$sn ` `=` `$row``[``'surname'``];`     `$un ` `=` `$row``[``'username'``];`     `$pw ` `=` `$row``[``'password'``];`     `if` `(``password_verify``(``str_replace``(``"``'``"``,` `"``"``,` `$pw_temp``),` `$pw``))`       `echo` `htmlspecialchars``(``"``$fn` `$sn` `: Hi` `$fn``,   you are now logged in as '``$un``'``"``);`     `else` `die``(``"``Invalid username/password combination``"``);`   }   else   {     header('WWW-Authenticate: Basic realm="Restricted Area"');     header('HTTP/1.1 401 Unauthorized');     die ("Please enter your username and password");   }   function sanitize($pdo, $str)   {     $str = htmlentities($str);     return $pdo->quote($str);   } ?> </code></pre> <h6 id="注意-78">注意</h6> <p>使用 HTTP 身份验证将在使用 BCrypt 哈希化的密码时施加约 80 毫秒的惩罚，其默认成本为 10。此减速作为攻击者的屏障，防止他们以最大速度尝试破解密码。因此，在非常繁忙的站点上，HTTP 身份验证不是一个好的解决方案，您可能更喜欢使用会话（请参阅下一节）。</p> <p>正如你在本书的这一部分可能期待的那样，其中一些示例开始变得相当长了。但不要灰心。这时你真正需要关注的只有加粗的那些行。它们从使用 <code>sanitize</code> 函数通过传递的用户名和密码开始，将任何 HTML 实体更改为安全字符串，再使用 <code>htmlentities</code> 函数添加单引号到字符串的起始和结束，以及使用 <code>quote</code> 方法。</p> <p>接下来，向 MySQL 发出查询以查找用户 <code>$un_temp</code>，如果返回结果，则将第一行分配给 <code>$row</code>。因为用户名是唯一的，所以只会有一行。</p> <p>现在只需检查存储在数据库中的哈希值，即 <code>$row['password']</code>，这是用户创建密码时使用 <code>password_hash</code> 计算的先前哈希值。</p> <p>如果刚刚提供的哈希和密码验证成功，<code>password_verify</code> 将返回 <code>TRUE</code>，并输出友好的欢迎字符串，称呼用户的名字（参见 图 13-4）。否则，将显示错误消息。因为我们已经使用 <code>quote</code> 对密码进行了清理，所以在调用 <code>password_verify</code> 时，首先会使用 <code>str_replace</code> 删除封装的单引号。</p> <p>您可以尝试在您的浏览器中调用程序，并输入用户名<code>bsmith</code>和密码<code>mysecret</code>（或<code>pjones</code>和<code>acrobat</code>），这些值已被示例 13-3 保存到数据库中。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1304.png" alt="Bill Smith has now been authenticated" loading="lazy"></p> <h6 id="图-13-4-bill-smith-has-now-been-authenticated">图 13-4. Bill Smith has now been authenticated</h6> <h6 id="注意-79">注意</h6> <p>通过在遇到输入后立即对其进行清理，您将阻止任何恶意 HTML、JavaScript 或 MySQL 攻击在继续之前，您将不必再次清理此数据。如果用户的密码中包含字符如<code><</code>或<code>&</code>（例如），这些字符将被<code>htmlentities</code>函数扩展为<code>&lt;</code>或<code>&amp;</code>——只要您的代码允许字符串的长度可能大于提供的输入宽度，并且始终通过此清理运行密码，您将一切安好。</p> <h1 id="使用会话sessions">使用会话（Sessions）</h1> <p>因为您的程序无法知道其他程序中设置了哪些变量——甚至不知道同一个程序上次运行时设置了什么值——因此有时您希望从一个网页跟踪用户的活动到另一个网页。您可以通过在表单中设置隐藏字段来实现这一点，如第十一章中所示，并在提交表单后检查字段的值，但是 PHP 提供了更强大、更安全和更简单的解决方案，即<em>会话（sessions）</em>。这些是存储在服务器上但只与当前用户相关的变量组。为了确保正确的变量应用于正确的用户，PHP 会在用户的 Web 浏览器中保存一个 cookie 来唯一标识他们。</p> <h6 id="注意-80">注意</h6> <p>在 2019 年，谷歌宣布正在通过名为“隐私沙箱（Privacy Sandbox）”的项目逐步淘汰其浏览器中的第三方 cookie。毫无疑问，其他浏览器也将效仿，特别是 Opera 和 Microsoft Edge，它们都依赖于 Google Chrome 的代码库。然而，这引起了监管部门的关注，因为一些公司暗示这可能会导致更多的支出流向谷歌的生态系统，因此其实施可能会发生变化。可以确定的是，cookie 正变得不受欢迎，在您访问的几乎每个网站上都会看到 cookie 警告，其存在的日子已经不多了。总之，谷歌打算将用户分成大约 1000 个具有类似浏览器使用和产品兴趣的群体，以便无法唯一识别或跟踪任何人。然而，一旦 cookie 最终被淘汰，这可能会给您的代码带来问题。因此，我建议您关注可能影响用户与您开发的代码交互方式的这一领域的发展。</p> <p>此 cookie 仅对 Web 服务器有意义，并不能用于获取用户的任何信息。您可能会问关于那些已禁用 cookie 的用户。在今天这个时代，任何禁用 cookie 的人都不应指望拥有最佳的浏览体验，如果您发现禁用了 cookie，您应该告知这样的用户，如果他们希望充分享受您的网站，则需要启用 cookie，而不是试图绕过 cookie 的使用，这可能会引发安全问题。</p> <h2 id="启动会话">启动会话</h2> <p>启动会话需要在输出任何 HTML 之前调用 PHP 函数<code>session_start</code>，类似于在头部交换期间发送 cookie。然后，要开始保存会话变量，只需将它们分配为<code>$_SESSION</code>数组的一部分，如下所示：</p> <pre><code class="language-php">$_SESSION['variable'] = $value; </code></pre> <p>然后可以在后续程序运行中轻松读取它们，如下所示：</p> <pre><code class="language-php">$variable = $_SESSION['variable']; </code></pre> <p>现在假设您有一个应用程序，它始终需要访问每个用户在表<em>users</em>中存储的名字和姓氏，而您应该稍早就已创建了这个表。让我们进一步修改 Example 13-4 中的<em>authenticate.php</em>，以便在用户经过验证后设置会话。</p> <p>Example 13-5 展示了所需的更改。唯一的区别是<code>if (password_verify...</code>部分的内容，我们现在通过打开会话并将这些变量保存到其中来开始。请将此程序键入（或修改 Example 13-4）并保存为<em>authenticate2.php</em>。但是不要立即在浏览器中运行它，因为您稍后还需要创建第二个程序。</p> <h5 id="example-13-5-在成功验证后设置会话">Example 13-5. 在成功验证后设置会话</h5> <pre><code class="language-php"><?php // authenticate2.php   require_once 'login.php';   try   {     $pdo = new PDO($attr, $user, $pass, $opts);   }   catch (\PDOException $e)   {     throw new \PDOException($e->getMessage(), (int)$e->getCode());   }   if (isset($_SERVER['PHP_AUTH_USER']) &&       isset($_SERVER['PHP_AUTH_PW']))   {     $un_temp = sanitize($pdo, $_SERVER['PHP_AUTH_USER']);     $pw_temp = sanitize($pdo, $_SERVER['PHP_AUTH_PW']);     $query   = "SELECT * FROM users WHERE username=$un_temp";     $result  = $pdo->query($query);     if (!$result->rowCount()) die("User not found");     $row = $result->fetch();     $fn  = $row['forename'];     $sn  = $row['surname'];     $un  = $row['username'];     $pw  = $row['password']; `if` `(``password_verify``(``str_replace``(``"``'``"``,` `"``"``,` `$pw_temp``),` `$pw``))`     `{`       `session_start``();`       `$_SESSION``[``'forename'``]` `=` `$fn``;`       `$_SESSION``[``'surname'``]`  `=` `$sn``;`       `echo` `htmlspecialchars``(``"``$fn` `$sn` `: Hi` `$fn``,         you are now logged in as '``$un``'``"``);`       `die` `(``"``<p><a href='continue.php'>Click here to continue</a></p>``"``);`     `}`     else die("Invalid username/password combination");   }   else   {     header('WWW-Authenticate: Basic realm="Restricted Area"');     header('HTTP/1.0 401 Unauthorized');     die ("Please enter your username and password");   }   function sanitize($pdo, $str)   {     $str = htmlentities($str);     return $pdo->quote($str);   } ?> </code></pre> <p>程序的另一个增加部分是“点击这里继续”链接，目标 URL 为<em>continue.php</em>。这将用于说明会话如何转移到另一个程序或 PHP 网页。因此，请通过键入 Example 13-6 中的程序并保存来创建<em>continue.php</em>。</p> <h5 id="example-13-6-检索会话变量">Example 13-6. 检索会话变量</h5> <pre><code class="language-php"><?php // continue.php session_start(); if (isset($_SESSION['forename'])) { $forename = htmlspecialchars($_SESSION['forename']); $surname = htmlspecialchars($_SESSION['surname']); echo "Welcome back $forename.<br> Your full name is $forename $surname.<br>"; } else echo "Please <a href='authenticate2.php'>click here</a> to log in."; ?> </code></pre> <p>现在您已经准备好在浏览器中调用<em>authenticate2.php</em>了。在提示时输入用户名<code>bsmith</code>和密码<code>mysecret</code>（或<code>pjones</code>和<code>acrobat</code>），然后点击链接加载<em>continue.php</em>。当您的浏览器调用它时，结果应该类似于 Figure 13-5。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1305.png" alt="" loading="lazy"></p> <h6 id="图-13-5-使用会话维护用户数据">图 13-5. 使用会话维护用户数据</h6> <p>会话将复杂的用户认证和登录代码整洁地限制在单个程序中。一旦用户经过验证并创建了会话，您的程序代码就变得非常简单。您只需调用<code>session_start</code>并查看<code>$_SESSION</code>中您需要访问的任何变量即可。</p> <p>在示例 13-6 中，快速测试<code>$_SESSION['forename']</code>是否有值就足以让您知道当前用户是否经过身份验证，因为会话变量存储在服务器上（不像 cookie 存储在 Web 浏览器中），因此可以信任。</p> <p>如果<code>$_SESSION['forename']</code>尚未被赋值，表示没有活动会话，因此在示例 13-6 的最后一行代码将用户重定向到登录页面<em>authenticate2.php</em>。</p> <h2 id="结束会话">结束会话</h2> <p>当需要结束会话时，通常是用户从您的网站请求注销时，您可以使用<code>session_destroy</code>函数，如示例 13-7 中所示。该示例提供了一个有用的函数来完全销毁会话，注销用户并取消所有会话变量的设置。</p> <h5 id="示例-13-7-一个方便的函数来销毁会话及其数据">示例 13-7. 一个方便的函数来销毁会话及其数据</h5> <pre><code class="language-php"><?php function destroy_session_and_data() { session_start(); $_SESSION = array(); setcookie(session_name(), '', time() - 2592000, '/'); session_destroy(); } ?> </code></pre> <p>要查看其实际操作，您可以修改<em>continue.php</em>，如示例 13-8 所示。</p> <h5 id="示例-13-8-检索会话变量然后销毁会话">示例 13-8. 检索会话变量然后销毁会话</h5> <pre><code class="language-php"><?php session_start(); if (isset($_SESSION['forename'])) { $forename = $_SESSION['forename']; $surname = $_SESSION['surname']; `destroy_session_and_data``();` echo htmlspecialchars("Welcome back $forename"); echo "<br>"; echo htmlspecialchars("Your full name is $forename $surname."); } else echo "Please <a href='authenticate.php'>click here</a> to log in."; `function` `destroy_session_and_data``()` `{` `$_SESSION` `=` `array``();` `setcookie``(``session_name``(),` `''``,` `time``()` `-` `2592000``,` `'/'``);` `session_destroy``();` `}` ?> </code></pre> <p>第一次从<em>authenticate2.php</em>导航到<em>continue.php</em>时，会显示所有会话变量。但是，由于调用了<code>destroy_session_and_data</code>函数，如果您之后点击浏览器的重新加载按钮，会话将被销毁，然后您将提示返回登录页面。</p> <h2 id="设置超时时间">设置超时时间</h2> <p>还有其他时候，您可能希望自己关闭用户的会话，比如用户忘记或忽略注销时，为了他们自己的安全，您希望程序替他们这样做。您可以通过设置超时时间来实现这一点，超过该时间没有活动则自动注销。</p> <p>要做到这一点，请使用<code>ini_set</code>函数如下所示。该示例将超时设置为正好一天（字母<code>gc</code>代表垃圾回收）：</p> <pre><code class="language-php">ini_set('session.gc_maxlifetime', 60 * 60 * 24); </code></pre> <p>如果您想知道当前超时周期是多少，可以使用以下方法显示它：</p> <pre><code class="language-php">echo ini_get('session.gc_maxlifetime'); </code></pre> <h2 id="会话安全">会话安全</h2> <p>尽管我提到一旦您验证了用户并设置了会话，您可以安全地假定会话变量是可信的，但实际情况并非如此。原因是可能使用<em>数据包嗅探</em>（数据采样）来发现通过网络传输的会话 ID。此外，如果会话 ID 在 URL 的 GET 部分传递，它可能会出现在外部站点服务器日志中。</p> <p>防止这些信息被发现的唯一真正安全的方法是实施<em>传输层安全</em>（TLS，比安全套接字层更安全的后续版本），并运行 HTTPS 而不是 HTTP 网页。这超出了本书的范围，但您可能希望查看<a href="https://tinyurl.com/apachetls" target="_blank">Apache 文档</a>以获取设置安全 Web 服务器的详细信息。</p> <h3 id="防止会话劫持">防止会话劫持</h3> <p>当 TLS 不可行时，您可以通过在存储会话时添加像下面这样的行来进一步验证用户，将他们的 IP 地址与其他详细信息一起存储：</p> <pre><code class="language-php">$_SESSION['ip'] = $_SERVER['REMOTE_ADDR']; </code></pre> <p>然后，作为额外的检查，每当加载任何页面并且会话可用时，请执行以下检查。如果存储的 IP 地址与当前 IP 地址不匹配，则调用函数 <code>different_user</code>：</p> <pre><code class="language-php">if ($_SESSION['ip'] != $_SERVER['REMOTE_ADDR']) different_user(); </code></pre> <p>在你的 <code>different_user</code> 函数中放置的代码由你决定。由于技术错误，我建议你要么删除当前会话并要求用户重新登录，要么，如果你有他们的电子邮件地址，可以通过发送确认链接的方式，让他们确认身份，这将使他们保留会话中的所有数据。</p> <p>当然，你需要意识到在同一代理服务器上的用户或在家庭或商业网络上共享相同 IP 地址的用户将具有相同的 IP 地址。如果这对你来说是个问题，请再次使用 HTTPS。你还可以存储浏览器的副本 <em>用户代理字符串</em>（开发者在浏览器中放置的标识它们的类型和版本的字符串），这也可能因使用中的各种浏览器类型、版本和计算机平台而区分用户（尽管这不是一个完美的解决方案，如果浏览器自动更新，该字符串将会更改）。使用以下方法存储用户代理：</p> <pre><code class="language-php">$_SESSION['ua'] = $_SERVER['HTTP_USER_AGENT']; </code></pre> <p>使用这段代码来比较当前的用户代理字符串与保存的字符串：</p> <pre><code class="language-php">if ($_SESSION['ua'] != $_SERVER['HTTP_USER_AGENT']) different_user(); </code></pre> <p>或者更好的做法是，像这样结合两个检查，并将组合保存为 <code>hash</code> 十六进制字符串：</p> <pre><code class="language-php">$_SESSION['check'] = hash('ripemd128', $_SERVER['REMOTE_ADDR'] . $_SERVER['HTTP_USER_AGENT']); </code></pre> <p>使用这段代码来比较当前和存储的字符串：</p> <pre><code class="language-php">if ($_SESSION['check'] != hash('ripemd128', $_SERVER['REMOTE_ADDR'] . $_SERVER['HTTP_USER_AGENT'])) different_user(); </code></pre> <h3 id="防止会话固定攻击">防止会话固定攻击</h3> <p><em>会话固定攻击</em> 是指恶意第三方获取有效的会话 ID（可能由服务器生成），并使用户使用该会话 ID 进行身份验证，而不是使用其自己的 ID 进行身份验证。当攻击者利用通过 URL 的 GET 部分传递会话 ID 的能力时，就可能发生这种情况，例如：</p> <pre><code class="language-php">http://yourserver.com/authenticate.php?PHPSESSID=123456789 </code></pre> <p>在这个例子中，虚构的会话 ID 123456789 被传递到服务器。现在，请考虑示例 13-9，它容易受到会话固定攻击的影响。要了解详细情况，请键入并保存为 <em>sessiontest.php</em>。</p> <h5 id="示例-13-9-会话易受会话固定攻击影响">示例 13-9. 会话易受会话固定攻击影响</h5> <pre><code class="language-php"><?php // sessiontest.php session_start(); if (!isset($_SESSION['count'])) $_SESSION['count'] = 0; else ++$_SESSION['count']; echo $_SESSION['count']; ?> </code></pre> <p>保存之后，使用以下 URL 在浏览器中调用它（请用正确的路径名作为前缀，例如 <em><a href="http://localhost" target="_blank">http://localhost</a></em>）：</p> <pre><code class="language-php">sessiontest.php?PHPSESSID=1234 </code></pre> <p>点击重新加载几次，你会看到计数器增加。现在尝试浏览到：</p> <pre><code class="language-php">sessiontest.php?PHPSESSID=5678 </code></pre> <p>在这里点击重新加载几次，你应该看到计数器继续增加。将计数器留在与第一个 URL 不同的数字上，返回第一个 URL，然后查看数字如何变化。在这里，你已经创建了两个自己选择的不同会话，你也可以轻松地创建所需数量的会话。</p> <p>这种方法如此危险的原因在于恶意攻击者可能会尝试向毫不知情的用户分发这些类型的 URL，如果其中任何一个用户跟随这些链接，攻击者将能够返回并接管未被删除或过期的任何会话——想象一下，如果那个会话是对购物网站或者更糟的情况是银行的。</p> <p>为了防止这种情况发生，请尽快使用<code>session_regenerate_id</code>更改会话 ID。此函数保留所有当前会话变量值，但用一个攻击者无法知道的新 ID 替换会话 ID。为此，请检查一个您任意发明的特殊会话变量。如果不存在，您就知道这是一个新会话，因此您只需更改会话 ID 并设置特殊会话变量来记录更改。示例 13-10 展示了如何通过使用会话变量<code>initiated</code>的代码来实现这一点。</p> <h5 id="示例-13-10-会话再生成">示例 13-10. 会话再生成</h5> <pre><code class="language-php"><?php session_start(); if (!isset($_SESSION['initiated'])) { session_regenerate_id(); $_SESSION['initiated'] = 1; } if (!isset($_SESSION['count'])) $_SESSION['count'] = 0; else ++$_SESSION['count']; echo $_SESSION['count']; ?> </code></pre> <p>这样，攻击者可以使用他们生成的任何会话 ID 返回到您的网站，但它们中没有一个会调用另一个用户的会话，因为它们都已被重新生成的 ID 替换。</p> <h3 id="强制仅限于-cookie-的会话">强制仅限于 Cookie 的会话</h3> <p>如果您准备好要求用户在您的网站上启用 Cookie，您可以使用<code>ini_set</code>函数，如下所示：</p> <pre><code class="language-php">ini_set('session.use_only_cookies', 1); </code></pre> <p>有了这个设置，<code>?PHPSESSID=</code>的技巧将被完全忽略。如果您使用这种安全措施，我还建议您告知用户您的网站需要使用 Cookie（但仅在用户禁用 Cookie 的情况下，特别是用户所在地区要求 Cookie 通知时），这样他们就知道如果未能获得他们想要的结果，出了什么问题。</p> <h3 id="使用共享服务器">使用共享服务器</h3> <p>在与其他帐户共享的服务器上，您不希望将所有会话数据保存在与他们相同的目录中。相反，您应选择一个只有您的帐户有访问权限（并且不可见于 Web）的目录来存储您的会话，方法是在程序开头附近放置一个<code>ini_set</code>调用，就像这样：</p> <pre><code class="language-php">ini_set('session.save_path', '/home/user/myaccount/sessions'); </code></pre> <p>配置选项仅在程序执行期间保留此新值，并在程序结束时恢复原始配置。</p> <p>这个<em>sessions</em>文件夹可能会很快填满；您可能希望根据服务器的繁忙程度定期清除旧会话。它被使用得越多，您希望保留会话的时间就越少。</p> <h6 id="注意-81">注意</h6> <p>请记住，您的网站可能会受到黑客攻击的影响。有自动化机器人在互联网上肆虐，试图找到易受攻击的站点。因此，无论您做什么，每当处理不完全由您自己的程序生成的数据时，都应该极度小心对待它。</p> <p>现在您应该对 PHP 和 MySQL 有很好的掌握，所以第十四章介绍了本书涵盖的第三种主要技术，JavaScript。</p> <h1 id="问题-12">问题</h1> <ol> <li> <p>为什么必须在程序开始时传输 cookie？</p> </li> <li> <p>哪个 PHP 函数在 web 浏览器中存储 cookie？</p> </li> <li> <p>如何销毁一个 cookie？</p> </li> <li> <p>当使用 HTTP 认证时，在 PHP 程序中用户名和密码存储在哪里？</p> </li> <li> <p><code>password_hash</code> 函数为什么是强大的安全措施？</p> </li> <li> <p><em>加盐</em> 一个字符串是什么意思？</p> </li> <li> <p>PHP 会话是什么？</p> </li> <li> <p>如何启动 PHP 会话？</p> </li> <li> <p>什么是会话劫持？</p> </li> <li> <p>会话固定是什么？</p> </li> </ol> <p>请查看 “第十三章答案”，了解这些问题的答案。</p> <h1 id="第十四章探索-javascript">第十四章：探索 JavaScript</h1> <p>JavaScript 为您的网站带来了动态功能。每当您在浏览器中鼠标悬停在某个项目上时看到弹出的内容，或者看到页面上出现新的文本、颜色或图片时，或者在页面上抓取一个对象并将其拖动到新位置时——这些通常是通过 JavaScript 完成的（尽管 CSS 越来越强大，也可以完成许多这些功能）。它提供了否则无法实现的效果，因为它在浏览器内运行，并直接访问 Web 文档中的所有元素。</p> <p>JavaScript 最早出现在 Netscape Navigator 浏览器中，与浏览器中的 Java 技术支持同时推出。由于最初错误地认为 JavaScript 是 Java 的衍生物，长期以来有关它们关系的混淆。然而，命名只是一种营销策略，旨在借助 Java 编程语言的流行来推广新的脚本语言。</p> <p>当网页的 HTML 元素在所谓的<em>文档对象模型</em>（DOM）中得到更正式、结构化的定义时，JavaScript 获得了新的力量。DOM 使得添加新段落或关注文本的一部分并更改它变得相对容易。</p> <p>由于 JavaScript 和 PHP 都支持 C 编程语言中使用的大部分结构化编程语法，它们在语法上看起来非常相似。它们也都是相当高级的语言。此外，它们都是弱类型语言，因此通过在新的上下文中使用它，很容易将变量更改为新类型。</p> <p>现在您已经学会了 PHP，您应该会发现 JavaScript 更容易。您会感到高兴，因为它是提供流畅 Web 前端的异步通信技术的核心（与 HTML5 功能一起），这是精明的 Web 用户现在期望的。</p> <h1 id="javascript-和-html-文本">JavaScript 和 HTML 文本</h1> <p>JavaScript 是一种客户端脚本语言，完全运行在 Web 浏览器内或<em>Node.js</em>下。要调用它，您需要将其放置在开启 <code><script></code> 和闭合 <code></script></code> HTML 标签之间。一个典型的使用 JavaScript 的“Hello World” 文档可能看起来像 示例 14-1。</p> <h5 id="示例-14-1-使用-javascript-显示hello-world">示例 14-1. 使用 JavaScript 显示“Hello World”</h5> <pre><code class="language-php"><html> <head><title>Hello World</title></head> <body> <script type="text/javascript"> document.write("Hello World") </script> <noscript> Your browser doesn't support or has disabled JavaScript </noscript> </body> </html> </code></pre> <h6 id="注意-82">注意</h6> <p>您可能已经看到使用 HTML 标签 <code><script</code> <code>language="javascript"></code> 的网页，但这种用法现在已经不推荐使用了。本示例使用了更新和更受欢迎的 <code><script type="text/javascript"></code>，或者您也可以只使用 <code><script></code>。</p> <p>在 <code><script></code> 标签内是一行 JavaScript 代码，它使用其类似于 PHP <code>echo</code> 或 <code>print</code> 命令的 <code>document.write</code>。正如您所预期的那样，它只是将提供的字符串输出到当前文档中，然后在其中显示。</p> <p>你可能还注意到，与 PHP 不同的是，JavaScript 中没有分号 (<code>;</code>)。这是因为换行在 JavaScript 中起到了分号的作用。然而，如果你希望在一行上有多个语句，除了最后一个外，每个命令都需要加上分号。当然，如果你愿意，你可以在每个语句的末尾加上分号，你的 JavaScript 也会正常工作。我个人的偏好是省略分号，因为它是多余的，因此我也避免可能会引起问题的做法。不过，最终，选择可能取决于你所在的团队，大多数情况下可能会要求使用分号，以确保安全。所以，如果有疑问，就加上分号吧。</p> <p>在这个例子中还要注意的是 <code><noscript></code> 和 <code></noscript></code> 标签对。当你希望为不支持 JavaScript 或禁用 JavaScript 的用户提供替代的静态 HTML 时，可以使用这些标签。是否使用这些标签取决于你，因为它们并不是必需的，但通常情况下应该使用它们，因为为使用 JavaScript 提供的操作提供静态 HTML 替代通常并不困难。然而，本书的其余示例将省略 <code><noscript></code> 标签，因为我们专注于 JavaScript 的用法，而不是不使用 JavaScript 的情况。</p> <p>当加载 示例 14-1 时，启用 JavaScript 的 Web 浏览器将输出以下内容（见 图 14-1）：</p> <pre><code class="language-php">Hello World </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1401.png" alt="JavaScript，已启用并正常工作" loading="lazy"></p> <h6 id="图-14-1-javascript已启用并正常工作">图 14-1. JavaScript，已启用并正常工作</h6> <p>浏览器禁用 JavaScript 将显示此消息（见 图 14-2）：</p> <pre><code class="language-php">Your browser doesn't support or has disabled JavaScript </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1402.png" alt="JavaScript 已禁用" loading="lazy"></p> <h6 id="图-14-2-javascript禁用">图 14-2. JavaScript，禁用</h6> <h2 id="在文档头部使用脚本">在文档头部使用脚本</h2> <p>除了将脚本放在文档主体中之外，还可以将其放在 <code><head></code> 部分，这是在页面加载时执行脚本的理想位置。如果在那里放置关键代码和函数，还可以确保它们能够立即被文档中依赖它们的任何其他脚本部分使用。</p> <p>将脚本放在文档头部的另一个原因是为了使 JavaScript 能够将诸如 meta 标签之类的东西写入 <code><head></code> 部分，因为你的脚本位置默认会写入文档的那部分。</p> <h2 id="旧版和非标准浏览器">旧版和非标准浏览器</h2> <p>如果你需要支持不支持脚本的浏览器（在今天几乎是不可能的），你需要使用 HTML 注释标签 (<code><!--</code> 和 <code>--></code>) 来防止它们遇到不应看到的脚本代码。示例 14-2 显示了如何将它们添加到你的脚本代码中。</p> <h5 id="示例-14-2-针对非-javascript-浏览器修改的hello-world示例">示例 14-2. 针对非 JavaScript 浏览器修改的“Hello World”示例</h5> <pre><code class="language-php"><html> <head><title>Hello World</title></head> <body> <script type="text/javascript">`<!--` document.write("Hello World") `// -->` </script> </body> </html> </code></pre> <p>这里在 <code><script></code> 开始语句之后直接添加了一个开放的 HTML 注释标签 (<code><!--</code>)，并在用 <code></script></code> 关闭脚本之前直接添加了一个关闭注释标签 (<code>// --></code>)。</p> <p>双斜杠 (<code>//</code>) 用于 JavaScript 表示该行剩余部分是注释。它存在的目的是让支持 JavaScript 的浏览器忽略后面的 <code>--></code>，但非 JavaScript 浏览器将忽略前面的 <code>//</code> 并执行 <code>--></code> 以关闭 HTML 注释。</p> <p>尽管解决方案有点复杂，但你真正需要记住的只是在希望支持非常旧或非标准浏览器时使用以下两行来包含你的 JavaScript：</p> <pre><code class="language-php">`<``script` `type``=``"text/javascript"``>``<!--` *`(``Your` `JavaScript` `goes` `here``...``)`* `// -->` `<``/``s``c``r``i``p``t``>` </code></pre> <p>然而，这些注释的使用对于过去几年中发布的任何浏览器都是不必要的，但是你需要注意这一点，以防万一。</p> <h2 id="包含-javascript-文件">包含 JavaScript 文件</h2> <p>除了直接在 HTML 文档中编写 JavaScript 代码外，您还可以包含来自您的网站或互联网任何地方的 JavaScript 代码文件。其语法如下：</p> <pre><code class="language-php"><script type="text/javascript" src="script.js"></script> </code></pre> <p>要从互联网中引入文件，请使用此方法（这里不包括 <code>type="text/javascript"</code>，因为这是可选的）：</p> <pre><code class="language-php"><script src="http://someserver.com/script.js"></script> </code></pre> <p>至于脚本文件本身，它们必须 <em>不</em> 包含任何 <code><script></code> 或 <code></script></code> 标签，因为这些标签是不必要的：浏览器已经知道正在加载 JavaScript 文件。如果将它们放入 JavaScript 文件中，将会导致错误。</p> <p>包含脚本文件是您在网站上使用第三方 JavaScript 文件的首选方法。</p> <h6 id="注意-83">注意</h6> <p>可以省略 <code>type="text/javascript"</code> 参数；所有现代浏览器默认假定脚本包含 JavaScript。</p> <h2 id="调试-javascript-错误">调试 JavaScript 错误</h2> <p>当你学习 JavaScript 时，能够跟踪打字或其他编码错误非常重要。与 PHP 不同，它在浏览器中显示错误消息，JavaScript 处理错误消息的方式会根据所使用的浏览器而改变。Table 14-1 列出了如何访问最常用浏览器中的 JavaScript 错误消息。</p> <p>表 14-1. 在不同浏览器中访问 JavaScript 错误消息</p> <table> <thead> <tr> <th>浏览器</th> <th>如何访问 JavaScript 错误消息</th> </tr> </thead> <tbody> <tr> <td>Apple Safari</td> <td>打开 Safari 并选择 Safari > Preferences > Advanced。然后选择在菜单栏中显示“开发”菜单。选择 Develop > Show Error Console。</td> </tr> <tr> <td>Google Chrome, Microsoft Edge, Mozilla Firefox, & Opera</td> <td>在 PC 上按 Ctrl-Shift-J 或在 Mac 上按 Command-Shift-J。</td> </tr> </tbody> </table> <p>请参阅浏览器开发者网站上的完整详细信息。</p> <h1 id="使用注释-1">使用注释</h1> <p>由于它们共同继承自 C 编程语言，PHP 和 JavaScript 有许多相似之处，其中之一是注释。首先是单行注释，如下所示：</p> <pre><code class="language-php">// This is a comment </code></pre> <p>这种风格使用一对斜杠字符(<code>//</code>)告知 JavaScript 忽略后续所有内容。您也可以使用多行注释，就像这样：</p> <pre><code class="language-php">/* This is a section of multiline comments that will not be interpreted */ </code></pre> <p>你可以使用序列<code>/*</code>开启多行注释，并用<code>*/</code>结束它。请记住，不能嵌套多行注释，因此请确保不要注释掉已包含多行注释的大代码段。</p> <h1 id="分号-2">分号</h1> <p>与 PHP 不同，如果一行上只有一个语句，JavaScript 通常不需要分号。因此，以下写法是有效的：</p> <pre><code class="language-php">x += 10 </code></pre> <p>然而，当你希望在一行上放置多个语句时，必须用分号分隔它们，就像这样：</p> <pre><code class="language-php">x += 10; y -= 5; z = 0 </code></pre> <p>通常可以省略最后一个分号，因为换行符会终止最后一个语句。</p> <h6 id="警告-12">警告</h6> <p>分号规则有例外情况。如果您编写 JavaScript 书签工具，或在语句结尾处有变量或函数引用，并且下一行的第一个字符是左括号或左方括号，<em>必须</em>记住追加分号，否则 JavaScript 将失败。因此，当有疑问时，请使用分号。</p> <h1 id="变量-1">变量</h1> <p>在 JavaScript 中，没有像 PHP 中的美元符号那样特殊标识变量。相反，变量使用以下命名规则：</p> <ul> <li> <p>变量可以包含字母<code>a–z</code>、<code>A–Z</code>、<code>0–9</code>、<code>$</code>符号和下划线(<code>_</code>)。</p> </li> <li> <p>变量名中不允许包含除了<code>a–z</code>、<code>A–Z</code>、<code>0–9</code>、<code>$</code>和下划线(<code>_</code>)以外的任何字符。</p> </li> <li> <p>变量名的第一个字符只能是<code>a–z</code>、<code>A–Z</code>、<code>$</code>或<code>_</code>（不能是数字）。</p> </li> <li> <p>变量名区分大小写。<code>Count</code>、<code>count</code>和<code>COUNT</code>都是不同的变量。</p> </li> <li> <p>变量名长度没有固定限制。</p> </li> </ul> <p>是的，你没错：在允许的字符列表中包含<code>$</code>。JavaScript 允许这样，并且<code>$</code>可能是变量或函数名的第一个字符。虽然我不建议保留<code>$</code>字符，但这条规则允许您更快地将大量 PHP 代码移植到 JavaScript 中。</p> <h2 id="字符串变量-1">字符串变量</h2> <p>JavaScript 字符串变量应该用单引号或双引号括起来，像这样：</p> <pre><code class="language-php">greeting = "Hello there" warning = 'Be careful' </code></pre> <p>在双引号字符串或单引号字符串中可以包含单引号或双引号。但必须使用反斜杠字符来转义相同类型的引号，例如：</p> <pre><code class="language-php">greeting = "\"Hello there\" is a greeting" warning = '\'Be careful\' is a warning' </code></pre> <p>要从字符串变量中读取数据，可以将其赋值给另一个变量，例如：</p> <pre><code class="language-php">newstring = oldstring </code></pre> <p>或者你可以在函数中使用它，就像这样：</p> <pre><code class="language-php">status = "All systems are working" document.write(status) </code></pre> <h2 id="数值变量-1">数值变量</h2> <p>创建数值变量就像简单地赋值一样，例如：</p> <pre><code class="language-php">count = 42 temperature = 98.4 </code></pre> <p>像字符串一样，数值变量可以被读取并用于表达式和函数中。</p> <h2 id="数组-1">数组</h2> <p>JavaScript 数组与 PHP 中的数组非常相似，因为数组可以包含字符串或数值数据，以及其他数组。要为数组分配值，请使用以下语法（在这种情况下创建一个字符串数组）：</p> <pre><code class="language-php">toys = ['bat', 'ball', 'whistle', 'puzzle', 'doll'] </code></pre> <p>要创建多维数组，可以将较小的数组嵌套在较大的数组中。因此，要创建一个二维数组，包含魔方的一个面的颜色（红、绿、橙、黄、蓝和白，分别用其大写的首字母表示），可以使用以下代码：</p> <pre><code class="language-php">face = [ ['R', 'G', 'Y'], ['W', 'R', 'O'], ['Y', 'W', 'G'] ] </code></pre> <p>前面的示例已经格式化，以便明确显示正在进行的操作，但也可以这样写：</p> <pre><code class="language-php">face = [['R', 'G', 'Y'], ['W', 'R', 'O'], ['Y', 'W', 'G']] </code></pre> <p>或者像这样：</p> <pre><code class="language-php">top = ['R', 'G', 'Y'] mid = ['W', 'R', 'O'] bot = ['Y', 'W', 'G'] face = [top, mid, bot] </code></pre> <p>要访问此矩阵中从下到上第二个位置和从左到右第三个位置的元素，您将使用以下方法（因为数组元素从位置 0 开始）：</p> <pre><code class="language-php">document.write(face[1][2]) </code></pre> <p>此语句将输出字母<code>O</code>来表示<em>橙色</em>。</p> <h6 id="注-1">注</h6> <p>JavaScript 数组是强大的存储结构，因此第十六章更深入地讨论了它们。</p> <h1 id="运算符-2">运算符</h1> <p>在 JavaScript 中，就像在 PHP 中一样，运算符可能涉及数学运算、对字符串的更改以及比较和逻辑运算（<code>and</code>、<code>or</code>等）。JavaScript 数学运算符看起来非常像普通算术运算，例如，以下语句输出<code>15</code>：</p> <pre><code class="language-php">document.write(13 + 2) </code></pre> <p>以下各节将教你各种运算符。</p> <h2 id="算术运算符-1">算术运算符</h2> <p><em>算术运算符</em> 用于进行数学计算。您可以使用它们进行四种主要操作（加法、减法、乘法和除法），以及找到模数（除法后的余数），以及增加或减少一个值（见表 14-2）。</p> <p>表 14-2. 算术运算符</p> <table> <thead> <tr> <th>运算符</th> <th>描述</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td><code>+</code></td> <td>加法</td> <td><code>`j` **`+`** `12`</code></td> </tr> <tr> <td><code>–</code></td> <td>减法</td> <td><code>`j` **`–`** `22`</code></td> </tr> <tr> <td><code>*</code></td> <td>乘法</td> <td><code>`j` **`*`** `7`</code></td> </tr> <tr> <td><code>/</code></td> <td>除法</td> <td><code>`j` **`/`** `3.13`</code></td> </tr> <tr> <td><code>%</code></td> <td>取模（除法余数）</td> <td><code>`j` **`%`** `6`</code></td> </tr> <tr> <td><code>++</code></td> <td>递增</td> <td><code>**`++`**`j`</code></td> </tr> <tr> <td><code>--</code></td> <td>递减</td> <td><code>**`--`**`j`</code></td> </tr> </tbody> </table> <h2 id="赋值运算符-1">赋值运算符</h2> <p><em>分配运算符</em> 用于将值分配给变量。它们从非常简单的<code>=</code>开始，然后移到<code>+=</code>、<code>–=</code>等。运算符<code>+=</code>将右侧的值添加到左侧的变量中，而不是完全替换左侧的值。因此，如果<code>count</code>从值<code>6</code>开始，该语句：</p> <pre><code class="language-php">count += 1 </code></pre> <p>将<code>count</code>设置为<code>7</code>，就像更常见的赋值语句一样：</p> <pre><code class="language-php">count = count + 1 </code></pre> <p>表 14-3 列出了各种可用的赋值运算符。</p> <p>表 14-3. 赋值运算符</p> <table> <thead> <tr> <th>运算符</th> <th>示例</th> <th>相当于</th> </tr> </thead> <tbody> <tr> <td><code>=</code></td> <td><code>j **`=`** 99</code></td> <td><code>j = 99</code></td> </tr> <tr> <td><code>+=</code></td> <td><code>j **`+=`** 2</code></td> <td><code>j = j + 2</code></td> </tr> <tr> <td><code>+=</code></td> <td><code>j **+=** 'string'</code></td> <td><code>j = j + 'string'</code></td> </tr> <tr> <td><code>–=</code></td> <td><code>j **`–=`** 12</code></td> <td><code>j = j – 12</code></td> </tr> <tr> <td><code>*=</code></td> <td><code>j **`*=`** 2</code></td> <td><code>j = j * 2</code></td> </tr> <tr> <td><code>/=</code></td> <td><code>j **`/=`** 6</code></td> <td><code>j = j / 6</code></td> </tr> <tr> <td><code>%=</code></td> <td><code>j **`%=`** 7</code></td> <td><code>j = j % 7</code></td> </tr> </tbody> </table> <h2 id="比较运算符-2">比较运算符</h2> <p><em>比较运算符</em>通常用于诸如 <code>if</code> 语句之类的结构中，用于比较两个项。例如，您可能希望知道您正在递增的变量是否达到了特定值，或者另一个变量是否小于设定值等（参见表 14-4）。</p> <p>表 14-4. 比较运算符</p> <table> <thead> <tr> <th>运算符</th> <th>描述</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td><code>==</code></td> <td>是<em>等于</em></td> <td><code>j **==** 42</code></td> </tr> <tr> <td><code>!=</code></td> <td>不等于</td> <td><code>j **`!=`** 17</code></td> </tr> <tr> <td><code>></code></td> <td>是<em>大于</em></td> <td><code>j **`>`** 0</code></td> </tr> <tr> <td><code><</code></td> <td>是<em>小于</em></td> <td><code>j **`<`** 100</code></td> </tr> <tr> <td><code>>=</code></td> <td>是<em>大于或等于</em></td> <td><code>j **`>=`** 23</code></td> </tr> <tr> <td><code><=</code></td> <td>是<em>小于或等于</em></td> <td><code>j **`<=`** 13</code></td> </tr> <tr> <td><code>===</code></td> <td>等于（且类型相同）</td> <td><code>j **===** 56</code></td> </tr> <tr> <td><code>!==</code></td> <td>不等于（且类型相同）</td> <td><code>j **`!==`** '1'</code></td> </tr> </tbody> </table> <h2 id="逻辑运算符-2">逻辑运算符</h2> <p>与 PHP 不同，JavaScript 的<em>逻辑</em> <em>运算符</em> 不包括 <code>and</code> 和 <code>or</code> 的等价物 <code>&&</code> 和 <code>||</code>，也没有 <code>xor</code> 运算符（参见表 14-5）。</p> <p>表 14-5. 逻辑运算符</p> <table> <thead> <tr> <th>运算符</th> <th>描述</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td><code>&&</code></td> <td>与</td> <td><code>j == 1 **&&** k == 2</code></td> </tr> <tr> <td><code>&#124;&#124;</code></td> <td>或</td> <td><code>j < 100 **&#124;&#124;** j > 0</code></td> </tr> <tr> <td><code>!</code></td> <td>非</td> <td><code>**`!`** (j == k)</code></td> </tr> </tbody> </table> <h2 id="增减和简写赋值">增减和简写赋值</h2> <p>您学会在 PHP 中使用的后增和前增减形式及简写赋值运算符，在 JavaScript 中也受支持：</p> <pre><code class="language-php">++x --y x += 22 y -= 3 </code></pre> <h2 id="字符串连接-1">字符串连接</h2> <p>JavaScript 处理字符串连接的方式与 PHP 稍有不同。它使用加号 (<code>+</code>) 而不是点号 (<code>.</code>) 运算符，例如：</p> <pre><code class="language-php">document.write("You have " + messages + " messages.") </code></pre> <p>假设变量 <code>messages</code> 的值设定为 <code>3</code>，则此行代码的输出如下：</p> <pre><code class="language-php">You have 3 messages. </code></pre> <p>正如您可以使用 <code>+=</code> 运算符将值添加到数值变量中一样，您也可以使用相同方式将一个字符串附加到另一个字符串上：</p> <pre><code class="language-php">name = "James" name += " Dean" </code></pre> <h2 id="转义字符-1">转义字符</h2> <p>转义字符，您已经看到它们用于在字符串中插入引号，也可以用于插入各种特殊字符，例如制表符、换行符和回车符。以下是一个使用制表符布局标题的示例——这仅用于说明转义字符的用法，在网页中，有更好的布局方式：</p> <pre><code class="language-php">heading = "Name\tAge\tLocation" </code></pre> <p>表 14-6 详细描述了可用的转义字符。</p> <p>表 14-6. JavaScript 的转义字符</p> <table> <thead> <tr> <th>字符</th> <th>含义</th> </tr> </thead> <tbody> <tr> <td><code>\b</code></td> <td>退格</td> </tr> <tr> <td><code>\f</code></td> <td>换页符</td> </tr> <tr> <td><code>\n</code></td> <td>换行符</td> </tr> <tr> <td><code>\r</code></td> <td>回车符</td> </tr> <tr> <td><code>\t</code></td> <td>制表符</td> </tr> <tr> <td><code>\'</code></td> <td>单引号（或撇号）</td> </tr> <tr> <td><code>\"</code></td> <td>双引号</td> </tr> <tr> <td><code>\\</code></td> <td>反斜杠</td> </tr> <tr> <td><code>\*`XXX`*</code></td> <td>介于 <code>000</code> 和 <code>377</code> 之间的八进制数，表示与拉丁-1 字符等效的字符（例如 <code>\251</code> 表示 © 符号）</td> </tr> <tr> <td><code>\x*`XX`*</code></td> <td>介于 <code>00</code> 和 <code>FF</code> 之间的十六进制数，表示与拉丁-1 字符等效的字符（例如 <code>\xA9</code> 表示 © 符号）</td> </tr> <tr> <td><code>\u*`XXXX`*</code></td> <td>介于<code>0000</code>和<code>FFFF</code>之间的十六进制数字，表示相应的 Unicode 字符（例如<code>\u00A9</code>表示©符号）</td> </tr> </tbody> </table> <h1 id="变量类型-1">变量类型</h1> <p>类似于 PHP，JavaScript 是一种非常宽松的类型语言；变量的<em>类型</em>仅在赋值时确定，并且随着变量在不同上下文中的出现而变化。通常情况下，您不必担心类型；JavaScript 会弄清楚您想要的并直接执行。</p> <p>查看示例 14-3，其中：</p> <ol> <li> <p>变量<code>n</code>被赋予字符串值<code>'838102050'</code>。下一行打印出它的值，并使用<code>typeof</code>运算符查找类型。</p> </li> <li> <p>当数字<code>12345</code>和<code>67890</code>相乘时，<code>n</code>被赋予的值是返回的值。这个值也是<code>838102050</code>，但它是一个数字，而不是字符串。然后查找并显示变量的类型。</p> </li> <li> <p>一些文本被附加到数字<code>n</code>上，并显示结果。</p> </li> </ol> <h5 id="示例-14-3-通过赋值设置变量类型">示例 14-3. 通过赋值设置变量类型</h5> <pre><code class="language-php"><script> n = '838102050' // Set 'n' to a string document.write('n = ' + n + ', and is a ' + typeof n + '<br>') n = 12345 * 67890; // Set 'n' to a number document.write('n = ' + n + ', and is a ' + typeof n + '<br>') n += ' plus some text' // Change 'n' from a number to a string document.write('n = ' + n + ', and is a ' + typeof n + '<br>') </script> </code></pre> <p>此脚本的输出如下所示：</p> <pre><code class="language-php">n = 838102050, and is a string n = 838102050, and is a number n = 838102050 plus some text, and is a string </code></pre> <p>如果对变量的类型存有任何疑问，或者需要确保变量具有特定类型，可以通过使用以下语句（分别将字符串转换为数字和将数字转换为字符串）来强制执行它：</p> <pre><code class="language-php">n = "123" n *= 1 // Convert 'n' into a number n = 123 n += "" // Convert 'n' into a string </code></pre> <p>或者您可以以同样的方式使用以下函数：</p> <pre><code class="language-php">n = "123" n = parseInt(n) // Convert 'n' into an integer number n = parseFloat(n) // Convert 'n' into a floating point number n = 123 n = n.toString() // Convert 'n' into a string </code></pre> <p>您可以在 JavaScript <a href="https://javascript.info/type-conversions" target="_blank">在线阅读更多有关类型转换</a>。并且您可以通过使用<code>typeof</code>运算符随时查找变量的类型。</p> <h1 id="函数-1">函数</h1> <p>与 PHP 类似，JavaScript 函数用于将执行特定任务的代码段分离出来。要创建函数，请按照示例 14-4 中所示的方式声明。</p> <h5 id="示例-14-4-简单函数声明">示例 14-4. 简单函数声明</h5> <pre><code class="language-php"><script> function product(a, b) { return a*b } </script> </code></pre> <p>此函数获取传递的两个参数，将它们相乘，并返回乘积。</p> <h1 id="全局变量-1">全局变量</h1> <p><em>全局</em>变量是指在任何函数之外定义的变量（或在函数内部定义但没有使用<code>var</code>关键字）。它们可以以下列方式定义：</p> <pre><code class="language-php"> a = 123 // Global scope var b = 456 // Global scope if (a == 123) var c = 789 // Global scope </code></pre> <p>无论您是否使用了<code>var</code>关键字，只要变量在函数之外定义，它就具有全局作用域。这意味着脚本的每个部分都可以访问它。</p> <h1 id="局部变量-1">局部变量</h1> <p>自动传递给函数的参数具有<em>局部</em>作用域，即只能在该函数内部引用。但是，也有一个例外。数组是通过引用传递给函数的，因此如果修改数组参数中的任何元素，则会修改原始数组的元素。</p> <p>要定义仅在当前函数中具有作用域且未作为参数传递的局部变量，请使用<code>var</code>关键字。示例 14-5 展示了一个创建一个具有全局作用域和两个局部作用域的变量的函数。</p> <h5 id="示例-14-5创建具有全局和局部作用域变量的函数">示例 14-5。创建具有全局和局部作用域变量的函数</h5> <pre><code class="language-php"><script> function test() { a = 123 // Global scope var b = 456 // Local scope if (a == 123) var c = 789 // Local scope } </script> </code></pre> <p>要测试 PHP 中作用域设置是否有效，可以使用<code>isset</code>函数。但在 JavaScript 中没有这样的函数，因此示例 14-6 使用<code>typeof</code>运算符，当变量未定义时返回字符串<code>undefined</code>。</p> <h5 id="示例-14-6检查在函数测试中定义的变量的作用域">示例 14-6。检查在函数测试中定义的变量的作用域</h5> <pre><code class="language-php"><script> test() if (typeof a != 'undefined') document.write('a = "' + a + '"<br>') if (typeof b != 'undefined') document.write('b = "' + b + '"<br>') if (typeof c != 'undefined') document.write('c = "' + c + '"<br>') function test() { a = 123 var b = 456 if (a == 123) var c = 789 } </script> </code></pre> <p>此脚本的输出是以下单行：</p> <pre><code class="language-php">a = "123" </code></pre> <p>这表明只有变量<code>a</code>被赋予了全局作用域，这正是我们期望的，因为变量<code>b</code>和<code>c</code>通过使用<code>var</code>关键字赋予了局部作用域。</p> <p>如果您的浏览器发出关于<code>b</code>未定义的警告，该警告是正确的，但可以忽略。</p> <h2 id="使用-let-和-const">使用 let 和 const</h2> <p>JavaScript 现在提供了两个新关键字：<code>let</code>和<code>const</code>。<code>let</code>关键字基本上可以替代<code>var</code>，但它有一个优势，一旦用<code>let</code>声明过变量，就不能重新声明变量，尽管使用<code>var</code>可以。</p> <p>你看，使用<code>var</code>可以重新声明变量的事实导致了一些难以调试的 bug，例如下面的情况：</p> <pre><code class="language-php">var hello = "Hello there" var counter = 1 if (counter > 0) {   var hello = "How are you?" } document.write(hello) </code></pre> <p>看出问题了吗？因为<code>counter</code>大于 0（因为我们将其初始化为 1），字符串<code>hello</code>被重新定义为“你好吗？”然后显示在文档中。</p> <p>现在，如果您用<code>let</code>替换<code>var</code>（如下所示），第二个声明将被忽略，原始字符串“你好”将被显示：</p> <pre><code class="language-php">let hello = "Hello there" let counter = 1 if (counter > 0) {   let hello = "How are you?" } document.write(hello) </code></pre> <p><code>var</code>关键字可以是全局作用域（如果在任何块或函数之外）或<em>函数</em>作用域，用它声明的变量初始化为<code>undefined</code>，但<code>let</code>关键字可以是全局或<em>块</em>作用域，变量不会被初始化。</p> <p>使用<code>let</code>分配的任何变量的作用域要么在整个文档中声明（如果在任何块之外），要么在由<code>{}</code>界定的块内（包括函数），其作用域仅限于该块（及其任何嵌套的子块）。如果在块内声明变量，但试图从该块外部访问它，将返回错误，如下面的示例，<code>document.write</code>将失败，因为<code>hello</code>将没有值：</p> <pre><code class="language-php">let counter = 1 if (counter > 0) {   let hello = "How are you?" } document.write(hello) </code></pre> <p>可以使用<code>let</code>声明与先前声明的同名变量，只要它在新的作用域内，这种情况下，前一个作用域中同名变量的任何先前赋值将对新作用域不可访问，因为同名的新变量被视为与先前的完全不同。它仅在当前块或任何子块中具有作用域（除非使用另一个<code>let</code>声明在子块中声明同名的另一个变量）。</p> <p>尽量避免重用有意义的变量名称是个好习惯，否则你可能会引起混淆。不过，循环或索引变量如<code>i</code>（或其他简短简单的名称）通常可以在新的作用域中重复使用而不会引起混淆。</p> <p>通过声明一个变量具有常量值（即不能更改的值），你可以进一步增加对作用域的控制。这在你创建一个视为常量的变量但只使用<code>var</code>或<code>let</code>声明时很有用，因为你可能在代码中的某些地方尝试更改该值，这是允许的但可能是一个错误。</p> <p>但是，如果你使用<code>const</code>关键字声明变量并分配其值，稍后尝试更改该值将被禁止，并且你的代码将在控制台中显示类似于以下的错误消息：</p> <pre><code class="language-php">Uncaught TypeError: Assignment to constant variable </code></pre> <p>以下代码将导致该错误：</p> <pre><code class="language-php">const hello = "Hello there" let counter = 1 if (counter > 0) {   hello = "How are you?" } document.write(hello) </code></pre> <p>就像<code>let</code>一样，<code>const</code>声明也是块作用域的（在<code>{}</code>和任何子块内部），这意味着你可以在代码片段的不同作用域中有相同名称的常量变量但具有不同的值。然而，我强烈建议你尽量避免名称重复，并且在每个程序中为一个唯一值使用一个新的常量名称。</p> <p>总结：<code>var</code>具有全局或函数作用域，而<code>let</code>和<code>const</code>具有全局或块作用域。<code>var</code>和<code>let</code>都可以在声明时不初始化，而<code>const</code>在声明时必须初始化。<code>var</code>关键字可以重新声明<code>var</code>变量，但<code>let</code>和<code>const</code>不能。最后，<code>const</code>既不能重新声明也不能重新赋值。</p> <h6 id="注意-84">注意</h6> <p>你可能更喜欢使用开发者控制台进行测试，比如这些（以及本书其他地方），正如之前在“调试 JavaScript 错误”中所解释的那样，在这种情况下，你可以将<code>document.write</code>替换为<code>console.log</code>，输出将显示在控制台而不是浏览器中。这也是在文档完全加载后运行的 JavaScript 的更好选择，因为此时<code>document.write</code>会替换当前文档而不是附加到其上，这可能不是您的意图。</p> <h1 id="文档对象模型">文档对象模型</h1> <p>JavaScript 的设计非常聪明。与其只是创建另一种脚本语言（这在当时仍然是一个相当大的改进），更好的做法是围绕已经存在的 HTML 文档对象模型构建它。这将 HTML 文档的各个部分分解为离散的<em>对象</em>，每个对象都有自己的<em>属性</em>和<em>方法</em>，并且受 JavaScript 控制。</p> <p>JavaScript 使用句点（一个很好的理由是 <code>+</code> 是 JavaScript 中的字符串连接运算符，而不是句点）来分隔对象、属性和方法。例如，我们可以把名片看作一个名为 <code>card</code> 的对象。该对象包含诸如姓名、地址、电话号码等属性。在 JavaScript 的语法中，这些属性看起来像这样：</p> <pre><code class="language-php">card.name card.phone card.address </code></pre> <p>它的方法是检索、更改和其他操作属性的函数。例如，要调用一个显示 <code>card</code> 对象属性的方法，你可以使用这样的语法：</p> <pre><code class="language-php">card.display() </code></pre> <p>请查看本章早些示例中的一些例子，并注意 <code>document.write</code> 语句的使用位置。现在您了解了 JavaScript 基于对象的原理，您将看到 <code>write</code> 实际上是 <code>document</code> 对象的一个方法。</p> <p>在 JavaScript 中，存在一种父子对象的层次结构，这就是所谓的文档对象模型（DOM；见 图 14-3）。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1403.png" alt="DOM 对象层次结构示例" loading="lazy"></p> <h6 id="图-14-3-dom-对象层次结构示例">图 14-3. DOM 对象层次结构示例</h6> <p>该图使用您已经熟悉的 HTML 标签来说明文档中各种对象之间的父子关系。例如，链接内的 URL 是 HTML 文档的一部分。在 JavaScript 中，它可以这样引用：</p> <pre><code class="language-php">url = document.links.linkname.href </code></pre> <p>请注意这如何沿着中心列向下进行。第一部分 <code>document</code> 指的是 <code><html></code> 和 <code><body></code> 标签；<code>links.linkname</code> 指的是 <code><a></code> 标签，<code>href</code> 指的是 <code>href</code> 属性。</p> <p>让我们将其转换为一些 HTML 和一个脚本来读取链接的属性。键入 示例 14-7，将其保存为 <em>linktest.html</em>，然后在浏览器中调用它。</p> <h5 id="示例-14-7-使用-javascript-读取链接-url">示例 14-7. 使用 JavaScript 读取链接 URL</h5> <pre><code class="language-php"><html> <head> <title>Link Test</title> </head> <body> <a id="mylink" href="http://mysite.com">Click me</a><br> <script> url = document.links.mylink.href document.write('The URL is ' + url) </script> </body> </html> </code></pre> <p>注意 <code><script></code> 标签的简写形式，我省略了参数 <code>type="text/JavaScript"</code>，以节省您的输入时间。如果您愿意，仅为测试此（以及其他示例）的目的，您也可以省略 <code><script></code> 和 <code></script></code> 标签外的所有内容。该示例的输出如下所示：</p> <pre><code class="language-php">Click me The URL is http://mysite.com </code></pre> <p>输出的第二行来自于 <code>document.write</code> 方法。请注意代码是如何从 <code>document</code> 开始按照文档树向下移动到 <code>links</code>、<code>mylink</code>（链接的 <code>id</code>）和 <code>href</code>（URL 目标值）的。</p> <p>也有一种同样有效的简写形式，它以 <code>id</code> 属性的值作为起点：<code>mylink.href</code>。因此，您可以将其替换为</p> <pre><code class="language-php">url = document.links.mylink.href </code></pre> <p>以下是具体内容：</p> <pre><code class="language-php">url = mylink.href </code></pre> <h2 id="-符号的另一种用法"><code>$</code> 符号的另一种用法</h2> <p>正如前面提到的，JavaScript 变量和函数名称中允许使用 <code>$</code> 符号。因此，有时您可能会遇到像这样看起来奇怪的代码：</p> <pre><code class="language-php">url = $('mylink').href </code></pre> <p>一些富有创造力的程序员决定 <code>getElementById</code> 函数在 JavaScript 中非常普遍，因此编写了一个名为 <code>$</code> 的函数来替换它，就像 jQuery 中使用 <code>$</code> 一样（尽管 jQuery 将 <code>$</code> 用于更多用途——请参见第二十二章）。如示例 14-8 所示。</p> <h5 id="示例-14-8-一个替代-getelementbyid-方法的函数">示例 14-8. 一个替代 <code>getElementById</code> 方法的函数</h5> <pre><code class="language-php"><script> function $(id) { return document.getElementById(id) } </script> </code></pre> <p>因此，只要您在代码中包含了 <code>$</code> 函数，就可以使用如下的语法：</p> <pre><code class="language-php">$('mylink').href </code></pre> <p>可以替换如下代码：</p> <pre><code class="language-php">document.getElementById('mylink').href </code></pre> <h2 id="使用-dom">使用 DOM</h2> <p><code>links</code> 对象实际上是一个 URL 数组，因此在所有浏览器中可以安全地像 示例 14-7 中的 <code>mylink</code> URL 一样进行引用（因为它是第一个也是唯一的链接）：</p> <pre><code class="language-php">url = document.links[0].href </code></pre> <p>如果您想知道整个文档中有多少链接，可以像这样查询 <code>links</code> 对象的 <code>length</code> 属性：</p> <pre><code class="language-php">numlinks = document.links.length </code></pre> <p>您可以这样提取并显示文档中的所有链接：</p> <pre><code class="language-php">for (j=0 ; j < document.links.length ; ++j) document.write(document.links[j].href + '<br>') </code></pre> <p>某物的 <code>length</code> 是每个数组以及许多对象的属性。例如，您可以这样查询浏览器的浏览历史记录中的项目数量：</p> <pre><code class="language-php">document.write(history.length) </code></pre> <p>为了防止网站窥探您的浏览历史，<code>history</code> 对象仅存储数组中的站点数量：您无法从中读取或写入这些值。但是，如果您知道页面在历史记录中的位置，可以用另一页面替换当前页面。在某些情况下，这非常有用，例如您知道历史记录中某些页面来自您的站点，或者您只是希望将浏览器退回一些页面，您可以使用 <code>history</code> 对象的 <code>go</code> 方法。例如，要将浏览器退回三页，可以执行以下命令：</p> <pre><code class="language-php">history.go(-3) </code></pre> <p>您还可以使用以下方法逐页向后或向前移动一页：</p> <pre><code class="language-php">history.back() history.forward() </code></pre> <p>类似地，您可以像这样替换当前加载的 URL 为您选择的 URL：</p> <pre><code class="language-php">document.location.href = 'http://google.com' </code></pre> <p>当然，DOM 的内容远不止于阅读和修改链接。随着您在 JavaScript 的以下章节中的进展，您将对 DOM 及其访问方式非常熟悉。</p> <h1 id="关于-documentwrite">关于 document.write</h1> <p>在教授编程时，有必要有一种快速简便的方法来显示表达式的结果。例如，在 PHP 中有 <code>echo</code> 和 <code>print</code> 语句，它们只是将文本发送到浏览器，因此很简单。但是在 JavaScript 中，有以下替代方法。</p> <h2 id="使用-consolelog">使用 console.log</h2> <p><code>console.log</code> 函数将输出传递给它的任何值或表达式的结果到当前浏览器的控制台中。这是一个特殊模式，具有与浏览器窗口分离的帧或窗口，可以在其中显示错误和其他消息。虽然对经验丰富的程序员来说很好，但对初学者来说并不理想，因为输出不靠近浏览器中的网页内容。</p> <h2 id="使用-alert">使用 alert</h2> <p><code>alert</code> 函数在弹出窗口中显示传递给它的值或表达式，需要点击按钮才能关闭。显然，这可能会非常迅速地变得相当恼人，并且它的缺点是只显示当前消息——之前的消息都会被擦除。</p> <h2 id="写入元素中">写入元素中</h2> <p>可以直接编写到 HTML 元素的文本中，这是一个相当优雅的解决方案（也是生产网站的最佳方案）——但是，对于这本书中的每个示例，都需要创建这样一个元素，并编写一些代码行来访问它。这样做会妨碍教授示例的核心内容，并使代码看起来过于笨重和混乱。</p> <h2 id="使用-documentwrite">使用 <code>document.write</code></h2> <p><code>document.write</code> 函数在当前浏览器位置写入一个值或表达式，因此非常适合快速显示结果。通过将输出放置在浏览器中的网页内容和代码旁边，可以使所有示例保持简洁明了。</p> <p>然而，你可能听说过这个函数被一些开发人员视为不安全，因为当你在网页完全加载后调用它时，它会覆盖当前文档。尽管这是正确的，但它并不适用于本书中的任何示例，因为它们都是按照 <code>document.write</code> 最初预期的方式使用的：作为页面创建过程的一部分，在页面完成加载和显示之前仅调用它。</p> <p>然而，尽管我在简单示例中以这种方式使用 <code>document.write</code>，但我从不在生产代码中使用它（除非在确实必要的非常罕见情况下）。相反，我几乎总是使用前面介绍的方法，即直接编写到专门准备好的元素中，根据第十八章以后的更复杂示例（访问元素的 <code>innerHTML</code> 属性进行程序输出）。</p> <p>因此，请记住，在本书中看到 <code>document.write</code> 被调用时，它只是为了简化一个示例，我建议你也仅在同样的方式下使用该函数——用于获取快速的测试结果。</p> <p>在解释了这一注意事项后，在接下来的章节中，我们将继续探讨 JavaScript 的控制程序流和编写表达式的方法。</p> <h1 id="问题-13">问题</h1> <ol> <li> <p>用什么标签来包含 JavaScript 代码？</p> </li> <li> <p>默认情况下，JavaScript 代码会将输出写入文档的哪个部分？</p> </li> <li> <p>如何在文档中包含来自另一个来源的 JavaScript 代码？</p> </li> <li> <p>哪个 JavaScript 函数相当于 PHP 中的 <code>echo</code> 或 <code>print</code>？</p> </li> <li> <p>如何在 JavaScript 中创建注释？</p> </li> <li> <p>JavaScript 字符串连接运算符是什么？</p> </li> <li> <p>在 JavaScript 函数中，你可以使用哪个关键字来定义具有局部作用域的变量？</p> </li> <li> <p>给出两种跨浏览器的方法来显示分配给具有 <code>id</code> 为 <code>thislink</code> 的链接的 URL。</p> </li> <li> <p>哪两个 JavaScript 命令会使浏览器加载其历史数组中的前一页？</p> </li> <li> <p>你会用什么 JavaScript 命令来替换当前文档为<em>oreilly.com</em>网站的主页面？</p> </li> </ol> <p>查看“第十四章答案”在附录 A 中这些问题的答案。</p> <h1 id="第十五章javascript-中的表达式和控制流">第十五章：JavaScript 中的表达式和控制流</h1> <p>在前一章中，我介绍了 JavaScript 和 DOM 的基础知识。现在是时候看看如何在 JavaScript 中构建复杂的表达式，并通过使用条件语句来控制脚本的程序流了。</p> <h1 id="表达式-1">表达式</h1> <p>JavaScript 表达式与 PHP 中的表达式非常相似。正如您在第四章中学到的那样，表达式是值、变量、运算符和函数的组合，其结果是一个值；结果可以是数字、字符串或布尔值（评估为<code>true</code>或<code>false</code>）。</p> <p>示例 15-1 展示了一些简单的表达式。对于每一行，它打印出<code>a</code>到<code>d</code>之间的字母，后跟一个冒号和表达式的结果。<code><br></code>标签用于创建换行并将输出分隔成四行（请记住，在 HTML5 中<code><br></code>和<code><br /></code>都是可接受的，因此我选择使用前一种形式以简洁为主）。</p> <h5 id="示例-15-1-四个简单的布尔表达式">示例 15-1. 四个简单的布尔表达式</h5> <pre><code class="language-php"><script> document.write("a: " + (42 > 3) + "<br>") document.write("b: " + (91 < 4) + "<br>") document.write("c: " + (8 == 2) + "<br>") document.write("d: " + (4 < 17) + "<br>") </script> </code></pre> <p>此代码的输出如下：</p> <pre><code class="language-php">a: true b: false c: false d: true </code></pre> <p>注意，<code>a:</code>和<code>d:</code>两个表达式都评估为<code>true</code>，但<code>b:</code>和<code>c:</code>评估为<code>false</code>。与 PHP 不同（它将分别打印数字<code>1</code>和空白），实际的字符串<code>true</code>和<code>false</code>将被显示。</p> <p>在 JavaScript 中，当您检查一个值是否为<code>true</code>或<code>false</code>时，除了以下值评估为<code>false</code>：字符串<code>false</code>本身，<code>0</code>，<code>-0</code>，空字符串，<code>null</code>，<code>undefined</code>和<code>NaN</code>（不是一个数字，计算机工程中用于非法浮点操作的结果，例如除以零）。</p> <p>请注意，我在 JavaScript 中引用的<code>true</code>和<code>false</code>都是小写。这是因为，与 PHP 不同，这些值<em>必须</em>是小写的。因此，仅以下两个语句的第一个将会显示，打印小写单词<code>true</code>，因为第二个将导致<code>'TRUE'未定义</code>错误：</p> <pre><code class="language-php">if (1 == true) document.write('true') // True if (1 == TRUE) document.write('TRUE') // Will cause an error </code></pre> <h6 id="注意-85">注意</h6> <p>请记住，任何您希望在 HTML 文件中键入并尝试的代码片段都需要包含在<code><script></code>和<code></script></code>标签中。</p> <h1 id="文字和变量-1">文字和变量</h1> <p>表达式的最简单形式是<em>文字</em>，这意味着它评估为自身，例如数字<code>22</code>或字符串<code>Press Enter</code>。表达式也可以是一个变量，它评估为已分配给它的值。它们都是表达式的类型，因为它们返回一个值。</p> <p>示例 15-2 展示了三种不同的文字和两个变量，所有这些都返回值，尽管类型不同。</p> <h5 id="示例-15-2-五种文字类型">示例 15-2. 五种文字类型</h5> <pre><code class="language-php"><script> myname = "Peter" myage = 24 document.write("a: " + 42 + "<br>") // Numeric literal document.write("b: " + "Hi" + "<br>") // String literal document.write("c: " + true + "<br>") // Constant literal document.write("d: " + myname + "<br>") // String variable document.write("e: " + myage + "<br>") // Numeric variable </script> </code></pre> <p>而且，正如您所期望的那样，您将在以下输出中看到所有这些的返回值：</p> <pre><code class="language-php">a: 42 b: Hi c: true d: Peter e: 24 </code></pre> <p>运算符允许您创建更复杂的表达式，这些表达式评估为有用的结果。当您将赋值或控制流构造与表达式结合时，结果是一个<em>语句</em>。</p> <p>示例 15-3 展示了其中的一个例子。第一个将表达式 <code>366 - day_number</code> 的结果赋给变量 <code>days_to_new_year</code>，第二个仅在表达式 <code>days_to_new_year < 30</code> 评估为 <code>true</code> 时输出友好消息。</p> <h5 id="示例-15-3-两个简单的-javascript-语句">示例 15-3. 两个简单的 JavaScript 语句</h5> <pre><code class="language-php"><script>   day_number       = 127  // For example   days_to_new_year = 366 - day_number   if (days_to_new_year < 30) document.write("It's nearly New Year")   else                       document.write("It's a long time to go") </script> </code></pre> <h1 id="运算符-3">运算符</h1> <p>JavaScript 提供了许多强大的运算符，从算术、字符串和逻辑运算符到赋值、比较等（参见表 15-1）。</p> <p>表 15-1. JavaScript 运算符类型</p> <table> <thead> <tr> <th>运算符</th> <th>描述</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td>算术</td> <td>基本数学</td> <td><code>a + b</code></td> </tr> <tr> <td>数组</td> <td>数组操作</td> <td><code>a + b</code></td> </tr> <tr> <td>赋值</td> <td>赋值</td> <td><code>a = b + 23</code></td> </tr> <tr> <td>位运算</td> <td>在字节内操作位</td> <td><code>12 ^ 9</code></td> </tr> <tr> <td>比较</td> <td>比较两个值</td> <td><code>a < b</code></td> </tr> <tr> <td>递增/递减</td> <td>加或减一</td> <td><code>a++</code></td> </tr> <tr> <td>逻辑</td> <td>布尔</td> <td><code>a && b</code></td> </tr> <tr> <td>字符串</td> <td>连接</td> <td><code>a + 'string'</code></td> </tr> </tbody> </table> <p>每个运算符接受不同数量的操作数：</p> <ul> <li> <p><em>一元</em> 运算符，如递增（<code>a++</code>）或否定（<code>-a</code>），只接受一个操作数。</p> </li> <li> <p><em>二元</em> 运算符占据了 JavaScript 运算符的大部分，包括加法、减法、乘法和除法，需要两个操作数。</p> </li> <li> <p><em>三元</em> 运算符，形式为 <code>? x : y</code>，需要三个操作数。它是一个简洁的单行 <code>if</code> 语句，根据第三个表达式选择两个表达式中的一个。</p> </li> </ul> <h2 id="运算符优先级-1">运算符优先级</h2> <p>像 PHP 一样，JavaScript 使用运算符优先级，其中表达式中的某些运算符先处理，因此首先进行评估。表 15-2 列出了 JavaScript 的运算符及其优先级。</p> <p>表 15-2. JavaScript 运算符优先级（从高到低）</p> <table> <thead> <tr> <th>运算符</th> <th>类型</th> </tr> </thead> <tbody> <tr> <td><code>() [] .</code></td> <td>括号、调用和成员</td> </tr> <tr> <td><code>++ --</code></td> <td>递增/递减</td> </tr> <tr> <td><code>+ - ~ !</code></td> <td>一元、位和逻辑</td> </tr> <tr> <td><code>* / %</code></td> <td>算术</td> </tr> <tr> <td><code>+ -</code></td> <td>算术和字符串</td> </tr> <tr> <td><code><< >> >>></code></td> <td>位运算</td> </tr> <tr> <td><code>< > <= >=</code></td> <td>比较</td> </tr> <tr> <td><code>== != === !==</code></td> <td>比较</td> </tr> <tr> <td><code>& ^ &#124;</code></td> <td>位运算</td> </tr> <tr> <td><code>&&</code></td> <td>逻辑</td> </tr> <tr> <td><code>&#124;&#124;</code></td> <td>逻辑</td> </tr> <tr> <td><code>? :</code></td> <td>三元</td> </tr> <tr> <td><code>= += -= *= /= %=</code></td> <td>赋值</td> </tr> <tr> <td><code><<= >>= >>>= &= ^= &#124;=</code></td> <td>赋值</td> </tr> <tr> <td><code>,</code></td> <td>分隔符</td> </tr> </tbody> </table> <h2 id="结合性-1">结合性</h2> <p>大多数 JavaScript 运算符在等式中按照从左到右的顺序处理。但有些运算符需要从右到左进行处理。处理方向称为运算符的<em>结合性</em>。</p> <p>当你没有明确强制运算优先级时，这种结合性变得很重要（顺便说一句，你应该总是这样做，因为它使代码更易读，减少错误）。例如，看看以下赋值运算符，这三个变量都被设置为值<code>0</code>：</p> <pre><code class="language-php">level = score = time = 0 </code></pre> <p>仅当表达式的最右部分首先进行评估，然后以从右到左的顺序继续处理时，才能进行多重赋值。表 15-3](#operators_and_associativity)列出了 JavaScript 运算符及其结合性。</p> <p>表 15-3. 运算符及其结合性</p> <table> <thead> <tr> <th>运算符</th> <th>描述</th> <th>结合性</th> </tr> </thead> <tbody> <tr> <td><code>++ --</code></td> <td>增减</td> <td>无</td> </tr> <tr> <td><code>new</code></td> <td>创建一个新对象</td> <td>右</td> </tr> <tr> <td><code>+ - ~ !</code></td> <td>一元和位运算</td> <td>右</td> </tr> <tr> <td><code>?:</code></td> <td>三元</td> <td>右</td> </tr> <tr> <td><code>= *= /= %= += -=</code></td> <td>赋值</td> <td>右</td> </tr> <tr> <td><code><<= >>= >>>= &= ^= &#124;=</code></td> <td>赋值</td> <td>右</td> </tr> <tr> <td><code>,</code></td> <td>分隔符</td> <td>左</td> </tr> <tr> <td><code>+ - * / %</code></td> <td>算术</td> <td>左</td> </tr> <tr> <td><code><< >> >>></code></td> <td>位运算</td> <td>左</td> </tr> <tr> <td><code>< <= > >= == != === !==</code></td> <td>算术</td> <td>左</td> </tr> </tbody> </table> <h2 id="关系运算符-1">关系运算符</h2> <p><em>关系运算符</em>测试两个操作数并返回布尔结果<code>true</code>或<code>false</code>。有三种类型的关系运算符：<em>等式</em>、<em>比较</em>和<em>逻辑</em>。</p> <h3 id="相等运算符">相等运算符</h3> <p>等号运算符是<code>==</code>（不要与赋值运算符<code>=</code>混淆）。在示例 15-4 中，第一条语句赋值，第二条语句测试其是否相等。目前不会输出任何内容，因为<code>month</code>被赋予了字符串值<code>July</code>，因此检查其是否为<code>October</code>的条件将失败。</p> <h5 id="示例15-4-赋值和相等测试">示例 15-4. 赋值和相等测试</h5> <pre><code class="language-php"><script> month = "July" if (month == "October") document.write("It's the Fall") </script> </code></pre> <p>如果相等表达式的两个操作数类型不同，JavaScript 将它们转换为最合理的类型。例如，任何完全由数字组成的字符串与数字比较时将被转换为数字。在示例 15-5 中，<code>a</code> 和 <code>b</code> 是两个不同的值（一个是数字，另一个是字符串），因此我们通常不希望任何<code>if</code>语句输出结果。</p> <h5 id="示例15-5-相等和恒等运算符">示例 15-5. 相等和恒等运算符</h5> <pre><code class="language-php"><script> a = 3.1415927 b = "3.1415927" if (a == b) document.write("1") if (a === b) document.write("2") </script> </code></pre> <p>然而，如果运行此示例，您将看到它输出数字<code>1</code>，这意味着第一个<code>if</code>语句评估为<code>true</code>。这是因为<code>b</code>的字符串值临时转换为数字，因此等式两侧都有数值<code>3.1415927</code>。</p> <p>相比之下，第二个<code>if</code>语句使用<em>恒等</em>运算符，即连续三个等号，这会阻止 JavaScript 自动转换类型。因此，发现<code>a</code>和<code>b</code>是不同的，因此不会输出任何内容。</p> <p>与强制运算符优先级类似，每当您对 JavaScript 如何转换操作数类型感到困惑时，可以使用恒等运算符关闭此行为。</p> <h3 id="比较运算符-3">比较运算符</h3> <p>使用比较运算符，你不仅可以测试相等和不等，JavaScript 还为你提供了<code>></code>（大于）、<code><</code>（小于）、<code>>=</code>（大于或等于）和<code><=</code>（小于或等于）进行使用。示例 15-6 展示了这些运算符的使用。</p> <h5 id="示例-15-6-四个比较运算符">示例 15-6. 四个比较运算符</h5> <pre><code class="language-php"><script> a = 7; b = 11 if (a > b) document.write("a is greater than b<br>") if (a < b) document.write("a is less than b<br>") if (a >= b) document.write("a is greater than or equal to b<br>") if (a <= b) document.write("a is less than or equal to b<br>") </script> </code></pre> <p>在这个例子中，当<code>a</code>为<code>7</code>且<code>b</code>为<code>11</code>时，输出如下（因为 7 小于 11 且也小于等于 11）：</p> <pre><code class="language-php">a is less than b a is less than or equal to b </code></pre> <h3 id="逻辑运算符-3">逻辑运算符</h3> <p>逻辑运算符会产生<code>true</code>或<code>false</code>结果，也被称为<em>布尔</em>运算符。JavaScript 中有三种逻辑运算符（见表 15-4）。</p> <p>表 15-4. JavaScript 的逻辑运算符</p> <table> <thead> <tr> <th>逻辑运算符</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>&&</code> <em>(and)</em></td> <td>如果两个操作数都为<code>true</code>，则返回<code>true</code>。</td> </tr> <tr> <td><code>&#124;&#124;</code> <em>(or)</em></td> <td>如果任一操作数为<code>true</code>，则返回<code>true</code>。</td> </tr> <tr> <td><code>!</code> <em>(not)</em></td> <td>如果操作数为<code>false</code>，则返回<code>true</code>；如果操作数为<code>true</code>，则返回<code>false</code>。</td> </tr> </tbody> </table> <p>你可以看到这些如何在示例 15-7 中使用，该示例输出<code>0</code>、<code>1</code>和<code>true</code>。</p> <h5 id="示例-15-7-逻辑运算符的使用">示例 15-7. 逻辑运算符的使用</h5> <pre><code class="language-php"><script> a = 1; b = 0 document.write((a && b) + "<br>") document.write((a || b) + "<br>") document.write(( !b ) + "<br>") </script> </code></pre> <p><code>&&</code>语句要求两个操作数都为<code>true</code>才会返回<code>true</code>，<code>||</code>语句在任一值为<code>true</code>时会返回<code>true</code>，第三个语句对<code>b</code>的值执行<code>NOT</code>操作，将其从<code>0</code>转换为<code>true</code>。</p> <p><code>||</code>运算符可能会引起意外问题，因为如果第一个操作数被评估为<code>true</code>，则第二个操作数将不会被评估。在示例 15-8 中，如果<code>finished</code>的值为<code>1</code>，则<code>getnext</code>函数将永远不会被调用（这些仅为示例，<code>getnext</code>的具体行为与此解释无关——只需将其视为在调用时执行某些操作的函数）。</p> <h5 id="示例-15-8-使用运算符的语句">示例 15-8. 使用<code>||</code>运算符的语句</h5> <pre><code class="language-php"><script> if (finished == 1 || getnext() == 1) done = 1 </script> </code></pre> <p>如果你需要在每个<code>if</code>语句中调用<code>getnext</code>，你应该按照示例 15-9 重新编写代码。</p> <h5 id="示例-15-9-修改后的ifor语句以确保调用getnext">示例 15-9. 修改后的<code>if...or</code>语句以确保调用<code>getnext</code></h5> <pre><code class="language-php"><script> gn = getnext() if (finished == 1 OR gn == 1) done = 1; </script> </code></pre> <p>在这种情况下，在<code>if</code>语句之前，将执行<code>getnext</code>函数的代码，并将其返回值存储在<code>gn</code>中。</p> <p>表 15-5 展示了使用逻辑运算符的所有可能变体。你还应该注意，<code>!true</code>等于<code>false</code>，<code>!false</code>等于<code>true</code>。</p> <p>表 15-5. 所有可能的逻辑表达式</p> <table> <thead> <tr> <th>输入</th> <th>运算符及结果</th> </tr> </thead> <tbody> <tr> <td><code>a</code></td> <td><code>b</code></td> </tr> <tr> <td>---</td> <td>---</td> </tr> <tr> <td><code>true</code></td> <td><code>true</code></td> </tr> <tr> <td><code>true</code></td> <td><code>false</code></td> </tr> <tr> <td><code>false</code></td> <td><code>true</code></td> </tr> <tr> <td><code>false</code></td> <td><code>false</code></td> </tr> </tbody> </table> <h1 id="with语句"><code>with</code>语句</h1> <p><code>with</code>语句不是您在早期关于 PHP 的章节中看到的语句，因为它是 JavaScript 专用的，并且是您需要了解但不应使用的语句（见???）。使用它，您可以通过减少对一个对象的多次引用来简化某些类型的 JavaScript 语句，将<code>with</code>块内的属性和方法引用视为适用于该对象。</p> <p>例如，看看示例 15-10 中的代码，其中<code>document.write</code>函数从未直接引用<code>string</code>变量名。</p> <h5 id="示例-15-10-使用with语句">示例 15-10. 使用<code>with</code>语句</h5> <pre><code class="language-php"><script> string = "The quick brown fox jumps over the lazy dog" with (string) { document.write("The string is " + length + " characters<br>") document.write("In upper case it's: " + toUpperCase()) } </script> </code></pre> <p>即使<code>string</code>从未被<code>document.write</code>直接引用，此代码仍然成功输出以下内容：</p> <pre><code class="language-php">The string is 43 characters In upper case it's: THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG </code></pre> <p>代码工作方式如下：JavaScript 解释器识别出<code>length</code>属性和<code>toUpperCase</code>方法必须应用于某个对象。因为它们单独存在，解释器假定它们适用于您在<code>with</code>语句中指定的<code>string</code>对象。</p> <h6 id="注意-86">注意</h6> <p>在 ECMAScript 5 严格模式中，不再推荐使用<code>with</code>，并且现已禁止。推荐的替代方法是将要访问其属性的对象分配给临时变量。请注意这一点，以便在看到其他人的代码中使用时进行更新（如果需要），但不要自己使用。</p> <h1 id="使用onerror">使用<code>onerror</code></h1> <p>使用<code>onerror</code>事件或<code>try</code>和<code>catch</code>关键字的组合，可以捕获 JavaScript 错误并自行处理。</p> <p><em>事件</em>是 JavaScript 可以检测到的操作。网页上的每个元素都有特定的事件，可以触发 JavaScript 函数。例如，按钮元素的<code>onclick</code>事件可以设置为调用一个函数，并使其在用户点击按钮时运行。</p> <p>示例 15-11 说明了如何使用<code>onerror</code>事件。</p> <h5 id="示例-15-11-使用onerror事件的脚本">示例 15-11. 使用<code>onerror</code>事件的脚本</h5> <pre><code class="language-php"><script> onerror = errorHandler document.writ("Welcome to this website") // Deliberate error function errorHandler(message, url, line) { out = "Sorry, an error was encountered.\n\n"; out += "Error: " + message + "\n"; out += "URL: " + url + "\n"; out += "Line: " + line + "\n\n"; out += "Click OK to continue.\n\n"; alert(out); return true; } </script> </code></pre> <p>此脚本的第一行告诉错误事件从现在开始使用新的<code>errorHandler</code>函数。此函数接受三个参数——<code>message</code>、<code>url</code>和<code>line</code>编号——因此可以简单地在警报弹出窗口中显示所有这些内容。</p> <p>然后，为了测试新函数，我们故意在代码中引入一个语法错误，调用<code>document.writ</code>而不是<code>document.write</code>（最后一个<code>e</code>丢失）。图 15-1 展示了在浏览器中运行此脚本的结果。在调试过程中，使用<code>onerror</code>这种方式也非常有用。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1501.png" alt="使用事件与警报方法弹出窗口" loading="lazy"></p> <h6 id="图15-1-使用带有警报方法弹出窗口的onerror事件">图 15-1. 使用带有警报方法弹出窗口的<code>onerror</code>事件</h6> <h1 id="使用-trycatch">使用 try...catch</h1> <p><code>try</code>和<code>catch</code>关键字比前一节中展示的<code>onerror</code>技术更加标准和灵活。这些关键字允许您捕获代码中特定部分的错误，而不是文档中所有脚本的错误。然而，它们无法捕获语法错误，这种错误需要使用<code>onerror</code>。</p> <p><code>try...catch</code>结构被所有主要浏览器支持，当您希望捕获特定部分代码中可能发生的某个条件时，它非常方便。</p> <p>例如，在第十八章中，我们将探讨利用<code>XMLHttpRequest</code>对象的 Ajax 技术。因此，我们可以使用<code>try</code>和<code>catch</code>来捕捉这种情况，并在函数不可用时执行其他操作。示例 15-12 展示了如何操作。</p> <h5 id="示例-15-12-使用try和catch捕获错误">示例 15-12. 使用<code>try</code>和<code>catch</code>捕获错误</h5> <pre><code class="language-php"><script> try { request = new XMLHTTPRequest() } catch(err) { // Use a different method to create an XMLHTTPRequest object } </script> </code></pre> <p><code>try</code>和<code>catch</code>之外，还有一个与之关联的关键字叫做<code>finally</code>，无论在<code>try</code>子句中是否发生错误，它都会始终被执行。要使用它，只需在<code>catch</code>语句后添加如下语句：</p> <pre><code class="language-php">finally { alert("The 'try' clause was encountered") } </code></pre> <h1 id="条件语句-1">条件语句</h1> <p>条件语句可以改变程序流程。它们使您能够针对某些事物提出问题，并根据所得到的答案以不同方式做出响应。非循环条件语句有三种类型：<code>if</code>语句，<code>switch</code>语句和<code>?</code>运算符。</p> <h2 id="if语句-1"><code>if</code>语句</h2> <p>本章中的几个示例已经使用了<code>if</code>语句。只有在给定表达式评估为<code>true</code>时，才会执行此类语句中的代码。多行<code>if</code>语句需要用大括号括起来，但与 PHP 一样，对于单个语句，您可以省略大括号，尽管在编写代码时，特别是在<code>if</code>语句内部的操作数量可能会随着开发的进行而改变时，使用大括号通常是一个好习惯。因此，以下语句是有效的：</p> <pre><code class="language-php">if (a > 100) { b=2 document.write("a is greater than 100") } if (b == 10) document.write("b is equal to 10") </code></pre> <h2 id="else语句-1"><code>else</code>语句</h2> <p>当条件未被满足时，您可以使用<code>else</code>语句执行替代操作，如下所示：</p> <pre><code class="language-php">if (a > 100) { document.write("a is greater than 100") } else { document.write("a is less than or equal to 100") } </code></pre> <p>不像 PHP，JavaScript 没有<code>elseif</code>语句，但这并不是问题，因为您可以使用<code>else</code>后面再跟一个<code>if</code>来实现类似于<code>elseif</code>语句的效果，如下所示：</p> <pre><code class="language-php">if (a > 100) { document.write("a is greater than 100") } else if(a < 100) { document.write("a is less than 100") } else { document.write("a is equal to 100") } </code></pre> <p>正如您所见，您可以在新的<code>if</code>后面再使用一个<code>else</code>，同样可以跟随另一个<code>if</code>语句，以此类推。虽然我在这些语句中使用了大括号，因为每个语句都是单行的，前面的示例也可以写成如下形式：</p> <pre><code class="language-php">if (a > 100) document.write("a is greater than 100") else if(a < 100) document.write("a is less than 100") else document.write("a is equal to 100") </code></pre> <h2 id="switch语句"><code>switch</code>语句</h2> <p>当一个变量或表达式的结果可以有多个值时，<code>switch</code>语句非常有用，您可以针对每个值执行不同的函数。</p> <p>例如，下面的代码将我们在第四章中组合的 PHP 菜单系统转换为 JavaScript。它通过根据用户的输入传递一个字符串给主菜单代码来工作，并将变量<code>page</code>设置为其中之一：Home、About、News、Login 和 Links。</p> <p>使用<code>if...else if...</code>编写的代码看起来可能类似于示例 15-13。</p> <h5 id="示例-15-13-多行的ifelse-if语句">示例 15-13. 多行的<code>if...else if...</code>语句</h5> <pre><code class="language-php"><script> if (page == "Home") document.write("You selected Home") else if (page == "About") document.write("You selected About") else if (page == "News") document.write("You selected News") else if (page == "Login") document.write("You selected Login") else if (page == "Links") document.write("You selected Links") </script> </code></pre> <p>使用<code>switch</code>结构，代码可能看起来像示例 15-14。</p> <h5 id="示例-15-14-一个switch结构">示例 15-14. 一个<code>switch</code>结构</h5> <pre><code class="language-php"><script> switch (page) { case "Home": document.write("You selected Home") break case "About": document.write("You selected About") break case "News": document.write("You selected News") break case "Login": document.write("You selected Login") break case "Links": document.write("You selected Links") break } </script> </code></pre> <p>变量<code>page</code>仅在<code>switch</code>语句的开头提到一次。此后，<code>case</code>命令检查匹配项。当匹配发生时，执行相应的条件语句。当然，一个真实的程序将在这里有代码来显示或跳转到一个页面，而不仅仅是告诉用户选择了什么。</p> <h6 id="注意-87">注意</h6> <p>你也可以为单个操作提供多个情况。例如：</p> <pre><code class="language-php">switch (heroName) { case "Superman": case "Batman": case "Wonder Woman": document.write("Justice League") break case "Iron Man": case "Captain America": case "Spiderman": document.write("The Avengers") break } </code></pre> <h3 id="跳出">跳出</h3> <p>正如你在示例 15-14 中所看到的，与 PHP 一样，<code>break</code>命令允许你的代码在满足条件后跳出<code>switch</code>语句。请记住包含<code>break</code>，除非你希望继续执行下一个<code>case</code>下的语句。</p> <h3 id="默认操作-1">默认操作</h3> <p>当没有任何条件被满足时，你可以使用<code>default</code>关键字为<code>switch</code>语句指定默认操作。示例 15-15 展示了一个可以插入到示例 15-14 中的代码片段。</p> <h5 id="示例-15-15-添加到示例15-14-的默认语句">示例 15-15. 添加到示例 15-14 的默认语句</h5> <pre><code class="language-php">default: document.write("Unrecognized selection") break </code></pre> <h2 id="操作符">？操作符</h2> <p><code>ternary</code>操作符（<code>?</code>），结合<code>:</code>字符，提供了一种快速进行<code>if...else</code>测试的方式。你可以编写一个表达式进行评估，然后跟随一个<code>?</code>符号和在表达式为<code>true</code>时要执行的代码。之后，放置一个<code>:</code>和在表达式评估为<code>false</code>时要执行的代码。</p> <p>示例 15-16 展示了使用三元操作符来打印变量<code>a</code>是否小于或等于 5，并在任何情况下打印出一些内容。</p> <h5 id="示例-15-16-使用三元操作符的例子">示例 15-16. 使用三元操作符的例子</h5> <pre><code class="language-php"><script> document.write( a <= 5 ? "a is less than or equal to 5" : "a is greater than 5" ) </script> </code></pre> <p>为了清晰起见，该语句已被分成多行，但你更可能在单行中使用这样的语句，如下所示：</p> <pre><code class="language-php">size = a <= 5 ? "short" : "long" </code></pre> <h1 id="循环-1">循环</h1> <p>当涉及到循环时，JavaScript 和 PHP 之间有许多相似之处。两种语言都支持<code>while</code>、<code>do...while</code>和<code>for</code>循环。</p> <h2 id="while-循环">while 循环</h2> <p>JavaScript 的<code>while</code>循环首先检查表达式的值，并仅在该表达式为<code>true</code>时开始执行循环内的语句。如果为<code>false</code>，执行将跳过到下一个 JavaScript 语句（如果有）。</p> <p>在完成循环的迭代后，表达式再次被测试以查看它是否为<code>true</code>，并且进程将继续直到表达式评估为<code>false</code>或执行被另行停止。示例 15-17 展示了这样的循环。</p> <h5 id="示例-15-17-while循环">示例 15-17. <code>while</code>循环</h5> <pre><code class="language-php"><script> counter=0 `while` `(``counter` `<` `5``)` `{` document.write("Counter: " + counter + "<br>") ++counter `}` </script> </code></pre> <p>此脚本输出以下内容：</p> <pre><code class="language-php">Counter: 0 Counter: 1 Counter: 2 Counter: 3 Counter: 4 </code></pre> <h6 id="警告-13">警告</h6> <p>如果在循环内部不增加变量<code>counter</code>，某些浏览器可能会因为无限循环而变得无响应，甚至可能无法通过 Esc 键或停止按钮轻松终止页面。所以，请小心处理你的 JavaScript 循环。</p> <h2 id="dowhile循环"><code>do...while</code>循环</h2> <p>当你需要在进行任何测试之前至少执行一次循环时，请使用<code>do...while</code>循环，它类似于<code>while</code>循环，只是测试表达式仅在每次循环迭代后检查。因此，要输出 7 的乘法表的前七个结果，你可以使用类似于示例 15-18 中的代码。</p> <h5 id="示例-15-18-dowhile循环">示例 15-18. <code>do...while</code>循环</h5> <pre><code class="language-php"><script> count = 1 `do` `{` document.write(count + " times 7 is " + count * 7 + "<br>") `}` `while` `(``++``count` `<=` `7``)` </script> </code></pre> <p>正如你所预料的，此循环输出以下内容：</p> <pre><code class="language-php">1 times 7 is 7 2 times 7 is 14 3 times 7 is 21 4 times 7 is 28 5 times 7 is 35 6 times 7 is 42 7 times 7 is 49 </code></pre> <h2 id="for循环"><code>for</code>循环</h2> <p><code>for</code>循环将所有优点结合到单个循环结构中，允许你为每个语句传递三个参数：</p> <ul> <li> <p>一个初始化表达式</p> </li> <li> <p>一个条件表达式</p> </li> <li> <p>一个修改表达式</p> </li> </ul> <p>这些由分号分隔，如下所示：<code>for (</code><em><code>expr1</code></em> <code>;</code> <em><code>expr2</code></em> <code>;</code> <em><code>expr3</code></em><code>)</code>。初始化表达式在循环的第一次迭代开始时执行。对于用于输出 7 的乘法表的代码，<code>count</code>将被初始化为值<code>1</code>。然后，每次循环时，条件表达式（在本例中为<code>count <= 7</code>）被测试，只有当条件为<code>true</code>时才进入循环。最后，在每次迭代结束时，修改表达式被执行。对于用于输出 7 的乘法表的代码，变量<code>count</code>被递增。示例 15-19 展示了代码的样子。</p> <h5 id="示例-15-19-使用for循环">示例 15-19. 使用<code>for</code>循环</h5> <pre><code class="language-php"><script> `for` `(``count` `=` `1` `;` `count` `<=` `7` `;` `++``count``)` `{` document.write(count + "times 7 is " + count * 7 + "<br>"); `}` </script> </code></pre> <p>就像在 PHP 中一样，你可以在<code>for</code>循环的第一个参数中使用逗号分隔多个变量，如下所示：</p> <pre><code class="language-php">for (i = 1, j = 1 ; i < 10 ; i++) </code></pre> <p>同样，你可以在最后一个参数中执行多个修改，如下所示：</p> <pre><code class="language-php">for (i = 1 ; i < 10 ; i++, --j) </code></pre> <p>或者你可以同时执行两者：</p> <pre><code class="language-php">for (i = 1, j = 1 ; i < 10 ; i++, --j) </code></pre> <h2 id="退出循环-1">退出循环</h2> <p><code>break</code>命令，你可能还记得在<code>switch</code>语句内部很重要，在<code>for</code>循环中也是可用的。例如，当搜索某种匹配时可能需要使用此功能。一旦找到匹配，你就知道继续搜索只会浪费时间并让访问者等待。示例 15-20 展示了如何使用<code>break</code>命令。</p> <h5 id="example-15-20-在for循环中使用break命令">Example 15-20. 在<code>for</code>循环中使用<code>break</code>命令</h5> <pre><code class="language-php"><script> haystack = new Array() haystack[17] = "Needle" for (j = 0 ; j < 20 ; ++j) { if (haystack[j] == "Needle") { document.write("<br>- Found at location " + j) `break` } else document.write(j + ", ") } </script> </code></pre> <p>此脚本输出以下内容：</p> <pre><code class="language-php">0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, - Found at location 17 </code></pre> <h2 id="continue-语句-1">continue 语句</h2> <p>有时，你不想完全退出循环，而是希望跳过本次循环中的其余语句。在这种情况下，你可以使用 <code>continue</code> 命令。示例 15-21 展示了其使用方法。</p> <h5 id="示例-15-21-在-for-循环中使用-continue-命令">示例 15-21. 在 <code>for</code> 循环中使用 <code>continue</code> 命令</h5> <pre><code class="language-php"><script> haystack = new Array() haystack[4] = "Needle" haystack[11] = "Needle" haystack[17] = "Needle" for (j = 0 ; j < 20 ; ++j) { if (haystack[j] == "Needle") { document.write("<br>- Found at location " + j + "<br>") `continue` } document.write(j + ", ") } </script> </code></pre> <p>请注意第二个 <code>document.write</code> 调用不必像以前那样被包含在 <code>else</code> 语句中，因为 <code>continue</code> 命令将在找到匹配项时跳过它。该脚本的输出如下：</p> <pre><code class="language-php">0, 1, 2, 3, - Found at location 4 5, 6, 7, 8, 9, 10, - Found at location 11 12, 13, 14, 15, 16, - Found at location 17 18, 19, </code></pre> <h1 id="显式类型转换">显式类型转换</h1> <p>不像 PHP，JavaScript 没有显式类型转换，比如 <code>(int)</code> 或 <code>(float)</code>。相反，当你需要一个值是特定类型时，使用 JavaScript 内置的函数之一，如 表 15-6 中所示。</p> <p>表 15-6. JavaScript 类型转换函数</p> <table> <thead> <tr> <th>类型更改</th> <th>使用的函数</th> </tr> </thead> <tbody> <tr> <td><code>Int</code>, <code>Integer</code></td> <td><code>parseInt()</code></td> </tr> <tr> <td><code>Bool</code>, <code>Boolean</code></td> <td><code>Boolean()</code></td> </tr> <tr> <td><code>Float</code>, <code>Double</code>, <code>Real</code></td> <td><code>parseFloat()</code></td> </tr> <tr> <td><code>String</code></td> <td><code>String()</code></td> </tr> <tr> <td><code>Array</code></td> <td><code>split()</code></td> </tr> </tbody> </table> <p>因此，例如，要将浮点数转换为整数，可以使用以下代码（显示值为 <code>3</code>）：</p> <pre><code class="language-php">n = 3.1415927 i = parseInt(n) document.write(i) </code></pre> <p>或者你可以使用复合形式：</p> <pre><code class="language-php">document.write(parseInt(3.1415927)) </code></pre> <p>控制流和表达式就是这些内容。下一章将重点讲解 JavaScript 中函数、对象和数组的使用。</p> <h1 id="问题-14">问题</h1> <ol> <li> <p>PHP 和 JavaScript 如何处理布尔值？</p> </li> <li> <p>JavaScript 变量名的定义要用到哪些字符？</p> </li> <li> <p>一元、二元和三元操作符有什么区别？</p> </li> <li> <p>如何强制自己的运算符优先级？</p> </li> <li> <p>何时会使用 <code>===</code>（恒等）运算符？</p> </li> <li> <p>什么是最简单的两种表达式形式？</p> </li> <li> <p>列举三种条件语句类型的名称。</p> </li> <li> <p><code>if</code> 和 <code>while</code> 语句如何解释不同数据类型的条件表达式？</p> </li> <li> <p>为什么 <code>for</code> 循环比 <code>while</code> 循环更强大？</p> </li> <li> <p><code>with</code> 语句的目的是什么？</p> </li> </ol> <p>参见 “第十五章答案” ，在 附录 A 中找到这些问题的答案。</p> <h1 id="第十六章javascript-函数对象和数组">第十六章：JavaScript 函数、对象和数组</h1> <p>就像 PHP 一样，JavaScript 提供了访问函数和对象的方法。事实上，JavaScript 实际上是基于对象的，因为——正如你已经看到的——它必须访问 DOM，这使得 HTML 文档的每个元素都可以作为一个对象进行操作。</p> <p>使用和语法也与 PHP 非常相似，因此当我带你深入了解 JavaScript 中的函数和对象使用以及数组处理时，你应该会感到很自在。</p> <h1 id="javascript-函数">JavaScript 函数</h1> <p>除了访问数十个内置函数（或方法），如 <code>write</code>，你已经在 <code>document.write</code> 中看到它被使用，你还可以轻松创建自己的函数。每当你有一个可能会被重复使用的相对复杂的代码片段时，你就可以考虑创建一个函数。</p> <h2 id="定义函数">定义函数</h2> <p>函数的一般语法如下所示：</p> <pre><code class="language-php">function *`function_name`*([*`parameter`* [, ...]]) { *`statements`* } </code></pre> <p>语法的第一行指示以下内容：</p> <ul> <li> <p>定义从 <code>function</code> 这个词开始。</p> </li> <li> <p>名称必须以字母或下划线开头，后跟任意数量的字母、数字、美元符号或下划线。</p> </li> <li> <p>括号是必需的。</p> </li> <li> <p>可选一个或多个用逗号分隔的参数（由方括号表示，不是函数语法的一部分）。</p> </li> </ul> <p>函数名区分大小写，因此以下所有字符串都指代不同的函数：<code>getInput</code>、<code>GETINPUT</code> 和 <code>getinput</code>。</p> <p>在 JavaScript 中，函数有一个通用的命名约定：名称中每个单词的第一个字母大写，除了第一个字母外，其他字母都小写。因此，在前面的例子中，大多数程序员会选择使用 <code>getInput</code> 作为首选名称。这种约定通常被称为 <em>bumpyCaps</em>、<em>bumpyCase</em> 或（最常见的）<em>camelCase</em>。</p> <p>大括号 <code>{</code> 开始定义函数调用时执行的语句；必须有相匹配的大括号 <code>}</code> 结束它。这些语句可能包括一个或多个 <code>return</code> 语句，它们强制函数停止执行并返回给调用代码。如果 <code>return</code> 语句附带一个值，调用代码可以检索它。</p> <h3 id="arguments-数组"><code>arguments</code> 数组</h3> <p><code>arguments</code> 数组是每个函数的成员。借助它，你可以确定传递给函数的变量数量及其内容。以函数 <code>displayItems</code> 为例。例子 16-1 展示了一种编写它的方式。</p> <h5 id="例子-16-1-定义函数">例子 16-1. 定义函数</h5> <pre><code class="language-php"><script> displayItems("Dog", "Cat", "Pony", "Hamster", "Tortoise") function displayItems(v1, v2, v3, v4, v5) { document.write(v1 + "<br>") document.write(v2 + "<br>") document.write(v3 + "<br>") document.write(v4 + "<br>") document.write(v5 + "<br>") } </script> </code></pre> <p>当你在浏览器中调用这个脚本时，它将显示以下内容：</p> <pre><code class="language-php">Dog Cat Pony Hamster Tortoise </code></pre> <p>这些都很好，但如果你想向函数传递超过五个项目会怎样？此外，多次重复使用<code>document.write</code>调用而不使用循环是一种浪费。幸运的是，<code>arguments</code>数组提供了灵活性，可以处理可变数量的参数。示例 16-2 展示了如何以更高效的方式重写先前的示例。</p> <h5 id="示例-16-2-修改使用arguments数组的函数">示例 16-2. 修改使用<code>arguments</code>数组的函数</h5> <pre><code class="language-php"><script>   let c = "Car"   displayItems("Bananas", 32.3, c)   function displayItems()   {     for (j = 0 ; j < displayItems.arguments.length ; ++j)       document.write(displayItems.arguments[j] + "<br>")   } </script> </code></pre> <p>注意使用了<code>length</code>属性，你已经在上一章中遇到过它，并且我使用变量<code>j</code>作为偏移量引用数组<code>displayItems.arguments</code>。我还选择通过不用花括号将<code>for</code>循环的内容包围起来来保持函数简短而简洁，因为它只包含一个语句。请记住，循环必须在<code>j</code>等于<code>length</code>之前停止，而不是等于<code>length</code>。</p> <p>使用这种技术，你现在有一个函数，可以接受任意多（或少）的参数，并按照你的意愿对每个参数进行操作。</p> <h2 id="返回值">返回值</h2> <p>函数不仅仅用于显示事物。事实上，它们主要用于进行计算或数据操作，然后返回结果。示例 16-3 中的函数<code>fixNames</code>使用了<code>arguments</code>数组（在前一节中讨论过），接收传递给它的一系列字符串，并将它们返回为一个单一的字符串。它执行的“修复”操作是将每个参数中的每个字符转换为小写，除了每个参数的第一个字符，它设置为大写字母。</p> <h5 id="示例-16-3-清理完整名称">示例 16-3. 清理完整名称</h5> <pre><code class="language-php"><script> document.write(fixNames("the", "DALLAS", "CowBoys")) function fixNames() { var s = "" for (j = 0 ; j < fixNames.arguments.length ; ++j) s += fixNames.arguments[j].charAt(0).toUpperCase() + fixNames.arguments[j].substr(1).toLowerCase() + " " return s.substr(0, s.length-1) } </script> </code></pre> <p>例如，当使用参数<code>the</code>、<code>DALLAS</code>和<code>CowBoys</code>调用时，该函数返回字符串<code>The Dallas Cowboys</code>。让我们来看看这个函数。</p> <p>首先将临时（和局部）变量<code>s</code>初始化为空字符串。然后，<code>for</code>循环遍历传递的每个参数，使用<code>charAt</code>方法隔离参数的第一个字符，并使用<code>toUpperCase</code>方法将其转换为大写。此示例中显示的各种方法都内置于 JavaScript 中，并默认可用。</p> <p>然后使用<code>substr</code>方法获取每个字符串的其余部分，通过<code>toLowerCase</code>方法将其转换为小写。这里<code>substr</code>方法的更完整版本将指定作为第二个参数的子串的长度：</p> <pre><code class="language-php">substr(1, (arguments[j].length) - 1 ) </code></pre> <p>换句话说，这个<code>substr</code>方法说，“从位置 1（第二个字符）开始，并返回剩余的字符串（长度减一）。”尽管如此，<code>substr</code>方法会假定，如果你省略第二个参数，你希望返回剩余的字符串。</p> <p>在整个参数转换为所需大小写之后，向末尾添加空格字符，并将结果追加到临时变量<code>s</code>。</p> <p>最后，再次使用 <code>substr</code> 方法返回变量 <code>s</code> 的内容，除了最后一个不需要的空格。我们通过使用 <code>substr</code> 返回字符串直到最后一个字符之前来移除它。</p> <p>这个例子特别有趣，因为它展示了在单个表达式中使用多个属性和方法，例如：</p> <pre><code class="language-php">fixNames.arguments[j].substr(1).toLowerCase() </code></pre> <p>您必须在脑海中将该语句分成几个部分来解释。JavaScript 从左到右评估语句的这些元素如下：</p> <ol> <li> <p>从函数名称本身开始：<code>fixNames</code>。</p> </li> <li> <p>从代表 <code>fixNames</code> 参数的数组 <code>arguments</code> 中提取元素 <code>j</code>。</p> </li> <li> <p>调用 <code>substr</code> 并使用参数 <code>1</code> 提取元素。这将除第一个字符外的所有内容传递给表达式的下一部分。</p> </li> <li> <p>对已传递的字符串应用 <code>toLowerCase</code> 方法。</p> </li> </ol> <p>这种做法通常被称为 <em>方法链</em>。例如，如果将字符串 <code>mixedCASE</code> 传递给示例表达式，它将经历以下转换：</p> <pre><code class="language-php">mixedCASE ixedCASE ixedcase </code></pre> <p>换句话说，<code>fixNames.arguments[j]</code> 生成 “mixedCASE”，然后 <code>substr(1)</code> 获取 “mixedCASE” 并生成 “ixedCASE”，最后 <code>toLowerCase()</code> 获取 “ixedCASE” 并生成 “ixedcase”。</p> <p>最后提醒一下：函数内部创建的 <code>s</code> 变量是局部的，因此无法在函数外部访问。通过在 <code>return</code> 语句中返回 <code>s</code>，我们使其值可以被调用者使用或存储。但是 <code>s</code> 本身在函数结束时会消失。虽然我们可以让函数操作全局变量（有时是必要的），但最好的方法是只返回想要保留的值，并让 JavaScript 清理函数使用的所有其他变量。</p> <h2 id="返回一个数组-1">返回一个数组</h2> <p>在 示例 16-3 中，该函数仅返回一个参数——但如果需要返回多个参数怎么办？您可以通过返回一个数组来实现，就像 示例 16-4 中那样。</p> <h5 id="示例-16-4-返回一个值数组">示例 16-4. 返回一个值数组</h5> <pre><code class="language-php"><script> words = fixNames("the", "DALLAS", "CowBoys") for (j = 0 ; j < words.length ; ++j) document.write(words[j] + "<br>") function fixNames() { var s = new Array() for (j = 0 ; j < fixNames.arguments.length ; ++j) s[j] = fixNames.arguments[j].charAt(0).toUpperCase() + fixNames.arguments[j].substr(1).toLowerCase() return s } </script> </code></pre> <p>这里变量 <code>words</code> 自动定义为数组，并用函数 <code>fixNames</code> 的返回结果填充。然后 <code>for</code> 循环迭代数组并显示每个成员。</p> <p>至于 <code>fixNames</code> 函数，它与 示例 16-3 几乎完全相同，只是现在变量 <code>s</code> 是一个数组；在处理每个单词后，它作为数组的一个元素存储，并通过 <code>return</code> 语句返回。</p> <p>此函数允许从其返回值中提取单个参数，例如下面的示例（其输出仅为 <code>The Cowboys</code>）：</p> <pre><code class="language-php">words = fixNames("the", "DALLAS", "CowBoys") document.write(words[0] + " " + words[2]) </code></pre> <h1 id="javascript-对象">JavaScript 对象</h1> <p>JavaScript 对象比变量更高级，变量一次只能包含一个值。相比之下，对象可以包含多个值，甚至函数。对象将数据与操作数据所需的函数组合在一起。</p> <h2 id="声明一个类">声明一个类</h2> <p>在创建用于使用对象的脚本时，您需要设计称为<em>类</em>的数据和代码组合。基于此类的每个新对象称为该类的<em>实例</em>（或<em>发生</em>）。正如您已经看到的那样，与对象关联的数据称为其<em>属性</em>，而其使用的函数称为<em>方法</em>。</p> <p>让我们看看如何为称为<code>User</code>的对象声明类，该对象将包含有关当前用户的详细信息。要创建类，只需编写一个以类名命名的函数。此函数可以接受参数（稍后将展示如何调用它），并且可以为该类中的对象创建属性和方法。这个函数称为<em>构造函数</em>。</p> <p>示例 16-5 显示了用于<code>User</code>类的构造函数，具有三个属性：<code>forename</code>、<code>username</code>和<code>password</code>。该类还定义了<code>showUser</code>方法。</p> <h5 id="示例-16-5-声明user类及其方法">示例 16-5. 声明<code>User</code>类及其方法</h5> <pre><code class="language-php"><script> function User(forename, username, password) { this.forename = forename this.username = username this.password = password this.showUser = function() { document.write("Forename: " + this.forename + "<br>") document.write("Username: " + this.username + "<br>") document.write("Password: " + this.password + "<br>") } } </script> </code></pre> <p>该函数在几个方面与我们迄今看到的其他函数不同：</p> <ul> <li> <p>每次调用函数时，它都会创建一个新对象。因此，您可以反复调用相同的函数并使用不同的参数来创建具有不同名字的用户，例如。</p> </li> <li> <p>函数引用一个名为<code>this</code>的对象，该对象引用正在创建的实例。如示例所示，对象使用名称<code>this</code>来设置自己的属性，这些属性将与另一个<code>User</code>不同。</p> </li> <li> <p>在函数内创建了一个名为<code>showUser</code>的新函数。此处显示的语法是新的且相当复杂的，但其目的是将<code>showUser</code>与<code>User</code>类关联起来。因此，<code>showUser</code>作为<code>User</code>类的方法而存在。</p> </li> </ul> <p>我使用的命名约定是将所有属性保持为小写，并在方法名称中至少使用一个大写字符，遵循本章前面提到的驼峰命名约定。</p> <p>示例 16-5 遵循编写类构造函数的推荐方式，即在构造函数中包含方法。但是，您还可以参考在构造函数外定义的函数，如示例 16-6。</p> <h5 id="示例-16-6-分别定义类和方法">示例 16-6. 分别定义类和方法</h5> <pre><code class="language-php"><script> function User(forename, username, password) { this.forename = forename this.username = username this.password = password this.showUser = showUser } function showUser() { document.write("Forename: " + this.forename + "<br>") document.write("Username: " + this.username + "<br>") document.write("Password: " + this.password + "<br>") } </script> </code></pre> <p>我向您展示这种形式，因为您在查看其他程序员的代码时一定会遇到它。</p> <h2 id="创建对象-1">创建对象</h2> <p>要创建<code>User</code>类的实例，可以使用如下语句：</p> <pre><code class="language-php">details = new User("Wolfgang", "w.a.mozart", "composer") </code></pre> <p>或者您可以创建一个空对象，如下所示：</p> <pre><code class="language-php">details = new User() </code></pre> <p>然后稍后再填充它，如下所示：</p> <pre><code class="language-php">details.forename = "Wolfgang" details.username = "w.a.mozart" details.password = "composer" </code></pre> <p>您还可以像这样向对象添加新属性：</p> <pre><code class="language-php">details.greeting = "Hello" </code></pre> <p>您可以验证添加这种新属性是否有效，使用以下语句：</p> <pre><code class="language-php">document.write(details.greeting) </code></pre> <h2 id="访问对象-1">访问对象</h2> <p>要访问对象，你可以引用其属性，如以下两个不相关的示例语句：</p> <pre><code class="language-php">name = details.forename if (details.username == "Admin") loginAsAdmin() </code></pre> <p>因此，要访问类<code>User</code>的对象的<code>showUser</code>方法，你将使用以下语法，其中对象<code>details</code>已经被创建并填充了数据：</p> <pre><code class="language-php">details.showUser() </code></pre> <p>假设之前提供的数据，这段代码将显示如下内容：</p> <pre><code class="language-php">Forename: Wolfgang Username: w.a.mozart Password: composer </code></pre> <h2 id="prototype关键字"><code>prototype</code>关键字</h2> <p>使用<code>prototype</code>关键字可以节省大量内存。在<code>User</code>类中，每个实例都包含三个属性和一个方法。因此，如果内存中有一千个这些对象，方法<code>showUser</code>也会被复制一千次。然而，因为方法在每种情况下都是相同的，你可以指定新对象应该引用方法的单个实例，而不是创建它的副本。因此，不要在类构造函数中使用以下内容：</p> <pre><code class="language-php">this.showUser = function() </code></pre> <p>你可以用这个替换它：</p> <pre><code class="language-php">User.prototype.showUser = function() </code></pre> <p>示例 16-7 显示了新构造函数的样子。</p> <h5 id="示例-16-7-使用prototype关键字声明类的方法">示例 16-7. 使用<code>prototype</code>关键字声明类的方法</h5> <pre><code class="language-php"><script> function User(forename, username, password) { this.forename = forename this.username = username this.password = password User.prototype.showUser = function() { document.write("Forename: " + this.forename + "<br>") document.write("Username: " + this.username + "<br>") document.write("Password: " + this.password + "<br>") } } </script> </code></pre> <p>这是因为所有函数都有一个<code>prototype</code>属性，用于保存类中任何对象创建时不会复制的属性和方法。相反，它们通过引用传递给其对象。</p> <p>这意味着你可以随时添加<code>prototype</code>属性或方法，并且所有对象（即使已经创建）都会继承它，如下面的语句所示：</p> <pre><code class="language-php">User.prototype.greeting = "Hello" document.write(details.greeting) </code></pre> <p>第一个语句将值为<code>Hello</code>的<code>greeting</code>属性添加到类<code>User</code>的<code>prototype</code>属性中。在第二行中，已经创建的对象<code>details</code>正确显示了这个新属性。</p> <p>你还可以添加或修改类中的方法，如下面的语句所示：</p> <pre><code class="language-php">User.prototype.showUser = function() { document.write("Name " + this.forename + " User " + this.username + " Pass " + this.password) } details.showUser() </code></pre> <p>你可以在脚本中的条件语句（如<code>if</code>）中添加这些行，这样它们将在用户活动导致你需要不同的<code>showUser</code>方法时运行。这些行运行后，即使已经创建了对象<code>details</code>，对<code>details.showUser</code>的进一步调用也会运行新函数。旧的<code>showUser</code>定义已被擦除。</p> <h3 id="静态方法和属性">静态方法和属性</h3> <p>在阅读关于 PHP 对象时，你学到了类不仅可以具有与类的特定实例相关联的静态属性和方法，还可以具有静态属性和方法。JavaScript 也支持静态属性和方法，你可以方便地从类的<code>prototype</code>中存储和检索它们。因此，以下语句设置并从<code>User</code>中读取静态字符串：</p> <pre><code class="language-php">User.prototype.greeting = "Hello" document.write(User.prototype.greeting) </code></pre> <h3 id="扩展-javascript-对象">扩展 JavaScript 对象</h3> <p><code>prototype</code>关键字甚至让你能够向内置对象添加功能。例如，假设你想要添加一个功能，将字符串中的所有空格替换为不换行空格以防止其换行。你可以通过向 JavaScript 默认的<code>String</code>对象定义添加一个原型方法来实现这一点，就像这样：</p> <pre><code class="language-php">String.prototype.nbsp = function() { return this.replace(/ /g, '&nbsp;') } </code></pre> <p>这里使用了<code>replace</code>方法和正则表达式来查找并替换所有单个空格为字符串<code>&nbsp;</code>。</p> <h6 id="注意-88">注意</h6> <p>如果您还不熟悉正则表达式，它们是一种从字符串中提取信息或操作字符串的方便方法，并且在 第十七章 中有详细解释。总之，目前您可以复制并粘贴上述示例，并按描述的方式运行它们，展示了扩展 JavaScript <code>String</code> 对象的强大功能。</p> <p>如果您输入以下命令：</p> <pre><code class="language-php">document.write("The quick brown fox".nbsp()) </code></pre> <p>它将输出字符串<code>The&nbsp;quick&nbsp;brown&nbsp;fox</code>。或者你可以添加一个方法，用来从字符串中删除前导和尾随空格（再次使用正则表达式）：</p> <pre><code class="language-php">String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, '') } </code></pre> <p>如果您发出以下语句，输出将是字符串<code>Please trim me</code>（删除了前导和尾随空格）：</p> <pre><code class="language-php">document.write(" Please trim me ".trim()) </code></pre> <p>如果我们将表达式分解为其组成部分，两个<code>/</code>字符标记了表达式的开始和结束，最后的<code>g</code>指定了全局搜索。在表达式内部，<code>^\s+</code>部分搜索出现在搜索字符串开头的一个或多个空白字符，而<code>\s+$</code>部分搜索出现在搜索字符串结尾的一个或多个空白字符。中间的<code>|</code>字符用于分隔替代项。</p> <p>结果是，当任何一个表达式匹配时，匹配项将被替换为空字符串，从而返回一个没有任何前导或尾随空白的修剪过的字符串版本。</p> <h6 id="警告-14">警告</h6> <p>关于是否扩展对象是一种好还是坏的做法存在争议。一些程序员认为，如果稍后将对象扩展为正式提供您已添加的功能，可以以另一种方式实现，或者执行与您的扩展完全不同的操作，这可能会导致冲突。然而，其他程序员，如 JavaScript 的发明者 Brendan Eich，认为这是完全可以接受的做法。我倾向于同意后者的观点，但在生产代码中选择最不可能被正式使用的扩展名称。例如，<code>trim</code> 扩展可以重命名为 <code>mytrim</code>，支持代码可能更安全地编写如下：</p> <pre><code class="language-php">String.prototype.mytrim = function() { return this.replace(/^\s+|\s+$/g, '') } </code></pre> <h1 id="javascript-数组">JavaScript 数组</h1> <p>JavaScript 中的数组处理与 PHP 非常相似，尽管语法有些不同。尽管如此，鉴于您已经学到的关于数组的所有知识，这一部分对您来说应该相对简单。</p> <h2 id="数字数组">数字数组</h2> <p>要创建一个新数组，请使用以下语法：</p> <pre><code class="language-php">arrayname = new Array() </code></pre> <p>或者您可以使用简写形式，如下所示：</p> <pre><code class="language-php">arrayname = [] </code></pre> <h3 id="分配元素值">分配元素值</h3> <p>在 PHP 中，您可以通过简单地分配而不指定元素偏移来向数组添加新元素，如下所示：</p> <pre><code class="language-php">$arrayname[] = "Element 1"; $arrayname[] = "Element 2"; </code></pre> <p>但是在 JavaScript 中，您使用<code>push</code>方法来实现相同的操作，就像这样：</p> <pre><code class="language-php">arrayname.push("Element 1") arrayname.push("Element 2") </code></pre> <p>这允许您在不必跟踪项目数量的情况下继续向数组中添加项目。当您需要知道数组中有多少元素时，可以使用 <code>length</code> 属性，如下所示：</p> <pre><code class="language-php">document.write(arrayname.length) </code></pre> <p>或者，如果你希望自己跟踪元素的位置并将它们放在特定位置，可以使用以下语法：</p> <pre><code class="language-php">arrayname[0] = "Element 1" arrayname[1] = "Element 2" </code></pre> <p>示例 16-8 展示了创建数组、加载值和显示值的简单脚本。</p> <h5 id="示例-16-8-创建构建和打印一个数组">示例 16-8. 创建、构建和打印一个数组</h5> <pre><code class="language-php"><script> numbers = [] numbers.push("One") numbers.push("Two") numbers.push("Three") for (j = 0 ; j < numbers.length ; ++j) document.write("Element " + j + " = " + numbers[j] + "<br>") </script> </code></pre> <p>此脚本的输出如下：</p> <pre><code class="language-php">Element 0 = One Element 1 = Two Element 2 = Three </code></pre> <h3 id="使用-array-关键字赋值">使用 <code>Array</code> 关键字赋值</h3> <p>您还可以使用 <code>Array</code> 关键字一起创建一个包含一些初始元素的数组，如下所示：</p> <pre><code class="language-php">numbers = Array("One", "Two", "Three") </code></pre> <p>没有什么可以阻止您之后添加更多元素。</p> <p>您现在已经看到了可以向数组中添加项目的几种方式，以及引用它们的一种方式。JavaScript 提供了更多选项，我很快会介绍——但首先，我们将看看另一种类型的数组。</p> <h2 id="关联数组-1">关联数组</h2> <p><em>关联数组</em> 是一种通过名称而不是整数偏移引用元素的数组。然而，JavaScript 不支持这样的事情。相反，我们可以通过创建具有相同功能的属性对象来实现相同的结果。</p> <p>因此，要创建一个“关联数组”，请在花括号内定义一个元素块。对于每个元素，将键放在冒号 (<code>:</code>) 的左侧，内容放在右侧。示例 16-9 展示了您可能创建一个关联数组来保存在线体育用品零售商“球”部分的内容。</p> <h5 id="示例-16-9-创建和显示一个关联数组">示例 16-9. 创建和显示一个关联数组</h5> <pre><code class="language-php"><script> balls = {"golf": "Golf balls, 6", "tennis": "Tennis balls, 3", "soccer": "Soccer ball, 1", "ping": "Ping Pong balls, 1 doz"} for (ball in balls) document.write(ball + " = " + balls[ball] + "<br>") </script> </code></pre> <p>为了验证数组已经正确创建并填充，我使用了另一种使用 <code>for</code> 循环和 <code>in</code> 关键字的方式。这会创建一个新变量，仅在数组内部使用（在本例中是 <code>ball</code>），并迭代通过 <code>in</code> 关键字右侧的数组所有元素（在本例中是 <code>balls</code>）。循环作用于 <code>balls</code> 的每个元素，将键值放入 <code>ball</code> 中。</p> <p>使用存储在 <code>ball</code> 中的键值，你还可以获取 <code>balls</code> 当前元素的值。在浏览器中调用示例脚本的结果如下：</p> <pre><code class="language-php">golf = Golf balls, 6 tennis = Tennis balls, 3 soccer = Soccer ball, 1 ping = Ping Pong balls, 1 doz </code></pre> <p>要获取关联数组的特定元素，可以明确指定键，如下所示（在这种情况下，输出值为 <code>Soccer ball, 1</code>）：</p> <pre><code class="language-php">document.write(balls['soccer']) </code></pre> <h2 id="多维数组-1">多维数组</h2> <p>要在 JavaScript 中创建一个多维数组，只需将数组放在其他数组中。例如，要创建一个包含二维棋盘（8 × 8 方格）详细信息的数组，您可以使用 示例 16-10 中的代码。</p> <h5 id="示例-16-10-创建一个多维数字数组">示例 16-10. 创建一个多维数字数组</h5> <pre><code class="language-php"><script> checkerboard = Array( Array(' ', 'o', ' ', 'o', ' ', 'o', ' ', 'o'), Array('o', ' ', 'o', ' ', 'o', ' ', 'o', ' '), Array(' ', 'o', ' ', 'o', ' ', 'o', ' ', 'o'), Array(' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '), Array(' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '), Array('O', ' ', 'O', ' ', 'O', ' ', 'O', ' '), Array(' ', 'O', ' ', 'O', ' ', 'O', ' ', 'O'), Array('O', ' ', 'O', ' ', 'O', ' ', 'O', ' ')) document.write("<pre>") for (j = 0 ; j < 8 ; ++j) { for (k = 0 ; k < 8 ; ++k) document.write(checkerboard[j][k] + " ") document.write("<br>") } document.write("</pre>") </script> </code></pre> <p>在这个例子中，小写字母代表黑色棋子，大写字母代表白色。一对嵌套的 <code>for</code> 循环遍历数组并显示其内容。</p> <p>外部循环包含两个语句，因此使用大括号将它们括起来。然后内部循环处理每一行中的每个方块，输出位置<code>[j][k]</code>处的字符，后跟一个空格（使输出对齐）。由于此循环只包含一个语句，因此不需要使用大括号将其括起来。使用<code><pre></code>和<code></pre></code>标签确保输出正确显示，如下所示：</p> <pre><code class="language-php"> o o o o o o o o o o o o O O O O O O O O O O O O </code></pre> <p>你也可以直接使用方括号访问数组中的任何元素：</p> <pre><code class="language-php">document.write(checkerboard[7][2]) </code></pre> <p>此语句输出大写字母<code>O</code>，从第八个元素开始，沿着第三个元素的位置—请记住数组索引从 0 开始，而不是 1。</p> <h2 id="使用数组方法">使用数组方法</h2> <p>鉴于数组的强大功能，JavaScript 内置了多种用于操作数组及其数据的方法。以下是其中几个最有用的方法。</p> <h3 id="some">some</h3> <p>当需要知道是否至少有一个数组元素与特定条件匹配时，可以使用<code>some</code>函数。该函数会测试所有元素，并在找到匹配的元素后自动停止并返回所需的值。这样可以避免编写自己的代码来执行此类搜索，如下所示：</p> <pre><code class="language-php">function isBiggerThan10(element, index, array) { return element > 10 } result = [2, 5, 8, 1, 4].some(isBiggerThan10); // result will be false result = [12, 5, 8, 1, 4].some(isBiggerThan10); // result will be true </code></pre> <h3 id="indexof">indexOf</h3> <p>要找出数组中元素的位置，可以在数组上调用<code>indexOf</code>函数，该函数将返回所定位元素的偏移量（从 0 开始），如果未找到则返回<code>-1</code>。例如，以下代码将<code>offset</code>赋值为<code>2</code>：</p> <pre><code class="language-php">animals = ['cat', 'dog', 'cow', 'horse', 'elephant'] offset = animals.indexOf('cow') </code></pre> <h3 id="concat">concat</h3> <p><code>concat</code>方法用于连接两个数组或数组内的一系列值。例如，以下代码输出<code>Banana,Grape,Carrot,Cabbage</code>：</p> <pre><code class="language-php">fruit = ["Banana", "Grape"] veg = ["Carrot", "Cabbage"] document.write(fruit.concat(veg)) </code></pre> <p>你可以将多个数组指定为参数，此时<code>concat</code>方法会按照数组指定的顺序添加所有元素。</p> <p>下面是另一种使用<code>concat</code>的方法。此时，普通值与数组<code>pets</code>进行了连接，输出为<code>Cat,Dog,Fish,Rabbit,Hamster</code>：</p> <pre><code class="language-php">pets = ["Cat", "Dog", "Fish"] more_pets = pets.concat("Rabbit", "Hamster") document.write(more_pets) </code></pre> <h3 id="foreach">forEach</h3> <p>JavaScript 中的<code>forEach</code>方法是实现类似于 PHP <code>foreach</code>关键字功能的另一种方式。要使用它，只需传递一个函数名，该函数将针对数组中的每个元素进行调用。示例 16-11 展示了如何使用它。</p> <h5 id="示例-16-11-使用foreach方法">示例 16-11. 使用<code>forEach</code>方法</h5> <pre><code class="language-php"><script> pets = ["Cat", "Dog", "Rabbit", "Hamster"] pets.forEach(output) function output(element, index, array) { document.write("Element at index " + index + " has the value " + element + "<br>") } </script> </code></pre> <p>在这种情况下，传递给<code>forEach</code>的函数称为<code>output</code>。它接受三个参数：<code>element</code>，其<code>index</code>，以及<code>array</code>。这些参数可以根据函数的需要使用。以下示例仅使用<code>document.write</code>函数显示<code>element</code>和<code>index</code>的值。</p> <p>一旦数组被填充，就可以像这样调用方法：</p> <pre><code class="language-php">pets.forEach(output) </code></pre> <p>这是输出结果：</p> <pre><code class="language-php">Element at index 0 has the value Cat Element at index 1 has the value Dog Element at index 2 has the value Rabbit Element at index 3 has the value Hamster </code></pre> <h3 id="join">join</h3> <p>使用<code>join</code>方法，你可以将数组中的所有值转换为字符串，然后将它们连接成一个大字符串，在它们之间可以放置一个可选的分隔符。示例 16-12 展示了三种使用此方法的方式。</p> <h5 id="示例-16-12-使用join方法">示例 16-12. 使用<code>join</code>方法</h5> <pre><code class="language-php"><script> pets = ["Cat", "Dog", "Rabbit", "Hamster"] document.write(pets.join() + "<br>") document.write(pets.join(' ') + "<br>") document.write(pets.join(' : ') + "<br>") </script> </code></pre> <p>如果没有参数，<code>join</code>将使用逗号来分隔元素；否则，将插入到<code>join</code>中的字符串在每个元素之间插入。示例 16-12 的输出如下所示：</p> <pre><code class="language-php">Cat,Dog,Rabbit,Hamster Cat Dog Rabbit Hamster Cat : Dog : Rabbit : Hamster </code></pre> <h3 id="push-和-pop">push 和 pop</h3> <p>您已经看到<code>push</code>方法如何用于向数组中插入值。其逆方法是<code>pop</code>。它从数组中删除最近插入的元素并返回它。示例 16-13 展示了其使用示例。</p> <h5 id="示例-16-13-使用push和pop方法">示例 16-13. 使用<code>push</code>和<code>pop</code>方法</h5> <pre><code class="language-php"><script> `sports` `=` `[``"Football"``,` `"Tennis"``,` `"Baseball"``]` document.write("Start = " + sports + "<br>") `sports``.``push``(``"Hockey"``)` document.write("After Push = " + sports + "<br>") `removed` `=` `sports``.``pop``(``)` document.write("After Pop = " + sports + "<br>") document.write("Removed = " + removed + "<br>") </script> </code></pre> <p>此脚本的三个主要语句显示为粗体。首先，脚本创建了一个名为<code>sports</code>的数组，其中包含三个元素，然后向数组中<code>push</code>了第四个元素。随后，它将该元素<code>pop</code>出来。在此过程中，通过<code>document.write</code>显示了各种当前值。脚本输出如下：</p> <pre><code class="language-php">Start = Football,Tennis,Baseball After Push = Football,Tennis,Baseball,Hockey After Pop = Football,Tennis,Baseball Removed = Hockey </code></pre> <p><code>push</code>和<code>pop</code>函数在需要中断某些活动进行其他活动然后返回的情况下非常有用。例如，假设您想要将一些活动推迟到稍后，同时现在进行更重要的事情。这在我们处理“待办”清单时经常发生，所以让我们在代码中模拟这种情况，将六个项目列表中的第 2 和第 5 项赋予优先状态，如示例 16-14 所示。</p> <h5 id="示例-16-14-在循环内外使用push和pop">示例 16-14. 在循环内外使用<code>push</code>和<code>pop</code></h5> <pre><code class="language-php"><script>   numbers = []   for (j=1 ; j<6 ; ++j)   {     if (j == 2 || j == 5)     {       document.write("Processing 'todo' #" + j + "<br>")     }     else     {       document.write("Putting off 'todo' #" + j + " until later<br>")       `numbers``.``push``(``j``)`     }   }   document.write("<br>Finished processing the priority tasks.")   document.write("<br>Commencing stored tasks, most recent first.<br><br>")   document.write("Now processing 'todo' #" + `numbers``.``pop``(``)` + "<br>")   document.write("Now processing 'todo' #" + `numbers``.``pop``(``)` + "<br>")   document.write("Now processing 'todo' #" + `numbers``.``pop``(``)` + "<br>") </script> </code></pre> <p>当然，这里实际上没有进行任何处理，只是将文本输出到浏览器，但您可以理解这个想法。此示例的输出如下：</p> <pre><code class="language-php">Putting off 'todo' #1 until later Processing 'todo' #2 Putting off 'todo' #3 until later Putting off 'todo' #4 until later Processing 'todo' #5 Finished processing the priority tasks. Commencing stored tasks, most recent first. Now processing 'todo' #4 Now processing 'todo' #3 Now processing 'todo' #1 </code></pre> <h3 id="使用-reverse">使用 reverse</h3> <p><code>reverse</code>方法简单地颠倒数组中所有元素的顺序。示例 16-15 展示了其工作原理。</p> <h5 id="示例-16-15-使用reverse方法">示例 16-15. 使用<code>reverse</code>方法</h5> <pre><code class="language-php"><script> sports = ["Football", "Tennis", "Baseball", "Hockey"] sports.reverse() document.write(sports) </script> </code></pre> <p>原始数组被修改，此脚本的输出如下：</p> <pre><code class="language-php">Hockey,Baseball,Tennis,Football </code></pre> <h3 id="排序-1">排序</h3> <p>使用<code>sort</code>方法，您可以根据使用的参数将数组的所有元素按字母顺序排列。示例 16-16 展示了四种排序类型。</p> <h5 id="示例-16-16-使用sort方法">示例 16-16. 使用<code>sort</code>方法</h5> <pre><code class="language-php"><script> // Alphabetical sort sports = ["Football", "Tennis", "Baseball", "Hockey"] sports.sort() document.write(sports + "<br>") // Reverse alphabetical sort sports = ["Football", "Tennis", "Baseball", "Hockey"] sports.sort().reverse() document.write(sports + "<br>") // Ascending numeric sort numbers = [7, 23, 6, 74] numbers.sort(function(a,b){return a - b}) document.write(numbers + "<br>") // Descending numeric sort numbers = [7, 23, 6, 74] numbers.sort(function(a,b){return b - a}) document.write(numbers + "<br>") </script> </code></pre> <p>四个示例部分中的第一个使用默认的<code>sort</code>方法执行<em>字母排序</em>，而第二个则使用默认的<code>sort</code>，然后应用<code>reverse</code>方法来获得<em>反向字母排序</em>。</p> <p>第三和第四部分稍微复杂一些；它们使用一个函数来比较<code>a</code>和<code>b</code>之间的关系。该函数没有名称，因为它仅在排序中使用。您已经看到了名为<code>function</code>的函数用于创建匿名函数；我们用它来定义类中的方法（<code>showUser</code>方法）。</p> <p>这里，<code>function</code> 创建了一个满足 <code>sort</code> 方法需求的匿名函数。如果函数返回大于零的值，则排序假定 <code>b</code> 在 <code>a</code> 之前。如果函数返回小于零的值，则排序假定 <code>a</code> 在 <code>b</code> 之前。排序通过在数组的所有值上运行此函数来确定它们的顺序。（当然，如果 <code>a</code> 和 <code>b</code> 的值相同，函数返回零，先后顺序无关紧要。）</p> <p>通过操作返回的值（<code>a - b</code> 与 <code>b - a</code> 相比），示例 16-16 的第三和第四部分选择 <em>升序数值排序</em> 和 <em>降序数值排序</em>。</p> <p>信不信由你，这标志着你对 JavaScript 的介绍结束了。现在你应该掌握本书涵盖的三种主要技术的核心知识。下一章将讨论一些跨这些技术使用的高级技术，如模式匹配和输入验证。</p> <h1 id="问题-15">问题</h1> <ol> <li> <p>JavaScript 函数和变量名区分大小写吗？</p> </li> <li> <p>如何编写一个接受和处理无限数量参数的函数？</p> </li> <li> <p>给出一个从函数返回多个值的方法。</p> </li> <li> <p>在定义类时，用于引用当前对象的关键字是什么？</p> </li> <li> <p>类的所有方法是否都必须在类定义内部定义？</p> </li> <li> <p>用于创建对象的关键字是什么？</p> </li> <li> <p>如何使类中的所有对象都可以访问一个属性或方法，而无需在对象内部复制该属性或方法？</p> </li> <li> <p>如何创建一个多维数组？</p> </li> <li> <p>用于创建关联数组的语法是什么？</p> </li> <li> <p>编写一个语句以按降序对数字数组进行排序。</p> </li> </ol> <p>查看“第十六章答案” 中的 附录 A 获取这些问题的答案。</p> <h1 id="第十七章javascript-和-php-验证与错误处理">第十七章：JavaScript 和 PHP 验证与错误处理</h1> <p>有了你在 PHP 和 JavaScript 方面的坚实基础，现在是时候将这些技术结合起来，创建尽可能用户友好的 Web 表单了。</p> <p>我们将使用 PHP 创建表单，并使用 JavaScript 执行客户端验证，以确保在提交之前数据尽可能完整和正确。然后 PHP 将对输入进行最终验证，必要时会再次向用户呈现表单以供进一步修改。</p> <p>在这一过程中，本章将涵盖 JavaScript 和 PHP 中的验证和正则表达式。</p> <h1 id="使用-javascript-验证用户输入">使用 JavaScript 验证用户输入</h1> <p>JavaScript 验证应被视为更多地为用户提供帮助而不是为你的网站，因为，正如我已经强调过很多次的那样，你不能信任任何提交到服务器的数据，即使它已经通过 JavaScript 验证过。这是因为黑客可以相当容易地模拟你的 Web 表单并提交任意数据。</p> <p>你不能完全依赖 JavaScript 来执行所有的输入验证的另一个原因是，一些用户禁用了 JavaScript，或者使用不支持 JavaScript 的浏览器。</p> <p>因此，在 JavaScript 中最好的验证类型是检查字段是否有内容（如果不允许为空），确保电子邮件地址符合正确的格式，并确保输入的值在预期范围内。</p> <h2 id="验证html-文档第一部分"><strong>验证.html</strong> 文档（第一部分）</h2> <p>让我们从一个通用的注册表单开始，这在大多数提供会员或用户注册的网站上都很常见。请求的输入将是 <em>名</em>、<em>姓</em>、<em>用户名</em>、<em>密码</em>、<em>年龄</em> 和 <em>电子邮件地址</em>。示例 17-1 提供了这样一个表单的良好模板。</p> <h5 id="示例-17-1-具有-javascript-验证的表单第一部分">示例 17-1. 具有 JavaScript 验证的表单（第一部分）</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>An Example Form</title> <style> .signup { border:1px solid #999999; font: normal 14px helvetica; color: #444444; } </style> `<script``>` `function` `validate``(``form``)` `{` `fail` `=` `validateForename``(``form``.``forename``.``value``)` `fail` `+=` `validateSurname``(``form``.``surname``.``value``)` `fail` `+=` `validateUsername``(``form``.``username``.``value``)` `fail` `+=` `validatePassword``(``form``.``password``.``value``)` `fail` `+=` `validateAge``(``form``.``age``.``value``)` `fail` `+=` `validateEmail``(``form``.``email``.``value``)` `if` `(``fail` `==` `""``)` `return` `true` `else` `{` `alert``(``fail``)``;` `return` `false` `}` `}` `</script>` </head> <body> <table class="signup" border="0" cellpadding="2" cellspacing="5" bgcolor="#eeeeee"> <th colspan="2" align="center">Signup Form</th> <form method="post" action="adduser.php" onsubmit="return validate(this)"> <tr><td>Forename</td> <td><input type="text" maxlength="32" name="forename"></td></tr> <tr><td>Surname</td> <td><input type="text" maxlength="32" name="surname"></td></tr> <tr><td>Username</td> <td><input type="text" maxlength="16" name="username"></td></tr> <tr><td>Password</td> <td><input type="text" maxlength="12" name="password"></td></tr> <tr><td>Age</td> <td><input type="text" maxlength="3" name="age"></td></tr> <tr><td>Email</td> <td><input type="text" maxlength="64" name="email"></td></tr> <tr><td colspan="2" align="center"><input type="submit" value="Signup"></td></tr> </form> </table> </body> </html> </code></pre> <p>目前这个表单虽然可以正确显示，但并没有进行自我验证，因为主要的验证函数尚未添加。即便如此，请将其保存为 <em>validate.html</em>，当你在浏览器中调用它时，它将呈现为 图 17-1。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1701.png" alt="来自示例 16-1 的输出" loading="lazy"></p> <h6 id="图-17-1-来自-示例17-1-的输出">图 17-1. 来自 示例 17-1 的输出</h6> <p>让我们看看这个文档是如何组成的。开头几行设置了文档并使用了一些 CSS 使表单看起来不那么简单。接下来是与 JavaScript 相关的部分，用粗体显示。</p> <p>在 <code><script></code> 和 <code></script></code> 标签之间有一个名为 <code>validate</code> 的函数，它调用其他六个函数来验证表单的每个输入字段。稍后我们会详细介绍这些函数。现在我只想解释一下，它们会返回空字符串（如果字段验证通过）或错误消息（如果验证失败）。如果存在任何错误，脚本的最后一行会弹出一个警告框显示这些错误。</p> <p>在通过验证后，<code>validate</code> 函数返回 <code>true</code>；否则返回 <code>false</code>。<code>validate</code> 的返回值很重要，因为如果它返回 <code>false</code>，则会阻止表单的提交。这允许用户关闭警告弹出窗口并进行更改。如果返回 <code>true</code>，则表单字段中未遇到任何错误，因此表单会被提交。</p> <p>这个示例的第二部分展示了表单的 HTML 结构，每个字段及其名称都放在表格的单独行中。这是相当直接的 HTML，唯一的例外是在开头的 <code><form></code> 标签中的 <code>onSubmit="return validate(this)"</code> 语句。使用 <code>onSubmit</code>，你可以在提交表单时调用自定义的函数。该函数可以进行一些检查，并返回 <code>true</code> 或 <code>false</code> 的值，以表示是否允许提交表单。</p> <p><code>this</code> 参数是当前对象（即此表单），并且正如前面讨论的，将其传递给 <code>validate</code> 函数。<code>validate</code> 函数接收此参数作为对象 <code>form</code>。</p> <p>如你所见，表单的 HTML 中仅包含嵌入在 <code>onSubmit</code> 属性中的 <code>return</code> 调用的 JavaScript。禁用或不可用 JavaScript 的浏览器将简单地忽略 <code>onSubmit</code> 属性，并且 HTML 将正常显示。</p> <h2 id="validatehtml-文档第二部分">validate.html 文档（第二部分）</h2> <p>现在我们来到示例 17-2，这是六个执行实际表单字段验证的函数。我建议你键入所有这些内容的第二部分，并将其保存在示例 17-1 的 <code><script>...</script></code> 部分中，你应该已经将其保存为 <em>validate.html</em>。</p> <h5 id="示例-17-2-具有-javascript-验证的表单第二部分">示例 17-2. 具有 JavaScript 验证的表单（第二部分）</h5> <pre><code class="language-php">`function` `validateForename``(``field``)` { return (field == "") ? "No Forename was entered.\n" : "" } `function` `validateSurname``(``field``)` { return (field == "") ? "No Surname was entered.\n" : "" } `function` `validateUsername``(``field``)` { if (field == "") return "No Username was entered.\n" else if (field.length < 5) return "Usernames must be at least 5 characters.\n" else if (/[^a-zA-Z0-9_-]/.test(field)) return "Only a-z, A-Z, 0-9, - and _ allowed in Usernames.\n" return "" } `function` `validatePassword``(``field``)` { if (field == "") return "No Password was entered.\n" else if (field.length < 6) return "Passwords must be at least 6 characters.\n" else if (!/[a-z]/.test(field) || ! /[A-Z]/.test(field) || !/[0-9]/.test(field)) return "Passwords require one each of a-z, A-Z and 0-9.\n" return "" } `function` `validateAge``(``field``)` { if (field == "" || isNaN(field)) return "No Age was entered.\n" else if (field < 18 || field > 110) return "Age must be between 18 and 110.\n" return "" } `function` `validateEmail``(``field``)` { if (field == "") return "No Email was entered.\n" else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The Email address is invalid.\n" return "" } </code></pre> <p>我们将依次讨论每个这些函数，从 <code>validateForename</code> 开始，这样你就能看到验证的工作原理。</p> <h3 id="验证名字">验证名字</h3> <p><code>validateForename</code> 是一个非常简短的函数，接受参数 <code>field</code>，该参数是由 <code>validate</code> 函数传递给它的名字的值。</p> <p>如果此值为空字符串，则返回错误消息；否则，返回空字符串以表示未遇到错误。</p> <p>如果用户在此字段中输入空格，则 <code>validateForename</code> 将接受它，尽管实际上它对所有目的而言是空的。你可以通过添加额外的语句来修复此问题，从字段中修剪空白字符然后检查它是否为空，或者使用正则表达式来确保字段中除空白字符外还有其他内容，或者——就像我在这里做的一样——让用户犯错，并允许 PHP 程序在服务器上捕获它。</p> <h3 id="验证姓氏">验证姓氏</h3> <p><code>validateSurname</code>函数与<code>validateForename</code>几乎相同，仅当提供的姓氏是空字符串时才返回错误。我选择不限制名称字段中允许的字符，以便包括非英语和带重音字符的可能性。</p> <h3 id="用户名验证">用户名验证</h3> <p><code>validateUsername</code>函数稍微有趣，因为它的工作更复杂。它必须仅允许字符<code>a-z</code>、<code>A-Z</code>、<code>0-9</code>、<code>_</code>和<code>-</code>通过，并确保用户名至少为五个字符长。</p> <p><code>if...else</code>语句开始时，如果<code>field</code>未填写，则返回错误。如果不是空字符串，但长度少于五个字符，则返回另一条错误消息。</p> <p>然后调用 JavaScript 的<code>test</code>函数，传递一个正则表达式（匹配任何不是允许字符之一的字符），与<code>field</code>进行匹配（参见“正则表达式”）。如果遇到不是允许字符之一的字符，则<code>test</code>函数返回<code>true</code>，因此<code>validateUser</code>返回错误字符串。</p> <h3 id="密码验证">密码验证</h3> <p><code>validatePassword</code>函数中使用类似的技术。首先，函数检查<code>field</code>是否为空，如果是，则返回错误。接下来，如果密码长度少于六个字符，则返回错误消息。</p> <p>我们对密码施加的要求之一是，它们必须至少包含一个小写字母、一个大写字母和一个数字字符，因此<code>test</code>函数被调用三次，分别对这三种情况进行检查。如果其中任何一次调用返回<code>false</code>，则表示未满足其中一项要求，因此返回错误消息。否则，返回空字符串表示密码符合要求。</p> <h3 id="年龄验证">年龄验证</h3> <p><code>validateAge</code>如果<code>field</code>不是数字（通过调用<code>isNaN</code>函数确定）或输入的年龄低于 18 或高于 110，则返回错误消息。您的应用程序可能具有不同或无年龄要求。同样，验证成功后返回空字符串。</p> <h3 id="邮件验证">邮件验证</h3> <p>在最后一个最复杂的示例中，电子邮件地址使用<code>validateEmail</code>进行验证。检查是否有实际输入内容，如果没有，则返回错误消息，函数将两次调用 JavaScript 的<code>indexOf</code>函数。第一次检查确保字段的第一个字符后面有一个句点（<code>.</code>），第二次检查确保<code>@</code>符号在第一个字符后面出现。</p> <p>如果这两个检查都满足，将调用<code>test</code>函数来查看字段中是否有任何不允许的字符出现。如果这些测试中有任何失败，将返回一个错误消息。电子邮件地址中允许的字符是大写字母、小写字母、数字以及<code>_</code>、<code>-</code>、句点和<code>@</code>字符，如传递给<code>test</code>方法的正则表达式详细说明的那样。如果没有发现错误，则返回空字符串表示验证成功。在最后一行，关闭了脚本和文档。</p> <p>图 17-2 显示了用户在没有填写任何字段的情况下单击注册按钮的结果。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1702.png" alt="JavaScript 表单验证实例" loading="lazy"></p> <h6 id="图-17-2-javascript-表单验证实例">图 17-2. JavaScript 表单验证实例</h6> <h3 id="使用单独的-javascript-文件">使用单独的 JavaScript 文件</h3> <p>当然，因为它们在结构上是通用的，并且可能适用于你可能需要的许多类型的验证，这六个函数是将理想的候选项移出到一个单独的 JavaScript 文件中。你可以将文件命名为<em>validate_functions.js</em>，并在示例 17-1 的初始脚本部分之后直接包含它，使用以下语句：</p> <pre><code class="language-php"><script src="validate_functions.js"></script> </code></pre> <h1 id="正则表达式">正则表达式</h1> <p>让我们更仔细地查看我们一直在进行的模式匹配。我们已经通过<em>正则表达式</em>实现了它，这在 JavaScript 和 PHP 中都受支持。它们使得能够在一个表达式中构造最强大的模式匹配算法成为可能。</p> <h2 id="通过元字符匹配">通过元字符匹配</h2> <p>每个正则表达式都必须用斜杠括起来。在这些斜杠内部，某些字符具有特殊含义；它们被称为<em>元字符</em>。例如，星号（<code>*</code>）的含义类似于你在使用 Shell 或 Windows 命令提示符时看到的（但不完全相同）。星号表示“你尝试匹配的文本可以有任意数量的前导字符——或者根本没有。”</p> <p>例如，假设你正在寻找姓名<em>Le Guin</em>，并且知道有些人可能会带空格或者不带空格拼写。因为文本布局很奇怪（例如，有人可能插入额外的空格来右对齐行），你可能需要搜索类似这样的一行：</p> <pre><code class="language-php">The difficulty of classifying Le Guin's works </code></pre> <p>所以你需要匹配<em>LeGuin</em>，以及用任意数量的空格分隔的<em>Le</em>和<em>Guin</em>。解决方案是在空格后面跟随一个星号：</p> <pre><code class="language-php">/Le *Guin/ </code></pre> <p>在那一行中除了姓名<em>Le Guin</em>之外还有很多内容，但没关系。只要正则表达式匹配行的某些部分，<code>test</code>函数就会返回一个<code>true</code>值。如果确保行中仅包含<em>Le Guin</em>很重要，稍后我会告诉你如何确保这一点。</p> <p>假设你知道至少有一个空格。在这种情况下，你可以使用加号（<code>+</code>），因为它需要至少一个前导字符：</p> <pre><code class="language-php">/Le +Guin/ </code></pre> <h2 id="模糊字符匹配">模糊字符匹配</h2> <p>点号（<code>.</code>）特别有用，因为它可以匹配除换行符以外的任何内容。假设您正在寻找以<code><</code>开头、以<code>></code>结尾的 HTML 标签。这里展示了一个简单的方法：</p> <pre><code class="language-php">/<.*>/ </code></pre> <p>点号匹配任何字符，而<code>*</code>扩展它以匹配零个或多个字符，因此它表示：“匹配介于<code><</code>和<code>></code>之间的任何内容，即使其中什么也没有。” 您将匹配<code><></code>、<code><em></code>、<code><br></code>等等。但如果您不想匹配空情况<code><></code>，您应该使用<code>+</code>而不是<code>*</code>，如下所示：</p> <pre><code class="language-php">/<.+>/ </code></pre> <p>加号扩展了点号以匹配一个或多个字符，即表示：“匹配介于<code><</code>和<code>></code>之间的任何内容，只要它们之间至少有一个字符。” 您将匹配到<code><em></code>和<code></em></code>，<code><h1></code>和<code></h1></code>，以及带有属性的标签，如下所示：</p> <pre><code class="language-php"><a href="www.mozilla.org"> </code></pre> <p>不幸的是，加号会持续匹配直到行尾的最后一个<code>></code>，因此您可能会得到如下结果：</p> <pre><code class="language-php"><h1><b>Introduction</b></h1> </code></pre> <p>不仅仅是一个标签！稍后在本节中我将展示一个更好的解决方案。</p> <h6 id="注意-89">注意</h6> <p>如果您在尖括号之间单独使用点号，而不是跟随一个<code>+</code>或<code>*</code>，那么它将匹配单个字符；您将匹配到<code><b></code>和<code><i></code>，但<em>不会</em>匹配<code><em></code>或<code><textarea></code>。</p> <p>如果要匹配点号字符本身（<code>.</code>），必须在其前面放置反斜杠（<code>\</code>）进行转义，因为否则它是一个元字符，可以匹配任何内容。例如，假设您想匹配浮点数<code>5.0</code>，则正则表达式如下：</p> <pre><code class="language-php">/5\.0/ </code></pre> <p>反斜杠可以转义任何元字符，包括另一个反斜杠（如果您试图在文本中匹配反斜杠）。不过，有点让人困惑的是，稍后您将看到反斜杠有时会赋予其后的字符特殊含义。</p> <p>我们刚刚匹配了一个浮点数。但也许您想匹配<code>5.</code>以及<code>5.0</code>，因为它们在浮点数表示上是相同的。您还想匹配<code>5.00</code>、<code>5.000</code>等，允许任意数量的零。您可以通过添加一个星号来实现，正如您所见：</p> <pre><code class="language-php">/5\.0*/ </code></pre> <h2 id="通过括号进行分组">通过括号进行分组</h2> <p>假设您想匹配单位增量的幂，例如 kilo、mega、giga 和 tera。换句话说，您希望以下所有内容都匹配：</p> <pre><code class="language-php">1,000 1,000,000 1,000,000,000 1,000,000,000,000 ... </code></pre> <p>加号在这里也适用，但您需要将字符串<code>,000</code>进行分组，以便加号匹配整个内容。正则表达式如下：</p> <pre><code class="language-php">/1(,000)+ / </code></pre> <p>括号意味着“在应用加号等操作时将其视为一个组”。<code>1,00,000</code>和<code>1,000,00</code>不会匹配，因为文本必须包含一个 1，后跟一个或多个逗号，后跟三个零的完整组。</p> <p>加号后面的空格表示匹配在遇到空格时必须结束。如果没有它，<code>1,000,00</code>会因为只考虑到第一个<code>1,000</code>而错误匹配，而剩下的<code>,00</code>会被忽略。要求后面有空格确保匹配将持续到数字的末尾。</p> <h2 id="字符类">字符类</h2> <p>有时你想匹配模糊的内容，但又不想使用点号匹配得太广泛。正则表达式的伟大之处在于它们允许你尽可能精确或模糊地匹配。</p> <p>支持模糊匹配的关键特性之一是方括号对，<code>[]</code>。它匹配单个字符，像点号一样，但是在方括号内你放的是一个可以匹配的列表。如果这些字符中的任何一个出现，文本就匹配。例如，如果你想匹配美式拼写<em>gray</em>和英式拼写<em>grey</em>，你可以指定如下内容：</p> <pre><code class="language-php">/gr[ae]y/ </code></pre> <p>在你匹配的文本中的<code>gr</code>后面，可以是<code>a</code>或<code>e</code>。但必须只有一个：方括号里放的东西刚好匹配一个字符。方括号里的字符组称为<em>字符类</em>。</p> <h2 id="指示范围">指示范围</h2> <p>在方括号内，你可以使用连字符（<code>-</code>）来表示一个范围。一个非常常见的任务是匹配单个数字，你可以用范围来做到如下所示：</p> <pre><code class="language-php">/[0-9]/ </code></pre> <p>数字在正则表达式中是如此常见，以至于提供了一个单字符来代表它们：<code>\d</code>。你可以用它代替方括号中的正则表达式来匹配一个数字：</p> <pre><code class="language-php">/\d/ </code></pre> <h2 id="否定">否定</h2> <p>方括号的另一个重要特性是对字符类的<em>否定</em>。你可以通过在开放的方括号后面放置一个插入符号（<code>^</code>）来颠倒整个字符类。这里的意思是“匹配任何字符<em>除了</em>以下内容”。所以，假设你想找到缺少以下感叹号的<em>Yahoo</em>实例。（公司的官方名称中正式包含一个感叹号！）你可以像这样做：</p> <pre><code class="language-php">/Yahoo[^!]/ </code></pre> <p>字符类别由一个单字符组成——一个感叹号，但它被前面的<code>^</code>反转。这实际上并不是解决问题的好方法——例如，如果<em>Yahoo</em>在行尾，它就不再后面跟着<em>任何东西</em>，而方括号必须匹配一个字符。一个更好的解决方案涉及到负向<em>前瞻</em>（匹配后面没有其他东西的内容），但这超出了本书的范围，请参考<a href="https://tinyurl.com/regexdocs" target="_blank">在线文档</a>。</p> <h2 id="一些更复杂的例子">一些更复杂的例子</h2> <p>了解字符类和否定后，你现在准备好看到更好的解决方案来匹配 HTML 标签的问题了。这个解决方案避免了越过单个标签的末尾，但仍然匹配像<code><em></code>和<code></em></code>这样的标签，以及带属性的标签，比如这样的：</p> <pre><code class="language-php"><a href="www.mozilla.org"> </code></pre> <p>这是一个解决方案：</p> <pre><code class="language-php">/<[^>]+>/ </code></pre> <p>那个正则表达式看起来好像我把茶杯掉在键盘上，但它是完全有效和非常有用的。让我们分解它。图 17-3 展示了各个元素，我会逐一描述它们。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1703.png" alt="典型正则表达式的分解" loading="lazy"></p> <h6 id="图-17-3-典型正则表达式的分解">图 17-3. 典型正则表达式的分解</h6> <p>元素如下：</p> <p><dfn class="keep-together"><code>/</code></dfn></p> <p>指示这是正则表达式的开头斜杠。</p> <p><dfn class="keep-together"><code><</code></dfn></p> <p>HTML 标签的开始括号。这是精确匹配；不是元字符。</p> <p><dfn class="keep-together"><code>[^>]</code></dfn></p> <p>字符类。嵌入的<code>^></code>表示“匹配除了闭合尖括号之外的任何内容”。</p> <p><dfn class="keep-together"><code>+</code></dfn></p> <p>允许任意数量的字符匹配前一个<code>[^>]</code>，但至少要有一个。</p> <p><dfn class="keep-together"><code>></code></dfn></p> <p>HTML 标签的闭合括号。这是精确匹配。</p> <p><dfn class="keep-together"><code>/</code></dfn></p> <p>表示正则表达式的结束斜杠。</p> <h6 id="注意-90">注意</h6> <p>另一个解决匹配 HTML 标签问题的方法是使用非贪婪操作。默认情况下，模式匹配是贪婪的，返回可能的最长匹配。非贪婪（或惰性）匹配找到可能的最短匹配。这本书不涉及其使用，但可以在<a href="https://tinyurl.com/regexgreedy" target="_blank">JavaScript.info website</a>上找到更多细节。</p> <p>我们现在将查看来自 Example 17-1 中的表达式之一，其中使用了<code>validateUsername</code>函数：</p> <pre><code class="language-php">/[^a-zA-Z0-9_-]/ </code></pre> <p>Figure 17-4 显示了各种元素。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1704.png" alt="" loading="lazy"></p> <h6 id="图-17-4-validateusername正则表达式的详细分解">图 17-4. <code>validateUsername</code>正则表达式的详细分解</h6> <p>让我们详细看看这些元素：</p> <p><dfn class="keep-together"><code>/</code></dfn></p> <p>指示这是正则表达式的开头斜杠。</p> <p><dfn class="keep-together"><code>[</code></dfn></p> <p>开始字符类的开放方括号。</p> <p><dfn class="keep-together"><code>^</code></dfn></p> <p>反向字符：反转方括号内的所有其他内容。</p> <p><dfn class="keep-together"><code>a-z</code></dfn></p> <p>表示任何小写字母。</p> <p><dfn class="keep-together"><code>A-Z</code></dfn></p> <p>表示任何大写字母。</p> <p><dfn class="keep-together"><code>0-9</code></dfn></p> <p>表示任何数字。</p> <p><dfn class="keep-together"><code>_</code></dfn></p> <p>一个下划线。</p> <p><dfn class="keep-together"><code>-</code></dfn></p> <p>一个破折号。</p> <p><dfn class="keep-together"><code>]</code></dfn></p> <p>结束字符类的闭合括号。</p> <p><dfn class="keep-together"><code>/</code></dfn></p> <p>表示正则表达式的结束斜杠。</p> <p>还有两个重要的元字符。它们通过要求出现在特定位置来“锚定”正则表达式。如果<code>^</code>出现在正则表达式的开头，则表达式必须出现在文本行的开头；否则，它不匹配。同样地，如果<code>$</code>符号出现在正则表达式的末尾，则表达式必须出现在文本行的末尾。</p> <h6 id="注意-91">注意</h6> <p>可能会有些混淆，<code>^</code>在方括号内可以表示“否定字符类”，而在正则表达式的开头可以表示“匹配行的开头”。不幸的是，同一个字符用于两种不同的含义，因此在使用时要小心。</p> <p>我们将通过回答前面提出的问题来完成对正则表达式基础的探索：假设你想确保一行除了正则表达式之外没有任何其他内容，该怎么办？如果你想要一个包含“Le Guin”而没有其他内容的行？我们可以通过修改先前的正则表达式来实现这一点，将两端锚定：</p> <pre><code class="language-php">/^Le *Guin$/ </code></pre> <h2 id="元字符总结">元字符总结</h2> <p>表 17-1 展示了正则表达式中可用的元字符。</p> <p>表 17-1. 正则表达式元字符</p> <table> <thead> <tr> <th>元字符</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>/</code></td> <td>开始和结束正则表达式</td> </tr> <tr> <td><code>.</code></td> <td>匹配除换行符外的任何单个字符</td> </tr> <tr> <td><code>*`元素`**</code></td> <td>匹配零次或多次的<em><code>元素</code></em></td> </tr> <tr> <td><code>*`元素`*+</code></td> <td>匹配至少一次的<em><code>元素</code></em></td> </tr> <tr> <td><code>*`元素`*?</code></td> <td>匹配零次或一次的<em><code>元素</code></em></td> </tr> <tr> <td><code>[*`字符`*]</code></td> <td>匹配括号内的任意字符</td> </tr> <tr> <td><code>[^*`字符`*]</code></td> <td>匹配不在括号内的单个字符</td> </tr> <tr> <td><code>(*`正则表达式`*)</code></td> <td>将<em><code>正则表达式</code></em>视为计数或后续 <code>*</code>、<code>+</code> 或 <code>?</code> 的组</td> </tr> <tr> <td><code>*`左`*&#124;*`右`*</code></td> <td>匹配<em><code>左</code></em>或<em><code>右</code></em></td> </tr> <tr> <td><code>[*`l`*-*`r`*]</code></td> <td>匹配介于<em><code>l</code></em>和<em><code>r</code></em>之间的字符范围</td> </tr> <tr> <td><code>^</code></td> <td>要求匹配字符串的开头</td> </tr> <tr> <td>`</td> <td>元字符</td> </tr> <tr> <td>---</td> <td>---</td> </tr> <tr> <td><code>/</code></td> <td>开始和结束正则表达式</td> </tr> <tr> <td><code>.</code></td> <td>匹配除换行符外的任何单个字符</td> </tr> <tr> <td><code>*`元素`**</code></td> <td>匹配零次或多次的<em><code>元素</code></em></td> </tr> <tr> <td><code>*`元素`*+</code></td> <td>匹配至少一次的<em><code>元素</code></em></td> </tr> <tr> <td><code>*`元素`*?</code></td> <td>匹配零次或一次的<em><code>元素</code></em></td> </tr> <tr> <td><code>[*`字符`*]</code></td> <td>匹配括号内的任意字符</td> </tr> <tr> <td><code>[^*`字符`*]</code></td> <td>匹配不在括号内的单个字符</td> </tr> <tr> <td><code>(*`正则表达式`*)</code></td> <td>将<em><code>正则表达式</code></em>视为计数或后续 <code>*</code>、<code>+</code> 或 <code>?</code> 的组</td> </tr> <tr> <td><code>*`左`*&#124;*`右`*</code></td> <td>匹配<em><code>左</code></em>或<em><code>右</code></em></td> </tr> <tr> <td><code>[*`l`*-*`r`*]</code></td> <td>匹配介于<em><code>l</code></em>和<em><code>r</code></em>之间的字符范围</td> </tr> <tr> <td><code>^</code></td> <td>要求匹配字符串的开头</td> </tr> <tr> <td>要求匹配字符串的结尾</td> <td></td> </tr> <tr> <td><code>\b</code></td> <td>匹配单词边界</td> </tr> <tr> <td><code>\B</code></td> <td>匹配非单词边界</td> </tr> <tr> <td><code>\d</code></td> <td>匹配单个数字</td> </tr> <tr> <td><code>\D</code></td> <td>匹配单个非数字字符</td> </tr> <tr> <td><code>\n</code></td> <td>匹配换行符</td> </tr> <tr> <td><code>\s</code></td> <td>匹配空白字符</td> </tr> <tr> <td><code>\S</code></td> <td>匹配非空白字符</td> </tr> <tr> <td><code>\t</code></td> <td>匹配制表符</td> </tr> <tr> <td><code>\w</code></td> <td>匹配单词字符（<code>a-z</code>、<code>A-Z</code>、<code>0-9</code> 和 <code>_</code>）</td> </tr> <tr> <td><code>\W</code></td> <td>匹配非单词字符（除了 <code>a-z</code>、<code>A-Z</code>、<code>0-9</code> 和 <code>_</code> 以外的任何字符）</td> </tr> <tr> <td><code>\*`x`*</code></td> <td>匹配<em><code>x</code></em>（如果<em><code>x</code></em>是元字符，但你真正想要的是<em><code>x</code></em>）</td> </tr> <tr> <td><code>{*`n`*}</code></td> <td>精确匹配<em><code>n</code></em>次</td> </tr> <tr> <td><code>{*`n`*,}</code></td> <td>匹配至少<em><code>n</code></em>次或更多</td> </tr> <tr> <td><code>{*`最小`*,*`最大`*}</code></td> <td>匹配至少<em><code>最小</code></em>次，最多<em><code>最大</code></em>次</td> </tr> </tbody> </table> <p>通过这张表格的提供，并重新审视表达式 <code>/[^a-zA-Z0-9_]/</code>，你可以看到它很容易被简化为 <code>/[^\w]/</code>，因为小写 <code>w</code> 的单个元字符 <code>\w</code> 指定了字符 <code>a-z</code>、<code>A-Z</code>、<code>0-9</code> 和 <code>_</code>。</p> <p>实际上，我们可以比这更聪明，因为元字符 <code>\W</code>（大写 <code>W</code>）指定除了 <code>a-z</code>、<code>A-Z</code>、<code>0-9</code> 和 <code>_</code> 之外的所有字符。因此，我们也可以省略 <code>^</code> 元字符，直接使用 <code>/[\W]/</code> 或者甚至进一步简化为 <code>/\W/</code>，因为它只匹配单个字符。</p> <p>为了让你更清楚地了解这一切是如何工作的，表 17-2 展示了一系列表达式及其匹配的模式。</p> <p>表 17-2. 一些示例正则表达式</p> <table> <thead> <tr> <th>示例</th> <th>匹配结果</th> </tr> </thead> <tbody> <tr> <td><code>r</code></td> <td><em>The quick brown</em> 中的第一个 <em>r</em></td> </tr> <tr> <td><code>rec[ei][ei]ve</code></td> <td><em>receive</em> 或 <em>recieve</em>（同时也包括 <em>receeve</em> 或 <em>reciive</em>）</td> </tr> <tr> <td><code>rec[ei]{2}ve</code></td> <td><em>receive</em> 或 <em>recieve</em>（同时也包括 <em>receeve</em> 或 <em>reciive</em>）</td> </tr> <tr> <td><code>rec(ei&#124;ie)ve</code></td> <td><em>receive</em> 或 <em>recieve</em>（但不是 <em>receeve</em> 或 <em>reciive</em>）</td> </tr> <tr> <td><code>cat</code></td> <td><em>I like cats and dogs</em> 中的单词 <em>cat</em></td> </tr> <tr> <td><code>cat&#124;dog</code></td> <td><em>I like cats and dogs</em> 中的单词 <em>cat</em>（匹配先遇到的 <em>cat</em> 或 <em>dog</em>）</td> </tr> <tr> <td><code>\.</code></td> <td><code>.</code>（因为<code>.</code>是一个元字符，所以<code>\</code>是必需的）</td> </tr> <tr> <td><code>5\.0*</code></td> <td><em>5.</em>、<em>5.0</em>、<em>5.00</em>、<em>5.000</em> 等</td> </tr> <tr> <td><code>[a-f]</code></td> <td>任意字符 <em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>e</em>, 或 <em>f</em> 中的一个</td> </tr> <tr> <td>`cats</td> <td>示例</td> </tr> <tr> <td>---</td> <td>---</td> </tr> <tr> <td><code>r</code></td> <td><em>The quick brown</em> 中的第一个 <em>r</em></td> </tr> <tr> <td><code>rec[ei][ei]ve</code></td> <td><em>receive</em> 或 <em>recieve</em>（同时也包括 <em>receeve</em> 或 <em>reciive</em>）</td> </tr> <tr> <td><code>rec[ei]{2}ve</code></td> <td><em>receive</em> 或 <em>recieve</em>（同时也包括 <em>receeve</em> 或 <em>reciive</em>）</td> </tr> <tr> <td><code>rec(ei&#124;ie)ve</code></td> <td><em>receive</em> 或 <em>recieve</em>（但不是 <em>receeve</em> 或 <em>reciive</em>）</td> </tr> <tr> <td><code>cat</code></td> <td><em>I like cats and dogs</em> 中的单词 <em>cat</em></td> </tr> <tr> <td><code>cat&#124;dog</code></td> <td><em>I like cats and dogs</em> 中的单词 <em>cat</em>（匹配先遇到的 <em>cat</em> 或 <em>dog</em>）</td> </tr> <tr> <td><code>\.</code></td> <td><code>.</code>（因为<code>.</code>是一个元字符，所以<code>\</code>是必需的）</td> </tr> <tr> <td><code>5\.0*</code></td> <td><em>5.</em>、<em>5.0</em>、<em>5.00</em>、<em>5.000</em> 等</td> </tr> <tr> <td><code>[a-f]</code></td> <td>任意字符 <em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>e</em>, 或 <em>f</em> 中的一个</td> </tr> <tr> <td><em>My cats are friendly cats</em> 中的最后一个 <em>cats</em></td> <td></td> </tr> <tr> <td><code>^my</code></td> <td>只匹配 <em>my cats are my pets</em> 中的第一个 <em>my</em></td> </tr> <tr> <td><code>\d{2,3}</code></td> <td>任意两到三位数字（<em>00</em> 到 <em>999</em>）</td> </tr> <tr> <td><code>7(,000)+</code></td> <td><em>7,000</em>、<em>7,000,000</em>、<em>7,000,000,000</em>、<em>7,000,000,000,000</em> 等</td> </tr> <tr> <td><code>[\w]+</code></td> <td>任意一个或多个字符的单词</td> </tr> <tr> <td><code>[\w]{5}</code></td> <td>任意五个字母的单词</td> </tr> </tbody> </table> <h2 id="通用修饰符">通用修饰符</h2> <p>一些额外的修饰符可用于正则表达式：</p> <ul> <li> <p><code>/g</code> 使得匹配为全局匹配。在使用替换函数时，要指定此修饰符以替换所有匹配项，而不仅仅是第一个。</p> </li> <li> <p><code>/i</code> 使得正则表达式匹配时忽略大小写。因此，可以用 <code>/[a-z]/i</code> 或 <code>/[A-Z]/i</code> 替代 <code>/[a-zA-Z]/</code>。</p> </li> <li> <p><code>/m</code> 使得多行模式启用，在这种模式下，插入符 (<code>^</code>) 和美元符 (<code>$</code>) 将在主题字符串中的任何新行之前和之后匹配。通常情况下，多行字符串中，<code>^</code> 仅匹配字符串的开始，<code>$</code> 仅匹配字符串的结尾。</p> </li> </ul> <p>例如，表达式 <code>/cats/g</code> 将匹配句子 “I like cats, and cats like me.” 中的两个 <em>cats</em>。同样，表达式 <code>/dogs/gi</code> 将匹配句子 “Dogs like other dogs.” 中的两个 <em>dogs</em>（<em>Dogs</em> 和 <em>dogs</em>），因为你可以结合使用这些修饰符。</p> <h2 id="在-javascript-中使用正则表达式">在 JavaScript 中使用正则表达式</h2> <p>在 JavaScript 中，你将主要使用两种方法来处理正则表达式：<code>test</code>（你已经见过）和 <code>replace</code>。<code>test</code> 方法仅告诉你其参数是否与正则表达式匹配，而 <code>replace</code> 则需要第二个参数：替换匹配文本的字符串。与大多数函数一样，<code>replace</code> 返回一个新字符串作为其返回值；它不会改变输入。</p> <p>为了比较这两种方法，以下语句返回 <code>true</code>，告诉我们 <em>cats</em> 这个词在字符串中至少出现一次。</p> <pre><code class="language-php">document.write(/cats/i.test("Cats are funny. I like cats.")) </code></pre> <p>但以下语句将两次出现的 <em>cats</em> 替换为 <em>dogs</em>，并打印结果。搜索必须是全局的 (<code>/g</code>) 才能找到所有匹配，且大小写不敏感 (<code>/i</code>) 才能找到大写 <em>Cats</em>：</p> <pre><code class="language-php">document.write("Cats are friendly. I like cats.".replace(/cats/gi,"dogs")) </code></pre> <p>如果您尝试这个语句，您会看到 <code>replace</code> 的一个限制：因为它精确地使用您告诉它使用的字符串替换文本，所以第一个单词 <em>Cats</em> 被替换为 <em>dogs</em> 而不是 <em>Dogs</em>。</p> <h2 id="在-php-中使用正则表达式">在 PHP 中使用正则表达式</h2> <p>在 PHP 中，您可能会经常使用的正则表达式函数是 <code>preg_match</code>、<code>preg_match_all</code> 和 <code>preg_replace</code>。</p> <p>要测试字符串中是否出现单词 <em>cats</em>，不论大小写，您可以像这样使用 <code>preg_match</code>：</p> <pre><code class="language-php">$n = preg_match("/cats/i", "Cats are crazy. I like cats."); </code></pre> <p>由于 PHP 使用 <code>1</code> 表示 <code>TRUE</code>，使用 <code>0</code> 表示 <code>FALSE</code>，所以上述语句将 <code>$n</code> 设置为 <code>1</code>。第一个参数是正则表达式，第二个参数是要匹配的文本。但是 <code>preg_match</code> 实际上更加强大和复杂，因为它接受第三个参数，显示匹配的文本是什么：</p> <pre><code class="language-php">$n = preg_match("/cats/i", "Cats are curious. I like cats.", $match); echo "$n Matches: $match[0]"; </code></pre> <p>第三个参数是一个数组（在这里，命名为 <code>$match</code>）。函数将匹配的文本放入第一个元素中，因此如果匹配成功，您可以在 <code>$match[0]</code> 中找到匹配的文本。在这个例子中，输出告诉我们匹配的文本是大写的：</p> <pre><code class="language-php">1 Matches: Cats </code></pre> <p>如果您希望查找所有匹配项，可以使用 <code>preg_match_all</code> 函数，如下所示：</p> <pre><code class="language-php">$n = preg_match_all("/cats/i", "Cats are strange. I like cats.", $match); echo "$n Matches: "; for ($j=0 ; $j < $n ; ++$j) echo $match[0][$j]." "; </code></pre> <p>与之前一样，将 <code>$match</code> 传递给函数，并将元素 <code>$match[0]</code> 分配为所做的匹配，但这次作为子数组。为了显示子数组，这个例子使用 <code>for</code> 循环进行迭代。</p> <p>当您想要替换字符串的一部分时，可以使用 <code>preg_replace</code>，如此例所示。这个例子替换了所有出现的单词 <em>cats</em>，不区分大小写地替换为 <em>dogs</em>：</p> <pre><code class="language-php">echo preg_replace("/cats/i", "dogs", "Cats are furry. I like cats."); </code></pre> <h6 id="注意-92">注意</h6> <p>正则表达式的主题是一个庞大的主题，已经有整本书写关于它。如果您需要进一步的信息，我建议查看 <a href="http://bit.ly/regex-wiki" target="_blank">维基百科条目</a> 或 <em><a href="https://www.regular-expressions.info" target="_blank">Regular-Expressions.info</a></em>。</p> <h1 id="重新显示-php-验证后的表单">重新显示 PHP 验证后的表单</h1> <p>好的，回到表单验证。到目前为止，我们已经创建了 HTML 文档 <em>validate.html</em>，它将通过到 PHP 程序 <em>adduser.php</em>，但只有当 JavaScript 验证字段或 JavaScript 禁用或不可用时。</p> <p>现在是时候创建 <em>adduser.php</em>，接收提交的表单，执行自己的验证，如果验证失败则再次向访客显示表单。示例 17-3 包含了您应该输入和保存的代码（或从配套网站下载）。</p> <h5 id="示例-17-3-adduserphp-程序">示例 17-3. adduser.php 程序</h5> <pre><code class="language-php"><?php // adduser.php `// The PHP code` `$forename` `=` `$surname` `=` `$username` `=` `$password` `=` `$age` `=` `$email` `=` `"``"``;` `if` `(``isset``(``$_POST``[``'forename'``]))` `$forename` `=` `fix_string``(``$_POST``[``'forename'``]);` `if` `(``isset``(``$_POST``[``'surname'``]))` `$surname` `=` `fix_string``(``$_POST``[``'surname'``]);` `if` `(``isset``(``$_POST``[``'username'``]))` `$username` `=` `fix_string``(``$_POST``[``'username'``]);` `if` `(``isset``(``$_POST``[``'password'``]))` `$password` `=` `fix_string``(``$_POST``[``'password'``]);` `if` `(``isset``(``$_POST``[``'age'``]))` `$age` `=` `fix_string``(``$_POST``[``'age'``]);` `if` `(``isset``(``$_POST``[``'email'``]))` `$email` `=` `fix_string``(``$_POST``[``'email'``]);` `$fail` `=` `validate_forename``(``$forename``);` `$fail` `.=` `validate_surname``(``$surname``);` `$fail` `.=` `validate_username``(``$username``);` `$fail` `.=` `validate_password``(``$password``);` `$fail` `.=` `validate_age``(``$age``);` `$fail` `.=` `validate_email``(``$email``);` `echo` `"``<!DOCTYPE html>``\n``<html><head><title>An Example Form</title>``"``;` `if` `(``$fail` `==` `"``"``)` `{` `echo` `"``</head><body>Form data successfully validated:` `$forename``,` `$surname``,` `$username``,` `$password``,` `$age``,` `$email``.</body></html>``"``;` `// This is where you would enter the posted fields into a database,` `// preferably using hash encryption for the password.` `exit``;` `}` `echo` `<<<_END` <!-- The HTML/JavaScript section --> <style> .signup { border: 1px solid #999999; font: normal 14px helvetica; color:#444444; } </style> <script> function validate(form) { fail = validateForename(form.forename.value) fail += validateSurname(form.surname.value) fail += validateUsername(form.username.value) fail += validatePassword(form.password.value) fail += validateAge(form.age.value) fail += validateEmail(form.email.value) if (fail == "") return true else { alert(fail); return false } } function validateForename(field) { return (field == "") ? "No Forename was entered.\\n" : "" } function validateSurname(field) { return (field == "") ? "No Surname was entered.\\n" : "" } function validateUsername(field) { if (field == "") return "No Username was entered.\\n" else if (field.length < 5) return "Usernames must be at least 5 characters.\\n" else if (/[^a-zA-Z0-9_-]/.test(field)) return "Only a-z, A-Z, 0-9, - and _ allowed in Usernames.\\n" return "" } function validatePassword(field) { if (field == "") return "No Password was entered.\\n" else if (field.length < 6) return "Passwords must be at least 6 characters.\\n" else if (!/[a-z]/.test(field) || ! /[A-Z]/.test(field) || !/[0-9]/.test(field)) return "Passwords require one each of a-z, A-Z and 0-9.\\n" return "" } function validateAge(field) { if (isNaN(field)) return "No Age was entered.\\n" else if (field < 18 || field > 110) return "Age must be between 18 and 110.\\n" return "" } function validateEmail(field) { if (field == "") return "No Email was entered.\\n" else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The Email address is invalid.\\n" return "" } </script> </head> <body> <table border="0" cellpadding="2" cellspacing="5" bgcolor="#eeeeee"> <th colspan="2" align="center">Signup Form</th> <tr><td colspan="2">Sorry, the following errors were found<br> in your form: <p><font color=red size=1><i>$fail</i></font></p> </td></tr> <form method="post" action="adduser.php" onSubmit="return validate(this)"> <tr><td>Forename</td> <td><input type="text" maxlength="32" name="forename" value="$forename"> </td></tr><tr><td>Surname</td> <td><input type="text" maxlength="32" name="surname" value="$surname"> </td></tr><tr><td>Username</td> <td><input type="text" maxlength="16" name="username" value="$username"> </td></tr><tr><td>Password</td> <td><input type="text" maxlength="12" name="password" value="$password"> </td></tr><tr><td>Age</td> <td><input type="text" maxlength="3" name="age" value="$age"> </td></tr><tr><td>Email</td> <td><input type="text" maxlength="64" name="email" value="$email"> </td></tr><tr><td colspan="2" align="center"><input type="submit" value="Signup"></td></tr> </form> </table> </body> </html> _END; `// The PHP functions` `function` `validate_forename``(``$field``)` `{` `return` `(``$field` `==` `"``"``)` `?` `"``No Forename was entered<br>``"``:` `"``"``;` `}` `function` `validate_surname``(``$field``)` `{` `return``(``$field` `==` `"``"``)` `?` `"``No Surname was entered<br>``"` `:` `"``"``;` `}` `function` `validate_username``(``$field``)` `{` `if` `(``$field` `==` `"``"``)` `return` `"``No Username was entered<br>``"``;` `else` `if` `(``strlen``(``$field``)` `<` `5``)` `return` `"``Usernames must be at least 5 characters<br>``"``;` `else` `if` `(``preg_match``(``"``/[^a-zA-Z0-9_-]/``"``,` `$field``))` `return` `"``Only letters, numbers, - and _ in usernames<br>``"``;` `return` `"``"``;` `}` `function` `validate_password``(``$field``)` `{` `if` `(``$field` `==` `"``"``)` `return` `"``No Password was entered<br>``"``;` `else` `if` `(``strlen``(``$field``)` `<` `6``)` `return` `"``Passwords must be at least 6 characters<br>``"``;` `else` `if` `(``!``preg_match``(``"``/[a-z]/``"``,` `$field``)` `||` `!``preg_match``(``"``/[A-Z]/``"``,` `$field``)` `||` `!``preg_match``(``"``/[0-9]/``"``,` `$field``))` `return` `"``Passwords require 1 each of a-z, A-Z and 0-9<br>``"``;` `return` `"``"``;` `}` `function` `validate_age``(``$field``)` `{` `if` `(``$field` `==` `"``"``)` `return` `"``No Age was entered<br>``"``;` `else` `if` `(``$field` `<` `18` `||` `$field` `>` `110``)` `return` `"``Age must be between 18 and 110<br>``"``;` `return` `"``"``;` `}` `function` `validate_email``(``$field``)` `{` `if` `(``$field` `==` `"``"``)` `return` `"``No Email was entered<br>``"``;` `else` `if` `(``!``((``strpos``(``$field``,` `"``.``"``)` `>` `0``)` `&&` `(``strpos``(``$field``,` `"``@``"``)` `>` `0``))` `||` `preg_match``(``"``/[^a-zA-Z0-9.@_-]/``"``,` `$field``))` `return` `"``The Email address is invalid<br>``"``;` `return` `"``"``;` `}` `function` `fix_string``(``$string``)` `{` `if` `(``get_magic_quotes_gpc``())` `$string` `=` `stripslashes``(``$string``);` `return` `htmlentities` `(``$string``);` `}` ?> </code></pre> <h6 id="注意-93">注意</h6> <p>在这个例子中，所有输入在使用前都经过了净化处理，甚至包括密码，因为密码可能包含用于格式化 HTML 的字符，将被转换为 HTML 实体。例如，<code>&</code> 将变成 <code>&amp;</code>，<code><</code> 将变成 <code>&lt;</code>，依此类推。如果将使用哈希函数存储加密密码，只要稍后检查输入的密码时以相同方式进行净化处理，这将不成问题，因此将可以比较相同的输入。</p> <p>在禁用 JavaScript 并且两个字段填写不正确的情况下提交表单的结果显示在 图 17-5 中。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1705.png" alt="PHP 验证失败后表单的呈现方式" loading="lazy"></p> <h6 id="图-17-5-php-验证失败后表单的呈现方式">图 17-5. PHP 验证失败后表单的呈现方式</h6> <p>我已经将这段代码的 PHP 部分（以及对 HTML 部分的更改）用粗体标记，以便你更清楚地看到这与示例 17-1 和 17-2 之间的区别。</p> <p>如果你浏览过这个示例，或者从 <a href="https://github.com/RobinNixon/lpmj6" target="_blank">书中的示例存储库</a> 中下载或者键入它，你会看到 PHP 代码几乎是 JavaScript 代码的克隆；相似的函数用于验证每个字段的正则表达式。</p> <p>但有几点需要注意。首先，<code>fix_string</code> 函数（就在最后）用于清理每个字段，防止任何代码注入尝试成功。</p> <p>此外，你会看到 HTML 来自于 示例 17-1，在 PHP 代码中通过 <code><<<_END..._END;</code> 结构重复显示表单，展示上次访问者输入的值。你只需简单地为每个 <code><input></code> 标签添加额外的 <code>value</code> 参数（例如 <code>value="$forename"</code>）即可做到这一点。强烈建议这样做，这样用户只需编辑先前输入的值，而无需再次在字段中输入这些值。</p> <h6 id="注意-94">注意</h6> <p>在现实世界中，你可能不会从 示例 17-1 这样的 HTML 表单开始。相反，你更可能直接编写 示例 17-3 中包含所有 HTML 的 PHP 程序。当然，对于第一次调用程序时需要进行一些微小的调整，以防止在所有字段为空时显示错误。此外，你可能还会将六个 JavaScript 函数放入它们自己的 <em>.js</em> 文件中进行单独包含，正如 “使用单独的 JavaScript 文件” 中所述。</p> <p>现在你已经看到如何将 PHP、HTML 和 JavaScript 结合在一起，下一章将介绍<em>Ajax</em>（异步 JavaScript 和 XML），它利用 JavaScript 在后台向服务器发出调用，无缝更新网页的部分内容，而无需重新提交整个页面到服务器。</p> <h1 id="问题-16">问题</h1> <ol> <li> <p>在提交之前，你可以使用什么 JavaScript 方法来发送表单进行验证？</p> </li> <li> <p>用于将字符串与正则表达式匹配的 JavaScript 方法是什么？</p> </li> <li> <p>编写一个正则表达式来匹配任何不符合正则表达式语法定义的单词字符。</p> </li> <li> <p>编写一个正则表达式来匹配单词<em>fox</em>或<em>fix</em>中的任意一个。</p> </li> <li> <p>编写一个正则表达式来匹配任意单词后面紧跟任何非单词字符。</p> </li> <li> <p>使用正则表达式，编写一个 JavaScript 函数来测试字符串<code>The quick brown fox</code>中是否存在单词<em>fox</em>。</p> </li> <li> <p>使用正则表达式，编写一个 PHP 函数，在字符串<code>The cow jumps over the moon</code>中将所有出现的单词<em>the</em>替换为<em>my</em>。</p> </li> <li> <p>哪个 HTML 属性用于在表单字段中预先填充值？</p> </li> </ol> <p>参见《“第十七章答案”》（app01_split_016.xhtml#chapter_17_answers）附录 A 中的解答。</p> <h1 id="第十八章使用异步通信">第十八章：使用异步通信</h1> <p><em>Ajax</em> 这个术语首次在 2005 年被创造出来。它代表 <em>Asynchronous JavaScript and XML</em>，简而言之，就是使用内置在 JavaScript 中的一组方法在浏览器和服务器之间后台传输数据。这个术语现在大多已被放弃，转而简单地讨论异步通信。</p> <p>这项技术的一个绝佳例子是谷歌地图（见 图 18-1），在需要时从服务器下载地图的新部分，而无需刷新页面。</p> <p>使用异步通信不仅大幅减少了需要来回发送的数据量，而且使网页能够无缝动态地运行，使其更像是独立的应用程序。结果是大大改进的用户界面和更好的响应能力。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1801.png" alt="谷歌地图是 Ajax 的一个绝佳例子" loading="lazy"></p> <h6 id="图-18-1-谷歌地图是异步通信的一个优秀例子">图 18-1. 谷歌地图是异步通信的一个优秀例子</h6> <h1 id="什么是异步通信">什么是异步通信？</h1> <p>当今使用的异步通信始于 1999 年发布的 Internet Explorer 5，引入了一个新的 ActiveX 对象，<code>XMLHttpRequest</code>。ActiveX 是微软的技术，用于签名插件，安装额外的软件到您的计算机上。其他浏览器开发者随后效仿，但是他们都将这个功能作为 JavaScript 解释器的本地部分实现，而不是使用 ActiveX。</p> <p>然而，早在此之前，一种早期形式的技术已经出现，它在页面上使用隐藏框架与服务器在后台交互。聊天室是早期的采用者，使用它来轮询并显示新的消息帖子，而不需要页面重新加载。</p> <p>所以，让我们看看如何通过 JavaScript 实现异步通信。</p> <h1 id="使用-xmlhttprequest">使用 XMLHttpRequest</h1> <p>在过去，由于各种浏览器之间的不同实现，特别是在不同版本的 Microsoft Internet Explorer 之间，制作 Ajax 调用是一件真正的痛苦。幸运的是，如今情况大为改善，只需简单的 <code>XMLHttpRequest</code> 对象即可统一处理。</p> <p>例如，要进行 GET 请求，您可以使用以下代码：</p> <pre><code class="language-php">let XHR = new XMLHttpRequest() XHR.open("`GET`", "resource.info", true) XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded") XHR.send() </code></pre> <p>或者，对于 POST 请求，只需将 <code>GET</code> 替换为 <code>POST</code>；就是这么简单。</p> <h2 id="您的第一个异步程序">您的第一个异步程序</h2> <p>输入并保存代码到 示例 18-1 中，文件名为 <em>urlpost.html</em>，但不要立即加载到浏览器中。</p> <h5 id="示例-18-1-urlposthtml">示例 18-1. urlpost.html</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <!-- urlpost.html -->   <head>     <title>Asynchronous Communication Example</title>   </head>   <body style='text-align:center'>     <h1>Loading a web page into a DIV</h1>     <div id='info'>This sentence will be replaced</div>     <script>       let XHR = new XMLHttpRequest()       XHR.open("POST", "http://127.0.0.1/18/urlpost.php", true)       XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")       XHR.send("url=news.com")       XHR.onreadystatechange = function()       {         if (this.readyState == 4 && this.status == 200)         {           document.getElementById("info").innerHTML = this.responseText         }       }           </script>   </body> </html> </code></pre> <p>让我们逐步浏览这份文档，看看它做了什么，从第一行开始，简单地设置了一个 HTML 文档并显示了一个标题。接下来的一行创建了一个带有 ID <code>info</code> 的 <code><div></code>，其中包含文本 <code>This sentence will be replaced</code>。稍后，调用返回的文本将被插入到这里。</p> <p>接下来，创建一个名为 <code>XHR</code> 的新 <code>XMLHttpRequest</code> 对象。使用它，通过调用 <code>XHR.open</code> 打开要加载的资源。在本例中，为了避免现代浏览器中的跨域 Ajax 问题，选择了 <code>http://127.0.0.1</code> 的本地主机 IP 地址，然后是章节文件夹 <code>18</code>，接着是 PHP 程序 <code>urlpost.php</code>，我们马上就会介绍到。</p> <h6 id="注意-95">注意</h6> <p>如果您使用 AMPPS（或类似的 WAMP、LAMP 或 MAMP）设置开发服务器在第二章中下载示例文件从<a href="https://github.com/RobinNixon/lpmj6" target="_blank">GitHub</a>并将它们保存在 web 服务器的文档根目录中（如该章节中所述），则第十八章文件夹将在正确的位置使此代码能够正常工作。如果您的设置有任何不同部分，或者在使用您选择的域名的开发服务器上运行此代码，则必须相应地更改此代码中的这些值。</p> <p>指定要加载的资源后，调用 <code>XHR.setRequestHeader</code>，传递要发送到资源服务器的必需头部，并在调用 <code>XHR.send</code> 中发送要发布的值。在这种情况下，是主页面在 <em>news.com</em>。</p> <h3 id="readystate-属性"><code>readyState</code> 属性</h3> <p>现在我们进入异步调用的核心，所有这些都依赖于 <code>readyState</code> 属性。这使得浏览器可以继续接受用户输入和更改屏幕，而我们的程序设置 <code>onreadystatechange</code> 属性，每次 <code>readyState</code> 改变时调用我们选择的函数。在本例中，使用了一个无名（或匿名）内联函数，而不是一个单独命名的函数。这种类型的函数被称为<em>回调</em>函数，因为每次 <code>readyState</code> 改变时都会调用它。</p> <p>使用内联匿名函数设置回调函数的语法如下：</p> <pre><code class="language-php">XHR.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // do something } } </code></pre> <p>如果您希望使用单独命名的函数，语法略有不同：</p> <pre><code class="language-php">XHR.onreadystatechange = asyncCallback function asyncCallback() { if (this.readyState == 4 && this.status == 200) { // do something } } </code></pre> <p>事实上，<code>readyState</code> 可以有五个值，但我们只关心一个，即值为 <code>4</code>，表示调用已完成。因此，每次调用新函数时，它会在 <code>readyState</code> 的值为 <code>4</code> 之前不做任何操作。当我们的函数检测到该值时，接下来会检查调用的 <code>status</code>，确保其值为 <code>200</code>，这表示调用成功。</p> <h6 id="注意-96">注意</h6> <p>您会注意到，所有这些对象属性都是使用 <code>this.readyState</code>、<code>this.status</code> 等引用的，而不是对象的当前名称 <code>XHR</code>，如 <code>XHR.readyState</code> 或 <code>XHR.status</code>。这是为了您可以轻松复制粘贴代码，并且它能在任何对象名称上工作，因为 <code>this</code> 关键字始终引用当前对象。</p> <p>因此，确认 <code>readyState</code> 为 <code>4</code> 和 <code>status</code> 为 <code>200</code> 后，我们将 <code>responseText</code> 中的值放入 <code><div></code> 的内部 HTML 中，该 <code><div></code> 的 <code>id</code> 为 <code>info</code>：</p> <pre><code class="language-php">document.getElementById("info").innerHTML = this.responseText </code></pre> <p>在这一行中，通过<code>getElementById</code>方法引用了<code>info</code>元素，然后将其<code>innerHTML</code>属性赋值为调用返回的值。效果是网页的这个元素发生了变化，而其他一切保持不变。</p> <h3 id="异步过程的服务器端">异步过程的服务器端</h3> <p>现在我们来看看等式的 PHP 部分，你可以在例子 18-2 中看到它。输入这段代码并将其保存为<em>urlpost.php</em>。</p> <h5 id="例子-18-2-urlpostphp">例子 18-2. urlpost.php</h5> <pre><code class="language-php"><?php // urlpost.php if (isset($_POST['url'])) { echo file_get_contents('http://' . SanitizeString($_POST['url'])); } function SanitizeString($var) { $var = strip_tags($var); $var = htmlentities($var); return stripslashes($var); } ?> </code></pre> <p>正如你所看到的，这很简短且简洁，并且还使用了非常重要的<code>SanitizeString</code>函数，应该对所有发布的数据进行这样的操作。在这种情况下，未经过清理的数据可能会导致用户插入 JavaScript 并对你的代码获得优势。</p> <p>这个程序使用<code>file_get_contents</code> PHP 函数加载了通过变量<code>$_POST['url']</code>提供的 URL 的网页内容。<code>file_get_contents</code>函数非常灵活，可以从本地或远程服务器加载文件或网页的整个内容；它甚至考虑了移动页面和其他重定向。</p> <p>当你输入完程序后，可以在浏览器中调用<em>urlpost.html</em>，几秒钟后，你应该会看到<em>news.com</em>首页的内容加载到我们为此目的创建的<code><div></code>中。</p> <h6 id="注意-97">注意</h6> <p>跨域安全性使得使用 Ajax 比以前更加困难，因为你必须对加载文件的方式非常准确和清晰。例如，在本地开发服务器 localhost 上的这个例子中，你需要使用其 IP 地址来引用文件。因此，例如，如果你将示例文件保存在 AMPPS 服务器的文档根目录中，如第二章中所述，则所有文件将位于名为<em>18</em>的子文件夹中。</p> <p>要测试程序，请在浏览器中输入以下内容：</p> <pre><code class="language-php">http://127.0.0.1/18/urlpost.html </code></pre> <p>它不会像直接加载网页那样快，因为它转移两次——一次到服务器，再从服务器到你的浏览器——但结果应该看起来像图 18-2。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1802.png" alt="" loading="lazy"></p> <h6 id="图-18-2-newscom-的首页">图 18-2. news.com 的首页</h6> <p>我们不仅成功地进行了异步调用，并在 JavaScript 中返回了响应，而且还利用了 PHP 的能力来合并一个完全不相关的网络对象。顺便说一句，如果我们试图找到一种不借助 PHP 服务器端模块直接异步获取这个网页的方法，我们是不会成功的，因为有其他安全阻止跨域异步通信。因此，这个例子还展示了一个实际问题的方便解决方案。</p> <h2 id="使用-get-而不是-post">使用 GET 而不是 POST</h2> <p>就像当你从表单提交任何数据时，你可以选择以 GET 请求的形式提交你的数据，如果这样做，你将节省几行代码。然而，有一个缺点：一些浏览器可能会缓存 GET 请求，而 POST 请求永远不会被缓存。你不希望缓存请求，因为浏览器会直接重新显示上次获取的内容，而不是从服务器获取新的输入。解决此问题的方法是使用一个方法来添加一个随机参数到每个请求中，确保每个请求的 URL 都是唯一的。</p> <p>示例 18-3 展示了如何通过 GET 请求实现与示例 18-1 相同的结果。</p> <h5 id="示例-18-3-urlgethtml">示例 18-3. urlget.html</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <!-- urlget.html -->   <head>     <title>Asynchronous Communication Example</title>   </head>   <body style='text-align:center'>     <h1>Loading a web page into a DIV</h1>     <div id='info'>This sentence will be replaced</div>     <script>       `let` `nocache` `=` `"&nocache="` `+` `Math``.``random``(``)` `*` `1000000`       let XHR     = new XMLHttpRequest()       `XHR``.``open``(``"GET"``,` `"http://127.0.0.1/18/urlget.php?url=news.com"` `+` `nocache``,` `true``)`       `XHR``.``send``(``)`       XHR.onreadystatechange = function()       {         if (this.readyState == 4 && this.status == 200)         {           document.getElementById("info").innerHTML = this.responseText         }       }           </script>   </body> </html> </code></pre> <p>需要注意两个文档之间的差异已用粗体突出，并描述如下：</p> <ul> <li> <p>对于 GET 请求，不需要发送头部信息。</p> </li> <li> <p>我们使用 GET 请求调用<code>open</code>方法，提供一个字符串构成的 URL，该字符串由<code>?</code>符号后跟参数/值对<code>url=news.com</code>组成。</p> </li> <li> <p>我们使用<code>&</code>符号提供第二个参数/值对，然后将参数<code>nocache</code>的值设置为 0 到 100 万之间的随机值。这样做是为了确保每个请求的 URL 都是不同的，因此不会被缓存。</p> </li> <li> <p>调用<code>send</code>现在没有参数，因为没有通过<code>POST</code>请求传递任何内容需要它。</p> </li> </ul> <p>为了配合这个新文档，PHP 程序必须修改以响应 GET 请求，就像示例 18-4 中的<em>urlget.php</em>一样。</p> <h5 id="示例-18-4-urlgetphp">示例 18-4. urlget.php</h5> <pre><code class="language-php"><?php if (isset(`$_GET`['url'])) { echo file_get_contents("http://".sanitizeString(`$_GET`['url'])); } function sanitizeString($var) { $var = strip_tags($var); $var = htmlentities($var); return stripslashes($var); } ?> </code></pre> <p>这与示例 18-2 唯一的不同之处在于，将对<code>$_POST</code>的引用替换为<code>$_GET</code>。在浏览器中加载<em>urlget.html</em>的最终结果与加载<em>urlpost.html</em>完全相同。</p> <p>要测试程序的这个修订版本，请在浏览器中输入以下内容，你应该看到与之前完全相同的结果，只是通过 GET 而不是 POST 请求加载：</p> <pre><code class="language-php">http://127.0.0.1/18/urlget.html </code></pre> <h2 id="发送-xml-请求">发送 XML 请求</h2> <p>虽然我们创建的对象称为<code>XMLHttpRequest</code>对象，但我们迄今为止并未使用 XML。正如你所见，我们已经能够异步请求整个 HTML 文档，但我们同样可以请求文本页面、字符串或数字，甚至是电子表格数据。</p> <p>因此，让我们修改前面的示例文档和 PHP 程序，以获取一些 XML 数据。为此，请先查看 PHP 程序<em>xmlget.php</em>，如示例 18-5 所示。</p> <h5 id="示例-18-5-xmlgetphp">示例 18-5. xmlget.php</h5> <pre><code class="language-php"><?php if (isset($_GET['url'])) { `header``(``'Content-Type: text/xml'``);` echo file_get_contents("http://".sanitizeString($_GET['url'])); } function sanitizeString($var) { $var = strip_tags($var); $var = htmlentities($var); return stripslashes($var); } ?> </code></pre> <p>这个程序已经略微修改（以粗体突出显示），在返回获取的文档之前输出正确的 XML 头。这里没有进行任何检查，因为假定调用代码将请求一个实际的 XML 文档。</p> <p>现在转到 HTML 文档<em>xmlget.html</em>，如示例 18-6 所示。</p> <h5 id="示例-18-6-xmlgethtml">示例 18-6. xmlget.html</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <!-- xmlget.html -->   <head>     <title>Asynchronous Communication Example</title>   </head>   <body>     <h1>Loading XML data into a DIV</h1>     <div id='info'>This sentence will be replaced</div>     <script>       `let out     = ''` let nocache = "&nocache=" + Math.random() * 1000000 `let url     = "rss.news.yahoo.com/rss/topstories"` let XHR     = new XMLHttpRequest()       XHR.open("POST", "http://127.0.0.1/18/xmlget.php?url=" + url + nocache, true)       XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")       XHR.send()       XHR.onreadystatechange = function()       {         if (this.readyState == 4 && this.status == 200)         {`let titles = this.responseXML.getElementsByTagName('title')            for (let j = 0 ; j` `< titles.length` `;` `+``+``j``)`            `{`              `o``u``t` `+``=` `t``i``t``l``e``s``[``j``]``.``c``h``i``l``d``N``o``d``e``s``[``0``]``.``n``o``d``e``V``a``l``u``e` `+` `'``<``b``r``>``'            }            document.getElementById('info').innerHTML = out `}       } </script>   </body> </html> </code></pre> <p>再次，差异已经用粗体标出。正如你所见，这段代码与以前的版本基本相似，唯一的不同是现在请求的 URL，<em>rss.news.yahoo.com/rss/topstories</em>，包含一个 XML 文档，<em>Yahoo! News Top Stories</em> 订阅。</p> <p>另一个重要变化是使用 <code>responseXML</code> 属性替代了 <code>responseText</code> 属性。每当服务器返回 XML 数据时，<code>responseXML</code> 将包含返回的 XML。</p> <p>然而，<code>responseXML</code>并非简单地包含一个 XML 文本字符串：实际上它是一个完整的 XML 文档对象，我们可以使用 DOM 树的方法和属性来检查和解析它。这意味着它是可访问的，例如，可以通过 JavaScript 的 <code>getElementsByTagName</code> 方法访问它。</p> <h3 id="关于-xml">关于 XML</h3> <p>一个 XML 文档通常采用如 Example 18-7 中所示的 RSS 订阅的形式。然而，XML 的美妙之处在于我们可以将这种类型的结构存储在 DOM 树中（参见 Figure 18-3）中，以便快速搜索：</p> <pre><code class="language-php"><?xml version="1.0" encoding="UTF-8"?> <rss version="2.0">     <channel>         <title>RSS Feed</title>         <link>http://website.com</link>         <description>website.com's RSS Feed</description>         <pubDate>Mon, 10 May 2027 00:00:00 GMT</pubDate>         <item>             <title>Headline</title>             <guid>http://website.com/headline</guid>             <description>This is a headline</description>         </item>         <item>             <title>Headline 2</title>             <guid>http://website.com/headline2</guid>             <description>The 2nd headline</description>         </item>     </channel> </rss> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1803.png" alt="Example 17-8 的 DOM 树" loading="lazy"></p> <h6 id="图-18-3-example18-7-的-dom-树">图 18-3. Example 18-7 的 DOM 树</h6> <p>然后，使用 <code>getElementsByTagName</code> 方法，我们可以快速提取与各种标签相关联的值，而无需进行大量的字符串搜索。这正是我们在 Example 18-6 中所做的，其中发出了以下命令：</p> <pre><code class="language-php">let titles = this.responseXML.getElementsByTagName('title') </code></pre> <p>这个单一命令的效果是将所有 <code><title></code> 元素的值放入数组 <code>titles</code> 中。然后，可以通过以下表达式轻松提取它们（其中 <code>j</code> 已经被赋值为表示要访问的标题的整数）：</p> <pre><code class="language-php">titles[j].childNodes[0].nodeValue </code></pre> <p>所有标题然后都附加到字符串变量 <code>out</code> 中，一旦它们全部被处理，结果将被插入到文档开头的空 <code><div></code> 中。</p> <p>总结一下，每个实体如 <code>title</code> 都是一个节点，因此例如标题文本被视为标题内的一个节点。但即使获取了子节点，你还必须要求它作为文本，这就是 <code>.nodeValue</code> 的目的。此外，与所有表单数据一样，请记住，在请求 XML 数据时可以使用 POST 或 GET 方法；选择不会对结果造成太大差异。</p> <p>要测试这个 XML 程序，输入以下内容到你的浏览器中，你应该看到类似 Figure 18-4 的东西：</p> <pre><code class="language-php">http://127.0.0.1/18/xmlget.html </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1804.png" alt="" loading="lazy"></p> <h6 id="图-18-4-异步获取-yahoo-xml-新闻订阅">图 18-4. 异步获取 Yahoo! XML 新闻订阅</h6> <h3 id="为什么使用-xml">为什么使用 XML？</h3> <p>你可能会问为什么要使用 XML，除了获取如 RSS 订阅之类的 XML 文档。嗯，简单的答案是你不必使用，但如果你希望将结构化数据传递回应用程序，传递一个简单的、无组织的文本混乱可能需要在 JavaScript 中进行复杂的处理。</p> <p>相反，您可以创建一个 XML 文档，并将其传递回调用函数，该函数将自动将其放入 DOM 树中，就像您现在熟悉的 HTML DOM 对象一样轻松访问。</p> <p>现在，程序员更倾向于使用 <a href="http://json.org" target="_blank">JavaScript 对象表示法（JSON）作为其首选的数据交换格式</a>，因为它是 JavaScript 的一个简单子集。</p> <h2 id="使用框架进行异步通信">使用框架进行异步通信</h2> <p>现在您知道如何编写自己的异步程序，您可能想调查一些免费框架，这些框架可以使其更加轻松，并提供许多更高级的功能。特别是，我建议您查看非常流行的 <a href="http://jquery.com" target="_blank">jQuery</a> 或者可能是增长最快的框架 <a href="http://reactjs.org" target="_blank">React</a>。不过，在接下来的章节中，我们将讨论如何使用 CSS 为您的网站应用样式。</p> <h1 id="问题-17">问题</h1> <ol> <li> <p>在 Web 服务器和 JavaScript 客户端之间进行异步通信时必须创建哪个对象？</p> </li> <li> <p>如何判断异步调用何时完成？</p> </li> <li> <p>如何知道异步调用是否成功完成？</p> </li> <li> <p>哪个 <code>XMLHttpRequest</code> 对象属性返回异步调用的文本响应？</p> </li> <li> <p>哪个 <code>XMLHttpRequest</code> 对象属性返回异步调用的 XML 响应？</p> </li> <li> <p>如何指定回调函数以处理异步响应？</p> </li> <li> <p>哪个 <code>XMLHttpRequest</code> 方法用于启动异步请求？</p> </li> <li> <p>异步 GET 和 POST 请求的主要区别是什么？</p> </li> </ol> <p>请参阅 “第十八章答案”，以获取这些问题的答案。</p> <h1 id="第十九章css-简介">第十九章：CSS 简介</h1> <p>使用层叠样式表（CSS），你可以对网页应用样式，使其看起来完全符合你的期望。这是因为 CSS 与文档对象模型（DOM）相关联，我在第十四章中有所解释。</p> <p>借助 CSS 及其与 DOM 的集成，你可以快速轻松地重新设计任何元素。例如，如果你不喜欢<code><h1></code>、<code><h2></code>和其他标题标签的默认外观，可以分配新的样式以覆盖用于设置字体系列和大小，以及是否应设置粗体或斜体等许多其他属性的默认设置。</p> <p>你可以通过在页面头部的<code><head></code>和<code></head></code>标签之间插入所需的语句来为网页添加样式。所以，要更改<code><h1></code>标签的样式，你可以使用以下代码（稍后我将解释语法）：</p> <pre><code class="language-php"><style> h1 { color:red; font-size:3em; font-family:Arial; } </style> </code></pre> <p>在 HTML 页面中，这可能看起来像示例 19-1（见图 19-1），与本章中的所有示例一样，使用标准的 HTML5<code>DOCTYPE</code>声明。</p> <h5 id="示例-19-1-一个简单的-html-页面">示例 19-1. 一个简单的 HTML 页面</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Hello World</title> <style> h1 { color:red; font-size:3em; font-family:Arial; } </style> </head> <body> <h1>Hello there</h1> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1901.png" alt="在插图中显示原始样式的标签样式" loading="lazy"></p> <h6 id="图-19-1-在插图中显示原始样式的标签样式">图 19-1. 在插图中显示原始样式的标签样式</h6> <h1 id="导入样式表">导入样式表</h1> <p>当你希望为整个站点设置样式，而不仅仅是单个页面时，更好的管理样式表的方法是将它们完全移出网页并放入单独的文件中，然后导入你需要的样式表。这样可以让你为不同的布局（如网页和打印）应用不同的样式表，而不必更改 HTML。</p> <p>有几种不同的方法可以实现这一点。首先是使用 CSS 的<code>@import</code>指令，就像这样：</p> <pre><code class="language-php"><style> @import url('styles.css'); </style> </code></pre> <p>这个语句告诉浏览器获取一个名为<em>styles.css</em>的样式表。<code>@import</code>命令非常灵活，因为你可以将它放在一个样式表中，所以样式表可以引入其他样式表，依此类推。只要确保你的任何外部样式表中没有<code><style></code>或<code></style></code>标签，否则它们将不起作用。</p> <h2 id="从-html-中导入-css">从 HTML 中导入 CSS</h2> <p>你也可以使用 HTML 的<code><link></code>标签包含样式表，就像这样：</p> <pre><code class="language-php"><link rel='stylesheet' href='styles.css'> </code></pre> <p>这与<code>@import</code>指令具有完全相同的效果，唯一的区别是<code><link></code>是一个仅限于 HTML 的标签，不是有效的样式指令，因此无法从一个样式表中使用它来引入另一个样式表，也无法放置在一对<code><style>...</style></code>标签内。</p> <p>就像你可以在 CSS 中使用多个<code>@import</code>指令来包含多个外部样式表一样，你也可以在 HTML 中使用尽可能多的<code><link></code>元素。</p> <h2 id="嵌入式样式设置">嵌入式样式设置</h2> <p>当然，你也可以在当前页面的 HTML 中直接插入样式声明来逐个设置或覆盖某些样式，例如这样（结果是标签内部的斜体蓝色文本）：</p> <pre><code class="language-php"><div style='font-style:italic; color:blue;'>Hello there</div> </code></pre> <p>但这应该仅在非常特殊的情况下使用，因为它打破了内容和表现的分离，因此维护起来非常麻烦。</p> <h1 id="使用-id">使用 ID</h1> <p>在 HTML 中，更好的方法是为元素分配一个 ID，就像这样：</p> <pre><code class="language-php"><div id='welcome'>Hello there</div> </code></pre> <p>这表示具有 ID 为<code>welcome</code>的<code><div></code>元素的内容应用在定义为<code>welcome</code>样式设置中的样式上。这个匹配的 CSS 语句可能如下所示：</p> <pre><code class="language-php">#welcome { font-style:italic; color:blue; } </code></pre> <h6 id="注意-98">注意</h6> <p>注意使用<code>#</code>符号，指定只有名为<code>welcome</code>的 ID 的元素才会应用此样式。</p> <h1 id="使用类">使用类</h1> <p><code>id</code>元素的值在网页中必须是唯一的，因为这是它作为标识符的依据。如果你想将相同的样式应用于多个元素，你不必为每个元素分配不同的 ID，因为你可以指定一个类来管理它们，就像这样：</p> <pre><code class="language-php"><div class='welcome'>Hello</div> </code></pre> <p>这表示这个元素的内容（以及使用该类的任何其他元素）应用了在<code>welcome</code>类中定义的样式。一旦应用了类，你可以使用以下规则，无论是在页面头部还是在外部样式表中，来设置类的样式：</p> <pre><code class="language-php">.welcome { font-style:italic; color:blue; } </code></pre> <p>而不是<code>#</code>符号，该符号保留用于 ID，类的语句则以<code>.</code>（句点）开头。</p> <h1 id="使用分号">使用分号</h1> <p>在 CSS 中，分号用于分隔同一行上的多个 CSS 语句。但是，如果规则中只有一个语句（或者在 HTML 标签内的内联样式设置中），则可以省略分号，就像在一组中的最后一个语句那样。</p> <p>然而，为了避免难以发现的 CSS 错误，你可能更喜欢在每个 CSS 设置后始终使用分号。这样，你可以复制和粘贴它们，并且可以修改属性，而不必担心在不必要的地方删除分号或者在必要的地方添加分号。</p> <h1 id="css-规则">CSS 规则</h1> <p>CSS 规则中的每个语句都以<em>选择器</em>开始，这是将应用规则的项目。例如，在这个赋值中，<code>h1</code>是被赋予比默认字体大小大 240%的选择器：</p> <pre><code class="language-php">h1 { font-size:240%; } </code></pre> <p><code>font-size</code>是一个<em>属性</em>。为选择器的<code>font-size</code>属性提供<code>240%</code>的值确保了所有<code><h1>...</h1></code>标签对的内容将以比默认大小大 240%的字体大小显示。所有规则中的更改都必须在跟随选择器的<code>{</code>和<code>}</code>符号内进行。在<code>font-size:240%;</code>中，冒号<code>:</code>前面的部分是属性，而其余部分是应用于它的值。</p> <p>最后，使用一个<code>;</code>（分号）来结束语句。在这种情况下，因为<code>font-size</code>是规则中的最后一个属性，所以分号是不必要的（但是如果后面还有其他赋值，则是必需的）。</p> <h2 id="多重赋值">多重赋值</h2> <p>可以通过几种不同的方式创建多个样式声明。首先，可以将它们连接在同一行上，就像这样：</p> <pre><code class="language-php">h1 { font-size:240%; color:blue; } </code></pre> <p>这添加了第二个分配，将所有<code><h1></code>标题的颜色更改为蓝色。您还可以像下面这样每行放置一个分配：</p> <pre><code class="language-php">h1 { font-size:240%; color:blue; } </code></pre> <p>或者您可以稍微分开分配，使它们在冒号下面彼此对齐成列，像这样，这可能是现在首选的方法：</p> <pre><code class="language-php">h1 { font-size:240%; color :blue; } </code></pre> <p>这样，您可以轻松地看到每个新规则集从哪里开始，因为选择器总是位于第一列，后面跟随的分配都整齐地对齐，所有属性值从相同的水平偏移开始。在上述示例中，最后的分号是不必要的，但是如果您想把这些语句组合成一行，只需将所有分号放在正确的位置即可。</p> <p>您可以指定相同的选择器任意次数，CSS 将合并所有属性。因此，前面的示例也可以指定如下：</p> <pre><code class="language-php">h1 { font-size: 240%; } h1 { color : blue; } </code></pre> <h6 id="注意-99">注意</h6> <p>在布局 CSS 时没有一种正确或错误的方式，但我建议您至少尝试使每个 CSS 块在视觉布局上保持一致，以便其他人能够一目了然。</p> <p>如果您指定了相同的选择器和属性两次会怎么样？</p> <pre><code class="language-php">h1 { color : red; } h1 { color : blue; } </code></pre> <p>指定相同选择器的相同属性，最后指定的值将生效——在这种情况下是蓝色。在单个文件中，对同一选择器重复相同属性是没有意义的，但在现实的网页中，当应用多个样式表时经常发生这种重复。这是 CSS 的一个宝贵特性，也是“层叠”一词的来源之一。</p> <h2 id="使用注释-2">使用注释</h2> <p>对您的 CSS 规则进行注释是一个好主意，即使只描述主要的语句组，而不是所有或大多数语句。可以通过在<code>/*...*/</code>标签对之间放置注释来实现，如下所示：</p> <pre><code class="language-php">/* This is a CSS comment */ </code></pre> <p>您可以扩展注释到多行，如下所示：</p> <pre><code class="language-php">/* A multi- line comment */ </code></pre> <h6 id="注意-100">注意</h6> <p>使用多行注释时，请注意不能在其中嵌套单行（或其他任何）注释。这样做可能会导致不可预测的错误。</p> <h1 id="样式类型">样式类型</h1> <p>样式类型有多种，从浏览器设置的默认样式（以及您可能在浏览器中应用的用户样式，用于覆盖其默认样式），到内联或嵌入式样式，再到外部样式表。每种类型定义的样式具有从低到高的优先级层次。</p> <p>我们将更详细地讨论层叠样式表中的“层叠”部分，详细解释见“CSS 层叠”。但在深入细节之前，先简要介绍一下会有所帮助。</p> <h2 id="默认样式">默认样式</h2> <p>网页浏览器应用的样式优先级最低。这些样式是作为备用样式创建的，用于在网页没有任何样式时使用，旨在提供一组通用的样式，以在大多数情况下显示得相当不错。</p> <p>在 CSS 出现之前，这些是文档中唯一的样式，并且只有少数样式可以由网页更改（如字体、颜色和一些元素大小的参数）。</p> <h2 id="用户样式">用户样式</h2> <p>用户样式具有下一个最高的优先级。它们被大多数现代浏览器支持，但每个浏览器的实现方式都有所不同，因此如今为你创建自己喜欢的浏览样式最简单的方式是使用诸如 <a href="http://userstyles.org" target="_blank">Stylish</a> 的插件。</p> <p>如果你想为浏览创建自己的默认样式，Stylish 是一个方便的工具。只需搜索“stylish 扩展”来在你的浏览器中安装它，如 图 19-2 所示。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1902.png" alt="" loading="lazy"></p> <h6 id="图19-2-stylish-是一种你可以根据自己的喜好为网页添加样式的方式">图 19-2. Stylish 是一种你可以根据自己的喜好为网页添加样式的方式</h6> <p>如果已分配了用户样式，并且已定义为浏览器默认值，则它将覆盖浏览器的默认设置。任何未在用户样式表中定义的样式将保留它们在浏览器中设置的默认值。</p> <h2 id="外部样式表">外部样式表</h2> <p>下一种类型的样式是外部样式表中定义的。这些设置会覆盖用户或浏览器分配的任何样式。外部样式表是创建你的样式的推荐方式，因为你可以为不同的用途创建不同的样式表，比如通用的网页使用、在较小屏幕上的移动浏览器查看、打印等等。当你创建网页时，只需为每种媒体应用需要的样式表即可。</p> <h2 id="内部样式">内部样式</h2> <p>接下来是内部样式，你可以在 <code><style>...</style></code> 标签内创建，并且优先于之前所有的样式类型。不过，这时候你开始打破样式与内容之间的分离，因为同时加载的任何外部样式表的优先级会更低。</p> <h2 id="内联样式">内联样式</h2> <p>最后，内联样式是直接将属性分配给元素的方式。它们拥有任何样式类型中的最高优先级，并且像这样使用：</p> <pre><code class="language-php"><a href="http://google.com" style="color:green;">Visit Google</a> </code></pre> <p>在这个例子中，指定的链接将显示为绿色，而不管任何默认或其他样式表应用的颜色设置，无论是直接应用于此链接还是通用应用于所有链接。</p> <h6 id="注意-101">注意</h6> <p>当你使用这种类型的样式时，你正在打破布局与内容之间的分离；因此，建议仅在有很好的理由时这样做。</p> <h1 id="css-选择器">CSS 选择器</h1> <p>访问一个或多个元素的方法称为<em>选择</em>，执行此操作的 CSS 规则的一部分称为<em>选择器</em>。正如你所预期的那样，选择器有多种变体。</p> <h2 id="类型选择器">类型选择器</h2> <p>类型选择器用于 HTML 元素类型，如 <code><p></code> 或 <code><i></code>。例如，以下规则将确保所有 <code><p>...</p></code> 标签内的文本完全右对齐：</p> <pre><code class="language-php">p { text-align:justify; } </code></pre> <h2 id="后代选择器">后代选择器</h2> <p>后代选择器允许你将样式应用到包含在其他元素内的元素上。例如，以下规则将所有<code><p>...</p></code>标签中的<code><b>...</b></code>标签内的文本设为红色，但前提是这些标签出现在<code><p>...</p></code>标签内（像这样：<code><p><b>Hello</b> there</p></code>）：</p> <pre><code class="language-php">p b { color:red; } </code></pre> <p>后代选择器可以无限嵌套，所以下面的规则也是有效的，它将无序列表中列表元素内的粗体文本设为蓝色：</p> <pre><code class="language-php">ul li b { color:blue; } </code></pre> <p>作为一个实际的例子，假设你想要在嵌套在另一个有序列表中的有序列表中使用不同的编号系统。你可以通过以下方式实现，它将用小写字母（从<code>a</code>开始）替换默认的数字编号（从<code>1</code>开始）：</p> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <style> `ol` `ol` `{` `list-style-type``:``lower-alpha``;` `}` </style> </head> <body> <ol> <li>One</li> <li>Two</li> <li>Three <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> </li> </ol> </body> </html> </code></pre> <p>将这段 HTML 加载到网络浏览器中的结果如下，你可以看到第二个元素列表显示不同：</p> <pre><code class="language-php">1\. One 2\. Two 3\. Three a. One b. Two c. Three </code></pre> <h2 id="子选择器">子选择器</h2> <p>子选择器类似于后代选择器，但在应用样式时更为严格，仅选择直接是另一个元素的子元素的那些元素。例如，以下代码使用后代选择器，将段落内的任何粗体文本都改为红色，即使粗体文本本身位于斜体文本部分中（像这样<code><p><i><b>Hello</b> there</i></p></code>）：</p> <pre><code class="language-php">p b { color:red; } </code></pre> <p>在这种情况下，单词<code>Hello</code>显示为红色。然而，当不需要这种更一般的行为时，可以使用子选择器来缩小选择器的范围。例如，以下规则插入了一个大于号（<code>></code>）以创建子选择器，仅当元素是段落的直接子元素且不位于另一个元素内时，将粗体文本设为红色：</p> <pre><code class="language-php">p > b { color:red; } </code></pre> <p>现在<code>Hello</code>不会改变颜色，因为<code><b></code>不是<code><p></code>的直接子元素。</p> <p>举个实际的例子，假设你希望仅将直接位于<code><ol></code>元素下的<code><li></code>元素加粗。你可以按照以下方法实现，其中直接位于<code><ul></code>元素下的<code><li></code>元素不会加粗：</p> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <style> `ol` `>` `li` `{` `font-weight``:``bold``;` `}` </style> </head> <body> <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </body> </html> </code></pre> <p>将这段 HTML 加载到浏览器中的结果将如下所示：</p> <pre><code class="language-php">1\. One 2\. Two 3\. Three • One • Two • Three </code></pre> <h2 id="id-选择器">ID 选择器</h2> <p>如果给一个元素赋予 ID 名称（像这样<code><div id='mydiv'></code>），你可以通过以下方式直接从 CSS 中访问它，将元素内所有文本改为斜体：</p> <pre><code class="language-php">#mydiv { font-style:italic; } </code></pre> <p>每个 ID 在文档中只能使用一次，因此只会将第一个找到的出现位置按照 CSS 规则的新属性值进行更改。但在 CSS 中，可以直接引用具有相同名称的任何 ID，只要它们出现在不同的元素类型中，像这样：</p> <pre><code class="language-php"><div id='myid'>Hello</div> <span id='myid'>Hello</span> </code></pre> <p>因为 ID 通常仅适用于唯一的元素，所以下面的规则将仅为第一个出现的<code>myid</code>应用下划线：</p> <pre><code class="language-php">#myid { text-decoration:underline; } </code></pre> <p>然而，你可以确保 CSS 将规则应用于两者的方法如下：</p> <pre><code class="language-php">span#myid { text-decoration:underline; } div#myid { text-decoration:underline; } </code></pre> <p>或者更简洁地写成这样（参见“通过组选择”）：</p> <pre><code class="language-php">span#myid, div#myid { text-decoration:underline; } </code></pre> <h6 id="注意-102">注意</h6> <p>我不建议使用这种选择形式，因为它增加了对 JavaScript 使用的障碍。任何还必须访问这些元素的 JavaScript 也不能轻松地这样做，因为常用的<code>getElementById</code>函数将只返回第一个出现的元素。要引用任何其他实例，程序必须搜索文档中所有元素的整个列表——这是一个更棘手的任务。因此，通常最好始终使用唯一的 ID 名称。</p> <h2 id="类选择器">类选择器</h2> <p>当您希望在页面中的多个元素之间共享相同的样式时，可以为它们分配相同的类名（如此：<code><span class='myclass'></code>）。然后创建一个单一规则一次性修改所有这些元素，如以下规则，为使用该类的所有元素创建一个 10 像素的左边距偏移量：</p> <pre><code class="language-php">.myclass { margin-left:10px; } </code></pre> <p>在现代浏览器中，您可以让 HTML 元素使用多个类，类名之间用空格分隔，例如：<code><span class='class1 class2 class3'></code>。</p> <p>您可以通过指定应用该类的元素类型来缩小类的作用范围。例如，以下规则仅适用于使用类<code>main</code>的段落：</p> <pre><code class="language-php">p.main { text-indent:30px; } </code></pre> <p>在这个示例中，只有使用类<code>main</code>（如此：<code><p class="main"></code>）的段落会接收新的属性值。任何其他尝试使用该类的元素类型（例如<code><div class="main"></code>）都不会受到这个规则的影响。</p> <h2 id="属性选择器">属性选择器</h2> <p>许多 HTML 标签支持属性，使用这种类型的选择器可以避免使用 ID 和类来引用它们。例如，您可以直接以以下方式引用属性，这样可以将所有具有<code>type="submit"</code>属性的元素设置为 100 像素的宽度：</p> <pre><code class="language-php">[type="submit"] { width:100px; } </code></pre> <p>如果您希望将选择器的范围缩小到仅限于带有该属性类型的<code><form></code>输入元素，则可以改用以下规则：</p> <pre><code class="language-php">form input[type="submit"] { width:100px; } </code></pre> <h6 id="注意-103">注意</h6> <p>属性选择器也适用于 ID 和类，因此，例如，<code>[class~="classname"]</code>的工作方式与类选择器<code>.classname</code>完全相同（只是前者具有更高的优先级）。同样，<code>[id="idname"]</code>等同于使用 ID 选择器<code>#idname</code>。因此，带有<code>#</code>和<code>.</code>前缀的类和 ID 选择器可以视为带有更高优先级的属性选择器的速记。<code>~=</code>运算符匹配属性，即使它是一组以空格分隔的属性之一。</p> <h2 id="通用选择器">通用选择器</h2> <p>通配符<code>*</code>或通用选择器匹配任何元素，因此以下规则将通过给所有元素添加绿色边框来彻底弄乱文档：</p> <pre><code class="language-php">* { border:1px solid green; } </code></pre> <p>因此，很少会单独使用<code>*</code>，但作为复合规则的一部分，它可以非常强大。例如，以下规则将适用与前述规则相同的样式，但仅适用于作为具有 ID <code>boxout</code>的元素的子元素的所有段落，并且只要它们不是直接子元素：</p> <pre><code class="language-php">#boxout * p {border:1px solid green; } </code></pre> <p>让我们看看这里发生了什么。在<code>#boxout</code>后面的第一个选择器是一个<code>*</code>符号，因此它指的是<code>boxout</code>对象中的任何元素。然后，以下<code>p</code>选择器通过将选择器更改为仅适用于由<code>*</code>选择器返回的元素的段落（由<code>p</code>定义）来缩小选择焦点。因此，此 CSS 规则执行以下操作（其中我可以互换使用术语<em>对象</em>和<em>元素</em>）：</p> <ol> <li> <p>找到具有 ID <code>boxout</code> 的对象。</p> </li> <li> <p>找到第 1 步返回的对象的所有子元素。</p> </li> <li> <p>在第 2 步返回的对象中找到所有 <code>p</code> 子元素，并且由于这是组中的最终选择器，还要找到第 2 步返回的对象的所有 <code>p</code> 子及子子元素（等等）。</p> </li> <li> <p>将 <code>{</code> 和 <code>}</code> 字符之间的样式应用于第 3 步返回的对象。</p> </li> </ol> <p>这样做的结果是，绿色边框仅应用于主元素的子子代（或曾孙代等等）中的段落。</p> <h2 id="通过组选择">通过组选择</h2> <p>使用 CSS，您可以通过逗号分隔选择器一次性将规则应用于多个元素、类或任何其他类型的选择器。例如，以下规则将在所有段落、具有 ID <code>idname</code> 的元素以及使用类 <code>classname</code> 的所有元素下方放置一个虚线橙色线条：</p> <pre><code class="language-php">p, #idname, .classname { border-bottom:1px dotted orange; } </code></pre> <p>图 19-3 显示了使用的各种选择器及其附带的规则。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1903.png" alt="一些 HTML 及其使用的 CSS 规则" loading="lazy"></p> <h6 id="图-19-3-一些-html-及其使用的-css-规则">图 19-3. 一些 HTML 及其使用的 CSS 规则</h6> <h1 id="css-层叠">CSS 层叠</h1> <p>如前所述，CSS 属性中最基本的之一就是它们会层叠 — 因此称为层叠样式表。但这意味着什么呢？</p> <p>层叠是一种用于解决浏览器支持的各种样式表之间潜在冲突并按照创建者、创建样式的方法和所选属性类型优先顺序应用它们的方法。</p> <h2 id="样式表创建者">样式表创建者</h2> <p>所有现代浏览器都支持三种主要类型的样式表。按优先级从高到低的顺序，它们如下：</p> <ol> <li> <p>由文档作者创建的样式</p> </li> <li> <p>由用户创建的样式</p> </li> <li> <p>由浏览器创建的样式</p> </li> </ol> <p>这三组样式表按相反顺序处理。首先，将默认值应用于文档中的网络浏览器。如果没有这些默认值，不使用样式表的网页将看起来很糟糕。它们包括字体、大小和颜色；元素间距；表边框和间距；以及用户期望的所有其他合理标准。</p> <p>接下来，如果用户已创建任何用于替代标准样式的样式，则会应用这些样式，取代可能冲突的浏览器默认样式。</p> <p>最后，将应用由当前文档作者创建的任何样式，以替换已由浏览器默认或用户创建的样式。</p> <h2 id="样式表方法">样式表方法</h2> <p>样式表可以通过三种不同方法创建。从高到低的优先顺序如下：</p> <ol> <li> <p>作为内联样式</p> </li> <li> <p>在嵌入式样式表中</p> </li> <li> <p>在外部样式表中</p> </li> </ol> <p>同样，样式表创建的这些方法按照优先顺序的相反顺序应用。因此，首先处理所有外部样式表，并将其样式应用于文档。</p> <p>其次，处理任何嵌入样式（在 <code><style>...</style></code> 标签内），并优先处理与外部规则冲突的样式，并将其覆盖。</p> <p>最后，将直接应用于元素的任何样式（例如 <code><div style="...">...</div></code>）作为内联样式具有最高优先级，并覆盖所有先前分配的属性。</p> <h2 id="样式表选择器">样式表选择器</h2> <p>有三种不同的选择元素进行样式设置的方法。按照优先顺序从高到低，它们如下：</p> <ol> <li> <p>按单个 ID 或属性选择器引用</p> </li> <li> <p>按类分组引用</p> </li> <li> <p>按元素标签引用（例如 <code><p></code> 或 <code><b></code>）</p> </li> </ol> <p>根据规则影响的元素数量和类型处理选择器，这与解决冲突的前两种方法略有不同。这是因为规则不必同时仅适用于一种选择器类型，并且可能引用多种不同的选择器。</p> <p>因此，我们需要一种方法来确定可以包含任意选择器组合的规则的优先顺序。CSS 通过计算每个规则的特异性来实现这一点，按照其作用范围的从宽到窄的顺序对其进行排序。</p> <h3 id="计算特异性">计算特异性</h3> <p>我们通过基于前述编号列表中的选择器类型创建三部分数字来计算规则的特异性。这些复合数字起始形式为<code>[0,0,0]</code>。在处理规则时，每个引用 ID 的选择器会使第一个数字增加 1，因此复合数字会变为<code>[1,0,0]</code>。</p> <p>让我们看一下以下规则，它引用了七个选择器。其中三个是对 ID <code>#heading</code>、<code>#main</code> 和 <code>#menu</code> 的引用，因此复合数字变为<code>[3,0,0]</code>：</p> <pre><code class="language-php">#heading #main #menu .text .quote p span { // Rules go here; } </code></pre> <p>然后，选择器中类的数量放置在复合数字的第二部分。在此示例中，有两个类 (<code>.text</code> 和 <code>.quote</code>)，因此复合数字变为<code>[3,2,0]</code>。</p> <p>最后，统计所有引用元素标签的选择器，并将此数字放置在复合数字的最后部分。在此示例中，有两个选择器 (<code>p</code> 和 <code>span</code>)，因此最终复合数字为<code>[3,2,2]</code>。</p> <p>这是比较此规则特异性与其他规则所需的全部内容。在像这种情况下，复合数字中每种类型都不超过九个，可以直接转换为十进制数，本例中为 322。低于此数的规则优先级较低，高于此数的规则优先级更高。如果两个规则具有相同的值，则最近应用的规则胜出。</p> <p>例如，假设我们还有以下规则：</p> <pre><code class="language-php">#heading #main .text .quote .news p span { // Rules go here; } </code></pre> <p>在这里，尽管还引用了七个元素，但现在只有两个 ID 引用，但三个类引用，这导致了复合数字<code>[2,3,2]</code>。由于 322 大于 232，前者的例子优先于后者。</p> <h4 id="使用不同的数字基数">使用不同的数字基数</h4> <p>当一个复合数字中有超过九个以上的类型时，你必须使用更高的数字基数。例如，你无法简单地将复合数字<code>[11,7,19]</code>连接起来转换为十进制。相反，你必须将数字转换为更高的基数，如 20 进制（或更高，如果任何类型超过 19 个）。</p> <p>要做到这一点，请像这样将三个部分相乘并添加结果，从最右边的数字开始，从右向左工作：</p> <pre><code class="language-php"> 20 × 19 = 380 20×20 × 7 = 2800 20×20×20 × 11 = 88000 Total in decimal = 91180 </code></pre> <p>在左边，将<code>20</code>的值替换为你使用的基数。一旦一组规则的复合数字从此基数转换为十进制，就很容易确定每个数字的特异性和因此的优先级。</p> <p>幸运的是，CSS 处理器会为你处理所有这些问题，但了解它的工作原理有助于你正确构建规则并理解它们将具有的优先级。</p> <h6 id="注意-104">注意</h6> <p>如果所有这些优先级计算听起来相当复杂，你会高兴地知道，在大多数情况下，你通常可以通过这个简单的经验法则来解决：一般来说，要修改的元素越少，它们越具体，规则的优先级就越高。</p> <h4 id="有些规则比其他规则更平等">有些规则比其他规则更平等</h4> <p>当两个或多个样式规则完全等效时，只有最近处理的规则会优先生效。然而，通过使用<code>!important</code>声明，你可以强制某个规则比其他等效规则具有更高的优先级，例如：</p> <pre><code class="language-php">p { color:#ff0000 !important; } </code></pre> <p>当你这样做时，所有先前的等效设置都将被覆盖（甚至使用<code>!important</code>的设置），并且稍后处理的任何等效规则都将被忽略。因此，例如，以下两个规则中的第二个通常会优先生效，但由于在先前分配中使用了<code>!important</code>，第二个规则被忽略了：</p> <pre><code class="language-php">p { color:#ff0000 !important; } p { color:#ffff00 } </code></pre> <h6 id="注意-105">注意</h6> <p>用户样式表可以用于指定默认浏览器样式，并且它们可能使用<code>!important</code>声明，此时用户的样式设置将优先于当前网页中指定的相同属性。还需要注意，非<code>!important</code>的用户样式设置将被网页中任何<code>!important</code>样式所覆盖。</p> <h1 id="div和span元素之间的区别"><code><div></code>和<code><span></code>元素之间的区别</h1> <p><code><div></code>和<code><span></code>元素都是容器类型，但具有一些不同的特性。默认情况下，<code><div></code>元素具有无限的宽度（至少到浏览器边缘），你可以通过为其中一个应用边框来查看，例如：</p> <pre><code class="language-php"><div style="border:1px solid green;">Hello</div> </code></pre> <p>然而，<code><span></code> 元素的宽度仅限于其包含的文本。因此，以下 HTML 行仅在单词 <code>Hello</code> 周围创建边框，不会延伸到浏览器的右侧边缘：</p> <pre><code class="language-php"><span style="border:1px solid green;">Hello</span> </code></pre> <p>此外，<code><span></code> 元素随文本或其他对象的换行或流动而跟随，并且因此可以具有复杂的边框。例如，在 示例 19-2 中，我使用 CSS 将所有 <code><div></code> 元素的背景设为黄色，将所有 <code><span></code> 元素设为青色，并为两者添加了边框，然后创建了几个示例 <code><span></code> 和 <code><div></code> 部分。</p> <h5 id="示例-19-2-div-和-span-示例">示例 19-2. <code><div></code> 和 <code><span></code> 示例</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Div and span example</title> <style> div, span { border :1px solid black; } div { background-color:yellow; } span { background-color:cyan; } </style> </head> <body> <div>This text is within a div tag</div> This isn't. <div>And this is again.</div><br> <span>This text is inside a span tag.</span> This isn't. <span>And this is again.</span><br><br> <div>This is a larger amount of text in a div that wraps around to the next line of the browser</div><br> <span>This is a larger amount of text in a span that wraps around to the next line of the browser</span> </body> </html> </code></pre> <p>图 19-4 显示了此示例在 Web 浏览器中的样子。尽管在打印的书中只显示为灰色，但该图清楚地展示了 <code><div></code> 元素如何延伸到浏览器窗口的右侧边缘，并强制下面的内容出现在第一个可用位置的起始处。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1904.png" alt="不同宽度的各种元素" loading="lazy"></p> <h6 id="图-19-4-不同宽度元素的各种类型">图 19-4. 不同宽度元素的各种类型</h6> <p>图中还显示了 <code><span></code> 元素如何保持独立，并且仅占用足够容纳其内容的空间，而不会强制下面的内容出现在它们下面。</p> <p>此外，在图中的最后两个示例中，您可以看到当 <code><div></code> 元素在屏幕边缘换行时，它们保持矩形形状，而 <code><span></code> 元素只是随着包含的文本（或其他内容）流动（或换行）。</p> <h6 id="注意-106">注意</h6> <p>由于 <code><div></code> 元素只能是矩形的，它们更适合用于包含像图片、盒子、引用等对象，而 <code><span></code> 标签最适合用于容纳文本或其他按行内顺序排列的属性，其应从左到右（或某些语言中从右到左）流动。</p> <h1 id="测量">测量</h1> <p>CSS 支持多种测量单位，可以精确地调整网页到特定的数值或相对尺寸。我通常使用的有像素、点、ems 和百分比，但这里是完整列表：</p> <p><dfn class="keep-together">像素</dfn></p> <p>像素的大小根据用户屏幕的尺寸和像素深度而变化。一个像素等于屏幕上单个点的宽度/高度，因此该测量单位最适合屏幕而不是印刷。例如：</p> <pre><code class="language-php">.classname { margin:5px; } </code></pre> <p><dfn class="keep-together">点</dfn></p> <p>一点相当于一英寸的 1/72 大小。该测量单位来自于印刷设计背景，最适合于该媒介，但也常用于屏幕显示。例如：</p> <pre><code class="language-php">.classname { font-size:14pt; } </code></pre> <p><dfn class="keep-together">英寸</dfn></p> <p>一英寸等于 72 点，是最适合印刷的测量单位。例如：</p> <pre><code class="language-php">.classname { width:3in; } </code></pre> <p><dfn class="keep-together">厘米</dfn></p> <p>厘米是另一种最适合印刷的度量单位。一厘米略大于 28 点。例如：</p> <pre><code class="language-php">.classname { height:2cm; } </code></pre> <p><dfn class="keep-together">毫米</dfn></p> <p>毫米是厘米的十分之一（或接近 3 点）。毫米是另一种最适合印刷的度量单位。例如：</p> <pre><code class="language-php">.classname { font-size:5mm; } </code></pre> <p><dfn class="keep-together">Picas</dfn></p> <p>点（Pica）是另一种印刷排版测量单位，相当于 12 点。例如：</p> <pre><code class="language-php">.classname { font-size:1pc; } </code></pre> <p><dfn class="keep-together">Ems</dfn></p> <p>一个 em 等于当前字体大小，因此在 CSS 中它是描述相对尺寸的更有用的测量单位之一。例如：</p> <pre><code class="language-php">.classname { font-size:2em; } </code></pre> <p><dfn class="keep-together">Exs</dfn></p> <p>Ex 是与当前字体大小相关的，它相当于小写字母 <em>x</em> 的高度。这是一种较少使用的度量单位，最常用作帮助设置将包含一些文本的框的宽度的良好近似值。例如：</p> <pre><code class="language-php">.classname { width:20ex; } </code></pre> <p><dfn class="keep-together">百分比</dfn></p> <p>这个单位与 em 相关，因为它在字体上的倍数是 100（当用于字体时）。而 1 em 等于当前字体大小，相同大小的百分比是 100。当不涉及字体时，此单位相对于正在访问的属性的容器的大小。例如：</p> <pre><code class="language-php">.classname { height:120%; } </code></pre> <p>图 19-5 显示依次使用这些测量类型来显示几乎相同大小的文本。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1905.png" alt="几乎相同大小的不同测量" loading="lazy"></p> <h6 id="图-19-5-几乎相同大小的不同测量">图 19-5. 几乎相同大小的不同测量</h6> <h1 id="字体和排版">字体和排版</h1> <p>你可以使用 CSS 更改四个主要的字体属性：<code>font-family</code>、<code>font-style</code>、<code>font-size</code> 和 <code>font-weight</code>。通过它们，你可以微调网页和/或打印时文本的显示方式。</p> <h2 id="字体系列">字体系列</h2> <p><code>font-family</code> 属性指定要使用的字体。你可以按照优先级从左到右列出各种字体，这样当用户没有安装首选字体时，样式可以优雅地回退。例如，要设置段落的默认字体，你可以使用类似这样的 CSS 规则：</p> <pre><code class="language-php">p { font-family:Verdana, Arial, Helvetica, sans-serif; } </code></pre> <p>如果一个字体名称由两个或更多单词组成，你必须用引号将名称括起来，像这样：</p> <pre><code class="language-php">p { font-family:"Times New Roman", Georgia, serif; } </code></pre> <h6 id="注-2">注</h6> <p>因为它们几乎可以在所有的网页浏览器和操作系统中使用，所以在网页上使用的最安全的字体系列包括 Arial、Helvetica、Times New Roman、Times、Courier New 和 Courier。Verdana、Georgia、Comic Sans MS、Trebuchet MS、Arial Black 和 Impact 字体适用于 Mac 和 PC，但可能未安装在其他操作系统（如 Linux）上。其他常见但较不安全的字体包括 Palatino、Garamond、Bookman 和 Avant Garde。如果你使用了其中一种较不安全的字体，请确保在你的 CSS 中提供一个或多个更安全的字体作为备用，以便在没有你首选字体的浏览器上，你的网页能够优雅地降级显示。</p> <p>图 19-6 显示这两组 CSS 规则的应用。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1906.png" alt="选择字体系列" loading="lazy"></p> <h6 id="图19-6-选择字体系列">图 19-6. 选择字体系列</h6> <h2 id="字形">字形</h2> <p>使用<code>font-style</code>属性，您可以选择以普通、斜体或倾斜方式显示字体。以下规则创建了三个类（<code>normal</code>、<code>italic</code>和<code>oblique</code>），可以应用于元素以创建这些效果：</p> <pre><code class="language-php">.normal { font-style:normal; } .italic { font-style:italic; } .oblique { font-style:oblique; } </code></pre> <h2 id="字号">字号</h2> <p>正如在测量部分中所述，你可以以多种方式更改字体的大小。但这些归结为两种主要类型：固定大小和相对大小。固定设置如下规则，将默认段落字体大小设置为 14 点：</p> <pre><code class="language-php">p { font-size:14pt; } </code></pre> <p>或者，您可能希望使用当前默认的字体大小来为各种类型的文本设置样式，比如标题。在以下规则中，定义了一些标题的相对大小，例如，<code><h4></code>标签比默认大小大 20%，每个更大的尺寸比上一个大 40%：</p> <pre><code class="language-php">h1 { font-size:240%; } h2 { font-size:200%; } h3 { font-size:160%; } h4 { font-size:120%; } </code></pre> <p>图 19-7 展示了正在使用的一些字体大小的选择。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1907.png" alt="设置四个标题大小和默认段落大小" loading="lazy"></p> <h6 id="图19-7-设置四个标题大小和默认段落大小">图 19-7. 设置四个标题大小和默认段落大小</h6> <h2 id="字重">字重</h2> <p>使用<code>font-weight</code>属性，您可以选择以何种粗细显示字体。它支持许多值，但您可能主要使用的是<code>normal</code>和<code>bold</code>，如下所示：</p> <pre><code class="language-php">.bold { font-weight:bold; } </code></pre> <h1 id="管理文本样式">管理文本样式</h1> <p>无论使用哪种字体，你都可以通过修改其装饰、间距和对齐方式进一步修改文本的显示方式。文本和字体属性之间存在交叉，比如斜体或粗体文字通过<code>font-style</code>和<code>font-weight</code>属性实现，而下划线等则需要<code>text-decoration</code>属性。</p> <h2 id="装饰">装饰</h2> <p>使用<code>text-decoration</code>属性，您可以对文本应用效果，如<code>underline</code>、<code>line-through</code>、<code>overline</code>和<code>blink</code>。以下规则创建了一个名为<code>over</code>的新类，将横线应用于文本（横线、下划线和删除线的粗细将与字体相匹配）：</p> <pre><code class="language-php">.over { text-decoration:overline; } </code></pre> <p>在图 19-8 中，你可以看到一些字体样式、粗细和装饰的选择。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1908.png" alt="可用样式和装饰规则的示例" loading="lazy"></p> <h6 id="图19-8-可用样式和装饰规则的示例">图 19-8. 可用样式和装饰规则的示例</h6> <h2 id="间距">间距</h2> <p>许多不同的属性允许你修改行、词和字母的间距。例如，以下规则通过修改<code>line-height</code>属性使段落行距增加 25%，将<code>word-spacing</code>属性设置为 30 像素，并将<code>letter-spacing</code>设置为 3 像素：</p> <pre><code class="language-php">p { line-height :125%; word-spacing :30px; letter-spacing:3px; } </code></pre> <p>你可以选择使用百分比值和<code>word-spacing</code>或<code>letter-spacing</code>来减少或增加字体应用的默认空间量，使用小于或大于 100%的值，这对比例和非比例字体都适用。</p> <h2 id="对齐">对齐</h2> <p>在 CSS 中有四种文本对齐方式：<code>left</code>、<code>right</code>、<code>center</code>和<code>justify</code>。在下面的规则中，默认段落文本设置为完全对齐：</p> <pre><code class="language-php">p { text-align:justify; } </code></pre> <h2 id="转换">转换</h2> <p>有四种属性可用于转换文本：<code>none</code>、<code>capitalize</code>、<code>uppercase</code>和<code>lowercase</code>。以下规则创建一个名为<code>upper</code>的类，当使用时将确保所有文本以大写显示：</p> <pre><code class="language-php">.upper { text-transform:uppercase; } </code></pre> <h2 id="缩进">缩进</h2> <p>使用<code>text-indent</code>属性，您可以按指定量缩进文本块的第一行。下面的规则将每个段落的第一行缩进 20 像素，尽管也可以应用不同的测量单位或百分比增加：</p> <pre><code class="language-php">p { text-indent:20px; } </code></pre> <p>在图 19-9 中，以下规则已应用于文本部分：</p> <pre><code class="language-php">p { line-height :150%; word-spacing :10px; letter-spacing:1px; } .justify { text-align :justify; } .uppercase { text-transform:uppercase; } .indent { text-indent :20px; } </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1909.png" alt="应用了缩进、大写和间距规则" loading="lazy"></p> <h6 id="图-19-9-应用了缩进大写和间距规则">图 19-9. 应用了缩进、大写和间距规则</h6> <h1 id="css-颜色">CSS 颜色</h1> <p>您可以通过使用<code>color</code>和<code>background-color</code>属性（或通过向<code>background</code>属性提供单个参数）将颜色应用于文本和对象的前景和背景。指定的颜色可以是命名颜色之一（如<code>red</code>或<code>blue</code>）、由十六进制 RGB 三元组创建的颜色（如<code>#ff0000</code>或<code>#0000ff</code>）或使用<code>rgb</code>CSS 函数创建的颜色。</p> <p>根据<a href="http://www.w3.org" target="_blank">W3C 标准组织</a>定义的标准 16 种颜色名称分别为<code>aqua</code>、<code>black</code>、<code>blue</code>、<code>fuchsia</code>、<code>gray</code>、<code>green</code>、<code>lime</code>、<code>maroon</code>、<code>navy</code>、<code>olive</code>、<code>purple</code>、<code>red</code>、<code>silver</code>、<code>teal</code>、<code>white</code>和<code>yellow</code>。下面的规则使用其中一种名称设置具有 ID<code>object</code>的对象的背景颜色：</p> <pre><code class="language-php">#object { background-color:silver; } </code></pre> <p>在此规则中，所有<code><div></code>元素中文本的前景色设置为黄色（因为在计算机显示器上，十六进制级别<code>ff</code>红色，加上<code>ff</code>绿色，再加上<code>00</code>蓝色创建黄色）：</p> <pre><code class="language-php">div { color:#ffff00; } </code></pre> <p>或者，如果您不想使用十六进制，可以使用<code>rgb</code>函数指定颜色三元组，如下规则，将当前文档的背景颜色更改为水绿色：</p> <pre><code class="language-php">body { background-color:rgb(0, 255, 255); } </code></pre> <h6 id="注意-107">注意</h6> <p>如果您不喜欢使用每种颜色 256 级范围，也可以在<code>rgb</code>函数中使用百分比，范围从<code>0</code>到<code>100</code>，从最低（<code>0</code>）到最高（<code>100</code>）的主色彩量。例如：<code>rgb(58%, 95%, 74%)</code>。您还可以使用浮点值进行更精细的颜色控制，如：<code>rgb(23.4%, 67.6%, 15.5%)</code>。</p> <h2 id="短颜色字符串">短颜色字符串</h2> <p>还有一种十六进制数字串的简写形式，每个颜色只使用每个 2 字节对中的第一个。例如，不使用颜色<code>#fe4692</code>，而使用<code>#f49</code>，省略每对中的第二个十六进制数字，相当于颜色值为<code>#ff4499</code>。</p> <p>这几乎产生相同的颜色，在不需要精确颜色时非常有用。6 位数和 3 位数字符串的区别在于前者支持 1600 万种不同的颜色，而后者仅支持 4000 种。</p> <p>无论何时需要使用<code>#883366</code>这样的颜色，这直接等同于<code>#836</code>（因为较短版本的重复数字被隐含），你可以使用任意一种字符串来创建完全相同的颜色。</p> <h2 id="渐变">渐变</h2> <p>可选择应用渐变来替代实心背景颜色，从给定的初始颜色自动流向你选择的最终颜色。最好与简单的颜色规则结合使用，这样不支持渐变的浏览器至少会显示实心颜色。</p> <p>示例 19-3 使用规则显示橙色渐变（或在不支持的浏览器上显示纯橙色），如图 19-10 的中间部分所示。</p> <h5 id="示例19-3-创建线性渐变">示例 19-3. 创建线性渐变</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Creating a linear gradient</title> <style> .orangegrad { background:orange; background:linear-gradient(top, #fb0, #f50); </style> </head> <body> <div class='orangegrad'>Black text<br> on an orange<br>linear gradient</div> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1910.png" alt="A solid background color, a linear gradient, and a radial gradient" loading="lazy"></p> <h6 id="图19-10-一个实心背景颜色线性渐变和径向渐变">图 19-10. 一个实心背景颜色、线性渐变和径向渐变</h6> <p>要创建渐变，选择从<code>top</code>、<code>bottom</code>、<code>left</code>、<code>right</code>和<code>center</code>（或任意组合，如<code>top left</code>或<code>center right</code>）开始的位置，输入所需的起始和结束颜色，然后应用<code>linear-gradient</code>或<code>radial-gradient</code>规则，确保为所有目标浏览器提供规则。</p> <p>你还可以通过提供被称为<em>停止</em>颜色的中间参数来使用不仅仅是起始和结束颜色。例如，如果提供了五个参数，则每个参数将控制区域的五分之一颜色变化，由其在参数列表中的位置确定。</p> <p>除了渐变，你还可以将透明度应用到 CSS 对象中，详细说明在第 20 章。</p> <h1 id="定位元素">定位元素</h1> <p>网页内的元素按其在文档中的放置位置排列，但你可以通过将元素的<code>position</code>属性从默认的<code>static</code>更改为<code>absolute</code>、<code>relative</code>、<code>sticky</code>或<code>fixed</code>之一来移动它们。</p> <h2 id="绝对定位">绝对定位</h2> <p>绝对定位元素从文档中移除后，其它可用的元素将流入其释放出的空间。然后，你可以使用<code>top</code>、<code>right</code>、<code>bottom</code>和<code>left</code>属性在文档中任意位置放置对象。</p> <p>例如，要将 ID 为<code>object</code>的对象移动到文档开始位置下方 100 像素并距左边 200 像素的绝对位置，你可以向其应用以下规则（还可以使用 CSS 支持的任何其他测量单位）：</p> <pre><code class="language-php">#object { position:absolute; top :100px; left :200px; } </code></pre> <p>该对象将位于其重叠的其他元素的顶部或后面，具体取决于分配给 <code>z-index</code> 属性的值（仅适用于定位元素）。元素的默认 <code>z-index</code> 值为 <code>auto</code>，浏览器会自动为您解决。或者，您可以给属性一个整数值（可能是负数），如下所示：</p> <pre><code class="language-php">#object { position :absolute; top :100px; left :200px; z-index :100; } </code></pre> <p>然后，对象按照从最低到最高 <code>z-index</code> 级别的顺序显示，具有较高值的显示在较低值之上。<code>html</code> 元素的默认 <code>z-index</code> 值为 <code>0</code>；所有其他默认值为 <code>auto</code>。</p> <h2 id="相对定位">相对定位</h2> <p>同样，您可以将对象相对于其在正常文档流中将占据的位置移动。因此，例如，要将 <code>object</code> 向下移动 10 像素并向右移动 10 像素以超出其正常位置，您将使用以下规则：</p> <pre><code class="language-php">#object { position:relative; top :10px; left :10px; } </code></pre> <h2 id="固定定位">固定定位</h2> <p>最终的 <code>position</code> 属性设置允许您将对象移动到绝对位置，但仅限于当前浏览器视口。然后，当文档滚动时，对象仍然保持在其放置的确切位置，主文档在其下滚动 - 这是创建码头栏和其他类似设备的绝佳方式。要将对象固定到浏览器窗口的左上角，请使用以下规则：</p> <pre><code class="language-php">#object { position:fixed; top :0px; left :0px; } </code></pre> <p>例子 19-4 展示了在页面上应用不同定位值到对象的方法。</p> <h5 id="例子-19-4-应用不同的定位值">例子 19-4. 应用不同的定位值</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Positioning</title> <style> #container { position :absolute;   top       :50px;         left      :0px;       }       #object1 {         position  :absolute;         background:pink;         width     :100px;         height    :100px;         top       :0px;         left      :0px;       }       #object2 {         position  :relative;         background:lightgreen;         width     :100px;         height    :100px;         top       :0px;         left      :110px;       }       #object3 {         position  :fixed;         background:yellow;         width     :100px;         height    :100px;         top       :50px;         left      :220px;       } </style> </head> <body> <br><br><br><br><br>     <div id='container'>       <div id='object1'>Absolute Positioning</div>       <div id='object2'>Relative Positioning</div>       <div id='object3'>Fixed Positioning</div>     </div> </body> </html> </code></pre> <p>在 图 19-11 中，例子 19-4 已加载到浏览器中，并且浏览器窗口已减小到宽度和高度，因此您必须向下滚动才能查看整个网页。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1911.png" alt="使用不同的定位值" loading="lazy"></p> <h6 id="图-19-11-使用不同的定位值">图 19-11. 使用不同的定位值</h6> <p>当这样做时，可以立即看出具有固定定位的元素（<code>object3</code>）即使通过滚动也保持在原位。您还可以看到容器元素（名为 <code>container</code>）具有绝对定位，并且正好位于向下 50 像素，水平偏移为 0 像素，以便 <code>object1</code>（在 <code>container</code> 内具有绝对定位）出现在该位置。与此同时，<code>object2</code> 具有相对定位，因此与 <code>container</code> 的左边距相差 110 像素，与 <code>object1</code> 对齐。</p> <p>在该图中，<code>object3</code>，即使出现在 HTML 的 <code>container</code> 元素中，也具有固定定位，因此实际上与其他对象完全独立，不受 <code>container</code> 边界的限制。它最初设置为与 <code>object1</code> 和 <code>object2</code> 对齐，但与其他对象一起滚动到页面上方时保持不变，现在看起来偏离了它们下方的偏移位置。</p> <h1 id="伪类">伪类</h1> <p>一些选择器和类仅在样式表中使用，并且在 HTML 中没有任何匹配的标签或属性。它们的任务是使用除了名称、属性或内容之外的特征对元素进行分类，即无法从文档树中推断出的特征。这些包括伪类，如<code>link</code>和<code>visited</code>。还有伪元素用于进行选择，这些选择可能包括部分元素，例如<code>first-line</code>或<code>first-letter</code>。</p> <p>伪类和伪元素由<code>:</code>（冒号）字符分隔。例如，要创建一个名为<code>bigfirst</code>的类以强调元素的第一个字母，您可以使用如下规则：</p> <pre><code class="language-php">.bigfirst:first-letter { font-size:400%; float :left; } </code></pre> <p>当<code>bigfirst</code>类应用于元素时，第一个字母将显示为大号，其余文本以正常大小显示，并整齐地围绕它流动（由于<code>float</code>属性），就像第一个字母是图像或其他对象一样。伪类包括<code>hover</code>、<code>link</code>、<code>active</code>和<code>visited</code>，它们大多用于应用于锚元素，如以下规则，将所有链接的默认颜色设置为蓝色，已访问的链接颜色设置为浅蓝色：</p> <pre><code class="language-php">a:link { color:blue; } a:visited { color:lightblue; } </code></pre> <p>以下规则非常有趣，因为它们使用了<code>hover</code>伪类，因此只有当鼠标指针悬停在元素上时才应用。在这个例子中，它们将链接更改为白色文本和红色背景，提供了一种通常只能通过使用 JavaScript 代码实现的动态效果：</p> <pre><code class="language-php">a:hover { color :white; background:red; } </code></pre> <p>在这里，我使用了<code>background</code>属性和单个参数，而不是较长的<code>background-color</code>属性。</p> <p><code>active</code>伪类也是动态的，它在鼠标按钮按下和释放之间的时间内对链接进行更改，例如下面的规则，将链接颜色更改为深蓝色：</p> <pre><code class="language-php">a:active { color:darkblue; } </code></pre> <p>另一个有趣的动态伪类是<code>focus</code>，它只有在用户通过键盘或鼠标选择元素时才应用。以下规则使用通用选择器，始终在当前聚焦对象周围放置一条中灰色的虚线 2 像素边框：</p> <pre><code class="language-php">*:focus { border:2px dotted #888888; } </code></pre> <h6 id="注意-108">注意</h6> <p>这个讨论适用于传统的网页开发，不适用于移动/触摸设备的开发。我们将在第二十三章中更专注于这个话题，讨论 jQuery Mobile。</p> <p>示例 19-5 显示了两个链接和一个输入字段，如图 19-12 所示。第一个链接因在此浏览器中已访问过而显示为灰色，但第二个链接尚未访问，并显示为蓝色。已按下 Tab 键，并且输入的焦点现在是输入字段，因此其背景已更改为黄色。单击任一链接时，它将显示为紫色，并在悬停时显示为红色。</p> <h5 id="示例-19-5-链接和焦点伪类">示例 19-5. 链接和焦点伪类</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Pseudoclasses</title> <style> a:link { color:blue; } a:visited { color:gray; } a:hover { color:red; } a:active { color:purple; } *:focus { background:yellow; } </style> </head> <body> <a href='http://google.com'>Link to Google'</a><br> <a href='nowhere'>Link to nowhere'</a><br> <input type='text'> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1912.png" alt="应用于一组元素的伪类" loading="lazy"></p> <h6 id="图-19-12-应用于一组元素的伪类">图 19-12. 应用于一组元素的伪类</h6> <p>还有其他伪类可用；有关更多信息，请参阅<a href="https://tinyurl.com/htmldipc" target="_blank">HTML Dog“伪类”教程</a>。</p> <h1 id="速记规则">速记规则</h1> <p>为节省空间，相关 CSS 属性组可以合并为单个速记分配。例如，我已经多次使用了创建边框的速记，例如前一节中的<code>focus</code>规则中使用的速记：</p> <pre><code class="language-php">*:focus { border:2px dotted #ff8800; } </code></pre> <p>这实际上是以下规则集的速记连接：</p> <pre><code class="language-php">*:focus { border-width:2px; border-style:dotted; border-color:#ff8800; } </code></pre> <p>使用速记规则时，只需应用到您希望更改值的点即可。因此，您可以使用以下内容仅设置边框的宽度和样式，选择不设置其颜色：</p> <pre><code class="language-php">*:focus { border:2px dotted; } </code></pre> <h6 id="注意-109">注意</h6> <p>属性在速记规则中的放置顺序可能很重要，误放可能会导致意外结果。由于本章节无法详细说明所有属性，如果您希望使用速记 CSS，请查阅 CSS 手册或搜索引擎获取默认属性及其应用顺序的信息。</p> <h1 id="框模型和布局">框模型和布局</h1> <p>影响页面布局的 CSS 属性围绕<em>框模型</em>展开，这是围绕元素的一组嵌套属性。几乎所有元素都具有（或可以具有）这些属性，包括文档主体，您可以（例如）通过以下规则删除其边距：</p> <pre><code class="language-php">body { margin:0px; } </code></pre> <p>对象的框模型从外部开始，从对象的边距开始。边框位于其内部，边框和内部内容之间有填充，最后是对象的内容。</p> <p>一旦掌握了框模型，您将能够专业地布局页面，因为这些属性本身将构成页面样式的大部分。</p> <h2 id="设置边距">设置边距</h2> <p>边距是框模型的最外层。它将元素彼此分开，使用起来非常聪明。例如，假设您给多个元素设置了默认边距为每个元素周围的 10 像素。这是您希望在下面放置两个元素之间出现的空间量，但如果它们每个都有 10 像素的边距，那么结果不是 20 像素的间隙吗？</p> <p>实际上，CSS 克服了这个潜在问题：当具有定义边距的两个元素直接相邻时，仅使用两个边距中较大的一个来分隔它们。如果两个边距的宽度相同，则只使用其中一个宽度。这样，您更有可能得到想要的结果。但是请注意，绝对定位或内联元素的边距不会以这种方式折叠。</p> <p>元素的外边距可以通过<code>margin</code>属性一次性更改，或者通过<code>margin-left</code>、<code>margin-top</code>、<code>margin-right</code>和<code>margin-bottom</code>单独设置。设置<code>margin</code>属性时，可以提供一个、两个、三个或四个参数，其效果如下规则所述：</p> <pre><code class="language-php">/* Set all margins to 1 pixel */ margin:1px; /* Set top and bottom to 1 pixel, and left and right to 2 */ margin:1px 2px; /* Set top to 1 pixel, left and right to 2, and bottom to 3 */ margin:1px 2px 3px; /* Set top to 1 pixel, right to 2, bottom to 3, and left to 4 */ margin:1px 2px 3px 4px; </code></pre> <p>在示例 19-6 中，一个应用于放置在<code>table</code>元素内的正方形元素的<code>margin</code>属性规则（加粗显示）被应用。图 19-13 展示了这个示例加载到浏览器中的情况。表格没有给定尺寸，所以它将尽可能紧密地围绕内部<code><div></code>元素包裹。因此，它上方有 10 像素的外边距，右侧有 20 像素的外边距，下方有 30 像素的外边距，左侧有 40 像素的外边距。</p> <h5 id="示例-19-6-外边距如何应用">示例 19-6. 外边距如何应用</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>CSS Margins</title> <style> #object1 { background :lightgreen; border-style:solid; border-width:1px; font-family :"Courier New"; font-size :9px; width :100px; height :100px; padding :5px; `margin` `:``10px` `20px` `30px` `40px``;` } table { padding :0; border :1px solid black; background :cyan; } </style> </head> <body> <table> <tr> <td> <div id='object1'>margin:<br>10px 20px 30px 40px;</div> </td> </tr> </table> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1913.png" alt="外部表格根据边距宽度扩展" loading="lazy"></p> <h6 id="图19-13-外部表格根据边距宽度扩展">图 19-13. 外部表格根据边距宽度扩展</h6> <h2 id="应用边框">应用边框</h2> <p>盒子模型的边框级别类似于外边距，不同之处在于没有折叠效果。随着我们进入盒子模型，它是下一个级别。用于修改边框的主要属性包括<code>border</code>、<code>border-left</code>、<code>border-top</code>、<code>border-right</code>和<code>border-bottom</code>，每个属性还可以添加其他后缀子属性，如<code>-color</code>、<code>-style</code>和<code>-width</code>。</p> <p>用于<code>margin</code>属性的四种访问单个属性设置的方法也适用于<code>border-width</code>属性，因此以下所有规则均有效：</p> <pre><code class="language-php">/* All borders */ border-width:1px; /* Top/bottom and left/right */ border-width:1px 5px; /* Top, left/right, and bottom */ border-width:1px 5px 10px; /* Top, right, bottom, and left */ border-width:1px 5px 10px 15px; </code></pre> <p>图 19-14 展示了依次应用这些规则到一组正方形元素的情况。在第一个元素中，可以清楚地看到所有边框都有 1 像素的宽度。然而，第二个元素的顶部和底部边框宽度为 1 像素，而其侧边边框各为 5 像素。第三个元素的顶部边框宽度为 1 像素，其侧边为 5 像素宽，底部为 10 像素宽。第四个元素的顶部边框宽度为 1 像素，右侧边框宽度为 5 像素，底部边框宽度为 10 像素，左侧边框宽度为 15 像素。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1914.png" alt="应用长格式和简写边框规则值" loading="lazy"></p> <h6 id="图19-14-应用长格式和简写边框规则值">图 19-14. 应用长格式和简写边框规则值</h6> <p>在前述元素下的最后一个元素不使用简写规则，而是分别设置每个边框宽度。正如你所见，要达到相同的效果需要输入更多内容。</p> <h2 id="调整填充">调整填充</h2> <p>盒子模型的最深层（除了元素内容之外）是内边距，它应用在任何边框和/或外边距的内部。用于修改内边距的主要属性包括<code>padding</code>、<code>padding-left</code>、<code>padding-top</code>、<code>padding-right</code>和<code>padding-bottom</code>。</p> <p>用于<code>margin</code>和<code>border</code>属性的四种访问单个属性设置的方法也适用于<code>padding</code>属性，因此以下所有规则均有效：</p> <pre><code class="language-php">/* All padding */ padding:1px; /* Top/bottom and left/right */ padding:1px 2px; /* Top, left/right, and bottom */ padding:1px 2px 3px; /* Top, right, bottom, and left */ padding:1px 2px 3px 4px; </code></pre> <p>图 19-15 显示了对某个表格单元格内的一些文本应用了填充规则（在 示例 19-7 中以粗体显示），该单元格由规则 <code>display:table-cell;</code> 定义，使包围的 <code><div></code> 元素显示为表格单元格，未给定尺寸，因此它将尽可能紧密地环绕文本。因此，内部元素上方有 10 像素的填充，右侧有 20 像素，下方有 30 像素，左侧有 40 像素。</p> <h5 id="示例-19-7-应用填充">示例 19-7. 应用填充</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>CSS Padding</title> <style> #object1 { border-style:solid; border-width:1px; background :orange; color :darkred; font-family :Arial; font-size :12px; text-align :justify; display :table-cell; width :148px; `padding` `:``10px` `20px` `30px` `40px``;` `}` </style> </head> <body> <div id='object1'>To be, or not to be that is the question: Whether 'tis Nobler in the mind to suffer The Slings and Arrows of outrageous Fortune, Or to take Arms against a Sea of troubles, And by opposing end them.</div> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_1915.png" alt="对对象应用不同的填充值" loading="lazy"></p> <h6 id="图-19-15-对对象应用不同的填充值">图 19-15. 对对象应用不同的填充值</h6> <h2 id="对象内容">对象内容</h2> <p>最后，在盒模型的深层级中心，存在一个可以在本章讨论的所有方式中进行样式设置的元素。如您所知，这个元素可以（通常会）包含进一步的子元素，反过来可能包含子-子元素，依此类推，每个都有自己的样式和盒模型设置。</p> <h1 id="问题-18">问题</h1> <ol> <li> <p>用于将一个样式表导入另一个样式表（或某些 HTML 的 <code><style></code> 部分）的指令是哪个？</p> </li> <li> <p>您可以使用什么 HTML 标签来将样式表导入文档中？</p> </li> <li> <p>哪个 HTML 标签属性用于直接将样式嵌入元素？</p> </li> <li> <p>CSS ID 和 CSS 类之间有什么区别？</p> </li> <li> <p>CSS 规则中用于前缀 (a) ID 和 (b) 类名的字符是哪些？</p> </li> <li> <p>在 CSS 规则中，分号的作用是什么？</p> </li> <li> <p>如何向样式表添加注释？</p> </li> <li> <p>CSS 中用于表示任何元素的字符是哪个？</p> </li> <li> <p>如何在 CSS 中选择一组不同的元素和/或元素类型？</p> </li> <li> <p>给定具有相等优先级的一对 CSS 规则，如何使其中一个比另一个具有更高的优先级？</p> </li> </ol> <p>参见 “第十九章答案”，以获取这些问题的答案。</p> <h1 id="第二十章使用-css3-实现高级-css">第二十章：使用 CSS3 实现高级 CSS</h1> <p>CSS 的第一个实现是在 1996 年起草，并于 1999 年发布；自 2001 年以来，所有浏览器版本都支持它。这个版本的标准（CSS1）在 2008 年进行了修订。1998 年，开发人员开始起草第二个规范（CSS2）；其标准在 2007 年完成，并在 2009 年进行了修订。</p> <p>CSS3 规范的开发始于 2001 年，一些功能于 2009 年提出，最新的推荐截至 2020 年仍在进行中。</p> <p>CSS4 已由 CSS 工作组提出，尽管这并非一个重大进步。相反，它只是 CSS 的一部分——选择器的发展，其内容超出了本书的范围，因为到我写这篇文章时，2021 年仍在进行推荐。如果你感兴趣，可以访问 <a href="https://tinyurl.com/l4selectors" target="_blank">drafts.csswg.org 上的资源</a>。</p> <p>幸运的是，CSS 工作组定期发布它认为稳定的 CSS 模块的快照。迄今为止，已发布了四份最佳实践文件，最近的一份是<a href="https://w3.org/TR/css-2020" target="_blank">2020 年</a>。这是了解 CSS 当前状况的最佳途径。</p> <p>在本章中，我将带你了解主要浏览器已采纳的最重要的 CSS3 特性，其中许多提供了此前只能通过 JavaScript 实现的功能。</p> <p>我建议尽可能使用 CSS3 实现动态特性，而不是 JavaScript。CSS 提供的特性使文档属性成为文档本身的一部分，而不是通过 JavaScript 添加的附加部分。这样设计更加清晰。</p> <h6 id="注意-110">注意</h6> <p>必须指出的是，CSS 包含非常多的内容，各浏览器对各种功能的实现方式也有所不同（甚至可能完全不同）。因此，我建议在您希望确保所创建的 CSS 在所有浏览器中正常工作时，首先查看<a href="http://caniuse.com" target="_blank">Can I use... 网站</a>。该网站记录了各种功能在各浏览器中的支持情况，因此它始终比这本书更加及时更新，而 CSS 在这段时间内也可能有很大变化。</p> <h1 id="属性选择器-1">属性选择器</h1> <p>在前一章中，我详细介绍了各种 CSS 属性选择器，现在我将快速回顾一下。选择器在 CSS 中用于匹配 HTML 元素，共有 10 种不同类型，如表 20-1 所示。</p> <p>表 20-1. CSS 选择器、伪类和伪元素</p> <table> <thead> <tr> <th>选择器类型</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td>通用选择器</td> <td><code>* { color:#555; }</code></td> </tr> <tr> <td>类型选择器</td> <td><code>.classname { color:blue; }</code></td> </tr> <tr> <td>类选择器</td> <td><code>.classname { color:blue; }</code></td> </tr> <tr> <td>ID 选择器</td> <td><code>#id</code> <code>{ background:cyan; }</code></td> </tr> <tr> <td>后代选择器</td> <td><code>span em { color:green; }</code></td> </tr> <tr> <td>子选择器</td> <td><code>div > em { background:lime; }</code></td> </tr> <tr> <td>相邻兄弟选择器</td> <td><code>i + b { color:gray; }</code></td> </tr> <tr> <td>属性选择器</td> <td><code>a[href='info.htm'] { color:red; }</code></td> </tr> <tr> <td>伪类</td> <td><code>a:hover { font-weight:bold; }</code></td> </tr> <tr> <td>伪元素</td> <td><code>P::first-letter { font-size:300%; }</code></td> </tr> </tbody> </table> <p>CSS3 设计师们决定这些选择器中的大多数工作方式良好，但进行了三项增强，使您可以更轻松地基于属性内容匹配元素。以下各节详细讨论这些增强功能。</p> <h2 id="匹配字符串的部分">匹配字符串的部分</h2> <p>在 CSS2 中，您可以使用诸如 <code>a[href='info.htm']</code> 的选择器来匹配 <code>href</code> 属性中出现的字符串 <code>info.htm</code>，但无法仅匹配字符串的 <em>部分</em>。CSS3 提供了三个新运算符：<code>^</code>、<code>$</code> 和 <code>*</code>。如果其中一个直接位于 <code>=</code> 符号之前，则可以分别匹配字符串的开头、结尾或任何部分。</p> <h3 id="运算符-">运算符 <code>^=</code></h3> <p>此运算符匹配字符串的开头。例如，以下内容将匹配任何<code>href</code>属性其值以字符串<code>http://website</code>开头的情况：</p> <pre><code class="language-php">a[href^='http://website'] </code></pre> <p>因此，以下元素将匹配：</p> <pre><code class="language-php"><a href='http://website.com'> </code></pre> <p>但这并不会：</p> <pre><code class="language-php"><a href='http://mywebsite.com'> </code></pre> <h3 id="运算符--1">运算符 <code>$=</code></h3> <p>要仅匹配字符串的结尾，可以使用类似以下选择器，将匹配任何<code>img</code>标签其<code>src</code>属性以<code>.png</code>结尾的情况：</p> <pre><code class="language-php">img[src$='.png'] </code></pre> <p>例如，以下内容将匹配：</p> <pre><code class="language-php"><img src='photo.png'> </code></pre> <p>但这并不会：</p> <pre><code class="language-php"><img src='snapshot.jpg'> </code></pre> <h3 id="运算符--2">运算符 <code>*=</code></h3> <p>要匹配属性中任何位置的任何子字符串，可以使用类似以下选择器，它找到页面上任何链接并在其中任何位置包含字符串<code>google</code>的情况：</p> <pre><code class="language-php">a[href*='google'] </code></pre> <p>例如，HTML 片段 <code><a href='http://google.com'></code> 将会匹配，而片段 <code><a href='http://gmail.com'></code> 则不会。</p> <h1 id="属性-box-sizing">属性 <code>box-sizing</code></h1> <p>W3C 盒模型指定对象的宽度和高度应仅引用元素内容的尺寸，而忽略任何填充或边框。但一些网页设计师希望指定引用整个元素（包括任何填充和边框）的尺寸。</p> <p>为了提供此功能，CSS3 允许您使用 <code>box-sizing</code> 属性选择希望使用的盒模型。例如，要使用包括填充和边框在内的对象总宽度和高度，请使用此声明：</p> <pre><code class="language-php">box-sizing:border-box; </code></pre> <p>或者，要使对象的宽度和高度仅引用其内容，请使用此声明（默认情况）：</p> <pre><code class="language-php">box-sizing:content-box; </code></pre> <h1 id="css3-背景">CSS3 背景</h1> <p>CSS3 提供了两个新属性：<code>background-clip</code> 和 <code>background-origin</code>。它们之间，您可以指定背景应从元素内的何处开始，并如何剪切背景，以使其不显示在不需要的盒模型部分。</p> <p>要实现这一点，这两个属性都支持以下值：</p> <p><code><dfn class="keep-together"></code>border-box<code></dfn></code></p> <p>指的是边框的外边缘</p> <p><code><dfn class="keep-together"></code>padding-box<code></dfn></code></p> <p>指的是填充区域的外边缘</p> <p><code><dfn class="keep-together"></code>content-box<code></dfn></code></p> <p>指的是内容区域的外边缘</p> <h2 id="属性-background-clip">属性 <code>background-clip</code></h2> <p><code>background-clip</code>属性指定了如果背景出现在元素的边框或填充区域内，则应该被忽略（剪切）。例如，以下声明指定背景可以显示在元素的所有部分，直到边框的外缘：</p> <pre><code class="language-php">background-clip:border-box; </code></pre> <p>要防止背景出现在元素的边框区域内，可以将其限制为仅出现在其填充区域外缘内的元素部分，如下所示：</p> <pre><code class="language-php">background-clip:padding-box; </code></pre> <p>或者要限制背景仅显示在元素的内容区域内，请使用以下声明：</p> <pre><code class="language-php">background-clip:content-box; </code></pre> <p>图 20-1 显示了在 Safari 网页浏览器中显示的三行元素，第一行使用了<code>background-clip</code>属性的<code>border-box</code>值，第二行使用了<code>padding-box</code>，第三行使用了<code>content-box</code>。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2001.png" alt="CSS3 背景属性的不同组合方式" loading="lazy"></p> <h6 id="图-20-1-css3-背景属性的不同组合方式">图 20-1. CSS3 背景属性的不同组合方式</h6> <p>在第一行，内部框（已加载到元素左上角的图像文件，不重复显示）可以在元素的任何位置显示。您还可以清楚地看到它显示在第一个框的边框区域，因为边框已设置为点状。</p> <p>在第二行，背景图像和背景阴影均不显示在边框区域，因为它们已被剪切到了具有<code>background-clip</code>属性值为<code>padding-box</code>的填充区域内。</p> <p>然后，在第三行，背景阴影和图像均已被剪切，仅在每个元素的内部内容区域内显示（显示在浅色虚线框内），使用了<code>background-clip</code>属性值为<code>content-box</code>。</p> <h2 id="background-origin-属性">background-origin 属性</h2> <p>使用<code>background-origin</code>属性，您可以通过指定图像的左上角应从哪里开始来控制背景图像的位置。例如，以下声明指定背景图像的原点应位于边框外缘的左上角：</p> <pre><code class="language-php">background-origin:border-box; </code></pre> <p>要将图像的原点设置为填充区域的左上外角，请使用以下声明：</p> <pre><code class="language-php">background-origin:padding-box; </code></pre> <p>要将图像的原点设置为元素内部内容区域的左上角，请使用以下声明：</p> <pre><code class="language-php">background-origin:content-box; </code></pre> <p>再次查看图 20-1，您可以看到在每一行中，第一个框使用了<code>background-origin</code>属性的<code>border-box</code>值，第二个框使用了<code>padding-box</code>，第三个框使用了<code>content-box</code>。因此，在每一行中，较小的内部框显示在第一个框的边框的左上角，第二个框的填充的左上角，以及第三个框的内容的左上角。</p> <h6 id="注意-111">注意</h6> <p>请注意，关于内部框的起源，行之间唯一的差异在于，在第 2 行和第 3 行中，内部框被裁剪到填充和内容区域，因此在这些区域之外，框的任何部分都不会显示。</p> <h2 id="属性-background-size">属性 <code>background-size</code></h2> <p>就像在 <code><img></code> 标签中使用图像时可以指定宽度和高度一样，您现在也可以在所有浏览器的最新版本中为背景图像指定宽度和/或高度。</p> <p>您可以如下应用此属性（其中 <em><code>ww</code></em> 是宽度，<em><code>hh</code></em> 是高度）：</p> <pre><code class="language-php">background-size:*`ww`*px *`hh`*px; </code></pre> <p>如果您愿意，您可以只使用一个参数，然后两个维度都将设置为该值。此外，如果将此属性应用于块级元素（如 <code><div></code>）（而不是内联元素，如 <code><span></code>），则可以将宽度和/或高度指定为百分比，而不是固定值。</p> <h2 id="使用-auto-值">使用 <code>auto</code> 值</h2> <p>如果您希望仅缩放背景图像的一个维度，并使另一个维度自动缩放以保持相同的比例，您可以像这样使用值 <code>auto</code>：</p> <pre><code class="language-php">background-size:100px auto; </code></pre> <p>这将宽度设置为 100 像素，并将高度设置为与宽度增加或减少的比例值。</p> <h6 id="注意-112">注意</h6> <p>不同的浏览器可能需要不同版本的各种背景属性名称，请在使用它们时参考<a href="http://caniuse.com" target="_blank">Can I use... website</a>，以确保您应用于目标浏览器所需的所有版本。</p> <h2 id="多重背景">多重背景</h2> <p>使用 CSS3 您可以将多个背景附加到一个元素，每个背景都可以使用先前讨论的 CSS3 背景属性。图 20-2 显示了一个示例；八个不同的图像被分配到背景中，以创建证书边框的四个角和四条边。</p> <p>要在单个 CSS 声明中显示多个背景图像，请用逗号分隔它们。示例 20-1 展示了用于创建 图 20-2 背景的 HTML 和 CSS。</p> <h5 id="示例-20-1-在背景中使用多个图像">示例 20-1. 在背景中使用多个图像</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <!-- backgroundimages.html --> <head> <title>CSS3 Multiple Backgrounds Example</title> <style> .border { font-family:'Times New Roman'; font-style :italic; font-size :170%; text-align :center; padding :60px; width :350px; height :500px; background :url('b1.gif') top left no-repeat, url('b2.gif') top right no-repeat, url('b3.gif') bottom left no-repeat, url('b4.gif') bottom right no-repeat, url('ba.gif') top repeat-x, url('bb.gif') left repeat-y, url('bc.gif') right repeat-y, url('bd.gif') bottom repeat-x } </style> </head> <body> <div class='border'> <h1>Employee of the month</h1> <h2>Awarded To:</h2> <h3>__________________</h3> <h2>Date:</h2> <h3>___/___/_____</h3> </div> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2002.png" alt="" loading="lazy"></p> <h6 id="图-20-2-使用多个图像创建的背景">图 20-2. 使用多个图像创建的背景</h6> <p>查看 CSS 部分，您会看到 <code>background</code> 声明的前四行将角落图像放置在元素的四个角上，最后四行则放置边缘图像，因为背景图像的优先顺序从顶部到底部。换句话说，在它们重叠的地方，额外的背景图像将出现在已放置图像的后面。如果 GIF 图像的顺序相反，重复的边缘图像将显示在角落的顶部，这将是不正确的。</p> <h6 id="注意-113">注意</h6> <p>使用此 CSS，您可以将包含元素调整为任何尺寸，边框将始终正确调整大小以适应，这比使用表格或多个元素实现相同效果要简单得多。</p> <h1 id="css3-边框">CSS3 边框</h1> <p>CSS3 还为边框的呈现方式带来了更大的灵活性，允许您独立更改所有四个边框边缘的颜色，显示边缘和角落的图像，为应用圆角边框提供半径值，并将盒子阴影放置在元素下方。</p> <h2 id="border-color-属性"><strong>border-color 属性</strong></h2> <p>有两种方法可以将颜色应用到边框上。首先，您可以将单一颜色传递给属性，如下所示：</p> <pre><code class="language-php">border-color:#888; </code></pre> <p>此属性将元素的所有边框设置为中灰色。您还可以像这样单独设置边框颜色，这会将边框颜色设置为各种灰色色调：</p> <pre><code class="language-php">border-top-color :#000; border-left-color :#444; border-right-color :#888; border-bottom-color:#ccc; </code></pre> <p>或者您可以使用单个声明来分别设置所有颜色，如下所示：</p> <pre><code class="language-php">border-color:#f00 #0f0 #880 #00f; </code></pre> <p>此声明将顶部边框颜色设置为<code>#f00</code>，右侧设置为<code>#0f0</code>，底部设置为<code>#880</code>，左侧设置为<code>#00f</code>（分别为红色、绿色、橙色和蓝色）。您还可以使用颜色名称作为参数。</p> <h2 id="border-radius-属性"><strong>border-radius 属性</strong></h2> <p>在 CSS3 之前，有才华的 Web 开发人员为了实现圆角边框而进行了许多微调和修复，通常使用<code><table></code>或<code><div></code>标签。</p> <p>但是现在，在元素上添加圆角边框真的很简单，并且在所有主要浏览器的最新版本中均可正常工作，如图 20-3 所示，显示了以不同方式显示的 10 像素边框。 示例 20-2 显示了此 HTML。</p> <h5 id="示例-20-2-border-radius-属性">示例 20-2. border-radius 属性</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <!-- borderradius.html --> <head> <title>CSS3 Border Radius Examples</title> <style> .box { margin-bottom:10px; font-family :'Courier New', monospace; font-size :12pt; text-align :center; padding :10px; width :380px; height :75px; border :10px solid #006; } .b1 { border-radius :40px; } .b2 { border-radius :40px 40px 20px 20px; } .b3 { border-top-left-radius :20px; border-top-right-radius :40px; border-bottom-left-radius :60px; border-bottom-right-radius :80px; } .b4 { border-top-left-radius :40px 20px; border-top-right-radius :40px 20px; border-bottom-left-radius :20px 40px; border-bottom-right-radius :20px 40px; } </style> </head> <body> <div class='box b1'> border-radius:40px; </div> <div class='box b2'> border-radius:40px 40px 20px 20px; </div> <div class='box b3'> border-top-left-radius &nbsp;&nbsp;&nbsp;:20px;<br> border-top-right-radius &nbsp;&nbsp;:40px;<br> border-bottom-left-radius :60px;<br> border-bottom-right-radius:80px; </div> <div class='box b4'> border-top-left-radius &nbsp;&nbsp;&nbsp;:40px 20px;<br> border-top-right-radius &nbsp;&nbsp;:40px 20px;<br> border-bottom-left-radius :20px 40px;<br> border-bottom-right-radius:20px 40px; </div> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2003.png" alt="混合和匹配各种边界半径属性" loading="lazy"></p> <h6 id="图20-3-混合和匹配各种边界半径属性">图 20-3. 混合和匹配各种边界半径属性</h6> <p>因此，例如，要创建半径为 20 像素的圆角边框，您只需使用以下声明：</p> <pre><code class="language-php">border-radius:20px; </code></pre> <p>您可以为每个角落单独指定半径，如下所示（顺时针方向从左上角开始应用）：</p> <pre><code class="language-php">border-radius:10px 20px 30px 40px; </code></pre> <p>如果您愿意，也可以单独处理元素的每个角落，如下所示：</p> <pre><code class="language-php">border-top-left-radius :20px; border-top-right-radius :40px; border-bottom-left-radius :60px; border-bottom-right-radius:80px; </code></pre> <p>而且，当引用单独的角落时，您可以提供两个参数来选择不同的垂直和水平半径（产生更有趣和微妙的边框），如下所示：</p> <pre><code class="language-php">border-top-left-radius :40px 20px; border-top-right-radius :40px 20px; border-bottom-left-radius :20px 40px; border-bottom-right-radius:20px 40px; </code></pre> <p>第一个参数是水平半径，第二个是垂直半径。</p> <h1 id="盒子阴影"><strong>盒子阴影</strong></h1> <p>要应用盒子阴影，请指定从对象到水平和垂直偏移量，要添加的阴影模糊量以及要使用的颜色，如下所示：</p> <pre><code class="language-php">box-shadow:15px 15px 10px #888; </code></pre> <p><code>15px</code>的两个实例指定了元素从垂直和水平方向的偏移量，这些值可以是负数、零或正数。<code>10px</code>指定了模糊量，较小的值会导致较少的模糊效果，<code>#888</code>是阴影的颜色，可以是任何有效的颜色值。此声明的结果可在图 20-4 中看到。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2004.png" alt="元素下方显示的盒子阴影" loading="lazy"></p> <h6 id="图-20-4-元素下方显示的盒子阴影">图 20-4. 元素下方显示的盒子阴影</h6> <h1 id="元素溢出">元素溢出</h1> <p>在 CSS2 中，可以通过将<code>overflow</code>属性设置为<code>hidden</code>、<code>visible</code>、<code>scroll</code>或<code>auto</code>来指示当一个元素过大以至于无法完全包含在其父元素内时该如何处理。但是在 CSS3 中，您现在还可以将这些值分别应用于水平或垂直方向，就像这些示例声明一样：</p> <pre><code class="language-php">overflow-x:hidden; overflow-x:visible; overflow-y:auto; overflow-y:scroll; </code></pre> <h1 id="多列布局">多列布局</h1> <p>网页开发者最常要求的功能之一是多列布局，在 CSS3 中这终于实现了。现在，通过指定列数，以及（可选地）选择它们之间的间距和分隔线的类型，即可轻松实现文本在多列中的流动，如图 20-5 所示（由示例 20-3 创建）。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2005.png" alt="多列中的流动文本" loading="lazy"></p> <h6 id="图-20-5-多列中的流动文本">图 20-5. 多列中的流动文本</h6> <h5 id="示例-20-3-使用-css-创建多列">示例 20-3. 使用 CSS 创建多列</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <!-- multiplecolumns.html --> <head> <title>Multiple Columns</title> <style> .columns { text-align :justify; font-size :16pt; column-count :3; column-gap :1em; column-rule :1px solid black; } </style> </head> <body> <div class='columns'> Now is the winter of our discontent Made glorious summer by this sun of York; And all the clouds that lour'd upon our house In the deep bosom of the ocean buried. Now are our brows bound with victorious wreaths; Our bruised arms hung up for monuments; Our stern alarums changed to merry meetings, Our dreadful marches to delightful measures. Grim-visaged war hath smooth'd his wrinkled front; And now, instead of mounting barded steeds To fright the souls of fearful adversaries, He capers nimbly in a lady's chamber To the lascivious pleasing of a lute. </div> </body> </html> </code></pre> <p>在<code>.columns</code>类中，前两行仅告诉浏览器将文本右对齐，并将其设置为<code>16pt</code>的字体大小。这些声明对于多列布局并不需要，但它们改善了文本显示效果。其余的行设置了元素，使得文本可以在其中通过三列流动，列与列之间有<code>1em</code>的间隔，并在每个间隔的中间有一个单像素的边框。</p> <h1 id="颜色和不透明度">颜色和不透明度</h1> <p>CSS3 极大地扩展了定义颜色的方式，现在您还可以使用 CSS 函数以常见格式 RGB（红、绿、蓝）、RGBA（红、绿、蓝和 alpha）、HSL（色调、饱和度和亮度）和 HSLA（色调、饱和度、亮度和 alpha）应用颜色。alpha 值指定了颜色的透明度，使底层元素可以显示出来。</p> <h2 id="hsl-颜色">HSL 颜色</h2> <p>要使用<code>hsl</code>函数定义颜色，必须首先从色轮上选择一个介于<code>0</code>和<code>359</code>之间的色调值。任何更高的颜色数值都会简单地回到开始，因此值<code>0</code>是红色，值<code>360</code>和<code>720</code>也是红色。</p> <p>在色轮中，红色、绿色和蓝色的主要颜色之间相隔 120 度，因此纯红色是<code>0</code>，绿色是<code>120</code>，蓝色是<code>240</code>。这些值之间的数字代表不同比例的主要颜色混合的不同色调。</p> <p>接下来，您需要饱和度级别，这是一个介于 0 和 100%之间的值。这指定了颜色将显示多么淡或多么鲜艳。饱和度值从轮盘的中心开始，以中灰色（饱和度为 0%）开始，然后随着向外边缘进展而变得越来越鲜艳（饱和度为 100%）。</p> <p>剩下的就是您决定颜色亮度的方式，通过选择介于 0 和 100%之间的亮度值。亮度值为<code>50%</code>给出最完整、最明亮的颜色；减少该值（最少为<code>0%</code>）会使颜色变暗，直到显示为黑色；增加该值（最多为<code>100%</code>）会使颜色变亮，直到显示为白色。您可以将此想象为将黑色或白色的级别混合到颜色中。</p> <p>因此，例如，要选择具有标准百分比亮度的完全饱和的黄色，您可以使用以下声明：</p> <pre><code class="language-php">color:hsl(60, 100%, 50%); </code></pre> <p>或者，对于较深的蓝色，您可以使用以下声明：</p> <pre><code class="language-php">color:hsl(240, 100%, 40%); </code></pre> <p>您还可以在期望颜色的任何属性（如<code>background-color</code>等）上使用此（和所有其他 CSS 颜色函数）。</p> <h2 id="hsla-颜色">HSLA 颜色</h2> <p>为了进一步控制颜色的显示方式，您可以使用<code>hsla</code>函数，为颜色提供第四个（alpha）级别，这是一个介于<code>0</code>和<code>1</code>之间的浮点值。值<code>0</code>指定颜色完全透明，而<code>1</code>表示完全不透明。</p> <p>这是您如何选择具有标准亮度和 30%不透明度的完全饱和的黄色：</p> <pre><code class="language-php">color:hsla(60, 100%, 50%, 0.3); </code></pre> <p>或者，对于具有 82%不透明度的完全饱和但较浅的蓝色，您可以使用以下声明：</p> <pre><code class="language-php">color:hsla(240, 100%, 60%, 0.82); </code></pre> <h2 id="rgb-颜色">RGB 颜色</h2> <p>您可能更熟悉选择颜色的 RGB 系统，因为它类似于<code>#nnnnnn</code>和<code>#nnn</code>颜色格式。例如，要将黄色应用于属性，您可以使用以下任一声明（第一个支持 1600 万种颜色，第二个支持 4000 种颜色）：</p> <pre><code class="language-php">color:#ffff00; color:#ff0; </code></pre> <p>您还可以使用 CSS 的<code>rgb</code>函数来实现相同的结果，但使用十进制数字而不是十六进制（其中 255 十进制是 ff 十六进制）：</p> <pre><code class="language-php">color:rgb(255, 255, 0); </code></pre> <p>但比这更好的是，您甚至不必再考虑最多 256 个数量级，因为您可以指定百分比值，就像这样：</p> <pre><code class="language-php">color:rgb(100%, 100%, 0); </code></pre> <p>实际上，您现在可以通过简单地考虑其主要颜色来非常接近所需的颜色。例如，绿色和蓝色制成青色，因此，要创建接近青色但含有比绿色更多蓝色的颜色，您可以在 0%红色、40%绿色和 60%蓝色进行良好的初步猜测，并尝试以下声明：</p> <pre><code class="language-php">color:rgb(0%, 40%, 60%); </code></pre> <h2 id="rgba-颜色">RGBA 颜色</h2> <p>与<code>hsla</code>函数一样，<code>rgba</code>函数支持第四个 alpha 参数，因此，例如，您可以通过以下声明以 40%的不透明度应用先前的类青色：</p> <pre><code class="language-php">color:rgba(0%, 40%, 60%, 0.4); </code></pre> <h2 id="不透明度属性">不透明度属性</h2> <p><code>opacity</code>属性提供与<code>hsla</code>和<code>rgba</code>函数相同的 Alpha 控制，但允许您单独修改对象的不透明度（或透明度，如果您更喜欢）。</p> <p>要使用它，请将如下声明应用到元素上（在此示例中将不透明度设置为 25%，即 75%透明）：</p> <pre><code class="language-php">opacity:0.25; </code></pre> <h1 id="文本效果">文本效果</h1> <p>通过 CSS3 现在可以为文本应用多种新效果，包括文本阴影、文本重叠和单词换行。</p> <h2 id="text-shadow-属性">text-shadow 属性</h2> <p><code>text-shadow</code>属性类似于<code>box-shadow</code>属性，并接受相同的一组参数：水平和垂直偏移量、模糊量以及要使用的颜色。例如，以下声明使阴影在水平和垂直方向上各偏移 3 像素，并以深灰色显示阴影，模糊量为 4 像素：</p> <pre><code class="language-php">text-shadow:3px 3px 4px #444; </code></pre> <p>此声明的结果看起来像图 20-6，并在所有主要浏览器的最新版本中均有效（但不适用于 IE 9 或更低版本）。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2006.png" alt="为文本应用阴影" loading="lazy"></p> <h6 id="图-20-6-为文本应用阴影">图 20-6. 为文本应用阴影</h6> <h2 id="text-overflow-属性">text-overflow 属性</h2> <p>使用任何 CSS 溢出属性的<code>hidden</code>值时，您还可以使用<code>text-overflow</code>属性，在截断之前放置一个省略号（三个点），以指示某些文本已被截断，如下所示：</p> <pre><code class="language-php">text-overflow:ellipsis; </code></pre> <p>如果没有此属性，则截断文本“To be, or not to be. That is the question.”的结果将如图 20-7 所示；但是，应用了该声明后，结果就像图 20-8 一样。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2007.png" alt="文本被自动截断" loading="lazy"></p> <h6 id="图-20-7-文本被自动截断">图 20-7. 文本被自动截断</h6> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2008.png" alt="文字未被切断，而是使用省略号逐渐消失" loading="lazy"></p> <h6 id="图-20-8-文字未被切断而是使用省略号逐渐消失">图 20-8. 文字未被切断，而是使用省略号逐渐消失</h6> <p>为使其起作用，需要三件事：</p> <ul> <li> <p>元素应具有不可见的<code>overflow</code>属性，例如<code>overflow:hidden</code>。</p> </li> <li> <p>元素必须设置<code>white-space:nowrap</code>属性以约束文本。</p> </li> <li> <p>元素的宽度必须小于文本的宽度以进行截断。</p> </li> </ul> <h2 id="word-wrap-属性">word-wrap 属性</h2> <p>当您有一个非常长的单词宽度大于包含它的元素时，它将溢出或被截断。但作为使用<code>text-overflow</code>属性和截断文本的替代方案，您可以使用<code>word-wrap</code>属性并将值设置为<code>break-word</code>来换行长行，如下所示：</p> <pre><code class="language-php">word-wrap:break-word; </code></pre> <p>例如，在图 20-9 中，单词<em>Honorificabilitudinitatibus</em>过于宽度超出了包含框（其右边缘在字母<em>t</em>和<em>a</em>之间显示为实线垂直线），因为未应用溢出属性，它已超出了其边界。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2009.png" alt="单词过于宽度超出其容器并溢出" loading="lazy"></p> <h6 id="图-20-9-字对容器来说太宽溢出了">图 20-9. 字对容器来说太宽，溢出了</h6> <p>但在 图 20-10 中，该元素的 <code>word-wrap</code> 属性被赋予了 <code>break-word</code> 的值，因此这个词已经整齐地换行到了下一行。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2010.png" alt="现在的字在右边缘换行" loading="lazy"></p> <h6 id="图-20-10-现在的字换行在右边缘">图 20-10. 现在的字换行在右边缘</h6> <h1 id="web-字体">Web 字体</h1> <p>CSS3 Web 字体的使用大大增加了网页设计师可用的排版选择，允许从网络上加载并显示字体，而不仅限于用户的计算机。为了实现这一点，可以通过使用<code>@font-face</code>来声明 web 字体，像这样：</p> <pre><code class="language-php">@font-face { font-family:FontName; src:url('FontName.otf'); } </code></pre> <p><code>url</code> 函数需要一个包含字体路径或 URL 的值。在大多数浏览器上，你可以使用 TrueType (<em>.ttf</em>) 或 OpenType (<em>.otf</em>) 字体，但是 Internet Explorer 限制你只能使用转换为嵌入式 OpenType (<em>.eot</em>) 的 TrueType 字体。</p> <p>要告诉浏览器字体的类型，可以使用<code>format</code>函数，例如对于 OpenType 字体：</p> <pre><code class="language-php">@font-face { font-family:FontName; src:url('FontName.otf') format('opentype'); } </code></pre> <p>或者对于 TrueType 字体：</p> <pre><code class="language-php">@font-face { font-family:FontName; src:url('FontName.ttf') format('truetype'); } </code></pre> <p>然而，因为 Internet Explorer 只接受 EOT 字体，它会忽略包含<code>format</code>函数的<code>@font-face</code>声明。</p> <h2 id="google-web-字体">Google Web 字体</h2> <p>使用 Web 字体的一个非常棒的方式之一是从 Google 的服务器免费加载它们。要了解更多信息，请访问 <a href="http://fonts.google.com" target="_blank">Google 字体网站</a>，见图 20-11，在那里你可以获取超过一千种字体。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2011.png" alt="" loading="lazy"></p> <h6 id="图-20-11-google-的一些-web-字体">图 20-11. Google 的一些 Web 字体</h6> <p>为了演示使用其中一种字体的简易性，这里展示如何在 HTML 中加载 Google 字体（在此例中为 Lobster），以用于 <code><h1></code> 标题：</p> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <style> h1 { font-family:'Lobster', arial, serif; } </style> <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'> </head> <body> <h1>Hello</h1> </body> </html> </code></pre> <p>当你从该网站选择字体时，Google 提供了 <code><link></code> 标签，可以复制并粘贴到你网页的 <code><head></code> 中。</p> <h1 id="变换">变换</h1> <p>使用变换，你可以在任意三个维度中进行倾斜、旋转、拉伸和挤压元素。这使得通过摆脱<code><div></code>等元素的统一矩形布局，很容易创建出色的效果，因为现在它们可以以多种角度和形式展示。</p> <p>要执行变换，使用 <code>transform</code> 属性。你可以对 <code>transform</code> 属性应用各种属性，从值 <code>none</code> 开始，它将对象重置为非变换状态：</p> <pre><code class="language-php">transform:none; </code></pre> <p>你可以将以下一个或多个函数提供给 <code>transform</code> 属性：</p> <p><dfn class="keep-together"><code>matrix</code></dfn></p> <p>通过应用值矩阵对其应用矩阵来变换对象</p> <p><dfn class="keep-together"><code>translate</code></dfn></p> <p>移动元素的原点</p> <p><dfn class="keep-together"><code>scale</code></dfn></p> <p>缩放对象</p> <p><dfn class="keep-together"><code>rotate</code></dfn></p> <p>旋转对象</p> <p><dfn class="keep-together"><code>skew</code></dfn></p> <p>倾斜对象</p> <p>唯一可能让您费解的是 <code>skew</code>。使用此功能时，一个坐标相对于坐标平面或轴的距离在一个方向上被位移。因此，例如，当被倾斜时，矩形被转换为平行四边形。</p> <p>这些函数也有单一版本，如 <code>translateX</code>、<code>scaleY</code> 等。</p> <p>例如，要将元素顺时针旋转 45 度，可以应用以下声明：</p> <pre><code class="language-php">transform:rotate(45deg); </code></pre> <p>同时，您可以放大此对象，例如以下声明，将其宽度放大 1.5 倍，高度放大 2 倍，然后执行旋转。图 20-12 显示了应用变换前后的对象：</p> <pre><code class="language-php">transform:scale(1.5, 2) rotate(45deg); </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2012.png" alt="一个在变换前后的对象" loading="lazy"></p> <h6 id="图-20-12-变换前后的对象">图 20-12. 变换前后的对象</h6> <h2 id="3d-变换">3D 变换</h2> <p>您还可以通过使用以下 CSS3 3D 变换功能来在三维空间中变换对象：</p> <p><dfn class="keep-together"><code>perspective</code></dfn></p> <p>释放元素，使其脱离二维空间，并创建一个可以移动的第三维度。必须与 3D CSS 函数一起使用。</p> <p><dfn class="keep-together"><code>transform-origin</code></dfn></p> <p>利用透视，设置所有线条汇聚到一个单一点的位置。</p> <p><dfn class="keep-together"><code>translate3d</code></dfn></p> <p>将元素移动到其三维空间中的另一个位置。</p> <p><dfn class="keep-together"><code>scale3d</code></dfn></p> <p>重新调整一个或多个维度。</p> <p><dfn class="keep-together"><code>rotate3d</code></dfn></p> <p>将元素绕 x、y 和 z 轴之一旋转。</p> <p>图 20-13 显示了如何使用类似以下的 CSS3 3D 变换规则将二维对象旋转至三维空间。</p> <pre><code class="language-php">transform:perspective(200px) rotateX(10deg) rotateY(20deg) rotateZ(30deg); </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2013.png" alt="一个在三维空间中旋转的图形" loading="lazy"></p> <h6 id="图-20-13-在三维空间中旋转的图形">图 20-13. 在三维空间中旋转的图形</h6> <h1 id="过渡">过渡</h1> <p>也出现在所有主要浏览器的最新版本中（包括 Internet Explorer 10，但不包括更低版本）的一个动态新功能称为 <em>过渡</em>。这些指定了在元素变换时要发生的动画效果，浏览器将自动处理所有中间帧。</p> <p>要设置转换，需要提供四个属性，如下所示：</p> <pre><code class="language-php">transition-property :*`property`*; transition-duration :*`time`*; transition-delay :*`time`*; transition-timing-function:*`type`*; </code></pre> <h2 id="要过渡的属性">要过渡的属性</h2> <p>过渡具有诸如 <code>height</code> 和 <code>border-color</code> 的属性。在名为 <code>transition-property</code> 的 CSS 属性中指定要更改的属性。（这里我使用 <em>property</em> 一词，用于描述 CSS 属性及其设置的过渡属性。）您可以通过逗号分隔它们来包含多个属性，如下所示：</p> <pre><code class="language-php">transition-property:width, height, opacity; </code></pre> <p>或者，如果您希望对元素的所有内容（包括颜色）进行过渡，可以使用值 <code>all</code>，如下所示：</p> <pre><code class="language-php">transition-property:all; </code></pre> <h2 id="过渡持续时间">过渡持续时间</h2> <p><code>transition-duration</code>属性需要一个大于等于 0 秒的值，如以下所示，指定过渡应该花费 1.25 秒完成：</p> <pre><code class="language-php">transition-duration:1.25s; </code></pre> <h2 id="过渡延迟">过渡延迟</h2> <p>如果给<code>transition-delay</code>属性赋予大于 0 秒的值（默认值），它将在元素初始显示和过渡开始之间引入延迟。以下代码在 0.1 秒延迟后开始过渡：</p> <pre><code class="language-php">transition-delay:0.1s; </code></pre> <p>如果<code>transition-delay</code>属性的值小于 0 秒（也就是负值），过渡将在属性变更时执行，但看起来似乎是从指定的偏移开始执行，过渡中途进行。</p> <h2 id="过渡时间">过渡时间</h2> <p><code>transition-timing</code>函数属性需要以下一个值：</p> <p><dfn class="keep-together"><code>ease</code></dfn></p> <p>缓慢开始，变快，然后缓慢结束。</p> <p><dfn class="keep-together"><code>linear</code></dfn></p> <p>常速过渡。</p> <p><dfn class="keep-together"><code>ease-in</code></dfn></p> <p>缓慢开始，然后快速进行直至完成。</p> <p><dfn class="keep-together"><code>ease-out</code></dfn></p> <p>快速开始，保持快速进行直至接近结束，然后缓慢结束。</p> <p><dfn class="keep-together"><code>ease-in-out</code></dfn></p> <p>缓慢开始，快速进行，然后缓慢结束。</p> <p>使用任何包含“<strong>ease</strong>”一词的值，确保过渡看起来非常流畅和自然，不像某种线性过渡似乎更加机械。如果这些对你来说还不够丰富，你也可以使用<code>cubic-bezier</code>函数自定义自己的过渡效果。</p> <p>例如，以下是用于创建前述五种过渡类型的声明，演示如何轻松创建自定义过渡：</p> <pre><code class="language-php">transition-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1); transition-timing-function:cubic-bezier(0, 0, 1, 1); transition-timing-function:cubic-bezier(0.42, 0, 1, 1); transition-timing-function:cubic-bezier(0, 0, 0.58, 1); transition-timing-function:cubic-bezier(0.42, 0, 0.58, 1); </code></pre> <h2 id="简写语法">简写语法</h2> <p>你可能会发现使用此属性的简写版本更容易，并在单个声明中包含所有值，如以下示例所示，它将以线性方式过渡所有属性，在 0.3 秒内完成，初始（可选）延迟为 0.2 秒：</p> <pre><code class="language-php">transition:all .3s linear .2s; </code></pre> <p>这样做将为您节省输入许多非常相似声明的麻烦，特别是如果您支持所有主要浏览器前缀。</p> <p>示例 20-4 展示了如何同时使用过渡和变换。CSS 创建了一个方形的橙色元素，里面有一些文本，并且使用<code>hover</code>伪类指定，当鼠标经过该对象时，它应该旋转 180 度，并从橙色变为黄色（见图 20-14）。</p> <h5 id="示例-20-4-悬停效果的过渡">示例 20-4. 悬停效果的过渡</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Transitioning on hover</title> <style> #square { position :absolute; top :50px; left :50px; width :100px; height :100px; padding :2px; text-align :center; border-width :1px; border-style :solid; background :orange; transition :all .8s ease-in-out; } #square:hover { background :yellow; transform :rotate(180deg); } </style> </head> <body> <div id='square'> Square shape<br> created using<br> a simple div<br> element with<br> a 1px border </div> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2014.png" alt="当鼠标悬停时，对象旋转并改变颜色" loading="lazy"></p> <h6 id="图-20-14-当鼠标悬停时对象旋转并改变颜色">图 20-14. 当鼠标悬停时，对象旋转并改变颜色</h6> <p>示例代码通过提供浏览器特定版本的声明来适配所有浏览器。在所有最新的浏览器（包括 IE 10 或更高版本）中，当鼠标悬停时，对象将顺时针旋转，同时从橙色渐变到黄色。</p> <p>CSS 过渡很智能，当它们被取消时，它们会平滑地返回到它们的原始值。因此，如果你在过渡完成之前将鼠标移开，它将立即反转并过渡回其初始状态。</p> <h1 id="问题-19">问题</h1> <ol> <li> <p>CSS3 属性选择器操作符 <code>^=</code>, <code>$=</code>, 和 <code>*=</code> 分别做什么？</p> </li> <li> <p>你使用什么属性来指定背景图像的大小？</p> </li> <li> <p>你可以用哪个属性指定边框的半径？</p> </li> <li> <p>如何在多列上流动文本？</p> </li> <li> <p>列出四个用于指定 CSS 颜色的函数。</p> </li> <li> <p>如何创建一个灰色阴影，位于某些文本下方右下角偏移 5 像素，模糊程度为 3 像素？</p> </li> <li> <p>如何用省略号表示文本被截断？</p> </li> <li> <p>如何在网页中引入 Google Web 字体？</p> </li> <li> <p>你会使用什么 CSS 声明来将对象旋转 90 度？</p> </li> <li> <p>如何设置对象的过渡效果，以便当其任何属性发生变化时，变化将在半秒钟内以线性方式立即过渡？</p> </li> </ol> <p>参见“第二十章答案” 在附录 A 中查看这些问题的答案。</p> <h1 id="第二十一章从-javascript-访问-css">第二十一章：从 JavaScript 访问 CSS</h1> <p>现在您已经对 DOM 和 CSS 有了很好的理解，本章将教您如何直接从 JavaScript 访问 DOM 和 CSS，使您能够创建高度动态和响应式的网站。</p> <p>我还将向您展示如何使用中断，以便您可以创建动画或提供必须继续运行的任何代码（例如钟表）。最后，我将解释如何向 DOM 添加新元素或从中删除现有元素，这样您就无需预先在 HTML 中创建元素，以防 JavaScript 可能需要访问它们。</p> <h1 id="重新访问-getelementbyid-函数">重新访问 getElementById 函数</h1> <p>为了帮助本书其余部分的示例，我想提供一个增强版的 <code>getElementById</code> 函数，用于快速高效地处理 DOM 元素和 CSS 样式，无需包括 jQuery 等框架。</p> <p>但是，为了避免与使用 <code>$</code> 字符的框架发生冲突，我将使用大写 <code>O</code>，因为它是 <em>Object</em> 的首字母，这将在调用函数时返回（通过函数传递的 ID 所代表的对象）。</p> <h2 id="函数-o">函数 O</h2> <p>下面是裸骨函数 <code>O</code> 的样子：</p> <pre><code class="language-php">function O(i) { return document.getElementById(i) } </code></pre> <p>这单独就节省了每次调用时 22 个字符的输入。但我选择稍微扩展该函数，允许将 ID 名称或对象传递给函数，如在 Example 21-1 的完整版本中所示。</p> <h5 id="示例-21-1函数-o">示例 21-1。函数 <code>O</code></h5> <pre><code class="language-php">function O(i) { return typeof i == 'object' ? i : document.getElementById(i) } </code></pre> <p>如果函数被传递一个对象，它只是将该对象再次返回。否则，它假定已传递了一个 ID，并返回该 ID 所引用的对象。</p> <p>但是，我为什么要添加这个首语句呢，它只是将传递给它的对象再次返回？</p> <h2 id="函数-s">函数 S</h2> <p>解答这个问题变得清晰起来，当你看一个称为 <code>S</code> 的伙伴函数，它为您提供了易于访问对象的样式（或 CSS）属性，如 Example 21-2 所示。</p> <h5 id="示例-21-2函数-s">示例 21-2。函数 <code>S</code></h5> <pre><code class="language-php">function S(i) { return O(i).style } </code></pre> <p>此函数名称中的 <code>S</code> 是 <em>Style</em> 的首字母，该函数执行返回所引用元素的样式属性（或子对象）的任务。由于嵌入的 <code>O</code> 函数接受 ID 或对象，您也可以将 ID 或对象传递给 <code>S</code>。</p> <p>让我们通过拿一个 ID 为 <code>myobj</code> 的 <code><div></code> 元素作为例子，将其文本颜色设置为绿色，像这样：</p> <pre><code class="language-php"><div id='myobj'>Some text</div> <script> O('myobj').style.color = 'green' </script> </code></pre> <p>前面的代码将完成工作，但调用新的 <code>S</code> 函数要简单得多，如下所示：</p> <pre><code class="language-php">S('myobj').color = 'green' </code></pre> <p>现在考虑调用 <code>O</code> 后返回的对象存储在例如称为 <code>fred</code> 的对象中的情况，如下所示：</p> <pre><code class="language-php">fred = O('myobj') </code></pre> <p>由于函数 <code>S</code> 的工作方式，我们仍然可以调用它将文本颜色更改为绿色，如下所示：</p> <pre><code class="language-php">S(fred).color = 'green' </code></pre> <p>这意味着无论您希望直接访问对象还是通过其 ID 访问，都可以根据需要将其传递给<code>O</code>或<code>S</code>函数。只需记住，当您传递对象（而不是 ID）时，不要将其放在引号中。</p> <h2 id="c-函数">C 函数</h2> <p>到目前为止，我已为您提供了两个简单的函数，使您可以轻松访问网页上的任何元素和元素的任何样式属性。不过有时，您可能希望一次访问多个元素。您可以通过为每个这样的元素分配一个 CSS 类名来实现这一点，例如这些示例中都使用<code>myclass</code>类：</p> <pre><code class="language-php"><div class='myclass'>Div contents</div> <p class='myclass'>Paragraph contents</p> </code></pre> <p>如果您想要访问页面上使用特定类的所有元素，可以使用<code>C</code>函数（代表<em>Class</em>的首字母），如示例 21-3 中所示，返回一个包含所有匹配类名的对象数组。</p> <h5 id="示例-21-3-c函数">示例 21-3. <code>C</code>函数</h5> <pre><code class="language-php">function C(i) { return document.getElementsByClassName(i) } </code></pre> <p>要使用此函数，只需按以下方式调用它，保存返回的数组，以便根据需要单独访问每个元素，或者（更可能的情况是）通过循环一次性访问它们：</p> <pre><code class="language-php">myarray = C('myclass') </code></pre> <p>现在您可以随意对返回的对象执行任何操作，例如（例如）将其<code>textDecoration</code>样式属性设置为<code>underline</code>，如下所示：</p> <pre><code class="language-php">for (i = 0 ; i < myarray.length ; ++i) S(myarray[i]).textDecoration = 'underline' </code></pre> <p>此代码遍历<code>myarray[]</code>中的对象，然后使用<code>S</code>函数引用每个对象的样式属性，并将其<code>textDecoration</code>属性设置为<code>underline</code>。</p> <h6 id="注意-114">注意</h6> <p>很有可能您在开发代码中不会使用这些<code>O</code>、<code>S</code>和<code>C</code>函数，因为您可能会有自定义或第三方框架来提供此功能，而且还有更多功能。但它们有助于使本书中的示例简短易懂，同时也是 JavaScript 如何可以增强的简单示例。</p> <h2 id="包括函数">包括函数</h2> <p>我在本章的其余部分示例中使用<code>O</code>和<code>S</code>函数，因为它们可以使代码更短且更易于理解。因此，我已将它们与<code>C</code>函数（我认为您会发现它非常有用）保存在了附带示例的存档的第二十一章文件夹中的<em>OSC.js</em>文件中，可以从<a href="https://github.com/RobinNixon/lpmj6" target="_blank">书本示例库</a>免费下载。</p> <p>您可以通过以下语句将这些函数包含在任何网页中——最好是在其<code><head></code>部分，在任何依赖于调用它们的脚本之前：</p> <pre><code class="language-php"><script src='OSC.js'></script> </code></pre> <p><em>OSC.js</em>的内容显示在示例 21-4 中，其中所有内容整理成了仅三行。</p> <h5 id="示例-21-4-oscjs-文件">示例 21-4. OSC.js 文件</h5> <pre><code class="language-php">function O(i) { return typeof i == 'object' ? i : document.getElementById(i) } function S(i) { return O(i).style } function C(i) { return document.getElementsByClassName(i) } </code></pre> <h1 id="从-javascript-中访问-css-属性">从 JavaScript 中访问 CSS 属性</h1> <p>我在早些时候的示例中使用的<code>textDecoration</code>属性代表一个通常以连字符连接的 CSS 属性，就像这样：<code>text-decoration</code>。但由于 JavaScript 将连字符保留为数学运算符使用，因此每当访问连字符连接的 CSS 属性时，必须省略连字符，并将其后的字符设置为大写。</p> <p>这种情况的另一个示例是<code>font-size</code>属性，在 JavaScript 中被引用为放置在点运算符之后的<code>fontSize</code>，就像这样：</p> <pre><code class="language-php">myobject.fontSize = '16pt' </code></pre> <p>另一种方法是更冗长地使用<code>setAttribute</code>函数，该函数<em>支持</em>（实际上要求）标准的 CSS 属性名称，就像这样：</p> <pre><code class="language-php">myobject.setAttribute('style', 'font-size:16pt') </code></pre> <h2 id="一些常见属性">一些常见属性</h2> <p>使用 JavaScript，您可以以类似于使用 CSS 的方式修改 Web 文档中任何元素的任何属性。我已经向您展示了如何使用 JavaScript 简写形式或<code>setAttribute</code>函数来使用精确的 CSS 属性名称访问 CSS 属性，因此我不会详细介绍所有数百个属性。相反，我想向您展示如何访问一些 CSS 属性作为您可以执行的一些操作的概述。</p> <p>首先，让我们通过示例 21-5 来看一下如何从 JavaScript 中修改一些 CSS 属性，该示例加载了前面的三个函数，创建了一个<code><div></code>元素，然后在 HTML 的<code><script></code>部分内发出 JavaScript 语句来修改它的一些属性（见图 21-1）。</p> <h5 id="示例21-5-从-javascript-中访问-css-属性">示例 21-5. 从 JavaScript 中访问 CSS 属性</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Accessing CSS Properties</title> <script src='OSC.js'></script> </head> <body> <div id='object'>Div Object</div> <script> S('object').border = 'solid 1px red' S('object').width = '100px' S('object').height = '100px' S('object').background = '#eee' S('object').color = 'blue' S('object').fontSize = '15pt' S('object').fontFamily = 'Helvetica' S('object').fontStyle = 'italic' </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2101.png" alt="从 JavaScript 修改样式" loading="lazy"></p> <h6 id="图21-1-从-javascript-修改样式">图 21-1. 从 JavaScript 修改样式</h6> <p>通过这种方式修改属性并没有什么好处，因为您可以直接包含一些 CSS，但很快我们将根据用户交互来修改属性，然后您将看到结合 JavaScript 和 CSS 的真正力量。</p> <h2 id="其他属性">其他属性</h2> <p>JavaScript 还打开了对非常广泛的其他属性的访问，例如浏览器窗口的宽度和高度，任何弹出窗口或浏览器窗口或框架的宽度和高度，以及诸如父窗口（如果存在）和本次会话中访问的 URL 历史记录等便捷信息。</p> <p>所有这些属性都是通过点运算符（例如，<code>window.name</code>）从<code>window</code>对象访问的，并且表 21-1 列出了它们以及每个属性的描述。</p> <p>表 21-1. 窗口属性</p> <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>closed</code></td> <td>返回一个布尔值，指示窗口是否已关闭</td> </tr> <tr> <td><code>defaultStatus</code></td> <td>设置或返回窗口状态栏中的默认文本</td> </tr> <tr> <td><code>document</code></td> <td>返回窗口的<code>document</code>对象</td> </tr> <tr> <td><code>frameElement</code></td> <td>返回当前窗口插入的<code>iframe</code>元素</td> </tr> <tr> <td><code>frames</code></td> <td>返回窗口中所有帧和 iframe 的数组</td> </tr> <tr> <td><code>history</code></td> <td>返回窗口的<code>history</code>对象</td> </tr> <tr> <td><code>innerHeight</code></td> <td>设置或返回窗口内容区域的内部高度</td> </tr> <tr> <td><code>innerWidth</code></td> <td>设置或返回窗口内容区域的内部宽度</td> </tr> <tr> <td><code>length</code></td> <td>返回窗口中的帧和 iframe 的数量</td> </tr> <tr> <td><code>localStorage</code></td> <td>允许在 Web 浏览器中保存键/值对</td> </tr> <tr> <td><code>location</code></td> <td>返回窗口的<code>location</code>对象</td> </tr> <tr> <td><code>name</code></td> <td>设置或返回窗口的名称</td> </tr> <tr> <td><code>navigator</code></td> <td>返回窗口的<code>navigator</code>对象</td> </tr> <tr> <td><code>opener</code></td> <td>返回创建当前窗口的窗口的引用</td> </tr> <tr> <td><code>outerHeight</code></td> <td>设置或返回窗口的外部高度，包括工具栏和滚动条</td> </tr> <tr> <td><code>outerWidth</code></td> <td>设置或返回窗口的外部宽度，包括工具栏和滚动条</td> </tr> <tr> <td><code>pageXOffset</code></td> <td>返回文档从窗口左侧水平滚动的像素数</td> </tr> <tr> <td><code>pageYOffset</code></td> <td>返回文档从窗口顶部垂直滚动的像素数</td> </tr> <tr> <td><code>parent</code></td> <td>返回窗口的父窗口</td> </tr> <tr> <td><code>screen</code></td> <td>返回窗口的<code>screen</code>对象</td> </tr> <tr> <td><code>screenLeft</code></td> <td>返回窗口相对于屏幕的<em>x</em>坐标</td> </tr> <tr> <td><code>screenTop</code></td> <td>返回窗口相对于屏幕的<em>y</em>坐标</td> </tr> <tr> <td><code>screenX</code></td> <td>返回窗口相对于屏幕的<em>x</em>坐标</td> </tr> <tr> <td><code>screenY</code></td> <td>返回窗口相对于屏幕的<em>y</em>坐标</td> </tr> <tr> <td><code>sessionStorage</code></td> <td>允许在 Web 浏览器中保存键/值对</td> </tr> <tr> <td><code>self</code></td> <td>返回当前窗口</td> </tr> <tr> <td><code>status</code></td> <td>设置或返回窗口状态栏中的文本</td> </tr> <tr> <td><code>top</code></td> <td>返回顶层浏览器窗口</td> </tr> </tbody> </table> <p>有几点需要注意关于其中一些属性：</p> <ul> <li> <p><code>defaultStatus</code> 和 <code>status</code> 属性只能在用户修改浏览器以允许时设置（这种情况非常少见）。</p> </li> <li> <p><code>history</code> 对象不能被读取（因此无法查看访问者浏览过的网址）。但它支持 <code>length</code> 属性以确定历史记录的长度，并支持 <code>back</code>、<code>forward</code> 和 <code>go</code> 方法以在历史记录中导航到特定页面。</p> </li> <li> <p>当您需要知道 Web 浏览器当前窗口中有多少可用空间时，只需读取 <code>window.innerHeight</code> 和 <code>window.innerWidth</code> 的值。我经常用这些值来在浏览器内居中弹出警报或“确认对话框”窗口。</p> </li> <li> <p><code>screen</code> 对象支持只读属性 <code>availHeight</code>、<code>availWidth</code>、<code>colorDepth</code>、<code>height</code>、<code>pixelDepth</code> 和 <code>width</code>，因此非常适合获取关于用户显示器的信息。</p> </li> </ul> <h6 id="注意-115">注意</h6> <p>这些属性在针对移动电话和平板设备时非常有用，它们能告诉您可用的屏幕空间大小、正在使用的浏览器类型等信息。</p> <p>这些少数信息将帮助您入门，并为您提供 JavaScript 中许多新奇有趣的功能的想法。此章节中涵盖的属性和方法远不止这些，但现在您已经知道如何访问和使用属性，您所需要的就是列出所有资源的资源。我建议您从 <a href="https://tinyurl.com/domexplained" target="_blank">在线文档</a> 开始查看。</p> <h1 id="内联-javascript">内联 JavaScript</h1> <p>使用 <code><script></code> 标签并非执行 JavaScript 语句的唯一方式；您还可以从 HTML 标签中访问 JavaScript，实现出色的动态交互性。例如，要在鼠标经过对象时添加快速效果，可以使用类似于 <code><img></code> 标签中的代码，该示例在 示例 21-6 中默认显示一个苹果，但当鼠标经过对象时会将其替换为橙子，并在鼠标离开时恢复为苹果。</p> <h5 id="示例-21-6-使用内联-javascript">示例 21-6. 使用内联 JavaScript</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Inline JavaScript</title> </head> <body> <img src='apple.png' onmouseover="this.src='orange.png'" onmouseout="this.src='apple.png'"> </body> </html> </code></pre> <h2 id="关键字-this">关键字 <code>this</code></h2> <p>在上述示例中，您可以看到 <code>this</code> 关键字的使用。它告诉 JavaScript 在调用对象上操作，即 <code><img></code> 标签。您可以在 图 21-2 中看到其结果，即鼠标尚未经过苹果时的状态。</p> <h6 id="注意-116">注意</h6> <p>当从内联 JavaScript 调用提供时，关键字 <code>this</code> 表示调用对象。在类方法中使用时，它表示应用方法的对象。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2102.png" alt="内联鼠标悬停 JavaScript 示例" loading="lazy"></p> <h6 id="图-21-2-内联鼠标悬停-javascript-示例">图 21-2. 内联鼠标悬停 JavaScript 示例</h6> <h2 id="在脚本中为对象附加事件">在脚本中为对象附加事件</h2> <p>上述代码等同于为 <code><img></code> 标签提供 ID，并将操作附加到标签的鼠标事件中，如 示例 21-7 中所示。</p> <h5 id="示例-21-7-非内联-javascript">示例 21-7. 非内联 JavaScript</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Non-inline JavaScript</title> <script src='OSC.js'></script> </head> <body> <img id='object' src='apple.png'> <script> O('object').onmouseover = function() { this.src = 'orange.png' } O('object').onmouseout = function() { this.src = 'apple.png' } </script> </body> </html> </code></pre> <p>在 HTML 部分，此示例为 <code><img></code> 元素赋予了 ID <code>object</code>，然后在 JavaScript 部分通过为每个事件附加匿名函数来单独操作它。</p> <h2 id="附加到其他事件">附加到其他事件</h2> <p>无论您是使用内联还是独立的 JavaScript，都可以依附多种事件来执行操作，为用户提供丰富的附加功能。表 21-2 列出了这些事件及其触发时机的详细信息。</p> <p>表 21-2. 事件及其触发时机</p> <table> <thead> <tr> <th>事件</th> <th>发生时</th> </tr> </thead> <tbody> <tr> <td><code>onabort</code></td> <td>当图像加载未完成前停止时</td> </tr> <tr> <td><code>onblur</code></td> <td>当元素失去焦点时^(a)</td> </tr> <tr> <td><code>onchange</code></td> <td>当表单的任何部分发生变化时</td> </tr> <tr> <td><code>onclick</code></td> <td>当对象被点击时</td> </tr> <tr> <td><code>ondblclick</code></td> <td>当对象被双击时</td> </tr> <tr> <td><code>onerror</code></td> <td>当遇到 JavaScript 错误时</td> </tr> <tr> <td><code>onfocus</code></td> <td>当元素获取焦点时</td> </tr> <tr> <td><code>onkeydown</code></td> <td>当按键被按下（包括 Shift、Alt、Ctrl 和 Esc）时</td> </tr> <tr> <td><code>onkeypress</code></td> <td>当按键被按下（不包括 Shift、Alt、Ctrl 和 Esc）时</td> </tr> <tr> <td><code>onkeyup</code></td> <td>当按键释放时</td> </tr> <tr> <td><code>onload</code></td> <td>当对象已加载时</td> </tr> <tr> <td><code>onmousedown</code></td> <td>当鼠标按钮在元素上按下时</td> </tr> <tr> <td><code>onmousemove</code></td> <td>当鼠标在元素上移动时</td> </tr> <tr> <td><code>onmouseout</code></td> <td>当鼠标离开元素时</td> </tr> <tr> <td><code>onmouseover</code></td> <td>当鼠标从元素外部经过时</td> </tr> <tr> <td><code>onmouseup</code></td> <td>当鼠标按钮释放时</td> </tr> <tr> <td><code>onreset</code></td> <td>当表单被重置时</td> </tr> <tr> <td><code>onresize</code></td> <td>当浏览器调整大小时</td> </tr> <tr> <td><code>onscroll</code></td> <td>当文档滚动时</td> </tr> <tr> <td><code>onselect</code></td> <td>当选择文本时</td> </tr> <tr> <td><code>onsubmit</code></td> <td>当表单被提交时</td> </tr> <tr> <td><code>onunload</code></td> <td>当文档被卸载时</td> </tr> <tr> <td>^(a) 一个具有 <em>焦点</em> 的元素是指已被点击或以其他方式进入的元素，如输入字段。</td> <td></td> </tr> </tbody> </table> <h6 id="警告-15">警告</h6> <p>确保将事件附加到有意义的对象上。例如，非表单对象将不会响应 <code>onsubmit</code> 事件。</p> <h1 id="添加新元素">添加新元素</h1> <p>使用 JavaScript，您不仅限于操纵 HTML 文档中提供的元素和对象。事实上，您可以通过将它们插入到 DOM 中随意创建对象。</p> <p>例如，假设您需要一个新的 <code><div></code> 元素。示例 21-8 展示了一种将其添加到网页的方法。</p> <h5 id="示例-21-8-将元素插入到-dom-中">示例 21-8. 将元素插入到 DOM 中</h5> <pre><code class="language-php"><!DOCTYPE html> <html>   <head>     <title>Adding Elements</title>     <script src='OSC.js'></script>   </head>   <body> This is a document with only this text in it.<br><br>     <script>       alert('Click OK to add an element')       newdiv    = document.createElement('div')       newdiv.id = 'NewDiv'       document.body.append(newdiv)       S(newdiv).border = 'solid 1px red'       S(newdiv).width  = '100px'       S(newdiv).height = '100px'       newdiv.innerHTML = "I'm a new object inserted in the DOM"       `setTimeout``(``function``(``)`       `{`         alert('Click OK to remove the element')         newdiv.parentNode.removeChild(newdiv)       `}``,` `1000``)`     </script>   </body> </html> </code></pre> <p>图 21-3 展示了在 Web 文档中添加新 <code><div></code> 元素的代码示例。首先，使用 <code>createElement</code> 创建新元素；然后调用 <code>appendChild</code> 函数，将元素插入到 DOM 中。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2103.png" alt="向 DOM 中插入新元素" loading="lazy"></p> <h6 id="图-21-3-向-dom-中插入新元素">图 21-3. 向 DOM 中插入新元素</h6> <p>之后，为元素分配了各种属性，包括其内部 HTML 的一些文本。然后，为了确保新元素立即显示，设置了一个延迟触发器，延迟执行余下的代码一秒钟，以便给 DOM 更新和显示的时间，然后再弹出关于再次移除元素的警报。有关创建和使用延迟触发器的更多信息，请参见 “使用 setTimeout”。</p> <p>创建的这个新元素与其在原始 HTML 中被包含的方式完全相同，并且具有同样的属性和方法。</p> <h6 id="注-3">注</h6> <p>当我想要创建浏览器内弹出窗口时，有时会使用创建新元素的技术，因为它不依赖于 DOM 中是否有可用的空闲 <code><div></code> 元素。</p> <h2 id="移除元素">移除元素</h2> <p>您还可以从 DOM 中移除元素，包括那些未使用 JavaScript 插入的元素；这比添加元素更容易。假设要移除的元素在对象 <code>element</code> 中，操作如下：</p> <pre><code class="language-php">element.parentNode.removeChild(element) </code></pre> <p>这段代码访问元素的<code>parentNode</code>对象，以便它可以从该节点中移除元素。然后它在父对象上调用<code>removeChild</code>方法，传递要移除的对象。</p> <h2 id="添加和移除元素的替代方案">添加和移除元素的替代方案</h2> <p>插入元素是用于向网页中添加全新对象的。但是如果你的意图只是根据<code>onmouseover</code>或其他事件隐藏和显示对象，不要忘记有几个 CSS 属性可以用于此目的，而不必采取创建和删除 DOM 元素的如此激进的措施。</p> <p>例如，当你想要使一个元素不可见但保持在原位（周围的所有元素保持原位），你可以简单地将对象的<code>visibility</code>属性设置为<code>hidden</code>，就像这样：</p> <pre><code class="language-php">myobject.visibility = 'hidden' </code></pre> <p>要重新显示对象，你可以使用以下内容：</p> <pre><code class="language-php">myobject.visibility = 'visible' </code></pre> <p>你还可以将一个元素折叠到零宽度和高度（周围的所有对象填充释放出的空间），就像这样：</p> <pre><code class="language-php">myobject.display = 'none' </code></pre> <p>然后恢复元素到其原始尺寸，你将使用以下内容：</p> <pre><code class="language-php">myobject.display = 'block' </code></pre> <p>当然，还有<code>innerHTML</code>属性，你可以使用它来改变应用于元素的 HTML，例如：</p> <pre><code class="language-php">mylement.innerHTML = '<b>Replacement HTML</b>' </code></pre> <p>或者，使用我之前概述的<code>O</code>函数：</p> <pre><code class="language-php">O('someid').innerHTML = 'New contents' </code></pre> <p>或者你可以让一个元素似乎消失，就像这样：</p> <pre><code class="language-php">O('someid').innerHTML = '' </code></pre> <h6 id="注意-117">注意</h6> <p>不要忘记你可以从 JavaScript 访问的其他有用的 CSS 属性，比如<code>opacity</code>用于将对象的可见性设置为可见和不可见之间的某个值，或者<code>width</code>和<code>height</code>用于调整对象的大小。当然，使用<code>position</code>属性与值<code>absolute</code>、<code>static</code>、<code>fixed</code>、<code>sticky</code>或<code>relative</code>，你甚至可以将对象定位在（或者在外部）浏览器窗口中任何你喜欢的位置。</p> <h1 id="使用中断">使用中断</h1> <p>JavaScript 提供了对<em>中断</em>的访问，这是一种方法，通过它你可以要求浏览器在一段预定的时间后调用你的代码，甚至在指定的间隔内继续调用它。这为你提供了处理后台任务的手段，例如异步通信，甚至像动画化网络元素这样的事情。</p> <p>中断有两种类型：<code>setTimeout</code>和<code>setInterval</code>，它们有相应的<code>clearTimeout</code>和<code>clearInterval</code>函数用于再次关闭它们。</p> <h2 id="使用-settimeout">使用 setTimeout</h2> <p>当你调用<code>setTimeout</code>时，你传递一些 JavaScript 代码或函数名，并且一个表示代码应在多少毫秒后执行的值，就像这样：</p> <pre><code class="language-php">setTimeout(dothis, 5000) </code></pre> <p>你的<code>dothis</code>函数可能看起来像这样：</p> <pre><code class="language-php">function dothis() { alert('This is your wakeup alert!'); } </code></pre> <h6 id="注意-118">注意</h6> <p>如果你在想，你不能简单地指定<code>alert()</code>（带空括号）作为<code>setTimeout</code>调用的函数，因为函数会立即执行。只有当你提供不带括号的函数名（例如，<code>alert</code>）时，你才能安全地传递函数名，这样它的代码只会在超时发生时执行。</p> <h3 id="传递一个字符串">传递一个字符串</h3> <p>当您需要向函数提供参数时，您还可以向 <code>setTimeout</code> 函数传递一个字符串值，该值直到正确时间才会被执行。例如：</p> <pre><code class="language-php">setTimeout("alert('Hello!')", 5000) </code></pre> <p>实际上，如果您在每个语句后加上分号，您可以提供尽可能多的行 JavaScript 代码，例如：</p> <pre><code class="language-php">setTimeout("document.write('Starting'); alert('Hello!')", 5000) </code></pre> <h3 id="重复超时">重复超时</h3> <p>一些程序员使用的一种技术是在由其调用的代码中调用 <code>setTimeout</code> 函数，如下面的示例所示，它将启动一系列不断弹出警报窗口的无限循环：</p> <pre><code class="language-php">setTimeout(dothis, 5000) function dothis() { setTimeout(dothis, 5000) alert('I am annoying!') } </code></pre> <p>现在每五秒钟将弹出一个警报。我不建议您运行这个实际例子（即使作为测试），否则您可能不得不关闭浏览器才能停止它！</p> <h6 id="注意-119">注意</h6> <p>另一种选择是使用 <code>setInterval</code> 函数，如稍后所述。但是，链接 <code>setTimeout</code> 具有一个优点，即仅在所有前面的代码执行完毕后才发出 <code>setTimeout</code> 函数调用，而 <code>setInterval</code> 将中断代码运行，有时可能不会得到您打算的结果。</p> <h2 id="取消超时">取消超时</h2> <p>设置超时后，如果您之前保存了从初始调用 <code>setTimeout</code> 返回的值，您可以取消它，如下所示：</p> <pre><code class="language-php">handle = setTimeout(dothis, 5000) </code></pre> <p>使用 <code>handle</code> 中的值（一个用于暗示您可以控制函数的<em>句柄</em>）时，您可以随时取消中断，直到其到期时间，如下所示：</p> <pre><code class="language-php">clearTimeout(handle) </code></pre> <p>当您这样做时，中断将被完全遗忘，并且分配给它的代码将不会被执行。</p> <h2 id="使用-setinterval">使用 setInterval</h2> <p>设置定期中断的更简单的方法是使用 <code>setInterval</code> 函数。它的工作方式与 <code>setTimeout</code> 相同，只是在您指定的间隔后弹出警报，然后再次过去这个间隔，以此类推，除非您取消它。</p> <p>示例 21-9 使用此函数在浏览器中显示一个简单的时钟，如图 21-4 所示。</p> <h5 id="示例21-9-使用中断创建的时钟">示例 21-9. 使用中断创建的时钟</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Using setInterval</title> <script src='OSC.js'></script> </head> <body> The time is: <span id='time'>00:00:00</span><br> <script> setInterval("showtime(O('time'))", 1000) function showtime(object) { var date = new Date() object.innerHTML = date.toTimeString().substr(0,8) } </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2104.png" alt="使用中断维护正确时间" loading="lazy"></p> <h6 id="图21-4-使用中断维护正确时间">图 21-4. 使用中断维护正确时间</h6> <p>每次调用 <code>ShowTime</code> 时，它都会使用 <code>Date</code> 调用将对象 <code>date</code> 设置为当前日期和时间：</p> <pre><code class="language-php">var date = new Date() </code></pre> <p>然后，将传递给 <code>showtime</code> 的对象的 <code>innerHTML</code> 属性（即 <code>object</code>）设置为由函数 <code>toTimeString</code> 调用确定的当前时间的小时、分钟和秒的字符串，这将返回一个字符串，例如 <code>09:57:17 UTC+0530</code>，然后使用 <code>substr</code> 函数将其截断为前八个字符：</p> <pre><code class="language-php">object.innerHTML = date.toTimeString().substr(0,8) </code></pre> <h3 id="使用该函数">使用该函数</h3> <p>要使用此函数，您首先必须创建一个对象，其 <code>innerHTML</code> 属性将用于显示时间，例如这个 HTML：</p> <pre><code class="language-php">The time is: <span id='time'>00:00:00</span> </code></pre> <p>值<code>00:00:00</code>只是显示时间的位置和方式，并不必要，因为它会被替换掉。然后，在<code><script></code>代码段中调用<code>setInterval</code>函数，如下所示：</p> <pre><code class="language-php">setInterval("showtime(O('time'))", 1000) </code></pre> <p>然后，脚本将一个包含以下语句的字符串传递给<code>setInterval</code>，该语句设置每秒执行一次（每 1,000 毫秒一次）：</p> <pre><code class="language-php">showtime(O('time')) </code></pre> <p>在极少数情况下，某人禁用了 JavaScript（出于安全原因，有时人们会这样做），您的 JavaScript 将无法运行，用户将只看到原始的<code>00:00:00</code>。</p> <h3 id="取消间隔">取消间隔</h3> <p>要停止重复间隔，当您首次调用<code>setInterval</code>函数设置间隔时，必须记下间隔的句柄，如下所示：</p> <pre><code class="language-php">handle = setInterval("showtime(O('time'))", 1000) </code></pre> <p>现在，您可以随时通过以下调用来停止时钟：</p> <pre><code class="language-php">clearInterval(handle) </code></pre> <p>您甚至可以设置一个计时器，在一定时间后停止时钟，如下所示：</p> <pre><code class="language-php">setTimeout("clearInterval(handle)", 10000) </code></pre> <p>此语句将在 10 秒内发出中断，从而清除重复的间隔。</p> <h2 id="使用中断进行动画">使用中断进行动画</h2> <p>通过结合几个 CSS 属性与重复中断，您可以产生各种动画和效果。</p> <p>例如，代码在示例 21-10 中将一个方形形状沿着浏览器窗口顶部移动，同时大小膨胀，如图 21-5 所示；当<code>LEFT</code>被重置为<code>0</code>时，动画将重新开始。</p> <h5 id="示例-21-10一个简单的动画">示例 21-10。一个简单的动画</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Simple Animation</title> <script src='OSC.js'></script> <style> #box { position :absolute; background:orange; border :1px solid red; } </style> </head> <body> <div id='box'></div> <script> SIZE = LEFT = 0 setInterval(animate, 30) function animate() { SIZE += 10 LEFT += 3 if (SIZE == 200) SIZE = 0 if (LEFT == 600) LEFT = 0 S('box').width = SIZE + 'px' S('box').height = SIZE + 'px' S('box').left = LEFT + 'px' } </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2105.png" alt="该对象从左侧滑入，同时更改大小" loading="lazy"></p> <h6 id="图-21-5该对象从左侧滑入同时更改大小">图 21-5。该对象从左侧滑入，同时更改大小</h6> <p>在文档的<code><head></code>部分，将<code>box</code>对象设置为<code>orange</code>的<code>background</code>颜色，并设置<code>border</code>值为<code>1px solid red</code>，其<code>position</code>属性设置为<code>absolute</code>，以便随后的动画代码可以精确地定位它。</p> <p>然后，在<code>animate</code>函数中，全局变量<code>SIZE</code>和<code>LEFT</code>不断更新，并应用于<code>box</code>对象的<code>width</code>、<code>height</code>和<code>left</code>样式属性（在每个值后添加<code>'px'</code>以指定单位为像素），从而以每 30 毫秒一次的频率对其进行动画处理。这导致动画速率为每秒 33.33 帧（1,000/30 毫秒）。</p> <h1 id="问题-20">问题</h1> <ol> <li> <p><code>O</code>、<code>S</code>和<code>C</code>函数提供了哪些功能？</p> </li> <li> <p>命名两种修改对象 CSS 属性的方式。</p> </li> <li> <p>哪些属性提供浏览器窗口中可用的宽度和高度？</p> </li> <li> <p>当鼠标在对象上方和对象外移动时，如何触发某些操作？</p> </li> <li> <p>哪个 JavaScript 函数创建新元素，并将它们附加到 DOM？</p> </li> <li> <p>如何使元素（a）不可见，并（b）折叠为零维？</p> </li> <li> <p>哪个函数在将来的某个时间创建单个事件？</p> </li> <li> <p>哪个函数设置了在设定的间隔时间重复发生的事件？</p> </li> <li> <p>如何释放网页中元素的位置，使其能够被移动？</p> </li> <li> <p>设置事件之间的延迟（以毫秒为单位），以实现每秒 50 帧的动画速率？</p> </li> </ol> <p>参见 “第二十一章答案”，获取这些问题的答案在 附录 A 中。</p> <h1 id="第二十二章jquery-简介">第二十二章：jQuery 简介</h1> <p>尽管 JavaScript 强大而灵活，具有大量内置函数并不断改进，但对于一些不能通过本地或 CSS 实现的简单事物，例如动画、事件处理和异步通信，通常仍需要额外的代码层。</p> <p>此外，由于多年来的各种浏览器之争，令人沮丧和恼人的浏览器不兼容性已经来来去去，在不同平台和程序的不同时间重新出现。</p> <p>因此，确保您的网页在所有设备上看起来一致有时只能通过冗长的 JavaScript 代码来实现，该代码考虑了近年来发布的各种浏览器和版本之间的差异。是的，已经做了很多工作来解决这些差异，但即使在今天，每个响应式网站我创建的都还需要例外来处理不同的浏览器，除非我使用一个框架，我相信很多人会同意这一点。</p> <p>为了填补这些空白，已经开发了许多函数库（其中许多还提供了与 DOM 的简易钩子），以尽量减少浏览器之间的差异，促进异步通信、事件和动画处理，比如本章的主题 jQuery。</p> <h6 id="注意-120">注意</h6> <p>有时，您正在解决的问题可能有一个简单的基于 JavaScript 的解决方案。检查是否有这种情况的一种方法是在<a href="http://youmightnotneedjquery.com" target="_blank">youmightnotneedjquery.com</a>上进行搜索，该网站将告诉您可能在特定情况下实际上比 jQuery 更简单的替代方案。</p> <h1 id="为什么选择-jquery">为什么选择 jQuery？</h1> <p>使用 jQuery，不仅可以获得非常高的跨浏览器兼容性，还可以快速简便地访问 HTML 和 DOM 操作，特殊功能直接与 CSS 交互，控制事件，强大工具创建专业效果和动画，以及进行与 Web 服务器的异步通信的功能。jQuery 还是广泛范围的插件和其他实用工具的基础。</p> <p>当然，你不<em>需要</em>使用 jQuery，一些编程纯粹主义者可能根本不会接触库，更倾向于创建自己的专属函数集合（这样做有很多好处，比如不必等待其他人修复你发现的错误，实现自己的安全功能等等）。但是 jQuery 显然经受住了时间的考验，如果你想利用其温和的学习曲线，并尽快开发出质量高的网页，本章将展示如何开始使用它。</p> <h6 id="注意-121">注意</h6> <p>尽管 jQuery 非常重要，几乎在 90% 的生产网站上使用，但有些新技术引起了广泛的赞誉和关注。因为技术变化迅速，您需要了解可能取代当前使用技术的新技术。在我看来，React、Angular 和 Vue 是其中几种技术，它们提供了新的、有趣的和强大可扩展的增强 JavaScript 的方式（预料之中的是，它们分别由 Facebook、Google 和前 Google 员工创建）。尽管我们无法在本书中涵盖所有 JavaScript 框架，但了解主要框架仍然很重要，因此我选择在第二十四章中也向您介绍 React，因为我认为这是您最有可能经常接触到的框架，尽管出于完整性考虑，您可能也想了解 Angular。</p> <h1 id="包含-jquery">包含 jQuery</h1> <p>在您的网页中包含 jQuery 有两种方法。您可以前往<a href="https://code.jquery.com/jquery/" target="_blank">下载页面</a>，下载您需要的版本，上传至您的 Web 服务器，并在 HTML 文件中的 <code><script></code> 标签中引用它。或者，您可以利用免费的内容传递网络（CDN），简单地链接到您需要的版本。</p> <h6 id="注意-122">注意</h6> <p>jQuery 根据 MIT 许可证发布，几乎不限制您对其的使用。只要版权头部保持完整，您可以在任何其他项目（甚至是商业项目）中使用任何 jQuery 项目。</p> <h2 id="选择正确的版本">选择正确的版本</h2> <p>在决定是直接下载和托管 jQuery 还是使用 CDN 之前，您必须选择一个 jQuery 版本。在大多数情况下，这很简单，因为您只需选择最新版本。但是，如果您的目标是特定的浏览器，或者如果您正在维护依赖特定 jQuery 版本的旧版网站，则最新版本可能不适合您。</p> <p>与大多数软件不同，您只需下载并安装最新可用版本即可。随着市场上不同浏览器版本的变化，jQuery 随着时间的推移发展，以考虑到其不同特性和缺陷。</p> <p>同时，jQuery 的改进已经进行了，这可能会使较新版本在专门为特定版本（及其周围的怪癖）量身定制的网站上运行方式不同。</p> <p>当然，每个新版本都比之前的版本更好，并且越来越可能涵盖所有基础知识。但是，在网站的操作相同至关重要时，通常最好仍然坚持早期版本，直到您完全测试了新版本为止。</p> <h3 id="jquery-的不同版本">jQuery 的不同版本</h3> <p>现在有三个 jQuery 分支，称为 1.x、2.x 和 3.x，每个分支设计用于不同的环境。</p> <p>版本 1.x 是 jQuery 的第一个稳定版本。这个版本支持一些老旧的网络浏览器，这些浏览器甚至不再被各自的开发者支持。如果你预计会有大量使用老旧浏览器的访问者，这个版本是一个不错的选择（截至我写作时，1.12 版本可能是最好的选择）。</p> <p>版本 2.x 放弃了对 Internet Explorer 6–8 的支持，以提高 jQuery 的整体性能并减小库的文件大小。它比 1.x 版本更快速和更小，但不支持老旧的网络浏览器。自从微软停止支持 Windows XP 以来，可以安全地假设您的访问者将使用与 2.x 版本兼容的浏览器，除非您知道其他情况。</p> <p>如果你需要支持像 Internet Explorer 6–8、Opera 12.1x 或 Safari 5.1+ 这样的老旧浏览器，jQuery 的开发者推荐使用 1.12 版本。关于支持的不同版本的详细信息，请参阅<a href="http://jquery.com/browser-support" target="_blank">网站</a>。在本书的这个版本中，我已经选定了 3.5.1 版本。</p> <h3 id="压缩或可编辑">压缩或可编辑</h3> <p>你还必须决定是使用已压缩版本的 jQuery（压缩尺寸以减少带宽和加载时间）还是未压缩版本（可能是因为你想自己编辑它—这是完全可以的）。一般来说，压缩版本更好，但大多数 Web 服务器支持使用 <em>gzip</em> 进行即时压缩和解压缩，所以这变得不那么重要了（尽管压缩还会去除注释）。</p> <h2 id="下载">下载</h2> <p>最近发布的 jQuery 版本可以在<a href="http://jquery.com/download" target="_blank">下载页面</a>上以未压缩和压缩的形式找到。你也可以在<a href="https://code.jquery.com/jquery/" target="_blank">jQuery CDN</a>上找到所有过去的发布版本。下载页面上显示的精简版 jQuery 省略了异步通信功能以节省空间，所以如果你希望使用 jQuery 进行任何 Ajax 功能，应避免使用这些版本。</p> <p>你只需选择所需的版本，右键单击旁边显示的链接，然后将其保存到硬盘。然后，你可以将其上传到 Web 服务器，然后在 <code><script></code> 标签中包含它，如以下示例（用于 3.5.1 版本的压缩版本）。</p> <pre><code class="language-php"><script src='http://myserver.com/jquery-3.5.1.min.js'></script> </code></pre> <h6 id="注意-123">注意</h6> <p>如果你以前从未使用过 jQuery（且没有特殊要求），那么只需下载最新的压缩版本，或者通过 CDN 进行链接，如下一节所述。</p> <h2 id="使用内容传递网络">使用内容传递网络</h2> <p>几个 CDN 支持 jQuery。如果你使用其中一个，你可以通过直接链接到这些网络提供的 URL 来省去下载新版本并将其上传到服务器的麻烦。</p> <p>不仅如此，而且它们免费提供此服务，并且通常位于可能是世界上最快速度的高容量骨干网中。此外，CDN 通常在许多不同的地理位置保存其内容，然后从距用户最近的服务器提供所需文件，确保尽可能快速地交付。</p> <p>总体而言，如果您不需要修改 jQuery 源代码（需要将其托管在您自己的 Web 服务器上），并且您的用户确定有活动的互联网连接，那么使用 CDN 可能是一个不错的选择。而且这非常容易。您只需知道要访问的文件名以及 CDN 使用的根文件夹即可。例如，您可以通过 jQuery 使用的 CDN 访问所有当前和以前的版本，如下所示：</p> <pre><code class="language-php"><script src='http://code.jquery.com/jquery-3.5.1.min.js'></script> </code></pre> <p>基本目录位于 <em><a href="http://code.jquery.com/" target="_blank">http://code.jquery.com/</a></em>，您只需在其后加上您需要包含的文件名（在本例中为 <em>jquery-3.5.1.min.js</em>）。</p> <p>Microsoft 和 Google 都在其网络上提供 jQuery，因此您还可以通过以下方式之一包含它：</p> <pre><code class="language-php"><script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js'></script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'> </script> </code></pre> <p>对于 <a href="http://ajax.aspnetcdn.com" target="_blank">Microsoft CDN</a>，您应该从 <em>ajax.aspnetcdn.com/ajax/jQuery/</em> 的基本目录开始，并在后面跟随您需要的文件名。</p> <p>对于 Google，但是，您必须将文件名（例如 <em>jquery-3.5.1.min.js</em>）拆分为文件夹和文件名（例如 <em>3.5.1/jquery.min.js</em>）。然后在前面加上 <em>ajax.googleapis.com/ajax/libs/jquery/</em>。</p> <h6 id="注意-124">注意</h6> <p>使用 CDN 的附加好处是，大多数其他网站也这样做，因此 jQuery 可能已经缓存在用户的浏览器中，甚至可能无需重新传送。由于超过 90% 的网站使用 jQuery，这可以节省大量宝贵的带宽和时间。</p> <h2 id="定制-jquery">定制 jQuery</h2> <p>如果绝对关键的是将网页下载的数据量保持最低，那么您可能仍然可以使用 jQuery，方法是制作一个特殊版本，其中仅包含您的网站将要使用的功能。您将无法依赖 CDN 来传递它，但在这种情况下，您可能本来就没有打算使用 CDN。</p> <p>要创建自己的自定义版本的 jQuery，请尝试 <a href="http://projects.jga.me/jquery-builder" target="_blank">jQuery Builder</a>。只需勾选您需要的选项，并取消您不需要的选项。然后，定制版本的 jQuery 将加载到单独的选项卡或窗口中，您可以按需复制粘贴。</p> <h1 id="jquery-语法">jQuery 语法</h1> <p>对于对 jQuery 还不熟悉的人们来说，最显著的事情是 <code>$</code> 符号，它充当了 jQuery 的工厂方法——进入框架的主要手段。选择它是因为该符号在 JavaScript 中是合法的，简短，并且与通常的变量、对象或函数/方法名称不同。</p> <p>这个符号代替了调用 <code>jQuery</code> 函数的操作（如果您愿意，您也可以这样做）。这个想法是保持您的代码简短并节省每次访问 jQuery 时不必要的额外打字。它还立即向其他新接触您代码的开发人员显示出 jQuery（或类似库）正在使用。</p> <h2 id="简单示例">简单示例</h2> <p>简单来说，您可以通过在括号中输入一个 <code>$</code> 符号，然后是选择器，接着是一个句点和要应用于选定元素的方法，来访问 jQuery。</p> <p>例如，要将所有段落的字体族更改为等宽字体，您可以使用此语句：</p> <pre><code class="language-php">$('p').css('font-family', 'monospace') </code></pre> <p>或者，要为 <code><code></code> 元素添加边框，您可以这样使用：</p> <pre><code class="language-php">$('code').css('border', '1px solid #aaa') </code></pre> <p>让我们作为一个完整示例来看看这一点（参见 示例 22-1，其中用粗体突出显示了 jQuery 部分）。</p> <h5 id="例-22-1-一个简单的-jquery-示例">例 22-1. 一个简单的 jQuery 示例</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>First jQuery Example</title> `<script` `src=``'jquery-3.5.1.min.js'``>``</script>` </head> <body> The jQuery library uses either the <code>$()</code> or <code>jQuery()</code> function names. <script> `$``(``'code'``)``.``css``(``'border'``,` `'1px solid #aaa'``)` </script> </body> </html> </code></pre> <p>当您将此示例加载到浏览器中时，结果将类似于 图 22-1。当然，这个特定的指令只是简单地复制了您可以使用普通 CSS 做的事情，但是这个想法是为了说明 jQuery 语法，所以现在我保持简单。</p> <h6 id="注意-125">注意</h6> <p>另一种发出此命令的方式是调用 <code>jQuery</code> 函数（与 <code>$</code> 的工作方式相同），就像这样：</p> <p><code>jQuery('code').css('border', '1px solid #aaa')</code></p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2201.png" alt="使用 jQuery 修改元素" loading="lazy"></p> <h6 id="图22-1-使用-jquery-修改元素">图 22-1. 使用 jQuery 修改元素</h6> <h2 id="避免库冲突">避免库冲突</h2> <p>如果您在使用 jQuery 时同时使用其他库，可能会发现它们定义了自己的 <code>$</code> 函数。为了解决这个问题，您可以在这个符号上调用 <code>noConflict</code> 方法，释放控制权，以便其他库可以接管，就像这样：</p> <pre><code class="language-php">$.noConflict() </code></pre> <p>一旦您这样做了，以后要访问 jQuery，您必须调用 <code>jQuery</code> 函数。或者您可以用您选择的对象名称替换 <code>$</code> 符号，像这样使用：</p> <pre><code class="language-php">jq = $.noConflict() </code></pre> <p>现在您可以使用关键字 <code>jq</code> 来调用 jQuery，以前您可能使用 <code>$</code>。</p> <h6 id="注意-126">注意</h6> <p>为了区分并单独跟踪 jQuery 对象和标准元素对象，一些开发人员在任何使用 jQuery 创建的对象前加上 <code>$</code> 前缀（这样它们看起来像 PHP 变量！）。</p> <h1 id="选择器">选择器</h1> <p>现在您已经看到了如何在网页中轻松包含 jQuery 并访问其功能，让我们继续看看它的选择器，它们（我相信您会高兴地了解到）与 CSS 中的工作方式完全相同。事实上，选择器是 jQuery 大部分操作的核心。</p> <p>您所要做的只是考虑如何使用 CSS 样式化一个或多个元素，然后您可以使用相同的选择器在这些选定的元素上应用 jQuery 操作。这意味着您可以使用元素选择器、ID 选择器、类选择器以及它们的任何组合。</p> <h2 id="css-方法">css 方法</h2> <p>要解释 jQuery 对选择器的使用，让我们首先看一下更基本的 jQuery 方法之一 <code>css</code>，通过它您可以动态地更改任何 CSS 属性。它接受两个参数，要访问的属性名称和要应用的值，如下所示：</p> <pre><code class="language-php">css('font-family', 'Arial') </code></pre> <p>如您将在接下来的部分中看到的那样，您不能单独使用此方法；您必须将其附加到一个 jQuery 选择器上，该选择器将选择一个或多个应该由该方法更改属性的元素。以下示例设置所有 <code><p></code> 元素的内容以显示完全对齐：</p> <pre><code class="language-php">$('p').css('text-align', 'justify') </code></pre> <p>您还可以使用 <code>css</code> 方法仅通过提供属性名称（而不是第二个参数）来返回（而不是设置）计算值。在这种情况下，将返回与 ID 为 <code>elem</code> 的元素匹配的第一个元素的文本颜色。例如，以下示例将返回 ID 为 <code>elem</code> 的元素的文本颜色作为 <code>rgb</code> 方法：</p> <pre><code class="language-php">color = $('#elem').css('color') </code></pre> <p>请记住返回的值是<em>计算出的</em>值。换句话说，在调用方法时，jQuery 将计算并返回浏览器当前使用的值，而不是可能通过样式表或其他方式分配给属性的原始值。</p> <p>因此，如果文本颜色是蓝色（例如），则在前面的语句中分配给变量 <code>color</code> 的值将是 <code>rgb(0, 0, 255)</code>，即使颜色最初是使用颜色名称 <code>blue</code> 或十六进制字符串 <code>#00f</code> 或 <code>#0000ff</code> 设置的。但是，此计算值始终以可分配回元素（或任何其他元素）的形式存在，通过 <code>css</code> 方法的第二个参数。</p> <h6 id="警告-16">警告</h6> <p>要注意由此方法返回的任何计算尺寸，因为根据当前的 <code>box-sizing</code> 设置（参见 第二十章），它们可能与您的预期有所不同。当您需要获取或设置宽度和高度时，不考虑 <code>box-sizing</code>，您应该使用 <code>width</code> 和 <code>height</code> 方法（以及它们的兄弟方法），如“修改尺寸”一节所述。</p> <h2 id="元素选择器">元素选择器</h2> <p>要选择 jQuery 操作的元素，只需在 <code>$</code> 符号（或 jQuery 函数名）后面的括号内列出其名称即可。例如，如果您想更改所有 <code><blockquote></code> 元素的背景颜色，可以使用如下语句：</p> <pre><code class="language-php">$('blockquote').css('background', 'lime') </code></pre> <h2 id="id-选择器-1">ID 选择器</h2> <p>如果在 ID 名称前面加上 <code>#</code> 字符，您也可以通过它们的 ID 引用元素。例如，要向 ID 为 <code>advert</code> 的元素添加边框，您可以使用以下方法：</p> <pre><code class="language-php">$('#advert').css('border', '3px dashed red') </code></pre> <h2 id="类选择器-1">类选择器</h2> <p>您可以根据它们使用的类来操作元素组。例如，要给所有使用类 <code>new</code> 的元素加下划线，您可以使用以下方法：</p> <pre><code class="language-php">$('.new').css('text-decoration', 'underline') </code></pre> <h2 id="结合选择器">结合选择器</h2> <p>与 CSS 一样，您可以使用逗号将选择器组合为单个 jQuery 选择，如以下示例所示：</p> <pre><code class="language-php">$('blockquote, #advert, .new').css('font-weight', 'bold') </code></pre> <p>示例 22-2 将所有这些类型的选择器汇集到一个示例中（其中 jQuery 语句以粗体显示），其结果你可以在 图 22-2 中看到。</p> <h5 id="示例-22-2-使用不同选择器的-jquery">示例 22-2. 使用不同选择器的 jQuery</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Second jQuery Example</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <blockquote>Powerful and flexible as JavaScript is, with a plethora of built-in functions, it is still necessary to use additional code for simple things that cannot be achieved natively or with CSS, such as animations, event handling, and asynchronous communication.</blockquote> <div id='advert'>This is an ad</div> <p>This is my <span class='new'>new</span> website</p> <script> `$``(``'blockquote'``)``.``css``(``'background'``,` `'lime'``)` `$``(``'#advert'``)``.``css``(``'border'``,` `'3px dashed red'``)` `$``(``'.new'``)``.``css``(``'text-decoration'``,` `'underline'``)` `$``(``'blockquote, #advert, .new'``)``.``css``(``'font-weight'``,` `'bold'``)` </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2202.png" alt="操作多个元素" loading="lazy"></p> <h6 id="图-22-2-操作多个元素">图 22-2. 操作多个元素</h6> <h1 id="处理事件">处理事件</h1> <p>如果 jQuery 只能修改 CSS 样式，那将不会有多大帮助，但当然，它能做的远不止于此。让我们进一步探讨它如何处理事件。</p> <p>正如你所记得的，大多数事件是由用户交互触发的：当鼠标移过一个元素时，点击鼠标按钮或按键时。但也有其他可以触发的事件，例如文档加载完成时。</p> <p>使用 jQuery，将自己的代码安全地附加到这些事件上是很简单的，这样就不会阻止其他代码访问它们。例如，这里是如何让 jQuery 响应元素被点击的：</p> <pre><code class="language-php">$('#clickme').click(function() { $('#result').html('You clicked the button!') }) </code></pre> <p>当点击具有 <code>clickme</code> ID 的元素时，通过 jQuery 的 <code>html</code> 函数更新具有 <code>result</code> ID 的元素的 <code>innerHTML</code> 属性。</p> <h6 id="警告-17">警告</h6> <p>jQuery 对象（使用 <code>$</code> 或 <code>jQuery</code> 方法创建）与使用 <code>getElementById</code> 创建的 JavaScript 对象并不相同。在普通 JavaScript 中，你可以使用类似 <code>object = document.getElementById('result')</code> 的语句，然后（例如）<code>object.innerHTML = 'something'</code>。但在上面的例子中，<code>$('#result').innerHTML</code> 将不起作用，因为 <code>innerHTML</code> 不是 jQuery 对象的属性，因此需要使用 jQuery 方法 <code>html</code> 来实现所需的结果。</p> <p>示例 22-3 扩展了这一概念；你可以在 图 22-3 中看到它的运行效果。</p> <h5 id="示例-22-3-处理事件">示例 22-3. 处理事件</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>jQuery Events</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <button id='clickme'>Click Me</button> <p id='result'>I am a paragraph</p> <script> $('#clickme').click(function() { $('#result').html('You clicked the button!') }) </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2203.png" alt="处理点击事件" loading="lazy"></p> <h6 id="图-22-3-处理点击事件">图 22-3. 处理点击事件</h6> <h6 id="注意-127">注意</h6> <p>在 jQuery 中访问事件时，请省略标准 JavaScript 中使用的 <code>on</code> 前缀。因此，例如，<code>onmouseover</code> 事件名在 jQuery 中变成了 <code>mouseover</code> 函数，<code>onclick</code> 变成了 <code>click</code>，依此类推。</p> <h1 id="等待文档加载完成">等待文档加载完成</h1> <p>由于 jQuery 与 DOM 关系密切，它能让你实现的功能往往需要在网页加载完成后才能操作。没有 jQuery，可以通过 <code>onload</code> 事件实现，但有一种更高效、跨浏览器的 jQuery 方法称为 <code>ready</code>，可以在最早的时刻调用它（甚至比 <code>onload</code> 更早）。这意味着 jQuery 可以更快地在页面上工作，用户体验不友好的延迟得到最小化。</p> <p>要使用此功能，请将 jQuery 代码放置在以下结构中：</p> <pre><code class="language-php">$('document').ready(function() { // Your code goes here }) </code></pre> <p>代码将在那里等待，直到文档准备就绪，然后才会被<code>ready</code>方法调用。实际上，你可以使用一个更短的版本，它的输入量更少，就像示例 22-4 中展示的那样。</p> <h5 id="示例-22-4-最小的-jqueryready代码封装函数">示例 22-4. 最小的 jQuery“ready”代码封装函数</h5> <pre><code class="language-php">$(function() { // Your code goes here }) </code></pre> <p>如果你习惯于在这两种结构中的一种中封装你的 jQuery 语句，你就不会遇到试图过早访问 DOM 可能引发的错误类型。</p> <h6 id="注意-128">注意</h6> <p>或者，另一种方法是始终将你的 JavaScript 放在每个 HTML 页面的<em>末尾</em>，这样它只会在整个文档加载后执行。这也有一个次要优点，即确保网页内容优先加载，因此，你可能会看到用户体验的改善。</p> <p>结束页面脚本可能不是个好主意的唯一时机是，如果文档看起来准备好了但其实还没有，或者所有外部样式表尚未加载（只能通过测试来真正识别），导致用户认为他们可以在你的脚本准备好之前与之交互。在这种情况下，实现<code>ready</code>函数，一切都会很顺利。实际上，如果有疑问，将你的脚本放在页面末尾，并将其 jQuery 调用放在<code>ready</code>函数内，你将获得最佳效果。</p> <h1 id="事件函数和属性">事件函数和属性</h1> <p>你刚刚看到了<code>ready</code>事件方法，但你可以访问数十个 jQuery 事件方法和相关属性（这里无法详细列出所有）。然而，以下是一些更常用的方法，它们将为大多数项目提供起点。要获取所有可用事件的详细总结，请参阅<a href="http://api.jquery.com/category/events" target="_blank">文档</a>。</p> <h2 id="模糊和焦点事件">模糊和焦点事件</h2> <p><code>blur</code>事件在从元素中移除焦点时触发，导致其模糊，是<code>focus</code>事件的良好伴侣。<code>blur</code>和<code>focus</code>方法可以用于向事件添加处理程序。如果你在方法的括号中省略任何参数，它们将触发事件。</p> <p>在示例 22-5 中，有四个输入字段。第一个通过快速调用<code>focus</code>方法立即获得焦点，应用于 ID 为<code>first</code>的元素。然后，对所有<code>input</code>元素添加了一对处理程序。<code>focus</code>处理程序在给予焦点时将其背景设置为黄色，而<code>blur</code>处理程序在移除焦点（或模糊）时将其背景设置为浅灰色。</p> <h5 id="示例-22-5-使用focus和blur事件">示例 22-5. 使用<code>focus</code>和<code>blur</code>事件</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Events: blur</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <h2>Click in and out of these fields</h2> <input id='first'> <input> <input> <input> <script> $('#first').focus() $('input').focus(function() { $(this).css('background', '#ff0') } ) $('input') .blur(function() { $(this).css('background', '#aaa') } ) </script> </body> </html> </code></pre> <h6 id="注意-129">注意</h6> <p>允许在一个方法的右括号和用于附加另一个方法的点运算符之间（如果你喜欢，也可以在点后）包含空白字符，就像在前面的示例中我已经将<code>blur</code>事件名称右对齐在<code>focus</code>下面，以帮助其余语句也对齐在列中。</p> <p>在图 22-4 中，你可以看到这段代码是如何给所有曾经获得焦点的输入字段设置浅灰色背景颜色的。如果当前有焦点，其背景颜色将设置为黄色，而未访问的字段保持白色背景颜色。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2204.png" alt="附加到模糊和焦点事件" loading="lazy"></p> <h6 id="图-22-4-附加事件处理程序到blur和focus事件">图 22-4. 附加事件处理程序到<code>blur</code>和<code>focus</code>事件</h6> <h2 id="this关键字"><code>this</code>关键字</h2> <p>该示例还用来说明了<code>this</code>关键字的使用。当事件被调用时，触发它的元素会作为<code>this</code>对象传递，并可以传递给<code>$</code>方法进行处理。或者，由于<code>this</code>是一个标准的 JavaScript 对象（而不是 jQuery 对象），可以直接使用。所以，如果你喜欢，你可以用下面这种方式替换这段代码：</p> <pre><code class="language-php">$(this).css('background', '#ff0') </code></pre> <p>使用这个：</p> <pre><code class="language-php">this.style.background = '#ff0' </code></pre> <h2 id="单击和双击事件">单击和双击事件</h2> <p>你之前看到了<code>click</code>事件，但也有处理双击的事件。要使用其中任何一个，将事件的方法附加到一个 jQuery 选择器上，并为其参数提供一个要触发的 jQuery 方法，就像这样：</p> <pre><code class="language-php">$('.myclass') .click( function() { $(this).slideUp() }) $('.myclass').dblclick( function() { $(this).hide() }) </code></pre> <p>在这里，我选择使用内联的匿名函数，但如果你喜欢，也可以使用命名函数（只记得提供函数的名称而不带括号，否则会在错误的时间调用）。<code>this</code>对象将按预期传递并且可以作为命名函数的参数，就像这样：</p> <pre><code class="language-php">$('.myclass').click(doslide) function doslide() { $(this).slideUp() } </code></pre> <p><code>slideUp</code>和<code>hide</code>方法在“特效”章节中有详细说明。但现在，只需尝试运行示例 22-6，然后单击或双击按钮，看看它们如何有时会通过动画（使用<code>slideUp</code>）消失，有时只是消失（使用<code>hide</code>），如图 22-5 所示。</p> <h5 id="示例-22-6-附加到click和dblclick事件">示例 22-6. 附加到<code>click</code>和<code>dblclick</code>事件</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Events: click & dblclick</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <h2>Click and double click the buttons</h2> <button class='myclass'>Button 1</button> <button class='myclass'>Button 2</button> <button class='myclass'>Button 3</button> <button class='myclass'>Button 4</button> <button class='myclass'>Button 5</button> <script> $('.myclass').click( function() { $(this).slideUp() }) $('.myclass').dblclick( function() { $(this).hide() }) </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2205.png" alt="按钮 3 已被点击一次并向上滑动" loading="lazy"></p> <h6 id="图-22-5-按钮-3-已被点击一次并向上滑动">图 22-5. 按钮 3 已被点击一次并向上滑动</h6> <h2 id="键按事件">键按事件</h2> <p>不时地，你会需要更好地控制用户的键盘交互，特别是在处理复杂表单或编写游戏时。对于这些情况，你可以使用<code>keypress</code>方法，它可以附加到接受键盘输入的任何地方，比如输入字段，甚至是文档本身。</p> <p>在示例 22-7 中，该方法已经附加到文档中以拦截所有键按。运行的结果可以在图 22-6 中看到。</p> <h5 id="示例-22-7-拦截键按">示例 22-7. 拦截键按</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Events: keypress</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <h2>Press some keys</h2> <div id='result'></div> <script> $(document).keypress(function(event) { key = String.fromCharCode(event.which) if (key >= 'a' && key <= 'z' || key >= 'A' && key <= 'Z' || key >= '0' && key <= '9') { $('#result').html('You pressed: ' + key) event.preventDefault() } }) </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2206.png" alt="处理键盘按键" loading="lazy"></p> <h6 id="图-22-6-处理键盘按键">图 22-6. 处理键盘按键</h6> <p>在此示例中，有几点需要注意，当编写自己的键盘处理程序时，您需要记住这些点。例如，因为不同的浏览器返回不同的值，jQuery 将事件对象的<code>which</code>属性标准化为在所有浏览器中返回相同的字符代码。因此，这是查找按下的键的地方。</p> <p>作为字符代码，<code>which</code>中的值是一个数字。您可以通过将其通过<code>String.fromCharCode</code>来将其转换为单个字母字符串。在您的代码中，您不必这样做，因为您可以轻松地响应 ASCII 值，但在需要处理字符时，此方法非常有用。</p> <p>在<code>if</code>块内，当识别到按键按下时，示例代码会将相应的简单语句插入到具有 ID 为<code>result</code>的<code><div></code>元素的<code>innerHTML</code>属性中。</p> <h6 id="警告-18">警告</h6> <p>这是一个很好的例子，说明为什么不应该使用<code>document.write</code>函数，因为用户按下键盘时文档已经完全加载。如果此时调用<code>document.write</code>来显示信息，它会擦除当前文档。相反，将信息写入元素的 HTML 中是一种完美的、非破坏性的方式，用于提供用户反馈，正如“关于 document.write”中在第十四章中所解释的那样。</p> <h2 id="考虑周到的编程">考虑周到的编程</h2> <p>当您预期用户输入时，您应该决定响应哪些值，然后忽略所有其他值，以防其他事件处理程序需要访问它们。这是一种考虑周到的做法，适用于可能正在运行的任何其他实用程序（以及主浏览器本身）。例如，在上述示例中，我选择仅接受字符 a–z、A–Z 和 0–9，忽略所有其他字符。</p> <p>有两种方法可以将键盘中断传递给（或者从其他处理程序中拒绝）。首先，什么都不做；当您的代码退出时，其他处理程序也将看到并能够对相同的按键进行反应。然而，如果从单个按键触发多个动作，这可能会引起混乱。</p> <p>或者，当您不希望事件触发任何其他处理程序时，可以调用事件的<code>preventDefault</code>方法，从而阻止事件“冒泡”到其他处理程序。</p> <h6 id="警告-19">警告</h6> <p>要小心<code>preventDefault</code>方法的调用位置——如果它在处理按键事件的代码部分之外，它将阻止所有其他键盘事件冒泡，并且您可能会锁定用户无法使用浏览器（或者至少无法使用某些功能）。</p> <h2 id="鼠标移动事件">鼠标移动事件</h2> <p>最常拦截的事件之一是鼠标处理事件。我已经介绍了鼠标按钮点击，现在让我们来看看如何附加到鼠标移动事件。</p> <p>我觉得现在是时候来一个稍微有趣一点的例子了，在 例子 22-8 中，我使用 jQuery 结合 HTML5 画布制作了一个简易的绘图程序。尽管画布直到 第二十六章 才会完全解释，但别担心，因为代码非常简单。</p> <h5 id="例子-22-8-捕获鼠标移动和鼠标按键事件">例子 22-8. 捕获鼠标移动和鼠标按键事件</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Events: Mouse Handling</title> <script src='jquery-3.5.1.min.js'></script> <style> #pad { background:#def; border :1px solid #aaa; } </style> </head> <body> <canvas id='pad' width='480' height='320'></canvas> <script> canvas = $('#pad')[0] context = canvas.getContext("2d") pendown = false $('#pad').mousemove(function(event) { var xpos = event.pageX - canvas.offsetLeft var ypos = event.pageY - canvas.offsetTop if (pendown) context.lineTo(xpos, ypos) else context.moveTo(xpos, ypos) context.stroke() }) $('#pad').mousedown(function() { pendown = true } ) $('#pad') .mouseup(function() { pendown = false } ) </script> </body> </html> </code></pre> <p>在 图 22-7 中，你可以看到这组相当简单的指令如何用来创建线条图（前提是你有艺术天赋，哈哈）。它的工作原理如下。首先，程序通过引用 jQuery 选择器的第一个（或零索引）元素来创建一个 <code>canvas</code> 对象，如下所示：</p> <pre><code class="language-php">canvas = $('#pad')[0] </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2207.png" alt="捕获鼠标移动和鼠标按键事件" loading="lazy"></p> <h6 id="图-22-7-捕获鼠标移动和鼠标按键事件">图 22-7. 捕获鼠标移动和鼠标按键事件</h6> <p>这是一种快速将 jQuery 对象转换为标准 JavaScript 元素对象的方法之一。另一种方法是使用 <code>get</code> 方法，如下所示：</p> <pre><code class="language-php">canvas = $('#pad').get(0) </code></pre> <p>这两者是可以互换的，但 <code>get</code> 方法更胜一筹，因为在不传递任何参数的情况下，它将返回 jQuery 对象中所有元素节点对象作为一个数组。</p> <p>无论如何，就像你将在 第二十六章 中学到的那样，画布将使用一个特殊的 <code>context</code> 对象进行绘制，现在已经创建了：</p> <pre><code class="language-php">context = canvas.getContext("2d") </code></pre> <p>还有一件需要初始化的事情，那就是一个名为 <code>pendown</code> 的布尔变量，用来跟踪鼠标按钮的状态（初始为 <code>false</code>，因为画笔处于未按下状态）：</p> <pre><code class="language-php">pendown = false </code></pre> <p>在此之后，具有 ID 为 <code>pad</code> 的画布将其 <code>mousemove</code> 事件被下面的匿名函数拦截，其中发生了三组事情：</p> <pre><code class="language-php">$('#pad').mousemove(function(event) { ... }) </code></pre> <p>首先，<code>xpos</code> 和 <code>ypos</code> 这两个本地变量（因为使用了 <code>var</code> 关键字，虽然现在更好的做法是用 <code>let</code> 替代 <code>var</code>）被赋予了表示鼠标在画布区域内位置的值。</p> <p>这些值来自于 jQuery 的 <code>pageX</code> 和 <code>pageY</code> 属性，它们指的是鼠标指针相对于包含文档左上角的偏移量。因此，由于画布本身稍微偏离该位置，<code>canvas</code> 的偏移值（在 <code>offsetLeft</code> 和 <code>offsetTop</code> 中）会从 <code>pageX</code> 和 <code>pageY</code> 中减去：</p> <pre><code class="language-php">var xpos = event.pageX - canvas.offsetLeft var ypos = event.pageY - canvas.offsetTop </code></pre> <p>现在我们知道了鼠标指针相对于画布的位置，接下来的一对行代码测试了 <code>pendown</code> 的值。如果它是 <code>true</code>，则表示鼠标按钮被按下，因此会调用 <code>lineTo</code> 来绘制到当前位置的线条。否则，表示画笔未按下，所以会调用 <code>moveTo</code> 来简单更新当前位置：</p> <pre><code class="language-php">if (pendown) context.lineTo(xpos, ypos) else context.moveTo(xpos, ypos) </code></pre> <p>然后调用 <code>stroke</code> 方法以应用刚刚进行的任何绘图命令到画布上。这五行代码就足以处理绘图，但仍然需要跟踪鼠标按钮状态，因此代码的最后两行拦截 <code>mousedown</code> 和 <code>mouseup</code> 事件，当鼠标按下时将 <code>pendown</code> 设置为 <code>true</code>，释放时将其设置为 <code>false</code>：</p> <pre><code class="language-php">$('#pad').mousedown(function() { pendown = true } ) $('#pad') .mouseup(function() { pendown = false } ) </code></pre> <p>在这个例子中，你可以看到三种不同的事件处理程序组合在一起创建了一个简单的实用程序，使用局部变量来进行内部表达式，并在需要跨多个函数可用对象或状态时使用全局变量。</p> <h2 id="其他鼠标事件">其他鼠标事件</h2> <p><code>mouseenter</code> 和 <code>mouseleave</code> 事件在鼠标进入或离开元素时触发。不提供位置值，因为函数假定您只是希望在触发其中一个事件时做出布尔决策。</p> <p>在 示例 22-9 中，一对匿名函数附加到这些事件上，相应地改变了元素的 HTML，如 图 22-8 所示。</p> <h5 id="示例-22-9-检测鼠标进入和离开元素">示例 22-9. 检测鼠标进入和离开元素</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Events: Further Mouse Handling</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <h2 id='test'>Pass the mouse over me</h2> <script> $('#test').mouseenter(function() { $(this).html('Hey, stop tickling!') } ) $('#test').mouseleave(function() { $(this).html('Where did you go?') } ) </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2208.png" alt="检测鼠标进入和离开元素" loading="lazy"></p> <h6 id="图-22-8-检测鼠标进入和离开元素">图 22-8. 检测鼠标进入和离开元素</h6> <p>当鼠标进入所选元素的边界时，该元素的 <code>innerHTML</code> 属性会更新（通过调用 <code>html</code>）。然后，当鼠标再次离开时，会进一步更新元素的 HTML。</p> <h2 id="替代鼠标方法">替代鼠标方法</h2> <p>还有许多其他的 jQuery 鼠标事件函数可用于覆盖各种情况，所有这些都在 <a href="https://tinyurl.com/jquerymouse" target="_blank">鼠标事件文档</a> 中详细描述。例如，您可以使用以下替代的 <code>mouseover</code> 和 <code>mouseout</code> 方法来实现与前面章节中代码类似的结果：</p> <pre><code class="language-php">$('#test').mouseover(function() { $(this).html('Cut it out!') } ) $('#test') .mouseout(function() { $(this).html('Try it this time...') } ) </code></pre> <p>或者您可以使用 <code>hover</code> 方法通过单个函数调用绑定两个处理程序，如下所示：</p> <pre><code class="language-php">$('#test').hover(function() { $(this).html('Cut it out!') }, function() { $(this).html('Try it this time...') } ) </code></pre> <p>如果您计划创建 <code>mouseover</code> 和 <code>mouseout</code> 的组合效果，<code>hover</code> 方法显然是选择的逻辑函数，但也有另一种方法可以实现相同的结果，即 <em>方法链</em>（在 “方法链” 部分解释），使用以下代码：</p> <pre><code class="language-php">$('#test').mouseover(function() { $(this).html('Cut it out!') } ) .mouseout(function() { $(this).html('Try it this time...') } ) </code></pre> <p>在第二个语句的开始处使用句点操作符将其附加到第一个语句，从而创建了一系列方法链。</p> <h6 id="注意-130">注意</h6> <p>上述示例展示了如何捕获鼠标点击、鼠标移动和键盘事件，因此它们大多适用于桌面环境——这是 jQuery 主要针对的。但是，jQuery 还有一个为移动设备提供所有触摸处理事件控制的版本，称为 <a href="http://jquerymobile.com" target="_blank">jQuery Mobile</a>。我们将在下一章中详细介绍这一点。</p> <h2 id="提交事件">提交事件</h2> <p>When a form is submitted, you may want to perform some error checking on the data entered before it gets sent to the server. One way to do this is to intercept the <code>submit</code> event of the form, as in Example 22-10. Figure 22-9 shows the result of loading this document and then submitting the form with one or more fields left empty.</p> <h5 id="example-22-10-拦截表单的-submit-事件">Example 22-10. 拦截表单的 <code>submit</code> 事件</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Events: submit</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <form id='form'> First name: <input id='fname' type='text' name='fname'><br> Last name: <input id='lname' type='text' name='lname'><br> <input type='submit'> </form> <script> $('#form').submit(function() { if ($('#fname').val() == '' || $('#lname').val() == '') { alert('Please enter both names') return false } }) </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2209.png" alt="提交时检查用户输入" loading="lazy"></p> <h6 id="figure-22-9-提交时检查用户输入">Figure 22-9. 提交时检查用户输入</h6> <p>The key parts of this example are where the event is attached to an anonymous function, like this:</p> <pre><code class="language-php">$('#form').submit(function() </code></pre> <p>and where the values of the two input fields are tested for being empty:</p> <pre><code class="language-php">if ($('#fname').val() == '' || $('#lname').val() == '') </code></pre> <p>Here the jQuery <code>val</code> method is used to retrieve the value in the <code>value</code> property of each field. This is neater than using <code>$('#fname')[0]</code> (as in Example 22-8) to get access to the DOM object and then appending <code>value</code> to it to read the field’s value, like this: <code>$('#fname')[0].value</code>.</p> <p>In this example, by returning the value <code>false</code> if one or more fields are empty, the <code>if</code> test cancels the normal submission process. To enable the submission to proceed, you can return <code>true</code>, or just not return anything.</p> <h1 id="特效">特效</h1> <p>jQuery really begins to come into its own when processing special effects. Although you can use CSS3 transitions, they are not always easy to manage dynamically from JavaScript—but with jQuery it really is as simple as selecting one or more elements and then applying one or more effects to them.</p> <p>The core effects available are hiding and showing, fading in and out, sliding, and animations. These can be used singly, together in synchronization, or in sequence. They also support the use of callbacks, which are functions or methods that get called only once an operation has completed.</p> <p>The following sections describe some of the more useful jQuery effects, each of which supports up to three arguments, as follows:</p> <p><dfn class="keep-together">持续时间</dfn></p> <p>When a duration value is supplied, the effect will take place over the assigned time, which can be a value in milliseconds or the strings <code>fast</code> or <code>slow</code>.</p> <p><dfn class="keep-together">缓动</dfn></p> <p>There are only two easing options in the jQuery library, <code>swing</code> and <code>linear</code>. The default is <code>swing</code>, which gives a more natural effect than <code>linear</code>. For more easing options, you can check out plug-ins like <a href="http://jqueryui.com/easing" target="_blank">jQuery UI</a>.</p> <p><dfn class="keep-together">回调</dfn></p> <p>If you supply a callback function, it will be called after the effect method completes.</p> <p>This means that when no arguments are given, the method is called immediately without being placed in the animation queue.</p> <p>So, for example, you can call the <code>hide</code> method in a variety of ways, such as these:</p> <pre><code class="language-php">$('#object').hide() $('#object').hide(1000) $('#object').hide('fast') $('#object').hide('linear') $('#object').hide('slow', 'linear') $('#object').hide(myfunction) $('#object').hide(333, myfunction) $('#object').hide(200, 'linear', function() { alert('Finished!') } ) </code></pre> <p>正如您将在“方法链接”部分中看到的那样，您可以将函数调用（带参数）连接在一起，它们将依次被动画化，就像以下示例中将隐藏然后显示一个元素的方式：</p> <pre><code class="language-php">$('#object').hide(1000).show(1000) </code></pre> <p>许多这些方法还支持其他不常用的参数，并且您可以访问<a href="http://api.jquery.com/category/effects" target="_blank">effects 文档</a>以获取所有这些方法的详细信息。</p> <h2 id="隐藏和显示">隐藏和显示</h2> <p>可能最简单的效果是根据用户交互隐藏和显示元素。正如前一节所述，您可以不提供参数或提供各种参数给 <code>hide</code> 和 <code>show</code> 方法。默认情况下，当没有参数提供时，结果是立即隐藏或显示一个元素。</p> <p>当提供了参数时，这两种方法同时修改元素的 <code>width</code>、<code>height</code> 和 <code>opacity</code> 属性，直到对于 <code>hide</code> 是达到 <code>0</code>，对于 <code>show</code> 是达到它们的原始值。当元素完全隐藏时，<code>hide</code> 函数将元素的 <code>display</code> 属性设置为 <code>none</code>，而 <code>show</code> 函数在元素完全恢复后重新分配其先前的值。</p> <p>示例 22-11 允许您自己尝试 <code>hide</code> 和 <code>show</code>（如图 22-10 所示）。</p> <h5 id="示例-22-11-隐藏和显示一个元素">示例 22-11. 隐藏和显示一个元素</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Effects: hide & show</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <button id='hide'>Hide</button> <button id='show'>Show</button> <p id='text'>Click the Hide and Show buttons</p> <script> $('#hide').click(function() { $('#text').hide('slow', 'linear') }) $('#show').click(function() { $('#text').show('slow', 'linear') }) </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2210.png" alt="元素正在被显示的过程中" loading="lazy"></p> <h6 id="图-22-10-元素正在被显示的过程中">图 22-10. 元素正在被显示的过程中</h6> <h2 id="toggle-方法">toggle 方法</h2> <p>作为调用 <code>hide</code> 和 <code>show</code> 方法的替代方法，您可以使用 <code>toggle</code> 方法，它使您可以用示例 22-12 替换前面的示例。</p> <h5 id="示例-22-12-使用-toggle-方法">示例 22-12. 使用 <code>toggle</code> 方法</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Effects: toggle</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <button id='toggle'>Toggle</button> <p id='text'>Click the Toggle button</p> <script> $('#toggle').click(function() { $('#text').toggle('slow', 'linear') }) </script> </body> </html> </code></pre> <p><code>toggle</code> 方法接受与 <code>hide</code> 和 <code>show</code> 相同的参数，但在内部跟踪元素的状态，以便知道是隐藏还是显示它。</p> <h6 id="注-4">注</h6> <p>有四种主要的 jQuery 方法可以设置元素的一个状态或另一个状态，并提供切换版本以简化编码。除了 <code>toggle</code> 外，还有 <code>fadeToggle</code>、<code>slideToggle</code> 和 <code>toggleClass</code>，本章节中均有描述。</p> <h2 id="淡入和淡出">淡入和淡出</h2> <p>四种方法管理淡入淡出：<code>fadeIn</code>、<code>fadeOut</code>、<code>fadeToggle</code> 和 <code>fadeTo</code>。到目前为止，您应该已经了解了 jQuery 的工作原理，并且意识到前三者与 <code>show</code>、<code>hide</code> 和 <code>toggle</code> 类似。然而，最后一个有点不同，它允许您指定一个透明度值，使元素（或元素）淡入到 <code>0</code> 和 <code>1</code> 之间。</p> <p>示例 22-13 提供了四个按钮，用于尝试每种方法，如图 22-11 所示。</p> <h5 id="示例-22-13-四种淡入淡出方法">示例 22-13. 四种淡入淡出方法</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Effects: Fading</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <button id='fadeout'>fadeOut</button> <button id='fadein'>fadeIn</button> <button id='fadetoggle'>fadeToggle</button> <button id='fadeto'>fadeTo</button> <p id='text'>Click the buttons above</p> <script> $('#fadeout') .click(function() { $('#text').fadeOut( 'slow' ) }) $('#fadein') .click(function() { $('#text').fadeIn( 'slow' ) }) $('#fadetoggle').click(function() { $('#text').fadeToggle('slow' ) }) $('#fadeto') .click(function() { $('#text').fadeTo( 'slow', 0.5) }) </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2211.png" alt="文本已经淡出到 50% 的不透明度" loading="lazy"></p> <h6 id="图-22-11-文本已经淡出到-50-的不透明度">图 22-11. 文本已经淡出到 50% 的不透明度</h6> <h2 id="上下滑动元素">上下滑动元素</h2> <p>另一种让元素消失和重新出现的方法是随着时间的推移改变它们的高度，使它们看起来像是向上和向下滑动。这里有三个 jQuery 方法来实现：<code>slideDown</code>、<code>slideUp</code>和<code>slideToggle</code>。它们的工作方式类似于之前的函数，如在例子 22-14 中编码和图 22-12 中显示的那样。</p> <h5 id="例子-22-14-使用滑动方法">例子 22-14. 使用滑动方法</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Effects: Sliding</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <button id='slideup'>slideUp</button> <button id='slidedown'>slideDown</button> <button id='slidetoggle'>slideToggle</button> <div id='para' style='background:#def'> <h2>From A Tale of Two Cities - By Charles Dickens</h2> <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only</p> </div> <script> $('#slideup') .click(function() { $('#para').slideUp( 'slow') }) $('#slidedown') .click(function() { $('#para').slideDown( 'slow') }) $('#slidetoggle').click(function() { $('#para').slideToggle('slow') }) </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2212.png" alt="段落正在向上滑动" loading="lazy"></p> <h6 id="图-22-12-段落正在向上滑动">图 22-12. 段落正在向上滑动</h6> <p>当你想要根据用户点击的部分动态打开或关闭菜单和子菜单时，这些方法表现很好。</p> <h2 id="动画">动画</h2> <p>现在我们可以真正开始在浏览器中移动元素，这样做的话，由于默认的 <code>static</code> 值不允许它们移动，你必须首先给你的元素的 <code>position</code> 属性赋予 <code>relative</code>、<code>fixed</code> 或 <code>absolute</code> 的值。</p> <p>要为一个元素添加动画效果，你只需提供一个 CSS 属性列表（不包括颜色）给<code>animate</code>方法。不同于之前的效果方法，<code>animate</code>首先需要这个属性列表，然后你可以提供任何所需的持续时间、缓动和回调参数。</p> <p>例如，要创建一个跳动的球动画，可以使用如下代码，就像例子 22-15 中显示的那样（显示为图 22-13）。</p> <h5 id="例子-22-15-创建一个跳动的球动画">例子 22-15. 创建一个跳动的球动画</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Effects: Animation</title> <script src='jquery-3.5.1.min.js'></script> <style> #ball { position :relative; } #box { width :640px; height :480px; background:green; border :1px solid #444; } </style> </head> <body> <div id='box'> <img id='ball' src='ball.png'> </div> <script> bounce() function bounce() { $('#ball') .animate( { left:'270px', top :'380px' }, 'slow', 'linear') .animate( { left:'540px', top :'190px' }, 'slow', 'linear') .animate( { left:'270px', top :'0px' }, 'slow', 'linear') .animate( { left:'0px', top :'190px' }, 'slow', 'linear') } </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2213.png" alt="球在浏览器中跳动" loading="lazy"></p> <h6 id="图-22-13-浏览器中的球在跳动">图 22-13. 浏览器中的球在跳动</h6> <p>在这个例子的 <code><style></code> 部分中，球的 <code>position</code> 属性相对于其容器设置为相对定位，容器是一个带有边框和绿色背景的 <code><div></code> 元素。</p> <p>然后在 <code><script></code> 部分有一个名为 <code>bounce</code> 的函数，它连接了四次 <code>animate</code> 调用。请注意，要动画化的属性名称（例如此例中的 <code>left</code> 和 <code>top</code>）是以关联数组的形式提供的，不需要引号，并且与它们应该更改到的值（例如 <code>'270px'</code>）之间用冒号分隔。</p> <p>你还可以通过使用<code>+=</code>和<code>-=</code>运算符提供相对值来代替绝对值。例如，以下代码将使球相对于其当前位置向右和向上移动 50 像素：</p> <pre><code class="language-php">.animate( { left:'`+=`50px', top:'`-=`50px' }, 'slow', 'linear') </code></pre> <p>而且你甚至可以使用字符串值<code>hide</code>，<code>show</code>和<code>toggle</code>来更新属性，就像这样：</p> <pre><code class="language-php">.animate( { height:'`hide`', width:'`toggle`' }, 'slow', 'linear') </code></pre> <h6 id="警告-20">警告</h6> <p>如果您希望修改任何连字符的 CSS 属性，并且它们未在引号内传递（例如在前面示例中的<code>height</code>和<code>width</code>），则必须通过删除连字符并大写后面的字母来将其名称转换为 camelCase。例如，要动画化元素的<code>left-margin</code>属性，您应该提供<code>leftMargin</code>作为名称。然而，当在字符串内提供连字符属性名时，例如<code>css('font-weight', 'bold')</code>，<em>不应</em>将其转换为 camelCase。</p> <h3 id="方法链">方法链</h3> <p>由于方法链的工作方式，当 jQuery 方法带有参数时，它们将按顺序运行。因此，这些方法中的每一个都是在前一个动画完成后才调用的。然而，您调用的没有参数的方法将立即并快速地运行，而不会有动画效果。</p> <p>当您将 Example 22-15 加载到 Web 浏览器中时，动画会通过对<code>bounce</code>的单个调用（可以说）启动，导致球从其容器的底部、右侧和顶部边缘弹起，然后回到左侧边缘的中间位置。再次查看本示例中的<code>bounce</code>函数，您可以看到有四个链接调用了<code>animate</code>函数。</p> <h3 id="使用回调">使用回调</h3> <p>就目前而言，前面的示例在四个动画后停止，但您可以使用回调函数使动画在每次完成后重新开始。这就是我选择将动画放在一个命名函数中的原因。</p> <p>使用<code>bounce</code>函数中的动画，只需将该名称作为第四个动画组的回调添加即可使动画永远重复，如下所示加粗显示：</p> <pre><code class="language-php">.animate( { left:'0px', top :'190px' }, 'slow', 'linear'`,` `bounce`) </code></pre> <p>使用<code>animate</code>方法，您可以动画化许多 CSS 属性，但颜色是一个值得注意的例外。然而，即使是颜色动画也可以通过 jQuery UI 插件的添加来实现，该插件提供了创建非常令人愉悦的颜色变化效果（以及许多其他好处）的功能。请参阅 <a href="http://jqueryui.com" target="_blank">jQuery UI 页面</a> 了解详情。</p> <h2 id="停止动画">停止动画</h2> <p>有几种方法可以在动画进行中途停止或结束一系列动画。例如，<code>clearQueue</code>可以清空队列中的所有存储的动画，<code>stop</code>可以立即停止当前正在进行的任何动画，<code>finish</code>将停止当前运行的动画并移除队列中的任何动画。</p> <p>将之前的示例转换为一种类似游戏的形式，通过使球可以点击，触发点击事件时动画将停止。要做到这一点，只需在<code>bounce</code>函数下面添加以下单行代码即可：</p> <pre><code class="language-php">$('#ball').click(function() { $(this).finish() }) </code></pre> <p>如果您成功地点击了球，<code>finish</code>方法将停止当前动画，清空队列，并忽略任何回调——换句话说，球将停止在原地。</p> <p>要了解更多关于管理 jQuery 队列的信息，请查看<a href="http://api.jquery.com/queue" target="_blank"><code>queue</code>方法的文档</a>，您还将了解如何直接操作队列的内容以获得您需要的效果。</p> <h1 id="操作-dom">操作 DOM</h1> <p>由于 jQuery 与 DOM 紧密相关，因此本章的示例已经使用了一些其 DOM 访问方法，如<code>html</code>和<code>val</code>。现在让我们详细看看所有的 DOM 方法，以了解您可以如何利用 jQuery 来访问它们。</p> <p>在示例 22-3 中，您看到如何使用<code>html</code>方法更改元素的<code>innerHTML</code>属性。此方法可用于设置 HTML 或从 HTML 文档中检索 HTML。示例 22-16（其中使用粗体显示了 jQuery）展示了如何检索元素的 HTML 内容（如图 22-14 所示）。</p> <h5 id="示例-22-16-使用警告窗口显示元素的-html">示例 22-16. 使用警告窗口显示元素的 HTML</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>The DOM: html & text</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <h2>Example Document</h2> <p id='intro'>This is an example document</p> <script> alert(`$``(``'#intro'``)``.``html``(``)`) </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2214.png" alt="检索和显示元素的 HTML" loading="lazy"></p> <h6 id="图-22-14-检索和显示元素的-html">图 22-14. 检索和显示元素的 HTML</h6> <p>当您调用此方法而不带参数时，结果是读取元素的 HTML 而不是设置它。</p> <h2 id="text-和-html-方法的区别">text 和 html 方法的区别</h2> <p>当您使用 XML 文档时，您不能使用<code>html</code>方法，因为它根本不起作用（它仅设计用于 HTML）。但是，您可以使用<code>text</code>方法来实现类似的结果（在 XML 或 HTML 文档中），如下所示：</p> <pre><code class="language-php">text = $('#intro').text() </code></pre> <p>这两者的区别非常简单，即<code>html</code>将内容视为 HTML，而<code>text</code>将其视为文本。例如，假设您希望将以下字符串分配给一个元素：</p> <pre><code class="language-php"><a href='http://google.com'>Visit Google</a> </code></pre> <p>如果您使用<code>html</code>方法将其分配给 HTML 元素，则 DOM 将使用新的<code><a></code>元素进行更新，链接将变为可点击。但是，如果您将其分配给 XML 或 HTML 文档并使用<code>text</code>方法，则该字符串将首先转义为文本（例如，通过将 HTML 字符如<code><</code>转换为<code>&lt;</code>实体等），然后插入元素中——不会向 DOM 添加元素。</p> <h2 id="val-和-attr-方法">val 和 attr 方法</h2> <p>还有一些与元素内容交互的方法。首先，您可以使用<code>val</code>方法设置和获取输入元素的值，如示例 22-10 所示，其中读取了名字字段。要设置值，只需将其作为参数提供给该方法，如下所示：</p> <pre><code class="language-php">$('#password').val('mypass123') </code></pre> <p>使用<code>attr</code>方法，您可以获取和设置元素的属性，如示例 22-17 所示，其中将指向 Google 网站的链接完全替换为指向 Yahoo 的链接。</p> <h5 id="示例-22-17-使用attr方法修改属性">示例 22-17. 使用<code>attr</code>方法修改属性</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>The DOM: attr</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <h2>Example Document</h2> <p><a id='link' href='http://google.com' title='Google'>Visit Google</a></p> <script> $('#link').text('Visit Yahoo!') $('#link').attr( { href :'http://yahoo.com', title:'Yahoo!' } ) alert('The new HTML is:\n' + $('p').html()) </script> </body> </html> </code></pre> <p>第一个 jQuery 语句使用<code>text</code>方法来更改<code><a></code>元素内的文本，第二个语句通过提供关联数组形式的数据来更改<code>href</code>和<code>title</code>属性值以匹配。第三个语句通过首先使用<code>html</code>方法检索更改后的元素内容，然后在警告窗口中显示它，如图 22-15 所示。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2215.png" alt="链接现在已完全修改" loading="lazy"></p> <h6 id="图-22-15-现在链接已完全修改">图 22-15. 现在链接已完全修改</h6> <p>您还可以这样读取属性的值：</p> <pre><code class="language-php">url = $('#link').attr('href') </code></pre> <h2 id="添加和删除元素">添加和删除元素</h2> <p>虽然可以使用<code>html</code>方法将元素插入 DOM 中，但这仅适用于创建特定元素的子元素。因此，jQuery 提供了许多方法来操作 DOM 的任何部分。</p> <p>这些方法是<code>append</code>、<code>prepend</code>、<code>after</code>、<code>before</code>、<code>remove</code>和<code>empty</code>。每个示例都在示例 22-18 中出现。</p> <h5 id="示例-22-18-添加和删除元素">示例 22-18. 添加和删除元素</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Modifying The DOM</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <h2>Example Document</h2> <a href='http://google.com' title='Google'>Visit Google</a> <code> This is a code section </code> <p> <button id='a'>Remove the image</button> <button id='b'>Empty the quote</button> </p> <img id='ball' src='ball.png'> <blockquote id='quote' style='border:1px dotted #444; height:20px;'> test </blockquote> <script> $('a').prepend('Link: ') $("[href^='http']").append(" <img src='link.png'>") $('code').before('<hr>').after('<hr>') $('#a').click(function() { $('#ball').remove() } ) $('#b').click(function() { $('#quote').empty() } ) </script> </body> </html> </code></pre> <p>在图 22-16 中，您可以看到将<code>prepend</code>、<code>append</code>、<code>before</code>和<code>after</code>方法应用于某些元素的结果。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2216.png" alt="一个包含各种元素的文档" loading="lazy"></p> <h6 id="图-22-16-一个包含各种元素的文档">图 22-16. 一个包含各种元素的文档</h6> <p>已使用<code>prepend</code>方法在所有<code><a></code>元素的内部文本或 HTML 前插入字符串<code>Link:</code>，如下所示：</p> <pre><code class="language-php">$('a').prepend('Link: ') </code></pre> <p>然后使用属性选择器选择所有具有以<code>http</code>开头的<code>href</code>属性的元素。由于<code>^=</code>运算符，URL 开头的字符串<code>http</code>表示非相对链接，因此是绝对链接。在所有匹配元素的内部文本或 HTML 末尾附加外部链接图标，如下所示：</p> <pre><code class="language-php">$("[href^='http']").append(" <img src='link.png'>") </code></pre> <h6 id="注意-131">注意</h6> <p><code>^=</code>运算符是仅匹配字符串开头的方式。如果只使用<code>=</code>运算符，则只会选择整个匹配的字符串。有关详细的 CSS 选择器信息，请参见第十九章和第二十章。</p> <p>接下来，使用链式方法，将<code>before</code>和<code>after</code>方法用于在另一个元素之前或之后放置同级元素。在此示例中，我选择在<code><code></code>元素之前和之后分别放置一个<code><hr></code>元素，如下所示：</p> <pre><code class="language-php">$('code').before('<hr>').after('<hr>') </code></pre> <p>然后，我通过添加几个按钮增加了一些用户交互。点击时，第一个按钮使用<code>remove</code>方法移除包含球的<code><img></code>元素，如下所示：</p> <pre><code class="language-php">$('#a').click(function() { $('#ball').remove() } ) </code></pre> <h6 id="注意-132">注意</h6> <p>如果在大多数主要桌面浏览器中右键单击并选择检查元素，您将会发现图片现在已不再在 DOM 中。</p> <p>最后，当点击第二个按钮时，将<code>empty</code>方法应用于<code><blockquote></code>元素，如下所示：</p> <pre><code class="language-php">$('#b').click(function() { $('#quote').empty() } ) </code></pre> <p>这会清空元素的内容，但保留元素在 DOM 中。</p> <h1 id="动态应用类">动态应用类</h1> <p>有时候改变应用于元素的类会很方便，或者只是向元素添加一个类或从一个类中删除它。例如，假设你有一个名为<code>read</code>的类，用来为已读的博客文章设置样式。使用<code>addClass</code>方法，很容易向该文章添加一个类，就像这样：</p> <pre><code class="language-php">$('#post23').addClass('read') </code></pre> <p>你可以一次添加多个类，用空格分隔，就像这样：</p> <pre><code class="language-php">$('#post23').addClass('read liked') </code></pre> <p>但是如果读者选择将文章标记为未读，以便稍后再次阅读呢？在这种情况下，只需使用<code>removeClass</code>，像这样：</p> <pre><code class="language-php">$('#post23').removeClass('read') </code></pre> <p>当你这样做时，文章使用的所有其他类都不受影响。</p> <p>然而，在支持类持续添加或删除的情况下，您可能会发现使用<code>toggleClass</code>方法更简单，像这样：</p> <pre><code class="language-php">$('#post23').toggleClass('read') </code></pre> <p>现在，如果文章尚未使用该类，则添加它；否则，将其删除。</p> <h1 id="修改尺寸">修改尺寸</h1> <p>处理尺寸始终是一个棘手的 Web 开发任务，因为不同的浏览器倾向于使用略有不同的值。因此，jQuery 的一个主要优势之一是它很好地规范化这些类型的值，使得您的页面在所有主要浏览器中显示效果符合您的意图。</p> <p>有三种类型的尺寸：元素宽度和高度，内部宽度和高度，外部宽度和高度。让我们依次看看这些。</p> <h2 id="宽度和高度方法">宽度和高度方法</h2> <p><code>width</code>和<code>height</code>方法都可以获取与选择器匹配的第一个元素的宽度或高度，或者设置所有匹配元素的宽度或高度。例如，要获取 ID 为<code>elem</code>的元素的宽度，可以使用这个语句：</p> <pre><code class="language-php">width = $('#elem').width() </code></pre> <p>赋给变量<code>width</code>的值是一个纯数值，与调用<code>css</code>方法返回 CSS 值不同，例如下面的例子，将返回（例如）<code>230px</code>而不只是数字<code>230</code>：</p> <pre><code class="language-php">width = $('#elem').css('width') </code></pre> <p>您还可以获取当前窗口或文档的宽度，如下所示：</p> <pre><code class="language-php">width = $(window).width() width = $(document).width() </code></pre> <h6 id="警告-21">警告</h6> <p>当你将<code>window</code>或<code>document</code>对象传递给 jQuery 时，不能使用<code>css</code>方法获取它们的宽度或高度。相反，你必须使用<code>width</code>或<code>height</code>方法。</p> <p>返回的值与<code>box-sizing</code>设置无关（见第 20 章）。如果需要考虑<code>box-sizing</code>，则应使用<code>css</code>方法并传递<code>width</code>作为参数，就像这样（但记住在打算使用返回值时从数字部分后面添加的<code>px</code>中删除）：</p> <pre><code class="language-php">width = $('#elem').css('width') </code></pre> <p>设置值同样简单。例如，要将所有使用<code>box</code>类的元素设置为 100×100 像素，可以使用这个语句：</p> <pre><code class="language-php">$('.box').width(100).height(100) </code></pre> <p>示例 22-19 将这些操作组合成一个单独的程序，显示为图 22-17。</p> <h5 id="示例-22-19-获取和设置元素尺寸">示例 22-19. 获取和设置元素尺寸</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Dimensions</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <p> <button id='getdoc'>Get document width</button> <button id='getwin'>Get window width</button> <button id='getdiv'>Get div width</button> <button id='setdiv'>Set div width to 150 pixels</button> </p> <div id='result' style='width:300px; height:50px; background:#def;'></div> <script> $('#getdoc').click(function() { $('#result').html('Document width: ' + $(document).width()) } ) $('#getwin').click(function() { $('#result').html('Window width: ' + $(window).width()) } ) $('#getdiv').click(function() { $('#result').html('Div width: ' + $('#result').width()) } ) $('#setdiv').click(function() { $('#result').width(150) $('#result').html('Div width: ' + $('#result').width()) } ) </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2217.png" alt="获取和设置元素尺寸" loading="lazy"></p> <h6 id="图-22-17-获取和设置元素尺寸">图 22-17. 获取和设置元素尺寸</h6> <p>在<code><body></code>的开头，有四个按钮：三个用于报告文档、窗口和出现在按钮正下方的<code><div></code>元素的宽度；还有一个用于将<code><div></code>的宽度设置为新值。在<code><script></code>部分中，有四个 jQuery 语句，前三个只是获取给定对象的宽度，然后通过写入 HTML 到<code><div></code>中报告这些值。</p> <p>最终的语句有两个部分：第一个将<code><div></code>元素的宽度减少到 150 像素，第二个通过使用<code>width</code>方法获取并在<code><div></code>内显示新的宽度值，以确保显示计算出的值。</p> <h6 id="警告-22">警告</h6> <p>当用户缩放页面（无论是放大还是缩小），这个事件在所有主要浏览器中都不能以 JavaScript 可靠检测到。因此，jQuery 在应用或返回尺寸值时无法考虑缩放，因此在这种情况下可能会得到意外的结果。</p> <h2 id="innerwidth和innerheight方法"><code>innerWidth</code>和<code>innerHeight</code>方法</h2> <p>在处理尺寸时，通常还需要考虑边框、填充和其他属性。为此，您可以使用<code>innerWidth</code>和<code>innerHeight</code>方法返回匹配选择器的第一个元素的宽度和高度，<em>包括</em>填充但<em>不包括</em>边框。</p> <p>例如，以下代码返回具有 ID 为<code>elem</code>的元素的<code>innerWidth</code>，包括填充：</p> <pre><code class="language-php">iwidth = $('#elem').innerWidth() </code></pre> <h2 id="outerwidth和outerheight方法"><code>outerWidth</code>和<code>outerHeight</code>方法</h2> <p>要返回包括<em>填充和边框</em>在内的元素尺寸，您可以调用<code>outerWidth</code>和<code>outerHeight</code>方法，如下所示：</p> <pre><code class="language-php">owidth = $('#elem').outerWidth() </code></pre> <p>如果您希望<em>还</em>在返回的值中包括任何边距，可以在调用这些方法时传递<code>true</code>值，如下所示：</p> <pre><code class="language-php">owidth = $('#elem').outerWidth(true) </code></pre> <h6 id="警告-23">警告</h6> <p>对于任何<code>inner...</code>或<code>outer...</code>方法返回的值，不一定是整数，在某些情况下可能是小数。这些方法不能检测用户页面缩放，并且不能在<code>window</code>或<code>document</code>对象上使用这些方法；对于这些对象，请使用<code>width</code>或<code>height</code>方法。</p> <h1 id="dom-遍历">DOM 遍历</h1> <p>如果您回顾一下第十四章中关于文档对象模型的部分，您会记得所有网页都构建得像是扩展家族。有父对象和子对象，兄弟姐妹，祖父母，孙子辈，甚至可以称为表亲，姨妈等元素关系。例如，在以下片段中，<code><li></code>元素是<code><ul></code>元素的子元素，而<code><ul></code>元素反过来是<code><li></code>元素的父元素：</p> <pre><code class="language-php"><ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </code></pre> <p>就像在家庭中一样，你可以用多种方式引用 HTML 元素，比如通过绝对规格或者从窗口级别开始，然后往下移动（也称为<em>遍历 DOM</em>）。你还可以利用一个元素与另一个元素之间的关系来引用元素。实际上，这取决于你的具体项目——例如，如果你希望网页尽可能自包含，这样你就能更有可能将元素剪切并粘贴到其他网页文档中，而无需修改粘贴到的 HTML 以匹配目标的 HTML。无论你选择什么，jQuery 都提供了广泛的功能来帮助你准确地处理元素。</p> <h2 id="父元素">父元素</h2> <p>要引用元素的直接父级，请使用以下<code>parent</code>方法：</p> <pre><code class="language-php">my_parent = $('#elem').parent() </code></pre> <p>无论<code>elem</code>是什么类型的元素，<code>my_parent</code>对象现在包含一个指向其父元素的 jQuery 对象。实际上，由于选择器可以引用多个元素，这个调用实际上返回一个指向父元素列表的对象（尽管列表可能只有一项）。</p> <p>因为父元素可能有许多子元素，所以你可能会想知道是否可以通过这种方法返回比父元素多的元素。以前面的代码片段为例，其中有三个<code><li></code>元素。如果我们这样做：</p> <pre><code class="language-php">my_parent = $('li').parent() </code></pre> <p>当然，由于一个父元素可能有多个子元素，你可能会想知道此方法是否会返回比父元素更多的元素。考虑前面有三个<code><li></code>元素的片段。如果我们这样做：</p> <pre><code class="language-php">alert($('li').parent().length) </code></pre> <p>现在让我们在选择器匹配时执行某些操作，例如将前面代码段中父元素的<code>font-weight</code>属性更改为<code>bold</code>，如下所示：</p> <pre><code class="language-php">$('li').parent().css('font-weight', 'bold') </code></pre> <h3 id="使用过滤器">使用过滤器</h3> <p>可选地，可以向<code>parent</code>传递选择器以过滤应该反映所需更改的父级。例如，例子 22-20 有三个小列表和几个 jQuery 语句。</p> <h5 id="示例-22-20-访问父元素">示例 22-20. 访问父元素</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>DOM Traversal: Parent</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul class='memo'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <script> $('li').parent() .css('font-weight', 'bold') $('li').parent('.memo').css('list-style-type', 'circle') </script> </body> </html> </code></pre> <p>这三个列表都一样，除了中间的<code><ul></code>元素使用了类<code>memo</code>。在<code><script></code>部分，第一个语句将<code>font-weight</code>属性应用于所有<code><li></code>元素的父级，属性值为<code>bold</code>。在这种情况下，导致所有<code><ul></code>元素显示为粗体。</p> <p>第二个语句类似，但还将类名<code>memo</code>传递给<code>parent</code>方法，以便只选择该父元素。然后调用<code>css</code>方法将所选列表的<code>list-style-type</code>属性设置为<code>circle</code>。图 22-18 展示了这两个语句的效果。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2218.png" alt="使用和不使用过滤器访问父元素" loading="lazy"></p> <h6 id="图22-18-使用和不使用过滤器访问父元素">图 22-18. 使用和不使用过滤器访问父元素</h6> <h3 id="选择所有祖先元素">选择所有祖先元素</h3> <p>我们刚刚看到如何选择元素的直接父元素，但你也可以通过使用<code>parents</code>方法选择祖先元素，一直返回到<code><html></code>根元素。但为什么要这样做呢？好吧，可能是想要访问祖先链中第一个<code><div></code>元素，以根据稍后在链中进行的某些动态操作来设置其样式？</p> <p>对于你现在能想到的任何目的，这种类型的选择可能稍微过于高级，但当你需要时，你会很高兴它在那里，以下是你可能要采取的步骤：</p> <pre><code class="language-php">$('#elem').parents('div').css('background', 'yellow') </code></pre> <p>实际上，这可能并不完全是你想要的，因为它会选择祖先链中的所有<code><div></code>元素，而可能还有其他你不想样式化的元素进一步向上。因此，在这种情况下，你可以使用<code>parentsUntil</code>方法进一步过滤选择。</p> <p><code>parentsUntil</code>方法沿着祖先链向上遍历，方式与<code>parents</code>相同，但在遇到与选择过滤器匹配的第一个元素时停止（在本例中，是一个<code><div></code>元素），因此可以像前述语句一样使用它，确保只选择你想要的最接近匹配的元素：</p> <pre><code class="language-php">$('#elem').parentsUntil('div').css('background', 'yellow') </code></pre> <p>要说明这两种方法的区别，请查看示例 22-21，其中包含两组嵌套元素，都位于一个父<code><div></code>元素内。<code><script></code>部分调用了<code>parents</code>和<code>parentsUntil</code>方法的一个示例。</p> <h5 id="示例-22-21-使用parents和parentsuntil方法">示例 22-21. 使用<code>parents</code>和<code>parentsUntil</code>方法</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>DOM Traversal: Parents</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <div> `<div``>` `<section``>` `<blockquote``>` `<ul``>` `<li``>``Item 1``</li>` `<li` `id=``'elem'``>``Item 2``</li>` `<li``>``Item 3``</li>` `</ul>` `</blockquote>` `</section>` `</div>` <div> <section> <blockquote> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </blockquote> </section> </div> </div> <script> $('#elem').parents('div') .css('background', 'yellow') $('#elem').parentsUntil('div').css('text-decoration', 'underline') </script> </body> </html> </code></pre> <p>如果你看一下图 22-19，你会发现第一个 jQuery 语句设置了所有内容的背景颜色为黄色。这是因为祖先树已经通过<code>parents</code>方法遍历到<code><html></code>元素，同时选择了在树向上遍历过程中遇到的两个<code><div></code>元素（其中一个包含具有<code>elem</code> ID 的<code><li></code>元素—以粗体显示—及其父<code><div></code>，它包含两组嵌套元素）。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2219.png" alt="比较和方法" loading="lazy"></p> <h6 id="图-22-19-比较parents和parentsuntil方法">图 22-19. 比较<code>parents</code>和<code>parentsUntil</code>方法</h6> <p>然而，第二个语句使用了<code>parentsUntil</code>，使得选择在遇到第一个<code><div></code>元素时停止。这意味着当应用下划线样式时，它仅适用于包含具有<code>elem</code> ID 的<code><li></code>元素的最近的父<code><div></code>。外部的<code><div></code>没有被达到，因为它没有被样式化，所以第二个列表没有被下划线标记。</p> <h2 id="子元素">子元素</h2> <p>要访问元素的子元素，请使用<code>children</code>方法，如下所示：</p> <pre><code class="language-php">my_children = $('#elem').children() </code></pre> <p>像<code>parent</code>方法一样，这只下降一级并返回零、一个或多个匹配选择的列表。你也可以向它传递一个过滤器参数来选择子元素，如下所示：</p> <pre><code class="language-php">li_children = $('#elem').children('li') </code></pre> <p>在这里，只会选择作为<code><li></code>元素的子元素的子元素。</p> <p>要深入到后代中，你需要使用<code>find</code>方法，它是<code>parents</code>的反向操作，就像这样：</p> <pre><code class="language-php">li_descendants = $('#elem').find('li') </code></pre> <p>然而，与<code>parents</code>不同，你<em>必须</em>为<code>find</code>方法提供一个过滤选择器。如果你需要选择所有后代元素，你可以使用通用选择器，就像这样：</p> <pre><code class="language-php">all_descendants = $('#elem').find('*') </code></pre> <h2 id="兄弟元素">兄弟元素</h2> <p>在选择兄弟元素时，有更广泛的方法可用，从<code>siblings</code>开始。</p> <p><code>siblings</code>方法将返回所有符合条件的元素，这些元素是同一父元素的子元素，<em>除了</em>用于选择的元素。因此，以以下片段的示例来说，如果你查找具有 ID 为<code>two</code>的<code><li></code>元素的兄弟元素，它将仅返回第一个和第三个<code><li></code>元素：</p> <pre><code class="language-php"><ul> <li>Item 1</li> <li id='two'>Item 2</li> <li>Item 3</li> </ul> </code></pre> <p>例如，以下语句将导致第一个和第三个兄弟元素加粗：</p> <pre><code class="language-php">$('#two').siblings().css('font-weight', 'bold') </code></pre> <p>你还可以在<code>siblings</code>方法中使用过滤器来进一步缩小返回的兄弟元素。例如，要仅选择使用类<code>new</code>的兄弟元素，可以使用如下语句：</p> <pre><code class="language-php">$('#two').siblings('.new').css('font-weight', 'bold') </code></pre> <p>示例 22-22（自由地在属性列中对齐空格）显示了一个包含七个项目的无序列表，其中四个使用了类<code>new</code>。第二个项目还具有 ID 为<code>two</code>。</p> <h5 id="示例-22-22-选择和过滤兄弟元素">示例 22-22. 选择和过滤兄弟元素</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>DOM Traversal: Siblings</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <ul> <li class='new'>Item 1</li> <li id='two' class='new'>Item 2</li> <li >Item 3</li> <li class='new'>Item 4</li> <li class='new'>Item 5</li> <li >Item 6</li> <li >Item 7</li> </ul> <script> $('#two').siblings('.new').css('font-weight', 'bold') </script> </body> </html> </code></pre> <p>当加载到浏览器中时，jQuery 语句的结果是图 22-20，其中只有项目 1、项目 4 和项目 5 是加粗的，尽管项目 2 也使用了类<code>new</code>（因为该方法是在该元素上调用的，因此它被排除在选择范围之外）。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2220.png" alt="选择兄弟元素" loading="lazy"></p> <h6 id="图22-20-选择兄弟元素">图 22-20. 选择兄弟元素</h6> <h6 id="注意-133">注意</h6> <p>由于<code>siblings</code>方法省略了其调用元素（我将其称为<em>调用方</em>），它无法用于从父元素的<em>所有</em>子元素中进行选择。但是，要使用前面的示例来实现这一点，你可以使用如下语句，它将返回所有使用类<code>new</code>的兄弟元素（包括调用方）：</p> <pre><code class="language-php">$('#two').parent().children('.new') .css('font-weight', 'bold') </code></pre> <p>你还可以通过在选择中添加<code>addBack</code>方法来实现相同的结果，就像这样：</p> <pre><code class="language-php">$('#two').siblings('.new').addBack() .css('font-weight', 'bold') </code></pre> <h2 id="选择下一个和上一个元素">选择下一个和上一个元素</h2> <p>当你需要更精细地控制兄弟元素的选择时，可以进一步使用<code>next</code>和<code>prev</code>方法及其扩展版本来缩小返回的元素。例如，要引用选择器后面紧接的元素，可以使用如下语句（将匹配的元素设置为加粗显示）：</p> <pre><code class="language-php">$('#new').next().css('font-weight', 'bold') </code></pre> <p>在以下自由地排列的片段中，例如，第三个项目具有 ID <code>new</code>，因此第四个项目被返回：</p> <pre><code class="language-php"><ul> <li >Item 1</li> <li >Item 2</li> <li id='new'>Item 3</li> <li >Item 4</li> <li >Item 5</li> </ul> </code></pre> <p>到目前为止，一切都很简单。但是，如果您想引用特定元素之后的<em>所有</em>兄弟元素怎么办？好吧，您可以使用<code>nextAll</code>方法来做到这一点，像这样（在前面的代码片段中，这将样式化最后两个项目）：</p> <pre><code class="language-php">$('#new').nextAll().css('font-weight', 'bold') </code></pre> <p>在调用<code>nextAll</code>时，您还可以提供一个过滤器来从匹配的元素中选择，例如下面的示例，它将仅样式化使用<code>info</code>类的后续兄弟元素（然而，在前面的代码片段中，没有使用该类的元素，因此该语句不会执行任何操作）：</p> <pre><code class="language-php">$('#new').nextAll('.info').css('font-weight', 'bold') </code></pre> <p>或者考虑这种情况，其中一个项目具有 ID<code>new</code>，另一个项目具有 ID<code>old</code>：</p> <pre><code class="language-php"><ul> <li >Item 1</li> <li id='new'>Item 2</li> <li >Item 3</li> <li id='old'>Item 4</li> <li >Item 5</li> </ul> </code></pre> <p>现在可以选择仅跟随具有 ID 为<code>new</code>的元素的那些兄弟元素，直到（但不包括）具有 ID 为<code>old</code>的元素，像这样（其中只会样式化第三个项目）：</p> <pre><code class="language-php">$('#new').nextUntil('#old').css('font-weight', 'bold') </code></pre> <p>如果未向<code>nextUntil</code>提供参数，它的行为与<code>nextAll</code>完全相同，返回所有后续兄弟元素。您还可以向<code>nextUntil</code>提供第二个参数，以充当选择匹配元素的过滤器，例如：</p> <pre><code class="language-php">$('#new').nextUntil('#old', '.info').css('font-weight', 'bold') </code></pre> <p>在此语句中，仅会对使用<code>info</code>类的那些元素应用样式，但在前面的代码片段中，没有使用这些类的元素，因此不会采取任何操作。</p> <p>您也可以通过使用<code>prev</code>、<code>prevAll</code>和<code>prevUntil</code>方法向后反向工作，遍历组的兄弟元素。</p> <h2 id="遍历-jquery-选择">遍历 jQuery 选择</h2> <p>除了遍历 DOM，一旦您将一组元素作为 jQuery 选择返回，还可以遍历这些元素，并选择要对其进行操作的元素。</p> <p>例如，要仅对选择返回的第一个元素应用样式，您可以使用<code>first</code>方法，像这样（将第一个无序列表中的第一个列表项设置为显示下划线）：</p> <pre><code class="language-php">$('ul>li').first().css('text-decoration', 'underline') </code></pre> <p>或者您可以选择仅使用<code>last</code>方法样式化最后一项，像这样：</p> <pre><code class="language-php">$('ul>li').last().css('font-style', 'italic') </code></pre> <p>或者，要按索引访问一个元素（从 0 开始），可以使用<code>eq</code>方法，像这样（它会样式化列表中的第二个项目，因为编号从 0 开始）：</p> <pre><code class="language-php">$('ul>li').eq(1).css('font-weight', 'bold') </code></pre> <p>您还可以使用<code>filter</code>方法对选择应用过滤器，像这样（更改从第一个元素开始的每个其他元素的背景颜色，元素 0）：</p> <pre><code class="language-php">$('ul>li').filter(':even').css('background', 'cyan') </code></pre> <h6 id="警告-24">警告</h6> <p>请记住，当您对 jQuery 选择进行索引时，第一个元素是零。因此，例如，在此方式中使用选择器<code>:even</code>时，将选择元素 1、3、5 等（而不是 0、2、4、6 等）。</p> <p>要排除一个或多个元素，可以应用<code>not</code>方法，像这样（其中不使用 ID<code>new</code>的元素以蓝色样式显示）：</p> <pre><code class="language-php">$('ul>li').not('#new').css('color', 'blue') </code></pre> <p>您还可以根据它具有哪些后代来选择元素。例如，要仅选择具有后代<code><ol></code>元素的元素，您可以使用此语句来为匹配的元素添加一条删除线：</p> <pre><code class="language-php">$('ul>li').has('ol').css('text-decoration', 'line-through') </code></pre> <p>示例 22-23 将所有这些内容合并起来，以样式化一个无序列表，其中一个元素还包含一个有序列表。</p> <h5 id="示例-22-23-遍历-jquery-选择">示例 22-23. 遍历 jQuery 选择</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Selection Traversal</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li id='new'>Item 3</li> <li>Item 4 <ol type='a'> <li>Item 4a</li> <li>Item 4b</li> </ol></li> <li>Item 5</li> </ul> <script> $('ul>li').first() .css('text-decoration', 'underline') $('ul>li').last() .css('font-style', 'italic') $('ul>li').eq(1) .css('font-weight', 'bold') $('ul>li').filter(':even').css('background', 'cyan') $('ul>li').not('#new') .css('color', 'blue') $('ul>li').has('ol') .css('text-decoration', 'line-through') </script> </body> </html> </code></pre> <p>从学习图 22-21 可以看出，每个列表中的每个元素都被一个或多个 jQuery 语句所样式化。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2221.png" alt="在 jQuery 选择中唯一定位元素" loading="lazy"></p> <h6 id="图-22-21-在-jquery-选择中唯一定位元素">图 22-21. 在 jQuery 选择中唯一定位元素</h6> <h2 id="is-方法">is 方法</h2> <p>还有一个 jQuery 选择器，返回用于在普通 JavaScript 中使用的布尔值：<code>is</code>方法。与前面部分展示的 jQuery 过滤方法不同，此函数不会创建一个新的 jQuery 对象，然后可以附加其他方法，或者可以进一步过滤。相反，它只返回<code>true</code>或<code>false</code>，使该方法最适合在条件语句中使用。</p> <p>示例 22-24 使用<code>is</code>方法附加到对按钮集的事件处理程序中的<code>parent</code>调用。当单击任何按钮时，调用处理程序，<code>is</code>方法返回一个值，询问其父元素是否为<code><div></code>（图 22-22）。</p> <h5 id="示例-22-24-使用is报告parent元素">示例 22-24. 使用<code>is</code>报告<code>parent</code>元素</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Using is</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <div><button>Button in a div</button></div> <div><button>Button in a div</button></div> <span><button>Button in a span</button></span> <div><button>Button in a div</button></div> <span><button>Button in a span</button></span> <p id='info'></p> <script> $('button').click(function() { var elem = '' if ($(this).parent().is('div')) elem = 'div' else elem = 'span' $('#info').html('You clicked a ' + elem) }) </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2222.png" alt="使用 is 方法报告 parent 元素" loading="lazy"></p> <h6 id="图-22-22-使用is方法报告parent元素">图 22-22. 使用<code>is</code>方法报告<code>parent</code>元素</h6> <h1 id="不使用选择器的-jquery">不使用选择器的 jQuery</h1> <p>提供了一些用于与标准 JavaScript 对象一起使用的 jQuery 方法，使其处理变得更加简单。这些方法包括<code>$.each</code>和<code>$.map</code>，它们类似但有微妙的区别。</p> <h2 id="each-方法">$.each 方法</h2> <p>使用<code>$.each</code>，可以通过简单地附加一个用于每次迭代调用的函数来迭代数组或类数组对象。示例 22-25 展示了一个宠物名字和类型的数组（称为<code>pets</code>），从中需要提取另一个数组（称为<code>guineapigs</code>），其中只包含豚鼠的名字。</p> <h5 id="示例-22-25-调用each方法">示例 22-25. 调用<code>$.each</code>方法</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Using each</title> <script src='jquery-3.5.1.min.js'></script> </head> <body> <div id='info'></div> <script> pets = { Scratchy : 'Guinea Pig', Squeaky : 'Guinea Pig', Fluffy : 'Rabbit', Thumper : 'Rabbit', Snoopy : 'Dog', Tiddles : 'Cat' } guineapigs = [] $.each(pets, function(name, type) { if (type == 'Guinea Pig') guineapigs.push(name) }) $('#info').html('The guinea pig names are: ' + guineapigs.join(' & ')) </script> </body> </html> </code></pre> <p>为此，<code>$.each</code>方法将数组传递给一个匿名函数来处理。该函数接受两个参数，数组的索引（称为<code>name</code>）和每个元素的内容（称为<code>type</code>）。</p> <p>然后测试<code>type</code>的值是否为<code>Guinea Pig</code>，如果是，则将<code>name</code>的值推入<code>guineapigs</code>数组。完成后，代码将<code>guineapigs</code>数组的内容显示在 ID 为<code>info</code>的<code><div></code>元素中。为了分隔数组中的项目，使用 JavaScript 的<code>join</code>方法，以<code>&</code>符号作为分隔符。加载此示例到浏览器中的结果就是显示文本“The guinea pig names are: Scratchy & Squeaky.”。</p> <h2 id="map-方法">$.map 方法</h2> <p>另一种方法是使用<code>$.map</code>方法，它返回函数在数组中返回的所有值组成的数组。</p> <p>这个函数可以帮助您省去创建数组的麻烦，正如我们在前面的示例中所做的那样。相反，您可以通过将 <code>$.map</code> 返回的数组分配给一个变量来同时创建和填充数组，就像这样（最终结果相同但代码更少）：</p> <pre><code class="language-php">guineapigs = $.map(pets, function(type, name) { if (type == 'Guinea Pig') return name }) </code></pre> <h6 id="警告-25">警告</h6> <p>当您在使用 <code>$.each</code> 和 <code>$.map</code> 方法之间切换时，请注意，因为 <code>$.each</code> 将参数按顺序传递给函数，顺序是 <em>index</em>、<em>value</em>，但是 <code>$.map</code> 使用的顺序是 <em>value</em>、<em>index</em>。这就是为什么在前面的 <code>$.map</code> 示例中这两个参数被交换的原因。</p> <h1 id="使用异步通信">使用异步通信</h1> <p>在 第十八章 中，我详细介绍了如何在浏览器中的 JavaScript 和运行在 Web 服务器上的 PHP 之间实现异步通信。我还提供了一些方便和紧凑的函数，您可以调用它们来简化这个过程。</p> <p>但如果加载了 jQuery，您可以选择使用其异步功能，它的工作方式非常相似，您可以选择是使用 POST 还是 GET 请求，然后继续进行操作。</p> <h2 id="使用-post-方法">使用 POST 方法</h2> <p>示例 22-26（将亚马逊移动网站加载到 <code><div></code> 元素中）是 示例 18-1 的直接 jQuery 等效物，但由于所有异步通信处理代码都被整理到了 jQuery 库文件中，所以代码更简洁。只需调用 <code>$.post</code> 方法一次，并传递以下三个项目：</p> <ul> <li> <p>用于访问服务器上 PHP 程序的 URL</p> </li> <li> <p>要传递到该 URL 的数据</p> </li> <li> <p>用于处理返回数据的匿名函数</p> </li> </ul> <h5 id="示例-22-26-发送一个异步-post-请求">示例 22-26. 发送一个异步 POST 请求</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <!-- jqueryasyncpost.htm --> <head> <title>jQuery Asynchronous Post</title> <script src='jquery-3.5.1.min.js'></script> </head> <body style='text-align:center'> <h1>Loading a web page into a DIV</h1> <div id='info'>This sentence will be replaced</div> <script> $.post('urlpost.php', { url : 'amazon.com/gp/aw' }, function(data) { $('#info').html(data) } ) </script> </body> </html> </code></pre> <p><em>urlpost.php</em> 程序与 示例 18-2 没有改变，因为这个示例和 示例 18-1 可以互换使用。</p> <h2 id="使用-get-方法">使用 GET 方法</h2> <p>使用 GET 方法进行异步通信同样很简单，只需要以下两个参数：</p> <ul> <li> <p>用于访问服务器上 PHP 程序的 URL（包括包含要传递给它的数据的查询字符串）</p> </li> <li> <p>用于处理返回数据的匿名函数</p> </li> </ul> <p>示例 22-27 因此是 示例 18-3 的 jQuery 等效物。</p> <h5 id="示例-22-27-发送一个异步-get-请求">示例 22-27. 发送一个异步 GET 请求</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <!-- jqueryasyncget.htm --> <head> <title>jQuery Asynchronous GET</title> <script src='jquery-3.5.1.min.js'></script> </head> <body style='text-align:center'> <h1>Loading a web page into a DIV</h1> <div id='info'>This sentence will be replaced</div> <script> $.get('urlget.php?url=amazon.com/gp/aw', function(data) { $('#info').html(data) } ) </script> </body> </html> </code></pre> <p><em>urlget.php</em> 程序与 示例 18-4 没有改变，因为这个示例和 示例 18-3 可以互换使用。</p> <h6 id="警告-26">警告</h6> <p>请记住，异步通信的安全限制要求通信必须在提供主 Web 文档的同一服务器上进行。您还必须使用 Web 服务器进行异步通信，<em>而不是</em> 使用本地文件系统。因此，建议使用生产或开发服务器来测试这些示例，正如 第二章 中所描述的那样。</p> <h1 id="插件">插件</h1> <p>本章只涵盖了核心 jQuery 库的内容，对于初学者来说已经足够完成很多任务，但总有一天您会发现需要更多功能和功能。幸运的是，现在已经有了许多官方和第三方 jQuery 项目可供选择，以提供几乎您能想象到的任何功能。</p> <h2 id="jquery-用户界面">jQuery 用户界面</h2> <p>首先，有一个 jQuery 用户界面插件，称为<a href="http://jqueryui.com" target="_blank">jQuery UI</a>，它直接延续了 jQuery 的功能。使用它，您可以为网页添加拖放、调整大小和排序方法，以及更多动画效果、动态颜色过渡和更多缓动效果。它还提供了许多小部件，用于创建菜单和其他功能，如手风琴、按钮、选择器、进度条、滑块、微调器、选项卡、工具提示等等。</p> <p>如果您想在决定下载之前看一些演示，请查看<a href="http://jqueryui.com/demos" target="_blank">jQuery UI 演示页面</a>。</p> <p>整个包压缩后不到 400 KB，并且几乎没有任何限制（仅限非常慷慨的 MIT 许可证）。</p> <h2 id="其他插件">其他插件</h2> <p><a href="http://plugins.jquery.com" target="_blank">jQuery 插件注册表</a>汇集了来自众多开发者的各种免费即用的 jQuery 插件。这些包括用于表单处理和验证、幻灯片放映、响应式布局、图像处理、附加动画等等。</p> <h6 id="注意-134">注意</h6> <p>如果您正在使用 jQuery 并开发移动浏览器，您还需要查看 jQuery Mobile（见第二十三章），它提供了针对不同类型移动硬件和软件的先进的触摸优化导航方式，以提供最佳的用户体验。</p> <p>在这一章中，您学习了有时占据整本书的内容。我希望您觉得一切都很清晰，因为 jQuery 非常容易学习和使用。如果您需要其他信息，请查看<a href="http://jquery.com" target="_blank">jQuery 网站</a>。</p> <h1 id="问题-21">问题</h1> <ol> <li> <p>用作创建 jQuery 对象的工厂方法的常用符号是什么，替代方法名称是什么？</p> </li> <li> <p>您如何链接到 Google CDN 上的 jQuery 最小化版本 3.5.1 发布版？</p> </li> <li> <p>jQuery 工厂方法接受哪些类型的参数？</p> </li> <li> <p>使用哪个 jQuery 方法可以获取或设置 CSS 属性值？</p> </li> <li> <p>您会使用哪个语句将方法附加到具有 ID 为<code>elem</code>的元素的点击事件上，以使其慢慢隐藏？</p> </li> <li> <p>在动画中，必须修改哪个元素属性才能使其可以被动画化，并且可以接受哪些值？</p> </li> <li> <p>如何使多个方法同时运行（或在动画中按顺序运行）？</p> </li> <li> <p>如何从 jQuery 选择对象中检索元素节点对象？</p> </li> <li> <p>哪个语句会将具有 ID 为<code>news</code>的元素节点之前的兄弟元素设置为粗体显示？</p> </li> <li> <p>你可以使用哪种方法进行 jQuery 异步 GET 请求？</p> </li> </ol> <p>查看“第二十二章答案”，获取这些问题的答案。</p> <h1 id="第二十三章介绍-jquery-mobile">第二十三章：介绍 jQuery Mobile</h1> <p>现在你已经意识到了可以从 jQuery 中节省的时间和可以利用的巨大力量，正如在第二十二章中讨论的那样，我认为你会很高兴地发现你可以使用 jQuery Mobile 库做更多的事情。</p> <p>为了配合 jQuery，jQuery Mobile 要求在网页中同时包含 jQuery 和 jQuery Mobile（还需要一个 CSS 文件和相关图像），以便在手机和其他移动设备上查看时转变为完全互动的体验。</p> <p>jQuery Mobile 库使你能够通过所谓的<em>渐进增强</em>技术（首先使基本浏览器功能显示良好，然后在浏览器能力增强时逐步添加更多功能）将普通网页适配为移动网页。它还具备所谓的<em>响应式 Web 设计</em>（使网页在各种设备和窗口或屏幕尺寸上显示良好）的特性。</p> <p>本章的重点并不是要教会你关于 jQuery Mobile 的所有知识——那本身就可以写成一本完整的书！相反，我想给你足够的信息，让你能够重新设计任何不太大的网页集合，使其成为一个连贯、快速且美观的 Web 应用程序，具备现代触摸设备所期望的所有页面滑动和其他过渡效果，以及更大更易用的图标、输入字段和其他增强的输入和导航功能。</p> <p>为此，我介绍了 jQuery Mobile 的一些主要功能，这些功能可以让你快速上手，获得一个在桌面和移动平台上都运行良好的清晰且可操作的解决方案。在此过程中，我指出了一些你在将网页适配到移动端时可能会遇到的陷阱以及如何避免它们。一旦掌握了使用 jQuery Mobile，你将很容易通过在线文档找到适合你自己项目需求的功能。</p> <h6 id="注意-135">注意</h6> <p>除了根据浏览器的能力逐步增强 HTML 显示外，jQuery Mobile 还会根据使用的标签和一组自定义数据属性逐步增强常规的 HTML 标记。某些元素可以自动增强，无需任何数据属性（例如，<code>select</code> 元素会自动升级为菜单），而其他元素则需要存在数据属性才能进行增强。支持的完整数据属性列表可以在<a href="http://api.jquerymobile.com/data-attribute" target="_blank">API 文档</a>中查看。</p> <h1 id="包括-jquery-mobile">包括 jQuery Mobile</h1> <p>有两种方法可以在你的网页中包含 jQuery Mobile。首先，你可以访问<a href="http://jquerymobile.com/download" target="_blank">下载页面</a>，选择你需要的版本，将文件下载到你的 Web 服务器（包括与库配套的样式表和附带的图像），然后从那里提供它们。</p> <p>例如，如果你已经下载了 jQuery Mobile 1.4.5（我撰写时的当前版本）及其 CSS 文件到服务器的文档根目录，你可以包含它们以及相应的 jQuery JavaScript 文件，我写作时<em>必须</em>是 2.2.4 版本。我应该指出，自 jQuery Mobile 最后更新以来已经有一段时间了，我想知道其他技术是否会很快超越它：</p> <pre><code class="language-php"><link href="http://myserver.com/jquery.mobile-1.4.5.min.css" rel="stylesheet"> <script src='http://myserver.com/jquery-2.2.4.min.js'></script> <script src='http://myserver.com/jquery.mobile-1.4.5.min.js'></script> </code></pre> <p>或者，就像 jQuery 一样，你可以利用免费的内容交付网络（CDN），简单地链接到你需要的版本。有三个主要的 CDN 可供选择（Max CDN，Google CDN 和 Microsoft CDN），你可以按以下方式从中获取你需要的文件：</p> <pre><code class="language-php"><!-- Retrieving jQuery & Mobile via Max CDN --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> </code></pre> <pre><code class="language-php"><!-- Retrieving jQuery & Mobile via Google CDN --> <link rel="stylesheet" href= "http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> <script src= "http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src= "http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"> </script> </code></pre> <pre><code class="language-php"><!-- Retrieving jQuery & Mobile via Microsoft CDN --> <link rel="stylesheet" href= "http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src= "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script> <script src= "http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> </code></pre> <p>你可能希望将这些语句中的一组放置在页面的<code><head></code>部分。</p> <h6 id="注意-136">注意</h6> <p>为了确保你可以在离线状态下使用这些示例，我已经下载了所有所需的 jQuery 文件，并将它们与示例文件的归档一起包含在内，你可以从<a href="https://github.com/RobinNixon/lpmj6" target="_blank">GitHub</a>免费下载。因此，所有这些示例都显示本地提供的文件。</p> <h1 id="入门指南">入门指南</h1> <p>让我们立即深入了解一个 jQuery Mobile 网页的一般外观，参见示例 23-1。这实际上非常简单，如果你快速浏览一下，它将有助于快速理解本章的其余内容。</p> <h5 id="示例-23-1-jquery-mobile-单页面模板">示例 23-1. jQuery Mobile 单页面模板</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Single page template</title> <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"> <script src="jquery-2.2.4.min.js"></script> <script src="jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header">         <h1>Single page</h1>       </div>       <div data-role="content">         <p>This is a single page boilerplate template</p>       </div>       <div data-role="footer">         <h4>Footer content</h4>       </div>     </div>   </body> </html> </code></pre> <p>仔细检查前面的示例，你会发现它从你期望的标准 HTML5 元素开始。你可能会注意到的第一个不寻常的项目是在<code><head></code>部分，即在<code><meta></code>标签内的<code>viewport</code>设置。如今，大多数用户将在移动设备上浏览，因此这个标签应该出现在你的所有网页中。</p> <p>这行代码告诉移动浏览器将显示文档的宽度设置为与 Web 浏览器相同，并且开始时不缩放文档。在高度大于宽度的浏览器中显示时，页面看起来像图 23-1 所示。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2301.png" alt="" loading="lazy"></p> <h6 id="图-23-1-显示-jquery-mobile-单页面模板">图 23-1. 显示 jQuery Mobile 单页面模板</h6> <p>在指定页面标题后，加载了 jQuery Mobile 的 CSS，然后是 jQuery 2.2.4 库和 jQuery Mobile 1.4.5 库。如“包含 jQuery Mobile”中所解释的，如果你愿意，这些文件都可以从 CDN 下载。</p> <h6 id="注意-137">注意</h6> <p>本章的示例包含一个名为<em>images</em>的文件夹，其中包含 CSS 所需的所有图标和其他图片。如果您使用 CDN 下载 CSS 和 JavaScript 库文件，可能不需要在您自己的项目中包含此文件夹，因为 CDN 的<em>images</em>文件夹应该被使用。</p> <p>转到<code><body></code>部分，您会注意到主网页包含在一个<code><div></code>元素内，该元素具有 jQuery Mobile <code>data-role</code>属性值为<code>page</code>，并包括进一步的三个<code><div></code>元素，用于页面的头部、内容和页脚，每个元素都有相应的<code>data-role</code>属性。</p> <p>现在您已经了解了 jQuery Mobile 网页的基本结构。当您在页面之间进行链接时，新页面将通过异步通信加载并添加到 DOM 中。一旦加载完成，页面就可以通过多种方式进行过渡显示，包括即时替换、淡入、溶解、滑动等。</p> <h6 id="注意-138">注意</h6> <p>由于网页的异步加载，您应始终在 Web 服务器上测试您的 jQuery Mobile 代码，而不是在本地文件系统上。这是因为 Web 服务器知道如何处理网页的异步加载，这对通信的正确工作是必要的。AMPPS 系统足以做到这一点，只要您使用<code>localhost://</code>或<code>http://127.0.0.1/</code>访问文件。</p> <h1 id="链接页面">链接页面</h1> <p>使用 jQuery Mobile，您可以以正常方式链接到页面，并且它将自动处理这些页面请求的异步加载（在可能的情况下），以确保应用所选的任何过渡效果。</p> <p>这使您可以专注于简单创建您的网页，并让 jQuery Mobile 处理使它们看起来好看并且显示迅速和专业。</p> <p>为了启用动画页面过渡效果，所有指向外部页面的链接将被异步加载。jQuery Mobile 通过将所有<code><a href...></code>链接转换为异步通信（也称为 Ajax）请求，并在请求完成时显示加载旋转器来实现这一点。显然，这仅适用于内部页面链接。</p> <h6 id="注意-139">注意</h6> <p>当您点击链接时，jQuery Mobile 实现页面过渡的方式是通过“劫持”点击事件，并访问<code>event.preventDefault</code>事件，然后提供其特殊的 jQuery Mobile 代码。</p> <p>如果请求成功，新页面内容将添加到 DOM 中，然后使用默认页面过渡或您选择的任何过渡效果将所选的新页面动画显示出来。</p> <p>如果异步请求失败，会显示一个小巧而不显眼的错误消息让您知晓，但不会干扰导航流程。</p> <h2 id="同步链接">同步链接</h2> <p>链接指向其他域或具有<code>rel="external"</code>、<code>data-ajax="false"</code>或<code>target</code>属性将同步加载，导致页面完全刷新而无动画过渡。</p> <p><code>rel="external"</code> 和 <code>data-ajax="false"</code> 具有相同的效果，但前者用于链接到另一个站点或域，而后者用于防止任何页面异步加载。</p> <p>由于安全限制，jQuery Mobile 会同步加载所有外部域的页面。</p> <h6 id="注意-140">注意</h6> <p>在使用 HTML 文件上传时，您需要禁用异步页面加载，因为这种获取网页的方式与 jQuery Mobile 接收上传文件的能力冲突。对于这种情况，最好的方法可能是在 <code><form></code> 元素中添加 <code>data-ajax="false"</code> 属性，如下所示：</p> <pre><code class="language-php"><form `data-ajax=``'false'` method='post' action='*`dest_file`*' enctype='multipart/form-data'> </code></pre> <h2 id="在多页文档中链接到内部位置">在多页文档中链接到内部位置</h2> <p>单个 HTML 文档可以包含一个或多个页面。后者涉及堆叠多个 <code>data-role</code> 为 <code>page</code> 的 <code><div></code> 元素，这允许您在一个<em>单一</em> HTML 文档中构建一个小站点或应用程序；jQuery Mobile 将简单地在加载页面时显示源顺序中找到的第一个页面。</p> <p>如果多页文档中的链接指向锚点（例如 <code>#page2</code>），框架将查找带有 <code>data-role</code> 属性为 <code>page</code> 和给定 ID（<code>id="page2"</code>）的页面包装 <code><div></code>。如果找到，则将新页面过渡到视图中。</p> <p>用户可以在 jQuery Mobile 中无缝导航到所有类型的网页（无论是内部、本地还是外部）。对于最终用户来说，所有页面看起来都一样，只是在加载外部页面时会显示 Ajax 加载指示器，而加载的外部页面将替换当前页面，而不是像内部页面那样插入 DOM 以保留所有 jQuery Mobile 功能。在所有情况下，jQuery Mobile 更新页面的 URL 哈希以启用后退按钮支持。这也意味着 jQuery Mobile 页面可以被搜索引擎索引，并且不会像原生应用程序一样封闭在某个地方。</p> <h6 id="警告-27">警告</h6> <p>当从异步加载的移动页面链接到包含多个内部页面的页面时，必须在链接中添加<code>rel="external"</code>或<code>data-ajax="false"</code>以强制进行完整页面重新加载，清除掉 URL 中的异步哈希。异步页面使用哈希（<code>#</code>）来跟踪其历史记录，而多个内部页面使用此符号来指示内部页面。</p> <h2 id="页面过渡">页面过渡</h2> <p>通过使用 CSS 过渡效果，jQuery Mobile 可以对任何页面链接或表单提交应用效果，只要使用异步导航（默认情况）。</p> <p>要应用过渡效果，可以在 <code><a></code> 或 <code><form></code> 标签中使用 <code>data-transition</code> 属性，如下所示：</p> <pre><code class="language-php"><a `data-transition=``"slide"` href="destination.html">Click me</a> </code></pre> <p>此属性支持值 <code>fade</code>（自版本 1.1 起的默认值），<code>pop</code>，<code>flip</code>，<code>turn</code>，<code>flow</code>，<code>slidefade</code>，<code>slide</code>（版本 1.1 之前的默认值），<code>slideup</code>，<code>slidedown</code> 和 <code>none</code>。</p> <p>例如，值 <code>slide</code> 使新页面从右侧滑入，同时当前页面从左侧滑出。其他值的效果类似明显。</p> <h3 id="将页面加载为对话框">将页面加载为对话框</h3> <p>你可以使用 <code>data-rel</code> 属性并将其值设为 <code>dialog</code>，将新页面显示为对话框窗口，就像这样：</p> <pre><code class="language-php"><a `data-rel=``"dialog"` href="dialog.html">Open dialog</a> </code></pre> <p>示例 23-2 演示了如何将各种页面过渡效果应用于页面加载和对话框加载，本地加载 jQuery 库而不是通过 CDN。它由一个简单的表格组成，有两列，第一列用于加载对话框，另一列用于加载新页面。列出了每种可用的过渡类型。为了将链接显示为按钮，我为每个链接的 <code>data-role</code> 属性提供了值 <code>button</code>（按钮的样式见“按钮样式”）。</p> <h5 id="示例-23-2-jquery-mobile-页面过渡">示例 23-2. jQuery Mobile 页面过渡</h5> <pre><code class="language-php"><!DOCTYPE html>  <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">      <title>Page Transitions</title>      <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">     <script src="jquery-2.2.4.min.js"></script>     <script src="jquery.mobile-1.4.5.min.js"></script>   </head>    <body>      <div data-role="page">       <div data-role="header">         <h1>jQuery Mobile Page Transitions</h1>       </div>       <div data-role="content"><table>         <tr><th><h3>fade</h3></th>           <td><a href="page-template.html" data-rel="dialog"            data-transition="fade" data-role='button'>dialog</a></td>           <td><a href="page-template.html" data-transition="fade"            data-role='button'>page</a></td>         </tr><tr><th><h3>pop</h3></th>           <td><a href="page-template.html" data-rel="dialog"            data-transition="pop" data-role='button'>dialog</a></td>           <td><a href="page-template.html" data-transition="pop"            data-role='button'>page</a></td>         </tr><tr><th><h3>flip</h3></th>           <td><a href="page-template.html" data-rel="dialog"            data-transition="flip" data-role='button'>dialog</a></td>           <td><a href="page-template.html" data-transition="flip"            data-role='button'>page</a></td>         </tr><tr><th><h3>turn</h3></th>           <td><a href="page-template.html" data-rel="dialog"            data-transition="turn" data-role='button'>dialog</a></td>           <td><a href="page-template.html" data-transition="turn"            data-role='button'>page</a></td>         </tr><tr><th><h3>flow</h3></th>           <td><a href="page-template.html" data-rel="dialog"            data-transition="flow" data-role='button'>dialog</a></td>           <td><a href="page-template.html" data-transition="flow"            data-role='button'>page</a></td>         </tr><tr><th><h3>slidefade</h3></th>           <td><a href="page-template.html" data-rel="dialog"            data-transition="slidefade" data-role='button'>dialog</a></td>           <td><a href="page-template.html" data-transition="slidefade"            data-role='button'>page</a></td>         </tr><tr><th><h3>slide</h3></th>           <td><a href="page-template.html" data-rel="dialog"            data-transition="slide" data-role='button'>dialog</a></td>           <td><a href="page-template.html" data-transition="slide"            data-role='button'>page</a></td>         </tr><tr><th><h3>slideup</h3></th>           <td><a href="page-template.html" data-rel="dialog"            data-transition="slideup" data-role='button'>dialog</a></td>           <td><a href="page-template.html" data-transition="slideup"            data-role='button'>page</a></td>         </tr><tr><th><h3>slidedown</h3></th>           <td><a href="page-template.html" data-rel="dialog"            data-transition="slidedown" data-role='button'>dialog</a></td>           <td><a href="page-template.html" data-transition="slidedown"            data-role='button'>page</a></td>         </tr><tr><th><h3>none</h3></th>           <td><a href="page-template.html" data-rel="dialog"            data-transition="none" data-role='button'>dialog</a></td>           <td><a href="page-template.html" data-transition="none"            data-role='button'>page</a></td></tr></table>       </div>       <div data-role="footer">         <h4><a href="http://tinyurl.com/jqm-trans">Official Demo</a></h4>       </div>     </div>   </body> </html> </code></pre> <p>图 23-2 展示了加载此示例（保存为 <em>transitions.html</em> 文件名）到浏览器的结果，而 图 23-3 展示了翻转过渡的实际效果。顺便提一下，如果你点击示例页脚中的<a href="http://demos.jquerymobile.com/1.4.4/transitions" target="_blank">链接</a>，将带你到官方演示站点，你可以更详细地了解这些效果。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2302.png" alt="" loading="lazy"></p> <h6 id="图23-2-对页面和对话框应用过渡效果">图 23-2. 对页面和对话框应用过渡效果</h6> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2303.png" alt="" loading="lazy"></p> <h6 id="图23-3-翻转过渡进行中">图 23-3. 翻转过渡进行中</h6> <h1 id="按钮样式">按钮样式</h1> <p>你可以轻松地将简单链接显示为按钮，而无需添加自定义 CSS。你所需做的就是向元素的 <code>data-role</code> 属性提供值 <code>button</code>，就像这样：</p> <pre><code class="language-php"><a `data-role=``"button"` href="news.html">Latest news</a> </code></pre> <p>你可以决定是否使按钮展开到窗口的整个宽度（默认），就像 <code><div></code> 元素一样，或者以行内显示，就像 <code><span></code> 元素一样。要行内显示按钮，请向 <code>data-inline</code> 属性提供值 <code>true</code>，就像这样：</p> <pre><code class="language-php"><a data-role="button" `data-inline=``"true"` href="news.html">Latest news</a> </code></pre> <p>无论你是从链接创建按钮还是从表单中使用按钮，你都可以通过选择圆角（默认）或直角，并使其具有阴影（默认）或无阴影的方式来修改其显示方式。通过分别向 <code>data-corners</code> 和 <code>data-shadow</code> 属性提供值 <code>false</code> 来关闭这些功能，就像这样：</p> <pre><code class="language-php"><a data-role="button" data-inline="true" `data-corners=``"false"` `data-shadow=``"false"` href="news.html">Latest news</a> </code></pre> <p>此外，你甚至可以选择使用 <code>data-icon</code> 属性为按钮添加图标，就像这样：</p> <pre><code class="language-php"><a data-role="button" data-inline="true" `data-icon=``"home"` href="home.html">Home page</a> </code></pre> <p>有超过 50 种现成的图标可供选择。它们全部使用一种称为可缩放矢量图形（SVG）的强大图形语言创建，并针对不支持 SVG 的设备回退到 PNG 格式，使得图标在视网膜显示屏上表现出色。查看<a href="https://tinyurl.com/jqmicons" target="_blank">图标演示</a>以了解现有的图标。</p> <p>默认情况下，图标显示在按钮文本的左侧，但你可以选择将它们放置在文本的右侧、上方、下方，或者通过向 <code>data-iconpos</code> 属性应用值 <code>right</code>、<code>top</code>、<code>bottom</code> 或 <code>notext</code> 来移除任何文本，就像这样：</p> <pre><code class="language-php"><a data-role="button" data-inline="true" data-icon="home" `data-iconpos=``"right"` href="home.html">Home page</a> </code></pre> <p>如果选择不显示任何按钮文字，则默认显示圆形按钮。</p> <p>最后，在这个简短的按钮样式概述中，您可以通过向<code>data-mini</code>属性提供<code>true</code>值来选择显示较小的按钮（包括按钮文本），如下所示：</p> <pre><code class="language-php"><a data-role="button" data-inline="true" data-icon="home" `data-mini=``"true"` href="home.html">Home page</a> </code></pre> <p>示例 23-3 演示了使用这些按钮样式创建多种按钮的选择（为简洁起见没有<code>href</code>属性），如图 23-4 所示。</p> <h5 id="示例-23-3-各种按钮元素">示例 23-3. 各种按钮元素</h5> <pre><code class="language-php"><a data-role="button">Default</a> <a data-role="button" data-inline="true">In-line</a> <a data-role="button" data-inline="true"    data-corners="false">Squared corners</a> <a data-role="button" data-inline="true"    data-shadow="false">Unshadowed</a> <a data-role="button" data-inline="true" data-corners="false"    data-shadow="false">Both</a><br> <a data-role="button" data-inline="true"    data-icon="home">Left icon</a> <a data-role="button" data-inline="true" data-icon="home"    data-iconpos="right">Right icon</a> <a data-role="button" data-inline="true" data-icon="home"    data-iconpos="top">Top icon</a> <a data-role="button" data-inline="true" data-icon="home"    data-iconpos="bottom">Bottom icon</a><br> <a data-role="button" data-mini="true">Default Mini</a> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2304.png" alt="" loading="lazy"></p> <h6 id="图-23-4-各种按钮样式的组合">图 23-4. 各种按钮样式的组合</h6> <p>实际上，您可以使用按钮进行更多的样式设置，您可以在<a href="https://tinyurl.com/jqmbuttons" target="_blank">按钮演示</a>中找到所需的所有详细信息。但现在，这个介绍将对您有所帮助。</p> <h1 id="列表处理">列表处理</h1> <p>在处理列表时，jQuery Mobile 确实为您提供了一系列易于使用的功能，所有这些功能都可以通过将<code>data-role</code>属性设置为<code>listview</code>来访问<code><ul></code>或<code><ol></code>元素。</p> <p>因此，例如，要创建简单的无序列表，您可以使用以下代码：</p> <pre><code class="language-php"><ul `data-role=``"listview"`> <li>Broccoli</li> <li>Carrots</li> <li>Lettuce</li> </ul> </code></pre> <p>对于有序列表，只需将<code><ul></code>的开放和闭合标签替换为<code><ol></code>，列表将被编号。</p> <p>列表中的任何链接将自动嵌入箭头图标并显示为按钮。您还可以通过给<code>data-inset</code>属性赋值<code>true</code>来将列表插入到页面上的其他内容中进行混合。</p> <p>示例 23-4 演示了这些不同特性在实践中的应用；结果显示在图 23-5 中。</p> <h5 id="示例-23-4-各种列表选择">示例 23-4. 各种列表选择</h5> <pre><code class="language-php"><ul data-role="listview">   <li>An</li>   <li>Unordered</li>   <li>List</li> </ul><br><br> <ol data-role="listview">   <li>An</li>   <li>Ordered</li>   <li>List</li> </ol><br> <ul data-role="listview" data-inset="true">   <li>An</li>   <li>Inset Unordered</li>   <li>List</li> </ul> <ul data-role="listview" data-inset="true">   <li><a href='#'>An</a></li>   <li><a href='#'>Inset Unordered</a></li>   <li><a href='#'>Linked List</a></li> </ul> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2305.png" alt="" loading="lazy"></p> <h6 id="图-23-5-有序和无序的普通和插入列表">图 23-5. 有序和无序的普通和插入列表</h6> <h2 id="可过滤列表">可过滤列表</h2> <p>您可以通过将<code>data-filter</code>属性设置为<code>true</code>使列表可过滤，这将在列表上方放置一个搜索框，并且当用户输入时，将自动隐藏任何不匹配搜索词的列表元素。您还可以将<code>data-filter-reveal</code>设置为<code>true</code>，以便在至少输入一个字符的过滤输入之前不显示任何字段，然后仅显示与输入匹配的字段。</p> <p>示例 23-5 演示了这两种类型的过滤列表的使用，仅通过向后者添加<code>data-filter-reveal="true"</code>来区分。</p> <h5 id="示例-23-5-过滤和过滤显示列表">示例 23-5. 过滤和过滤显示列表</h5> <pre><code class="language-php"><ul data-role="listview" data-filter="true"     data-filter-placeholder="Search big cats..." data-inset="true">   <li>Cheetah</li>   <li>Cougar</li>   <li>Jaguar</li>   <li>Leopard</li>   <li>Lion</li>   <li>Snow Leopard</li>   <li>Tiger</li> </ul> <ul data-role="listview" data-filter="true" `data-filter-reveal=``"true"`     data-filter-placeholder="Search big cats..." data-inset="true">   <li>Cheetah</li>   <li>Cougar</li>   <li>Jaguar</li>   <li>Leopard</li>   <li>Lion</li>   <li>Snow Leopard</li>   <li>Tiger</li> </ul> </code></pre> <p>注意使用<code>data-filter-placeholder</code>属性在输入字段为空时为用户提供提示。</p> <p>在图 23-6 中，您可以看到前一种列表类型已经输入了字母<code>a</code>，因此当前只显示具有<code>a</code>的字段，而第二个列表中没有显示任何字段，因为过滤字段尚未输入任何内容。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2306.png" alt="" loading="lazy"></p> <h6 id="图-23-6-显示过滤和过滤显示列表">图 23-6. 显示过滤和过滤显示列表</h6> <h2 id="列表分隔符">列表分隔符</h2> <p>为了增强列表的显示方式，您还可以在其中放置手动或自动分隔符。通过为具有<code>data-role</code>属性值为<code>list-divider</code>的列表元素提供支持，您可以创建手动列表分隔符，如例 23-6 所示，显示为图 23-7。</p> <h5 id="例23-6-手动列表分隔符">例 23-6. 手动列表分隔符</h5> <pre><code class="language-php"><ul data-role="listview" data-inset="true">   `<li` `data-role=``"list-divider"``>``Big Cats``</li>`   <li>Cheetah</li>   <li>Cougar</li>   <li>Jaguar</li>   <li>Lion</li>   <li>Snow Leopard</li>   `<li` `data-role=``"list-divider"``>``Big Dogs``</li>`   <li>Bloodhound</li>   <li>Doberman Pinscher</li>   <li>Great Dane</li>   <li>Mastiff</li>   <li>Rottweiler</li> </ul> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2307.png" alt="" loading="lazy"></p> <h6 id="图23-7-列表按类别划分">图 23-7. 列表按类别划分</h6> <p>为了让 jQuery Mobile 以方便的方式确定分隔，您可以为<code>data-autodividers</code>属性提供值<code>true</code>，如例 23-7 所示，它按字母顺序划分字段并显示为图 23-8。</p> <h5 id="例23-7-使用自动分隔符">例 23-7. 使用自动分隔符</h5> <pre><code class="language-php"><ul data-role="listview" data-inset="true" data-autodividers="true">    <li>Cheetah</li>    <li>Cougar</li>    <li>Jaguar</li>    <li>Leopard</li>    <li>Lion</li>    <li>Snow Leopard</li>    <li>Tiger</li> </ul> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2308.png" alt="" loading="lazy"></p> <h6 id="图23-8-自动按字母顺序划分列表">图 23-8. 自动按字母顺序划分列表</h6> <p>与按钮一样（请参见“样式化按钮”），您还可以使用<code>data-icon</code>属性为链接列表字段添加图标，并提供一个表示要显示的图标的值，就像这样：</p> <pre><code class="language-php"><li `data-icon=``"gear"`><a href="settings.html">Settings</a></li> </code></pre> <p>在这个示例中，链接列表的默认右尖括号将被您选择的图标替换（在本例中是齿轮图标）。</p> <p>除了所有这些出色的功能外，您还可以在列表字段中添加图标和缩略图，并且它们将被缩放以在显示时呈现良好。有关如何执行此操作以及关于许多其他列表功能的详细信息，请参阅<a href="https://tinyurl.com/jqmlists" target="_blank">官方文档</a>。</p> <h1 id="下一步是什么">下一步是什么？</h1> <p>正如我在开头提到的，本章的目的是快速使您熟悉 jQuery Mobile，以便您可以轻松地将网站重新打包成在所有设备上（无论是桌面还是移动设备）看起来都很好的 Web 应用程序。</p> <p>为此，我仅介绍了 jQuery Mobile 非常好的和最重要的功能，所以我只是初步介绍了您可以利用它做的事情的皮毛。例如，您可以以多种方式增强和使表单在移动设备上运行良好。您可以构建响应式表格，创建可折叠内容，调用弹出窗口，设计自己的主题等等。</p> <h6 id="注意-141">注意</h6> <p>您可能会对知道您可以与 Apache 的产品<a href="https://cordova.apache.org" target="_blank">Cordova</a>结合使用 jQuery Mobile 来构建适用于 Android 和 iOS 的独立应用程序感兴趣。这并不是完全简单明了的事情，这超出了本书的范围，但大部分艰苦工作已经为您完成。</p> <p>一旦您掌握了本章的所有内容，如果您想了解 jQuery Mobile 还能为您提供什么帮助，我建议您查看官方演示和<a href="http://demos.jquerymobile.com" target="_blank">网站文档</a>。</p> <p>此外，第二十九章的示例社交网络应用程序在接近真实世界的情景中应用了许多这些功能，这是了解如何使您的网页移动化的绝佳方法。在此之前，我们将看看最受欢迎且快速增长的 JavaScript 框架之一，React。</p> <h1 id="问题-22">问题</h1> <ol> <li> <p>使用 CDN 将 jQuery Mobile 传送到 Web 浏览器有哪些主要好处和一个缺点？</p> </li> <li> <p>你会使用什么 HTML 来定义 jQuery Mobile 的内容页面？</p> </li> <li> <p>组成 jQuery 页面的三个主要部分是什么，并且它们如何表示？</p> </li> <li> <p>如何在 HTML 文档中放置多个 jQuery Mobile 页面？</p> </li> <li> <p>如何阻止网页异步加载？</p> </li> <li> <p>如何将锚点的页面转换设置为翻转，而不是使用默认的淡入效果？</p> </li> <li> <p>如何加载页面，使其显示为对话框而不是网页？</p> </li> <li> <p>如何轻松地使锚点链接显示为按钮？</p> </li> <li> <p>如何使 jQuery Mobile 元素像 <code><span></code> 元素一样内联显示，而不是像 <code><div></code> 元素一样全宽？</p> </li> <li> <p>如何为按钮添加图标？</p> </li> </ol> <p>参见“第二十三章答案”，在附录 A 中找到这些问题的答案。</p> <h1 id="第二十四章react-简介">第二十四章：React 简介</h1> <p>当使用 JavaScript、HTML 和 CSS 构建动态网站时，随着时间推移，处理网站和应用程序前端所需代码的创建可能会变得冗长且啰嗦，从而降低项目开发速度，并可能引入难以找到的错误。</p> <p>这就是框架的用武之地。当然，自 2006 年以来，我们有 jQuery 来帮助我们，因此它被安装在绝大多数的生产网站上，尽管如今 JavaScript 在范围和灵活性上已经足够成熟，程序员不再需要过度依赖像 jQuery 这样的框架。随着技术的不断进步，现在还有许多其他出色的选择，比如 Angular 和我在这里讨论的我的首选，React。</p> <p>jQuery 的设计目的是简化 HTML DOM 树的遍历和操作，以及事件处理、CSS 动画和 Ajax，但是一些程序员，比如谷歌的开发团队，认为它仍然不够强大，因此他们在 2010 年推出了 Angular JS，这在 2016 年演变为 Angular。</p> <p>Angular 将组件层次结构作为其主要的架构特征，而不是像 Angular 那样使用“scope”或控制器。谷歌庞大的 AdWords 平台以及 Forbes、Autodesk、Indiegogo、UPS 等公司都在使用 Angular，它确实非常强大。</p> <p>另一方面，Facebook 则有不同的愿景，推出了 React（也称为 React JS）作为其开发单页或移动应用程序的框架，并围绕 JSX 扩展（代表 JavaScript XML）构建。React 库（首次开发于 2012 年）将网页划分为单一组件，简化了开发所需的接口，以服务于 Facebook 所有的广告及更多内容，现在它被网上的各种平台广泛采用，如 Dropbox、Cloudflare、Airbnb、Netflix、BBC、PayPal 等众多知名企业。</p> <p>显然，Angular 和 React 在它们的创作和设计过程中都受到了坚实的商业决策的驱动，并且它们都是为了处理极高流量的网页而构建的，而 jQuery 在开发者寻求的功能方面显得力不从心。</p> <p>因此，如今，除了要了解 JavaScript、HTML、CSS 等核心技术，还应该掌握一些 jQuery 以及至少了解 Angular 和 React 其中之一（如果不是两者都要），以及可能其他一些也有自己追随者的框架，这对程序员来说可能会很有用。</p> <p>然而，基于易用性、学习曲线不陡、普遍实施以及因 Google 趋势显示它是三者中最受欢迎的框架（见图 24-1），我决定向你介绍 React 更为重要。顺便说一句，请不要将同名的 ReactPHP 与 JavaScript 的 React 混淆，它们是完全独立且不相关的项目。</p> <h1 id="react-究竟有什么意义">React 究竟有什么意义？</h1> <p>React 允许开发者创建能够轻松处理和改变数据而无需重新加载网页的大型 Web 应用程序。它的主要存在理由是速度、可扩展性以及简化处理单页 Web 和移动应用程序的视图层。它还能创建可重用的 UI 组件，并管理虚拟 DOM 以提升性能。有人曾说过，你可以将其用作将应用程序分成三个组件（模型、视图、控制器）中的 V（视图）。</p> <p>开发者无需费力找出各种描述接口交易的方式，只需描述最终状态下的接口，使得当交易发生在该状态时，React 会自动更新 UI。其结果是更快、更少 bug 的开发；速度、可靠性和可扩展性。因为 React 是一个库而不是框架，学习它也很快，只需掌握几个函数。之后，一切都取决于你的 JavaScript 技能。</p> <p>那么，让我们开始学习如何访问 React 文件。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2401.png" alt="" loading="lazy"></p> <h6 id="图-24-1-根据-google-趋势最近-jqueryangular-和-react-的受欢迎程度">图 24-1. 根据 Google 趋势，最近 jQuery、Angular 和 React 的受欢迎程度</h6> <h6 id="注意-142">注意</h6> <p>我觉得 jQuery 很棒，但我也发现 React 非常易于使用，我认为时间会证明我对 React 最终能否取代 jQuery 成为主导框架（尤其是处理 UI 方面）的猜测是否正确。即使不是这样，学习 React 仍将使你掌握一种非常强大的新工具，许多顶级公司都会在你的简历上看重它。同时也不要忽视 Angular。如果这本书的篇幅足够，我也会介绍 Angular，因为了解它对于调试和维护现有代码非常重要，即使你不使用它开发。你可以在 <a href="https://angular.io" target="_blank"><code>angular.io</code></a> 找到关于 Angular 的所有信息（这也会让你的简历更上一层楼）。</p> <h1 id="访问-react-文件">访问 React 文件</h1> <p>像 jQuery 和 Angular 一样，React 是开源的，完全免费使用。也像其他框架一样，在网上有许多服务可以免费为你提供最新（或任何版本）的文件，因此使用它可以像在你的网页中添加几行额外的代码一样简单。</p> <p>在探讨 React 的功能和如何使用它之前，先了解如何将其包含在网页中，从 <em>unpkg.com</em> 拉取文件：</p> <pre><code class="language-php"><script   src="https://unpkg.com/react@17/umd/react.development.js"> </script> <script   src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"> </script> </code></pre> <p>这些行理想情况下应放在页面的 <code><head>...</head></code> 部分，以确保它们在 body 部分加载之前加载。它们加载了 React 和 React DOM 的开发版本，帮助你进行开发和调试。在生产网站上，你应该将这些 URL 中的单词 <code>development</code> 替换为 <code>production</code>，为了加快传输速度，你甚至可以将 <code>development</code> 改为 <code>production.min</code>，这样会调用压缩版本的文件，像这样：</p> <pre><code class="language-php"><script   src="https://unpkg.com/react@17/umd/react.production.min.js"> </script> <script   src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"> </script> </code></pre> <p>为了方便访问并尽可能简化代码，我已经从本书示例的伴随存档中下载了最新的（我写作时是版本 17）未压缩开发文件的版本（在<a href="https://github.com/RobinNixon/lpmj6" target="_blank">GitHub</a>上），因此所有示例都可以本地加载，看起来像这样：</p> <pre><code class="language-php"><script src="react.development.js"></script> <script src="react-dom.development.js"></script> </code></pre> <p>现在你可以使用 React 编写代码了，接下来呢？虽然这不是必需的，我们接下来引入 Babel JSX 扩展，这样你就可以直接在 JavaScript 中包含 XML 文本，使你的生活变得更加轻松。</p> <h2 id="包含-babeljs">包含 babel.js</h2> <p>Babel JSX 扩展允许你直接在 JavaScript 中使用类似 HTML 的 XML，而不需要每次都调用一个函数。此外，在早期版本的 ECMAScript（JavaScript 的官方标准）低于 6 的浏览器上，Babel 将其升级以处理 ES6 语法，因此一举提供了两大好处。</p> <p>你可以再次从 <em>unpkg.com</em> 服务器上获取所需的文件，就像这样：</p> <pre><code class="language-php"><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </code></pre> <p>你只需要在开发或生产服务器上获取一个精简版本的 Babel 代码。为了方便起见，我还从示例文件的伴随存档中下载了最新版本，因此本书中的示例可以本地加载，看起来像这样：</p> <pre><code class="language-php"><script src="babel.min.js"></script> </code></pre> <p>现在我们可以访问 React 文件了，让我们开始做些实际的事情。</p> <h6 id="注意-143">注意</h6> <p>本章旨在教你使用 React 的基础知识，让你清楚地理解它的工作原理和意义，并为你提供一个良好的起点，以便进一步发展你的 React 开发。事实上，本章中的一些示例基于（或类似于）你可以在 <a href="http://reactjs.org" target="_blank">reactjs.org</a> 官方文档中找到的示例，因此，如果你希望更深入地学习 React，可以访问该网站，将会有一个良好的起步。</p> <h1 id="我们的第一个-react-项目">我们的第一个 React 项目</h1> <p>不要在实际编码之前教你所有有关 React 和 JSX 的知识，让我们换个角度，通过直接跳入我们的第一个 React 项目来展示一切有多简单，如示例 24-1 所示，其结果仅在浏览器中显示文本“By Jeeves, it works!”。</p> <h5 id="示例-24-1-我们的第一个-react-项目">示例 24-1. 我们的第一个 React 项目</h5> <pre><code class="language-php"><!DOCTYPE html> <html lang="en">   <head>     <meta charset="utf-8">     <title>First React Project</title>     <script src='react.development.js'    ></script>     <script src='react-dom.development.js'></script>     <script src="babel.min.js">            </script>     <script type="text/babel">       `class` `One` `extends` `React``.``Component`       `{`         `render``(``)`         `{`           `return` `<``p``>``By` `Jeeves``,` `it` `works``!``<``/``p``>`         `}`       `}`       `ReactDOM``.``render``(``<``One` `/``>``,` `document``.``getElementById``(``'div1'``)``)`     </script>   </head>   <body>     <div id="div1" style='font-family:monospace'></div>   </body> </html> </code></pre> <p>这是一个标准的 HTML5 文档，在打开内联脚本之前加载了两个 React 脚本和 Babel 脚本。这里是我们首次需要注意的地方，因为 <code>script</code> 标签不是不指定类型，也不是使用 <code>type=application/javascript</code>，而是给定了 <code>type=text/babel</code>。这告诉浏览器允许 Babel 预处理器运行脚本，必要时添加 ES6 功能，并将遇到的任何 XML 替换为 JavaScript 函数调用，然后再将脚本内容作为 JavaScript 运行。</p> <p>在脚本中，创建了一个名为<code>One</code>的新类，扩展了<code>React.component</code>类。在这个类内部，创建了一个<code>render</code>方法，它返回以下 XML（不是字符串）：</p> <pre><code class="language-php"><p>By Jeeves, it works!</p> </code></pre> <p>最后，在脚本中调用了 <code>One</code> 类的 <code>render</code> 函数，向它传递了文档主体中唯一 <code><div></code> 元素的 ID，该元素的 ID 被命名为 <code>div1</code>。结果是将 XML 渲染到 div 中，这会导致浏览器自动更新并显示内容，效果如下所示：</p> <pre><code class="language-php">By Jeeves, it works! </code></pre> <p>立即你应该看到在 JavaScript 中包含 XML 如何使得编写代码更加简单和快速，并且使其更容易理解。如果没有 JSX 扩展，你将不得不使用一系列 JavaScript 函数调用来完成所有这些工作。</p> <h6 id="注意-144">注意</h6> <p>React 将以小写字母开头的组件视为 DOM 标签。因此，例如，<code><div /></code> 表示 HTML 的 <code><div></code> 标签，但 <code><One /></code> 表示一个组件，并且需要 <code>One</code> 在作用域内 —— 你不能像之前的例子中使用小写字母 <code>one</code> 并期望你的代码能工作，因为组件的名称必须以大写字母开头，任何对它的引用也是如此。</p> <h2 id="使用函数而不是类">使用函数而不是类</h2> <p>如果你愿意，并且作为越来越普遍的做法，你可以使用一个函数来编写你的代码，而不是将它放在带有 <code>render</code> 函数的类中，就像在 Example 24-2 中一样。你可能更喜欢这样做的主要原因是简单性、易用性和更快的开发速度。</p> <h5 id="example-24-2-使用函数而不是类">Example 24-2. 使用函数而不是类</h5> <pre><code class="language-php"><!DOCTYPE html> <html lang="en">   <head>     <meta charset="utf-8">     <title>First React Project</title>     <script src='react.development.js'    ></script>     <script src='react-dom.development.js'></script>     <script src="babel.min.js"> </script>     <script type="text/babel">       `function` `Two``(``)`       `{`         `return` `<``p``>``And` `this``,` `by` `Jove``!``<``/``p``>`       `}`       ReactDOM.render(`<``Two` `/``>`, document.getElementById(`'div2'`))     </script>   </head>   <body>     <div id="div2" style='font-family:monospace'></div>   </body> </html> </code></pre> <p>在浏览器中显示的结果是：</p> <pre><code class="language-php">And this, by Jove! </code></pre> <h6 id="注意-145">注意</h6> <p>从这一点开始的示例中，为了简洁起见，我将只显示 Babel 脚本的内容和文档主体，好像它们都在主体中（这样也同样有效），但附带存档中的示例 <em>将</em> 是完整的。因此，从现在开始它们看起来是这样的：</p> <pre><code class="language-php"><script type="text/babel">   function Two()   {     return <p>And this, by Jove!</p>   }   ReactDOM.render(<Two />, document.getElementById('div2')) </script> <div id="div2"></div> </code></pre> <h2 id="纯函数与不纯函数的黄金法则">纯函数与不纯函数的黄金法则</h2> <p>当你写一个普通的 JavaScript 函数时，可以写出 React 称为 <em>pure</em> 或 <em>impure</em> 的代码。纯函数代码不会改变其输入，就像下面的这个例子，它返回从其参数计算得到的值：</p> <pre><code class="language-php">function mult(m1, m2) {   return m1 * m2 } </code></pre> <p>然而，这个函数被认为是不纯的，因为它修改了一个参数，在使用 React 时绝对不允许：</p> <pre><code class="language-php">function assign(obj, val) {   obj.value = val } </code></pre> <p>以黄金规则的形式表达，这意味着所有 React 组件必须在其 props 方面像纯函数一样操作，正如在“属性和组件”中解释的那样。</p> <h2 id="同时使用类和函数">同时使用类和函数</h2> <p>当然，你可以几乎可以互换地使用函数和类（尽管它们之间有一些区别，稍后在“使用类和函数的区别”中会进行解释），就像在示例 24-3 中一样。</p> <h5 id="示例-24-3-同时使用类和函数">示例 24-3. 同时使用类和函数</h5> <pre><code class="language-php"><script type="text/babel">   class One extends React.Component   {     render()     {       return <p>By Jeeves, it works!</p>     }   }   function Two()   {     return <p>And this, by Jove!</p>   }   `doRender``(``<``One` `/``>``,` `'div1'``)`   `doRender``(``<``Two` `/``>``,` `'div2'``)`   `function` `doRender``(``elem``,` `dest``)`   {     ReactDOM.render(`elem`, document.getElementById(`dest`)) `}` </script> <div id="div1" style="font-family:monospace"></div> <div id="div2" style="font-family:monospace"></div> </code></pre> <p>这里有一个名为<code>One</code>的类和一个名为<code>Two</code>的函数，它们与前两个示例中的相同。不过，这里还有一个额外的区别——创建了一个称为<code>doRender</code>的新函数——它大大简化了呈现 XML 块所需的语法。运行结果在浏览器中显示为：</p> <pre><code class="language-php">By Jeeves, it works! </code></pre> <pre><code class="language-php">And this, by Jove! </code></pre> <h6 id="注意-146">注意</h6> <p>除了以下示例中的周围 HTML 代码，我也将不再重复出现<code>doRender</code>函数的代码。因此，当你在这些示例中看到对<code>doRender</code>函数的调用时，请记住它不是 React 的内置函数，而是包含在配套档案中的函数。</p> <h2 id="属性和组件">属性和组件</h2> <p>介绍 React 称为<em>props</em>和<em>components</em>的一种绝佳方式，是构建一个简单的欢迎页面，其中将一个名称传递给脚本，然后显示出来。示例 24-4 是实现这一目标的一种方式。组件允许您将 UI 拆分为单独的、可重用的部分，并在隔离的环境中处理每个部分。它们类似于 JavaScript 函数，接受称为<em>props</em>的任意输入，返回描述元素在浏览器中如何显示的 React 元素。</p> <h5 id="示例-24-4-将props传递给函数">示例 24-4. 将<code>props</code>传递给函数</h5> <pre><code class="language-php"><script type="text/babel">   function Welcome(props)   {     return <h1>Hello, {props.name}</h1>   }   doRender(<Welcome name='Robin' />, 'hello') </script> <div id="hello" style='font-family:monospace'></div> </code></pre> <p>在这个例子中，<code>Welcome</code>函数接收一个<code>props</code>参数，代表属性，在其 JSX 的<code>return</code>语句中有一个花括号内的部分，从<code>props</code>对象中获取了<code>name</code>属性，像这样：</p> <pre><code class="language-php">return <h1>Hello, {props.name}</h1> </code></pre> <p><code>props</code>是 React 中的一个对象，接下来你将看到一种将其填充为属性的方法。</p> <h6 id="注意-147">注意</h6> <p>使用花括号是在 JSX 中嵌入表达式的方法。实际上，你几乎可以将任何 JavaScript 表达式放在这些花括号中进行评估（除了<code>for</code>和<code>if</code>语句，这些不能被评估）。</p> <p>因此，在这个例子中，你可以输入<code>76 / 13</code>或<code>"decode".substr(-4)</code>来代替<code>props.name</code>（这将评估为字符串<code>"code"</code>）。但是，在这种情况下，属性<code>name</code>是从<code>props</code>对象中获取并返回的。</p> <p>最后，<code>doRender</code>函数（你会记得它是一个调用<code>ReactDOM.render</code>函数的简写）被传入了<code>Welcome</code>函数的名称，接着将字符串值<code>'Robin'</code>分配给它的<code>name</code>属性，就像这样：</p> <pre><code class="language-php">doRender(<Welcome name='Robin' />, 'hello') </code></pre> <p>然后 React 调用<code>Welcome</code>函数（也称为<em>组件</em>），将<code>{name: 'Robin'}</code>传递给它的<code>props</code>。然后<code>Welcome</code>评估并返回<code><h1>Hello, Robin</h1></code>作为其结果，然后渲染到名为<code>hello</code>的<code>div</code>中，并在浏览器中呈现如下：</p> <pre><code class="language-php">  Hello, Robin </code></pre> <p>要使您的代码更整洁，如果愿意，您还可以首先创建一个包含 XML 的元素传递给<code>doRender</code>的方法，就像这样：</p> <pre><code class="language-php">const elem = <Welcome name='Robin' /> doRender(elem, 'hello') </code></pre> <h2 id="使用类和函数的区别">使用类和函数的区别</h2> <p>在 React 中使用类和函数最明显的区别是语法。函数是简单的 JavaScript（可能包含 JSX），可以接受 props 参数并返回一个组件元素。</p> <p>然而，类是从<code>React.Component</code>扩展的，需要一个<code>render</code>方法来返回一个组件。但是这些额外的代码确实带来了好处，因为类允许你在组件中使用<code>setState</code>，从而实现（例如）使用定时器和其他状态特性。在 React 中，函数被称为<em>功能状态无关组件</em>。此外，类允许您使用 React 称为<em>生命周期挂钩和方法</em>。在接下来的部分中详细讨论所有这些内容。</p> <p>本质上，现在你可以使用函数在 React 中做几乎所有的事情。</p> <h1 id="react-状态和生命周期">React 状态和生命周期</h1> <p>假设您希望在网页上显示一个滴答作响的时钟（出于简单起见，使用普通数字时钟）。如果您使用无状态的代码，这不是一件容易的事情，但如果您设置代码以保留其状态，那么时钟计数器可以每秒更新一次，并且时间也可以同样频繁地渲染。这就是您在 React 中使用类而不是函数的地方。因此，让我们构建这样一个时钟：</p> <pre><code class="language-php"><script type="text/babel"> class Clock extends React.Component {   constructor(props) {   super(props)   this.state = {date: new Date()}   }   render()   {     return <span> {this.state.date.toLocaleTimeString()} </span>   } } doRender(<Clock />, 'the_time') </script> <p style='font-family:monospace'>The time is: <span id="the_time"></span></p> </code></pre> <p>此代码将从调用<code>Date</code>函数返回的结果分配给构造函数的<code>this</code>对象的<code>state</code>属性，即<code>props</code>。只要调用了类的<code>render</code>函数，JSX 内容就会被渲染，只会使用类的单个实例，只要它被渲染到相同的 DOM 节点。</p> <h6 id="注意-148">注意</h6> <p>您是否看到构造函数开头的<code>super</code>调用？通过将其传递给<code>props</code>，现在可以在构造函数内使用<code>this</code>关键字引用<code>props</code>，否则无法使用。</p> <p>然而，就目前而言，时间将仅显示一次，然后代码将停止运行。因此，现在我们需要设置一些中断驱动的代码来保持<code>date</code>属性的更新，通过添加一个<em>生命周期</em>方法到类中，通过使用<code>componentDidMount</code>挂载一个定时器，就像这样：</p> <pre><code class="language-php">componentDidMount() {   this.timerID = setInterval(() => this.tick(), 1000) } </code></pre> <p>我们还没有完成，因为我们仍然需要编写 <code>tick</code> 函数，但首先，解释前述内容：<code>*mounting*</code> 是 React 用来描述将节点添加到 DOM 的操作。如果组件成功挂载，类的 <code>componentDidMount</code> 方法将始终被调用，因此这是设置中断的理想位置，在前述代码中，<code>this.timerID</code> 被赋予调用 <code>SetInterval</code> 函数返回的 ID，传递给 <code>this.tick</code> 方法，以便每隔 1,000 毫秒（或每秒一次）调用它。</p> <p>当安装定时器时，我们还必须提供一个方法来 <em>卸载</em> 它，以防止浪费中断周期。在这种情况下，当 <code>Clock</code> 生成的 DOM 被移除（即组件被卸载）时，我们用于停止中断的方法和代码如下所示：</p> <pre><code class="language-php">componentWillUnmount() {   clearInterval(this.timerID) } </code></pre> <p>在这里，当 DOM 被移除时 React 会调用 <code>componentWillUnmount</code>；因此，我们在这里放置清除 <code>this.timerID</code> 中存储的间隔的代码，然后将所有这些时间片段返回给系统，因为清除间隔会立即停止 <code>tick</code> 的调用。</p> <p>最后一个谜题的一部分是每隔 1,000 毫秒调用一次的中断驱动代码，它位于 <code>tick</code> 方法中：</p> <pre><code class="language-php">tick() {   this.setState({date: new Date()}) } </code></pre> <p>这里调用了 React 的 <code>setState</code> 函数，以更新 <code>state</code> 属性的值，该值是调用 <code>Date</code> 函数的最新结果，每秒钟调用一次。</p> <p>让我们一起看一个示例中的所有代码，如 示例 24-5 所示。</p> <h5 id="示例-24-5-在-react-中构建时钟">示例 24-5. 在 React 中构建时钟</h5> <pre><code class="language-php"><script type="text/babel">   class Clock extends React.Component {   constructor(props)   {     super(props)     this.state = {date: new Date()}   }   componentDidMount()   {     this.timerID = setInterval(() => this.tick(), 1000)   }   componentWillUnmount()   {     clearInterval(this.timerID)   }   tick()   {     this.setState({date: new Date()})   }   render()   {     return <span> {this.state.date.toLocaleTimeString()} </span>   } } doRender(<Clock />, 'the_time') } </script> <p style='font-family:monospace'>The time is: <span id="the_time"></span></p> </code></pre> <p>现在 <code>Clock</code> 类已经完成，包括构造函数、中断启动和停止器、使用中断更新 <code>state</code> 属性的方法以及 <code>render</code> 函数，现在唯一需要做的就是调用 <code>doRender</code>，使整个时钟运行如图所示在浏览器中：</p> <pre><code class="language-php">The time is: 12:17:21 </code></pre> <p>每次调用 <code>setState</code> 函数时，时钟都会自动更新到屏幕，因为组件通过这个函数重新渲染，所以您不必担心在代码中执行此操作。</p> <h6 id="注意-149">注意</h6> <p>在初始状态设置后，<code>setState</code> 是更新状态的唯一合法方式，因为简单地直接修改状态不会导致组件重新渲染。请记住，您唯一可以在构造函数中分配 <code>this.state</code> 的地方。React 可能会将多个 <code>setState</code> 调用捆绑成单个更新。</p> <h2 id="使用-hooks如果您使用-nodejs">使用 Hooks（如果您使用 Node.js）</h2> <p>如果您使用 Node.js（参见 <a href="http://nodejs.org/" target="_blank">nodejs.org</a>），您可以使用 hooks 而不必过多依赖类。Node.js 是一个在服务器上直接运行 JavaScript（和 React）的开源服务器环境，这是一个需要多个章节才能适当记录的技术，但如果您已经在使用它，我想告诉您，您也可以利用 React 的新 hooks。</p> <p>Hooks 是 React 16.8 的一个新加入的功能，它支持在不使用类的情况下访问状态。它们易于使用，并且正在成为 React 的一个增长点。如果你想了解如何使用它们，你可以在线获取<a href="https://react.docs.org/hooks-intro.html" target="_blank">更多信息</a>。</p> <h1 id="react-中的事件">React 中的事件</h1> <p>在 React 中，事件使用驼峰命名，并且你使用 JSX 来将函数作为事件处理程序传递，而不是字符串。此外，React 事件的工作方式与原生 JavaScript 事件并不完全相同，因为你的处理程序是通过称为<code>syntheticEvent</code>的浏览器本地事件的跨浏览器包装实例传递的。这样做的原因是 React 标准化事件以在不同浏览器中具有一致的属性。然而，如果你需要访问浏览器事件，你可以始终使用<code>nativeEvent</code>属性来获取它。</p> <p>为了说明在 React 中使用事件的用法，示例 24-6 是一个简单的<code>onClick</code>事件的例子，当点击时移除或重新显示一些文本。</p> <h5 id="示例-24-6-设置一个事件">示例 24-6. 设置一个事件</h5> <pre><code class="language-php"><script type="text/babel"> class Toggle extends React.Component {   constructor(props)   {     super(props)     this.state       = {isVisible: true}     this.handleClick = this.handleClick.bind(this)   }   handleClick()   {     this.setState(state => ({isVisible: !state.isVisible}))   }   render()   {     const show = this.state.isVisible     return (       <div>         <button onClick={this.handleClick}>           {show ? 'HIDE' : 'DISPLAY'}         </button>         <p>{show ? 'Here is some text' : ''}</p>       </div>     )   } } doRender(<Toggle />, 'display') </script> <div id="display" style="font-family:monospace"></div> </code></pre> <p>在一个名为<code>Toggle</code>的新类的构造函数中，设置了一个名为<code>isVisible</code>的属性为<code>true</code>并分配给<code>this.state</code>，如下所示：</p> <pre><code class="language-php">this.state = {isVisible: true} </code></pre> <p>然后，一个名为<code>handleClick</code>的事件处理程序使用<code>bind</code>方法附加到<code>this</code>：</p> <pre><code class="language-php">this.handleClick = this.handleClick.bind(this) </code></pre> <p>构造函数完成后，接下来是<code>handleClick</code>事件处理程序。这有一个单行命令来在<code>isVisible</code>之间切换<code>true</code>和<code>false</code>的状态：</p> <pre><code class="language-php">this.setState(state => ({isVisible: !state.isVisible})) </code></pre> <p>最后，有一个调用<code>render</code>方法的地方，它返回两个元素包装在<code><div></code>中。这样做的原因是 render 方法只能返回单个组件（或 XML 标签），所以这两个元素被包装成一个单一元素以满足该要求。</p> <p>返回的元素是一个按钮，如果以下文本当前隐藏（即<code>isVisible</code>设置为<code>false</code>），则显示文本 DISPLAY，否则如果<code>isVisible</code>设置为<code>true</code>且文本当前可见，则显示文本 HIDE。在此按钮之后，如果<code>isVisible</code>为<code>true</code>，则显示一些文本，否则不显示任何内容（实际上返回空字符串，这是相同的事情）。</p> <p>为了决定显示什么按钮文本，或者是否显示文本，使用了三元运算符，你可以回忆起其语法如下：</p> <pre><code class="language-php"> expression ? return this if true : or this if false. </code></pre> <p>这是通过单词表达式<code>show</code>（其值从<code>this.state.isVisible</code>获取）完成的。如果评估为<code>true</code>，则按钮显示 HIDE 并显示文本，否则按钮显示 DISPLAY 并且文本不显示。加载到浏览器中时，结果如下（其中<code>[HIDE]</code>和<code>[DISPLAY]</code>是按钮）：</p> <pre><code class="language-php">[HIDE] </code></pre> <pre><code class="language-php">Here is some text </code></pre> <p>当按钮被按下时，它只改变为以下内容：</p> <pre><code class="language-php">[DISPLAY] </code></pre> <h1 id="在多行上使用-jsx">在多行上使用 JSX</h1> <p>尽管你可以将你的 JSX 跨多行拆分以提高可读性，就像前面的例子一样，但你不能将跟随<code>return</code>命令的括号移到下一行（或任何其他地方）。它必须留在跟在<code>return</code>后面的位置，否则将报告语法错误。然而，关闭括号可以出现在你希望的位置。</p> <h1 id="内联-jsx-条件语句">内联 JSX 条件语句</h1> <p>在 JSX 中，如果条件为<code>true</code>，则只返回 XML，从而实现条件渲染。这是因为<code>true && expression</code>评估为<code>expression</code>，而<code>false && expression</code>评估为<code>false</code>。</p> <p>因此，例如，Example 24-7 将两个变量设置为游戏的一部分。<code>this.highScore</code>设置为 90，<code>this.currentScore</code>设置为 100。</p> <h5 id="example-24-7-一个条件性的-jsx-语句">Example 24-7. 一个条件性的 JSX 语句</h5> <pre><code class="language-php"><script type="text/babel"> class Setup extends React.Component {   constructor(props)   {     super(props)     this.highScore    = 90     this.currentScore = 100   }   render()   {     return (       <div>         {           `this``.``currentScore` `>` `this``.``highScore` `&&`             <h1>New High Score</h1>         }       </div>     )   } } doRender(<Setup />, 'display') </script> <div id='display' style='font-family:monospace'></div> </code></pre> <p>在这种情况下，如果<code>this.currentScore</code>大于<code>this.highScore</code>，则返回<code>h1</code>元素；否则返回<code>false</code>。代码的结果在浏览器中看起来像这样：</p> <pre><code class="language-php">  New High Score </code></pre> <p>当然，在实际游戏中，你将继续将<code>this.highScore</code>设置为<code>this.currentScore</code>的值，并可能在返回游戏代码之前执行一些其他操作。</p> <p>因此，无论何时只有在条件为<code>true</code>时才显示某些内容，<code>&&</code>运算符都是实现此目的的好方法。当然，你刚才在“React 事件”末尾看到了如何在 JSX 中使用三元(<code>?:</code>)表达式创建<code>if...then...else</code>块。</p> <h1 id="使用列表和键">使用列表和键</h1> <p>使用 React 显示列表非常简单。在 Example 24-8 中，数组<code>cats</code>包含四种类型的猫的列表。然后，在下一行代码中使用<code>map</code>函数提取这些，该函数迭代数组，依次返回每个项目到变量<code>cat</code>中。这导致每次迭代都嵌入在一对<code><li>...</li></code>标签中，然后附加到<code>listofCats</code>字符串中。</p> <h5 id="example-24-8-显示列表">Example 24-8. 显示列表</h5> <pre><code class="language-php"><script type="text/babel"> const cats       = ['lion', 'tiger', 'cheetah', 'lynx'] const listofCats = `cats``.``map`((cat) => <li>{cat}</li>) doRender(`<``ul``>``{``listofCats``}``<``/``ul``>`, 'display') </script> <div id='display' style='font-family:monospace'></div> </code></pre> <p>最后，调用<code>doRender</code>，将<code>listofCats</code>嵌入<code><ul>...</ul></code>标签对中，结果显示如下：</p> <pre><code class="language-php">• lion • tiger • cheetah • lynx </code></pre> <h2 id="唯一键">唯一键</h2> <p>如果你在运行 Example 24-8 时打开了 JavaScript 控制台（通常通过按下 Ctrl Shift J 或在 Mac 上按 Option Command J），你可能会注意到警告消息“列表中的每个子元素都应有一个唯一的‘key’属性。”</p> <p>尽管不是必需的，但当你为每个兄弟列表项提供唯一键时，React 的工作效果最佳，这有助于它找到对应 DOM 节点的引用，并在进行小改动时允许对 DOM 进行微调，而不需要重新渲染更大的部分。所以 Example 24-9 就是提供这样一个唯一键的示例。</p> <h5 id="example-24-9-使用唯一键">Example 24-9. 使用唯一键</h5> <pre><code class="language-php"><script type="text/babel">   `var` `uniqueId`     `=` `0` const cats       = ['lion', 'tiger', 'cheetah', 'lynx'] const listofCats = cats.map((cat) => <li `key``=``{``uniqueId``++``}`>{cat}</li>) doRender(<ul>{listofCats}</ul>, 'display') </script> <div id='display' style='font-family:monospace'></div> </code></pre> <p>在这个示例中，创建了一个<code>uniqueId</code>变量，每次使用时都会递增，因此，例如，第一个键将变为<code>1</code>。显示的输出与前一个示例相同，但是如果您想查看生成的键（仅出于兴趣），可以将<code>li</code>元素的内容从<code>{cat}</code>更改为<code>{uniqueId - 1 + ' ' + cat}</code>，然后您将看到以下内容显示（使用<code>- 1</code>是因为在引用它时<code>uniqueId</code>已经递增了，所以我们需要看到递增之前的值）：</p> <pre><code class="language-php">• 0 lion • 1 tiger • 2 cheetah • 3 lynx </code></pre> <p>但是，您可能会问，这有什么意义呢？好吧，考虑以下列表结构的情况：</p> <pre><code class="language-php"><ul> // Cities In Europe   <li>Birmingham</li>   <li>Paris</li>   <li>Milan</li>   <li>Vienna</li> </ul> <ul> // Cities in the USA   <li>Cincinnati</li>   <li>Paris</li>   <li>Chicago</li>   <li>Birmingham</li> </ul> </code></pre> <p>这里有两组列表，每组都有四个唯一的兄弟姐妹，但在列表之间，包括“伯明翰”和“巴黎”这两个城市名称在同一层次的嵌套中是共享的。当 React 执行某些协调操作（例如重新排序或修改元素后），存在一些情况可以实现速度增益，并且在同一级别的兄弟列表项共享相同值时可能避免问题。为此，您可以为所有兄弟姐妹提供唯一的键，对于 React 而言，可能如下所示：</p> <pre><code class="language-php"><ul> // Cities In Europe   <li key = "1">Birmingham</li>   <li key = "2">Paris</li>   <li key = "3">Milan</li>   <li key = "4">Vienna</li> </ul> <ul> // Cities in the USA   <li key = "5">Cincinnati</li>   <li key = "6">Paris</li>   <li key = "7">Chicago</li>   <li key = "8">Birmingham</li> </ul> </code></pre> <p>现在不可能将欧洲的巴黎与美国的巴黎混淆（或者至少需要更加努力来定位并且可能重新渲染正确的 DOM 节点），因为每个数组元素对于 React 都有一个不同的唯一 ID。</p> <h6 id="注意-150">注意</h6> <p>不要过于担心为什么要创建这些唯一键。只需记住，在这样做时 React 表现最佳，一个好的经验法则是在<code>map</code>调用中的元素将需要键。此外，您可以为不相关的不同兄弟集合重复使用您的键。然而，您可能不必创建自己的键，因为您正在处理的数据可能会为您提供它们，例如书籍 ISBN 号码。作为最后的手段，您可以简单地使用项目的索引作为其键，但重新排序可能会很慢，并且您可能会遇到其他问题，因此通常创建自己的键以便控制它们包含的内容是最佳选择。</p> <h1 id="处理表单">处理表单</h1> <p>在 React 中，<code><input type='text'></code>，<code><textarea></code>和<code><select></code>都以类似的方式工作，因为 React 的内部状态成为所谓的“真实数据源”，因此这些组件被称为<em>受控组件</em>。</p> <p>对于<em>受控组件</em>，输入的值始终由 React 状态驱动。这确实意味着您需要在 React 中编写更多的代码，但最终的好处是您可以将值传递给其他 UI 元素或从事件处理程序中访问它们。</p> <p>通常，没有加载 React 或任何其他框架或库时，表单元素会维护自己的状态，该状态基于用户输入进行更新。在 React 中，可变状态通常保留在组件的<code>state</code>属性中，并且应仅使用<code>setState</code>函数更新它。</p> <h2 id="使用文本输入">使用文本输入</h2> <p>让我们查看这三种输入类型，首先是简单的文本输入，就像这样：</p> <pre><code class="language-php"><form>   Name: <input type='text' name='name'>   <input type='submit'> </form> </code></pre> <p>该代码请求输入一串字符，然后在单击提交按钮（或按下 Enter 或 Return 键）时提交。现在让我们将其改为受控 React 组件在示例 24-10 中。</p> <h5 id="示例-24-10-使用文本输入">示例 24-10. 使用文本输入</h5> <pre><code class="language-php"><script type="text/babel">   class GetName extends React.Component   {     constructor(props)     {       super(props)       this.state = {value: ''}       this.onChange = this.onChange.bind(this)       this.onSubmit = this.onSubmit.bind(this)     }     onChange(event)     {       this.setState({value: event.target.value})     }     onSubmit(event)     {       alert('You submitted: ' + this.state.value)       event.preventDefault()     }     render()     {       return (         <form onSubmit={this.onSubmit}>           <label>             Name:             <input type="text" value={this.state.value}   onChange={this.onChange} />           </label>           <input type="submit" />         </form>       )     }   }   doRender(<GetName />, 'display') </script> <div id='display' style='font-family:monospace'></div> </code></pre> <p>让我逐步为你解释这一部分。首先我们创建一个名为<code>GetName</code>的新类，用于创建一个表单，提示输入名字。这个类包含两个事件处理器<code>onChange</code>和<code>onSubmit</code>。这些都是本地处理程序，通过在构造函数中使用<code>bind</code>调用来覆盖这些同名事件的标准 JavaScript 处理程序，同时在构造函数中也将<code>value</code>的值初始化为空字符串。</p> <p>当被<code>onChange</code>中断调用时，新的<code>onChange</code>处理程序调用<code>setState</code>函数以更新<code>value</code>，以便始终保持<code>value</code>与输入字段中的内容保持同步。</p> <p>当触发<code>onSubmit</code>事件时，它由新的<code>onSubmit</code>处理程序处理，在这种情况下，它发出一个弹出的<code>alert</code>窗口，以便我们可以看到它已经起作用。因为我们处理事件而不是系统，所以通过调用<code>preventDefault</code>来防止事件冒泡到系统。</p> <p>最后，<code>render</code>方法包含所有要渲染到显示<code><div></code>中的 HTML 代码。当然，我们使用 XML 格式化的 HTML 来做这件事，因为这是 Babel 期望的（即 JSX 语法）。在这种情况下，它只需要额外的自闭合输入元素<code>/></code>。</p> <h6 id="注意-151">注意</h6> <p>我们并没有全局地覆盖<code>onChange</code>和<code>onSubmit</code>事件，因为我们仅将由渲染的代码发出的事件绑定到<code>GetName</code>类内部的本地事件处理程序，因此可以安全地使用相同的名称作为我们的事件处理程序，这有助于使我们的代码目的对其他开发人员更加明显。但如果可能会有任何疑问的可能性，你可能更喜欢为你的处理程序使用不同的名称，比如<code>actOnSubmit</code>等。</p> <p>所以，正如你现在应该看到的那样，<code>this.state.value</code>将始终反映输入字段的状态，因为在受控组件中，<code>value</code>始终由 React 状态驱动。</p> <h2 id="使用文本区域">使用文本区域</h2> <p>使用 React 的一个理念是在 DOM 上保持跨浏览器控制，以便快速简单地访问，并且简化开发流程。通过使用受控组件，我们始终控制并可以使所有类型的数据输入以类似的方式工作。</p> <p>在示例 24-11 中，上一个示例已修改为使用<code><textarea></code>元素进行输入。</p> <h5 id="示例-24-11-使用文本区域">示例 24-11. 使用文本区域</h5> <pre><code class="language-php"><script type="text/babel">   class `GetText` extends React.Component   {     constructor(props)     {       super(props)       this.state    = {value: ''}       this.onChange = this.onChange.bind(this)       this.onSubmit = this.onSubmit.bind(this)     }     onChange(event)     {       this.setState({value: event.target.value})     }     onSubmit(event)     {       alert('You submitted: ' + this.state.value)       event.preventDefault()     }     render()     {       return (         <form onSubmit={this.onSubmit}>           <label>             `Enter` `some` `text``:``<``br` `/``>`             `<``textarea` `rows``=``'5'` `cols``=``'40'` value={this.state.value}                                       onChange={this.onChange} />           </label>`<``br` `/``>`           <input type="submit" />         </form>       )     }   }   doRender(<`GetText` />, 'display')   function doRender(elem, dest)   {     ReactDOM.render(elem, document.getElementById(dest))   } </script> <div id='display' style='font-family:monospace'></div> </code></pre> <p>这段代码与文本输入示例非常相似，只有几个简单的更改：现在这个类被称为<code>GetText</code>，<code>render</code>方法中的文本输入被替换为一个设置为 40 列宽和 5 行高的<code><textarea></code>元素，并添加了一些<code><br></code>元素进行格式化。就是这样——没有其他改动就能让我们完全控制<code><textarea></code>输入字段。与前面的例子一样，<code>this.state.value</code>始终反映输入字段的状态。</p> <p>当然，此类型的输入支持使用 Enter 或 Return 键输入换行符到字段中，因此现在只能通过单击按钮提交输入。</p> <h2 id="使用-select">使用 select</h2> <p>在展示如何在 React 中使用<code><select></code>之前，让我们先看一下典型的 HTML 代码片段，在这个片段中，用户必须从几个国家中选择，其中 USA 是默认选择：</p> <pre><code class="language-php"><select>   <option          value="Australia">Australia</option>   <option          value="Canada"   >Canada</option>   <option          value="UK"       >United Kingdom</option>   <option selected value="USA"      >United States</option> </select> </code></pre> <p>在 React 中，这需要稍微处理一下，因为它在<code>select</code>元素上使用<code>value</code>属性而不是应用于<code>option</code>子元素的<code>selected</code>属性，如示例 24-12 中所示。</p> <h5 id="示例-24-12-使用-select">示例 24-12. 使用 select</h5> <pre><code class="language-php"><script type="text/babel">   class `GetCountry` extends React.Component   {     constructor(props)     {       super(props)       this.state    = {`value``:` `'USA'`}       this.onChange = this.onChange.bind(this)       this.onSubmit = this.onSubmit.bind(this)     }     onChange(event)     {       this.setState({value: event.target.value})     }     onSubmit(event)     {       alert('You selected: ' + this.state.value)       event.preventDefault()     }     render()     {       return (         <form onSubmit={this.onSubmit}>           <label>             `Select` `a` `country`:             `<``select` `value``=``{``this``.``state``.``value``}`                  `onChange``=``{``this``.``onChange``}``>`               `<``option` `value``=``"Australia"``>``Australia``<``/``option``>`               `<``option` `value``=``"Canada"`   `>``Canada``<``/``option``>`               `<``option` `value``=``"UK"`       `>``United` `Kingdom``<``/``option``>`               `<``option` `value``=``"USA"`      `>``United` `States``<``/``option``>`             `<``/``select``>`           </label>           <input type="submit" />         </form>       )     }   }   doRender(<`GetCountry` />, 'display')   function doRender(elem, dest)   {     ReactDOM.render(elem, document.getElementById(dest))   } </script> <div id='display' style='font-family:monospace'></div> </code></pre> <p>再次看到，除了<code>GetCountry</code>的新类名之外，几乎没有改变，<code>this.state.value</code>被赋予了默认值<code>'USA'</code>，并且输入类型现在是<code><select></code>但没有<code>selected</code>属性。</p> <p>正如前两个例子一样，<code>this.state.value</code>始终反映输入的状态。</p> <h1 id="react-native">React Native</h1> <p>React 还有一个名为 React Native 的伴侣产品。通过它，您可以只使用扩展的 JSX JavaScript 语言创建适用于 iOS 和 Android 手机和平板电脑的完整应用程序，而无需了解 Java 或 Kotlin（用于 Android）或 Objective-C 或 Swift（用于 iOS）。</p> <p>如何做到这一点并在各种移动设备上运行您的应用程序的完整详细信息和解释超出了本书的范围，但在本节中，我向您展示了获取所需软件和信息的位置。</p> <h2 id="创建-react-native-应用程序">创建 React Native 应用程序</h2> <p>要开发 React Native 应用程序，首先需要安装<a href="http://developer.android.com/studio" target="_blank">Android Studio</a>和<a href="https://tinyurl.com/getjavajdk" target="_blank">Java JDK</a>。</p> <p>在 Mac 上，您还需要从 App Store 安装 Xcode。Windows 用户除了棘手的虚拟化或“Hackintosh”外，没有简单的选项来开发 iOS 应用程序，因此真正最好的选择是拥有实际的 Mac（或托管服务）。</p> <p>然后，您需要阅读<a href="https://developer.android.com/docs" target="_blank">Android Studio 文档</a>，直到理解如何创建 Android 虚拟设备（AVD）并设置所需的各种环境变量，例如<code>ANDROID_HOME</code>，它应指向已安装的 JDK。现在您需要从<a href="http://nodejs.org" target="_blank">nodejs.org</a>安装 Node.JS。</p> <p>一旦安装了 Node，如果你还不知道如何使用它，请阅读<a href="https://nodejs.org/en/docs/" target="_blank">文档</a>。现在你可以根据<a href="https://reactnative.dev/docs/environment-setup" target="_blank">React Native 文档</a>的建议安装 React Native。之后，你可以通过<a href="http://reactnative.dev/docs/getting-started" target="_blank">React 网站上的教程</a>来学习，在构建 Windows 和 macOS 上的应用程序之间注意其中的差异。</p> <p>一旦所有工作都正常运行（在完全理解并顺利运行之前可能需要一些时间），你现在可以使用 React JSX 代码（大部分情况下）同时为两个主要移动平台开发应用程序了！</p> <h2 id="进一步阅读">进一步阅读</h2> <p>为了帮助你进行 React Native 开发，这里有一些在线教程，我认为它们清楚地解释了这个过程（感谢 Medium 上的 Pabasara Jayawardhana，Infinite Red Academy 上的 Kevin VanGelder，以及 Microsoft），并且在撰写时都是在线并且可用（如果不可用，则可以在<a href="https://archive.org" target="_blank"><em>archive.org</em></a>找到）。当然，如果你仍然需要更多信息，你喜欢的搜索引擎将会给你所需的一切：</p> <ul> <li> <p><a href="https://tinyurl.com/reactnativemac" target="_blank">React Native on Mac OS</a></p> </li> <li> <p><a href="https://tinyurl.com/reactnativewindows" target="_blank">React Native on Windows</a></p> </li> <li> <p><a href="https://microsoft.github.io/react-native-windows/" target="_blank">Microsoft's Guide to React Native</a></p> </li> </ul> <p>尽管这三个中的后者仅在 URL 中提到了 Windows，但指南也包括 macOS。</p> <h2 id="将-react-提升到下一个水平">将 React 提升到下一个水平</h2> <p>现在你已经学会了如何设置和使用 React 的基础知识，还有很多其他内容可以做（特别是如果你打算用它构建 React Native 应用程序），这超出了本书的范围。因此，为了继续你的 React 之旅，我建议你访问<a href="https://reactjs.org/docs/hello-world.html" target="_blank">Reactjs.org 网页</a>，这是一个很好的起点，在这里你可以回顾一些在这里讨论的内容，然后进一步了解更强大的功能。</p> <p>而且请记住，你可以从<a href="https://github.com/RobinNixon/lpmj6" target="_blank">GitHub</a>下载本章节（以及整本书）的所有示例。</p> <p>因此，现在我们工具箱中有了 React（至少足够让我们启动和运行），让我们继续下一章，探索 HTML5 带给我们的所有好东西。</p> <h1 id="问题-23">问题</h1> <ol> <li> <p>有哪两种主要方法可以将 React 脚本整合到你的网页中？</p> </li> <li> <p>XML 如何与 JavaScript 结合以在 React 中使用？</p> </li> <li> <p>在 JSX JavaScript 代码中，你应该使用什么值来替换<code><script type="application/javascript"></code>中的<code>type</code>？</p> </li> <li> <p>有哪两种不同的方法可以将 React 扩展到你的代码中？</p> </li> <li> <p>在 React 中，纯代码和非纯代码是什么意思？</p> </li> <li> <p>React 如何跟踪状态？</p> </li> <li> <p>如何在 JSX 代码中嵌入表达式？</p> </li> <li> <p>一旦类构造完成，你如何改变一个值的状态？</p> </li> <li> <p>在构造函数内使用 <code>this</code> 关键字引用 <code>props</code> 之前，你首先必须做什么？</p> </li> <li> <p>如何在 JSX 中创建条件语句？</p> </li> </ol> <p>在附录 A 中查看 “第二十四章答案” 来获取这些问题的答案。</p> <h1 id="第二十五章html5-简介">第二十五章：HTML5 简介</h1> <p>HTML5 代表了网页设计、布局和可用性的重大进步。它提供了一种简单的方法，在网页浏览器中操作图形，而无需依赖 Flash 等插件，提供了在网页中插入音频和视频的方法（同样无需插件），并消除了 HTML 演变过程中出现的几个令人讨厌的不一致之处。</p> <p>此外，HTML5 还包括许多其他增强功能，如处理地理位置信息、Web Workers 管理后台任务、改进的表单处理以及访问本地存储捆绑（远远超出了 Cookie 的有限功能）。</p> <p>不过，HTML5 的有趣之处在于它是一个持续发展的过程，各个浏览器在不同时间采纳了不同的特性。幸运的是，现在所有主流浏览器（市场份额超过 1%的浏览器，如 Chrome、Internet Explorer、Edge、Firefox、Safari、Opera 以及 Android 和 iOS 的浏览器）都已支持所有最重要和最受欢迎的 HTML5 新增功能。</p> <h1 id="画布">画布</h1> <p>最初由苹果为其 Safari 浏览器的 WebKit 渲染引擎引入（该引擎本身起源于 KDE 的 HTML 布局引擎），<em>canvas</em>元素使我们能够在网页中绘制图形，而无需依赖 Java 或 Flash 等插件。在标准化后，所有其他浏览器都采纳了 canvas，并且它现在是现代 Web 开发的重要组成部分。</p> <p>与其他 HTML 元素一样，canvas 只是网页中的一个元素，具有定义的尺寸，在其中可以使用 JavaScript 插入内容——在本例中，用于绘制图形。您通过使用<code><canvas></code>标签创建 canvas，必须为其分配一个 ID，以便 JavaScript 知道它正在访问哪个 canvas（因为页面上可以有多个 canvas）。</p> <p>在示例 25-1 中，我创建了一个带有 ID <code>mycanvas</code> 的 canvas 元素，在不支持 canvas 的浏览器中仅显示一些文本。在下面的 JavaScript 部分中，绘制了日本国旗的代码（如图 25-1 所示）。</p> <h5 id="示例-25-1使用-html5-canvas-元素">示例 25-1。使用 HTML5 canvas 元素</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>The HTML5 Canvas</title> <script src='OSC.js'></script> </head> <body> <canvas id='mycanvas' width='320' height='240'> This is a canvas element given the ID <i>mycanvas</i> This text is visible only in non-HTML5 browsers </canvas> <script> canvas = O('mycanvas') context = canvas.getContext('2d') context.fillStyle = 'red' S(canvas).border = '1px solid black' context.beginPath() context.moveTo(160, 120) context.arc(160, 120, 70, 0, Math.PI * 2, false) context.closePath() context.fill() </script> </body> </html> </code></pre> <p>到这一点，不必详细说明正在发生的事情——我在第二十六章中会解释——但你应该已经看到使用画布并不难，尽管它确实需要学习一些新的 JavaScript 函数。请注意，此示例利用了<em>OSC.js</em>函数集来自第二十一章，以帮助保持代码整洁和紧凑。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2501.png" alt="使用 HTML5 canvas 绘制日本国旗" loading="lazy"></p> <h6 id="图-25-1使用-html5-canvas-绘制日本国旗">图 25-1。使用 HTML5 canvas 绘制日本国旗</h6> <h1 id="地理位置">地理位置</h1> <p>使用 <em>地理位置</em>，你的浏览器可以向服务器返回关于你位置的信息。此信息可以来自你使用的计算机或移动设备中的 GPS 芯片，也可以来自你的 IP 地址，或通过分析附近的 WiFi 热点获得。为了安全起见，用户始终控制这些信息的提供，可以拒绝一次性提供这些信息，或者启用设置以永久性地阻止或允许所有网站或某个网站访问这些数据。</p> <p>此技术有许多用途，包括提供逐步导航；提供本地地图；通知附近的餐馆、WiFi 热点或其他地方；告知你附近的朋友；指引你去最近的加油站；等等。</p> <p>示例 25-2 将显示用户位置的谷歌地图，只要浏览器支持地理位置和用户授予位置数据访问权限（如 图 25-2 所示）。否则，它将显示一个错误。</p> <h5 id="示例-25-2-显示用户位置的地图">示例 25-2. 显示用户位置的地图</h5> <pre><code class="language-php"><!DOCTYPE html> <html>   <head>     <title>Geolocation Example</title>   </head>   <body>     <script>       if (typeof navigator.geolocation == 'undefined')          alert("Geolocation not supported.")       else         navigator.geolocation.getCurrentPosition(granted, denied)       function granted(position)       {         var lat = position.coords.latitude         var lon = position.coords.longitude         alert("Permission Granted. You are at location:\n\n"           + lat + ", " + lon +           "\n\nClick 'OK' to load Google Maps with your location")         window.location.replace("https://www.google.com/maps/@"           + lat + "," + lon + ",14z")       }       function denied(error)       {         var message         switch(error.code)         {           case 1: message = 'Permission Denied'; break;           case 2: message = 'Position Unavailable'; break;           case 3: message = 'Operation Timed Out'; break;           case 4: message = 'Unknown Error'; break;         }         alert("Geolocation Error: " + message)       }     </script>   </body> </html> </code></pre> <p>再次强调，这里不是描述所有工作原理的地方；我会在 第二十八章 中详细说明。目前，这个示例展示了管理地理位置信息的简易性。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2502.png" alt="" loading="lazy"></p> <h6 id="图25-2-使用用户位置显示地图">图 25-2. 使用用户位置显示地图</h6> <h1 id="音频和视频">音频和视频</h1> <p>HTML5 的另一个重要新增是对浏览器内音频和视频的支持。尽管由于编码类型和许可证的多样性，播放这些媒体类型可能有些复杂，但 <code><audio></code> 和 <code><video></code> 元素提供了你展示可用媒体类型所需的灵活性。</p> <p>在 示例 25-3 中，同一个视频文件已经被编码成不同格式，以确保所有主流浏览器都能播放。浏览器将简单地选择它们认识的第一个类型并播放，如 图 25-3 所示。</p> <h5 id="示例-25-3-使用-html5-播放视频">示例 25-3. 使用 HTML5 播放视频</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>HTML5 Video</title> </head> <body> <video width='560' height='320' controls> <source src='movie.mp4' type='video/mp4'> <source src='movie.webm' type='video/webm'> <source src='movie.ogv' type='video/ogg'> </video> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2503.png" alt="" loading="lazy"></p> <h6 id="图25-3-使用-html5-显示视频">图 25-3. 使用 HTML5 显示视频</h6> <p>将音频插入到网页中同样简单，你将在 第二十七章 中了解到。</p> <h1 id="表单">表单</h1> <p>正如你在 第十二章 中已经看到的，HTML5 表单正在被增强，但跨所有浏览器的支持仍然不完整。今天可以安全使用的部分已经在 第十二章 中详细说明了。</p> <h1 id="本地存储">本地存储</h1> <p>使用本地存储，你可以在本地设备上保存的数据量和复杂性大大增加，远远超过 cookies 提供的微小空间。这打开了离线使用 Web 应用处理文档并在联网时与 Web 服务器同步的可能性。它还提升了本地存储小型数据库的前景，比如使用 WebSQL 保存音乐集合的细节或作为饮食或减肥计划的一部分保存所有个人统计数据。在第二十八章中，我向你展示如何在你的 Web 项目中充分利用这一新功能。</p> <h1 id="web-workers">Web Workers</h1> <p>多年来，使用 JavaScript 在后台运行中断驱动应用程序是可能的，但只能通过笨拙且效率低下的过程。更明智的做法是让底层浏览器技术代表你运行后台任务，它可以比你连续中断浏览器检查进展做得更快。</p> <p>相反，通过<em>Web Workers</em>，你设置好一切并将代码传递给网页浏览器，然后由浏览器运行。当发生重要事件时，你的代码只需通知浏览器，然后浏览器回报给主代码。与此同时，你的网页可以什么也不做或者进行多个其他任务，直到后台任务需要它时才知晓。</p> <p>在第二十八章中，我展示了如何使用 Web Workers 创建一个简单的时钟并计算质数。</p> <h1 id="问题-24">问题</h1> <ol> <li> <p>哪个 HTML5 元素允许在网页中绘制图形？</p> </li> <li> <p>访问许多高级 HTML5 功能需要哪种编程语言？</p> </li> <li> <p>在网页中添加音频和视频，你会使用哪些 HTML5 标签？</p> </li> <li> <p>HTML5 中哪个特性比 cookies 提供更强大的功能？</p> </li> <li> <p>哪项 HTML5 技术支持运行后台 JavaScript 任务？</p> </li> </ol> <p>查看“第二十五章答案”，在附录 A 中有这些问题的答案。</p> <h1 id="第二十六章html5-画布">第二十六章：HTML5 画布</h1> <p>虽然新网页技术的总称是<em>HTML5</em>，但它们并不全是简单的 HTML 标签和属性。canvas 元素就是一个例子。是的，你可以使用<code><canvas></code>标签创建一个画布，并且可能指定宽度和高度，并可以通过 CSS 进行一些修改，但要真正向画布写入（或从中读取），你必须使用 JavaScript。</p> <p>幸运的是，你需要学习的 JavaScript 内容很少，而且非常容易实现，而且我已经在第二十一章（<em>OSC.js</em>文件中）提供了一套三个现成的函数，使得访问诸如 canvas 这样的对象更加简单。所以，让我们马上开始使用新的<code><canvas></code>标签。</p> <h1 id="创建和访问一个画布">创建和访问一个画布</h1> <p>在第二十五章中，我向你展示了如何绘制一个简单的圆来展示日本国旗，本章中再次使用。现在让我们来看看这里到底发生了什么。</p> <h5 id="示例-26-1-通过使用-canvas-显示日本国旗">示例 26-1 通过使用 canvas 显示日本国旗</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>The HTML5 Canvas</title> <script src='OSC.js'></script> </head> <body> <canvas id='mycanvas' width='320' height='240'> This is a canvas element given the ID <i>mycanvas</i> This text is only visible in non-HTML5 browsers </canvas> <script> canvas = O('mycanvas') context = canvas.getContext('2d') context.fillStyle = 'red' S(canvas).border = '1px solid black' context.beginPath() context.moveTo(160, 120) context.arc(160, 120, 70, 0, Math.PI * 2, false) context.closePath() context.fill() </script> </body> </html> </code></pre> <p>当然，<code><!DOCTYPE html></code>声明告诉浏览器文档将使用 HTML5。接着，显示了一个标题，并加载了<em>OSC.js</em>文件中的三个函数。</p> <p>文档的主体定义了一个 canvas 元素，赋予其 ID 为<code>mycanvas</code>，并设置宽度和高度为 320 × 240 像素。如前一章节所述，canvas 的文本在支持 canvas 元素的浏览器中不会显示，但在不支持 canvas 的老旧浏览器中会显示出来。</p> <p>接着是一段 JavaScript 代码，用于样式化和在画布上绘制。我们首先通过调用<code>O</code>函数在画布元素上创建一个<code>canvas</code>对象。正如你所记得的，这会调用<code>document.getElementById</code>函数，因此是引用元素的一种更简短的方式。</p> <p>这些都是你以前见过的东西，但接下来是一些新内容：</p> <pre><code class="language-php">context = canvas.getContext('2d') </code></pre> <p>此命令调用新创建的<code>canvas</code>对象的<code>getContext</code>方法，通过传递值<code>2d</code>请求对画布进行二维访问。</p> <h6 id="注意-152">注意</h6> <p>如果你想在画布上显示 3D 效果，可以自己做数学运算，在 2D 中“伪造”它，或者可以使用基于 OpenGL ES 的 WebGL，这种情况下你需要调用<code>canvas.getContext('webgl')</code>来为其创建一个<code>context</code>。这里没有更多的空间来进一步讨论这个主题，但你可以在<a href="https://webglfundamentals.org" target="_blank"><em>https://webglfundamentals.org</em></a>找到一个很棒的教程。或者，可以查看<a href="https://threejs.org" target="_blank">Three.jsJavaScript 库</a>，它也使用 WebGL 提供 3D 功能。</p> <p>有了对象<code>context</code>中的这个上下文，我们通过将<code>context</code>的<code>fillStyle</code>属性设置为<code>red</code>来准备后续的绘图命令：</p> <pre><code class="language-php">context.fillStyle = 'red' </code></pre> <p>然后调用<code>S</code>函数来设置画布的<code>border</code>属性为 1 像素的实线黑色边框以勾勒出国旗图像：</p> <pre><code class="language-php">S(canvas).border = '1px solid black' </code></pre> <p>准备好一切后，在上下文中打开路径，并将绘图位置移动到位置（160，120）：</p> <pre><code class="language-php">context.beginPath() context.moveTo(160, 120) </code></pre> <p>在此之后，在该坐标中心绘制一个圆弧，半径为 70 像素，从角度为 0 度（即圆的右边缘）开始，以 2 × π 确定的弧度继续绕圆周绘制：</p> <pre><code class="language-php">context.arc(160, 120, 70, 0, Math.PI * 2, false) </code></pre> <p>最后的 <code>false</code> 值指示顺时针方向绘制圆弧；<code>true</code> 值表示应以逆时针方向绘制。</p> <p>最后，我们使用预先设置为 <code>red</code> 的 <code>fillStyle</code> 属性来关闭并填充路径：</p> <pre><code class="language-php">context.closePath() context.fill() </code></pre> <p>将此文档加载到网络浏览器中的结果类似于上一章节的图 25-1。</p> <h2 id="todataurl-函数">toDataURL 函数</h2> <p>在创建画布中的图像后，有时您可能希望复制它，也许是为了在网页的其他地方重复使用，用于动画目的，保存到本地存储或上传到 Web 服务器。这尤其方便，因为用户无法使用拖放来保存画布图像。</p> <p>为了说明如何做到这一点，我在示例 26-2 中添加了几行代码（用粗体标出）。这些代码创建了一个新的 <code><img></code> 元素，带有 ID <code>myimage</code>，给它加上了一个纯黑色边框，然后将画布图像复制到 <code><img></code> 元素中（参见图 26-1）。</p> <h5 id="示例-26-2-复制画布图像">示例 26-2. 复制画布图像</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Copying a Canvas</title> <script src='OSC.js'></script> </head> <body> <canvas id='mycanvas' width='320' height='240'> This is a canvas element given the ID <i>mycanvas</i> This text is only visible in non-HTML5 browsers </canvas> `<img` `id=``'myimage'``>` <script> canvas = O('mycanvas') context = canvas.getContext('2d') context.fillStyle = 'red' S(canvas).border = '1px solid black' context.beginPath() context.moveTo(160, 120) context.arc(160, 120, 70, 0, Math.PI * 2, false) context.closePath() context.fill() `S``(``'myimage'``)``.``border` `=` `'1px solid black'` `O``(``'myimage'``)``.``src` `=` `canvas``.``toDataURL``(``)` </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2601.png" alt="右侧图像是从左侧画布复制的" loading="lazy"></p> <h6 id="图26-1-右侧图像是从左侧画布复制的">图 26-1. 右侧图像是从左侧画布复制的</h6> <p>如果您自己尝试此代码，您会注意到，尽管您不能拖放左侧画布图像，但您可以对右侧图片进行拖放，您还可以使用适当的 JavaScript（以及服务器端的 PHP）将其保存到本地存储或上传到 Web 服务器。</p> <h2 id="指定图像类型">指定图像类型</h2> <p>在从画布创建图像时，您可以指定要的图像类型，可以是 JPEG（<em>.jpg</em> 或 <em>.jpeg</em> 文件）或 PNG（<em>.png</em> 文件）。默认为 PNG（<code>image/png</code>），但如果有必要，您可以修改调用 <code>toDataURL</code> 的方式。同时，您还可以指定要使用的压缩量，介于 <code>0</code>（最低质量）和 <code>1</code>（最高质量）之间。以下使用了压缩值 <code>0.4</code>，应生成一个外观合理且文件大小较小的图像：</p> <pre><code class="language-php">O('myimage').src = canvas.toDataURL('image/jpeg', 0.4) </code></pre> <h6 id="警告-28">警告</h6> <p>请记住，<code>toDataURL</code> 方法适用于 <code>canvas</code> 对象，而不适用于从该对象创建的任何上下文。</p> <p>现在您知道如何创建画布图像，然后复制或以其他方式使用它们，是时候看看可用的绘图命令了，首先是矩形。</p> <h2 id="fillrect-方法">fillRect 方法</h2> <p>有三种不同的方法可以用来绘制矩形，第一种是<code>fillRect</code>。要使用它，只需提供矩形的左上角坐标，然后是宽度和高度（以像素为单位），像这样：</p> <pre><code class="language-php">context.fillRect(20, 20, 600, 200) </code></pre> <p>默认情况下，矩形将填充为黑色，但你可以通过首先发出如下命令来使用任何其他你喜欢的颜色，其中参数可以是任何可接受的 CSS 颜色、名称或值：</p> <pre><code class="language-php">context.fillStyle = 'blue' </code></pre> <h2 id="clearrect-方法">clearRect 方法</h2> <p>你还可以绘制一个矩形，其中所有的颜色值（红色、绿色、蓝色和 alpha 透明度）都被设置为<code>0</code>，就像下面的例子一样，它使用了相同的坐标顺序和宽度高度参数：</p> <pre><code class="language-php">context.clearRect(40, 40, 560, 160) </code></pre> <p>一旦应用了<code>clearRect</code>方法，新清除的矩形将从其覆盖的区域中除去所有颜色，只留下已应用到画布元素的任何底层 CSS 颜色。</p> <h2 id="strokerect-方法">strokeRect 方法</h2> <p>当你只想要一个轮廓矩形时，你可以使用如下命令，它将使用黑色或当前选择的描边颜色的默认值：</p> <pre><code class="language-php">context.strokeRect(60, 60, 520, 120) </code></pre> <p>要改变使用的颜色，你可以首先发出如下命令，提供任何有效的 CSS 颜色参数：</p> <pre><code class="language-php">context.strokeStyle = 'green' </code></pre> <h2 id="结合这些命令">结合这些命令</h2> <p>在示例 26-3 中，前面的绘制矩形命令已经组合起来显示了图 26-2 中显示的图像。</p> <h5 id="示例-26-3-绘制几个矩形">示例 26-3. 绘制几个矩形</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Drawing Rectangles</title> <script src='OSC.js'></script> </head> <body> <canvas id='mycanvas' width='640' height='240'></canvas> <script> canvas = O('mycanvas') context = canvas.getContext('2d') S(canvas).background = 'lightblue' context.fillStyle = 'blue' context.strokeStyle = 'green' context.fillRect( 20, 20, 600, 200) context.clearRect( 40, 40, 560, 160) context.strokeRect(60, 60, 520, 120) </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2602.png" alt="绘制同心矩形" loading="lazy"></p> <h6 id="图-26-2-绘制同心矩形">图 26-2. 绘制同心矩形</h6> <p>本章后面，你将看到如何通过改变描边类型和宽度来进一步修改输出，但首先，让我们通过应用渐变（作为 CSS 的一部分，已经在“渐变”中介绍过）来修改填充。</p> <h2 id="createlineargradient-方法">createLinearGradient 方法</h2> <p>有几种方法可以对填充应用渐变，但最简单的方法是使用<code>createLinearGradient</code>方法。你可以指定相对于画布（而不是被填充对象）的起始和结束<em>x</em>和<em>y</em>坐标。这允许更加微妙的效果。例如，你可以指定渐变从画布的最左侧开始，到最右侧结束，但仅在填充命令定义的区域内应用，如示例 26-4 所示。</p> <h5 id="示例-26-4-应用渐变填充">示例 26-4. 应用渐变填充</h5> <pre><code class="language-php">gradient = context.createLinearGradient(0, 80, 640,80) gradient.addColorStop(0, 'white') gradient.addColorStop(1, 'black') context.fillStyle = gradient context.fillRect(80, 80, 480,80) </code></pre> <h6 id="注意-153">注意</h6> <p>为了简洁和清晰起见，在这个和许多后续示例中，只显示了代码的显著行。完整的例子，包括周围的 HTML、设置和其他代码部分，可以从<a href="https://github.com/RobinNixon/lpmj6" target="_blank">GitHub</a>免费下载。</p> <p>在这个例子中，我们通过调用<code>context</code>对象的<code>createLinearGradient</code>方法创建了一个名为<code>gradient</code>的渐变填充对象。起始位置为（0, 80），位于左侧画布边缘的中间位置，而结束位置为（640, 80），位于右侧边缘的中间位置。</p> <p>要创建您的渐变，确定您希望其流动的方向，然后找到两个点来表示开始和结束。无论您为这些点提供什么值，渐变都将平滑地过渡到给定的方向，即使这些点在填充区域之外。</p> <p>接下来，提供了一对颜色停止，以指定渐变的第一个颜色是白色，最终颜色是黑色。然后，渐变将平滑地在画布上从左到右过渡这些颜色。</p> <p>现在，<code>gradient</code>对象已准备就绪，它被应用于<code>context</code>对象的<code>fillStyle</code>属性，以便最终的<code>fillRect</code>调用可以使用它。在此调用中，填充仅应用于画布的中心矩形区域，因此尽管渐变从画布的最左边延伸到最右边，但其显示的部分仅从左上角的 80 像素处开始，宽度为 480 像素，深度为 80 像素。结果（当添加到先前的示例代码中时）看起来像图 26-3。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2603.png" alt="中央矩形具有水平渐变填充" loading="lazy"></p> <h6 id="图-26-3-中央矩形具有水平渐变填充">图 26-3. 中央矩形具有水平渐变填充</h6> <p>通过为渐变指定不同的起始和结束坐标，可以使其朝任何方向倾斜，正如示例 26-5 所演示的，并显示在图 26-4 中。</p> <h5 id="示例-26-5-不同角度和颜色的多种渐变">示例 26-5. 不同角度和颜色的多种渐变</h5> <pre><code class="language-php">gradient = context.createLinearGradient(0, 0, 160, 0) gradient.addColorStop(0, 'white') gradient.addColorStop(1, 'black') context.fillStyle = gradient context.fillRect(20, 20, 135, 200) gradient = context.createLinearGradient(0, 0, 0, 240) gradient.addColorStop(0, 'yellow') gradient.addColorStop(1, 'red') context.fillStyle = gradient context.fillRect(175, 20, 135, 200) gradient = context.createLinearGradient(320, 0, 480, 240) gradient.addColorStop(0, 'green') gradient.addColorStop(1, 'purple') context.fillStyle = gradient context.fillRect(330, 20, 135, 200) gradient = context.createLinearGradient(480, 240, 640, 0) gradient.addColorStop(0, 'orange') gradient.addColorStop(1, 'magenta') context.fillStyle = gradient context.fillRect(485, 20, 135, 200) </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2604.png" alt="不同线性渐变的范围" loading="lazy"></p> <h6 id="图-26-4-不同线性渐变的范围">图 26-4. 不同线性渐变的范围</h6> <p>在这个例子中，我选择直接将渐变放置在要填充的区域上方，以更清楚地显示从起始到结束的颜色最大变化。</p> <h2 id="详细介绍-addcolorstop-方法">详细介绍 addColorStop 方法</h2> <p>您可以在渐变中使用任意数量的颜色停止，不仅限于这些示例中到目前为止使用的两种起始和结束颜色。这使得几乎可以描述您可以想象到的任何类型的渐变效果。为此，必须指定每种颜色在渐变中所占百分比的浮点起始位置，分配在<code>0</code>到<code>1</code>之间的渐变范围内。您不输入颜色的结束位置，因为它是从下一个颜色停止的起始位置推导出来的，或者是您指定的最后一个位置的渐变结束。</p> <p>在前面的示例中，仅选择了两个起始和结束值，但要创建彩虹效果，您可以设置如示例 26-6 所示的颜色停止，（显示在图 26-5 中）。</p> <h5 id="示例-26-6-添加多个颜色停止">示例 26-6. 添加多个颜色停止</h5> <pre><code class="language-php">gradient.addColorStop(0.00, 'red') gradient.addColorStop(0.14, 'orange') gradient.addColorStop(0.28, 'yellow') gradient.addColorStop(0.42, 'green') gradient.addColorStop(0.56, 'blue') gradient.addColorStop(0.70, 'indigo') gradient.addColorStop(0.84, 'violet') </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2605.png" alt="具有七个停止颜色的彩虹效果" loading="lazy"></p> <h6 id="图-26-5-具有七个停止颜色的彩虹效果">图 26-5. 具有七个停止颜色的彩虹效果</h6> <p>在 示例 26-6 中，所有颜色大致等间距分布（每种颜色占渐变的 14%，最后一种占 16%），但您不必局限于此；您可以将几种颜色挤在一起，同时将其他颜色间隔开。您可以完全自由地选择使用多少种颜色以及它们在渐变中的起始和结束位置。</p> <h2 id="createradialgradient-方法">createRadialGradient 方法</h2> <p>在 HTML 中，您不仅限于线性渐变；您也可以在画布上创建径向渐变。虽然比线性渐变复杂一点，但也不多。</p> <p>你需要做的是将中心位置作为一对<em>x</em>和<em>y</em>坐标传递，并且附带一个像素半径。这些被用作渐变的起始点和外部圆周。然后你还需要传递另一组坐标和半径来指定渐变的结束。</p> <p>因此，例如，要创建一个简单从圆的中心开始然后扩展出去的渐变，您可以发出类似于 示例 26-7 中的命令（显示在 Figure 26-6 中）。起始点和结束点的坐标相同，但起始点的半径为 <code>0</code>，结束点的半径则包含整个渐变。</p> <h5 id="示例-26-7-创建一个径向渐变">示例 26-7. 创建一个径向渐变</h5> <pre><code class="language-php">gradient = context.createRadialGradient(320, 120, 0, 320, 120, 320) </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2606.png" alt="一个居中的径向渐变" loading="lazy"></p> <h6 id="图-26-6-一个居中的径向渐变">图 26-6. 一个居中的径向渐变</h6> <p>或者您可以花哨一些，移动径向渐变的起始点和结束点的位置，就像 示例 26-8 中所示（并显示在 Figure 26-7 中），它从位置 (0, 120) 开始居中，半径为 0 像素，并以位置 (480, 120) 结束，半径为 480 像素。</p> <h5 id="示例-26-8-拉伸径向渐变">示例 26-8. 拉伸径向渐变</h5> <pre><code class="language-php">gradient = context.createRadialGradient(0, 120, 0, 480, 120, 480) </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2607.png" alt="一个拉伸的径向渐变" loading="lazy"></p> <h6 id="图-26-7-一个拉伸的径向渐变">图 26-7. 一个拉伸的径向渐变</h6> <h6 id="注-5">注</h6> <p>通过操纵此方法提供的图表，您可以创建各种怪异而奇妙的效果——尝试使用提供的示例自己动手。</p> <h2 id="使用图案进行填充">使用图案进行填充</h2> <p>类似于渐变填充，您也可以将图像应用为填充图案。这可以是当前文档中的任何图像，甚至是通过 <code>toDataURL</code> 方法从画布创建的图像（本章前面已经解释过）。</p> <p>示例 26-9 加载一个 100 × 100 像素的图像（阴阳符号）到新的图像对象 <code>image</code> 中。接下来的语句将一个函数附加到 <code>onload</code> 事件，该函数为上下文的 <code>fillStyle</code> 属性创建一个重复图案。然后用这个图案填充画布中的一个 600 × 200 像素的区域，如图 Figure 26-8 所示。</p> <h5 id="示例-26-9-使用图像作为图案填充">示例 26-9. 使用图像作为图案填充</h5> <pre><code class="language-php">image = new Image() image.src = 'image.png' image.onload = function() { pattern = context.createPattern(image, 'repeat') context.fillStyle = pattern context.fillRect(20, 20, 600, 200) } </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2608.png" alt="使用图像作为图案填充" loading="lazy"></p> <h6 id="图-26-8-使用图像作为图案填充">图 26-8. 使用图像作为图案填充</h6> <p>我们通过使用 <code>createPattern</code> 方法来创建图案，该方法还支持非重复和仅在 x 轴或 y 轴上重复的图案。我们通过将其作为第二个参数传递给它来实现这一点，此参数为要使用的图像之后。</p> <p><dfn class="keep-together"><code>repeat</code></dfn></p> <p>垂直和水平重复图片。</p> <p><dfn class="keep-together"><code>repeat-x</code></dfn></p> <p>水平重复图片。</p> <p><dfn class="keep-together"><code>repeat-y</code></dfn></p> <p>垂直重复图片。</p> <p><dfn class="keep-together"><code>no-repeat</code></dfn></p> <p>不要重复图片。</p> <p>填充图案基于整个画布区域，因此在设置填充命令仅应用于画布内较小区域时，图像在顶部和左侧会显得被截断。</p> <h6 id="警告-29">警告</h6> <p>如果在此示例中没有使用 <code>onload</code> 事件，而是在遇到代码时直接执行，那么图像可能在网页显示时尚未加载完成，可能不会显示在显示器上。附加到此事件可以确保图像可用于在画布中使用，因为该事件仅在图像成功加载后触发。</p> <h1 id="将文本写入画布">将文本写入画布</h1> <p>就像你从一组图形特性中所期望的那样，用文本写入画布是完全受支持的，具备多种字体、对齐和填充方法。但是，当今在 CSS 中已经有如此好的支持 web 字体的情况下，为什么还要将文本写入画布呢？</p> <p>假设你希望显示一个带有图形元素的图表或表格。你肯定也想为其部分标记标签。更重要的是，利用现有的命令，你可以生成的不仅仅是彩色字体。因此，让我们首先假设你被要求为一个名为 WickerpediA 的篮编网站创建页眉（尽管实际上已经有一个这样的网站，但我们继续进行）。</p> <p>首先，你需要选择合适的字体并将其大小调整到适当的尺寸，可能如示例 26-10 中所示，选择了粗体风格、140 像素大小和 Times 字体。同时，还设置了 <code>textBaseline</code> 属性为 <code>top</code>，以便 <code>strokeText</code> 方法可以使用 (0, 0) 作为文本左上角的起点坐标，将其放置在画布的左上角。图 26-9 显示了其效果。</p> <h5 id="示例-26-10-写入文本到画布">示例 26-10. 写入文本到画布</h5> <pre><code class="language-php">context.font = 'bold 140px Times' context.textBaseline = 'top' context.strokeText('WickerpediA', 0, 0) </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2609.png" alt="文本已写入画布" loading="lazy"></p> <h6 id="图26-9-文本已写入画布">图 26-9. 文本已写入画布</h6> <h2 id="stroketext-方法"><code>strokeText</code> 方法</h2> <p>要将文本写入画布，你需要将文本字符串和一对坐标发送到 <code>strokeText</code> 方法，就像这样：</p> <pre><code class="language-php">context.strokeText('WickerpediA', 0, 0) </code></pre> <p>提供的 <em>x</em> 和 <em>y</em> 坐标将被 <code>textBaseline</code> 和 <code>textAlign</code> 属性作为相对参考使用。</p> <p>这种方法——使用线条绘制——只是绘制文本到画布的一种方式。因此，除了所有以下影响文本的属性外，如<code>lineWidth</code>（稍后在本章详细介绍），还会影响文本显示的线条绘制属性。</p> <h2 id="textbaseline-属性">textBaseline 属性</h2> <p><code>textBaseline</code> 属性可以使用以下任意值：</p> <p><dfn class="keep-together"><code>top</code></dfn></p> <p>对齐到文本的顶部</p> <p><dfn class="keep-together"><code>middle</code></dfn></p> <p>对齐到文本的中间</p> <p><dfn class="keep-together"><code>alphabetic</code></dfn></p> <p>对齐到文本的字母基线</p> <p><dfn class="keep-together"><code>bottom</code></dfn></p> <p>对齐到文本的底部</p> <h2 id="字体属性">字体属性</h2> <p>字体样式可以是<code>bold</code>、<code>italic</code>或<code>normal</code>（默认），也可以是<code>italic bold</code>的组合，大小值可以使用<code>em</code>、<code>ex</code>、<code>px</code>、<code>%</code>、<code>in</code>、<code>cm</code>、<code>mm</code>、<code>pt</code>或<code>pc</code>等单位，与 CSS 类似。字体应该是当前浏览器可用的其中之一，通常为<code>Helvetica</code>、<code>Impact</code>、<code>Courier</code>、<code>Times</code>或<code>Arial</code>，或者你可以选择用户系统的默认<code>Serif</code>或<code>Sans-serif</code>字体。如果你确信另一种你想使用的字体在浏览器中可用，也可以指定它，但最好在之后至少包含一个更常见或默认的选项，以便在用户没有安装首选字体时能够优雅地回退样式。</p> <h6 id="警告-30">警告</h6> <p>如果你想使用像 <code>Times New Roman</code> 这样的字体，其中包含空格，请将相关行更改为以下内容，外部引号与字体名称周围的引号不同：</p> <pre><code class="language-php">context.font = 'bold 140px "Times New Roman"' </code></pre> <h2 id="textalign-属性">textAlign 属性</h2> <p>除了选择垂直对齐文本的方式外，还可以通过给 <code>textAlign</code> 属性指定以下值来指定水平对齐方式：</p> <p><dfn class="keep-together"><code>start</code></dfn></p> <p>如果文档方向是从左到右，则将文本左对齐，否则右对齐。这是默认设置。</p> <p><dfn class="keep-together"><code>end</code></dfn></p> <p>如果文档方向是从左到右，则将文本右对齐，否则左对齐。</p> <p><dfn class="keep-together"><code>left</code></dfn></p> <p>将文本向左对齐。</p> <p><dfn class="keep-together"><code>right</code></dfn></p> <p>将文本向右对齐。</p> <p><dfn class="keep-together"><code>center</code></dfn></p> <p>将文本居中。</p> <p>你可以像这样使用该属性：</p> <pre><code class="language-php">context.textAlign = 'center' </code></pre> <p>在当前示例中，需要将文本左对齐，以便其与画布边缘整齐对齐，因此不使用 <code>textAlign</code> 属性，因此默认的左对齐效果发生。</p> <h2 id="filltext-方法">fillText 方法</h2> <p>你还可以选择使用填充属性来填充画布文本，可以是纯色、线性或径向渐变，或图案填充。让我们尝试基于柳条篮子的纹理进行标题的图案填充，如示例 26-11，其结果显示在图 26-10 中。</p> <h5 id="示例26-11-用图案填充文本">示例 26-11. 用图案填充文本</h5> <pre><code class="language-php">image = new Image() image.src = 'wicker.jpg' image.onload = function() { pattern = context.createPattern(image, 'repeat') context.fillStyle = pattern context.fillText( 'WickerpediA', 0, 0) context.strokeText('WickerpediA', 0, 0) } </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2610.png" alt="文本现在具有图案填充" loading="lazy"></p> <h6 id="图26-10-文本现在具有图案填充">图 26-10. 文本现在具有图案填充</h6> <p>为了确保文本边缘有足够的定义，我还在这个示例中保留了<code>strokeText</code>调用；如果没有它，边缘的定义就不够了。</p> <p>这里还可以使用各种其他填充类型或图案，并且画布的简单性使得进行实验变得容易。此外，如果你希望，一旦标题达到完美，你还可以选择通过调用<code>toDataURL</code>保存一个副本，正如本章前面详细介绍的那样。然后，你可以将图像用作上传到其他站点的标志，例如。</p> <h2 id="measuretext-方法">measureText 方法</h2> <p>在使用画布文本时，有时需要知道它将占用多少空间，以便最佳位置放置它。你可以使用<code>measureText</code>方法来实现这一点（假设在此时已经定义了各种文本属性），如下所示：</p> <pre><code class="language-php">metrics = context.measureText('WickerpediA') width = metrics.width </code></pre> <p>由于像素高度等于定义字体时的点大小，所以<code>metrics</code>对象不提供高度度量。</p> <h1 id="绘制线条">绘制线条</h1> <p>画布提供了丰富的线条绘制函数，以满足几乎所有需求，包括线条、线帽和连接的选择，以及各种类型的路径和曲线。但让我们从上一节中涉及的属性开始，介绍一下。</p> <h2 id="linewidth-属性">lineWidth 属性</h2> <p>所有用线条绘制的画布方法都使用了几个线条属性，其中最重要的之一是<code>lineWidth</code>。使用它就像简单地指定像素线宽一样简单，比如这样设置宽度为 3 像素：</p> <pre><code class="language-php">context.lineWidth = 3 </code></pre> <h2 id="linecap-和-linejoin-属性">lineCap 和 lineJoin 属性</h2> <p>当你绘制的线条到达终点并且宽度超过一个像素时，你可以选择如何显示这个<em>线帽</em>，通过使用<code>lineCap</code>属性，它可以有值<code>butt</code>（默认）、<code>round</code>或<code>square</code>，例如：</p> <pre><code class="language-php">context.lineCap = 'round' </code></pre> <p>此外，当你连接超过单像素宽度的线条时，指定它们如何相遇非常重要。你可以使用<code>lineJoin</code>属性来实现这一点，它可以具有值<code>round</code>、<code>bevel</code>或<code>miter</code>（默认值），例如：</p> <pre><code class="language-php">context.lineJoin = 'bevel' </code></pre> <p>示例 26-12（因为有点复杂，这里完整显示）将每个属性的三个值结合起来应用，从而创建了你在图 26-11 中看到的结果。该示例使用的<code>beginPath</code>、<code>closePath</code>、<code>moveTo</code>和<code>lineTo</code>方法将在下面解释。</p> <h5 id="示例26-12-显示线帽和连接的组合">示例 26-12. 显示线帽和连接的组合</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Drawing Lines</title> <script src='OSC.js'></script> </head> <body> <canvas id='mycanvas' width='535' height='360'></canvas> <script> canvas = O('mycanvas') context = canvas.getContext('2d') S(canvas).background = 'lightblue' context.fillStyle = 'red' context.font = 'bold 13pt Courier' context.strokeStyle = 'blue' context.textBaseline = 'top' context.textAlign = 'center' context.lineWidth = 20 caps = [' butt', ' round', 'square'] joins = [' round', ' bevel', ' miter'] for (j = 0 ; j < 3 ; ++j) { for (k = 0 ; k < 3 ; ++k) { context.lineCap = caps[j] context.lineJoin = joins[k] context.fillText(' cap:' + caps[j], 88 + j * 180, 45 + k * 120) context.fillText('join:' + joins[k], 88 + j * 180, 65 + k * 120) context.beginPath() context.moveTo( 20 + j * 180, 100 + k * 120) context.lineTo( 20 + j * 180, 20 + k * 120) context.lineTo(155 + j * 180, 20 + k * 120) context.lineTo(155 + j * 180, 100 + k * 120) context.stroke() context.closePath() } } </script> </body> </html> </code></pre> <p>这段代码设置了一些属性，然后嵌套了一对循环：一个用于线帽，一个用于连接。在中央循环内，首先设置了<code>lineCap</code>和<code>lineJoin</code>属性的当前值，然后用<code>fillText</code>方法在画布上显示出来。</p> <p>使用这些设置，代码将绘制九个形状，每个形状都有一个 20 像素宽的线，具有不同的线帽和连接设置，如 图 26-11 所示。</p> <p>正如你所看到的，平截头线帽很短，方形的较长，而圆形的则介于两者之间。圆角连接是曲线的，斜角连接是切割过角的，而尖角连接具有尖锐的角。连接同样适用于不是 90 度的角的连接。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2611.png" alt="所有线帽和连接的组合" loading="lazy"></p> <h6 id="图-26-11-所有线帽和连接的组合">图 26-11. 所有线帽和连接的组合</h6> <h2 id="miterlimit-属性"><strong>miterLimit 属性</strong></h2> <p>如果你发现你的尖角斜接被截断得太短，你可以使用 <code>miterLimit</code> 属性来延长它们，如下所示：</p> <pre><code class="language-php">context.miterLimit = 15 </code></pre> <p>默认值为 <code>10</code>，所以你也可以减少斜接限制。如果 <code>miterLimit</code> 没有设置为足够大的值以适应斜接，那么锐角斜接将会简单地变成斜接。因此，如果你遇到尖锐斜接的问题，只需增加你为 <code>miterLimit</code> 提供的值，直到斜接正确显示。</p> <h1 id="使用路径">使用路径</h1> <p>前面的示例使用了两种方法来设置路径，供线条绘制方法使用。<code>beginPath</code> 方法设置路径的开始，而 <code>closePath</code> 设置路径的结束。在每个路径内部，你可以使用各种方法来移动绘图位置以及创建线条、曲线和其他形状。让我们简要看一下来自 示例 26-12 的相关部分，简化为仅创建模式的单个实例：</p> <pre><code class="language-php">context.beginPath() context.moveTo(20, 100) context.lineTo(20, 20) context.lineTo(155, 20) context.lineTo(155, 100) context.stroke() context.closePath() </code></pre> <p>在这段代码片段中，第一行开始了一个路径，然后通过调用 <code>moveTo</code> 方法将绘图位置移动到离画布左上角 20 像素横向和 100 像素纵向的位置。</p> <p>然后紧接着是对 <code>lineTo</code> 的三次调用，分别画出三条线，首先向上到位置 (20, 20)，然后向右到 (155, 20)，最后再次向下到 (155, 100)。一旦路径设置好了，调用 <code>stroke</code> 方法进行绘制，最后关闭路径因为不再需要。</p> <h6 id="注意-154">注意</h6> <p>在完成路径后立即关闭路径是非常重要的；否则，在使用多条路径时可能会得到一些非常意想不到的结果。</p> <h2 id="moveto-和-lineto-方法">moveTo 和 lineTo 方法</h2> <p><code>moveTo</code> 方法和 <code>lineTo</code> 方法都接受简单的 <em>x</em> 和 <em>y</em> 坐标作为它们的参数，它们的区别在于 <code>moveTo</code> 从当前位置拿起一个虚拟的笔然后移动到一个新位置，而 <code>lineTo</code> 在当前虚拟笔的位置到指定的新位置之间画一条线。或者，如果调用了 <code>stroke</code> 方法但没有其他方法的话，将会画出一条线。因此，我们只能说 <code>lineTo</code> 创建了一个<em>潜在</em>的画线，但它同样可以是填充区域的轮廓的一部分，例如。</p> <h2 id="stroke-方法">stroke 方法</h2> <p><code>stroke</code>方法的作用是将到目前为止在路径中创建的所有线条实际绘制到画布上。如果在未关闭路径的情况下发出该命令，则会立即绘制到最近的虚拟笔位置。</p> <p>然而，如果关闭路径，然后发出一个<code>stroke</code>调用，它的效果也会从当前位置回到起始位置连接路径，在这个例子中会将形状变成矩形（这不是我们想要的，因为我们需要看到线帽以及连接点）。</p> <h6 id="注意-155">注意</h6> <p>这种路径闭合后的连接效果是必需的（稍后您将看到），以便准备好任何您希望对其使用的<code>fill</code>方法；否则，用于填充的图形可能会超出路径的边界。</p> <h2 id="rect-方法">rect 方法</h2> <p>如果需要创建四边形而不是前面示例中的三边形（并且您不希望关闭路径），可以发出另一个<code>lineTo</code>调用以连接所有内容，就像这样（以粗体显示）：</p> <pre><code class="language-php">context.beginPath() context.moveTo(20, 100) context.lineTo(20, 20) context.lineTo(155, 20) context.lineTo(155, 100) `context``.``lineTo``(``20``,` `100``)` context.closePath() </code></pre> <p>但是，有一种更简单的方法可以绘制带有轮廓的矩形，即使用<code>rect</code>方法，就像这样：</p> <pre><code class="language-php">rect(20, 20, 155, 100) </code></pre> <p>在单个调用中，此命令接受两对<em>x</em>和<em>y</em>坐标并绘制一个矩形，其左上角位于(20, 20)位置，右下角位于(155, 100)位置。</p> <h1 id="填充区域">填充区域</h1> <p>使用路径，您可以创建复杂的区域，还可以填充实色、渐变色或图案填充。在示例 26-13 中，使用了一些基本的三角函数来创建复杂的星形图案。我不会详细说明数学如何工作，因为这对示例不重要（尽管如果您想玩转代码，请尝试更改分配给<code>points</code>、<code>scale1</code>和<code>scale2</code>变量的值，以获得不同的效果）。</p> <h5 id="示例-26-13-填充复杂路径">示例 26-13. 填充复杂路径</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Filling a Path</title> <script src='OSC.js'></script> </head> <body> <canvas id='mycanvas' width='320' height='320'></canvas> <script> canvas = O('mycanvas') context = canvas.getContext('2d') S(canvas).background = 'lightblue' `context``.``strokeStyle` `=` `'orange'` `context``.``fillStyle` `=` `'yellow'` orig = 160 points = 21 dist = Math.PI / points * 2 scale1 = 150 scale2 = 80 `context``.``beginPath``(``)` for (j = 0 ; j < points ; ++j) { x = Math.sin(j * dist) y = Math.cos(j * dist) `context``.``lineTo``(``orig` `+` `x` `*` `scale1``,` `orig` `+` `y` `*` `scale1``)` `context``.``lineTo``(``orig` `+` `x` `*` `scale2``,` `orig` `+` `y` `*` `scale2``)` } `context``.``closePath``(``)` `context``.``stroke``(``)` `context``.``fill``(``)` </script> </body> </html> </code></pre> <p>您真正需要查看的只是以粗体显示的那些行，其中开始了一个路径，一对<code>lineTo</code>调用定义了形状，路径被关闭，然后使用<code>stroke</code>和<code>fill</code>方法绘制橙色的形状轮廓并填充黄色（如图 26-12 所示）。</p> <h6 id="注意-156">注意</h6> <p>使用路径，您可以创建任意复杂的对象，可以使用公式或循环（如本例中）或仅使用一长串的<code>moveTo</code>和/或<code>lineTo</code>调用。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2612.png" alt="绘制和填充复杂路径" loading="lazy"></p> <h6 id="图-26-12-绘制和填充复杂路径">图 26-12. 绘制和填充复杂路径</h6> <h1 id="clip-方法">clip 方法</h1> <p>有时，在构建路径时，您可能希望忽略画布的某些部分（也许是因为您正在部分“后面”绘制另一个对象，只想显示可见部分）。您可以使用<code>clip</code>方法来实现这一点，该方法创建一个边界，超出该边界的<code>stroke</code>、<code>fill</code>或其他方法将不会产生任何效果。</p> <p>为了说明这一点，示例 26-14 通过将虚拟笔指针移动到左边缘，然后画一条<code>lineTo</code>到右边缘，再向下移动 30 像素，然后再返回到左边缘，依此类推，创建了类似窗帘的效果。这在画布上绘制了一系列深度为 30 像素的水平条，如图 26-13 所示。</p> <h5 id="示例-26-14-创建剪辑区域">示例 26-14. 创建剪辑区域</h5> <pre><code class="language-php">context.beginPath() for (j = 0 ; j < 10 ; ++j) { context.moveTo(20, j * 48) context.lineTo(620, j * 48) context.lineTo(620, j * 48 + 30) context.lineTo(20, j * 48 + 30) } `context``.``stroke``(``)` context.closePath() </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2613.png" alt="水平条形图的路径" loading="lazy"></p> <h6 id="图26-13-水平条形图的路径">图 26-13. 水平条形图的路径</h6> <p>要将此示例转换为画布上的剪辑区域，您只需将示例中用粗体突出显示的<code>stroke</code>调用替换为<code>clip</code>调用，如下所示：</p> <pre><code class="language-php">context.clip() </code></pre> <p>现在不会看到条形图的轮廓，但是一个由所有单独的条形图组成的剪辑区域将会存在。为了说明这一点，示例 26-15 使用这种方法替代，并在之前的示例基础上添加了在画布上绘制简单的绿草图像的修改，位于一个包含闪耀太阳的蓝天下（修改自示例 26-12），用粗体突出显示的更改，并在图 26-14 中显示结果。</p> <h5 id="示例-26-15-在剪辑区域的边界内绘制">示例 26-15. 在剪辑区域的边界内绘制</h5> <pre><code class="language-php">`context``.``fillStyle` `=` `'white'` `context``.``strokeRect``(``20``,` `20``,` `600``,` `440``)` // Black border `context``.``fillRect``(` `20``,` `20``,` `600``,` `440``)` // White background context.beginPath() for (j = 0 ; j < 10 ; ++j) { context.moveTo(20, j * 48) context.lineTo(620, j * 48) context.lineTo(620, j * 48 + 30) context.lineTo(20, j * 48 + 30) } `context``.``clip``(``)` context.closePath() `context``.``fillStyle` `=` `'blue'` // Blue sky `context``.``fillRect``(``20``,` `20``,` `600``,` `320``)` `context``.``fillStyle` `=` `'green'` // Green grass `context``.``fillRect``(``20``,` `320``,` `600``,` `140``)` `context``.``strokeStyle` `=` `'orange'` `context``.``fillStyle` `=` `'yellow'` `orig` `=` `170` `points` `=` `21` `dist` `=` `Math``.``PI` `/` `points` `*` `2` `scale1` `=` `130` `scale2` `=` `80` `context``.``beginPath``(``)` `for` `(``j` `=` `0` `;` `j` `<` `points` `;` `++``j``)` `{` `x` `=` `Math``.``sin``(``j` `*` `dist``)` `y` `=` `Math``.``cos``(``j` `*` `dist``)` `context``.``lineTo``(``orig` `+` `x` `*` `scale1``,` `orig` `+` `y` `*` `scale1``)` `context``.``lineTo``(``orig` `+` `x` `*` `scale2``,` `orig` `+` `y` `*` `scale2``)` `}` `context``.``closePath``(``)` `context``.``stroke``(``)` // Sun outline `context``.``fill``(``)` // Sun fill </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2614.png" alt="仅在允许的剪辑区域内绘制" loading="lazy"></p> <h6 id="图26-14-仅在允许的剪辑区域内绘制">图 26-14. 仅在允许的剪辑区域内绘制</h6> <p>好了，我们不会在这里赢得任何比赛，但您可以看到在有效使用时剪辑可以有多强大。</p> <h1 id="ispointinpath-方法">isPointInPath 方法</h1> <p>有时候您需要知道特定点是否位于您构建的路径中。但是，您可能只有在非常熟练于 JavaScript 并且能够编写相当复杂的程序时才会想要使用此功能，并且通常会将其作为条件<code>if</code>语句的一部分调用，如下所示：</p> <pre><code class="language-php">if (context.isPointInPath(23, 87)) { // Do something here } </code></pre> <p>调用的第一个参数是位置的<em>x</em>坐标，第二个参数是位置的<em>y</em>坐标。如果指定的位置位于路径中的任何点上，则该方法返回值为<code>true</code>，因此执行<code>if</code>语句的内容。否则，返回值为<code>false</code>，则不执行<code>if</code>语句的内容。</p> <h6 id="注意-157">注意</h6> <p>使用<code>isPointInPath</code>方法的完美场景是创建使用画布的游戏，例如希望检查导弹击中目标、球击中墙壁或球拍等边界条件。</p> <h1 id="使用曲线">使用曲线</h1> <p>除了直线路径，您还可以使用各种不同的方法创建几乎无限种类的曲线路径，从简单的弧线和圆到复杂的二次和贝塞尔曲线。</p> <p>实际上，您不需要使用路径来创建许多线条、矩形和曲线，因为您可以通过直接调用它们的方法来直接绘制它们。但是使用路径可以给您提供更精确的控制，因此我倾向于在定义的路径内绘制画布上的内容，就像以下示例一样。</p> <h2 id="弧方法">弧方法</h2> <p><code>arc</code>方法要求您传递弧的中心的<em>x</em>和<em>y</em>位置，以及像素的半径。除了这些值，您还需要传递一对弧度偏移量，并且可以选择包括方向，如下所示：</p> <pre><code class="language-php">context.arc(55, 85, 45, 0, Math.PI / 2, false) </code></pre> <p>由于默认方向是顺时针的（一个值为<code>false</code>），这可以省略，或者您可以将其更改为<code>true</code>以逆时针方向绘制弧。</p> <p>示例 26-16 创建了三组四个弧，前两组顺时针方向，第三组逆时针方向。此外，前两组弧在调用<code>stroke</code>方法之前路径已关闭，因此起点和终点相连，而后面的两组弧在路径关闭之前绘制，因此不相连。</p> <h5 id="示例-26-16-绘制各种弧">示例 26-16. 绘制各种弧</h5> <pre><code class="language-php">context.strokeStyle = 'blue' arcs = [ Math.PI, Math.PI * 2, Math.PI / 2, Math.PI / 180 * 59 ] for (j = 0 ; j < 4 ; ++j) { context.beginPath() context.arc(80 + j * 160, 80, 70, 0, arcs[j]) context.closePath() context.stroke() } context.strokeStyle = 'red' for (j = 0 ; j < 4 ; ++j) { context.beginPath() context.arc(80 + j * 160, 240, 70, 0, arcs[j]) context.stroke() context.closePath() } context.strokeStyle = 'green' for (j = 0 ; j < 4 ; ++j) { context.beginPath() context.arc(80 + j * 160, 400, 70, 0, arcs[j], true) context.stroke() context.closePath() } </code></pre> <p>为了创建更短的代码，我使用循环绘制了所有的弧，以便将每个弧的长度存储在数组<code>arcs</code>中。这些值以弧度表示，一个弧度相当于 180 ÷ π（π是圆周与直径的比值，约为 3.1415927），它们的计算如下：</p> <p><dfn class="keep-together"><code>Math.PI</code></dfn></p> <p>等同于 180 度</p> <p><dfn class="keep-together"><code>Math.PI * 2</code></dfn></p> <p>等同于 360 度</p> <p><dfn class="keep-together"><code>Math.PI / 2</code></dfn></p> <p>等同于 90 度</p> <p><dfn class="keep-together"><code>Math.PI / 180 * 59</code></dfn></p> <p>等同于 59 度</p> <p>图 26-15 展示了三行弧，并说明了在最后一组中使用方向参数<code>true</code>以及根据您是否希望绘制连接起始点和终点的线条而仔细选择关闭路径的重要性。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2615.png" alt="各种弧类型" loading="lazy"></p> <h6 id="图-26-15-各种弧类型">图 26-15. 各种弧类型</h6> <h6 id="注意-158">注意</h6> <p>如果您更喜欢使用度而不是弧度，可以创建一个新的<code>Math</code>库函数，如下所示：</p> <pre><code class="language-php">Math.degreesToRadians = function(degrees) { return degrees * Math.PI / 180 } </code></pre> <p>然后用以下内容替换从示例 26-16 的第二行开始的创建数组的代码：</p> <pre><code class="language-php">arcs = [ Math.degreesToRadians(180), Math.degreesToRadians(360), Math.degreesToRadians(90), Math.degreesToRadians(59) ] </code></pre> <h2 id="arcto-方法">arcTo 方法</h2> <p>而不是一次创建整个弧，您可以选择从路径中的当前位置弧到另一个位置，就像在以下<code>arcTo</code>调用中（它只需要两对<em>x</em>和<em>y</em>坐标和一个半径）：</p> <pre><code class="language-php">context.arcTo(100, 100, 200, 200, 100) </code></pre> <p>您传递给该方法的位置代表想象的切线触及弧的圆周的起点和终点处。切线是一条直线与圆周的接触点，使得接触点两侧的角度相等。</p> <p>为了说明其工作原理，例子 26-17 绘制了八个不同半径从 0 到 280 像素的弧线。每次循环时，都会在位置 (20, 20) 处创建一个新路径的起始点。然后使用虚拟切线从该位置绘制弧线到位置 (240, 240)，然后再到位置 (460, 20)。在这种情况下，它定义了一个互相成直角的 <em>V</em> 形的切线对。</p> <h5 id="例子-26-17-绘制八个不同半径的弧线">例子 26-17. 绘制八个不同半径的弧线</h5> <pre><code class="language-php">for (j = 0 ; j <= 280 ; j += 40) { context.beginPath() context.moveTo(20, 20) context.arcTo(240, 240, 460, 20, j) context.lineTo(460, 20) context.stroke() context.closePath() } </code></pre> <p><code>arcTo</code> 方法仅绘制弧线触及第二个虚拟切线的点。因此，在每次调用 <code>arcTo</code> 后，<code>lineTo</code> 方法创建从 <code>arcTo</code> 结束位置到位置 (460,20) 的剩余线段。然后使用 <code>stroke</code> 方法将结果绘制到画布上，并关闭路径。</p> <p>正如您在 图 26-16 中看到的，当 <code>arcTo</code> 使用半径值 <code>0</code> 调用时，它会创建一个尖锐的连接点。在这种情况下，它是一个直角（但如果两条虚拟切线相互形成其他角度，连接点将位于那个角度）。随着半径的增大，您可以看到弧线变得越来越大。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2616.png" alt="不同半径的弧线绘制" loading="lazy"></p> <h6 id="图-26-16-绘制不同半径的弧线">图 26-16. 绘制不同半径的弧线</h6> <p>从根本上说，您可以最好地使用 <code>arcTo</code> 来从绘制的一个部分弯曲到另一个部分，根据前后位置的弧度切线，仿佛它们是弧线的切线。如果这听起来很复杂，别担心：您很快就会掌握它，并发现这实际上是一种方便和逻辑的绘制弧线的方式。</p> <h2 id="二次曲线绘制方法">二次曲线绘制方法</h2> <p>尽管弧线很有用，但它们只是一种曲线类型，对于更复杂的设计可能有所限制。但不用担心：还有更多方法来绘制曲线，例如 <code>quadraticCurveTo</code> 方法。使用这种方法，您可以在曲线附近放置一个虚拟吸引子，将其朝该方向拉动，就像空间中的物体路径被它经过的行星和恒星的引力所拉动一样。不过，与重力不同的是，吸引子距离越远，它的吸引力就<em>越</em>大！</p> <p>例子 26-18 包含对此方法的六次调用，创建了一朵蓬松云朵的路径，然后用白色填充。 图 26-17 说明了云朵外部虚线的角度代表应用于每条曲线的吸引点。</p> <h5 id="例子-26-18-使用二次曲线绘制云朵">例子 26-18. 使用二次曲线绘制云朵</h5> <pre><code class="language-php">context.beginPath() context.moveTo(180, 60) context.quadraticCurveTo(240, 0, 300, 60) context.quadraticCurveTo(460, 30, 420, 100) context.quadraticCurveTo(480, 210, 340, 170) context.quadraticCurveTo(240, 240, 200, 170) context.quadraticCurveTo(100, 200, 140, 130) context.quadraticCurveTo( 40, 40, 180, 60) context.fillStyle = 'white' context.fill() context.closePath() </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2617.png" alt="使用二次曲线绘制" loading="lazy"></p> <h6 id="图-26-17-使用二次曲线绘制">图 26-17. 使用二次曲线绘制</h6> <h6 id="注意-159">注意</h6> <p>顺便说一下，为了在此图像中实现云的虚线周围的虚线，我使用了<code>stroke</code>方法与<code>setLineDash</code>方法结合使用，后者接受表示短划线和空格长度的列表。在这种情况下，我使用了<code>setLineDash([2, 3])</code>，但您可以创建复杂到您喜欢的虚线，比如<code>setLineDash([1, 2, 1, 3, 5, 1, 2, 4])</code>。</p> <h2 id="beziercurveto-方法">bezierCurveTo 方法</h2> <p>如果您仍然觉得二次曲线对您的需求不够灵活，那么对于每条曲线使用两个吸引子如何？使用<code>bezierCurveTo</code>方法，您可以做到这一点，就像在示例 26-19 中那样，其中创建了一个曲线，连接位置(24, 20)和(240, 220)，但是吸引子在画布外部不可见（在此示例中位于位置(720, 480)和(-240, -240)）。图 26-18 展示了这条曲线的形变过程。</p> <h5 id="示例-26-19-创建具有两个吸引子的贝塞尔曲线">示例 26-19. 创建具有两个吸引子的贝塞尔曲线</h5> <pre><code class="language-php">context.beginPath() context.moveTo(240, 20) context.bezierCurveTo(720, 480, -240, -240, 240, 220) context.stroke() context.closePath() </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2618.png" alt="具有两个吸引子的贝塞尔曲线" loading="lazy"></p> <h6 id="图-26-18-具有两个吸引子的贝塞尔曲线">图 26-18. 具有两个吸引子的贝塞尔曲线</h6> <p>吸引子不需要位于画布的相对两侧；您可以将它们放置在任何位置，当它们彼此靠近时，它们将施加联合的吸引力（而不是像前面的例子中那样的对立吸引力）。使用这些不同类型的曲线方法，您可以绘制您所需的每种类型的曲线。</p> <h1 id="图像操作">图像操作</h1> <p>您不仅可以使用图形方法在画布上绘制和书写，还可以在画布上放置图像或从中提取它们。而且，您不限于简单的复制粘贴命令，因为在读取或写入图像时，您可以拉伸和扭曲图像，并完全控制混合和阴影效果。</p> <h2 id="drawimage-方法">drawImage 方法</h2> <p>使用<code>drawImage</code>方法，您可以获取从网站加载的图像对象、上传到服务器的图像，甚至从画布中提取的图像，并将其绘制到画布上。该方法支持多种参数，其中许多是可选的，但在其最简单的形式下，您可以像以下这样调用<code>drawImage</code>，仅传递图像及一对<em>x</em>和<em>y</em>坐标：</p> <pre><code class="language-php">context.drawImage(myimage, 20, 20) </code></pre> <p>此命令将<code>myimage</code>对象中包含的图像绘制到具有<code>context</code>上下文的画布上，其左上角位于位置(20, 20)。</p> <h6 id="警告-31">警告</h6> <p>在使用图像之前确保其已加载的最佳实践是将您的图像处理代码封装在一个仅在图像加载时触发的函数中，如下所示：</p> <pre><code class="language-php">myimage = new Image() myimage.src = 'image.gif' myimage.onload = function() { context.drawImage(myimage, 20, 20) } </code></pre> <h2 id="调整图像大小">调整图像大小</h2> <p>如果您需要在放置在画布上的图像上调整大小，请在调用中添加第二对表示所需宽度和高度的参数，如下（用粗体标记）：</p> <pre><code class="language-php">context.drawImage(myimage, 140, 20, `220`, `220`) context.drawImage(myimage, 380, 20, `80`, `220`) </code></pre> <p>此处图像放置在两个位置：第一个位置为(140, 20)，图像被放大（从 100 像素正方形到 220 像素正方形），而第二个位置为(380, 20)，图像在水平方向被挤压并在垂直方向上扩展，宽度和高度为 80 × 220 像素。</p> <h2 id="选择图像区域">选择图像区域</h2> <p>在使用 <code>drawImage</code> 时，并不局限于使用整个图像；还可以选择图像内的区域。例如，如果希望将所有打算使用的图形图像放在一个单独的图像文件中，然后只需抓取所需的图像部分，这会非常方便。开发人员经常使用这种技巧来加快页面加载速度并减少服务器请求。</p> <p>不过，这样做稍微复杂一些，因为在这种方法中，与在参数列表末尾添加更多参数不同的是，在提取图像的部分时，必须首先放置这些参数。</p> <p>因此，例如，要在位置 (20, 140) 处放置一个图像，可以发出以下命令：</p> <pre><code class="language-php">context.drawImage(myimage, 20, 140) </code></pre> <p>要给抓取的部分设置宽度和高度为 100 × 100 像素，可以像这样修改调用（用粗体标出）：</p> <pre><code class="language-php">context.drawImage(myimage, 20, 140, `100`, `100`) </code></pre> <p>但是，如果想要抓取（或裁剪）一个只有 40 × 40 像素的子区域（例如），其位于图像的 (30, 30) 处，你可以像这样调用该方法（新参数用粗体表示）：</p> <pre><code class="language-php">context.drawImage(myimage, `30``,` `30``,` `40``,` `40``,` 20, 140) </code></pre> <p>要将抓取的部分调整为 100 像素正方形，可以使用以下方式：</p> <pre><code class="language-php">context.drawImage(myimage, `30``,` `30``,` `40``,` `40`, 20, 140, 100, 100) </code></pre> <h6 id="警告-32">警告</h6> <p>我觉得这非常令人困惑，无法想到这种方法为什么会这样工作的合乎逻辑的原因。但既然它确实如此，我恐怕除了强迫自己记住在哪些条件下哪些参数放在哪里之外，别无他法。</p> <p>示例 26-20 使用多种调用 <code>drawImage</code> 方法的方式来获得 图 26-19 所显示的结果。为了更清楚，我已经分开参数，使得每列的值提供相同的信息。</p> <h5 id="示例-26-20-画布上绘制图像的各种方式">示例 26-20. 画布上绘制图像的各种方式</h5> <pre><code class="language-php">myimage = new Image() myimage.src = 'image.png' myimage.onload = function() { context.drawImage(myimage, 20, 20 ) context.drawImage(myimage, 140, 20, 220, 220) context.drawImage(myimage, 380, 20, 80, 220) context.drawImage(myimage, 30, 30, 40, 40, 20, 140, 100, 100) } </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2619.png" alt="调整大小和裁剪图像到画布上的图像" loading="lazy"></p> <h6 id="图-26-19-调整大小和裁剪图像到画布上的图像">图 26-19. 调整大小和裁剪图像到画布上的图像</h6> <h2 id="从画布复制">从画布复制</h2> <p>你还可以将一个画布用作绘制到同一个（或另一个）画布的源图像。只需在图像对象的位置提供画布对象的名称，并以与图像相同的方式使用所有其余的参数。</p> <h2 id="添加阴影">添加阴影</h2> <p>在画布上绘制图像（或图像部分）或者任何其他内容时，还可以通过设置以下一个或多个属性来放置阴影：</p> <p><dfn class="keep-together"><code>shadowOffsetX</code></dfn></p> <p>阴影向右移动的水平偏移量（如果值为负，则向左移动）。</p> <p><dfn class="keep-together"><code>shadowOffsetY</code></dfn></p> <p>阴影向下移动的垂直偏移量（如果值为负，则向上移动）。</p> <p><dfn class="keep-together"><code>shadowBlur</code></dfn></p> <p>模糊阴影轮廓的像素数量。</p> <p><dfn class="keep-together"><code>shadowColor</code></dfn></p> <p>用于阴影的基础颜色。如果使用了模糊，这种颜色将与模糊区域的背景混合。</p> <p>这些属性不仅适用于文本和线条，还适用于实心图像，如示例 26-21 中所示，其中一些文本、图像和使用路径创建的对象都添加了阴影。在图 26-20 中，您可以看到阴影智能地围绕图像的可见部分流动，而不仅仅是其矩形边界。</p> <h5 id="示例-26-21-在画布上绘制时应用阴影">示例 26-21. 在画布上绘制时应用阴影</h5> <pre><code class="language-php">myimage = new Image() myimage.src = 'apple.png' orig = 95 points = 21 dist = Math.PI / points * 2 scale1 = 75 scale2 = 50 myimage.onload = function() { context.beginPath() for (j = 0 ; j < points ; ++j) { x = Math.sin(j * dist) y = Math.cos(j * dist) context.lineTo(orig + x * scale1, orig + y * scale1) context.lineTo(orig + x * scale2, orig + y * scale2) } context.closePath() context.shadowOffsetX = 5 context.shadowOffsetY = 5 context.shadowBlur = 6 context.shadowColor = '#444' context.fillStyle = 'red' context.stroke() context.fill() context.shadowOffsetX = 2 context.shadowOffsetY = 2 context.shadowBlur = 3 context.shadowColor = 'yellow' context.font = 'bold 36pt Times' context.textBaseline = 'top' context.fillStyle = 'green' context.fillText('Sale now on!', 200, 5) context.shadowOffsetX = 3 context.shadowOffsetY = 3 context.shadowBlur = 5 context.shadowColor = 'black' context.drawImage(myimage, 245, 45) } </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2620.png" alt="不同类型绘图对象下的阴影" loading="lazy"></p> <h6 id="图-26-20-不同类型绘图对象下的阴影">图 26-20. 不同类型绘图对象下的阴影</h6> <h1 id="在像素级别编辑">在像素级别编辑</h1> <p>HTML5 画布不仅为您提供了强大的绘图方法范围，还允许您在像素级别直接在引擎盖下进行操作，其中包括三种强大的方法。</p> <h2 id="getimagedata-方法"><code>getImageData</code> 方法</h2> <p>使用<code>getImageData</code>方法，您可以抓取画布的一部分（或全部），以便您可以按任何方式修改检索到的数据，然后将其保存回画布的其他位置（或另一画布）。</p> <p>为了说明这是如何工作的，示例 26-22 首先加载一个现成的图像并将其绘制到画布上。然后，画布数据被读取到一个名为<code>idata</code>的对象中，其中所有颜色被平均在一起以将每个像素更改为灰度，然后稍微调整以将每种颜色向深褐色移动，如图 26-21 所示。下一部分解释了像素的<code>data</code>数组及当值<code>50</code>被添加到或从数组元素中减去时会发生什么。</p> <h5 id="示例-26-22-操纵图像数据">示例 26-22. 操纵图像数据</h5> <pre><code class="language-php">myimage = new Image() myimage.src = 'photo.jpg' myimage.crossOrigin = '' myimage.onload = function() { context.drawImage(myimage, 0, 0) idata = context.getImageData(0, 0, myimage.width, myimage.height) for (y = 0 ; y < myimage.height ; ++y) { pos = y * myimage.width * 4 for (x = 0 ; x < myimage.width ; ++x) { average = ( idata.data[pos] + idata.data[pos + 1] + idata.data[pos + 2] ) / 3 idata.data[pos] = average + 50 idata.data[pos + 1] = average idata.data[pos + 2] = average - 50 pos += 4; } } context.putImageData(idata, 320, 0) } </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2621.png" alt="将图像转换为深褐色（在灰度模式下查看此图像时，只会看到细微差异）" loading="lazy"></p> <h6 id="图-26-21-将图像转换为深褐色在灰度模式下查看此图像时只会看到细微差异">图 26-21. 将图像转换为深褐色（在灰度模式下查看此图像时，只会看到细微差异）</h6> <h3 id="data-数组"><code>data</code> 数组</h3> <p>这种图像操作依赖于<code>data</code>数组，它是通过调用<code>getImageData</code>返回的<code>idata</code>对象的属性。此方法返回一个包含所选区域的所有像素数据的数组，其组成部分包括红色、绿色、蓝色和 alpha 透明度。因此，每个彩色像素使用四个数据项来存储。</p> <p>许多最近的浏览器已采纳严格的安全措施以防止跨源攻击，这就是为什么在这个示例中我们必须为<code>myimage</code>对象添加<code>crossOrigin</code>属性，并将其值设置为空字符串（代表默认值为<code>'anonymous'</code>），以明确允许读取图像数据。出于同样的安全原因，该示例只有在从 Web 服务器（如在线服务器或第二章中的 AMPPS 安装）加载时才能正确工作；在仅从本地文件系统加载时将无法正确工作。</p> <p>所有数据按顺序存储在<code>data</code>数组中，因此红色值的后面是蓝色值，然后是绿色值，最后是透明度值；然后，数组中的下一个项是下一个像素的红色值，依此类推。因此，对于位置(0, 0)的像素，你将会有以下数值：</p> <pre><code class="language-php">idata.data[0] // Red level idata.data[1] // Green level idata.data[2] // Blue level idata.data[3] // Alpha level </code></pre> <p>然后是位置(1, 0)，如下所示：</p> <pre><code class="language-php">idata.data[4] // Red level idata.data[5] // Green level idata.data[6] // Blue level idata.data[7] // Alpha level </code></pre> <p>在这个图像中，一切都继续以同样的方式进行，直到第一行中最右边的像素——即第 0 行中的第 320 像素，位于位置(319, 0)——被达到。此时，将 319 乘以 4（每个像素数据项的数量）以获得以下数组元素，它们包含这个像素的数据：</p> <pre><code class="language-php">idata.data[1276] // Red level idata.data[1277] // Green level idata.data[1278] // Blue level idata.data[1279] // Alpha level </code></pre> <p>这会导致数据指针移动回到图像的第一列，但这次是第 1 行的第一列，即位置(0, 1)，其偏移量为(0 × 4) + (1 × 320 × 4)，即 1,280：</p> <pre><code class="language-php">idata.data[1280] // Red level idata.data[1281] // Green level idata.data[1282] // Blue level idata.data[1283] // Alpha level </code></pre> <p>因此，如果图像数据存储在<code>idata</code>中，图像宽度为<code>w</code>，要访问的像素位置为<code>x</code>和<code>y</code>，则在直接访问图像数据时使用的关键公式如下：</p> <pre><code class="language-php">red = idata.data[x * 4 + y * w * 4 ] green = idata.data[x * 4 + y * w * 4 + 1] blue = idata.data[x * 4 + y * w * 4 + 2] alpha = idata.data[x * 4 + y * w * 4 + 3] </code></pre> <p>使用这些知识，我们通过仅获取每个像素的红色、蓝色和绿色分量并求平均值，来创建图 26-12 中的棕色效果（其中<code>pos</code>是当前像素数组位置的变量指针）：</p> <pre><code class="language-php">average = ( idata.data[pos] + idata.data[pos + 1] + idata.data[pos + 2] ) / 3 </code></pre> <p>现在<code>average</code>包含了平均颜色值（通过将所有像素值相加并除以 3 获得），这个值被写回到像素的所有颜色中，但红色增加了值<code>50</code>，蓝色减少了相同数量：</p> <pre><code class="language-php">idata.data[pos] = average + 50 idata.data[pos + 1] = average idata.data[pos + 2] = average - 50 </code></pre> <p>结果是增加每个像素的红色值并减少蓝色值（否则这些颜色只需写回平均值将成为单色图像），从而赋予它棕色色调。</p> <h2 id="放置图像数据方法">放置图像数据方法</h2> <p>当你修改了图像数据数组以满足你的要求后，只需像前面的示例中显示的那样调用<code>putImageData</code>方法，传递<code>idata</code>对象和应该出现的左上角的坐标即可将其写入画布。之前显示的调用将修改后的图像副本放置在原始图像的右侧：</p> <pre><code class="language-php">context.putImageData(idata, 320, 0) </code></pre> <h6 id="注意-160">注意</h6> <p>如果你只想修改画布的一部分，你无需获取整个画布；只需获取包含你感兴趣区域的部分。你也不需要将图像数据写回到原来获取它的位置；图像数据可以写入画布的任何部分。</p> <h2 id="创建图像数据方法">创建图像数据方法</h2> <p>你不必直接从画布创建对象；你也可以通过调用<code>createImageData</code>方法创建一个新的对象，并使用空白数据。以下示例创建一个宽度为 320 像素、高度为 240 像素的对象：</p> <pre><code class="language-php">idata = createImageData(320, 240) </code></pre> <p>或者，你可以像这样从现有对象创建一个新对象：</p> <pre><code class="language-php">newimagedataobject = createImageData(imagedata) </code></pre> <p>然后由您决定如何向这些对象添加像素数据或以其他方式修改它们，如何将它们粘贴到画布上或从它们创建其他对象，等等。</p> <h1 id="高级图形效果">高级图形效果</h1> <p>在 HTML5 画布上的更高级功能之一是能够分配各种合成和透明效果，以及应用强大的转换，如缩放、拉伸和旋转。</p> <h2 id="全局合成操作属性">全局合成操作属性</h2> <p>有 12 种不同的方法可用于精细调整如何在画布上放置对象，考虑到现有和未来的对象。这些称为<em>合成</em>选项，并且它们的应用方式如下：</p> <pre><code class="language-php">context.globalCompositeOperationProperty = 'source-over' </code></pre> <p>合成类型如下：</p> <p><dfn class="keep-together"><code>source-over</code></dfn></p> <p>默认。源图像被复制到目标图像上。</p> <p><dfn class="keep-together"><code>source-in</code></dfn></p> <p>只显示出现在目标内的源图像部分，并移除目标图像。源图像的任何 alpha 透明度会导致其下的目标被移除。</p> <p><dfn class="keep-together"><code>source-out</code></dfn></p> <p>只显示未出现在目标内的源图像部分，并移除目标图像。源图像的任何 alpha 透明度会导致其下的目标被移除。</p> <p><dfn class="keep-together"><code>source-atop</code></dfn></p> <p>源图像在覆盖目标的地方显示。目标图像在目标不透明且源图像透明时显示。其他区域为透明。</p> <p><dfn class="keep-together"><code>destination-over</code></dfn></p> <p>源图像在目标图像下绘制。</p> <p><dfn class="keep-together"><code>destination-in</code></dfn></p> <p>在源和目标图像重叠但源图像透明部分不在的区域显示目标图像。源图像不显示。</p> <p><dfn class="keep-together"><code>destination-out</code></dfn></p> <p>只显示目标中在源图像非透明部分之外的部分。源图像不显示。</p> <p><dfn class="keep-together"><code>destination-atop</code></dfn></p> <p>源图像显示在目标未显示的位置。目标和源重叠的地方，显示目标图像。源图像的任何透明部分防止目标图像的该区域显示。</p> <p><dfn class="keep-together"><code>lighter</code></dfn></p> <p>应用源和目标的总和，以便它们不重叠的地方正常显示；它们重叠的地方，显示两者的总和但变亮。</p> <p><dfn class="keep-together"><code>darker</code></dfn></p> <p>应用源和目标的总和，以便它们不重叠的地方正常显示；它们重叠的地方，显示两者的总和但变暗。</p> <p><dfn class="keep-together"><code>copy</code></dfn></p> <p>源图像复制到目标上。源的任何透明区域会导致它所覆盖的目标不显示。</p> <p><dfn class="keep-together"><code>xor</code></dfn></p> <p>当源和目标图像不重叠时，它们显示为正常。它们重叠的区域，它们的颜色值进行异或运算。</p> <p>示例 26-23 通过创建 12 个不同的画布来展示所有这些合成类型的效果，每个画布上都有两个对象（一个填充的圆和阴阳图像），它们彼此偏移但有重叠。</p> <h5 id="示例-26-23-使用所有-12-种合成效果">示例 26-23. 使用所有 12 种合成效果</h5> <pre><code class="language-php">image = new Image() image.src = 'image.png' image.onload = function() { types = [ 'source-over', 'source-in', 'source-out', 'source-atop', 'destination-over', 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'darker', 'copy', 'xor' ] for (j = 0 ; j < 12 ; ++j) { canvas = O('c' + (j + 1)) context = canvas.getContext('2d') S(canvas).background = 'lightblue' context.fillStyle = 'red' context.arc(50, 50, 50, 0, Math.PI * 2, false) context.fill() context.globalCompositeOperation = types[j] context.drawImage(image, 20, 20, 100, 100) } } </code></pre> <h6 id="注意-161">注意</h6> <p>与本章的其他一些示例类似，此示例（可从配套网站下载）包含一些 HTML 和/或 CSS 来增强显示效果，这里未显示因为它对程序的运行不是必需的。</p> <p>此程序使用 <code>for</code> 循环来迭代存储在数组 <code>types</code> 中的每种合成类型。每次循环时，在先前某些 HTML（未显示）中已经创建的 12 个画布元素上创建一个新的上下文，它们的 ID 分别为 <code>c1</code> 到 <code>c12</code>。</p> <p>在每个画布上，首先放置一个直径为 100 像素的红色圆在左上角，然后选择合成类型并将阴阳图像放置在圆上，但向右和向下偏移 20 像素。图 26-22 显示了每种类型的效果。正如你所见，可以实现多种效果。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2622.png" alt="12 种合成效果示例" loading="lazy"></p> <h6 id="图26-22-12-种合成效果示例">图 26-22. 12 种合成效果示例</h6> <h2 id="globalalpha-属性">globalAlpha 属性</h2> <p>在画布上绘图时，可以使用 <code>globalAlpha</code> 属性指定要应用的透明度，支持从 <code>0</code>（完全透明）到 <code>1</code>（完全不透明）的值。以下命令将 alpha 设置为 <code>0.9</code>，使得未来的绘图操作将是 90% 不透明（或 10% 透明）：</p> <pre><code class="language-php">context.globalAlpha = 0.9 </code></pre> <p>此属性可与所有其他属性一起使用，包括合成选项。</p> <h1 id="变换-1">变换</h1> <p>在将元素绘制到 HTML5 画布时，画布支持四个函数来应用变换：<code>scale</code>、<code>rotate</code>、<code>translate</code> 和 <code>transform</code>。它们可以单独或一起使用，产生更加有趣的效果。</p> <h2 id="缩放方法">缩放方法</h2> <p>你可以通过首先调用 <code>scale</code> 方法来缩放未来的绘图操作。该方法接受水平和垂直缩放因子，可以为负、零或正。</p> <p>在示例 26-24 中，阴阳图像以其原始尺寸 100 × 100 像素绘制到画布上。然后水平放大三倍和垂直放大两倍，再次调用<code>drawImage</code>函数将伸展的图像放置在原始图像旁边。最后，使用值为<code>0.33</code>和<code>0.5</code>再次应用缩放来恢复一切正常，并且再次绘制图像，这次是在原始图像下方。图 26-23 显示了结果。</p> <h5 id="示例-26-24-放大和缩小尺寸">示例 26-24. 放大和缩小尺寸</h5> <pre><code class="language-php">context.drawImage(myimage, 0, 0) context.scale(3, 2) context.drawImage(myimage, 40, 0) context.scale(.33, .5) context.drawImage(myimage, 0, 100) </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2623.png" alt="将图像放大然后再次缩小" loading="lazy"></p> <h6 id="图-26-23-将图像放大然后再次缩小">图 26-23. 将图像放大然后再次缩小</h6> <p>仔细观察，你会发现原图下方的复制图像由于放大和再次缩小而变得稍微模糊了一点。</p> <p>通过使用一个或多个缩放参数的负值，你可以在水平或垂直方向（或两者）中反转一个元素，同时（或代替）缩放。例如，以下代码翻转上下文以创建镜像图像：</p> <pre><code class="language-php">context.scale(-1, 1) </code></pre> <h2 id="save和restore方法"><code>save</code>和<code>restore</code>方法</h2> <p>如果你需要对不同绘图元素进行多次缩放操作，不仅可能会使结果变得模糊，而且计算起来也会非常耗时，例如，三倍放大后再缩小需要<code>0.33</code>的值来还原（而两倍放大则需要<code>0.5</code>的值来逆转）。</p> <p>因此，你可以在发出<code>scale</code>调用之前调用<code>save</code>保存当前上下文，并在稍后通过<code>restore</code>调用将缩放恢复到正常。查看下面的示例，可以替换示例 26-24 中的代码：</p> <pre><code class="language-php">context.drawImage(myimage, 0, 0) `context``.``save``(``)` context.scale(3, 2) context.drawImage(myimage, 40, 0) `context``.``restore``(``)` context.drawImage(myimage, 0, 100) </code></pre> <p><code>save</code>和<code>restore</code>方法非常强大，因为它们不仅适用于图像缩放，实际上它们适用于以下所有属性，并且因此可以随时用于保存当前属性，然后稍后恢复它们：<code>fillStyle</code>、<code>font</code>、<code>globalAlpha</code>、<code>globalCompositeOperation</code>、<code>lineCap</code>、<code>lineJoin</code>、<code>lineWidth</code>、<code>miterLimit</code>、<code>shadowBlur</code>、<code>shadowColor</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>、<code>strokeStyle</code>、<code>textAlign</code>和<code>textBaseline</code>。所有四个转换方法的属性也由<code>save</code>和<code>restore</code>管理：<code>scale</code>、<code>rotate</code>、<code>translate</code>和<code>transform</code>。</p> <h2 id="旋转方法">旋转方法</h2> <p>使用<code>rotate</code>方法，你可以选择应用对象（或任何绘图方法）到画布的角度。角度用弧度指定，与 180 / π相同，约为 57 度。</p> <p>旋转发生在画布原点周围，默认情况下是左上角（但很快你会看到，这可以更改）。示例 26-25 展示了四次显示阴阳图像，每个连续的图像旋转<code>Math.PI</code> / <code>25</code>弧度。</p> <h5 id="示例-26-25-旋转图像">示例 26-25. 旋转图像</h5> <pre><code class="language-php">for (j = 0 ; j < 4 ; ++j) { context.drawImage(myimage, 20 + j * 120 , 20) context.rotate(Math.PI / 25) } </code></pre> <p>如你所见，在图 26-24 中，结果可能并非你所期望的，因为图像并未围绕自身旋转。相反，旋转发生在画布原点（位置为（0, 0））。更重要的是，每次新的旋转都累加了前一个旋转。但是，为了纠正这些问题，你可以始终使用<code>translate</code>方法与<code>save</code>和<code>restore</code>方法结合使用。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2624.png" alt="四种不同旋转角度的图像" loading="lazy"></p> <h6 id="图-26-24-四种不同旋转角度的图像">图 26-24. 四种不同旋转角度的图像</h6> <h6 id="注意-162">注意</h6> <p>弧度是一个合理的度量单位，因为一个完整圆有 π × 2 弧度。因此，π 弧度是半圆，π ÷ 2 弧度是一个四分之一圆，π ÷ 2 × 3（或 π × 1.5）弧度是三分之三圆，等等。为了避免记住 π 的值，你可以随时参考<code>Math.PI</code>中的值。</p> <h2 id="translate-方法">translate 方法</h2> <p>要改变旋转的原点，你可以调用<code>translate</code>方法将其移动到其他位置。目标位置可以在画布内（或外）的任何地方。通常，你会指定对象目标位置内的某个点（通常是其中心）。</p> <p>示例 26-26 在每次调用<code>rotate</code>之前执行此转换，现在产生了可能由前面示例意图的效果。此外，在每次操作之前和之后调用<code>save</code>和<code>restore</code>方法，确保每次旋转都是独立应用的，而不是在上一个旋转的基础上累加的。</p> <h5 id="示例-26-26-在原地旋转对象">示例 26-26. 在原地旋转对象</h5> <pre><code class="language-php">w = myimage.width h = myimage.height for (j = 0 ; j < 4 ; ++j) { context.save() context.translate(20 + w / 2 + j * (w + 20), 20 + h / 2) context.rotate(Math.PI / 5 * j) context.drawImage(myimage, -(w / 2), -(h / 2)) context.restore() } </code></pre> <p>在这个例子中，在每次旋转之前，上下文被保存，并且原点被转换到每个图像将被绘制的确切中心点。然后我们发出旋转指令，并通过提供负值将图像绘制到新原点的左上方，使其中心与原点匹配。其结果显示在图 26-25 中。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2625.png" alt="旋转图像" loading="lazy"></p> <h6 id="图-26-25-在原地旋转图像">图 26-25. 在原地旋转图像</h6> <p>总结一下：当你希望在原地旋转或变换（接下来描述）一个对象时，你应该执行以下操作：</p> <ol> <li> <p>保存上下文。</p> </li> <li> <p>将画布原点转换为要放置对象的中心。</p> </li> <li> <p>发出旋转或变换指令。</p> </li> <li> <p>使用任何支持的绘图方法绘制对象，使用负的目标位置点宽度的一半向左和高度的一半向上绘制。</p> </li> <li> <p>恢复上下文以恢复原点。</p> </li> </ol> <h2 id="transform-方法">transform 方法</h2> <p>当你已经尝试过所有其他画布功能，但仍无法以你需要的方式操纵对象时，就该使用<code>transform</code>方法了。使用它，你可以在画布上绘制的对象应用变换矩阵，给你提供多种可能性和强大的功能，可以在单个指令中结合缩放和旋转。</p> <p>该方法使用的转换矩阵是一个 3 × 3 矩阵，具有 9 个值，但只有 6 个是外部提供给<code>transform</code>方法的。因此，与其解释这个矩阵乘法是如何工作的，我只需要解释其六个参数的效果，依次是（顺序可能有点反直觉）：</p> <ol> <li> <p>水平缩放</p> </li> <li> <p>水平斜切</p> </li> <li> <p>垂直斜切</p> </li> <li> <p>垂直缩放</p> </li> <li> <p>水平平移</p> </li> <li> <p>垂直平移</p> </li> </ol> <p>你可以通过多种方式应用这些值，例如，通过模仿示例 26-24 中的<code>scale</code>方法来替换这个调用：</p> <pre><code class="language-php">context.scale(3, 2) </code></pre> <p>以下是：</p> <pre><code class="language-php">context.transform(`3`, 0, 0, `2`, 0, 0) </code></pre> <p>同样，你可以用示例 26-26 中的这个调用替换它：</p> <pre><code class="language-php">context.translate(20 + w / 2 + j * (w + 20), 20 + h / 2) </code></pre> <p>以下是：</p> <pre><code class="language-php">context.transform(1, 0, 0, 1, `20` `+` `w` `/` `2` `+` `j` `*` `(``w` `+` `20``)`, `20` `+` `h` `/` `2`) </code></pre> <h6 id="注意-163">注意</h6> <p>请注意，水平和垂直缩放参数被赋予值<code>1</code>，以确保 1:1 的结果，而斜切值为<code>0</code>，以防止结果被斜切。</p> <p>你甚至可以结合前两行代码一起进行翻译和同时缩放，就像这样：</p> <pre><code class="language-php">context.transform(`3`, 0, 0, `2`, `20` `+` `w` `/` `2` `+` `j` `*` `(``w` `+` `20``)`, `20` `+` `h` `/` `2`) </code></pre> <p>正如你所预料的，斜切参数会将元素按指定方向倾斜，例如，从正方形创建一个菱形。</p> <p>作为斜切的另一个例子，示例 26-27 在画布上绘制阴阳图像，然后用<code>transform</code>方法创建一个斜切副本。斜切值可以是任何负数、零或正数，但我选择了水平值为<code>1</code>，这使得图像底部向右斜切了一个图像宽度，并按比例拉动了其他部分（见图 26-26）。</p> <h5 id="示例-26-27-创建一个原始和斜切的图像">示例 26-27. 创建一个原始和斜切的图像</h5> <pre><code class="language-php">context.drawImage(myimage, 20, 20) context.transform(1, 0, `1`, 1, 0, 0) context.drawImage(myimage, 140, 20) </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2626.png" alt="将对象水平向右斜切" loading="lazy"></p> <h6 id="图-26-26-将对象水平向右倾斜">图 26-26. 将对象水平向右倾斜</h6> <h6 id="注意-164">注意</h6> <p>你甚至可以通过提供一个负值和一个相反的正斜切值来用<code>transform</code>旋转一个对象。但要注意：这样做会修改元素的大小，因此你还需要同时调整比例参数。另外，你需要记住平移原点。因此，我建议在完全熟练使用<code>transform</code>之前，坚持使用<code>rotate</code>方法。</p> <h2 id="settransform-方法">setTransform 方法</h2> <p>作为使用<code>save</code>和<code>restore</code>方法的替代方案，你可以设置绝对变换，这将重置变换矩阵，然后应用提供的值。像这样使用<code>setTransform</code>方法（它应用了一个水平正斜切值为<code>1</code>的例子）：</p> <pre><code class="language-php">context.setTransform(1, 0, `1`, 1, 0, 0) </code></pre> <h6 id="注意-165">注意</h6> <p>要了解更多关于变换矩阵的信息，请参阅<a href="https://tinyurl.com/transform-matrix" target="_blank">Wikipedia 文章</a>。</p> <p>HTML5 画布是网页开发者制作更大、更好、更专业和更引人入胜网站的重要资产。在接下来的章节中，我们将看看另外两个伟大的 HTML5 功能：无需插件的浏览器内音频和视频。</p> <h1 id="问题-25">问题</h1> <ol> <li> <p>如何在 HTML 中创建一个画布元素？</p> </li> <li> <p>如何让 JavaScript 访问画布元素？</p> </li> <li> <p>如何开始和结束创建画布路径？</p> </li> <li> <p>你可以使用什么方法将画布中的数据提取成图像？</p> </li> <li> <p>如何创建包含超过两种颜色的渐变填充？</p> </li> <li> <p>在绘图时如何调整线条的宽度？</p> </li> <li> <p>你会使用哪种方法来指定画布的一个部分，以便未来的绘图只发生在那个区域内？</p> </li> <li> <p>如何用两个虚拟吸引子绘制复杂曲线？</p> </li> <li> <p><code>getImageData</code> 方法每像素返回多少个数据项？</p> </li> <li> <p><code>transform</code> 方法的哪两个参数用于缩放操作？</p> </li> </ol> <p>查看“第二十六章答案”，在附录 A 中找到这些问题的答案。</p> <h1 id="第二十七章html5-音频与视频">第二十七章：HTML5 音频与视频</h1> <p>互联网增长的最大驱动力之一是用户对音频和视频形式的多媒体需求无止境的追求。最初，带宽非常宝贵，几乎没有实时流媒体的概念，下载音频轨道甚至视频可能需要几分钟甚至几小时。</p> <p>带宽的高昂成本和快速调制解调器的有限可用性推动了更快速、更有效率的压缩算法的发展，例如 MP3 音频和 MPEG 视频，但即使是那时，以合理的时间下载文件的唯一方法也是大幅降低它们的质量。</p> <p>我早期的一个互联网项目是 1997 年英国的第一个由音乐管理机构授权的在线广播电台。实际上，它更像是一个播客（在这个术语被创造出来之前），因为我们每天制作一个半小时的节目，然后使用最初为电话系统开发的算法将其压缩到 8 位、11 千赫单声道，听起来像电话质量，甚至更差。尽管如此，我们迅速获得了成千上万的听众，他们会下载节目，并在弹出的浏览器窗口中使用插件的方式收听其中讨论的网站。</p> <p>幸运的是，对于我们和所有发布多媒体内容的人来说，很快就能提供更高的音频和视频质量，但仍需用户下载并安装插件播放器。Flash 成为这些播放器中最受欢迎的，击败了竞争对手如 RealAudio，但由于经常导致浏览器崩溃并要求用户不断升级新版本，它声名狼藉。</p> <p>因此，普遍认为前进的道路是制定一些支持在浏览器中直接处理多媒体的 web 标准。当然，像微软和谷歌这样的浏览器开发者对这些标准的看法不同，但是当风尘定息时，他们已经同意了所有浏览器应该原生播放的文件类型的一个子集，并将其引入了 HTML5 规范。</p> <p>最后，只要你把音频和视频编码成几种不同格式，就可以将多媒体上传到 web 服务器，在网页中加入一些 HTML 标签，然后在任何主流桌面浏览器、智能手机或平板设备上播放媒体，用户无需下载插件或做任何其他更改。</p> <h1 id="关于编解码器">关于编解码器</h1> <p>术语<em>编解码器</em>代表编码器/<em>解码器</em>。它描述了软件提供的编解码音频和视频等媒体的功能。在 HTML5 中，根据所使用的浏览器，有多组不同的编解码器可用。</p> <p>与图形和其他传统网页内容不太相关的音频和视频方面的一个复杂情况是格式和编解码器的许可问题。许多格式和编解码器需付费使用，因为它们是由单个公司或公司联盟开发并选择了专有许可证。一些免费和开源的浏览器由于难以支付费用或者开发者基于原则反对专有许可证，因此不支持最流行的格式和编解码器。由于版权法在不同国家有所不同，并且许可证的执行较难，这些编解码器通常可以在网络上免费获取，但在您所在地可能在技术上是非法使用的。</p> <p>以下是 HTML5 <code><audio></code>标签支持的编解码器（也适用于附加到 HTML5 视频的音频）：</p> <p><dfn class="keep-together">AAC</dfn></p> <p>这种音频编解码器是专有的专利技术，通常使用<em>.aac</em>文件扩展名，称为高级音频编码。其 MIME 类型为<code>audio/aac</code>。</p> <p><dfn class="keep-together">FLAC</dfn></p> <p>这种音频编解码器是由 Xiph.Org 基金会开发的自由无损音频编解码器，使用<em>.flac</em>扩展名，其 MIME 类型为<code>audio/flac</code>。</p> <p><dfn class="keep-together">MP3</dfn></p> <p>这种音频编解码器称为 MPEG 音频层 3，已经存在多年。尽管这个术语经常（错误地）用来指代任何类型的数字音频，但它是一种专有的专利技术，使用<em>.mp3</em>扩展名。其 MIME 类型为<code>audio/mpeg</code>。</p> <p><dfn class="keep-together">PCM</dfn></p> <p>这种音频编解码器称为脉冲编码调制，存储由模拟到数字转换器编码的完整数据，是音频 CD 上数据存储的格式。因为它不使用压缩，被称为<em>无损</em>编解码器，其文件通常比 AAC 或 MP3 文件大得多。通常使用<em>.wav</em>扩展名。其 MIME 类型为<code>audio/wav</code>，但也可能看到<code>audio/wave</code>。</p> <p><dfn class="keep-together">Vorbis</dfn></p> <p>有时被称为 Ogg Vorbis，因为通常使用<em>.ogg</em>文件扩展名，这种音频编解码器没有专利限制，无需版税。其 MIME 类型为<code>audio/ogg</code>，或者 WebM 容器使用<code>audio/webm</code>。</p> <p>截至 2021 年中期，AAC、MP3、PCM 和 Vorbis 通常受到大多数操作系统和浏览器的支持（不包括微软已停止支持的 Internet Explorer），除了以下与 Safari 相关的异常情况：</p> <p>Vorbis <code>audio/ogg</code></p> <p>MacOS 10.11 及更早版本的 Safari 需要 Xiph Quicktime。</p> <p>Vorbis <code>audio/webm</code></p> <p>不支持 Safari。</p> <p>FLAC <code>audio/ogg</code></p> <p>不支持 Safari（尽管<code>audio/flac</code>支持）。</p> <p>因此，除非您真的有理由使用 Vorbis，否则现在通常安全地仅使用 AAC 或 MP3 进行压缩有损音频，FLAC 进行压缩无损音频，或 PCM 进行未压缩音频。</p> <h1 id="元素"><audio>元素</h1> <p>为了适应各种平台，您可以使用多种编解码器记录或转换内容，然后在 <code><audio></code> 和 <code></audio></code> 标签内列出它们，例如 示例 27-1。嵌套的 <code><source></code> 标签包含您希望向浏览器提供的各种媒体。由于提供了 <code>controls</code> 属性，结果看起来像 图 27-1。</p> <h5 id="示例-27-1-嵌入三种不同类型的音频文件">示例 27-1. 嵌入三种不同类型的音频文件</h5> <pre><code class="language-php"><audio controls> <source src='audio.m4a' type='audio/aac'> <source src='audio.mp3' type='audio/mp3'> <source src='audio.ogg' type='audio/ogg'> </audio> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2701.png" alt="播放音频文件" loading="lazy"></p> <h6 id="图-27-1-播放音频文件">图 27-1. 播放音频文件</h6> <p>在此示例中，我包含了三种不同的音频类型，因为这是完全可以接受的，如果您希望确保每个浏览器都能找到其首选格式而不仅仅是了解如何处理的一个格式。但是，您可以放弃 MP3 或 AAC 文件中的任何一个（但不能同时放弃），仍然可以确保示例在所有平台上播放。</p> <p><code><audio></code> 元素及其伴侣 <code><source></code> 标签支持多个属性：</p> <p><dfn class="keep-together"><code>autoplay</code></dfn></p> <p>导致音频在准备就绪后立即开始播放</p> <p><dfn class="keep-together"><code>controls</code></dfn></p> <p>导致显示控制面板</p> <p><dfn class="keep-together"><code>loop</code></dfn></p> <p>设置音频循环播放</p> <p><dfn class="keep-together"><code>preload</code></dfn></p> <p>导致音频在用户选择播放前即开始加载</p> <p><dfn class="keep-together"><code>src</code></dfn></p> <p>指定音频文件的源位置</p> <p><dfn class="keep-together"><code>type</code></dfn></p> <p>指定创建音频时使用的编解码器</p> <p>如果您不向 <code><audio></code> 标签提供 <code>controls</code> 属性，并且也不使用 <code>autoplay</code> 属性，声音将不会播放，用户也无法点击播放按钮开始播放。这将使您不得不像 示例 27-2 中所示的那样，在 JavaScript 中提供此功能（需要额外的加粗显示的代码），以提供播放和暂停音频的功能，如 图 27-2 所示。</p> <h5 id="示例-27-2-使用-javascript-播放音频">示例 27-2. 使用 JavaScript 播放音频</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Playing Audio with JavaScript</title> `<script` `src=``'OSC.js'``>``</script>` </head> <body> <audio `id=``'myaudio'`> <source src='audio.m4a' type='audio/aac'> <source src='audio.mp3' type='audio/mp3'> <source src='audio.ogg' type='audio/ogg'> </audio> `<button` `onclick=``'playaudio()'``>``Play Audio``</button>` `<button` `onclick=``'pauseaudio()'``>``Pause Audio``</button>` `<script``>` `function` `playaudio``(``)` `{` `O``(``'myaudio'``)``.``play``(``)` `}` `function` `pauseaudio``(``)` `{` `O``(``'myaudio'``)``.``pause``(``)` `}` </script> </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2702.png" alt="HTML5 音频可以通过 JavaScript 进行控制" loading="lazy"></p> <h6 id="图-27-2-html5-音频可以通过-javascript-进行控制">图 27-2. HTML5 音频可以通过 JavaScript 进行控制</h6> <p>当用户点击按钮时，通过调用 <code>myaudio</code> 元素的 <code>play</code> 或 <code>pause</code> 方法来实现。</p> <h1 id="video-元素"><code><video></code> 元素</h1> <p>在 HTML5 中播放视频与音频非常类似；您只需使用 <code><video></code> 标签并为您提供的媒体提供 <code><source></code> 元素即可。 示例 27-3 展示了如何使用三种不同的视频编解码器类型执行此操作，如 图 27-3 所示。</p> <h5 id="示例-27-3-播放-html5-视频">示例 27-3. 播放 HTML5 视频</h5> <pre><code class="language-php"><video width='560' height='320' controls> <source src='movie.mp4' type='video/mp4'> <source src='movie.webm' type='video/webm'> <source src='movie.ogv' type='video/ogg'> </video> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2703.png" alt="" loading="lazy"></p> <h6 id="图-27-3-播放-html5-视频">图 27-3. 播放 HTML5 视频</h6> <h2 id="视频编解码器">视频编解码器</h2> <p>与音频类似，多种视频编解码器可供选择，但不同浏览器的支持程度不同。这些编解码器有不同的容器格式，如下所示：</p> <p><dfn class="keep-together">MP4</dfn></p> <p>作为 MPEG-4 标准的一部分指定的许可受限、多媒体容器格式。其 MIME 类型为 <code>video/mp4</code>。</p> <p><dfn class="keep-together">Ogg</dfn></p> <p>由 Xiph.Org Foundation 维护的免费开放容器格式。Ogg 格式的创建者表示其不受软件专利的限制。其 MIME 类型为 <code>video/ogg</code>。</p> <p><dfn class="keep-together">WebM</dfn></p> <p>一种为 HTML5 视频设计的免版税、开放视频压缩格式。其 MIME 类型为 <code>video/webm</code>。</p> <p>这些可能包含以下视频编解码器之一：</p> <p><dfn class="keep-together">H.264 & H.265</dfn></p> <p>对最终用户免费播放专利、专有视频编解码器，但对编码和传输过程的所有部分可能会产生版税费用。H.265 在相同质量输出下支持几乎双倍的压缩比 H.264。</p> <p><dfn class="keep-together">Theora</dfn></p> <p>一种视频编解码器，不受专利的限制且在编码、传输和播放各个层面都不需要版税支付。</p> <p><dfn class="keep-together">VP8</dfn></p> <p>类似于 Theora 的视频编解码器，由谷歌拥有，并作为开源发布，因此免费使用。</p> <p><dfn class="keep-together">VP9</dfn></p> <p>与 VP8 类似但更强大，使用一半的比特率。</p> <p>现在你可以确信几乎所有的现代浏览器都支持这些，但有例外，Theora <code>video/ogg</code> 不支持 iOS，而 macOS 早期版本需要 Xiph QuickTime。</p> <p>因此，如果 iOS 是你的目标平台之一（通常是这样），你可能希望避开使用 Ogg，而可以在所有平台上安全地依赖 MP4 或 WebM，并暂时忘记其他格式。然而，在 Example 27-3 中，我展示了如果你愿意，可以添加所有三种主要视频类型，因为浏览器将选择它偏爱的格式。</p> <p><code><video></code> 元素和相应的 <code><source></code> 标签支持以下属性：</p> <p><dfn class="keep-together"><code>autoplay</code></dfn></p> <p>导致视频在准备就绪后立即开始播放</p> <p><dfn class="keep-together"><code>controls</code></dfn></p> <p>导致显示控制面板</p> <p><dfn class="keep-together"><code>height</code></dfn></p> <p>指定视频显示的高度</p> <p><dfn class="keep-together"><code>loop</code></dfn></p> <p>设置视频循环播放</p> <p><dfn class="keep-together"><code>muted</code></dfn></p> <p>静音音频输出</p> <p><dfn class="keep-together"><code>poster</code></dfn></p> <p>允许您选择一个图像，在视频播放时显示</p> <p><dfn class="keep-together"><code>preload</code></dfn></p> <p>导致视频在用户选择播放之前开始加载</p> <p><dfn class="keep-together"><code>src</code></dfn></p> <p>指定视频文件的源位置</p> <p><dfn class="keep-together"><code>type</code></dfn></p> <p>指定创建视频时使用的编解码器</p> <p><dfn class="keep-together"><code>width</code></dfn></p> <p>指定视频显示的宽度</p> <p>如果您希望从 JavaScript 控制视频播放，可以使用如 示例 27-4 中所示的代码（需要额外的代码部分用粗体标出），其结果显示在 图 27-4 中。</p> <h5 id="示例-27-4-从-javascript-控制视频播放">示例 27-4. 从 JavaScript 控制视频播放</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Playing Video with JavaScript</title> `<script` `src=``'OSC.js'``>``</script>` </head> <body> <video `id=``'myvideo'` width='560' height='320'> <source src='movie.mp4' type='video/mp4'> <source src='movie.webm' type='video/webm'> <source src='movie.ogv' type='video/ogg'> </video><br> `<button` `onclick=``'playvideo()'``>``Play Video``</button>` `<button` `onclick=``'pausevideo()'``>``Pause Video``</button>` `<script``>` `function` `playvideo``(``)` `{` `O``(``'myvideo'``)``.``play``(``)` `}` `function` `pausevideo``(``)` `{` `O``(``'myvideo'``)``.``pause``(``)` `}` </script> </body> </html> </code></pre> <p>此代码与从 JavaScript 控制音频的方式非常相似。只需调用 <code>myvideo</code> 对象的 <code>play</code> 和/或 <code>pause</code> 方法即可播放和暂停视频。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2704.png" alt="" loading="lazy"></p> <h6 id="图-27-4-javascript-正在用于控制视频">图 27-4. JavaScript 正在用于控制视频</h6> <p>使用本章中的信息，您将能够在几乎所有浏览器和平台上嵌入任何您喜欢的音频和视频，而不用担心用户是否能够播放。</p> <p>在接下来的章节中，我将演示许多其他 HTML5 功能的使用，包括地理位置和本地存储。</p> <h1 id="问题-26">问题</h1> <ol> <li> <p>用于将音频和视频插入到 HTML5 文档中的两个 HTML 元素标签是哪两个？</p> </li> <li> <p>为了确保在所有主要平台上能够播放，您应该提供哪两种压缩的有损音频编解码器（或在其中选择）？</p> </li> <li> <p>要调用哪些方法来播放和暂停 HTML5 媒体播放？</p> </li> <li> <p>FLAC 是哪种格式类型？</p> </li> <li> <p>为了确保在所有主要平台上能够播放，您应该选择哪两种视频编解码器（或在其中选择）？</p> </li> </ol> <p>查看 “第二十七章答案” 中有关这些问题的答案。</p> <h1 id="第二十八章其他-html5-功能">第二十八章：其他 HTML5 功能</h1> <p>在 HTML5 的最后一章中，我将解释如何使用地理位置和本地存储，并演示如何在浏览器中进行拖放操作，以及如何设置和使用 Web Workers 并利用跨文档消息传递。</p> <p>严格来说，大多数这些特性（如 HTML5 的大部分）实际上并不是 HTML 的扩展，因为您是通过 JavaScript 而不是 HTML 标记访问它们。它们只是被浏览器开发人员采纳并被赋予便捷的 HTML5 统称。</p> <p>这意味着，您需要彻底理解本书中的 JavaScript 教程，才能正确使用它们。话虽如此，一旦掌握了它们，您会想知道在没有这些强大新功能之前，您是如何生活的。</p> <h1 id="地理位置和-gps-服务">地理位置和 GPS 服务</h1> <p>全球定位系统（GPS）服务由多颗围绕地球轨道的卫星组成，它们的位置非常精确。当启用 GPS 的设备连接到这些卫星时，来自各个卫星的信号到达时间的不同，使得设备能够相当精确地确定自己的位置；因为光速（因而是无线电波）是已知的恒定值，信号从卫星到 GPS 设备的传输时间表明卫星的距离。</p> <p>通过记录来自不同卫星的信号到达时间，这些卫星在任何时候的轨道位置都已精确确定，一个简单的三角测量计算就能让设备相对于卫星的位置精确到几米甚至更少。</p> <p>许多移动设备，如手机和平板电脑，配备有 GPS 芯片并能提供此信息。但有些设备没有，有些设备已关闭，还有些设备可能在室内使用，被屏蔽了 GPS 卫星信号，因此无法接收任何信号。在这些情况下，可能会使用其他技术来尝试确定设备的位置。</p> <h6 id="警告-33">警告</h6> <p>我还要提醒您考虑地理位置信息的隐私影响，特别是如果坐标作为应用程序功能的一部分传输回服务器时。任何具有地理位置功能的应用程序都应有明确的隐私政策。哦，顺便说一句，技术上地理位置信息实际上并不在 HTML5 标准中。事实上，它是由 W3C/WHATWG 定义的独立功能，但大多数人将其视为 HTML5 的一部分。</p> <h1 id="其他定位方法">其他定位方法</h1> <p>如果您的设备具有手机硬件但没有 GPS 芯片，它可以尝试通过检查从各种通信塔接收到的信号的时序来三角测量其位置（这些塔可以通信，并且它们的位置非常精确）。如果有几座塔，这几乎可以达到 GPS 定位的精度。但如果只有一座塔，信号强度可以用来确定围绕塔周围的粗略半径，形成的圆表示您可能位于的区域。这可能会将您的位置定位在离实际位置一英里或两英里的范围内，甚至到几十米内。</p> <p>如果那样还失败了，可能会有 WiFi 接入点的位置在您设备的范围内是已知的，由于所有接入点都有称为媒体访问控制（MAC）地址的唯一标识地址，可以得到您位置的一个合理良好的近似值，也许可以缩小到一两条街道。这就是 Google 街景车辆一直在收集的信息类型（其中一些信息由于可能侵犯数据隐私权而被要求丢弃）。</p> <p>如果这些方法都失败了，您可以查询并使用您的设备使用的 Internet Protocol（IP）地址作为粗略位置指示器。但通常情况下，这只能提供您的互联网提供商拥有的一个主要交换机的位置，该位置可能有数十甚至数百英里之遥。但至少，您的 IP 地址（通常）可以缩小您所在国家的范围，有时甚至可以缩小到您所在地区。</p> <h6 id="注意-166">注意</h6> <p>媒体公司通常使用 IP 地址来限制其内容的播放地域。但是，可以简单地设置使用转发 IP 地址的代理服务器（位于阻止外部访问的领土内），直接将内容通过封锁传递到“外国”浏览器。代理服务器也经常用于伪装用户的真实 IP 地址或绕过审查限制，并可以在 WiFi 热点上共享给许多用户使用。因此，如果通过 IP 地址定位某人，您不能完全确定已经准确识别了正确的位置，甚至国家，应将此信息视为仅作最佳猜测。</p> <h1 id="地理位置和-html5">地理位置和 HTML5</h1> <p>在第二十五章中，我简要介绍了 HTML5 地理位置。现在是时候深入了解它，再次显示在示例 28-1 中。</p> <h5 id="示例-28-1-显示您当前位置的地图">示例 28-1. 显示您当前位置的地图</h5> <pre><code class="language-php"><!DOCTYPE html> <html>   <head>     <title>Geolocation Example</title>   </head>   <body>     <script>       if (typeof navigator.geolocation == 'undefined')          alert("Geolocation not supported.")       else         navigator.geolocation.getCurrentPosition(granted, denied)       function granted(position)       {         var lat = position.coords.latitude         var lon = position.coords.longitude         alert("Permission Granted. You are at location:\n\n"           + lat + ", " + lon +           "\n\nClick 'OK' to load Google Maps with your location")         window.location.replace("https://www.google.com/maps/@"           + lat + "," + lon + ",8z")       }       function denied(error)       {         var message         switch(error.code)         {           case 1: message = 'Permission Denied'; break;           case 2: message = 'Position Unavailable'; break;           case 3: message = 'Operation Timed Out'; break;           case 4: message = 'Unknown Error'; break;         }         alert("Geolocation Error: " + message)       }     </script>   </body> </html> </code></pre> <p>让我们浏览这段代码，看看它是如何工作的，从显示标题的<code><head></code>部分开始。文档的<code><body></code>完全由 JavaScript 组成，立即开始查询<code>navigator.geolocation</code>属性。如果返回的值是<code>undefined</code>，则浏览器不支持地理位置，并弹出错误警告窗口。</p> <p>否则，我们调用属性的<code>getCurrentPosition</code>方法，并向其传递两个函数的名称：<code>granted</code>和<code>denied</code>（请记住，通过仅传递函数名称，我们传递的是实际的函数代码，而不是调用函数的结果，如果函数名称附带括号，则会是后者）：</p> <pre><code class="language-php">navigator.geolocation.getCurrentPosition(granted, denied) </code></pre> <p>这些函数稍后在脚本中出现，用于处理提供用户位置数据的两种可能性：<code>granted</code>或<code>denied</code>。</p> <p>函数<code>granted</code>首先被调用，仅当可以访问数据时才会进入。如果可以访问，变量<code>lat</code>和<code>long</code>将被赋予浏览器中地理位置例程返回的值。</p> <p>然后会弹出一个警告窗口，显示有关用户当前位置的详细信息。当用户点击“确定”时，警告窗口将关闭，并且当前网页将被一个指向 Google 地图的网页替换。它通过使用地理位置调用返回的纬度和经度来传递，使用 8 作为缩放设置。您可以通过将<code>8z</code>的值更改为另一个数值后跟一个<code>z</code>，在<code>window.location.replace</code>调用的末尾设置不同的缩放级别。</p> <p>通过调用<code>window.location.replace</code>来实现地图的显示。结果看起来像图 28-1。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2502.png" alt="" loading="lazy"></p> <h6 id="图-28-1-显示用户位置的交互地图">图 28-1. 显示用户位置的交互地图</h6> <p>如果权限被拒绝（或存在其他问题），则由<code>denied</code>函数显示错误消息，并弹出自己的警告窗口通知用户错误信息：</p> <pre><code class="language-php">switch(error.code) { case 1: message = 'Permission Denied'; break; case 2: message = 'Position Unavailable'; break; case 3: message = 'Operation Timed Out'; break; case 4: message = 'Unknown Error'; break; } alert("Geolocation Error: " + message) </code></pre> <h6 id="注-6">注</h6> <p>当浏览器从主机请求地理位置数据时，它将提示用户进行授权。用户可以选择授权或拒绝。拒绝授权会导致<em>权限被拒绝</em>状态，如果用户授权但主机系统无法确定其位置，则会显示<em>位置不可用</em>，而<em>超时</em>则发生在用户授权并且主机尝试获取其位置但请求超时的情况。</p> <p>还有另一种错误情况，即某些平台和浏览器组合允许用户在不授予或拒绝权限的情况下关闭权限请求对话框。这会导致应用程序在等待回调时“挂起”。</p> <p>在本书的早期版本中，我曾调用 Google Maps API 在网页内直接嵌入地图，但现在该服务需要您自行申请唯一的 API 密钥，并且超过一定使用量可能会产生费用。这就是为什么现在的示例仅生成一个 Google 地图链接。如果您希望在您的网页和应用中嵌入 Google 地图，所有必要的信息都在<a href="https://developers.google.com/maps" target="_blank">网站</a>上。当然，还有许多其他的地图选项，如<a href="https://www.bing.com/maps" target="_blank">Bing 地图</a>和<a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a>，它们都有可以访问的 API。</p> <h1 id="本地存储-1">本地存储</h1> <p>Cookie 是现代互联网的重要组成部分，因为它们使网站能够在每个用户的机器上保存小段信息，用于跟踪目的。这并不像听起来那么可怕，因为大多数跟踪是帮助网民保存用户名和密码，使他们能够保持登录状态到诸如 Twitter、Facebook 等社交网络的网站上。</p> <p>Cookie 还可以在本地保存你访问网站的偏好设置（而不是将这些设置存储在网站的服务器上），或者可以用来在电子商务网站上构建订单时跟踪购物车。</p> <p>但是，它们也可以更积极地用于跟踪你经常访问的网站，并获得你的兴趣画像，以更有效地定向广告。这就是为什么<a href="https://tinyurl.com/cookielaweu" target="_blank">欧洲联盟</a>现在“要求事先知情同意，以便存储或访问用户终端设备上存储的信息”。</p> <p>但是，作为一个网页开发者，想象一下在用户设备上保存数据会有多么有用，尤其是如果你的计算服务器和硬盘空间预算有限。例如，你可以创建浏览器内的网页应用程序和服务，用于编辑文字处理文档、电子表格和图像，将所有这些数据保存在用户的计算机上，尽可能降低服务器采购预算。</p> <p>从用户的角度来看，想象一下本地加载文档比通过网络加载快多少，尤其是在慢速连接下。此外，如果你知道一个网站没有存储你文档的副本，那么安全性会更高。当然，你永远不能保证一个网站或网页应用程序是完全安全的，你也不应该使用可以联网的软件（或硬件）处理高度敏感的文档。但对于像家庭照片这样的最小私密文档，你可能更愿意使用本地保存而不是保存文件到外部服务器的网页应用程序。</p> <h2 id="使用本地存储">使用本地存储</h2> <p>使用 Cookie 作为本地存储的最大问题在于，每个 Cookie 最多只能保存 4 KB 的数据。Cookie 还需要在每次页面重新加载时来回传递。并且，除非你的服务器使用传输层安全性（TLS）加密（SSL 的更安全的后继者），否则每次传输 Cookie 时都会明文传输。</p> <p>但是，有了 HTML5，你可以访问一个更大的本地存储空间（通常每个域名在 5 MB 到 10 MB 之间，具体取决于浏览器），这些数据在页面加载之间和网站访问之间持久存在（甚至在关闭计算机电源并重新开启后仍然存在）。此外，本地存储数据不会在每次页面加载时发送到服务器，并且可以由用户清除，因此你通常希望在服务器上保留数据；否则用户可能会发现他们的数据消失而感到不满，即使是他们自己清除了数据。</p> <p>本地存储数据通过键/值对处理。键是为引用数据分配的名称，值可以保存任何类型的数据，但保存为字符串。所有数据都是唯一的，限定在当前域内，出于安全原因，由具有不同域的网站创建的任何本地存储都与当前本地存储分开，并且不能被存储数据的域之外的任何域访问。</p> <h2 id="localstorage-对象">localStorage 对象</h2> <p>您可以通过查询其类型来测试是否可以通过<code>localStorage</code>对象访问本地存储，如下所示：</p> <pre><code class="language-php">if (typeof localStorage == 'undefined') { // Local storage is not available—tell the user and quit. // Or maybe offer to save data on the web server instead? } </code></pre> <p>如果要处理本地存储不可用的情况，这将取决于您打算使用它的方式，因此您放置在<code>if</code>语句内的代码将由您决定。</p> <p>一旦确定本地存储可用，您就可以开始使用<code>localStorage</code>对象的<code>setItem</code>和<code>getItem</code>方法，如下所示：</p> <pre><code class="language-php">localStorage.setItem('loc', 'USA') localStorage.setItem('lan', 'English') </code></pre> <p>要稍后检索此数据，请将键传递给<code>getItem</code>方法，如下所示：</p> <pre><code class="language-php">loc = localStorage.getItem('loc') lan = localStorage.getItem('lan') </code></pre> <p>与保存和读取 cookie 不同，您可以在任何时候调用这些方法，而不仅仅是在 Web 服务器发送任何标头之前。保存的值将保留在本地存储中，直到以以下方式擦除：</p> <pre><code class="language-php">localStorage.removeItem('loc') localStorage.removeItem('lan') </code></pre> <p>或者，您可以通过调用<code>clear</code>方法彻底清除当前域的本地存储，如下所示：</p> <pre><code class="language-php">localStorage.clear() </code></pre> <p>示例 28-2 将前述示例组合到一个单独的文档中，显示当前两个键的值在弹出的警告消息中，最初将为<code>null</code>。然后将键和值保存到本地存储中，检索并重新显示，这次分配了值。最后，删除键，然后再次尝试检索这些值，但返回的值再次为<code>null</code>。图 28-2 显示这三个警告消息中的第二个。</p> <h5 id="示例-28-2-获取设置和删除本地存储数据">示例 28-2. 获取、设置和删除本地存储数据</h5> <pre><code class="language-php"><!DOCTYPE html> <html>   <head>     <title>Local Storage</title>   </head>   <body>     <script>       if (typeof localStorage == 'undefined')       {         alert("Local storage is not available")       }       else       {         loc = localStorage.getItem('loc')         lan = localStorage.getItem('lan')         alert("The current values of 'loc' and 'lan' are\n\n" +           loc + " / " + lan + "\n\nClick OK to assign values")         localStorage.setItem('loc', 'USA')         localStorage.setItem('lan', 'English')         loc = localStorage.getItem('loc')         lan = localStorage.getItem('lan')         alert("The current values of 'loc' and 'lan' are\n\n" +           loc + " / " + lan +  "\n\nClick OK to clear values")         localStorage.removeItem('loc')         localStorage.removeItem('lan')         loc = localStorage.getItem('loc')         lan = localStorage.getItem('lan')         alert("The current values of 'loc' and 'lan' are\n\n" +           loc + " / " + lan)       }     </script>   </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2802.png" alt="" loading="lazy"></p> <h6 id="图-28-2-从本地存储中读取两个键及其值">图 28-2. 从本地存储中读取两个键及其值</h6> <h6 id="注意-167">注意</h6> <p>在本地存储中，您可以包含几乎任何和所有数据，并且可以包含多个键/值对，最多达到您域的可用存储限制。</p> <h1 id="web-workers-1">Web Workers</h1> <p><em>Web workers</em> 运行后台作业，适用于需要长时间计算且不应阻止用户进行其他操作的情况。要使用 web worker，您可以创建 JavaScript 代码段，这些代码将在后台运行。这段代码不必像某些异步系统中的作业那样设置和监控中断。相反，每当它有报告的内容时，您的后台进程通过事件与主 JavaScript 进行通信。</p> <p>这意味着 JavaScript 解释器决定如何最有效地分配时间片，并且您的代码只需在需要传递信息时与后台任务通信。</p> <p>示例 28-3 展示了如何设置 Web Worker 在后台执行重复任务，本例中是计算质数。</p> <h5 id="示例-28-3-设置和与-web-worker-通信">示例 28-3. 设置和与 Web Worker 通信</h5> <pre><code class="language-php"><!DOCTYPE html> <html> <head> <title>Web Workers</title> <script src='OSC.js'></script> </head> <body> Current highest prime number: <span id='result'>0</span> <script> if (!!window.Worker) { var worker = new Worker('worker.js') worker.onmessage = function (event) { O('result').innerText = event.data; } } else { alert("Web workers not supported") } </script> </body> </html> </code></pre> <p>本例首先在 ID 为 <code>result</code> 的 <code><span></code> 元素中创建一个元素，其中将放置来自 Web Worker 的输出。然后，在 <code><script></code> 部分，通过 <code>!!</code> 连续 <code>not</code> 运算符测试 <code>window.Worker</code>。如果不是 <code>true</code>，则在 <code>else</code> 部分显示消息，提示我们 Web Worker 不可用。</p> <p>否则，程序通过调用 <code>Worker</code> 创建一个新的 <code>worker</code> 对象，并将文件名 <em>worker.js</em> 传递给它。然后，新的 <code>worker</code> 对象的 <code>onmessage</code> 事件附加到一个匿名函数，该函数将由 <em>worker.js</em> 传递的任何消息放入先前创建的 <code><span></code> 元素的 <code>innerText</code> 属性中。</p> <p>Web Worker 本身保存在文件 <em>worker.js</em> 中，其内容显示在 示例 28-4 中。</p> <h5 id="示例-28-4-workerjs-web-worker">示例 28-4. worker.js Web Worker</h5> <pre><code class="language-php">var n = 1 search: while (true) { n += 1 for (var i = 2; i <= Math.sqrt(n); i += 1) { if (n % i == 0) continue search } postMessage(n) } </code></pre> <p>该文件将值 <code>1</code> 赋给变量 <code>n</code>。然后，它连续循环，递增 <code>n</code> 并通过测试从 <code>1</code> 到 <code>n</code> 的平方根的所有值，看它们是否能够完全除尽 <code>n</code>，没有余数。如果找到因子，<code>continue</code> 命令立即停止暴力攻击，因为该数字不是质数，并从下一个更高的 <code>n</code> 值开始处理。</p> <p>但是，如果测试了所有可能的因子并且没有导致余数为零，<code>n</code> 必须是质数，因此其值被传递给 <code>postMessage</code>，它将消息发送回设置此 Web Worker 的对象的 <code>onmessage</code> 事件。</p> <p>结果如下所示：</p> <pre><code class="language-php">Current highest prime number: 30477191 </code></pre> <p>要停止 Web Worker 的运行，可以调用 <code>worker</code> 对象的 <code>terminate</code> 方法，如下所示：</p> <pre><code class="language-php">worker.terminate() </code></pre> <h6 id="注意-168">注意</h6> <p>如果您希望停止运行此特定示例，可以在浏览器的地址栏中输入以下内容：</p> <pre><code class="language-php">javascript:worker.terminate() </code></pre> <p>还请注意，由于 Chrome 处理安全性的方式，您不能在文件系统上使用 Web Worker，只能从 Web 服务器（或在类似 AMPPS 的开发服务器上 <em>localhost</em> 运行文件，详见 第 2 章）。</p> <p>Web Worker 确实有一些安全限制需要注意：</p> <ul> <li> <p>Web Worker 在其自己独立的 JavaScript 上下文中运行，并且无法直接访问任何其他执行上下文中的内容，包括主 JavaScript 线程或其他 Web Worker。</p> </li> <li> <p>Web Worker 上下文之间的通信通过 web messaging (<code>postMessage</code>) 来完成。</p> </li> <li> <p>因为 Web Workers 无法访问主 JavaScript 上下文，它们无法修改 DOM。Web Workers 可用的唯一 DOM 方法包括 <code>atob</code>、<code>btoa</code>、<code>clearInterval</code>、<code>clearTimeout</code>、<code>dump</code>、<code>setInterval</code> 和 <code>setTimeout</code>。</p> </li> <li> <p>Web Workers 受同源策略的限制，因此不能从与原始脚本不同源的位置加载 Web Worker，除非通过跨站方法。</p> </li> </ul> <h1 id="拖放">拖放</h1> <p>通过设置 <code>ondragstart</code>、<code>ondragover</code> 和 <code>ondrop</code> 事件的事件处理程序，你可以轻松支持在网页上拖放对象，例如 示例 28-5。</p> <h5 id="示例-28-5-拖放对象">示例 28-5. 拖放对象</h5> <pre><code class="language-php"><!DOCTYPE HTML> <html> <head> <title>Drag and Drop</title> <script src='OSC.js'></script> <style> #dest { background:lightblue; border :1px solid #444; width :320px; height :100px; padding :10px; } </style> </head> <body> <div id='dest' ondrop='drop(event)' ondragover='allow(event)'></div><br> Drag the image below into the above element<br><br> <img id='source1' src='image1.png' draggable='true' ondragstart='drag(event)'> <img id='source2' src='image2.png' draggable='true' ondragstart='drag(event)'> <img id='source3' src='image3.png' draggable='true' ondragstart='drag(event)'> <script> function allow(event) { event.preventDefault() } function drag(event) { event.dataTransfer.setData('image/png', event.target.id) } function drop(event) { event.preventDefault() var data=event.dataTransfer.getData('image/png') event.target.appendChild(O(data)) } </script> </body> </html> </code></pre> <p>在设置了 HTML、提供了标题并加载了 <em>OSC.js</em> 文件之后，该文档对 ID 为 <code>dest</code> 的 <code><div></code> 元素进行样式设置，为其设置了背景颜色、边框、固定尺寸和填充。</p> <p>然后，<code><body></code> 部分创建了 <code><div></code> 元素，并将事件处理程序函数 <code>drop</code> 和 <code>allow</code> 附加到 <code><div></code> 的 <code>ondrop</code> 和 <code>ondragover</code> 事件上。之后是一些文本，然后是三个将其 <code>draggable</code> 属性设置为 <code>true</code> 的图像。每个图像的 <code>ondragstart</code> 事件附加了 <code>drag</code> 函数。</p> <p>在 <code><script></code> 部分，<code>allow</code> 事件处理程序函数简单地阻止了拖动的默认操作（即不允许它），而 <code>drag</code> 事件处理程序函数调用了事件的 <code>dataTransfer</code> 对象的 <code>setData</code> 方法，传递了 MIME 类型 <code>image/png</code> 和事件的 <code>target.id</code>（即被拖动的对象）。<code>dataTransfer</code> 对象在拖放操作期间保存被拖动的数据。</p> <p>最后，<code>drop</code> 事件处理程序函数还拦截其默认操作，以便允许拖放，然后从 <code>dataTransfer</code> 对象中获取被拖动对象的内容，传递对象的 MIME 类型。然后通过其 <code>appendChild</code> 方法将放置的数据附加到目标（即 <code>dest <div></code>）。</p> <p>如果你自己尝试这个例子，你可以将图像拖放到 <code><div></code> 元素中，它们将保留在那里，如 图 28-3 所示。这些图像只能拖放到附加了 <code>drop</code> 和 <code>allow</code> 事件处理程序的元素中，而不能放置到其他位置。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2803.png" alt="" loading="lazy"></p> <h6 id="图-28-3-已拖放两个图像">图 28-3. 已拖放两个图像</h6> <p>你还可以附加其他事件，如 <code>ondragenter</code>（当拖动操作进入元素时运行）、<code>ondragleave</code>（当离开元素时运行）和 <code>ondragend</code>（当拖动操作结束时运行），例如可以在这些操作期间修改光标。</p> <h1 id="跨文档消息">跨文档消息</h1> <p>您在前面稍早已经看到消息的使用情况，在 Web Worker 部分。但是由于它并非讨论的核心主题，而且消息仅发布到同一文档，所以我没有详细说明。但出于明显的安全原因，跨文档消息确实需要谨慎使用，因此如果您计划使用它，您需要完全了解其工作原理。</p> <p>在 HTML5 之前，浏览器开发人员禁止跨文档脚本，但除了阻止潜在的攻击站点外，这还阻止了合法页面之间的通信。任何形式的文档交互通常必须通过 Ajax 和第三方 Web 服务器进行，这很麻烦且难以建立和维护。</p> <p>但是现在，Web 消息传递允许脚本通过使用一些合理的安全限制在这些边界之间进行交互，以防止恶意黑客攻击。它通过使用<code>postMessage</code>方法实现，允许从一个域向另一个域发送纯文本消息，始终在单个浏览器内进行。</p> <p>这要求 JavaScript 首先获取接收文档的<code>window</code>对象，从而允许消息直接发布到与发送文档直接相关的各种其他窗口、框架或 iframe。接收的消息事件具有以下属性：</p> <p><dfn class="keep-together"><code>数据</code></dfn></p> <p>接收到的消息</p> <p><dfn class="keep-together"><code>来源</code></dfn></p> <p>发件人文档的来源，包括方案、主机名和端口</p> <p><dfn class="keep-together"><code>源</code></dfn></p> <p>发送文档的源窗口</p> <p>发送消息的代码只需一条指令，其中您传递要发送的消息以及应用于其的域，如示例 28-6 中所示。</p> <h5 id="示例-28-6-将-web-消息发送到-iframe">示例 28-6. 将 Web 消息发送到 iframe</h5> <pre><code class="language-php"><!DOCTYPE HTML> <html> <head> <title>Web Messaging (a)</title> <script src='OSC.js'></script> </head> <body> <iframe id='frame' src='07.html' width='360' height='75'></iframe> <script> count = 1 setInterval(function() { O('frame').contentWindow.postMessage('Message ' + count++, '*') }, 1000) </script> </body> </html> </code></pre> <p>在这里，通常使用<em>OSC.js</em>文件来拉取<code>O</code>函数，然后创建一个 ID 为<code>frame</code>的<code><iframe></code>元素，加载示例 28-7 中的内容。然后，在<code><script></code>部分中，将变量<code>count</code>初始化为<code>1</code>，并设置每秒重复一次的间隔，以发布字符串<code>'Message '</code>（使用<code>postMessage</code>方法）以及当前值<code>count</code>，然后递增。<code>postMessage</code>调用附加到<code>iframe</code>对象的<code>contentWindow</code>属性，而不是<code>iframe</code>对象本身。这很重要，因为 Web 消息要求将帖子发布到窗口，而不是窗口内的对象。</p> <h5 id="示例-28-7-从另一个文档接收消息">示例 28-7. 从另一个文档接收消息</h5> <pre><code class="language-php"><!DOCTYPE HTML> <html> <head> <title>Web Messaging (b)</title> <style> #output { font-family:"Courier New"; white-space:pre; } </style> <script src='OSC.js'></script> </head> <body> <div id='output'>Received messages will display here</div> <script> window.onmessage = function(event) { O('output').innerHTML = '<b>Origin:</b> ' + event.origin + '<br>' + '<b>Source:</b> ' + event.source + '<br>' + '<b>Data:</b> ' + event.data } </script> </body> </html> </code></pre> <p>这个例子设置了一些样式，使输出更清晰，然后创建了一个 ID 为 <code>output</code> 的 <code><div></code> 元素，在其中接收到的消息内容将被放置。 <code><script></code> 部分包含一个附加到窗口 <code>onmessage</code> 事件的单个匿名函数。在此函数中，显示了 <code>event.origin</code>、<code>event.source</code> 和 <code>event.data</code> 属性值，如 Figure 28-4 所示。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2804.png" alt="" loading="lazy"></p> <h6 id="图-28-4-iframe-到目前为止已接收到-29-条消息">图 28-4. iframe 到目前为止已接收到 29 条消息</h6> <p>Web 消息传递只能跨域工作，因此您不能通过从文件系统加载文件来测试它；您必须使用 web 服务器（例如在 Chapter 2 建议的 AMPPS 堆栈）。正如您从 Figure 28-4 可以看到的那样，来源是 <em><a href="http://localhost" target="_blank">http://localhost</a></em>，因为这些示例正在本地开发服务器上运行。源是 <code>window</code> 对象，当前消息的值是 <code>Message 29</code>。</p> <p>要自己运行这个程序，只需将 <em>06.html</em> 加载到浏览器中，使用 <code>localhost://</code> 而不是文件系统，它将与 <em>07.html</em> 进行通信，而无需您加载它，因为它被插入到一个 iframe 中。</p> <p>目前，Example 28-6 完全不安全，因为传递给 <code>postMessage</code> 的域值是通配符 <code>*</code>：</p> <pre><code class="language-php">O('frame').contentWindow.postMessage('Message ' + count++, `'*'`) </code></pre> <p>要将消息仅定向到源自特定域的文档，您可以更改此参数。在当前情况下，值为 <code>http://localhost</code> 将确保只有从本地服务器加载的文档会接收到任何消息：</p> <pre><code class="language-php">O('frame').contentWindow.postMessage('Message ' + count++, `'http://localhost'`) </code></pre> <p>同样地，作为它目前的状态，监听程序显示接收到的任何和所有消息。这也不是非常安全的状态，因为浏览器中还存在恶意文档，它们可能试图发送消息，而不经意的文档中的监听器代码可能会访问这些消息。因此，您可以通过使用 <code>if</code> 语句限制监听器对消息的反应，就像这样：</p> <pre><code class="language-php">window.onmessage = function(event) { `if` `(``event``.``origin``)` `==` `'http://localhost'``)` `{` O('output').innerHTML = '<b>Origin:</b> ' + event.origin + '<br>' + '<b>Source:</b> ' + event.source + '<br>' + '<b>Data:</b> ' + event.data `}` } </code></pre> <h6 id="警告-34">警告</h6> <p>如果您始终使用站点的正确域，您的网络消息通信将更加安全。但是，请注意，由于消息是明文发送的，某些浏览器或浏览器插件可能存在不安全因素，这可能使此类通信不安全。因此，提高安全性的一种方法是为所有网络消息使用加密方案，并考虑引入双向通信协议以验证每条消息的真实性。</p> <p>通常情况下，您不会向用户警告 <code>origin</code> 或 <code>source</code> 值，并且仅将它们用于安全检查。然而，这些例子显示这些值，以帮助您实验网络消息并了解正在发生的事情。除了使用 iframe 外，弹出窗口和其他标签页中的文档也可以使用此方法相互通信。</p> <h1 id="其他-html5-标签">其他 HTML5 标签</h1> <p>多个其他新的 HTML5 标签正在主要浏览器中得到采纳，包括<code><article></code>、<code><aside></code>、<code><details></code>、<code><figcaption></code>、<code><figure></code>、<code><footer></code>、<code><header></code>、<code><hgroup></code>、<code><mark></code>、<code><menuitem></code>、<code><meter></code>、<code><nav></code>、<code><output></code>、<code><progress></code>、<code><rp></code>、<code><rt></code>、<code><ruby></code>、<code><section></code>、<code><summary></code>、<code><time></code>和<code><wbr></code>。您可以从<a href="https://tinyurl.com/htmltaglist" target="_blank">eastmanreference.com</a>获取更多关于这些和所有其他 HTML5 标签的信息。</p> <p>这就是您对 HTML5 的介绍。现在您拥有了多个强大的新功能，可以用来创建更加动态和引人入胜的网站。在最后一章中，我将向您展示如何将本书中的所有不同技术结合起来，创建一个迷你社交网络站点。</p> <h1 id="问题-27">问题</h1> <ol> <li> <p>您调用哪个方法来请求 Web 浏览器的地理位置数据？</p> </li> <li> <p>如何确定浏览器是否支持本地存储？</p> </li> <li> <p>您可以调用哪个方法来清除当前域的所有本地存储数据？</p> </li> <li> <p>Web 工作者与主程序进行通信的最佳方式是什么？</p> </li> <li> <p>如何停止 Web 工作者的运行？</p> </li> <li> <p>要支持拖放操作，如何防止默认操作禁止这些事件的拖放？</p> </li> <li> <p>如何使跨文档消息传递更安全？</p> </li> </ol> <p>请参阅“第二十八章答案”位于附录 A 获取这些问题的答案。</p> <h1 id="第二十九章统筹全局">第二十九章：统筹全局</h1> <p>现在你已经读到了本书的末尾，在动态网页编程的各种方法、原理和应用的道路上迈出了第一个里程碑，我想给你留下一个真实的例子，让你能够深入理解。事实上，它是一个例子的集合，因为我组建了一个简单的社交网络项目，包括所有你期望在这样一个站点上看到的主要功能，更重要的是，这样一个 Web 应用程序。</p> <p>在各种文件中，有 MySQL 表的创建和数据库访问、CSS、文件包含、会话控制、DOM 访问、异步调用、事件和错误处理、文件上传、图像处理、HTML5 画布等示例。</p> <p>每个示例文件都是完整的、独立的，但与其他文件一起工作，构建一个完全可用的社交网络站点，甚至包括一个可以修改以完全改变项目外观和感觉的样式表。由于体积小巧，最终产品特别适用于智能手机或平板电脑等移动平台，但同样可以在全尺寸桌面计算机上运行良好。</p> <p>并且你会发现，通过充分利用 jQuery 和 jQuery Mobile 的强大功能，代码运行速度快，易于使用，适应所有环境，并且外观优美。作为练习，你可能希望进一步调整代码，也许包括某种方式使用 React。</p> <p>话虽如此，我已尽可能简化这段代码，以便易于理解。因此，它有很大的改进空间，例如通过存储哈希（不可逆单向函数的固定长度输出）来增强安全性，而不是未加密的密码，并且更顺畅地处理登录和注销之间的过渡——但让我们将这些留给读者作为传说中的练习，尤其是本章末尾没有问题。（嗯，就一个！）</p> <p>我将这段代码的任何部分留给你，你认为可以使用并扩展为自己的目的。也许你甚至希望在这些文件的基础上创建一个属于自己的社交网络站点。</p> <h1 id="设计社交网络应用程序">设计社交网络应用程序</h1> <p>在编写任何代码之前，我坐下来并想出了几个我认为对这样一个应用程序至关重要的事物。这些包括以下内容：</p> <ul> <li> <p>注册流程</p> </li> <li> <p>登录表单</p> </li> <li> <p>注销设施</p> </li> <li> <p>会话控制</p> </li> <li> <p>用户配置文件及其上传的缩略图</p> </li> <li> <p>成员目录</p> </li> <li> <p>添加成员作为好友</p> </li> <li> <p>成员之间的公共和私人消息传递</p> </li> <li> <p>项目样式化</p> </li> </ul> <p>我决定将项目命名为<em>Robin's Nest</em>；如果你使用这段代码，你需要在<em>index.php</em>和<em>header.php</em>文件中修改名称和标志。</p> <h1 id="在网站上">在网站上</h1> <p>本章中的所有示例都可以在<a href="https://github.com/RobinNixon/lpmj6" target="_blank">我的 GitHub 存储库</a>中找到，您可以下载一个存档文件，应将其解压到计算机上适当的位置。</p> <p>特别值得注意的是，对于本章而言，在<em>ZIP</em>文件中，您将找到一个名为<em>robinsnest</em>的文件夹，其中包含所有以下示例所需的正确文件名。这意味着您可以轻松地将它们全部复制到您的 Web 开发文件夹中以进行尝试。</p> <h1 id="functionsphp">functions.php</h1> <p>让我们直接进入项目，从示例 29-1，<em>functions.php</em>开始，这是主要函数的包含文件。这个文件不仅仅包含函数，因为我已经在这里添加了数据库登录详细信息，而不是使用另一个单独的文件。代码的前四行定义了要使用的数据库的主机和名称，以及用户名和密码。</p> <p>默认情况下，在这个文件中，MySQL 用户名设置为<em>robinsnest</em>，程序使用的数据库也叫做<em>robinsnest</em>。第八章 提供了关于如何创建新用户和/或数据库的详细说明，但是简要回顾一下，首先通过输入 MySQL 命令提示符并键入以下命令来创建一个名为<em>robinsnest</em>的新数据库：</p> <pre><code class="language-php">CREATE DATABASE robinsnest; </code></pre> <p>然后，您可以像这样创建一个名为<em>robinsnest</em>的用户，该用户可以访问此数据库：</p> <pre><code class="language-php">CREATE USER 'robinsnest'@'localhost' IDENTIFIED BY 'password'; GRANT ALL PRIVILEGES ON robinsnest.* TO 'robinsnest'@'localhost'; </code></pre> <p>显然，您应该为此用户使用比<em>password</em>更安全的密码，但为简单起见，这些示例中使用的是该密码——如果您在生产站点上使用此代码，请确保更改密码。</p> <h2 id="函数-2">函数</h2> <p>该项目使用了五个主要函数：</p> <p><dfn class="keep-together"><code>createTable</code></dfn></p> <p>检查表是否已存在，如果不存在则创建</p> <p><dfn class="keep-together"><code>queryMysql</code></dfn></p> <p>向 MySQL 发出查询，如果失败则输出错误消息</p> <p><dfn class="keep-together"><code>destroySession</code></dfn></p> <p>销毁 PHP 会话并清除其数据以注销用户</p> <p><dfn class="keep-together"><code>sanitizeString</code></dfn></p> <p>从用户输入中删除潜在恶意代码或标签</p> <p><dfn class="keep-together"><code>showProfile</code></dfn></p> <p>如果用户有图像和“关于我”消息，则显示它们</p> <p>到目前为止，所有这些行为对您来说应该是显而易见的，除了<code>showProfile</code>可能是个例外，它查找名称为<em><user.jpg></em>（其中<em><user></em>是当前用户的用户名）的图像，如果找到，则显示它。它还显示用户保存的任何“关于我”文本。</p> <p>我已确保所有需要的函数都有错误处理，以便捕获您可能引入的任何排版或其他错误并生成错误消息。但是，如果您在生产服务器上使用任何此代码，您将需要提供自己的错误处理程序以使代码更加用户友好。</p> <p>所以，输入示例 29-1，将其保存为<em>functions.php</em>（或从伴随网站下载），然后您将准备好进入下一节。</p> <h5 id="示例-29-1-functionsphp">示例 29-1. functions.php</h5> <pre><code class="language-php"><?php // Example 01: functions.php   $host = 'localhost';    // Change as necessary   $data = 'robinsnest';   // Change as necessary   $user = 'robinsnest';   // Change as necessary   $pass = 'password';     // Change as necessary   $chrs = 'utf8mb4';   $attr = "mysql:host=$host;dbname=$data;charset=$chrs";   $opts =   [     PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,     PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,     PDO::ATTR_EMULATE_PREPARES   => false,   ];   try   {     $pdo = new PDO($attr, $user, $pass, $opts);   }   catch (\PDOException $e)   {     throw new \PDOException($e->getMessage(), (int)$e->getCode());   }   function createTable($name, $query)   {     queryMysql("CREATE TABLE IF NOT EXISTS $name($query)");     echo "Table '$name' created or already exists.<br>";   }   function queryMysql($query)   {     global $pdo;     return $pdo->query($query);   }   function destroySession()   {     $_SESSION=array();     if (session_id() != "" || isset($_COOKIE[session_name()]))       setcookie(session_name(), '', time()-2592000, '/');     session_destroy();   }   function sanitizeString($var)   {     global $pdo;     $var = strip_tags($var);     $var = htmlentities($var);     if (get_magic_quotes_gpc())       $var = stripslashes($var);     $result = $pdo->quote($var); // This adds single quotes     return str_replace("'", "", $result); // So now remove them   }   function showProfile($user)   {     if (file_exists("$user.jpg"))       echo "<img src='$user.jpg' style='float:left;'>";     $result = $pdo->query("SELECT * FROM profiles WHERE user='$user'");     while ($row = $result->fetch())     {       die(stripslashes($row['text']) . "<br style='clear:left;'><br>");     }     echo "<p>Nothing to see here, yet</p><br>";   } ?> </code></pre> <h6 id="注意-169">注意</h6> <p>如果您曾阅读本书的早期版本，在这些示例中使用了旧的<code>mysql</code>扩展名，后来改为<code>mysqli</code>，您现在将看到我再次转向到目前为止最好的解决方案，即<code>PDO</code>。</p> <p>要使用<code>PDO</code>引用 MySQL 数据库，必须在<code>queryMysql</code>和<code>sanitizeString</code>函数中应用<code>global</code>关键字，以允许它们使用<code>$PDO</code>的值。</p> <h1 id="头文件">头文件</h1> <p>为了保持项目的统一性，项目的每个页面都需要访问相同的功能集。因此，我将这些内容放在了<em>header.php</em>（示例 29-2）中。这个文件实际上是其他文件所包含的文件。它包含了<em>functions.php</em>。这意味着每个文件只需要一次<code>require_once</code>。</p> <p><em>header.php</em>从调用<code>session_start</code>函数开始。正如您在第十三章中回忆的那样，这将设置一个会话，它将记住我们希望跨不同 PHP 文件存储的某些值。换句话说，它代表用户对站点的访问，并且如果用户在一段时间内忽略站点，则会超时。</p> <p>会话开始后，程序输出所需的 HTML 来设置每个网页，包括加载样式表和各种所需的 JavaScript 库。在此之后，包含函数文件（<em>functions.php</em>）并将默认字符串“Welcome Guest”分配给<code>$userstr</code>。</p> <p>在此之后，随机字符串值被分配给变量<code>$randstr</code>，在整个应用程序中用于追加到 URL 上，以便每个加载的页面看起来对 jQuery 滑动界面都是唯一的。如果没有这样做，看起来不应该改变到 jQuery 的页面将从其缓存中获取，这将导致尽可能好的性能。在具有静态信息的一组页面上，这是可以接受的，但这是一个动态应用程序，页面信息随时会变化，因此我们必须确保每个新的页面请求来自服务器而不是缓存。</p> <p>接下来，代码检查会话变量<code>user</code>当前是否被赋值。如果是，表示用户已经登录，所以变量<code>$loggedin</code>被设置为<code>TRUE</code>，并且用户名从会话变量<code>user</code>中检索到 PHP 变量<code>$user</code>中，并相应地更新了<code>$userstr</code>。如果用户尚未登录，则<code>$loggedin</code>被设置为<code>FALSE</code>。</p> <p>接下来，一些 HTML 输出欢迎用户（如果尚未登录则为访客），并输出 jQuery Mobile 页面头部和内容部分所需的<code><div></code>元素。</p> <p>在此之后，根据<code>$loggedin</code>的值，<code>if</code>块将显示两套菜单中的一套。非登录集合仅提供主页、注册和登录选项，而登录版本则提供对应用程序功能的完全访问权限。按钮使用 jQuery Mobile 标记进行样式设置，例如<code>data-role='button'</code>用于将元素显示为按钮，<code>data-inline='true'</code>用于内联显示元素（类似于<code><span></code>元素），<code>data-transition="slide"</code>用于在单击时使新页面滑入视图中，详见第二十三章。</p> <p>在这些 URL 中，您将注意到<code>r=$randstr</code>的使用，如前所述，以确保从服务器获取每个页面，而不是从 jQuery 的缓存中获取。</p> <p>此文件应用的附加样式位于文件<em>styles.css</em>（详见示例 29-13，本章末详述）中。</p> <h5 id="示例-29-2-headerphp">示例 29-2. header.php</h5> <pre><code class="language-php"><?php // Example 02: header.php session_start(); echo <<<_INIT <!DOCTYPE html> <html> <head> <meta charset='utf-8'>     <meta name='viewport' content='width=device-width, initial-scale=1'>      <link rel='stylesheet' href='jquery.mobile-1.4.5.min.css'>     <link rel='stylesheet' href='styles.css'>     <script src='javascript.js'></script>     <script src='jquery-2.2.4.min.js'></script>     <script src='jquery.mobile-1.4.5.min.js'></script> _INIT;   require_once 'functions.php';   $userstr = 'Welcome Guest';   $randstr = substr(md5(rand()), 0, 7);   if (isset($_SESSION['user']))   {     $user     = $_SESSION['user'];     $loggedin = TRUE;     $userstr  = "Logged in as: $user";   }   else $loggedin = FALSE; echo <<<_MAIN     <title>Robin's Nest: $userstr</title>   </head>   <body>     <div data-role='page'>       <div data-role='header'>         <div id='logo'         class='center'>R<img id='robin' src='robin.gif'>bin's Nest</div>         <div class='username'>$userstr</div>       </div>       <div data-role='content'> _MAIN;   if ($loggedin)   { echo <<<_LOGGEDIN         <div class='center'>           <a data-role='button' data-inline='true' data-icon='home'             data-transition="slide" href='members.php?view=$user&r=$randstr'>Home</a>           <a data-role='button' data-inline='true' data-icon='user'             data-transition="slide" href='members.php?r=$randstr'>Members</a>           <a data-role='button' data-inline='true' data-icon='heart'             data-transition="slide" href='friends.php?r=$randstr'>Friends</a><br>           <a data-role='button' data-inline='true' data-icon='mail'             data-transition="slide" href='messages.php?r=$randstr'>Messages</a>           <a data-role='button' data-inline='true' data-icon='edit'             data-transition="slide" href='profile.php?r=$randstr'>Edit Profile</a>           <a data-role='button' data-inline='true' data-icon='action'             data-transition="slide" href='logout.php?r=$randstr'>Log out</a>         </div> _LOGGEDIN;   }   else   { echo <<<_GUEST         <div class='center'>           <a data-role='button' data-inline='true' data-icon='home'             data-transition='slide' href='index.php?r=$randstr''>Home</a>           <a data-role='button' data-inline='true' data-icon='plus'             data-transition="slide" href='signup.php?r=$randstr''>Sign Up</a>           <a data-role='button' data-inline='true' data-icon='check'             data-transition="slide" href='login.php?r=$randstr''>Log In</a>         </div>         <p class='info'>(You must be logged in to use this app)</p> _GUEST;   } ?> </code></pre> <h1 id="setupphp">setup.php</h1> <p>随着编写的这对包含文件，现在是时候设置它们将使用的 MySQL 表格了。我们可以使用示例 29-3，<em>setup.php</em>来实现这一点，您应该在调用任何其他文件之前在浏览器中输入并加载它，否则将会出现大量的 MySQL 错误。</p> <p>创建的表格简洁明了，具有以下名称和列：</p> <p><em>members</em></p> <p>用户名 <em>user</em>（已索引）、密码 <em>pass</em></p> <p><em>messages</em></p> <p>ID <em>id</em>（已索引）、作者 <em>auth</em>（已索引）、接收者 <em>recip</em>、消息类型 <em>pm</em>、消息 <em>message</em></p> <p><em>friends</em></p> <p>用户名 <em>user</em>（已索引）、朋友的用户名 <em>friend</em></p> <p><em>profiles</em></p> <p>用户名 <em>user</em>（已索引）、“关于我” <em>text</em></p> <p>由于<code>createTable</code>函数首先检查表是否已经存在，因此可以安全地多次调用此程序而不会生成任何错误。</p> <p>如果您选择扩展此项目，则很可能需要向这些表格添加更多列。如果是这样，请记住在重新创建表格之前可能需要发出 MySQL 的<code>DROP TABLE</code>命令。</p> <h5 id="示例-29-3-setupphp">示例 29-3. setup.php</h5> <pre><code class="language-php"><!DOCTYPE html> <!-- Example 03: setup.php --> <html> <head> <title>Setting up database</title> </head> <body> <h3>Setting up...</h3> <?php require_once 'functions.php'; createTable('members', 'user VARCHAR(16), pass VARCHAR(16), INDEX(user(6))'); createTable('messages', 'id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY, auth VARCHAR(16), recip VARCHAR(16), pm CHAR(1), time INT UNSIGNED, message VARCHAR(4096), INDEX(auth(6)), INDEX(recip(6))'); createTable('friends', 'user VARCHAR(16), friend VARCHAR(16), INDEX(user(6)), INDEX(friend(6))'); createTable('profiles', 'user VARCHAR(16), text VARCHAR(4096), INDEX(user(6))'); ?> <br>...done. </body> </html> </code></pre> <h6 id="警告-35">警告</h6> <p>要使此示例有效，您必须首先确保已创建变量<code>$data</code>中指定的数据库，详情请参见示例 29-1，并且已授予给定名称的用户（在<code>$user</code>中）及其密码（在<code>$pass</code>中）访问权限。</p> <h1 id="indexphp">index.php</h1> <p>此文件虽然微不足道，但却是必不可少的，以便为项目提供一个首页。它所做的只是显示一个简单的欢迎消息。在完成的应用程序中，这将是您向用户推销站点优点以鼓励注册的地方。</p> <p>顺便说一句，由于我们已经设置好了所有 MySQL 表格并创建了包含的文件，您现在可以加载示例 29-4，<em>index.php</em>，到您的浏览器中，以便首次查看新应用程序。它应该看起来像图 29-1。</p> <h5 id="示例-29-4-indexphp">示例 29-4. index.php</h5> <pre><code class="language-php"><?php // Example 04: index.php   session_start();   require_once 'header.php';   echo "<div class='center'>Welcome to Robin's Nest,";   if ($loggedin) echo " $user, you are logged in";   else           echo ' please sign up or log in';   echo <<<_END       </div><br>     </div>     <div data-role="footer">       <h4>Web App from <i><a href='https://github.com/RobinNixon/lpmj6'       target='_blank'>Learning PHP MySQL & JavaScript</a></i></h4>     </div>   </body> </html> _END; ?> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2901.png" alt="" loading="lazy"></p> <h6 id="图-29-1-应用程序的主页">图 29-1. 应用程序的主页</h6> <h1 id="signupphp">signup.php</h1> <p>现在我们需要一个模块来让用户加入我们的新社交网络，那就是示例 29-5，<em>signup.php</em>。这是一个略长一些的程序，但你之前已经看过其所有部分。</p> <p>让我们从 HTML 的末尾块开始。这是一个简单的表单，允许输入用户名和密码。但请注意使用了带有<code>id</code>为<code>used</code>的空<code><div></code>。这将是程序中异步调用的目的地，用于检查所需用户名是否可用。完整的工作原理请参见第十八章。</p> <h2 id="检查用户名是否可用">检查用户名是否可用</h2> <p>现在回到程序的起点，你会看到一段以函数<code>checkUser</code>开头的 JavaScript 代码块。当焦点从表单的<code>username</code>字段移除时，这段代码会被 JavaScript 的<code>onBlur</code>事件调用。首先，它会将我提到的带有<code>id</code>为<code>used</code>的<code><div></code>的内容设置为非空格<code>&nbsp;</code>，以清除它（如果之前有值的话）。</p> <p>接下来会向<em>checkuser.php</em>发送请求，该程序报告<code>user</code>中的用户名是否可用。异步调用的返回结果（使用 jQuery 执行），一个友好的消息，然后放置在<code>used</code>的<code><div></code>中。</p> <p>在 JavaScript 部分之后是一些 PHP 代码，你应该能从第十七章关于表单验证的讨论中识别出来。本节还使用<code>sanitizeString</code>函数，在查找数据库中的用户名之前移除潜在恶意字符，如果用户名尚未使用，则插入新的用户名<code>$user</code>和密码<code>$pass</code>。</p> <h2 id="登录-1">登录</h2> <p>成功注册后，用户将被提示登录。此时更流畅的响应可能是自动登录新创建的用户，但因为我不想过度复杂化代码，所以保持了注册和登录模块的分离。不过，如果你想要的话，很容易实现这一点。</p> <p>此文件使用 CSS 类<code>fieldname</code>来排列表单字段，使它们在列下面整齐对齐。加载到浏览器中时（并与稍后显示的<em>checkuser.php</em>配合使用），该程序将看起来像图 29-2，你可以看到异步调用已经确认用户名<em>Robin</em>可用。如果希望密码字段只显示星号，请将其类型从<code>text</code>更改为<code>password</code>。</p> <p>记住，在运行任何其他 PHP 程序文件之前，你必须先运行<em>setup.php</em>。</p> <h6 id="警告-36">警告</h6> <p>在生产服务器上，我不建议像我这样将用户密码明文存储，出于空间和简易性的考虑才这样做。相反，你应该对其进行盐值处理并存储为单向哈希字符串。有关如何执行此操作的详细信息，请参阅第十三章。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2902.png" alt="" loading="lazy"></p> <h6 id="图29-2-注册页面">图 29-2. 注册页面</h6> <h5 id="示例-29-5-signupphp">示例 29-5. signup.php</h5> <pre><code class="language-php"><?php // Example 05: signup.php   require_once 'header.php'; echo <<<_END   <script>     function checkUser(user)     {       if (user.value == '')       {         $('#used').html('&nbsp;')         return       }       $.post       (         'checkuser.php',         { user : user.value },         function(data)         {           $('#used').html(data)         }       )     }   </script>   _END;   $error = $user = $pass = "";   if (isset($_SESSION['user'])) destroySession();   if (isset($_POST['user']))   {     $user = sanitizeString($_POST['user']);     $pass = sanitizeString($_POST['pass']);     if ($user == "" || $pass == "")       $error = 'Not all fields were entered<br><br>';     else     {       $result = queryMysql("SELECT * FROM members WHERE user='$user'");       if ($result->rowCount())         $error = 'That username already exists<br><br>';       else       {         queryMysql("INSERT INTO members VALUES('$user', '$pass')");         die('<h4>Account created</h4>Please Log in.</div></body></html>');       }     }   } echo <<<_END       <form method='post' action='signup.php?r=$randstr'>$error       <div data-role='fieldcontain'>         <label></label>         Please enter your details to sign up       </div>       <div data-role='fieldcontain'>         <label>Username</label>         <input type='text' maxlength='16' name='user' value='$user'           onBlur='checkUser(this)'>         <label></label><div id='used'>&nbsp;</div>       </div>       <div data-role='fieldcontain'>         <label>Password</label>         <input type='text' maxlength='16' name='pass' value='$pass'>       </div>       <div data-role='fieldcontain'>         <label></label>         <input data-transition='slide' type='submit' value='Sign Up'>       </div>     </div>   </body> </html> _END; ?> </code></pre> <h1 id="checkuserphp">checkuser.php</h1> <p>配合<em>signup.php</em>，这里是示例 29-6，<em>checkuser.php</em>，它在数据库中查找用户名并返回指示它是否已经被使用的字符串。因为它依赖于<code>sanitizeString</code>和<code>queryMysql</code>函数，程序首先包含文件<em>functions.php</em>。</p> <p>然后，如果<code>$_POST</code>变量<code>user</code>有值，函数将在数据库中查找它，并根据它是否作为用户名存在输出“对不起，用户名<em><code>user</code></em>已被使用”或“用户名<em><code>user</code></em>可用”。只需检查函数调用返回的值<code>$result->rowCount</code>即可，如果未找到名称，则返回<code>0</code>，如果找到，则返回<code>1</code>。</p> <p>HTML 实体<code>&#x2718;</code>和<code>&#x2714;</code>也用于在字符串前面加上红叉或绿勾，并且根据<em>styles.css</em>中定义的<code>taken</code>类显示红色或<code>available</code>类显示绿色，本章后面将显示。</p> <h5 id="示例-29-6-checkuserphp">示例 29-6. checkuser.php</h5> <pre><code class="language-php"><?php // Example 06: checkuser.php   require_once 'functions.php';   if (isset($_POST['user']))   {     $user   = sanitizeString($_POST['user']);     $result = queryMysql("SELECT * FROM members WHERE user='$user'");     if ($result->rowCount())       echo  "<span class='taken'>&nbsp;&#x2718; " .             "The username '$user' is taken</span>";     else       echo "<span class='available'>&nbsp;&#x2714; " .            "The username '$user' is available</span>";   } ?> </code></pre> <h1 id="loginphp">login.php</h1> <p>现在用户可以在网站上注册了，示例 29-7，<em>login.php</em>提供了让他们登录所需的代码。像注册页面一样，它具有简单的 HTML 表单和一些基本的错误检查，还使用<code>sanitizeString</code>在查询 MySQL 数据库之前。</p> <p>在这里需要注意的主要是，一旦验证用户名和密码成功，会话变量<code>user</code>和<code>pass</code>将分别被赋予用户名和密码的值。只要当前会话保持活动状态，这些变量将被项目中的所有程序访问，从而允许它们自动为已登录用户提供访问权限。</p> <p>如果成功登录，您可能会对<code>die</code>函数的使用感兴趣。这是因为它将<code>echo</code>和<code>exit</code>命令合并在一起，从而节省了一行代码。为了样式化，这个文件（像大多数文件一样）将类<code>main</code>应用于内容，以使其从左侧边缘缩进。</p> <p>当您在浏览器中调用此程序时，它应该看起来像图 29-3。注意在此处使用了<code>password</code>的输入类型，以用星号掩盖密码，防止任何人看到用户的密码。</p> <h5 id="示例-29-7-loginphp">示例 29-7. login.php</h5> <pre><code class="language-php"> <?php // Example 07: login.php   require_once 'header.php';   $error = $user = $pass = "";   if (isset($_POST['user']))   {     $user = sanitizeString($_POST['user']);     $pass = sanitizeString($_POST['pass']);     if ($user == "" || $pass == "")       $error = 'Not all fields were entered';     else     {       $result = queryMySQL("SELECT user,pass FROM members         WHERE user='$user' AND pass='$pass'");       if ($result->rowCount() == 0)       {         $error = "Invalid login attempt";       }       else       {         $_SESSION['user'] = $user;         $_SESSION['pass'] = $pass;         die("<div class='center'>You are now logged in. Please              <a data-transition='slide'   href='members.php?view=$user&r=$randstr'>click here</a>               to continue.</div></div></body></html>");       }     }   } echo <<<_END       <form method='post' action='login.php?r=$randstr'>         <div data-role='fieldcontain'>           <label></label>           <span class='error'>$error</span>         </div>         <div data-role='fieldcontain'>           <label></label>           Please enter your details to log in         </div>         <div data-role='fieldcontain'>           <label>Username</label>           <input type='text' maxlength='16' name='user' value='$user'>         </div>         <div data-role='fieldcontain'>           <label>Password</label>           <input type='password' maxlength='16' name='pass' value='$pass'>         </div>         <div data-role='fieldcontain'>           <label></label>           <input data-transition='slide' type='submit' value='Login'>         </div>       </form>     </div>   </body> </html> _END; ?> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2903.png" alt="" loading="lazy"></p> <h6 id="图-29-3-登录页面">图 29-3. 登录页面</h6> <h1 id="profilephp">profile.php</h1> <p>在注册并登录后，新用户可能希望做的第一件事之一是创建个人资料，这可以通过示例 29-8，<em>profile.php</em>完成。我认为您会在这里找到一些有趣的代码，比如用于上传、调整大小和锐化图像的例程。</p> <p>让我们从代码末尾的主要 HTML 开始。这与您刚刚看到的表单类似，但这次有一个参数<code>enctype='multipart/form-data'</code>。这使我们能够同时发送多种类型的数据，允许上传图片以及一些文本。还有一个<code>file</code>类型的输入，它创建一个“浏览”按钮，用户可以单击以选择要上传的文件。</p> <p>当表单提交时，程序开始时执行的代码。它首先确保用户已登录，然后才允许程序执行继续。只有在这样做后才显示页面标题。</p> <h6 id="注意-170">注意</h6> <p>如第二十三章所述，由于 jQuery Mobile 使用异步通信的方式，使用 HTML 上传文件是不可能的，除非您通过向<code><form></code>元素添加属性<code>data-ajax='false'</code>来禁用该功能。这将允许 HTML 文件上传正常进行，但您将失去执行页面更改动画的能力。</p> <h2 id="添加关于我的文本">添加“关于我”的文本</h2> <p>接下来，检查<code>$_POST</code>变量<code>text</code>，看看是否有文本发布到程序中。如果有，将对其进行过滤，并将所有长的空白序列（包括换行符和回车符）替换为单个空格。此函数包含了双重安全检查，确保用户实际存在于数据库中，并且在将此文本插入数据库中成为用户的“关于我”详情之前，没有任何黑客尝试能够成功。</p> <p>如果没有发布文本，则查询数据库以查看是否已存在任何文本，以便预填充用户编辑的<code><textarea></code>。</p> <h2 id="添加个人资料图片">添加个人资料图片</h2> <p>接下来，我们转到检查<code>$_FILES</code>系统变量是否已上传图像的部分。如果是，则创建一个名为<code>$saveto</code>的字符串变量，基于用户的用户名后跟扩展名<em>.jpg</em>。例如，名为<em>Jill</em>的用户将导致<code>$saveto</code>具有值<em>Jill.jpg</em>。这是保存上传图像以供用户个人资料使用的文件。</p> <p>接下来，检查上传的图像类型，并仅在它是<em>.jpeg</em>、<em>.png</em>或<em>.gif</em>图像时接受。成功后，使用一个<code>imagecreatefrom</code>函数之一将上传的图像填充到变量<code>$src</code>中，根据上传的图像类型。现在，该图像以 PHP 可处理的原始格式存在。如果图像不是允许的类型，则将标志<code>$typeok</code>设置为<code>FALSE</code>，防止处理图像上传代码的最后部分。</p> <h2 id="处理图像">处理图像</h2> <p>首先，我们使用以下语句将图像的尺寸存储在<code>$w</code>和<code>$h</code>中，这是将数组中的值快速分配给单独变量的一种方法：</p> <pre><code class="language-php">list($w, $h) = getimagesize($saveto); </code></pre> <p>然后，使用变量 <code>$max</code> 的值（设置为 <code>100</code>），计算新的尺寸，以确保新图像的宽高比与原图相同，但各维度均不超过 100 像素。这将为变量 <code>$tw</code> 和 <code>$th</code> 赋予所需的新值。如果需要更小或更大的缩略图，只需相应地更改变量 <code>$max</code> 的值即可。</p> <p>接下来，调用 <code>imagecreatetruecolor</code> 函数创建一个新的空画布 <code>$tw</code> 宽、<code>$th</code> 高的 <code>$tmp</code>。然后使用 <code>imagecopyresampled</code> 函数将图像从 <code>$src</code> 重新取样到新的 <code>$tmp</code>。有时重新取样图像会导致略微模糊的副本，因此下一段代码使用 <code>imageconvolution</code> 函数稍微清晰化图像。</p> <p>最后，将图像保存为 <em>.jpeg</em> 文件，保存位置由变量 <code>$saveto</code> 定义，然后使用 <code>imagedestroy</code> 函数从内存中移除原始图像和调整大小后的图像画布，释放所使用的内存。</p> <h2 id="显示当前个人资料">显示当前个人资料</h2> <p>最后但并非最不重要的是，为了在编辑之前让用户查看当前的个人资料，将在输出表单 HTML 之前调用 <em>functions.php</em> 中的 <code>showProfile</code> 函数。如果尚未存在个人资料，则不会显示任何内容。</p> <p>当显示个人资料图像时，会应用 CSS 样式，为其添加边框、阴影，并在其右侧添加边距，以将个人资料文本与图像分隔开。将 示例 29-8 加载到浏览器中的结果显示在 图 29-4 中，您可以看到 <code><textarea></code> 已经预填充了“关于我”的文本。</p> <h5 id="示例-29-8-profilephp">示例 29-8. profile.php</h5> <pre><code class="language-php"><?php // Example 08: profile.php   require_once 'header.php';   if (!$loggedin) die("</div></body></html>");   echo "<h3>Your Profile</h3>";   $result = queryMysql("SELECT * FROM profiles WHERE user='$user'");   if (isset($_POST['text']))   {     $text = sanitizeString($_POST['text']);     $text = preg_replace('/\s\s+/', ' ', $text);     if ($result->rowCount())          queryMysql("UPDATE profiles SET text='$text' where user='$user'");     else queryMysql("INSERT INTO profiles VALUES('$user', '$text')");   }   else   {     if ($result->rowCount())     {       $row  = $result->fetch();       $text = stripslashes($row['text']);     }     else $text = "";   }   $text = stripslashes(preg_replace('/\s\s+/', ' ', $text));   if (isset($_FILES['image']['name']))   {     $saveto = "$user.jpg";     move_uploaded_file($_FILES['image']['tmp_name'], $saveto);     $typeok = TRUE;     switch($_FILES['image']['type'])     {       case "image/gif":   $src = imagecreatefromgif($saveto); break;       case "image/jpeg":  // Both regular and progressive jpegs       case "image/pjpeg": $src = imagecreatefromjpeg($saveto); break;       case "image/png":   $src = imagecreatefrompng($saveto); break;       default:            $typeok = FALSE; break;     }     if ($typeok)     {       list($w, $h) = getimagesize($saveto);       $max = 100;       $tw  = $w;       $th  = $h;       if ($w > $h && $max < $w)       {         $th = $max / $w * $h;         $tw = $max;       }       elseif ($h > $w && $max < $h)       {         $tw = $max / $h * $w;         $th = $max;       }       elseif ($max < $w)       {         $tw = $th = $max;       }       $tmp = imagecreatetruecolor($tw, $th);       imagecopyresampled($tmp, $src, 0, 0, 0, 0, $tw, $th, $w, $h);       imageconvolution($tmp, array(array(-1, -1, -1),         array(-1, 16, -1), array(-1, -1, -1)), 8, 0);       imagejpeg($tmp, $saveto);       imagedestroy($tmp);       imagedestroy($src);     }   }   showProfile($user); echo <<<_END       <form data-ajax='false' method='post'         action='profile.php?r=$randstr' enctype='multipart/form-data'>       <h3>Enter or edit your details and/or upload an image</h3>       <textarea name='text'>$text</textarea><br>       Image: <input type='file' name='image' size='14'>       <input type='submit' value='Save Profile'>       </form>     </div><br>   </body> </html> _END; ?> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2904.png" alt="" loading="lazy"></p> <h6 id="图-29-4-编辑用户配置文件">图 29-4. 编辑用户配置文件</h6> <h1 id="membersphp">members.php</h1> <p>使用 示例 29-9，<em>members.php</em>，您的用户将能够找到其他成员，并选择将其添加为好友（如果他们已经是好友，则删除）。此程序有两种模式。第一种列出所有成员及其与您的关系，第二种显示用户的个人资料。</p> <h2 id="查看用户个人资料">查看用户个人资料</h2> <p>后续代码是为了处理后一种模式，首先检测从 <code>$_GET</code> 数组中获取的变量 <code>view</code> 是否存在。如果存在，则用户想要查看某人的个人资料，因此程序将使用 <code>showProfile</code> 函数执行该操作，并提供一些链接到用户的朋友和消息。</p> <h2 id="添加和删除好友">添加和删除好友</h2> <p>在此之后，将测试两个 <code>$_GET</code> 变量 <code>add</code> 和 <code>remove</code>。如果其中一个变量有值，它将是要添加或删除的用户的用户名。我们通过在 MySQL 的 <em>friends</em> 表中查找用户来实现这一点，并插入或从表中删除该用户名。</p> <p>当然，每个提交的变量都首先通过 <code>sanitizeString</code> 函数进行处理，以确保在与 MySQL 一起使用时安全。</p> <h2 id="列出所有成员">列出所有成员</h2> <p>代码的最后部分发出 SQL 查询来列出所有用户名。代码在输出页面标题之前将返回的数字放入变量<code>$num</code>中。</p> <p>然后，<code>for</code>循环遍历每个成员，获取其详细信息，然后在<em>friends</em>表中查找他们，看他们是被用户关注还是正在关注用户。如果某人既是粉丝又是关注者，则被归类为共同朋友。</p> <p>当用户关注另一个成员时，变量<code>$t1</code>为非零值；当另一个成员关注用户时，变量<code>$t2</code>为非零值。根据这些值，在每个用户名后显示文本，显示与当前用户的关系（如果有的话）。</p> <p>还显示图标以展示这些关系。双向箭头表示用户是共同朋友，左箭头表示用户正在关注另一个成员，右箭头表示另一个成员正在关注用户。</p> <p>最后，根据用户是否在关注另一个成员，提供链接以添加或取消该成员作为朋友。</p> <p>当在浏览器中调用示例 29-9 时，显示效果类似于图 29-5。请注意用户被邀请“关注”一个未关注的成员，但如果成员已经在关注用户，则会提供一个“回礼”链接以回报友谊。如果用户已经在关注另一个成员，则用户可以选择“取消”来结束关注。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2905.png" alt="" loading="lazy"></p> <h6 id="图-29-5-使用成员模块">图 29-5. 使用成员模块</h6> <h6 id="注意-171">注意</h6> <p>在生产服务器上，可能会有数千甚至数十万的用户，因此您将大幅修改此程序，以支持搜索“关于我”文本、分页输出等。</p> <h5 id="示例-29-9-membersphp">示例 29-9. members.php</h5> <pre><code class="language-php"><?php // Example 09: members.php   require_once 'header.php';   if (!$loggedin) die("</div></body></html>");   if (isset($_GET['view']))   {     $view = sanitizeString($_GET['view']);     if ($view == $user) $name = "Your";     else                $name = "$view's";     echo "<h3>$name Profile</h3>";     showProfile($view);     echo "<a data-role='button' data-transition='slide'           href='messages.php?view=$view&r=$randstr'>View $name messages</a>";     die("</div></body></html>");   }   if (isset($_GET['add']))   {     $add = sanitizeString($_GET['add']);     $result = queryMysql("SELECT * FROM friends   WHERE user='$add' AND friend='$user'");     if (!$result->rowCount)       queryMysql("INSERT INTO friends VALUES ('$add', '$user')");   }   elseif (isset($_GET['remove']))   {     $remove = sanitizeString($_GET['remove']);     queryMysql("DELETE FROM friends   WHERE user='$remove' AND friend='$user'");   }   $result = queryMysql("SELECT user FROM members ORDER BY user");   $num    = $result->rowCount();   while ($row = $result->fetch())   {     if ($row['user'] == $user) continue;     echo "<li><a data-transition='slide' href='members.php?view=" .       $row['user'] . "&$randstr'>" . $row['user'] . "</a>";     $follow = "follow";     $result1 = queryMysql("SELECT * FROM friends WHERE       user='" . $row['user'] . "' AND friend='$user'");     $t1      = $result1->rowCount();     $result1 = queryMysql("SELECT * FROM friends WHERE       user='$user' AND friend='" . $row['user'] . "'");     $t2      = $result1->rowCount();     if (($t1 + $t2) > 1) echo " &harr; is a mutual friend";     elseif ($t1)         echo " &larr; you are following";     elseif ($t2)       { echo " &rarr; is following you";                          $follow = "recip"; }     if (!$t1) echo " [<a data-transition='slide'       href='members.php?add=" . $row['user'] . "&r=$randstr'>$follow</a>]";     else      echo " [<a data-transition='slide'       href='members.php?remove=" . $row['user'] . "&r=$randstr'>drop</a>]";   } ?>     </ul></div>   </body> </html> </code></pre> <h1 id="friendsphp">friends.php</h1> <p>显示用户的朋友和粉丝的模块是示例 29-10，<em>friends.php</em>。这个程序像<em>members.php</em>一样查询<em>friends</em>表，但只针对单个用户。然后显示所有该用户的共同朋友和粉丝，以及他们正在关注的人。</p> <p>所有粉丝都保存在名为<code>$followers</code>的数组中，所有正在关注的人都放在名为<code>$following</code>的数组中。然后使用一段整洁的代码来提取所有既是粉丝又被用户关注的人，如下所示：</p> <pre><code class="language-php">$mutual = array_intersect($followers, $following); </code></pre> <p>函数<code>array_intersect</code>提取两个数组中共同的所有成员，并返回一个新数组，其中仅包含这些人。然后可以使用<code>array_diff</code>函数来分别处理<code>$followers</code>和<code>$following</code>数组，只保留<em>不是</em>共同朋友的人，如下所示：</p> <pre><code class="language-php">$followers = array_diff($followers, $mutual); $following = array_diff($following, $mutual); </code></pre> <p>这导致数组<code>$mutual</code>仅包含共同的朋友，<code>$followers</code>仅包含粉丝（没有共同朋友），<code>$following</code>仅包含正在关注的人（没有共同朋友）。</p> <p>现在我们掌握了这些数组，分别显示每个类别的成员就变得非常简单，如 Figure 29-6 所示。PHP 的<code>sizeof</code>函数返回数组中元素的数量；在这里，我仅在大小非零时触发代码（即当该类型的朋友存在时）。请注意，通过在相关位置使用变量<code>$name1</code>、<code>$name2</code>和<code>$name3</code>，代码可以知道您正在查看自己的朋友列表，并使用<em>Your</em>和<em>You are</em>而不仅仅显示用户名。如果希望在此屏幕上显示用户的个人资料信息，则可以取消注释该行。</p> <h5 id="example-29-10-friendsphp">Example 29-10. friends.php</h5> <pre><code class="language-php"><?php // Example 10: friends.php   require_once 'header.php';   if (!$loggedin) die("</div></body></html>");   if (isset($_GET['view'])) $view = sanitizeString($_GET['view']);   else                      $view = $user;   if ($view == $user)   {     $name1 = $name2 = "Your";     $name3 =          "You are";   }   else   {     $name1 = "<a data-transition='slide'               href='members.php?view=$view&r=$randstr'>$view</a>'s";     $name2 = "$view's";     $name3 = "$view is";   }   // Uncomment this line if you wish the user’s profile to show here   // showProfile($view);   $followers = array();   $following = array();   $result = queryMysql("SELECT * FROM friends WHERE user='$view'");   while ($row = $result->fetch())   {     $followers[$j] = $row['friend'];   }   $result = queryMysql("SELECT * FROM friends WHERE friend='$view'");   while ($row = $result->fetch())   {     $following[$j] = $row['user'];   }   $mutual    = array_intersect($followers, $following);   $followers = array_diff($followers, $mutual);   $following = array_diff($following, $mutual);   $friends   = FALSE;   echo "<br>";   if (sizeof($mutual))   {     echo "<span class='subhead'>$name2 mutual friends</span><ul>";     foreach($mutual as $friend)       echo "<li><a data-transition='slide'             href='members.php?view=$friend&r=$randstr'>$friend</a>";     echo "</ul>";     $friends = TRUE;   }   if (sizeof($followers))   {     echo "<span class='subhead'>$name2 followers</span><ul>";     foreach($followers as $friend)       echo "<li><a data-transition='slide'             href='members.php?view=$friend&r=$randstr'>$friend</a>";     echo "</ul>";     $friends = TRUE;   }   if (sizeof($following))   {     echo "<span class='subhead'>$name3 following</span><ul>";     foreach($following as $friend)       echo "<li><a data-transition='slide'             href='members.php?view=$friend&r=$randstr'>$friend</a>";     echo "</ul>";     $friends = TRUE;   }   if (!$friends) echo "<br>You don't have any friends yet."; ?>     </div><br>   </body> </html> </code></pre> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2906.png" alt="" loading="lazy"></p> <h6 id="figure-29-6-显示用户的朋友和追随者">Figure 29-6. 显示用户的朋友和追随者</h6> <h1 id="messagesphp">messages.php</h1> <p>主要模块的最后一个是 Example 29-11，<em>messages.php</em>。程序首先检查变量<code>text</code>中是否有消息发布。如果有，它将被插入到<em>messages</em>表中。同时，<code>pm</code>的值也被存储。这表示消息是私有还是公共的。<code>0</code>代表公共消息，<code>1</code>代表私有消息。</p> <p>接下来，显示用户的个人资料以及输入消息的表单，还有用于选择私有或公共消息的单选按钮。之后，根据它们是私有还是公共消息，显示所有的消息。如果是公共消息，所有用户都可以看到，但私有消息只有发件人和收件人可以看到。所有这些都通过对 MySQL 数据库的一些查询来处理。另外，当消息是私有时，它会以<em>whispered</em>开头并显示为斜体。</p> <p>最后，程序显示几个链接，用于刷新消息（以防其他用户同时发布消息）和查看用户的朋友。再次使用变量<code>$name1</code>和<code>$name2</code>的技巧，使得在查看自己的个人资料时，显示为<em>Your</em>而不是用户名。</p> <h5 id="example-29-11-messagesphp">Example 29-11. messages.php</h5> <pre><code class="language-php"><?php // Example 11: messages.php   require_once 'header.php';   if (!$loggedin) die("</div></body></html>");   if (isset($_GET['view'])) $view = sanitizeString($_GET['view']);   else                      $view = $user;   if (isset($_POST['text']))   {     $text = sanitizeString($_POST['text']);     if ($text != "")     {       $pm   = substr(sanitizeString($_POST['pm']),0,1);       $time = time();       queryMysql("INSERT INTO messages VALUES(NULL, '$user',         '$view', '$pm', $time, '$text')");     }   }   if ($view != "")   {     if ($view == $user) $name1 = $name2 = "Your";     else     {       $name1 = "<a href='members.php?view=$view&r=$randstr'>$view</a>'s";       $name2 = "$view's";     }     echo "<h3>$name1 Messages</h3>";     showProfile($view);     echo <<<_END       <form method='post' action='messages.php?view=$view&r=$randstr'>         <fieldset data-role="controlgroup" data-type="horizontal">           <legend>Type here to leave a message</legend>           <input type='radio' name='pm' id='public' value='0' checked='checked'>           <label for="public">Public</label>           <input type='radio' name='pm' id='private' value='1'>           <label for="private">Private</label>         </fieldset>       <textarea name='text'></textarea>       <input data-transition='slide' type='submit' value='Post Message'>     </form><br> _END;     date_default_timezone_set('UTC');     if (isset($_GET['erase']))     {       $erase = sanitizeString($_GET['erase']);       queryMysql("DELETE FROM messages WHERE id='$erase' AND recip='$user'");     }     $query  = "SELECT * FROM messages WHERE recip='$view' ORDER BY time DESC";     $result = queryMysql($query);     while ($row = $result->fetch())     {       if ($row['pm'] == 0 || $row['auth'] == $user || $row['recip'] == $user)       {         echo date('M jS \'y g:ia:', $row['time']);         echo " <a href='messages.php?view=" . $row['auth'] .              "&r=$randstr'>" . $row['auth']. "</a> ";         if ($row['pm'] == 0)           echo "wrote: &quot;" . $row['message'] . "&quot; ";         else           echo "whispered: <span class='whisper'>&quot;" .             $row['message']. "&quot;</span> ";         if ($row['recip'] == $user)           echo "[<a href='messages.php?view=$view" .                "&erase=" . $row['id'] . "&r=$randstr'>erase</a>]";         echo "<br>";       }     }   }   if (!$num)     echo "<br><span class='info'>No messages yet</span><br><br>";   echo "<br><a data-role='button'         href='messages.php?view=$view&r=$randstr'>Refresh messages</a>"; ?>     </div><br>   </body> </html> </code></pre> <p>您可以在浏览器中查看此程序的结果，如 Figure 29-7 所示。请注意，用户查看自己的消息时，提供了链接以删除不想保留的任何消息。还要注意，jQuery Mobile 如何实现对选择发送私有或公共消息的单选按钮的样式化。这在 Chapter 23 中有详细说明。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2907.png" alt="" loading="lazy"></p> <h6 id="figure-29-7-the-messaging-module">Figure 29-7. The messaging module</h6> <h1 id="logoutphp">logout.php</h1> <p>我们社交网络食谱的最后一步是示例 29-12 的<em>logout.php</em>，这是一个登出页面，用于关闭会话并删除任何相关数据和 cookie。调用此程序的结果显示在图 29-8 中，用户现在被要求点击一个链接，该链接将带他们到未登录的主页，并从屏幕顶部删除登录链接。当然，您也可以编写 JavaScript 或 PHP 重定向来执行此操作（如果您希望保持登出的整洁状态，则这可能是个好主意）。</p> <p><img src="https://gitee.com/OpenDocCN/ibooker-php-zh/raw/master/docs/lrn-php-mysql-js-6e/img/pmj6_2908.png" alt="" loading="lazy"></p> <h6 id="图-29-8-登出页面">图 29-8. 登出页面</h6> <h5 id="示例-29-12-logoutphp">示例 29-12. logout.php</h5> <pre><code class="language-php"><?php // Example 12: logout.php   require_once 'header.php';   if (isset($_SESSION['user']))   {     destroySession();     echo "<br><div class='center'>You have been logged out. Please          <a data-transition='slide'   href='index.php?r=$randstr'>click here</a>           to refresh the screen.</div>";   }   else echo "<div class='center'>You cannot log out because   you are not logged in</div>"; ?>     </div>   </body> </html> </code></pre> <h1 id="stylescss">styles.css</h1> <p>此项目使用的样式表显示在示例 29-13 中。以下是几组声明：</p> <p><dfn class="keep-together"><code>*</code></dfn></p> <p>使用通用选择器为项目设置默认字体系列和大小。</p> <p><dfn class="keep-together"><code>body</code></dfn></p> <p>设置项目窗口的宽度，水平居中，指定背景颜色，并添加边框。</p> <p><dfn class="keep-together"><code>html</code></dfn></p> <p>设置 HTML 部分的背景颜色。</p> <p><dfn class="keep-together"><code>img</code></dfn></p> <p>给所有图像添加边框、阴影和右侧边距。</p> <p><dfn class="keep-together"><code>.username</code></dfn></p> <p>居中用户名，并选择字体系列、大小、颜色、背景和填充以显示它。</p> <p><dfn class="keep-together"><code>.info</code></dfn></p> <p>此类用于显示重要信息。它设置了背景和前景文本颜色，应用了边框和填充，并缩进了使用它的元素。</p> <p><dfn class="keep-together"><code>.center</code></dfn></p> <p>此类用于居中<code><div></code>元素的内容。</p> <p><dfn class="keep-together"><code>.subhead</code></dfn></p> <p>此类强调文本的各个部分。</p> <p><dfn class="keep-together"><code>.taken</code>、<code>.available</code>、<code>.error</code>和<code>.whisper</code></dfn></p> <p>这些声明设置用于显示不同类型信息的颜色和字体样式。</p> <p><dfn class="keep-together"><code>#logo</code></dfn></p> <p>将 logo 文本样式设为 HTML5 以外的浏览器中使用时的备用，以及当画布 logo 无法创建时。</p> <p><dfn class="keep-together"><code>#robin</code></dfn></p> <p>对页面标题中的 robin 图像进行对齐。</p> <p><dfn class="keep-together"><code>#used</code></dfn></p> <p>确保由<em>checkuser.php</em>异步调用填充的元素，如果用户名已被使用，则不会与上面的字段太接近。</p> <h5 id="示例-29-13-stylescss">示例 29-13. styles.css</h5> <pre><code class="language-php">* {   font-family:verdana,sans-serif;   font-size  :14pt; } body {   width     :700px;   margin    :20px auto;   background:#f8f8f8;   border    :1px solid #888; } html {   background:#fff } img {   border            :1px solid black;   margin-right      :15px;   -moz-box-shadow   :2px 2px 2px #888;   -webkit-box-shadow:2px 2px 2px #888;   box-shadow        :2px 2px 2px #888; } .username {   text-align :center;   background :#eb8;   color      :#40d;   font-family:helvetica;   font-size  :20pt;   padding    :4px; } .info {   font-style :italic;   margin     :40px 0px;   text-align :center; } .center {   text-align:center; } .subhead {   font-weight:bold; } .taken, .error {   color:red; } .available {   color:green; } .whisper {   font-style:italic;   color     :#006600; } #logo {   font-family:Georgia;   font-weight:bold;   font-style :italic;   font-size  :97px;   color      :red;   } #robin {   position          :relative;   border            :0px;   margin-left       :-6px;   margin-right      :0px;   top               :17px; -moz-box-shadow   :0px 0px 0px; -webkit-box-shadow:0px 0px 0px; box-shadow        :0px 0px 0px; } #used {   margin-top:50px; } </code></pre> <h1 id="javascriptjs">javascript.js</h1> <p>最后，还有 JavaScript 文件（见示例 29-14），其中包含本书中始终使用的<code>O</code>、<code>S</code>和<code>C</code>函数。</p> <h5 id="示例-29-14-javascriptjs">示例 29-14. javascript.js</h5> <pre><code class="language-php">function O(i) { return typeof i == 'object' ? i : document.getElementById(i) } function S(i) { return O(i).style } function C(i) { return document.getElementsByClassName(i) } </code></pre> <p>如众所周知，这就是全部。如果您基于此代码或本书中的其他示例编写了任何内容，或者从中获得了其他收获，我很高兴能够提供帮助，并感谢您阅读本书。</p> <h1 id="问题-28">问题</h1> <ol> <li>你喜欢从这本书中学到了什么？</li> </ol> <p>查看“第二十九章答案”，在附录 A 中找到这个问题的答案。</p> <h1 id="附录-a-章节问题的解决方案">附录 A. 章节问题的解决方案</h1> <h1 id="第一章答案">第一章答案</h1> <ol> <li></li> </ol> <p>网页服务器（如 Apache）、服务器端脚本语言（PHP）、数据库（MySQL）和客户端脚本语言（JavaScript）。</p> <ol start="2"> <li></li> </ol> <p><em>超文本标记语言</em>：网页本身，包括文本和标记标签。</p> <ol start="3"> <li></li> </ol> <p>就像几乎所有基于 SQL 的数据库引擎一样，MySQL 接受 <em>结构化查询语言</em>（SQL）命令。SQL 是每个用户（包括 PHP 程序）与 MySQL 通信的方式。</p> <ol start="4"> <li></li> </ol> <p>PHP 运行在服务器端，而 JavaScript 运行在客户端。PHP 可以与数据库通信以存储和检索数据，但不能快速和动态地改变用户的网页。JavaScript 则具有相反的优点和缺点。</p> <ol start="5"> <li></li> </ol> <p><em>层叠样式表</em>：应用于 HTML 文档中元素的样式和布局规则。</p> <ol start="6"> <li></li> </ol> <p>HTML5 中可能最有趣的新元素是 <code><audio></code>、<code><video></code> 和 <code><canvas></code>，尽管还有许多其他元素，如 <code><article></code>、<code><summary></code>、<code><footer></code> 等等。</p> <ol start="7"> <li></li> </ol> <p>这些技术有些由接受 Bug 报告并像任何软件公司一样修复错误的公司控制。但开源软件还依赖于社区，因此你的 Bug 报告可能会被懂得代码的任何用户处理。也许将来你自己会修复开源工具中的 Bug。</p> <ol start="8"> <li></li> </ol> <p>它允许开发人员专注于构建网站或 Web 应用程序的核心功能，将平台（无论是 Linux、macOS、Windows、iOS 还是 Android）、屏幕尺寸或运行的浏览器的外观和运行任务交给框架来完成。</p> <h1 id="第二章答案">第二章答案</h1> <ol> <li></li> </ol> <p>WAMP 代表 <em>Windows, Apache, MySQL, 和 PHP</em>。MAMP 中的 <em>M</em> 代表 <em>Mac</em> 而不是 Windows，而 LAMP 中的 <em>L</em> 代表 <em>Linux</em>。它们都指的是一套用于托管动态网页的完整解决方案。</p> <ol start="2"> <li></li> </ol> <p><strong>127.0.0.1</strong> 和 <em><a href="http://localhost" target="_blank">http://localhost</a></em> 都是指向本地计算机的方式。当 WAMP 或 MAMP 正确配置时，你可以在浏览器地址栏中输入任一地址来调用本地服务器上的默认页面。</p> <ol start="3"> <li></li> </ol> <p>FTP 是 <em>文件传输协议</em> 的缩写。FTP 程序用于在客户端和服务器之间传输文件。</p> <ol start="4"> <li></li> </ol> <p>需要将文件通过 FTP 传输到远程服务器才能更新它们，如果在一个会话中多次执行此操作，则可能显著增加开发时间。</p> <ol start="5"> <li></li> </ol> <p>专用的程序编辑器很聪明，可以在你运行代码之前就高亮显示问题。</p> <h1 id="第三章答案">第三章答案</h1> <ol> <li></li> </ol> <p>使用的标签是 <code><?php...?></code>。虽然可以缩短为 <code><?...?></code>，但不推荐这样做。</p> <ol start="2"> <li></li> </ol> <p>你可以使用 <code>//</code> 进行单行注释或使用 <code>/ * ... * /</code> 跨越多行。</p> <ol start="3"> <li></li> </ol> <p>所有 PHP 语句必须以分号 (<code>;</code>) 结束。</p> <ol start="4"> <li></li> </ol> <p>除了常量外，所有 PHP 变量必须以 <code>$</code> 开头。</p> <ol start="5"> <li></li> </ol> <p>变量保存一个可以是字符串、数字或其他数据的值。</p> <ol start="6"> <li></li> </ol> <p><code>$variable = 1</code>是一个赋值语句，而<code>$variable == 1</code>中的<code>==</code>是一个比较运算符。使用<code>$variable = 1</code>设置<code>$variable</code>的值。使用<code>$variable == 1</code>在程序后面找出<code>$variable</code>是否等于<code>1</code>。如果您错误地使用了<code>$variable = 1</code>而您本意是做一个比较，它会做两件您可能不想做的事情：将<code>$variable</code>设置为<code>1</code>并始终返回<code>true</code>值，不管其之前的值是什么。</p> <ol start="7"> <li></li> </ol> <p>在 PHP 中，连字符保留用于减法、递减和否定运算符。如果变量名中也允许使用连字符，则像<code>$current-user</code>这样的构造将更难以解释，并且无论如何都会使程序产生歧义。</p> <ol start="8"> <li></li> </ol> <p>是的，变量名是区分大小写的。<code>$This_Variable</code>与<code>$this_variable</code>不相同。</p> <ol start="9"> <li></li> </ol> <p>不能在变量名中使用空格，因为这会混淆 PHP 解析器。而是尝试使用<code>_</code>（下划线）。</p> <ol start="10"> <li></li> </ol> <p>要将一个变量类型转换为另一个，引用它，PHP 将自动为您转换它。</p> <ol start="11"> <li></li> </ol> <p><code>++$j</code>和<code>$j++</code>之间没有区别，除非测试<code>$j</code>的值，将其赋值给另一个变量或作为参数传递给函数。在这种情况下，<code>++$j</code>在执行测试或其他操作之前递增<code>$j</code>，而<code>$j++</code>执行操作然后递增<code>$j</code>。</p> <ol start="12"> <li></li> </ol> <p>通常情况下，<code>&&</code>和<code>and</code>操作符是可以互换的，除非优先级很重要，在这种情况下，<code>&&</code>的优先级较高，而<code>and</code>的优先级较低。</p> <ol start="13"> <li></li> </ol> <p>您可以在引号内使用多行或使用<code><<<_END..._END;</code>构造来创建多行<code>echo</code>或赋值。在后一种情况下，关闭标记必须单独位于一行上，前后都不能有任何内容。</p> <ol start="14"> <li></li> </ol> <p>由于定义了常量，因此不能重新定义常量，直到程序终止为止，它们将保留其值。</p> <ol start="15"> <li></li> </ol> <p>您可以使用<code>\'</code>或<code>\"</code>来转义单引号或双引号。</p> <ol start="16"> <li></li> </ol> <p><code>echo</code>和<code>print</code>命令相似，它们都是构造，但<code>print</code>行为类似于 PHP 函数，并接受单个参数，而<code>echo</code>可以接受多个参数。</p> <ol start="17"> <li></li> </ol> <p>函数的目的是将代码的离散部分分离到它们自己的自包含部分，并通过单个函数名称引用它们。</p> <ol start="18"> <li></li> </ol> <p>通过将变量声明为<code>global</code>，可以使其在 PHP 程序的所有部分中可访问。</p> <ol start="19"> <li></li> </ol> <p>如果在函数内生成数据，可以通过返回值或修改全局变量将数据传递给程序的其余部分。</p> <ol start="20"> <li></li> </ol> <p>当你将字符串与数字结合时，结果是另一个字符串。</p> <h1 id="第四章答案">第四章答案</h1> <ol> <li></li> </ol> <p>在 PHP 中，<code>TRUE</code>表示值<code>1</code>，<code>FALSE</code>表示<code>NULL</code>，可以认为是“nothing”，并输出为空字符串。</p> <ol start="2"> <li></li> </ol> <p>表达式的最简单形式是字面量（如数字和字符串）和变量，它们仅仅评估为它们自己。</p> <ol start="3"> <li></li> </ol> <p>一元、二元和三元运算符的区别在于它们所需的操作数数量（分别为一、二和三个）。</p> <ol start="4"> <li></li> </ol> <p>强制自定义操作符优先级的最佳方法是在希望赋予高优先级的子表达式周围放置括号。</p> <ol start="5"> <li></li> </ol> <p>运算符结合性指的是处理方向（从左到右或从右到左）。</p> <ol start="6"> <li></li> </ol> <p>当您希望绕过 PHP 的自动操作数类型更改（也称为<em>类型转换</em>）时，可以使用身份运算符。</p> <ol start="7"> <li></li> </ol> <p>三种条件语句类型是<code>if</code>、<code>switch</code>和<code>?:</code>运算符。</p> <ol start="8"> <li></li> </ol> <p>要跳过循环的当前迭代并继续下一个迭代，使用<code>continue</code>语句。</p> <ol start="9"> <li></li> </ol> <p>使用<code>for</code>语句的循环比<code>while</code>循环更强大，因为它们支持两个额外的参数来控制循环处理。</p> <ol start="10"> <li></li> </ol> <p>大多数条件表达式在<code>if</code>和<code>while</code>语句中是字面量（或布尔值），因此在评估为<code>TRUE</code>时触发执行。数值表达式在评估为非零值时触发执行。字符串表达式在评估为非空字符串时触发执行。<code>NULL</code>值评估为 false，因此不会触发执行。</p> <h1 id="第五章答案">第五章答案</h1> <ol> <li></li> </ol> <p>使用函数可以避免多次复制或重写类似代码段的需要，通过将语句集合组合在一起，可以通过简单名称调用它们。</p> <ol start="2"> <li></li> </ol> <p>默认情况下，函数可以返回单个值。但通过利用数组、引用和全局变量，它可以返回任意数量的值。</p> <ol start="3"> <li></li> </ol> <p>当您通过名称使用变量，例如将其值分配给另一个变量或将其值传递给函数时，其值会被复制。当副本更改时，原始值不会更改。但如果引用变量，则仅使用指向其值的指针（或引用），因此一个值可以被多个名称引用。更改引用的值将同时更改原始值。</p> <ol start="4"> <li></li> </ol> <p>作用域是指程序中可以访问变量的部分。例如，全局作用域的变量可以被 PHP 程序的所有部分访问。</p> <ol start="5"> <li></li> </ol> <p>要在另一个文件中包含一个文件，可以使用<code>include</code>或<code>require</code>指令或它们的安全变体<code>include_once</code>和<code>require_once</code>。</p> <ol start="6"> <li></li> </ol> <p>函数是一组通过名称引用的语句，可以接收和返回值。对象可以包含零个或多个函数（然后称为方法）以及变量（称为属性），所有这些组合在一个单元中。</p> <ol start="7"> <li></li> </ol> <p>要在 PHP 中创建一个新对象，可以像这样使用<code>new</code>关键字：</p> <pre><code class="language-php">$object = new Class; </code></pre> <ol start="8"> <li></li> </ol> <p>要创建子类，使用<code>extends</code>关键字，语法如下：</p> <pre><code class="language-php">class Subclass extends Parentclass ... </code></pre> <ol start="9"> <li></li> </ol> <p>若要在创建对象时初始化对象，可以通过在类中创建构造方法<code>__construct</code>并在其中放置初始化代码来调用初始化代码段。</p> <ol start="10"> <li></li> </ol> <p>在类中显式声明属性不是必需的，因为它们在首次使用时将隐式声明。但这被认为是良好的编程实践，因为它有助于代码的可读性和调试，并且对于可能需要维护您代码的其他人来说尤为有用。</p> <h1 id="第六章答案">第六章答案</h1> <ol> <li></li> </ol> <p>数值数组可以使用数字或数值变量进行数字索引。关联数组使用字母数字标识符索引元素。</p> <ol start="2"> <li></li> </ol> <p><code>array</code> 关键字的主要好处是它使您能够一次向数组分配多个值，而不必重复数组名称。</p> <ol start="3"> <li></li> </ol> <p><code>each</code> 函数和 <code>foreach...as</code> 循环结构都返回数组中的元素；两者都从开头开始并递增指针，以确保下一个元素在下一次调用或迭代中返回，并且当达到数组末尾时都返回 <code>FALSE</code>。不同之处在于 <code>each</code> 函数返回单个元素，因此通常包装在循环中。<code>foreach...as</code> 结构已经是一个循环，重复执行直到数组耗尽或您明确中断循环。</p> <ol start="4"> <li></li> </ol> <p>要创建多维数组，您需要为父数组的元素分配额外的数组。</p> <ol start="5"> <li></li> </ol> <p>您可以使用 <code>count</code> 函数计算数组中元素的数量。</p> <ol start="6"> <li></li> </ol> <p><code>explode</code> 函数的目的是从字符串中提取由标识符分隔的部分，例如从句子中用空格分隔的单词。</p> <ol start="7"> <li></li> </ol> <p>要将 PHP 内部数组的指针重置回到第一个元素，调用 <code>reset</code> 函数。</p> <h1 id="第七章答案">第七章答案</h1> <ol> <li></li> </ol> <p>用于显示浮点数的转换说明符是 <code>%f</code>。</p> <ol start="2"> <li></li> </ol> <p>要从输入字符串 <code>"Happy Birthday"</code> 输出字符串 <code>"**Happy"</code>，您可以使用类似这样的 <code>printf</code> 语句：</p> <pre><code class="language-php">printf("%'*7.5s", "Happy Birthday"); </code></pre> <ol start="3"> <li></li> </ol> <p>要将 <code>printf</code> 的输出发送到变量而不是浏览器，您可以使用 <code>sprintf</code>。</p> <ol start="4"> <li></li> </ol> <p>要创建 2025 年 5 月 2 日上午 7:11 的 Unix 时间戳，可以使用以下命令：</p> <pre><code class="language-php">$timestamp = mktime(7, 11, 0, 5, 2, 2025); </code></pre> <ol start="5"> <li></li> </ol> <p>您可以使用 <code>fopen</code> 的 <code>w+</code> 文件访问模式以写入和读取模式打开文件，并将文件截断，并将文件指针置于开头。</p> <ol start="6"> <li></li> </ol> <p>删除文件 <em>file.txt</em> 的 PHP 命令如下：</p> <pre><code class="language-php">unlink('file.txt'); </code></pre> <ol start="7"> <li></li> </ol> <p>PHP 函数 <code>file_get_contents</code> 用于一次性读取整个文件。如果提供了 URL，它也会从互联网上读取文件。</p> <ol start="8"> <li></li> </ol> <p>PHP 超级全局关联数组 <code>$_FILES</code> 包含关于上传文件的详细信息。</p> <ol start="9"> <li></li> </ol> <p>PHP 的 <code>exec</code> 函数允许运行系统命令。</p> <ol start="10"> <li></li> </ol> <p>在 HTML5 中，您可以使用 XHTML 样式的标签（例如 <code><hr /></code>）或标准的 HTML4 样式（例如 <code><hr></code>）。完全取决于您或您公司的编码风格。</p> <h1 id="第八章答案">第八章答案</h1> <ol> <li></li> </ol> <p>MySQL 中的分号用于分隔或结束命令。如果您忘记输入它，MySQL 将发出提示，并等待您输入。</p> <ol start="2"> <li></li> </ol> <p>要查看可用的数据库，输入<code>SHOW databases</code>。要查看正在使用的数据库中的表，输入<code>SHOW tables</code>。（这些命令不区分大小写。）</p> <ol start="3"> <li></li> </ol> <p>要创建这个新用户，可以像这样使用<code>GRANT</code>命令：</p> <pre><code class="language-php">GRANT PRIVILEGES ON newdatabase.* TO 'newuser'@'localhost' IDENTIFIED BY 'newpassword'; </code></pre> <ol start="4"> <li></li> </ol> <p>要查看表的结构，输入<code>DESCRIBE tablename</code>。</p> <ol start="5"> <li></li> </ol> <p>MySQL 索引的目的是通过向表中的一个或多个关键列添加一些元数据，从而大幅度减少数据库访问时间，可以快速搜索表内的行。</p> <ol start="6"> <li></li> </ol> <p><code>FULLTEXT</code>索引使自然语言查询能够在<code>FULLTEXT</code>列中的任何位置找到关键字，类似于使用搜索引擎。</p> <ol start="7"> <li></li> </ol> <p><em>停用词</em> 是一种非常常见的词，因此认为不值得包含在<code>FULLTEXT</code>索引或在搜索中使用。但是，在由双引号限定的较大字符串中时，它将包含在搜索中。</p> <ol start="8"> <li></li> </ol> <p><code>SELECT DISTINCT</code> 实质上只影响显示，选择一行并消除所有重复。<code>GROUP BY</code> 不会消除行，而是将具有相同值的所有行组合在一起。因此，<code>GROUP BY</code> 对执行诸如<code>COUNT</code>之类的操作非常有用。<code>SELECT</code> <code>DISTINCT</code> 对此目的没有用处。</p> <ol start="9"> <li></li> </ol> <p>要仅返回包含表<em>classics</em>中<em>author</em>列的某处有<em>Langhorne</em>单词的行，请使用以下命令：</p> <pre><code class="language-php">SELECT * FROM classics WHERE author LIKE "%Langhorne%"; </code></pre> <ol start="10"> <li></li> </ol> <p>当您将两个表连接在一起时，它们必须共享至少一个公共列，例如 ID 号码或者像<em>classics</em>和<em>customers</em>表中的<em>isbn</em>列。</p> <h1 id="第九章答案">第九章答案</h1> <ol> <li></li> </ol> <p><em>关系</em> 这个术语指的是两个具有某种关联的数据之间的连接，比如一本书和它的作者，或一本书和购买这本书的客户。像 MySQL 这样的关系数据库专门用于存储和检索这样的关系。</p> <ol start="2"> <li></li> </ol> <p>去重数据和优化表的过程称为<em>规范化</em>。</p> <ol start="3"> <li></li> </ol> <p>第一范式的三条规则如下：</p> <ul> <li> <p>不应该有包含相同类型数据的重复列。</p> </li> <li> <p>所有列应包含单个值。</p> </li> <li> <p>应该有一个主键来唯一标识每一行。</p> </li> </ul> <ol start="4"> <li></li> </ol> <p>要满足第二范式，应将数据在多行之间重复的列移动到它们自己的表中。</p> <ol start="5"> <li></li> </ol> <p>在一对多关系中，来自“一”侧表的主键必须作为一个单独的列（外键）添加到“多”侧表中。</p> <ol start="6"> <li></li> </ol> <p>要创建具有多对多关系的数据库，您需要创建一个包含来自其他两个表的键的中介表。然后，其他表可以通过第三个表彼此引用。</p> <ol start="7"> <li></li> </ol> <p>要启动一个 MySQL 事务，请使用<code>BEGIN</code>或<code>START TRANSACTION</code>命令。要终止事务并取消所有操作，请使用<code>ROLLBACK</code>命令。要终止事务并提交所有操作，请使用<code>COMMIT</code>命令。</p> <ol start="8"> <li></li> </ol> <p>要详细查看查询的工作方式，可以使用 <code>EXPLAIN</code> 命令。</p> <ol start="9"> <li></li> </ol> <p>要将数据库 <em>publications</em> 备份到名为 <em>publications.sql</em> 的文件中，可以使用如下命令：</p> <pre><code class="language-php">mysqldump -u *user* -p*password* publications > publications.sql </code></pre> <h1 id="第十章答案">第十章：答案</h1> <ol> <li></li> </ol> <p>当声明类属性时，PHP 8 允许您在函数调用中提供命名参数，允许您根据它们的参数名而不是参数顺序向函数传递输入数据。</p> <ol start="2"> <li></li> </ol> <p>空安全操作符是 <code>?-></code>，如果遇到 <code>null</code> 值，它将立即返回 <code>null</code> 而不会引发错误。</p> <ol start="3"> <li></li> </ol> <p>在 PHP 8 中，<code>match</code> 表达式可以替代 <code>switch</code> 语句，它比 <code>switch</code> 更好，因为它提供类型安全的比较，支持返回值，不需要 <code>break</code> 语句来退出，并且支持多个匹配值。</p> <ol start="4"> <li></li> </ol> <p>在 PHP 8 中，您现在可以使用 <code>str_contains</code> 函数来确定一个字符串是否存在于另一个字符串中。</p> <ol start="5"> <li></li> </ol> <p>在 PHP 8 中进行浮点数除法计算时，避免除以零错误的最佳方法是使用 <code>fdiv</code> 函数，该函数在除以零时返回 <code>INF</code>、<code>-INF</code>。</p> <ol start="6"> <li></li> </ol> <p>一个 polyfill 是代码，它提供你的代码期望原生支持的功能，并且当原生支持不可用时，你可以将它包含在程序中，以确保你的代码可以继续正确运行。</p> <ol start="7"> <li></li> </ol> <p>在 PHP 8 中，要查看由 <code>preg_</code> 函数调用生成的最近错误的英文解释，可以调用 <code>preg_last_error_msg</code> 函数。</p> <ol start="8"> <li></li> </ol> <p>默认情况下，MySQL 8 现在使用 <code>InnoDB</code> 作为其事务存储引擎。</p> <ol start="9"> <li></li> </ol> <p>在 MySQL 8 中，要更改列名，可以使用 <code>RENAME COLUMN</code> 命令，而不是使用 <code>ALTER TABLE ... CHANGE TABLE</code> 命令。</p> <ol start="10"> <li></li> </ol> <p>MySQL 8 中的默认认证插件是 <code>caching_sha2_password</code>。</p> <h1 id="第十一章答案">第十一章：答案</h1> <ol> <li></li> </ol> <p>要使用 PDO 连接到 MySQL 数据库，请调用 <code>pdo</code> 方法，并传递属性、用户名、密码和选项。成功时将返回连接对象。</p> <ol start="2"> <li></li> </ol> <p>要使用 PDO 向 MySQL 提交查询，请确保首先创建了一个连接到数据库的连接对象，然后调用其 <code>query</code> 方法，并传递查询字符串。</p> <ol start="3"> <li></li> </ol> <p><code>PDO::FETCH_NUM</code> 风格的 <code>fetch</code> 方法可用于将一行作为按列编号索引的数组返回。</p> <ol start="4"> <li></li> </ol> <p>您可以通过将值 <code>null</code> 分配给用于连接数据库的 PDO 对象来手动关闭 PDO 连接。</p> <ol start="5"> <li></li> </ol> <p>向具有 <code>AUTO_INCREMENT</code> 列的表添加行时，应将值 <code>null</code> 传递给该列。</p> <ol start="6"> <li></li> </ol> <p>要转义字符串中的特殊字符，您可以调用 PDO 连接对象的 <code>quote</code> 方法，并将需要转义的字符串作为参数传递。当然，出于安全考虑，使用预处理语句会更好。</p> <ol start="7"> <li></li> </ol> <p>在访问数据库时确保数据库安全的最佳方法是使用占位符。</p> <h1 id="第十二章答案">第十二章：答案</h1> <ol> <li></li> </ol> <p>用于将提交的表单数据传递给 PHP 的关联数组是<code>$_GET</code>（用于 GET 方法）和<code>$_POST</code>（用于 POST 方法）。</p> <ol start="2"> <li></li> </ol> <p>文本框和文本区域的区别在于，尽管它们都接受表单输入的文本，但文本框是单行的，而文本区域可以是多行并包括自动换行。</p> <ol start="3"> <li></li> </ol> <p>要在 Web 表单中提供三个互斥的选择，应使用单选按钮，因为复选框允许多选。</p> <ol start="4"> <li></li> </ol> <p>可以使用带有方括号的数组名称（如<code>choices[]</code>）而不是常规字段名称来提交 Web 表单中的一组选择。然后，每个值将被放入数组中，其长度将是提交的元素数量。</p> <ol start="5"> <li></li> </ol> <p>要将表单字段提交而用户看不到，使用带有属性<code>type="hidden"</code>的隐藏字段。</p> <ol start="6"> <li></li> </ol> <p>可以使用<code><label></code>和<code></label></code>标签封装表单元素及其支持的文本或图形，使整个单元可通过鼠标单击选择。</p> <ol start="7"> <li></li> </ol> <p>要将 HTML 转换为可以显示但不会被浏览器解释为 HTML 的格式，使用 PHP 的<code>htmlentities</code>函数。</p> <ol start="8"> <li></li> </ol> <p>可以使用<code>autocomplete</code>属性帮助用户填写可能已在其他地方提交的数据，该属性提示用户可能的值。</p> <ol start="9"> <li></li> </ol> <p>要确保表单不会因缺少数据而提交，可以对必填输入应用<code>required</code>属性。</p> <h1 id="第十三章答案">第十三章答案</h1> <ol> <li></li> </ol> <p>Cookie 应在网页的 HTML 之前传输，因为它们作为头部的一部分发送。</p> <ol start="2"> <li></li> </ol> <p>要在 Web 浏览器中存储 Cookie，使用<code>setcookie</code>函数。</p> <ol start="3"> <li></li> </ol> <p>要销毁 Cookie，使用<code>setcookie</code>重新发行它，但将其过期日期设置为过去。</p> <ol start="4"> <li></li> </ol> <p>使用 HTTP 身份验证，用户名和密码存储在<code>$_SERVER['PHP_AUTH_USER']</code>和<code>$_SERVER['PHP_AUTH_PW']</code>中。</p> <ol start="5"> <li></li> </ol> <p><code>password_hash</code>函数是一种强大的安全措施，因为它是一种单向函数，将字符串转换为一长串十六进制数字，无法反转，因此只要用户需要强密码（例如至少八个字符，包括随机放置的数字和标点符号），就非常难以破解。</p> <ol start="6"> <li></li> </ol> <p>当字符串经过盐处理时，在<code>hash</code>转换之前会向其添加仅由 Web 服务器（或者如果自己进行盐化，则由程序员）知道的额外字符。这通常应该由 PHP 来处理，以确保具有相同密码的用户不具有相同的哈希，并防止使用预先计算的哈希表。</p> <ol start="7"> <li></li> </ol> <p>PHP 会话是一组对当前用户唯一的变量，随后的请求中传递，以便用户在访问不同页面时仍然可用。</p> <ol start="8"> <li></li> </ol> <p>要启动 PHP 会话，使用<code>session_start</code>函数。</p> <ol start="9"> <li></li> </ol> <p>会话劫持是指黑客某种方式发现现有的会话 ID 并尝试接管它。</p> <ol start="10"> <li></li> </ol> <p>会话固定是指攻击者试图使用错误的会话 ID 强制用户登录，从而危及连接的安全性。</p> <h1 id="第十四章答案">第十四章答案</h1> <ol> <li></li> </ol> <p>要包含 JavaScript 代码，您可以使用<code><script></code>和<code></script></code>标签。</p> <ol start="2"> <li></li> </ol> <p>默认情况下，JavaScript 代码将输出到其所在的文档部分。如果在头部，则输出到头部；如果在主体中，则输出到主体。</p> <ol start="3"> <li></li> </ol> <p>您可以通过复制粘贴或更常见的方式，将其他文件中的 JavaScript 代码包含在您的文档中，即将其作为<code><script src='*filename.js*'></code>标签的一部分。</p> <ol start="4"> <li></li> </ol> <p>PHP 中使用的<code>echo</code>和<code>print</code>命令的 JavaScript 等效函数（或方法）是<code>document.write</code>。</p> <ol start="5"> <li></li> </ol> <p>要在 JavaScript 中创建注释，可以用<code>//</code>作为单行注释的前缀，或用<code>/*</code>和<code>*/</code>括起来作为多行注释。</p> <ol start="6"> <li></li> </ol> <p>JavaScript 字符串连接运算符是<code>+</code>符号。</p> <ol start="7"> <li></li> </ol> <p>在 JavaScript 函数内部，您可以通过在首次赋值时加上<code>var</code>关键字来定义具有局部作用域的变量。</p> <ol start="8"> <li></li> </ol> <p>要在所有主流浏览器中显示与<code>thislink</code>标识的链接分配的 URL，您可以使用以下任意一条命令：</p> <pre><code class="language-php">document.write(document.getElementById('thislink').href) document.write(thislink.href) </code></pre> <ol start="9"> <li></li> </ol> <p>在浏览器历史数组中切换到上一页的命令如下：</p> <pre><code class="language-php">history.back() history.go(-1) </code></pre> <ol start="10"> <li></li> </ol> <p>要用以下命令替换当前文档为<a href="http://oreilly.com" target="_blank">O’Reilly 网站</a>的主页，您可以使用以下命令：</p> <pre><code class="language-php">document.location.href = 'http://oreilly.com' </code></pre> <h1 id="第十五章答案">第十五章答案</h1> <ol> <li></li> </ol> <p>PHP 和 JavaScript 之间布尔值的最显着区别在于 PHP 识别关键字<code>TRUE</code>、<code>true</code>、<code>FALSE</code>和<code>false</code>，而 JavaScript 仅支持<code>true</code>和<code>false</code>。此外，在 PHP 中，<code>TRUE</code>的值为<code>1</code>，<code>FALSE</code>为<code>NULL</code>；而在 JavaScript 中，它们分别表示为可以返回为字符串值的<code>true</code>和<code>false</code>。</p> <ol start="2"> <li></li> </ol> <p>与 PHP 不同，JavaScript 变量名不使用特定字符（如<code>$</code>）。JavaScript 变量名可以以及包含大写和小写字母以及下划线；名称还可以包括数字，但不能作为第一个字符。</p> <ol start="3"> <li></li> </ol> <p>一元、二元和三元运算符的区别在于每个运算符需要的操作数数量（分别为一、二和三个）。</p> <ol start="4"> <li></li> </ol> <p>强制自定义操作符优先级的最佳方法是用括号将表达式中需要先计算的部分括起来。</p> <ol start="5"> <li></li> </ol> <p>当您希望绕过 JavaScript 的自动操作数类型转换时，您可以使用身份运算符。</p> <ol start="6"> <li></li> </ol> <p>表达式的最简单形式是字面值（如数字和字符串）和变量，它们简单地评估为它们自己。</p> <ol start="7"> <li></li> </ol> <p>三种条件语句类型分别是<code>if</code>、<code>switch</code>和<code>?:</code>运算符。</p> <ol start="8"> <li></li> </ol> <p>大多数<code>if</code>和<code>while</code>语句中的条件表达式是字面值或布尔值，因此在评估为<code>true</code>时触发执行。数值表达式在评估为非零值时触发执行。字符串表达式在评估为非空字符串时触发执行。<code>NULL</code>值评估为<code>false</code>，因此不会触发执行。</p> <ol start="9"> <li></li> </ol> <p>使用<code>for</code>语句的循环比<code>while</code>循环更强大，因为它们支持两个额外的参数来控制循环处理。</p> <ol start="10"> <li></li> </ol> <p><code>with</code>语句接受一个对象作为其参数。使用它，您只需一次指定对象；然后，在<code>with</code>块中的每个语句中，该对象被假定存在。</p> <h1 id="第十六章答案">第十六章答案</h1> <ol> <li></li> </ol> <p>JavaScript 中的函数和变量名区分大小写。变量<code>Count</code>、<code>count</code>和<code>COUNT</code>都是不同的。</p> <ol start="2"> <li></li> </ol> <p>要编写一个接受和处理无限数量参数的函数，通过<code>arguments</code>数组访问参数，该数组是所有函数的成员。</p> <ol start="3"> <li></li> </ol> <p>从函数返回多个值的一种方法是将它们全部放入数组中并返回该数组。</p> <ol start="4"> <li></li> </ol> <p>在定义类时，使用<code>this</code>关键字引用当前对象。</p> <ol start="5"> <li></li> </ol> <p>类的方法不一定要在类定义内部定义。如果一个方法在构造函数外部定义，则必须在类定义内将方法名分配给<code>this</code>对象。</p> <ol start="6"> <li></li> </ol> <p>使用<code>new</code>关键字创建新对象。</p> <ol start="7"> <li></li> </ol> <p>通过使用<code>prototype</code>关键字创建一个单一实例，并通过引用传递给类中的所有对象，可以使一个属性或方法对类中的所有对象都可用，而无需在对象内复制它。</p> <ol start="8"> <li></li> </ol> <p>要创建多维数组，将子数组放入父数组中。</p> <ol start="9"> <li></li> </ol> <p>创建关联数组的语法是在花括号内使用<code>*key* : *value*</code>，如下所示：</p> <pre><code class="language-php">assocarray = { "forename" : "Paul", "surname" : "McCartney", "group" : "The Beatles" } </code></pre> <ol start="10"> <li></li> </ol> <p>对一个数字数组进行降序排序的语句如下所示：</p> <pre><code class="language-php">numbers.sort(function(a, b){ return b – a }) </code></pre> <h1 id="第十七章答案">第十七章答案</h1> <ol> <li></li> </ol> <p>可以通过将 JavaScript 的<code>onsubmit</code>属性添加到<code><form></code>标签以在提交前对表单进行验证。确保如果要提交表单，则您的函数返回<code>true</code>，否则返回<code>false</code>。</p> <ol start="2"> <li></li> </ol> <p>要在 JavaScript 中使用正则表达式匹配字符串，请使用<code>test</code>方法。</p> <ol start="3"> <li></li> </ol> <p>用于匹配非单词字符的正则表达式可以是<code>/[^\w]/</code>、<code>/[\W]/</code>、<code>/^\w``/</code>、<code>/\W/</code>、<code>/[^a-zA-Z0-9_]/</code>等。</p> <ol start="4"> <li></li> </ol> <p>一个匹配<em>fox</em>或<em>fix</em>任意一个单词的正则表达式可以是<code>/f[oi]x/</code>。</p> <ol start="5"> <li></li> </ol> <p>匹配任意单词后跟任何非单词字符的正则表达式可以是<code>/\w+\W/g</code>。</p> <ol start="6"> <li></li> </ol> <p>一个使用正则表达式测试字符串<code>The quick brown fox</code>中是否存在<em>fox</em>的 JavaScript 函数可以如下所示：</p> <pre><code class="language-php">document.write(/fox/.test("The quick brown fox")) </code></pre> <ol start="7"> <li></li> </ol> <p>一个使用正则表达式在<code>The cow jumps over the moon</code>中替换所有<em>the</em>为<em>my</em>的 PHP 函数可以如下所示：</p> <pre><code class="language-php">$s=preg_replace("/the/i", "my", "The cow jumps over the moon"); </code></pre> <ol start="8"> <li></li> </ol> <p>用于预填充表单字段值的 HTML 属性是 <code>value</code>，放置在 <code><input></code> 标签中，格式为 <code>value="</code><em><code>value</code></em><code>"</code>。</p> <h1 id="第十八章答案">第十八章：答案</h1> <ol> <li></li> </ol> <p>用于在服务器和 JavaScript 客户端之间进行异步通信必须创建一个 <code>XMLHttpRequest</code> 对象。</p> <ol start="2"> <li></li> </ol> <p>可以通过对象的 <code>readyState</code> 属性值为 <code>4</code> 来判断异步调用是否完成。</p> <ol start="3"> <li></li> </ol> <p>当异步调用成功完成时，对象的 <code>status</code> 属性将具有值 <code>200</code>。</p> <ol start="4"> <li></li> </ol> <p><code>XMLHttpRequest</code> 对象的 <code>responseText</code> 属性包含成功异步调用返回的值。</p> <ol start="5"> <li></li> </ol> <p><code>XMLHttpRequest</code> 对象的 <code>responseXML</code> 属性包含从成功异步调用返回的 XML 创建的 DOM 树。</p> <ol start="6"> <li></li> </ol> <p>要指定回调函数处理异步响应，将函数名称分配给 <code>XMLHttpRequest</code> 对象的 <code>onreadystatechange</code> 属性。还可以使用未命名的内联函数。</p> <ol start="7"> <li></li> </ol> <p>要启动异步请求，调用 <code>XMLHTTPRequest</code> 对象的 <code>send</code> 方法。</p> <ol start="8"> <li></li> </ol> <p>异步 GET 和 POST 请求的主要区别在于，GET 请求将数据附加到 URL 上，而不是将其作为 <code>send</code> 方法的参数传递，而 POST 请求将数据作为 <code>send</code> 方法的参数传递，并且需要首先发送正确的表单头。</p> <h1 id="第十九章答案">第十九章：答案</h1> <ol> <li></li> </ol> <p>要将一个样式表导入到另一个样式表中，使用 <code>@import</code> 指令，如下所示：</p> <pre><code class="language-php">@import url('styles.css'); </code></pre> <ol start="2"> <li></li> </ol> <p>要在文档中导入样式表，可以使用 HTML <code><link></code> 标签：</p> <pre><code class="language-php"><link rel='stylesheet' href='styles.css'> </code></pre> <ol start="3"> <li></li> </ol> <p>要直接将样式嵌入元素中，请使用 <code>style</code> 属性，如下所示：</p> <pre><code class="language-php"><div style='color:blue;'> </code></pre> <ol start="4"> <li></li> </ol> <p>CSS 中 ID 和类的区别在于，ID 只应用于单个元素，而类可以应用于多个元素。</p> <ol start="5"> <li></li> </ol> <p>在 CSS 声明中，ID 名称以 <code>#</code> 字符为前缀（例如 <code>#myid</code>），类名以 <code>.</code> 字符为前缀（例如 <code>.myclass</code>）。</p> <ol start="6"> <li></li> </ol> <p>在 CSS 中，分号 (<code>;</code>) 用作声明之间的分隔符。</p> <ol start="7"> <li></li> </ol> <p>要向样式表添加注释，请将其放在 <code>/*</code> 和 <code>*/</code> 的开头和结尾注释标记之间。</p> <ol start="8"> <li></li> </ol> <p>在 CSS 中，可以使用 <code>*</code> 通用选择器匹配任何元素。</p> <ol start="9"> <li></li> </ol> <p>要在 CSS 中选择一组不同的元素和/或元素类型，可以在每个元素、ID 或类之间加上逗号。</p> <ol start="10"> <li></li> </ol> <p>在具有相同优先级的一对 CSS 声明中，要使其中一个具有更高的优先级，可以将 <code>!important</code> 声明附加到其中，如下所示：</p> <pre><code class="language-php">p { color:#ff0000 !important; } </code></pre> <h1 id="第二十章答案">第二十章：答案</h1> <ol> <li></li> </ol> <p>CSS3 运算符 <code>^=</code>、<code>$=</code> 和 <code>*=</code> 分别匹配字符串的开头、结尾或任意部分。</p> <ol start="2"> <li></li> </ol> <p>用于指定背景图像大小的属性是 <code>background-size</code>，如下所示：</p> <pre><code class="language-php">background-size:800px 600px; </code></pre> <ol start="3"> <li></li> </ol> <p>可以使用 <code>border-radius</code> 属性指定边框的半径：</p> <pre><code class="language-php">border-radius:20px; </code></pre> <ol start="4"> <li></li> </ol> <p>要在多列中流动文本，请使用 <code>column-count</code>、<code>column-gap</code> 和 <code>column-rule</code> 属性（或其特定于浏览器的变体），如下所示：</p> <pre><code class="language-php">column-count:3; column-gap :1em; column-rule :1px solid black; </code></pre> <ol start="5"> <li></li> </ol> <p>你可以使用<code>hsl</code>、<code>hsla</code>、<code>rgb</code>和<code>rgba</code>这四个函数指定 CSS 颜色。例如：</p> <pre><code class="language-php">color:rgba(0%,60%,40%,0.4); </code></pre> <ol start="6"> <li></li> </ol> <p>要在文本下创建一个灰色阴影，对角线向右下方偏移 5 像素，模糊度为 3 像素，使用以下声明：</p> <pre><code class="language-php">text-shadow:5px 5px 3px #888; </code></pre> <ol start="7"> <li></li> </ol> <p>要使用省略号指示文本被截断，可以使用以下声明：</p> <pre><code class="language-php">text-overflow:ellipsis; </code></pre> <ol start="8"> <li></li> </ol> <p>要在网页中包含 Google 网页字体（如 Lobster），首先从<a href="http://fonts.google.com" target="_blank"><em>http://fonts.google.com</em></a>中选择它，然后将提供的<code><link></code>标签复制到 HTML 文档的<code><head></code>中。它看起来类似于这样：</p> <pre><code class="language-php"><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'> </code></pre> <p>然后，你可以在 CSS 声明中引用字体，例如：</p> <pre><code class="language-php">h1 { font-family:'Lobster', arial, serif; } </code></pre> <ol start="9"> <li></li> </ol> <p>你可以使用以下 CSS 声明来将对象旋转 90 度：</p> <pre><code class="language-php">transform:rotate(90deg); </code></pre> <ol start="10"> <li></li> </ol> <p>要为对象设置过渡效果，使其在更改任何属性时立即以线性方式在半秒内过渡，使用以下声明：</p> <pre><code class="language-php">transition:all .5s linear; </code></pre> <h1 id="第二十一章答案">第二十一章答案</h1> <ol> <li></li> </ol> <p><code>O</code>函数根据其 ID 返回对象，<code>S</code>函数返回对象的<code>style</code>属性，<code>C</code>函数返回访问给定类的所有对象的数组。</p> <ol start="2"> <li></li> </ol> <p>你可以使用<code>setAttribute</code>函数修改对象的 CSS 属性，例如：</p> <pre><code class="language-php">myobject.setAttribute('font-size', '16pt') </code></pre> <p>通常也可以直接修改属性（在必要时稍作修改属性名称），如：</p> <pre><code class="language-php">myobject.fontSize = '16pt' </code></pre> <ol start="3"> <li></li> </ol> <p>提供浏览器窗口可用宽度和高度的属性是<code>window.innerHeight</code>和<code>window.innerWidth</code>。</p> <ol start="4"> <li></li> </ol> <p>要在鼠标经过和离开对象时触发某些操作，需分别绑定到<code>onmouseover</code>和<code>onmouseout</code>事件。</p> <ol start="5"> <li></li> </ol> <p>要创建一个新元素，可以使用以下代码：</p> <pre><code class="language-php">elem = document.createElement('span') </code></pre> <p>要将新元素添加到 DOM 中，可以使用以下代码：</p> <pre><code class="language-php">document.body.appendChild(elem) </code></pre> <ol start="6"> <li></li> </ol> <p>要使元素不可见，将其<code>visibility</code>属性设置为<code>hidden</code>（将其设置为<code>visible</code>以再次显示）。要将元素的尺寸折叠为零，将其<code>display</code>属性设置为<code>none</code>（将此属性设置为<code>block</code>是将其恢复为原始尺寸的一种方法）。</p> <ol start="7"> <li></li> </ol> <p>要在未来某个时间设置单个事件，请调用<code>setTimeout</code>函数，传递要执行的代码或函数名称以及以毫秒为单位的时间延迟。</p> <ol start="8"> <li></li> </ol> <p>要设置定期重复事件，请使用<code>setInterval</code>函数，传递要执行的代码或函数名称以及重复之间的时间延迟（以毫秒为单位）。</p> <ol start="9"> <li></li> </ol> <p>要释放网页中元素的位置以便移动它，请将其<code>position</code>属性设置为<code>relative</code>、<code>absolute</code>或<code>fixed</code>。要恢复它到原来的位置，请将属性设置为<code>static</code>。</p> <ol start="10"> <li></li> </ol> <p>要实现每秒 50 帧的动画速率，应将中断之间的延迟设置为 20 毫秒。要计算此值，请将 1,000 毫秒除以所需的帧速率。</p> <h1 id="第二十二章答案">第二十二章答案</h1> <ol> <li></li> </ol> <p>用作创建 jQuery 对象的工厂方法通常使用符号<code>$</code>。或者，你可以使用方法名<code>jQuery</code>。</p> <ol start="2"> <li></li> </ol> <p>要链接到 Google CDN 上的 jQuery 压缩版本 3.2.1，可以使用如下 HTML 代码：</p> <pre><code class="language-php"><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/ jquery.min.js'></script> </code></pre> <ol start="3"> <li></li> </ol> <p>jQuery 的<code>$</code>工厂方法接受 CSS 选择器，以构建匹配元素的 jQuery 对象。</p> <ol start="4"> <li></li> </ol> <p>要获取 CSS 属性值，请使用<code>css</code>方法，只需提供属性名称。要设置属性值，请向方法提供属性名称和值。</p> <ol start="5"> <li></li> </ol> <p>要将方法附加到元素<code>elem</code>的点击事件上，使其慢慢隐藏，你可以使用以下代码：</p> <pre><code class="language-php">$('#elem').click(function() { $(this).hide('slow') } ) </code></pre> <ol start="6"> <li></li> </ol> <p>要能够对元素进行动画，必须将其<code>position</code>属性值设为<code>fixed</code>、<code>relative</code>或<code>absolute</code>。</p> <ol start="7"> <li></li> </ol> <p>你可以通过使用句号将它们链接在一起，一次运行方法（或者如果动画是顺序的）如下所示：</p> <pre><code class="language-php">$('#elem').css('color', 'blue').css('background', 'yellow').slideUp('slow') </code></pre> <ol start="8"> <li></li> </ol> <p>要从 jQuery 选择对象中检索元素节点对象，可以使用方括号进行索引，如下所示：</p> <pre><code class="language-php">$('#elem')[0] </code></pre> <p>或者使用<code>get</code>方法，如下所示：</p> <pre><code class="language-php">$('#elem').get(0) </code></pre> <ol start="9"> <li></li> </ol> <p>要显示 ID 为<code>news</code>的兄弟元素之前的相邻元素为粗体，可以使用此语句：</p> <pre><code class="language-php">$('#news').prev().css('font-weight', 'bold') </code></pre> <ol start="10"> <li></li> </ol> <p>您可以使用<code>$.get</code>方法使 jQuery 异步进行 GET 请求，如下所示：</p> <pre><code class="language-php">$.get('http://server.com/ajax.php?do=this', function(data) { alert('The server said: ' + data) } ) </code></pre> <h1 id="第二十三章答案">第二十三章答案</h1> <ol> <li></li> </ol> <p>使用 CDN 传送文件意味着您不必依赖自己（或客户的）带宽，这可以节省金钱。另外，一旦浏览器下载了文件，同一版本可以从缓存中重新加载，从而加快用户体验。缺点是，如果用户的浏览器在此时未连接到互联网，您的网页或 Web 应用可能无法在本地运行。</p> <ol start="2"> <li></li> </ol> <p>要定义 jQuery Mobile 内容页，应将其包含在具有<code>data-role</code>属性为<code>page</code>的<code><div></code>元素中。</p> <ol start="3"> <li></li> </ol> <p>jQuery 页面的三个主要部分是其标题、内容和页脚。为了表示这些部分，您将它们放在分别具有<code>data-role</code>属性分配值<code>header</code>、<code>content</code>和<code>footer</code>的<code><div></code>元素内。这三个元素必须是在问题 2 中讨论的父级<code><div></code>的子元素。</p> <ol start="4"> <li></li> </ol> <p>要在单个 HTML 文档中放置多个 jQuery Mobile 页面，可以包含具有<code>data-role</code>属性为<code>page</code>的多个父级<code><div></code>元素，每个元素包含问题 3 中讨论的三个子<code><div></code>。要在这些页面之间建立链接，应为每个元素分配一个唯一的<code>id</code>（例如<code>id="news"</code>），然后可以在 HTML 文档的任何位置使用锚点引用它，如<code><a href="#news"></code>。</p> <ol start="5"> <li></li> </ol> <p>要阻止网页异步加载，可以将锚点或表单的<code>data-ajax</code>属性值设为<code>false</code>，将其<code>rel</code>属性值设为<code>external</code>，或者为其<code>target</code>属性提供一个值。</p> <ol start="6"> <li></li> </ol> <p>要将锚点的页面转换设置为翻转，给其<code>data-transition</code>属性赋值<code>flip</code>（或者你可以使用其他支持的过渡效果值，例如<code>data-transition="pop"</code>）。</p> <ol start="7"> <li></li> </ol> <p>通过将其 <code>data-rel</code> 属性值设为 <code>dialog</code>，可以加载页面以对话框形式显示。</p> <ol start="8"> <li></li> </ol> <p>要将锚点链接显示为按钮，请将其 <code>data-role</code> 属性值设为 <code>button</code>。</p> <ol start="9"> <li></li> </ol> <p>要使 jQuery Mobile 元素显示为内联元素，请将其 <code>data-inline</code> 属性值设为 <code>true</code>。</p> <ol start="10"> <li></li> </ol> <p>要将图标添加到按钮上，请将已知的 jQuery Mobile 图标名称作为其 <code>data-icon</code> 属性的值，例如，<code>data-icon="gear"</code>。</p> <h1 id="第二十四章答案">第二十四章答案</h1> <ol> <li></li> </ol> <p>你可以通过下载文件并从自己的 Web 服务器提供或使用 <em>unpkg.com</em> 等 CDN，在 Web 页面中引入 React 脚本。然后在 HTML 文档中使用 <code>script</code> 标签加载这些脚本。</p> <ol start="2"> <li></li> </ol> <p>要在 React JavaScript 中嵌入 XML，首先需要加载 Babel 扩展，可以从 CDN 或本地加载，使用 <code>script</code> 标签。</p> <ol start="3"> <li></li> </ol> <p>JSX JavaScript <code><script></code> 部分的代码需要在其上添加 <code>type="text/babel"</code> 才能运行。</p> <ol start="4"> <li></li> </ol> <p>你可以将 React 扩展到你的代码中，可以作为一个类使用 <code>class Name extends React.Component</code>，也可以通过函数的 <code>return</code> 语句返回要渲染的代码。在这两种情况下，必须调用 <code>ReactDOM.render</code> 来启动渲染。</p> <ol start="5"> <li></li> </ol> <p>在 React 中，纯代码不会改变其输入，而改变输入的代码被认为是不纯的。</p> <ol start="6"> <li></li> </ol> <p>React 使用 <code>props</code> 对象及其属性来跟踪状态。</p> <ol start="7"> <li></li> </ol> <p>要在 JSX 代码中嵌入表达式，将其放在花括号内，如： <code>Hello {props.name}</code>。</p> <ol start="8"> <li></li> </ol> <p>一旦类已经构造完成，只能使用 <code>setState</code> 函数来更改值的状态。</p> <ol start="9"> <li></li> </ol> <p>要在构造函数内部使用 <code>this</code> 关键字引用 <code>props</code>，必须首先调用 <code>super</code> 方法并传递 <code>props</code>，如下所示： <code>super(props)</code>。</p> <ol start="10"> <li></li> </ol> <p>你可以在 JSX 中使用 <code>&&</code> 运算符创建条件语句。对于 <code>IF...THEN...ELSE</code> 语句，可以使用三元 <code>?:</code> 运算符。</p> <h1 id="第二十五章答案">第二十五章答案</h1> <ol> <li></li> </ol> <p>在 Web 页面中绘制图形的新 HTML5 元素是画布元素，使用 <code><canvas></code> 标签创建。</p> <ol start="2"> <li></li> </ol> <p>你需要使用 JavaScript 访问许多新的 HTML5 功能，比如画布和地理位置。</p> <ol start="3"> <li></li> </ol> <p>要在 Web 页面中嵌入音频或视频，请使用 <code><audio></code> 或 <code><video></code> 标签。</p> <ol start="4"> <li></li> </ol> <p>在 HTML5 中，本地存储提供比 Cookie 更大量的本地用户空间访问。</p> <ol start="5"> <li></li> </ol> <p>在 HTML5 中，你可以设置 Web Worker 来执行后台任务。这些 Worker 简单地是 JavaScript 代码的一部分。</p> <h1 id="第二十六章答案">第二十六章答案</h1> <ol> <li></li> </ol> <p>要在 HTML 中创建画布元素，请使用 <code><canvas></code> 标签并指定一个 JavaScript 可以访问的 ID，例如：</p> <pre><code class="language-php"><canvas id='mycanvas'> </code></pre> <ol start="2"> <li></li> </ol> <p>要使 JavaScript 能够访问画布元素，请确保元素已赋予 ID，如 <code>mycanvas</code>，然后使用 <code>document.getElementById</code> 函数（或者伴随示例归档的 <em>OSC.js</em> 文件中的 <code>O</code> 函数）返回元素的对象。最后，在对象上调用 <code>getContext</code> 以获取画布的 2D 上下文，例如：</p> <pre><code class="language-php">canvas = document.getElementById('mycanvas') context = canvas.getContext('2d') </code></pre> <ol start="3"> <li></li> </ol> <p>要开始绘制路径，请在上下文上调用 <code>beginPath</code> 方法。创建路径后，通过在上下文上调用 <code>closePath</code> 方法来关闭它，例如：</p> <pre><code class="language-php">context.beginPath() // Path creation commands go here context.closePath() </code></pre> <ol start="4"> <li></li> </ol> <p>您可以使用 <code>toDataURL</code> 方法从画布中提取数据，然后将其分配给图像对象的 <code>src</code> 属性，例如：</p> <pre><code class="language-php">image.src = canvas.toDataURL() </code></pre> <ol start="5"> <li></li> </ol> <p>要创建具有多于两种颜色的渐变填充（径向或线性），请将所有所需的颜色指定为已创建的渐变对象分配的停止颜色，并为每个颜色分配一个起始点作为完整渐变的百分比值（介于 <code>0</code> 和 <code>1</code> 之间），例如：</p> <pre><code class="language-php">gradient.addColorStop(0, 'green') gradient.addColorStop(0.3, 'red') gradient.addColorStop(0,79, 'orange') gradient.addColorStop(1, 'brown') </code></pre> <ol start="6"> <li></li> </ol> <p>要调整绘制线条的宽度，请将值分配给上下文的 <code>lineWidth</code> 属性，例如：</p> <pre><code class="language-php">context.lineWidth = 5 </code></pre> <ol start="7"> <li></li> </ol> <p>要确保将来的绘制仅发生在特定区域内，请创建路径，然后调用 <code>clip</code> 方法。</p> <ol start="8"> <li></li> </ol> <p>一个带有两个虚构吸引子的复杂曲线被称为 <em>贝塞尔曲线</em>。要创建一个，调用 <code>bezierCurveTo</code> 方法，提供两对 <em>x</em> 和 <em>y</em> 坐标作为吸引子，然后是曲线的终点的另一对坐标。然后从当前绘制位置创建到目标的曲线。</p> <ol start="9"> <li></li> </ol> <p><code>getImageData</code> 方法返回一个数组，其中包含指定区域的像素数据，每个像素的数据依次包含红色、绿色、蓝色和 alpha 像素值，因此每个像素返回四个数据项。</p> <ol start="10"> <li></li> </ol> <p><code>transform</code> 方法接受六个参数（或参数），它们依次是水平缩放、水平倾斜、垂直倾斜、垂直缩放、水平平移和垂直平移。因此，适用于缩放的参数是列表中的第一个和第四个。</p> <h1 id="第二十七章答案">第二十七章：答案</h1> <ol> <li></li> </ol> <p>要在 HTML5 文档中插入音频和视频，请使用 <code><audio></code> 和 <code><video></code> 标签。</p> <ol start="2"> <li></li> </ol> <p>要确保压缩的有损音频在所有平台上具有最大的音频播放性，您应该在 AAC 和 MP3 音频格式之间选择（或提供两者）。</p> <ol start="3"> <li></li> </ol> <p>要播放和暂停 HTML5 媒体播放，您可以调用 <code><audio></code> 或 <code><video></code> 元素的 <code>play</code> 和 <code>pause</code> 方法。</p> <ol start="4"> <li></li> </ol> <p>FLAC 是一种压缩的（但不如 MP3 或 AAC 那样压缩）音频格式，但没有任何数据损失。在提供无损音频内容时，它将节省存储空间和带宽。</p> <ol start="5"> <li></li> </ol> <p>要确保视频在所有平台上具有最大的播放性，您应该选择（或提供两者）MP4 和 WEBM 视频格式之间。</p> <h1 id="第二十八章答案">第二十八章：答案</h1> <ol> <li></li> </ol> <p>要从 web 浏览器请求地理位置数据，请调用以下方法，并传递两个处理数据访问或拒绝的函数名称：</p> <pre><code class="language-php">navigator.geolocation.getCurrentPosition(granted, denied) </code></pre> <ol start="2"> <li></li> </ol> <p>要确定浏览器是否支持本地存储，可以测试<code>localStorage</code>对象的<code>typeof</code>属性，就像这样：</p> <pre><code class="language-php">if (typeof localStorage == 'undefined') // Local storage is not available} </code></pre> <ol start="3"> <li></li> </ol> <p>要清除当前域的所有本地存储数据，可以调用<code>localStorage.clear</code>方法。</p> <ol start="4"> <li></li> </ol> <p>Web Worker 与主程序通信的最简单方式是使用<code>postMessage</code>方法发送信息。程序会附加到 Web Worker 的<code>onmessage</code>事件以接收信息。</p> <ol start="5"> <li></li> </ol> <p>要停止 Web Worker 的运行，请调用<code>worker</code>对象的<code>terminate</code>方法，就像这样：<code>worker.terminate()</code>。</p> <ol start="6"> <li></li> </ol> <p>在处理这些操作的事件中，可以通过调用事件对象的<code>preventDefault</code>方法来阻止默认的拖放操作。</p> <ol start="7"> <li></li> </ol> <p>为了使跨文档消息传递更安全，发布消息时应始终提供域标识符，就像这样：</p> <pre><code class="language-php">postMessage(message, 'http://mydomain.com') </code></pre> <p>并且在接收它们时检查该标识符，就像这样：</p> <pre><code class="language-php">if (event.origin) != 'http://mydomain.com') // Disallow </code></pre> <p>你还可以加密或隐藏通信内容，以防止注入或窃听。</p> <h1 id="第二十九章答案">第二十九章答案</h1> <ol> <li></li> </ol> <p>这个问题的答案完全由你决定。如果你喜欢这本书，请告诉你的朋友并在在线书店留下评论。如果你有任何问题、评论、建议或附加说明，请访问这本书的<a href="https://oreil.ly/learning-php-mysql-js-6e" target="_blank">O'Reilly 目录页面</a>并在那里留言，谢谢你的阅读！</p>