From 39bb7ce86d6da4db189643d9c5961dcf38f69599 Mon Sep 17 00:00:00 2001 From: allo Date: Sun, 7 Aug 2022 15:04:32 +0800 Subject: [PATCH] convert to markdown for learn/javascript --- .../client-side_storage/index.md | 963 +++++++------- .../drawing_graphics/index.md | 1125 ++++++++--------- .../fetching_data/index.md | 465 ++++--- .../javascript/client-side_web_apis/index.md | 46 +- .../introduction/index.md | 292 +++-- .../manipulating_documents/index.md | 532 ++++---- .../third_party_apis/index.md | 573 ++++----- .../video_and_audio_apis/index.md | 661 +++++----- .../first_steps/a_first_splash/index.md | 699 +++++----- .../javascript/first_steps/arrays/index.md | 516 ++++---- .../learn/javascript/first_steps/index.md | 86 +- .../javascript/first_steps/math/index.md | 573 ++++----- .../silly_story_generator/index.md | 257 ++-- .../javascript/first_steps/strings/index.md | 377 +++--- .../useful_string_methods/index.md | 365 +++--- .../javascript/first_steps/variables/index.md | 396 +++--- .../first_steps/what_is_javascript/index.md | 540 ++++---- .../first_steps/what_went_wrong/index.md | 385 +++--- files/zh-cn/learn/javascript/howto/index.md | 446 +++---- files/zh-cn/learn/javascript/index.md | 66 +- .../adding_bouncing_balls_features/index.md | 292 ++--- .../learn/javascript/objects/basics/index.md | 294 +++-- files/zh-cn/learn/javascript/objects/index.md | 50 +- .../learn/javascript/objects/json/index.md | 332 ++--- .../objects/object_building_practice/index.md | 485 +++---- .../objects/object_prototypes/index.md | 377 +++--- .../index.md | 94 +- 27 files changed, 5605 insertions(+), 5682 deletions(-) diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md index 2136605ab68b97..f6b12ba120389c 100644 --- a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md +++ b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md @@ -10,392 +10,376 @@ tags: - 文章 translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage --- -

{{LearnSidebar}}

+{{LearnSidebar}} -
{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
+{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}} - - -

现代 web 浏览器提供了很多在用户电脑 web 客户端存放数据的方法 — 只要用户的允许 — 可以在它需要的时候被重新获得。这样能让你存留的数据长时间保存，保存站点和文档在离线情况下使用，保留你对其站点的个性化配置等等。本篇文章只解释它们工作的一些很基础的部分。

+现代 web 浏览器提供了很多在用户电脑 web 客户端存放数据的方法 — 只要用户的允许 — 可以在它需要的时候被重新获得。这样能让你存留的数据长时间保存，保存站点和文档在离线情况下使用，保留你对其站点的个性化配置等等。本篇文章只解释它们工作的一些很基础的部分。 - - - - - - - - - - + + + + + + + + + +
Prerequisites:JavaScript 基础 (查看 第一步, 构建的块, JavaScript 对象), 基础的客户端 API
Objective:学习如何使用客户端存储 API 来存储应用数据。
Prerequisites: + JavaScript 基础 (查看 + 第一步, + 构建的块, + JavaScript 对象), + 基础的客户端 API +
Objective:学习如何使用客户端存储 API 来存储应用数据。
-

客户端存储？

+## 客户端存储？ -

在其他的 MDN 学习中我们已经讨论过 静态网站（static sites） 和动态网站（ dynamic sites）的区别。 大多数现代的 web 站点是动态的— 它们在服务端使用各种类型的数据库来存储数据 (服务端存储), 之后通过运行服务端（ server-side）代码来重新获取需要的数据，把其数据插入到静态页面的模板中，并且生成出 HTML 渲染到用户浏览上。

+在其他的 MDN 学习中我们已经讨论过 静态网站（[static sites](/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites)） 和动态网站（ [dynamic sites](/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites)）的区别。 大多数现代的 web 站点是动态的— 它们在服务端使用各种类型的数据库来存储数据 (服务端存储), 之后通过运行服务端（ [server-side](/en-US/docs/Learn/Server-side)）代码来重新获取需要的数据，把其数据插入到静态页面的模板中，并且生成出 HTML 渲染到用户浏览上。 -

客户端存储以相同的原理工作，但是在使用上有一些不同。它是由 JavaScript APIs 组成的因此允许你在客户端存储数据 (比如在用户的机器上)，而且可以在需要的时候重新取得需要的数据。这有很多明显的用处，比如：

+客户端存储以相同的原理工作，但是在使用上有一些不同。它是由 JavaScript APIs 组成的因此允许你在客户端存储数据 (比如在用户的机器上)，而且可以在需要的时候重新取得需要的数据。这有很多明显的用处，比如： - +- 个性化网站偏好（比如显示一个用户选择的窗口小部件，颜色主题，或者字体）。 +- 保存之前的站点行为 (比如从先前的 session 中获取购物车中的内容， 记住用户是否之前已经登陆过)。 +- 本地化保存数据和静态资源可以使一个站点更快（至少让资源变少）的下载， 甚至可以在网络失去链接的时候变得暂时可用。 +- 保存 web 已经生产的文档可以在离线状态下访问。 -

通常客户端和服务端存储是结合在一起使用的。例如，你可以从数据库中下载一个由网络游戏或音乐播放器应用程序使用的音乐文件，将它们存储在客户端数据库中，并按需要播放它们。用户只需下载音乐文件一次——在随后的访问中，它们将从数据库中检索。

+通常客户端和服务端存储是结合在一起使用的。例如，你可以从数据库中下载一个由网络游戏或音乐播放器应用程序使用的音乐文件，将它们存储在客户端数据库中，并按需要播放它们。用户只需下载音乐文件一次——在随后的访问中，它们将从数据库中检索。 -
-

备注： 使用客户端存储 API 可以存储的数据量是有限的（可能是每个 API 单独的和累积的总量）;具体的数量限制取决于浏览器，也可能基于用户设置。有关更多信息，获取更多信息，请参考浏览器存储限制和清理标准。

-
+> **备注：** 使用客户端存储 API 可以存储的数据量是有限的（可能是每个 API 单独的和累积的总量）;具体的数量限制取决于浏览器，也可能基于用户设置。有关更多信息，获取更多信息，请参考[浏览器存储限制和清理标准](/zh-CN/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria)。 -

传统方法：cookies

+### 传统方法：cookies -

客户端存储的概念已经存在很长一段时间了。从早期的网络时代开始，网站就使用 cookies 来存储信息，以在网站上提供个性化的用户体验。它们是网络上最早最常用的客户端存储形式。
- 因为在那个年代，有许多问题——无论是从技术上的还是用户体验的角度——都是困扰着 cookies 的问题。这些问题非常重要，以至于当第一次访问一个网站时，欧洲居民会收到消息，告诉他们是否会使用 cookies 来存储关于他们的数据，而这是由一项被称为欧盟 Cookie 条例的欧盟法律导致的。

+客户端存储的概念已经存在很长一段时间了。从早期的网络时代开始，网站就使用 [cookies](/zh-CN/docs/Web/HTTP/Cookies) 来存储信息，以在网站上提供个性化的用户体验。它们是网络上最早最常用的客户端存储形式。 +因为在那个年代，有许多问题——无论是从技术上的还是用户体验的角度——都是困扰着 cookies 的问题。这些问题非常重要，以至于当第一次访问一个网站时，欧洲居民会收到消息，告诉他们是否会使用 cookies 来存储关于他们的数据，而这是由一项被称为[欧盟 Cookie 条例](/zh-CN/docs/Web/HTTP/Cookies#%E6%AC%A7%E7%9B%9FCookie%E6%8C%87%E4%BB%A4)的欧盟法律导致的。 -

+![](https://mdn.mozillademos.org/files/15734/cookies-notice.png) -

由于这些原因，我们不会在本文中教你如何使用 cookie。毕竟它过时、存在各种安全问题，而且无法存储复杂数据，而且有更好的、更现代的方法可以在用户的计算机上存储种类更广泛的数据。
- cookie 的唯一优势是它们得到了非常旧的浏览器的支持，所以如果您的项目需要支持已经过时的浏览器（比如 Internet Explorer 8 或更早的浏览器），cookie 可能仍然有用，但是对于大多数项目（很明显不包括本站）来说，您不需要再使用它们了。其实 cookie 也没什么好说的，document.cookie一把梭就完事了。

+由于这些原因，我们不会在本文中教你如何使用 cookie。毕竟它过时、存在各种[安全问题](/zh-CN/docs/Web/HTTP/Cookies#安全)，而且无法存储复杂数据，而且有更好的、更现代的方法可以在用户的计算机上存储种类更广泛的数据。 +cookie 的唯一优势是它们得到了非常旧的浏览器的支持，所以如果您的项目需要支持已经过时的浏览器（比如 Internet Explorer 8 或更早的浏览器），cookie 可能仍然有用，但是对于大多数项目（很明显不包括本站）来说，您不需要再使用它们了。其实 cookie 也没什么好说的，[`document.cookie`](/zh-CN/docs/Web/API/Document/cookie)一把梭就完事了。 -
-

备注： 为什么仍然有新创建的站点使用 cookies？这主要是因为开发人员的习惯，使用了仍然使用 cookies 的旧库，以及存在许多 web 站点，提供了过时的参考和培训材料来学习如何存储数据。

-
+> **备注：** 为什么仍然有新创建的站点使用 cookies？这主要是因为开发人员的习惯，使用了仍然使用 cookies 的旧库，以及存在许多 web 站点，提供了过时的参考和培训材料来学习如何存储数据。 -

新流派：Web Storage 和 IndexedDB

+### 新流派：Web Storage 和 IndexedDB -

现代浏览器有比使用 cookies 更简单、更有效的存储客户端数据的 API。

+现代浏览器有比使用 cookies 更简单、更有效的存储客户端数据的 API。 - +- [Web Storage API](/en-US/docs/Web/API/Web_Storage_API) 提供了一种非常简单的语法，用于存储和检索较小的、由名称和相应值组成的数据项。当您只需要存储一些简单的数据时，比如用户的名字，用户是否登录，屏幕背景使用了什么颜色等等，这是非常有用的。 +- [IndexedDB API](/en-US/docs/Web/API/IndexedDB_API) 为浏览器提供了一个完整的数据库系统来存储复杂的数据。这可以用于存储从完整的用户记录到甚至是复杂的数据类型，如音频或视频文件。 -

您将在下面了解更多关于这些 API 的信息。

+您将在下面了解更多关于这些 API 的信息。 -

未来：Cache API

+### 未来：Cache API -

一些现代浏览器支持新的 {{domxref("Cache")}} API。这个 API 是为存储特定 HTTP 请求的响应文件而设计的，它对于像存储离线网站文件这样的事情非常有用，这样网站就可以在没有网络连接的情况下使用。缓存通常与 Service Worker API 组合使用，尽管不一定非要这么做。
- Cache 和 Service Workers 的使用是一个高级主题，我们不会在本文中详细讨论它，尽管我们将在下面的 离线文件存储 一节中展示一个简单的例子。

+一些现代浏览器支持新的 {{domxref("Cache")}} API。这个 API 是为存储特定 HTTP 请求的响应文件而设计的，它对于像存储离线网站文件这样的事情非常有用，这样网站就可以在没有网络连接的情况下使用。缓存通常与 [Service Worker API](/en-US/docs/Web/API/Service_Worker_API) 组合使用，尽管不一定非要这么做。 +Cache 和 Service Workers 的使用是一个高级主题，我们不会在本文中详细讨论它，尽管我们将在下面的 [离线文件存储](#离线文件存储) 一节中展示一个简单的例子。 -

存储简单数据 — web storage

+## 存储简单数据 — web storage -

Web Storage API 非常容易使用 — 你只需存储简单的 键名/键值 对数据 (限制为字符串、数字等类型) 并在需要的时候检索其值。

+[Web Storage API](/en-US/docs/Web/API/Web_Storage_API) 非常容易使用 — 你只需存储简单的 键名/键值 对数据 (限制为字符串、数字等类型) 并在需要的时候检索其值。 -

基本语法

+### 基本语法 -

让我们来告诉你怎么做：

+让我们来告诉你怎么做： -
    -
  1. -

    第一步，访问 GitHub 上的 web storage blank template (在新标签页打开此模板)。

    -
    2. -
  2. -

    打开你浏览器开发者工具的 JavaScript 控制台。

    -
    3. -
  3. -

    你所有的 web storage 数据都包含在浏览器内两个类似于对象的结构中： {{domxref("Window.sessionStorage", "sessionStorage")}} 和 {{domxref("Window.localStorage", "localStorage")}}。第一种方法，只要浏览器开着，数据就会一直保存 (关闭浏览器时数据会丢失) ，而第二种会一直保存数据，甚至到浏览器关闭又开启后也是这样。我们将在本文中使用第二种方法，因为它通常更有用。

    -
    4. -
  4. -

    {{domxref("Storage.setItem()")}} 方法允许您在存储中保存一个数据项——它接受两个参数：数据项的名字及其值。试着把它输入到你的 JavaScript 控制台（如果你愿意的话，可以把它的值改为你自己的名字！）

    +1. 第一步，访问 GitHub 上的 [web storage blank template](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html) (在新标签页打开此[模板](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html))。 +2. 打开你浏览器开发者工具的 JavaScript 控制台。 +3. 你所有的 web storage 数据都包含在浏览器内两个类似于对象的结构中： {{domxref("Window.sessionStorage", "sessionStorage")}} 和 {{domxref("Window.localStorage", "localStorage")}}。第一种方法，只要浏览器开着，数据就会一直保存 (关闭浏览器时数据会丢失) ，而第二种会一直保存数据，甚至到浏览器关闭又开启后也是这样。我们将在本文中使用第二种方法，因为它通常更有用。 +4. {{domxref("Storage.setItem()")}} 方法允许您在存储中保存一个数据项——它接受两个参数：数据项的名字及其值。试着把它输入到你的 JavaScript 控制台（如果你愿意的话，可以把它的值改为你自己的名字！） - 
    localStorage.setItem('name','Chris');
    -
    5. -
  5. -

    {{domxref("Storage.getItem()")}} 方法接受一个参数——你想要检索的数据项的名称——并返回数据项的值。现在将这些代码输入到你的 JavaScript 控制台：

    + ```js + localStorage.setItem('name','Chris'); + ``` - 
    var myName = localStorage.getItem('name');
-myName
    +5. {{domxref("Storage.getItem()")}} 方法接受一个参数——你想要检索的数据项的名称——并返回数据项的值。现在将这些代码输入到你的 JavaScript 控制台： -

    在输入第二行时，您应该会看到 myName变量现在包含name数据项的值。

    -
    6. -
  6. -

    {{domxref("Storage.removeItem()")}} 方法接受一个参数——你想要删除的数据项的名称——并从 web storage 中删除该数据项。在您的 JavaScript 控制台中输入以下几行：

    + ```js + var myName = localStorage.getItem('name'); + myName + ``` - 
    localStorage.removeItem('name');
-var myName = localStorage.getItem('name');
-myName
    + 在输入第二行时，您应该会看到 `myName`变量现在包含`name`数据项的值。 -

    第三行现在应该返回 null — name 项已经不存在于 web storage 中。

    -
    7. -
+6. {{domxref("Storage.removeItem()")}} 方法接受一个参数——你想要删除的数据项的名称——并从 web storage 中删除该数据项。在您的 JavaScript 控制台中输入以下几行： -

数据会一直存在！

+ ```js + localStorage.removeItem('name'); + var myName = localStorage.getItem('name'); + myName + ``` -

web storage 的一个关键特性是，数据在不同页面加载时都存在（甚至是当浏览器关闭后，对 localStorage 的而言）。让我们来看看这个：

+ 第三行现在应该返回 `null` — `name` 项已经不存在于 web storage 中。 -
    -
  1. -

    再次打开我们的 Web Storage 空白模板，但是这次你要在不同的浏览器中打开这个教程！这样可以更容易处理。

    -
    2. -
  2. -

    在浏览器的 JavaScript 控制台中输入这几行：

    +### 数据会一直存在！ - 
    localStorage.setItem('name','Chris');
-var myName = localStorage.getItem('name');
-myName
    +web storage 的一个关键特性是，数据在不同页面加载时都存在（甚至是当浏览器关闭后，对 localStorage 的而言）。让我们来看看这个： -

    你应该看到 name 数据项返回。

    -
    3. -
  3. -

    现在关掉浏览器再把它打开。

    -
    4. -
  4. -

    再次输入下面几行：

    +1. 再次打开我们的 Web Storage 空白模板，但是这次你要在不同的浏览器中打开这个教程！这样可以更容易处理。 +2. 在浏览器的 JavaScript 控制台中输入这几行： - 
    var myName = localStorage.getItem('name');
-myName
    + ```js + localStorage.setItem('name','Chris'); + var myName = localStorage.getItem('name'); + myName + ``` -

    你应该看到，尽管浏览器已经关闭，然后再次打开，但仍然可以使用该值。

    -
    5. -
+ 你应该看到 name 数据项返回。 -

为每个域名分离储存

+3. 现在关掉浏览器再把它打开。 +4. 再次输入下面几行： -

每个域都有一个单独的数据存储区 (每个单独的网址都在浏览器中加载). 你 会看到，如果你加载两个网站（例如 google.com 和 amazon.com）并尝试将某个项目存储在一个网站上，该数据项将无法从另一个网站获取。

+ ```js + var myName = localStorage.getItem('name'); + myName + ``` -

这是有道理的 - 你可以想象如果网站能够查看彼此的数据，就会出现安全问题！

+ 你应该看到，尽管浏览器已经关闭，然后再次打开，但仍然可以使用该值。 -

更复杂的例子

+### 为每个域名分离储存 -

让我们通过编写一个简单的工作示例来应用这些新发现的知识，让你了解如何使用网络存储。我们的示例将允许你输入一个名称，然后该页面将刷新，以提供个性化问候。这种状态也会页面/浏览器重新加载期间保持，因为这个名称存储在 Web Storage 中。

+每个域都有一个单独的数据存储区 (每个单独的网址都在浏览器中加载). 你 会看到，如果你加载两个网站（例如 google.com 和 amazon.com）并尝试将某个项目存储在一个网站上，该数据项将无法从另一个网站获取。 -

你可以在 personal-greeting.html 中找到示例文件 —— 这包含一个具有标题，内容和页脚，以及用于输入您的姓名的表单的简单网站。

+这是有道理的 - 你可以想象如果网站能够查看彼此的数据，就会出现安全问题！ -

+### 更复杂的例子 -

让我们来构建示例，以便了解它的工作原理。

+让我们通过编写一个简单的工作示例来应用这些新发现的知识，让你了解如何使用网络存储。我们的示例将允许你输入一个名称，然后该页面将刷新，以提供个性化问候。这种状态也会页面/浏览器重新加载期间保持，因为这个名称存储在 Web Storage 中。 -
    -
  1. -

    首先，在您的计算机上的新目录中创建一个 personal-greeting.html 文件的副本。

    -
    2. -
  2. -

    接下来，请注意我们的 HTML 如何引用一个名为index.js的 JavaScript 文件（请参见第 40 行）。我们需要创建它并将 JavaScript 代码写入其中。在与 HTML 文件相同的目录中创建一个index.js文件。

    -
    3. -
  3. -

    我们首先创建对所有需要在此示例中操作的 HTML 功能的引用 - 我们将它们全部创建为常量，因为这些引用在应用程序的生命周期中不需要更改。将以下几行添加到你的 JavaScript 文件中：

    +你可以在 [personal-greeting.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html) 中找到示例文件 —— 这包含一个具有标题，内容和页脚，以及用于输入您的姓名的表单的简单网站。 - 
    // 创建所需的常量
-const rememberDiv = document.querySelector('.remember');
-const forgetDiv = document.querySelector('.forget');
-const form = document.querySelector('form');
-const nameInput = document.querySelector('#entername');
-const submitBtn = document.querySelector('#submitname');
-const forgetBtn = document.querySelector('#forgetname');
-
-const h1 = document.querySelector('h1');
-const personalGreeting = document.querySelector('.personal-greeting');
    -
    4. -
  4. -

    接下来，我们需要包含一个小小的事件监听器，以在按下提交按钮时阻止实际的提交表单动作自身，因为这不是我们想要的行为。在您之前的代码下添加此代码段： 在你之前的代码后添加这段代码：

    - - 
    // 当按钮按下时阻止表单提交
-form.addEventListener('submit', function(e) {
-  e.preventDefault();
-});
    -
    5. -
  5. -

    现在我们需要添加一个事件监听器，当单击“Say hello”按钮时，它的处理函数将会运行。这些注释详细解释了每一处都做了什么，但实际上我们在这里获取用户输入到文本输入框中的名字并使用setItem()将它保存在网络存储中，然后运行一个名为nameDisplayCheck()的函数来处理实际的网站文本的更新。将此添加到代码的底部：

    - - 
    // run function when the 'Say hello' button is clicked
-submitBtn.addEventListener('click', function() {
-  // store the entered name in web storage
-  localStorage.setItem('name', nameInput.value);
-  // run nameDisplayCheck() to sort out displaying the
-  // personalized greetings and updating the form display
-  nameDisplayCheck();
-});
    -
    6. -
  6. -

    此时，我们还需要一个事件处理程序，以便在单击“Forget”按钮时运行一个函数——且仅在单击“Say hello”按钮（两种表单状态来回切换）后才显示。在这个功能中，我们使用removeItem()从网络存储中删除项目name，然后再次运行nameDisplayCheck()以更新显示。将其添加到底部：

    - - 
    // run function when the 'Forget' button is clicked
-forgetBtn.addEventListener('click', function() {
-  // Remove the stored name from web storage
-  localStorage.removeItem('name');
-  // run nameDisplayCheck() to sort out displaying the
-  // generic greeting again and updating the form display
-  nameDisplayCheck();
-});
    -
    7. -
  7. -

    现在是时候定义nameDisplayCheck()函数本身了。在这里，我们通过使用localStorage.getItem('name')作为测试条件来检查 name 数据项是否已经存储在 Web Storage 中。如果它已被存储，则该调用的返回值为true; 如果没有，它会是false。如果是true，我们会显示个性化问候语，显示表格的“forget”部分，并隐藏表格的“Say hello”部分。如果是false，我们会显示一个通用问候语，并做相反的事。再次将下面的代码添到底部：

    - - 
    // define the nameDisplayCheck() function
-function nameDisplayCheck() {
-  // check whether the 'name' data item is stored in web Storage
-  if(localStorage.getItem('name')) {
-    // If it is, display personalized greeting
-    let name = localStorage.getItem('name');
-    h1.textContent = 'Welcome, ' + name;
-    personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.';
-    // hide the 'remember' part of the form and show the 'forget' part
-    forgetDiv.style.display = 'block';
-    rememberDiv.style.display = 'none';
-  } else {
-    // if not, display generic greeting
-    h1.textContent = 'Welcome to our website ';
-    personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
-    // hide the 'forget' part of the form and show the 'remember' part
-    forgetDiv.style.display = 'none';
-    rememberDiv.style.display = 'block';
-  }
-}
    -
    8. -
  8. -

    最后但同样重要的是，我们需要在每次加载页面时运行nameDisplayCheck()函数。如果我们不这样做，那么个性化问候不会在页面重新加载后保持。将以下代码添加到代码的底部：

    +![](web-storage-demo.png) + +让我们来构建示例，以便了解它的工作原理。 + +1. 首先，在您的计算机上的新目录中创建一个 [personal-greeting.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html) 文件的副本。 +2. 接下来，请注意我们的 HTML 如何引用一个名为`index.js`的 JavaScript 文件（请参见第 40 行）。我们需要创建它并将 JavaScript 代码写入其中。在与 HTML 文件相同的目录中创建一个`index.js`文件。 +3. 我们首先创建对所有需要在此示例中操作的 HTML 功能的引用 - 我们将它们全部创建为常量，因为这些引用在应用程序的生命周期中不需要更改。将以下几行添加到你的 JavaScript 文件中： + + ```js + // 创建所需的常量 + const rememberDiv = document.querySelector('.remember'); + const forgetDiv = document.querySelector('.forget'); + const form = document.querySelector('form'); + const nameInput = document.querySelector('#entername'); + const submitBtn = document.querySelector('#submitname'); + const forgetBtn = document.querySelector('#forgetname'); + + const h1 = document.querySelector('h1'); + const personalGreeting = document.querySelector('.personal-greeting'); + ``` + +4. 接下来，我们需要包含一个小小的事件监听器，以在按下提交按钮时阻止实际的提交表单动作自身，因为这不是我们想要的行为。在您之前的代码下添加此代码段： 在你之前的代码后添加这段代码： - 
    document.body.onload = nameDisplayCheck;
    -
    9. -
+ ```js + // 当按钮按下时阻止表单提交 + form.addEventListener('submit', function(e) { + e.preventDefault(); + }); + ``` -

你的例子完成了 - 做得好！现在剩下的就是保存你的代码并在浏览器中测试你的 HTML 页面。你可以在这里看到我们的完成版本并在线运行。

+5. 现在我们需要添加一个事件监听器，当单击“Say hello”按钮时，它的处理函数将会运行。这些注释详细解释了每一处都做了什么，但实际上我们在这里获取用户输入到文本输入框中的名字并使用`setItem()`将它保存在网络存储中，然后运行一个名为`nameDisplayCheck()`的函数来处理实际的网站文本的更新。将此添加到代码的底部： -
-

备注： 在 Using the Web Storage API 中还有一个稍微复杂点儿的示例。

-
+ ```js + // run function when the 'Say hello' button is clicked + submitBtn.addEventListener('click', function() { + // store the entered name in web storage + localStorage.setItem('name', nameInput.value); + // run nameDisplayCheck() to sort out displaying the + // personalized greetings and updating the form display + nameDisplayCheck(); + }); + ``` -
-

备注： 在完成版本的源代码中， <script src="index.js" defer></script> 一行里， defer 属性指明在页面加载完成之前，{{htmlelement("script")}}元素的内容不会执行。

-
+6. 此时，我们还需要一个事件处理程序，以便在单击“Forget”按钮时运行一个函数——且仅在单击“Say hello”按钮（两种表单状态来回切换）后才显示。在这个功能中，我们使用`removeItem()`从网络存储中删除项目`name`，然后再次运行`nameDisplayCheck()`以更新显示。将其添加到底部： -

存储复杂数据 — IndexedDB

+ ```js + // run function when the 'Forget' button is clicked + forgetBtn.addEventListener('click', function() { + // Remove the stored name from web storage + localStorage.removeItem('name'); + // run nameDisplayCheck() to sort out displaying the + // generic greeting again and updating the form display + nameDisplayCheck(); + }); + ``` -

IndexedDB API（有时简称 IDB）是可以在浏览器中访问的一个完整的数据库系统，在这里，你可以存储复杂的关系数据。其种类不限于像字符串和数字这样的简单值。你可以在一个 IndexedDB 中存储视频，图像和许多其他的内容。

+7. 现在是时候定义`nameDisplayCheck()`函数本身了。在这里，我们通过使用`localStorage.getItem('name')`作为测试条件来检查 name 数据项是否已经存储在 Web Storage 中。如果它已被存储，则该调用的返回值为`true`; 如果没有，它会是`false`。如果是`true`，我们会显示个性化问候语，显示表格的“forget”部分，并隐藏表格的“Say hello”部分。如果是`false`，我们会显示一个通用问候语，并做相反的事。再次将下面的代码添到底部： -

但是，这确实是有代价的：使用 IndexedDB 要比 Web Storage API 复杂得多。在本节中，我们仅仅只能浅尝辄止地一提它的能力，不过我们会给你足够基础知识以帮助你开始。

+ ```js + // define the nameDisplayCheck() function + function nameDisplayCheck() { + // check whether the 'name' data item is stored in web Storage + if(localStorage.getItem('name')) { + // If it is, display personalized greeting + let name = localStorage.getItem('name'); + h1.textContent = 'Welcome, ' + name; + personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.'; + // hide the 'remember' part of the form and show the 'forget' part + forgetDiv.style.display = 'block'; + rememberDiv.style.display = 'none'; + } else { + // if not, display generic greeting + h1.textContent = 'Welcome to our website '; + personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.'; + // hide the 'forget' part of the form and show the 'remember' part + forgetDiv.style.display = 'none'; + rememberDiv.style.display = 'block'; + } + } + ``` + +8. 最后但同样重要的是，我们需要在每次加载页面时运行`nameDisplayCheck()`函数。如果我们不这样做，那么个性化问候不会在页面重新加载后保持。将以下代码添加到代码的底部： + + ```js + document.body.onload = nameDisplayCheck; + ``` -

通过一个笔记存储示例演示

+你的例子完成了 - 做得好！现在剩下的就是保存你的代码并在浏览器中测试你的 HTML 页面。你可以在这里看到我们的[完成版本并在线运行](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html)。 -

在这里，我们将向您介绍一个示例，该示例允许您在浏览器中存储笔记并随时查看和删除它们，在我们进行时，我们将解释 IDB 的最基本部分并让您自己构建注释。

+> **备注：** 在 [Using the Web Storage API](/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) 中还有一个稍微复杂点儿的示例。 -

这个应用看起来像这样：

+> **备注：** 在完成版本的源代码中， `` 一行里， `defer` 属性指明在页面加载完成之前，{{htmlelement("script")}}元素的内容不会执行。 -

+## 存储复杂数据 — IndexedDB -

每个笔记都有一个标题和一些正文，每个都可以单独编辑。我们将在下面通过的 JavaScript 代码提供详细的注释，以帮助您了解正在发生的事情。

+[IndexedDB API](/en-US/docs/Web/API/IndexedDB_API)（有时简称 IDB）是可以在浏览器中访问的一个完整的数据库系统，在这里，你可以存储复杂的关系数据。其种类不限于像字符串和数字这样的简单值。你可以在一个 IndexedDB 中存储视频，图像和许多其他的内容。 -

开始

+但是，这确实是有代价的：使用 IndexedDB 要比 Web Storage API 复杂得多。在本节中，我们仅仅只能浅尝辄止地一提它的能力，不过我们会给你足够基础知识以帮助你开始。 -

1、首先，将 index.html, style.css, 和 index-start.js 文件的本地副本放入本地计算机上的新目录中。

+### 通过一个笔记存储示例演示 -

2、浏览这些文件。 您将看到 HTML 非常简单：具有页眉和页脚的网站，以及包含显示注释的位置的主内容区域，以及用于在数据库中输入新注释的表单。 CSS 提供了一些简单的样式，使其更清晰。 JavaScript 文件包含五个声明的常量，其中包含对将显示注释的 {{htmlelement("ul")}} 元素的引用，标题和正文 {{htmlelement("input")}} 元素，{{htmlelement("form")}}本身，以及{{htmlelement("button")}}。

+在这里，我们将向您介绍一个示例，该示例允许您在浏览器中存储笔记并随时查看和删除它们，在我们进行时，我们将解释 IDB 的最基本部分并让您自己构建注释。 -

3、将您的 JavaScript 文件重命名为 index.js 。 您现在可以开始向其添加代码了。

+这个应用看起来像这样： -

数据库初始设置

+![](idb-demo.png) -

现在让我们来看看为了建立数据库必须首先要做什么。

+每个笔记都有一个标题和一些正文，每个都可以单独编辑。我们将在下面通过的 JavaScript 代码提供详细的注释，以帮助您了解正在发生的事情。 -
    -
  1. -

    在常量声明下，加入这几行：

    +### 开始 - 
    // Create an instance of a db object for us to store the open database in
-let db;
    +1、首先，将 [`index.html`](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/style.css), 和 [`index-start.js`](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index-start.js) 文件的本地副本放入本地计算机上的新目录中。 -

    这里我们声明了一个叫 db 的变量 — 这将在之后被用来存储一个代表数据库的对象。我们将在几个地方使用它，所以我们为了方便使用而在这里把它声明为全局的。

    -
    2. -
  2. -

    接着，在你的代码最后添加如下代码：

    +2、浏览这些文件。 您将看到 HTML 非常简单：具有页眉和页脚的网站，以及包含显示注释的位置的主内容区域，以及用于在数据库中输入新注释的表单。 CSS 提供了一些简单的样式，使其更清晰。 JavaScript 文件包含五个声明的常量，其中包含对将显示注释的 {{htmlelement("ul")}} 元素的引用，标题和正文 {{htmlelement("input")}} 元素，{{htmlelement("form")}}本身，以及{{htmlelement("button")}}。 - 
    window.onload = function() {
+3、将您的 JavaScript 文件重命名为 `index.js` 。 您现在可以开始向其添加代码了。
 
-};
    +### 数据库初始设置 -

    我们将把所有的后续代码写在这个 window.onload 事件处理函数内，这个函数将在 window 的{{event("load")}}事件被触发时调用，为了确保我们没有在应用完整加载前试图使用 IndexedDB 功能（如果我们不这么做，它会失败）。

    -
    3. -
  3. -

    在window.onload处理程序内，添加以下内容：

    +现在让我们来看看为了建立数据库必须首先要做什么。 - 
    // Open our database; it is created if it doesn't already exist
-// (see onupgradeneeded below)
-let request = window.indexedDB.open('notes', 1);
    +1. 在常量声明下，加入这几行： -

    此行创建一个 request 变量，目的是打开 notes数据库的 1版本。如果notes数据库不存在，则后续代码将为您创建。您将在 IndexedDB 中经常看到此请求模式。数据库操作需要时间。您不希望在等待结果时挂起浏览器，因此数据库操作是异步的，这意味着它们不会立即发生，而是在将来的某个时刻发生，并且在完成后会收到通知。

    + ```js + // Create an instance of a db object for us to store the open database in + let db; + ``` -

    要在 IndexedDB 中处理此问题，您需要创建一个请求对象（可以随意命名 - 命名为request，可以表明它的用途）。然后，在请求完成或者失败时，使用事件处理程序来运行代码，您将在下面看到这些代码。

    + 这里我们声明了一个叫 `db` 的变量 — 这将在之后被用来存储一个代表数据库的对象。我们将在几个地方使用它，所以我们为了方便使用而在这里把它声明为全局的。 + +2. 接着，在你的代码最后添加如下代码： + + ```js + window.onload = function() { + + }; + ``` -
    -

    备注： 版本号很重要。如果要升级数据库（例如：更改表结构），则必须使用增加的版本号或者onupgradeneeded处理程序内指定的不同模式（请参阅下文）等再次运行代码。在这个简单教程中，我们不讨论数据库升级。

    -
    + 我们将把所有的后续代码写在这个 `window.onload` 事件处理函数内，这个函数将在 window 的{{event("load")}}事件被触发时调用，为了确保我们没有在应用完整加载前试图使用 IndexedDB 功能（如果我们不这么做，它会失败）。 -
      -
    1. -

      在之前添加的事件处理程序下方添加以下代码 - 在window.onload处理程序内：

      +3. 在`window.onload`处理程序内，添加以下内容： - 
      // onerror handler signifies that the database didn't open successfully
-request.onerror = function() {
-  console.log('Database failed to open');
-};
+    ```js
+    // Open our database; it is created if it doesn't already exist
+    // (see onupgradeneeded below)
+    let request = window.indexedDB.open('notes', 1);
+    ```
 
-// onsuccess handler signifies that the database opened successfully
-request.onsuccess = function() {
-  console.log('Database opened successfully');
+    此行创建一个 `request` 变量，目的是打开 `notes`数据库的 `1`版本。如果`notes`数据库不存在，则后续代码将为您创建。您将在 IndexedDB 中经常看到此请求模式。数据库操作需要时间。您不希望在等待结果时挂起浏览器，因此数据库操作是[异步的](/en-US/docs/Glossary/asynchronous)，这意味着它们不会立即发生，而是在将来的某个时刻发生，并且在完成后会收到通知。
 
-  // Store the opened database object in the db variable. This is used a lot below
-  db = request.result;
+    要在 IndexedDB 中处理此问题，您需要创建一个请求对象（可以随意命名 - 命名为`request`，可以表明它的用途）。然后，在请求完成或者失败时，使用事件处理程序来运行代码，您将在下面看到这些代码。
 
-  // Run the displayData() function to display the notes already in the IDB
-  displayData();
-};
      + > **备注：** 版本号很重要。如果要升级数据库（例如：更改表结构），则必须使用增加的版本号或者`onupgradeneeded`处理程序内指定的不同模式（请参阅下文）等再次运行代码。在这个简单教程中，我们不讨论数据库升级。 -

      如果系统返回：请求失败，request.onerror将会运行。这将允许你对这个问题做出响应。在我们的简单示例中，只是将消息打印到 JavaScript 控制台。

      + 1. 在之前添加的事件处理程序下方添加以下代码 - 在`window.onload`处理程序内： -

      如果系统返回：请求成功，表明成功打开数据库，request.onsuccess将会运行。如果是这种情况，则表示已打开数据库的对象在request.result属性中变为可用，从而允许我们操作数据库。我们将它存储在db我们之前创建的变量中供以后使用。我们还运行一个名为displayData()的自定义函数，它把数据库中的数据显示在 元素 ( 或 HTML 无序列表元素） 代表多项的无序列表，即无数值排序项的集合，且它们在列表中的顺序是没有意义的。通常情况下，无序列表项的头部可以是几种形式，如一个点，一个圆形或方形。头部的风格并不是在页面的HTML描述定义, 但在其相关的CSS 可以用 list-style-type 属性。"><ul>。我们现在运行它，以便在页面加载时显示数据库中已有的注释。您将在稍后看到此定义。

      -
      2. -
    -
    4. -
  4. -

    最后，对于本节，我们可能会添加最重要的事件处理程序来设置数据库：request.onupgradeneeded。如果尚未设置数据库，或者使用比现有存储数据库更大的版本号打开数据库（执行升级时），则运行此处理程序。在上一个处理程序下面添加以下代码：

    + ```js + // onerror handler signifies that the database didn't open successfully + request.onerror = function() { + console.log('Database failed to open'); + }; - 
    // Setup the database tables if this has not already been done
-request.onupgradeneeded = function(e) {
-  // Grab a reference to the opened database
-  let db = e.target.result;
+        // onsuccess handler signifies that the database opened successfully
+        request.onsuccess = function() {
+          console.log('Database opened successfully');
 
-  // Create an objectStore to store our notes in (basically like a single table)
-  // including a auto-incrementing key
-  let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true });
+          // Store the opened database object in the db variable. This is used a lot below
+          db = request.result;
 
-  // Define what data items the objectStore will contain
-  objectStore.createIndex('title', 'title', { unique: false });
-  objectStore.createIndex('body', 'body', { unique: false });
+          // Run the displayData() function to display the notes already in the IDB
+          displayData();
+        };
+        ```
 
-  console.log('Database setup complete');
-};
    + 如果系统返回：请求失败，[`request.onerror`](/zh-CN/docs/Web/API/IDBRequest/onerror)将会运行。这将允许你对这个问题做出响应。在我们的简单示例中，只是将消息打印到 JavaScript 控制台。 -

    这是我们定义数据库的模式（结构）的地方; 也就是说，它包含的列（或字段）集。这里我们首先从e.target.result（事件目标的result属性）中获取对现有数据库的引用，该引用是request对象。这相当于处理程序db = request.result;内部的行onsuccess，但我们需要在此单独执行此操作，因为onupgradeneeded处理程序（如果需要）将在onsuccess处理程序之前运行，这意味着db如果我们不这样做，该值将不可用。

    + 如果系统返回：请求成功，表明成功打开数据库，[`request.onsuccess`](/zh-CN/docs/Web/API/IDBRequest/onsuccess)将会运行。如果是这种情况，则表示已打开数据库的对象在[`request.result`](/zh-CN/docs/Web/API/IDBRequest/result)属性中变为可用，从而允许我们操作数据库。我们将它存储在`db`我们之前创建的变量中供以后使用。我们还运行一个名为`displayData()`的自定义函数，它把数据库中的数据显示在[ 元素 ( 或 HTML 无序列表元素） 代表多项的无序列表，即无数值排序项的集合，且它们在列表中的顺序是没有意义的。通常情况下，无序列表项的头部可以是几种形式，如一个点，一个圆形或方形。头部的风格并不是在页面的 HTML 描述定义, 但在其相关的 CSS 可以用 list-style-type 属性。">`
      `](/zh-CN/docs/Web/HTML/Element/ul)。我们现在运行它，以便在页面加载时显示数据库中已有的注释。您将在稍后看到此定义。 -

      然后IDBDatabase.createObjectStore()，我们使用在打开的数据库中创建一个新的对象库。这相当于传统数据库系统中的单个表。我们给它起了名称注释，并且还指定了一个autoIncrement名为的关键字段id- 在每个新记录中，这将自动赋予增量值 - 开发人员不需要明确地设置它。作为密钥，该id字段将用于唯一标识记录，例如删除或显示记录时。

      +4. 最后，对于本节，我们可能会添加最重要的事件处理程序来设置数据库：[`request.onupgradeneeded`](/zh-CN/docs/Web/API/IDBOpenDBRequest/onupgradeneeded)。如果尚未设置数据库，或者使用比现有存储数据库更大的版本号打开数据库（执行升级时），则运行此处理程序。在上一个处理程序下面添加以下代码： -

      我们还使用以下IDBObjectStore.createIndex()方法创建另外两个索引（字段）:( title每个音符将包含一个标题），以及body（包含音符的正文）。

      - -
+ ```js + // Setup the database tables if this has not already been done + request.onupgradeneeded = function(e) { + // Grab a reference to the opened database + let db = e.target.result; -

因此，通过设置这个简单的数据库模式，当我们开始向数据库添加记录时，每个记录都会沿着这些行表示为一个对象：

+ // Create an objectStore to store our notes in (basically like a single table) + // including a auto-incrementing key + let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true }); -
{
+      // Define what data items the objectStore will contain
+      objectStore.createIndex('title', 'title', { unique: false });
+      objectStore.createIndex('body', 'body', { unique: false });
+
+      console.log('Database setup complete');
+    };
+    ```
+
+    这是我们定义数据库的模式（结构）的地方; 也就是说，它包含的列（或字段）集。这里我们首先从`e.target.result`（事件目标的`result`属性）中获取对现有数据库的引用，该引用是`request`对象。这相当于处理程序`db = request.result;`内部的行`onsuccess`，但我们需要在此单独执行此操作，因为`onupgradeneeded`处理程序（如果需要）将在`onsuccess`处理程序之前运行，这意味着`db`如果我们不这样做，该值将不可用。
+
+    然后[`IDBDatabase.createObjectStore()`](/zh-CN/docs/Web/API/IDBDatabase/createObjectStore)，我们使用在打开的数据库中创建一个新的对象库。这相当于传统数据库系统中的单个表。我们给它起了名称注释，并且还指定了一个`autoIncrement`名为的关键字段`id`- 在每个新记录中，这将自动赋予增量值 - 开发人员不需要明确地设置它。作为密钥，该`id`字段将用于唯一标识记录，例如删除或显示记录时。
+
+    我们还使用以下[`IDBObjectStore.createIndex()`](/zh-CN/docs/Web/API/IDBObjectStore/createIndex)方法创建另外两个索引（字段）:( `title`每个音符将包含一个标题），以及`body`（包含音符的正文）。
+
+因此，通过设置这个简单的数据库模式，当我们开始向数据库添加记录时，每个记录都会沿着这些行表示为一个对象：
+
+```js
+{
   title: "Buy milk",
   body: "Need both cows milk and soya.",
   id: 8
-}
+} +``` -

添加数据到数据库

+### 添加数据到数据库 -

现在让我们看一下如何将记录添加到数据库中。这将使用我们页面上的表单完成。

+现在让我们看一下如何将记录添加到数据库中。这将使用我们页面上的表单完成。 -

在您之前的事件处理程序下面（但仍在window.onload处理程序中），添加以下行，该行设置一个onsubmit处理程序，该处理程序运行addData()在提交表单时调用的函数（当 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。"><button>按下提交时导致成功提交表单）：

+在您之前的事件处理程序下面（但仍在`window.onload`处理程序中），添加以下行，该行设置一个`onsubmit`处理程序，该处理程序运行`addData()`在提交表单时调用的函数（当[ 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。">` -<ul> + -</div> + -<textarea id="code" class="playable-code" style="height: 370px;"> + -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div> - +
+ + +
+``` - - -

{{ EmbedLiveSample('积极学习：前 5 个搜索', '100%', 600) }}

+``` -

总结

+{{ EmbedLiveSample('积极学习：前 5 个搜索', '100%', 600) }} -

阅读本文后，我们相信您会明白数组是很有用的; 你会看到它们在 JavaScript 中随处可见，通常与循环相关，以便对数组中的每个元素做同样的事情。我们将教你所有有用的基础知识，了解下一个模块中的循环，但现在你应该给自己鼓掌，并稍加休息; 您已经完成了本单元中的所有文章！

+## 总结 -

唯一需要做的就是通过这个模块的评估，这将测试你对之前的文章的理解。

+阅读本文后，我们相信您会明白数组是很有用的; 你会看到它们在 JavaScript 中随处可见，通常与循环相关，以便对数组中的每个元素做同样的事情。我们将教你所有有用的基础知识，了解下一个模块中的循环，但现在你应该给自己鼓掌，并稍加休息; 您已经完成了本单元中的所有文章！ -

相关链接

+唯一需要做的就是通过这个模块的评估，这将测试你对之前的文章的理解。 - +## 相关链接 -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}

+- [Indexed collections](/en-US/docs/Web/JavaScript/Guide/Indexed_collections) — 数组及其表兄弟类型阵列的高级指导。 +- {{jsxref("Array")}} — Array 对象引用页面 - 有关此页面中讨论功能的详细参考指南等。 +{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}} +## 在本单元中 -

在本单元中

- - +- [What is JavaScript?](/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript) +- [A first splash into JavaScript](/en-US/docs/Learn/JavaScript/First_steps/A_first_splash) +- [What went wrong? Troubleshooting JavaScript](/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong) +- [Storing the information you need — Variables](/en-US/docs/Learn/JavaScript/First_steps/Variables) +- [Basic math in JavaScript — numbers and operators](/en-US/docs/Learn/JavaScript/First_steps/Math) +- [Handling text — strings in JavaScript](/en-US/docs/Learn/JavaScript/First_steps/Strings) +- [Useful string methods](/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods) +- [Arrays](/en-US/docs/Learn/JavaScript/First_steps/Arrays) +- [Assessment: Silly story generator](/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator) diff --git a/files/zh-cn/learn/javascript/first_steps/index.md b/files/zh-cn/learn/javascript/first_steps/index.md index 7f9293e19821b0..0ca53bf699ecae 100644 --- a/files/zh-cn/learn/javascript/first_steps/index.md +++ b/files/zh-cn/learn/javascript/first_steps/index.md @@ -8,50 +8,42 @@ tags: - 新手 translation_of: Learn/JavaScript/First_steps --- -
{{LearnSidebar}}
- -

在第一个 JavaScript 板块，带领各位体验编写 JavaScript 程序前，首先回答一些基本问题：「什么是 JavaScript？」，「它看上去是什么样的？」，「它能做什么？」。此后，我们将详细讨论一些关键构件，例如变量、字符串、数值和数组。

- -

事前准备

- -

学习这个板块前，你不需要预先了解任何 JavaScript 知识，但你应当对 HTML 和 CSS 有所熟悉。我们建议学习 JavaScript 前，先完成以下板块阅读：

- - - -
-

备注： 如果你无法在你使用的电脑/平板/其他设备上创建自己的文件，尝试使用在线编程应用来运行（大部分）代码示例，例如 JSBin 和 Glitch。

-
- -

学习指南

- -
-
什么是 JavaScript？
-
欢迎来到 MDN JavaScript 新手课程！第一篇文章，我们将从较高层次审视 JavaScript，解答诸如「它是什么？」、「它在做些什么？」的问题，确保你理解 JavaScript 的用途。
-
JavaScript 初体验
-
你已经学习了一些 JavaScript 理论，了解了可以用它做什么，接下来我们将通过一个非常实用的教程，带给你一节 JavaScript 基本特性速成课。在这里你将一步一步构建出一个「猜数字」游戏。
-
哪里出错了？JavaScript 疑难解答
-
构建上篇文章中的「猜数字」游戏时，你可能发现它没法运行。不要害怕——这篇文章来解救正为问题挠头的你，它为你提供一些从 JavaScript 程序中发现并解决问题的思路。
-
存储你需要的信息——变量
-
读过最近几篇文章，你应当了解 JavaScript 是什么，它能为你做什么，如何搭配其他 web 技术使用，以及从较高层次来看，它的主要特性是什么样的。这篇文章，我们将深入真正的基础，看看如何使用 JavaScript 的基本构件——变量。
-
JavaScript 中的基本运算——数值和运算符
-
这一课我们讨论 JavaScript 的运算——如何将运算符与其他特性结合使用，完美操作数值来实现需求。
-
文字处理——JavaScript 字符串
-
接下来将目光转向字符串——编程世界中文字片段被称为字符串。本文涉及你在学习 JavaScript 时应当了解的有关字符串的所有常见情形，例如生成字符串、字符串中的引用以及合并字符串。
-
实用字符串方法
-
我们已经了解字符串的基本内容，接下来再上一个台阶，思考利用字符串内建方法实现的实用操作，例如获取字符串长度、字符串合并与分割、替换字符串中特定字符，等等。
-
数组
-
这个版块最后一篇文章，我们来看数组——干净整洁地把一连串数据项存储在同一个变量名下。这里我们要理解为什么说它实用，探索如何创建数组，如何获取、添加、删除数组中的项目等等内容。
-
- -

自我评估

- -

下面的评估会检验你对上述学习指南中 JavaScript 基础的理解。

- -
-
笑话生成器
-
这项评估中，你将运用你在这个版块的文章中学到的知识，构建一个生成随机笑话的好玩 app。玩得开心！
-
+{{LearnSidebar}} + +在第一个 JavaScript 板块，带领各位体验编写 JavaScript 程序前，首先回答一些基本问题：「什么是 JavaScript？」，「它看上去是什么样的？」，「它能做什么？」。此后，我们将详细讨论一些关键构件，例如变量、字符串、数值和数组。 + +## 事前准备 + +学习这个板块前，你不需要预先了解任何 JavaScript 知识，但你应当对 HTML 和 CSS 有所熟悉。我们建议学习 JavaScript 前，先完成以下板块阅读： + +- [开始使用 Web](/zh-CN/docs/Learn/Getting_started_with_the_web)（包括 [JavaScript 基础简介](/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics)）。 +- [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)。 +- [CSS 简介](/zh-CN/docs/Learn/CSS/Introduction_to_CSS)。 + +> **备注：** 如果你无法在你使用的电脑/平板/其他设备上创建自己的文件，尝试使用在线编程应用来运行（大部分）代码示例，例如 [JSBin](http://jsbin.com/) 和 [Glitch](https://glitch.com/)。 + +## 学习指南 + +- [什么是 JavaScript？](/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript) + - : 欢迎来到 MDN JavaScript 新手课程！第一篇文章，我们将从较高层次审视 JavaScript，解答诸如「它是什么？」、「它在做些什么？」的问题，确保你理解 JavaScript 的用途。 +- [JavaScript 初体验](/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash) + - : 你已经学习了一些 JavaScript 理论，了解了可以用它做什么，接下来我们将通过一个非常实用的教程，带给你一节 JavaScript 基本特性速成课。在这里你将一步一步构建出一个「猜数字」游戏。 +- [哪里出错了？JavaScript 疑难解答](/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong) + - : 构建上篇文章中的「猜数字」游戏时，你可能发现它没法运行。不要害怕——这篇文章来解救正为问题挠头的你，它为你提供一些从 JavaScript 程序中发现并解决问题的思路。 +- [存储你需要的信息——变量](/zh-CN/docs/Learn/JavaScript/First_steps/Variables) + - : 读过最近几篇文章，你应当了解 JavaScript 是什么，它能为你做什么，如何搭配其他 web 技术使用，以及从较高层次来看，它的主要特性是什么样的。这篇文章，我们将深入真正的基础，看看如何使用 JavaScript 的基本构件——变量。 +- [JavaScript 中的基本运算——数值和运算符](/zh-CN/docs/Learn/JavaScript/First_steps/Math) + - : 这一课我们讨论 JavaScript 的运算——如何将运算符与其他特性结合使用，完美操作数值来实现需求。 +- [文字处理——JavaScript 字符串](/zh-CN/docs/Learn/JavaScript/First_steps/Strings) + - : 接下来将目光转向字符串——编程世界中文字片段被称为字符串。本文涉及你在学习 JavaScript 时应当了解的有关字符串的所有常见情形，例如生成字符串、字符串中的引用以及合并字符串。 +- [实用字符串方法](/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods) + - : 我们已经了解字符串的基本内容，接下来再上一个台阶，思考利用字符串内建方法实现的实用操作，例如获取字符串长度、字符串合并与分割、替换字符串中特定字符，等等。 +- [数组](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays) + - : 这个版块最后一篇文章，我们来看数组——干净整洁地把一连串数据项存储在同一个变量名下。这里我们要理解为什么说它实用，探索如何创建数组，如何获取、添加、删除数组中的项目等等内容。 + +## 自我评估 + +下面的评估会检验你对上述学习指南中 JavaScript 基础的理解。 + +- [笑话生成器](/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator) + - : 这项评估中，你将运用你在这个版块的文章中学到的知识，构建一个生成随机笑话的好玩 app。玩得开心！ diff --git a/files/zh-cn/learn/javascript/first_steps/math/index.md b/files/zh-cn/learn/javascript/first_steps/math/index.md index f837576d72761d..e7f05555d8f3c6 100644 --- a/files/zh-cn/learn/javascript/first_steps/math/index.md +++ b/files/zh-cn/learn/javascript/first_steps/math/index.md @@ -3,381 +3,315 @@ title: JavaScript 中的基础数学 — 数字和操作符 slug: Learn/JavaScript/First_steps/Math translation_of: Learn/JavaScript/First_steps/Math --- -
{{LearnSidebar}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}} -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
- -

在本次课程中，我们讨论 JavaScript 中的数学 — 我们如何使用 {{Glossary("Operator","运算符")}} 和其他功能来成功地操作数字以完成我们的请求。

+在本次课程中，我们讨论 JavaScript 中的数学 — 我们如何使用 {{Glossary("Operator","运算符")}} 和其他功能来成功地操作数字以完成我们的请求。 - - - - - - - - - - + + + + + + + + + +
前提：基本的计算机知识，对 HTML 和 CSS 初步了解，知道 JavaScript 是什么。
目标：熟悉 JavaScript 中 Math 的基础知识。
前提： + 基本的计算机知识，对 HTML 和 CSS 初步了解，知道 JavaScript 是什么。 +
目标：熟悉 JavaScript 中 Math 的基础知识。
-

人人都爱数学

+## 人人都爱数学 + +好吧，可能不是。有些人喜欢数学，有些人可能从在学校必须学习乘法表和长除法时就讨厌数学，还有人介于两者之间。但我们都不能否认，数学是生活的基本组成部分，我们离不了它。尤其如此，当我们学习编写 JavaScript 程序（或任何其他语言），我们所做的很多事情都依赖于处理数值数据，计算新值等。你将不会惊讶地认识到 JavaScript 有一套可用的全功能的数学功能。 + +本文仅讨论您现在需要了解的基本部分。 + +### 数字类型 -

好吧，可能不是。有些人喜欢数学，有些人可能从在学校必须学习乘法表和长除法时就讨厌数学，还有人介于两者之间。但我们都不能否认，数学是生活的基本组成部分，我们离不了它。尤其如此，当我们学习编写 JavaScript 程序（或任何其他语言），我们所做的很多事情都依赖于处理数值数据，计算新值等。你将不会惊讶地认识到 JavaScript 有一套可用的全功能的数学功能。

+在编程中，即使是人人熟知的最普遍的十进制数，也比你想象的要复杂的多。我们使用不同的术语来描述不同类型的十进制数，例如： -

本文仅讨论您现在需要了解的基本部分。

+- **整数** 就是整数，例如 10, 400, 或者 -5. +- **浮点数** (浮点) 有小数点或小数位，例如 12.5，和 56.7786543。 +- **双精度**双精度是一种特定类型的浮点数，它们具有比标准浮点数更高的精度（这意味着它们精确到更大的小数位数）。 -

数字类型

+我们甚至有不同类型的数字系统！十进制是基数 10（意味着它在每列使用 0-9），但是我们也有这样的东西： -

在编程中，即使是人人熟知的最普遍的十进制数，也比你想象的要复杂的多。我们使用不同的术语来描述不同类型的十进制数，例如：

+- **二进制** — 计算机的最基础语言—— 0 和 1 +- **八进制** — 基数 8，每列使用 0-7 +- **十六进制** — 基数 16，每列使用 0-9，然后使用 a-f。在 CSS 中设置颜色时，可能会遇到这些数字。 - +在你开始担心你的大脑混乱之前，先停下来吧！一开始，我们将在本课程中坚持使用十进制数; 你很少会遇到需要开始考虑其他类型的情况，如果有的话。 -

我们甚至有不同类型的数字系统！十进制是基数 10（意味着它在每列使用 0-9），但是我们也有这样的东西：

+第二个好消息是，与其他一些编程语言不同，JavaScript 只有一个数据类型用来表示数字（包括 integers 和 decimals），您猜对了，{{jsxref("Number")}}。这意味着，你在 JavaScript 中处理的任何类型的数字，都以完全相同的方式处理它们。 - +### 这是我们的全部数字 -

在你开始担心你的大脑混乱之前，先停下来吧！一开始，我们将在本课程中坚持使用十进制数; 你很少会遇到需要开始考虑其他类型的情况，如果有的话。

+让我们快点玩一些数字，以重新定义我们所需要的基本语法。在您的[开发工具 JavaScript 控制台](/zh-CN/docs/Learn/Discover_browser_developer_tools)中输入下面列出的命令。 -

第二个好消息是，与其他一些编程语言不同，JavaScript 只有一个数据类型用来表示数字（包括 integers 和 decimals），您猜对了，{{jsxref("Number")}}。这意味着，你在 JavaScript 中处理的任何类型的数字，都以完全相同的方式处理它们。

+**[在新窗口中打开](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/)** -

这是我们的全部数字

+1. 首先，我们先声明一对变量，并分别用一个整数和一个浮点数来初始化它们，然后再输入变量名来检查是否正确： -

让我们快点玩一些数字，以重新定义我们所需要的基本语法。在您的开发工具 JavaScript 控制台中输入下面列出的命令。

+ ```js + let myInt = 5; + let myFloat = 6.667; + myInt; + myFloat; + ``` -

在新窗口中打开

+2. 数值键入不带引号 —— 在继续之前尝试声明和初始化更多包含数字的变量。 +3. 现在我们来看看我们的原始变量是否是相同的数据类型。在 JavaScript 中有一个称为{{jsxref("Operators / typeof", "typeof")}} 的运算符。输入如下所示的两行： -
    -
  1. 首先，我们先声明一对变量，并分别用一个整数和一个浮点数来初始化它们，然后再输入变量名来检查是否正确： - 
    let myInt = 5;
-let myFloat = 6.667;
-myInt;
-myFloat;
    -
    2. -
  2. 数值键入不带引号 —— 在继续之前尝试声明和初始化更多包含数字的变量。
    3. -
  3. 现在我们来看看我们的原始变量是否是相同的数据类型。在 JavaScript 中有一个称为{{jsxref("Operators / typeof", "typeof")}} 的运算符。输入如下所示的两行： - 
    typeof myInt;
-typeof myFloat;
    - 在这两种情况下，都应该返回 "number" —— 这使得事情变得更简单，因为若是不同的数字具有不同的数据类型，那么我们还须以不同的方式处理它们。呦！
    4. -
+ ```js + typeof myInt; + typeof myFloat; + ``` -

算术运算符

+ 在这两种情况下，都应该返回 `"number"` —— 这使得事情变得更简单，因为若是不同的数字具有不同的数据类型，那么我们还须以不同的方式处理它们。呦！ -

算术运算符是我们用来做和的基本运算符：

+## 算术运算符 + +算术运算符是我们用来做和的基本运算符： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
运算符名称作用示例
+加法两个数相加。6 + 9
-减法从左边减去右边的数。20 - 15
*乘法两个数相乘。3 * 7
/除法用右边的数除左边的数10 / 5
%求余 (有时候也叫取模) -

在你将左边的数分成同右边数字相同的若干整数部分后，返回剩下的余数

- 		8 % 3 (返回 2，8 除以 3 的倍数，余下 2。)
**幂 -

取底数的指数次方，即指数所指定的底数相乘。它在 EcmaScript 2016 中首次引入。

- 		5 ** 5 (返回 3125，相当于 5 * 5 * 5 * 5 * 5 。)
运算符名称作用示例
+加法两个数相加。6 + 9
-减法从左边减去右边的数。20 - 15
*乘法两个数相乘。3 * 7
/除法用右边的数除左边的数10 / 5
%求余 (有时候也叫取模) +

在你将左边的数分成同右边数字相同的若干整数部分后，返回剩下的余数

+ 		8 % 3 (返回 2，8 除以 3 的倍数，余下 2。)
**幂 +

+ 取底数的指数次方，即指数所指定的底数相乘。它在 EcmaScript 2016 + 中首次引入。 +

+ 		+ 5 ** 5 (返回 3125，相当于 + 5 * 5 * 5 * 5 * 5 。) +
-
-

备注： 你以后有时候会看到参与算术计算的数字被称为 操作数 ({{Glossary("Operand", "operands")}})。

-
+> **备注：** 你以后有时候会看到参与算术计算的数字被称为 操作数 ({{Glossary("Operand", "operands")}})。 + +> **备注：** 有时你可能会看到使用较旧的 {{jsxref("Math.pow()")}} 方法表达的指数，该方法的工作方式非常相似。例如，在 `Math.pow(7, 3)` 中，`7` 是基数，`3` 是指数，因此表达式的结果是 `343`。 `Math.pow(7, 3)` 相当于 `7 ** 3`。 + +我们可能不需要教你如何做基础数学，但我们想测试你对所涉及的语法的理解。尝试将下面的示例输入到[开发者工具 JavaScript 控制台](/zh-CN/docs/Learn/Discover_browser_developer_tools)中。 -
-

备注： 有时你可能会看到使用较旧的 {{jsxref("Math.pow()")}} 方法表达的指数，该方法的工作方式非常相似。例如，在 Math.pow(7, 3) 中，7 是基数，3 是指数，因此表达式的结果是 343。 Math.pow(7, 3) 相当于 7 ** 3。

-
+1. 首先尝试输入一些简单的例子，例如 -

我们可能不需要教你如何做基础数学，但我们想测试你对所涉及的语法的理解。尝试将下面的示例输入到开发者工具 JavaScript 控制台中。

+ ```js + 10 + 7 + 9 * 8 + 60 % 3 + ``` -
    -
  1. 首先尝试输入一些简单的例子，例如 - 
    10 + 7
-9 * 8
-60 % 3
    -
    2. -
  2. 您还可以尝试声明变量并用数字初始化变量，然后尝试使用这些变量来求和 - 求和中变量的行为与直接用其持有的数来求和完全一样。例如： - 
    let num1 = 10;
-let num2 = 50;
-9 * num1;
-num1 ** 3;
-num2 / num1;
    -
    3. -
  3. 最后在本节中，尝试输入一些更复杂的表达式，如： - 
    5 + 10 * 3;
-num2 % 9 * num1;
-num2 + num1 / 8 + 2;
    -
    4. -
+2. 您还可以尝试声明变量并用数字初始化变量，然后尝试使用这些变量来求和 - 求和中变量的行为与直接用其持有的数来求和完全一样。例如： -

这最后的一组计算中可能没有给出你期望的结果; 下面的部分也许能告诉你为什么。

+ ```js + let num1 = 10; + let num2 = 50; + 9 * num1; + num1 ** 3; + num2 / num1; + ``` -

运算符优先级

+3. 最后在本节中，尝试输入一些更复杂的表达式，如： -

我们来看看上面的最后一个例子，假设 num2 的值为 50，num1 的值为 10（如上所述）：

+ ```js + 5 + 10 * 3; + num2 % 9 * num1; + num2 + num1 / 8 + 2; + ``` -
num2 + num1 / 8 + 2;
+这最后的一组计算中可能没有给出你期望的结果; 下面的部分也许能告诉你为什么。 -

一般人，你会将它看作“50 加 10 等于 60”，然后“8 加 2 等于 10”，最后“60 除以 10 等于 6”。

+### 运算符优先级 -

但浏览器的“10 除以 8 等于 1.25”，那么“50 加 1.25 加 2 等于 53.25”。

+我们来看看上面的最后一个例子，假设 num2 的值为 50，num1 的值为 10（如上所述）： -

这是因为运算符优先级 —— 一些运算符将在计算算式（在编程中称为表达式）的结果时先于其他运算符被执行。JavaScript 中的运算符优先级与学校的数学课程相同 - 乘法和除法总是先完成，然后是加法和减法（总是从左到右进行计算）。

+```js +num2 + num1 / 8 + 2; +``` -

如果想要改变计算优先级，可以把想要优先计算的部分用括号围住。所以要得到结果为 6，我们可以这样做：

+一般人，你会将它看作“50 加 10 等于 60”，然后“8 加 2 等于 10”，最后“60 除以 10 等于 6”。 -
(num2 + num1) / (8 + 2);
+但浏览器的“10 除以 8 等于 1.25”，那么“50 加 1.25 加 2 等于 53.25”。 -

尝试看看。

+这是因为**运算符优先级** —— 一些运算符将在计算算式（在编程中称为表达式）的结果时先于其他运算符被执行。JavaScript 中的运算符优先级与学校的数学课程相同 - 乘法和除法总是先完成，然后是加法和减法（总是从左到右进行计算）。 -
-

备注： 注意：可以在表达式和运算符中找到所有 JavaScript 运算符的完整列表及其优先级。

-
+如果想要改变计算优先级，可以把想要优先计算的部分用括号围住。所以要得到结果为 6，我们可以这样做： -

自增和自减运算符

+```js +(num2 + num1) / (8 + 2); +``` -

有时候，您需要反复把一个变量加 1 或减 1。这可以方便地使用增量（++）和递减（ -- ）运算符来完成。我们在JavaScript 初体验文章的“猜数字”游戏中使用了++，当我们添加 1 到我们的 guessCount 变量来跟踪用户在每次转动之后剩下的猜测时。

+尝试看看。 -
guessCount++;
+> **备注：** 注意：可以在[表达式和运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#运算符优先级)中找到所有 JavaScript 运算符的完整列表及其优先级。 -
-

备注： 它们最常用于 循环 中，您将在以后的课程中了解。例如，假设您想循环查看价格表，并为每个价格增加销售税。您可以使用循环依次查看每个值，并在每种情况下进行必要的计算，以添加销售税。当需要时，增量器用于移动到下一个值。我们实际上提供了一个简单的例子，显示了如何完成 —— 在线查看效果，并 查看源代码，看看是否可以发现增量器！我们稍后将会详细介绍循环。

-
+## 自增和自减运算符 -

我们来试试看你们的控制台。首先，请注意，您不能将这些直接应用于一个数字，这可能看起来很奇怪，但是我们为变量赋值一个新的更新值，而不是对该值进行操作。以下将返回错误：

+有时候，您需要反复把一个变量加 1 或减 1。这可以方便地使用增量（`++`）和递减（ `--` ）运算符来完成。我们在[JavaScript 初体验](/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash)文章的“猜数字”游戏中使用了++，当我们添加 1 到我们的 guessCount 变量来跟踪用户在每次转动之后剩下的猜测时。 -
3++;
+```js +guessCount++; +``` -

所以，你只能增加一个现有的变量。尝试这个：

+> **备注：** 它们最常用于 [循环](/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration) 中，您将在以后的课程中了解。例如，假设您想循环查看价格表，并为每个价格增加销售税。您可以使用循环依次查看每个值，并在每种情况下进行必要的计算，以添加销售税。当需要时，增量器用于移动到下一个值。我们实际上提供了一个简单的例子，显示了如何完成 —— [在线查看效果](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html)，并 [查看源代码](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html)，看看是否可以发现增量器！我们稍后将会详细介绍循环。 -
let num1 = 4;
-num1++;
+我们来试试看你们的控制台。首先，请注意，您不能将这些直接应用于一个数字，这可能看起来很奇怪，但是我们为变量赋值一个新的更新值，而不是对该值进行操作。以下将返回错误： -

好的，第二个奇怪的东西！执行此操作时，您会看到返回值为 4，这是因为浏览器返回当前值，然后增加变量。如果您再次返回变量值，则可以看到它已经递增：

+```js +3++; +``` -
num1;
+所以，你只能增加一个现有的变量。尝试这个： -

递减 -- 同样如此，尝试以下操作：

+```js +let num1 = 4; +num1++; +``` -
let num2 = 6;
+好的，第二个奇怪的东西！执行此操作时，您会看到返回值为 4，这是因为浏览器返回当前值，然后增加变量。如果您再次返回变量值，则可以看到它已经递增：
+
+```js
+num1;
+```
+
+递减 `--` 同样如此，尝试以下操作：
+
+```js
+let num2 = 6;
 num2--;
-num2;
+num2; +``` -
-

备注： 您可以使浏览器以其他方式进行操作 - 递增/递减变量，然后返回值 - 将操作符放在变量的开头，而不是结束。再次尝试上面的例子，但这次使用 ++num1 和 --num2。

-
+> **备注：** 您可以使浏览器以其他方式进行操作 - 递增/递减变量，然后返回值 - 将操作符放在变量的开头，而不是结束。再次尝试上面的例子，但这次使用 `++num1` 和 `--num2`。 -

赋值运算符

+## 赋值运算符 -

赋值运算符是向变量分配值的运算符。我们已经使用了最基本的一个很多次了：=，它只是将右边的值赋给左边的变量，即：

+赋值运算符是向变量分配值的运算符。我们已经使用了最基本的一个很多次了：`=`，它只是将右边的值赋给左边的变量，即： -
let x = 3; // x 的值是 3
+```js
+let x = 3; // x 的值是 3
 let y = 4; // y 的值是 4
-x = y; // x 和 y 有相同的值，4
+x = y; // x 和 y 有相同的值，4 +``` -

但是还有一些更复杂的类型，它们提供了有用的快捷方式，可以使您的代码更加清洁和高效。最常见的如下：

+但是还有一些更复杂的类型，它们提供了有用的快捷方式，可以使您的代码更加清洁和高效。最常见的如下： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
运算符名称作用示例等价于
+=加法赋值右边的数值加上左边的变量，然后再返回新的变量。x = 3;
- x += 4;		x = 3;
- x = x + 4;
-=减法赋值左边的变量减去右边的数值，然后再返回新的变量。x = 6;
- x -= 3;		x = 6;
- x = x - 3;
*=乘法赋值左边的变量乘以右边的数值，然后再返回新的变量。x = 2;
- x *= 3;		x = 2;
- x = x * 3;
/=除法赋值左边的变量除以右边的数值，然后再返回新的变量。x = 10;
- x /= 5;		x = 10;
- x = x / 5;
+| 运算符 | 名称 | 作用 | 示例 | 等价于 | +| ------ | -------- | ---------------------------------------------- | ----------------- | -------------------- | +| `+=` | 加法赋值 | 右边的数值加上左边的变量，然后再返回新的变量。 | `x = 3; x += 4;` | `x = 3; x = x + 4;` | +| `-=` | 减法赋值 | 左边的变量减去右边的数值，然后再返回新的变量。 | `x = 6; x -= 3;` | `x = 6; x = x - 3;` | +| `*=` | 乘法赋值 | 左边的变量乘以右边的数值，然后再返回新的变量。 | `x = 2; x *= 3;` | `x = 2; x = x * 3;` | +| `/=` | 除法赋值 | 左边的变量除以右边的数值，然后再返回新的变量。 | `x = 10; x /= 5;` | `x = 10; x = x / 5;` | -

尝试在你的控制台中输入上面的一些示例，以了解它们的工作原理。在每种情况下，你是否可以猜出在输入第二行之前的值。

+尝试在你的控制台中输入上面的一些示例，以了解它们的工作原理。在每种情况下，你是否可以猜出在输入第二行之前的值。 -

请注意，您可以愉快地使用每个表达式右侧的其他变量，例如：

+请注意，您可以愉快地使用每个表达式右侧的其他变量，例如： -
let x = 3; // x 包含值 3
+```js
+let x = 3; // x 包含值 3
 let y = 4; // y 包含值 4
-x *= y; // x 现在包含值 12
+x *= y; // x 现在包含值 12 +``` -
-

备注： 虽然有很多可用的赋值运算符, 但是这些是你现在应该学习的基本的一类。

-
+> **备注：** 虽然有很多可用的[赋值运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators), 但是这些是你现在应该学习的基本的一类。 -

主动学习：调整画布框的大小

+## 主动学习：调整画布框的大小 -

在这个练习中，我们将让你填写一些数字和操作符来操纵一个框的大小。该框使用称为{{domxref("Canvas API", "", "", "true")}}的浏览器 API 绘制。没有必要担心这是如何工作的 - 现在只关注数学。盒子的宽度和高度（以像素为单位）由变量 x 和 y 定义，变量 x 和 y 最初都被赋值为 50。

+在这个练习中，我们将让你填写一些数字和操作符来操纵一个框的大小。该框使用称为{{domxref("Canvas API", "", "", "true")}}的浏览器 API 绘制。没有必要担心这是如何工作的 - 现在只关注数学。盒子的宽度和高度（以像素为单位）由变量 `x` 和 `y` 定义，变量 `x` 和 `y` 最初都被赋值为 50。 -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}

+{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}} -

新窗口打开

+**[新窗口打开](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html)** -

在上面的可编辑代码框中，有两行标有清晰的注释，我们希望你更新以使框增长/缩小到某些大小，在每种情况下使用某些操作符和/或值。我们希望你回答以下问题：

+在上面的可编辑代码框中，有两行标有清晰的注释，我们希望你更新以使框增长/缩小到某些大小，在每种情况下使用某些操作符和/或值。我们希望你回答以下问题： - +- 更改计算 x 的行，使框仍然是 50px 宽，并且使用数字 43 和 7 以及算术运算符计算 50。 +- 更改计算 y 的行，使框为高 75 像素，使用数字 25 和 3 计算 75，以及算术运算符。 +- 更改计算 x 的行，使框为 250px 宽，250 是使用两个数字和余数（模）运算符计算的。 +- 更改计算 y 的行，使框为 150px 高，150 是使用三个数字计算的，以及减法和除数运算符。 +- 更改计算 x 的行，因此该框为 200px 宽，并且使用数字 4 和赋值运算符计算 200。 +- 更改计算 y 的行，使框为 200px 高，使用数字 50 和 3，乘法运算符和加法运算符计算 200。 -

如果你完全混淆了代码，别担心。您可以随时按“重置”按钮，使事情恢复正常。在您正确回答了上述所有问题后，可以自由地使用代码或创建自己的挑战。

+如果你完全混淆了代码，别担心。您可以随时按“重置”按钮，使事情恢复正常。在您正确回答了上述所有问题后，可以自由地使用代码或创建自己的挑战。 -

比较运算符

+## 比较运算符 -

有时，我们将要运行真/假测试，然后根据该测试的结果进行相应的操作 - 为此，我们使用比较运算符。

+有时，我们将要运行真/假测试，然后根据该测试的结果进行相应的操作 - 为此，我们使用比较运算符。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
运算符名称作用示例
===严格等于测试左右值是否相同5 === 2 + 4
!==严格不等于测试左右值是否不相同5 !== 2 + 3
<小于测试左值是否小于右值。10 < 6
>大于测试左值是否大于右值10 > 20
<=小于或等于测试左值是否小于或等于右值。3 <= 2
>=大于或等于测试左值是否大于或等于正确值。5 >= 4
+| 运算符 | 名称 | 作用 | 示例 | +| ------ | ---------- | ------------------------------ | ------------- | +| `===` | 严格等于 | 测试左右值是否相同 | `5 === 2 + 4` | +| `!==` | 严格不等于 | 测试左右值是否**不**相同 | `5 !== 2 + 3` | +| `<` | 小于 | 测试左值是否小于右值。 | `10 < 6` | +| `>` | 大于 | 测试左值是否大于右值 | `10 > 20` | +| <= | 小于或等于 | 测试左值是否小于或等于右值。 | `3 <= 2` | +| >= | 大于或等于 | 测试左值是否大于或等于正确值。 | `5 >= 4` | -
-

备注： 您可能会看到有些人在他们的代码中使用==和!=来判断相等和不相等，这些都是 JavaScript 中的有效运算符，但它们与===/!==不同，前者测试值是否相同，但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同。严格的版本往往导致更少的错误，所以我们建议您使用这些严格的版本。

-
+> **备注：** 您可能会看到有些人在他们的代码中使用`==`和`!=`来判断相等和不相等，这些都是 JavaScript 中的有效运算符，但它们与`===`/`!==`不同，前者测试值是否相同，但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同。严格的版本往往导致更少的错误，所以我们建议您使用这些严格的版本。 -

如果您尝试在控制台中输入这些值，您将看到它们都返回 true/false 值 - 我们在上一篇文章中提到的那些布尔值。这些是非常有用的，因为它们允许我们在我们的代码中做出决定 - 每次我们想要选择某种类型时，都会使用这些代码，例如：

+如果您尝试在控制台中输入这些值，您将看到它们都返回 `true`/`false` 值 - 我们在上一篇文章中提到的那些布尔值。这些是非常有用的，因为它们允许我们在我们的代码中做出决定 - 每次我们想要选择某种类型时，都会使用这些代码，例如： - +- 根据功能是打开还是关闭，在按钮上显示正确的文本标签。 +- 如果游戏结束，则显示游戏消息，或者如果游戏已经获胜，则显示胜利消息。 +- 显示正确的季节性问候，取决于假期季节。 +- 根据选择的缩放级别缩小或放大地图。 -

当我们在以后的的文章中查看条件语句时，我们将介绍如何编写这样的逻辑。现在，我们来看一个简单的例子：

+当我们在以后的的文章中查看条件语句时，我们将介绍如何编写这样的逻辑。现在，我们来看一个简单的例子： -
<button>Start machine</button>
-<p>The machine is stopped.</p>
-
+```html + +

The machine is stopped.

+``` -
const btn = document.querySelector('button');
+```js
+const btn = document.querySelector('button');
 const txt = document.querySelector('p');
 
 btn.addEventListener('click', updateBtn);
@@ -390,40 +324,35 @@ function updateBtn() {
     btn.textContent = 'Start machine';
     txt.textContent = 'The machine is stopped.';
   }
-}
+} +``` -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

+{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}} -

新窗口打开

+**[新窗口打开](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html)** -

您可以在 updateBtn（）函数内看到正在使用的等号运算符。在这种情况下，我们不会测试两个数学表达式是否具有相同的值 - 我们正在测试一个按钮的文本内容是否包含某个字符串 - 但它仍然是工作原理。如果按钮当前为“启动机器（start machine）”，则将其标签更改为“停止机器（stop machine）”，并根据需要更新标签。如果按钮上写着“停机”时被按下，我们将显示回原来的内容。

+您可以在 updateBtn（）函数内看到正在使用的等号运算符。在这种情况下，我们不会测试两个数学表达式是否具有相同的值 - 我们正在测试一个按钮的文本内容是否包含某个字符串 - 但它仍然是工作原理。如果按钮当前为“启动机器（start machine）”，则将其标签更改为“停止机器（stop machine）”，并根据需要更新标签。如果按钮上写着“停机”时被按下，我们将显示回原来的内容。 -
-

备注： 这种在两个状态之间来回交换的行为通常被称为 切换 (toggle)。它在一个状态和另一个状态之间切换 - 点亮，熄灭等

-
+> **备注：** 这种在两个状态之间来回交换的行为通常被称为**切换**。它在一个状态和另一个状态之间切换 - 点亮，熄灭等 -

总结

+## 总结 -

在本文中，我们已经介绍了现在需要了解 JavaScript 中数字的基本信息。你会发现，在你学习 JavaScript 过程中，num 类型的数据一直都在被使用，所以熟练的掌握它是一个不错的选择。如果你是那些不喜欢数学的人之一，你应该庆幸这一章内容很简短。

+在本文中，我们已经介绍了现在需要了解 JavaScript 中数字的基本信息。你会发现，在你学习 JavaScript 过程中，num 类型的数据一直都在被使用，所以熟练的掌握它是一个不错的选择。如果你是那些不喜欢数学的人之一，你应该庆幸这一章内容很简短。 -

在下一篇文章中，我们将探讨文本，以及 JavaScript 如何让我们操纵它。

+在下一篇文章中，我们将探讨文本，以及 JavaScript 如何让我们操纵它。 -
-

备注： 如果您喜欢数学，并希望阅读更多关于它如何在 JavaScript 中实现的，那么你可以在 MDN's main JavaScript 部分读到更多关于它的内容。对于学习数字与日期 和 表达式与运算符 来说，那是一个不错的地方。

-
+> **备注：** 如果您喜欢数学，并希望阅读更多关于它如何在 JavaScript 中实现的，那么你可以在 MDN's main JavaScript 部分读到更多关于它的内容。对于学习[数字与日期](/zh-CN/docs/Web/JavaScript/Guide/Numbers_and_dates) 和 [表达式与运算符](/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#运算符优先级) 来说，那是一个不错的地方。 -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

+{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}} -

在这个模块

+## 在这个模块 - +- [什么是 JavaScript?](/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript) +- [JavaScript 初体验](/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash) +- [哪里出错了](/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong)[? JavaScript 故障排除](/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong) +- [存储你需要的信息——变量](/zh-CN/docs/Learn/JavaScript/First_steps/Variables) +- [JavaScript 中的基本运算——数值和运算符](/zh-CN/docs/Learn/JavaScript/First_steps/Math) +- [文字处理——JavaScript 字符串](/zh-CN/docs/Learn/JavaScript/First_steps/Strings) +- [实用的 strings 方法](/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods) +- [Arrays](/zh-CN/docs/Learn/JavaScript/First_steps/Arrays) +- [Assessment: Silly story generator](/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator) diff --git a/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md b/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md index ecb116a341ae34..8405072c87e31c 100644 --- a/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md +++ b/files/zh-cn/learn/javascript/first_steps/silly_story_generator/index.md @@ -15,51 +15,49 @@ tags: - 课程设计 translation_of: Learn/JavaScript/First_steps/Silly_story_generator --- -
{{LearnSidebar}}
+{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}} -
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
- -

本节是一个小测验，要求你运用所学知识制作一个笑话生成器。祝玩的愉快！

+本节是一个小测验，要求你运用所学知识制作一个笑话生成器。祝玩的愉快！ - - - - - - - - - - + + + + + + + + + +
预备知识：请读完本章所有小节的内容后再开始这个测验。
目标：测试你对变量、数字、操作符、字符串和数组等 Javascript 基本概念的理解程度。
预备知识：请读完本章所有小节的内容后再开始这个测验。
目标： + 测试你对变量、数字、操作符、字符串和数组等 Javascript + 基本概念的理解程度。 +
-

起点

+## 起点 -

测验开始之前需要下载并保存 index.html、style.css、raw-text.txt。

+测验开始之前需要下载并保存 [index.html](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html)、[style.css](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/style.css)、[raw-text.txt](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt)。 -
-

备注： 你还可以用类似 JSBin 或 Glitch 这些在线编辑器来完成测验。你可以把 HTML、CSS 及 JavaScript 代码复制过去。如果你选的工具没有独立的 JavaScript 版面，可以随时在 HTML 页面中添加 <script> 元素。

-
+> **备注：** 你还可以用类似 [JSBin](http://jsbin.com/) 或 [Glitch](https://glitch.com/) 这些在线编辑器来完成测验。你可以把 HTML、CSS 及 JavaScript 代码复制过去。如果你选的工具没有独立的 JavaScript 版面，可以随时在 HTML 页面中添加 ` -</body> -</html> - + + +``` -

{{ EmbedLiveSample('项目简介', '100%', 350) }}

+{{ EmbedLiveSample('项目简介', '100%', 350) }} -
-

备注： 点击在线试用汉化版本。有兴趣还可以在本节结束后回来 看看代码。（没兴趣就跳过吧 :）

-
+> **备注：** 点击在线试用汉化版本。有兴趣还可以在本节结束后回来 [看看代码](https://github.com/roy-tian/learning-area/tree/master/javascript/introduction-to-js-1/assessment-finished)。（没兴趣就跳过吧 :） + +## 步骤 + +以下是你的工作。 + +初始化变量和函数： + +1. 将刚下载的文本文件中的“1. 定义变量和函数”标题项下所有代码复制粘贴至 main.js 中。此时你就有了三个变量（`customName` 是对“输入自定义的名字”文本框的引用，`randomize` 是对“随机生成笑话”按钮的引用，`story` 是对 HTML 底部的、准备存放笑话的 {{htmlelement("p")}} 元素的引用）和一个函数（`randomValueFromArray()` 取一个数组作参数，随机返回数组中的一个元素）。 +2. 然后是文本文件的第二节——“2. 纯文本字符串”。这里包含了一些字符串，这些字符串是项目的输入信息。你应该在 main.js 文件中用变量来保存它们。 + + 1. 用 `storyText` 变量保存第一个长字符串，“今天气温……”。 + 2. 用 `insertX` 数组保存第一组三个字符串，“怪兽威利……”。 + 3. 用 `insertY` 数组保存第二组三个字符串。“肯德基……”。 + 4. 用 `insertZ` 数组保存第三组三个字符串。“自燃了……”。 + +放置事件处理器并补全： + +1. 返回刚才的文本文件。 +2. 将“3. 事件监听器和未完成的函数定义”标题项下的代码复制粘贴至 `main.js` 文件。这将： + + - 为 `randomize` 变量增加一个点击事件的监听器。于是当所引用的按钮被点击时，`result()` 函数就会运行。 + - 为代码添加一个未完成的 `result()` 函数定义。本测验剩下的工作就是完成这个函数，让程序正常运行起来。 + +补全 `result()` 函数： + +1. 将 `newStory` 的值设置为 `storyText`。声明新变量有必要的，只有这样才能在每次按下按钮后、在函数运行时生成一个新的随机笑话。如果直接操作 `storyText` 则只能生成一次新故事 +2. 将 `xItem`、`yItem` 和 `zItem` 分别设置为 `randomValueFromArray(insertX)`、`randomValueFromArray(insertY)` 和 `randomValueFromArray(insertZ)`。 +3. 接下来将 `newStory` 中的占位符（`:inserta:`、`:insertb:` 和 `:insertc:` ）替换为 `xItem`、`yItem` 和 `zItem`。有专用的字符串方法可供使用，并用该方法的返回值为 `newStory` 赋值。每当按下按钮时，这些占位符都会替换为随机的笑话字符串。再给你一点提示，我们所说的这种方法每次只会将所找到的首个子字符串进行替换，因此该方法对某个占位符需要执行两次。 +4. 在第一个 `if` 块中再次调用这个字符串替换方法，以使 `newStory` 字符串中的名字“李雷”替换为变量 `name` 的值。这里我们说：“如果 `customName` 中有值，就把故事里的“李雷”替换成它。”如果是汉化版将 newStory 中的“李雷”替换成 `name` 的值； +5. 在第二个 `if` 块中检查 `american` 单选按钮是否被选中。如果选中，就要将故事中的重量和温度值从公斤和摄氏度转换为磅和华氏度，具体事项如下： + + 1. 确定英美单位的转换公式。 + 2. 定义变量 `weight`、`temperature` 的行中，分别将美制单位按公式转化为英制，用 `Math.round()` 对计算结果取整。然后将英式单位连接到末尾。 + 3. 就在上述两个变量的定义下方增加两个字符串置换操作，将“35 摄氏度”替换为 `temperature` 的值，将“140 公斤”替换为 `weight` 的值。 + +6. 最后，在函数倒数第二行，将 `story.textContent`（程序中显示笑话结果的段落）赋值为 `newStory`。 + +## 提示 + +- 除了在 HTML 文件中引入这个 JavaScript 文件之外，完全不需要编辑 HTML。 +- 如果你不确定当前 JavaScript 是否正确添加到了你的 HTML 中，可以尝试暂时删除 JavaScript 文件的所有内容，然后加上一些简单但效果显著的 JavaScript 代码，保存文件并刷新浏览器。下面的示例会让 {{htmlelement("html")}} 背景变为红色，如果 JavaScript 成功加载，那么整个浏览器窗口将变红： +- ```js + document.querySelector('html').style.backgroundColor = 'red'; + ``` +- [`Math.round()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/round) 是 Javascript 的内建函数，可取得与传入小数最接近的整数。 +- 本示例中有三类字符串需要替换。可以多次重复 `replace()` 方法，也可使用正则表达式。例如：`var text = 'I am the biggest lover, I love my love';` 或 `text.replace(/love/g,'like');` 会将所有的“love”替换为“like”。记住，字符串本身是不可修改的！ + +## 测验 + +如果你是在课堂上进行这个测验，你可以把作品交给导师或教授去打分了。如果你是在自学，也可以在 [本节测验的讨论页](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686) 或者 [Mozilla 聊天室 ](https://wiki.mozilla.org/IRC)的 [#mdn](irc://irc.mozilla.org/mdn) 频道取得帮助。要自己先尝试，作弊是不会有收获的！ + +{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}} + +## 本章目录 -

步骤

- -

以下是你的工作。

- -

初始化变量和函数：

- -
    -
  1. 将刚下载的文本文件中的“1. 定义变量和函数”标题项下所有代码复制粘贴至 main.js 中。此时你就有了三个变量（customName 是对“输入自定义的名字”文本框的引用，randomize 是对“随机生成笑话”按钮的引用，story 是对 HTML 底部的、准备存放笑话的 {{htmlelement("p")}} 元素的引用）和一个函数（randomValueFromArray() 取一个数组作参数，随机返回数组中的一个元素）。
    2. -
  2. 然后是文本文件的第二节——“2. 纯文本字符串”。这里包含了一些字符串，这些字符串是项目的输入信息。你应该在 main.js 文件中用变量来保存它们。 -
      -
    1. 用 storyText 变量保存第一个长字符串，“今天气温……”。
      2. -
    2. 用 insertX 数组保存第一组三个字符串，“怪兽威利……”。
      3. -
    3. 用 insertY 数组保存第二组三个字符串。“肯德基……”。
      4. -
    4. 用 insertZ 数组保存第三组三个字符串。“自燃了……”。
      5. -
    -
    3. -
- -

放置事件处理器并补全：

- -
    -
  1. 返回刚才的文本文件。
    2. -
  2. 将“3. 事件监听器和未完成的函数定义”标题项下的代码复制粘贴至 main.js 文件。这将： -
      -
    • 为 randomize 变量增加一个点击事件的监听器。于是当所引用的按钮被点击时，result() 函数就会运行。
      • -
    • 为代码添加一个未完成的 result() 函数定义。本测验剩下的工作就是完成这个函数，让程序正常运行起来。
      • -
    -
    3. -
- -

补全 result() 函数：

- -
    -
  1. 将 newStory 的值设置为 storyText。声明新变量有必要的，只有这样才能在每次按下按钮后、在函数运行时生成一个新的随机笑话。如果直接操作 storyText 则只能生成一次新故事
    2. -
  2. 将 xItem、yItem 和 zItem 分别设置为 randomValueFromArray(insertX)、randomValueFromArray(insertY) 和 randomValueFromArray(insertZ)。
    3. -
  3. 接下来将 newStory 中的占位符（:inserta:、:insertb: 和 :insertc: ）替换为 xItem、yItem 和 zItem。有专用的字符串方法可供使用，并用该方法的返回值为 newStory 赋值。每当按下按钮时，这些占位符都会替换为随机的笑话字符串。再给你一点提示，我们所说的这种方法每次只会将所找到的首个子字符串进行替换，因此该方法对某个占位符需要执行两次。
    4. -
  4. 在第一个 if 块中再次调用这个字符串替换方法，以使 newStory 字符串中的名字“李雷”替换为变量 name 的值。这里我们说：“如果 customName 中有值，就把故事里的“李雷”替换成它。”如果是汉化版将 newStory 中的“李雷”替换成 name 的值；
    5. -
  5. 在第二个 if 块中检查 american 单选按钮是否被选中。如果选中，就要将故事中的重量和温度值从公斤和摄氏度转换为磅和华氏度，具体事项如下： -
      -
    1. 确定英美单位的转换公式。
      2. -
    2. 定义变量 weight、temperature 的行中，分别将美制单位按公式转化为英制，用 Math.round() 对计算结果取整。然后将英式单位连接到末尾。
      3. -
    3. 就在上述两个变量的定义下方增加两个字符串置换操作，将“35 摄氏度”替换为 temperature 的值，将“140 公斤”替换为 weight 的值。
      4. -
    -
    6. -
  6. 最后，在函数倒数第二行，将 story.textContent（程序中显示笑话结果的段落）赋值为 newStory。
    7. -
- -

提示

- - - -

测验

- -

如果你是在课堂上进行这个测验，你可以把作品交给导师或教授去打分了。如果你是在自学，也可以在 本节测验的讨论页 或者 Mozilla 聊天室 的 #mdn 频道取得帮助。要自己先尝试，作弊是不会有收获的！

- -

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

- -

本章目录

- - +- [JavaScript 是什么？](/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript) +- [JavaScript 初体验](/en-US/docs/Learn/JavaScript/First_steps/A_first_splash) +- [查找并解决 JavaScript 代码的错误](/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong) +- [变量：储存所需信息](/en-US/docs/Learn/JavaScript/First_steps/Variables) +- [数字和运算符：JavaScript 的基本算数](/en-US/docs/Learn/JavaScript/First_steps/Math) +- [字符串：JavaScript 文本的处理](/en-US/docs/Learn/JavaScript/First_steps/Strings) +- [字符串的一些实用方法](/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods) +- [数组](/en-US/docs/Learn/JavaScript/First_steps/Arrays) +- [课程评估：笑话机](/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator) diff --git a/files/zh-cn/learn/javascript/first_steps/strings/index.md b/files/zh-cn/learn/javascript/first_steps/strings/index.md index 9ac732e72c6435..8dd5645f1947b9 100644 --- a/files/zh-cn/learn/javascript/first_steps/strings/index.md +++ b/files/zh-cn/learn/javascript/first_steps/strings/index.md @@ -11,42 +11,43 @@ tags: - 脚本编写 translation_of: Learn/JavaScript/First_steps/Strings --- -
{{LearnSidebar}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}} -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}
- -

接下来，我们将把注意力转向文本片段——也就是编程中所说的字符串。在本文中，我们将了解在学习 JavaScript 时，您应该了解的关于字符串的所有常见事项，例如创建字符串、在字符串中转义引号，和连接字符串。

+接下来，我们将把注意力转向文本片段——也就是编程中所说的**字符串**。在本文中，我们将了解在学习 JavaScript 时，您应该了解的关于字符串的所有常见事项，例如创建字符串、在字符串中转义引号，和连接字符串。 - - - - - - - - - - + + + + + + + + + +
预备知识：基本的计算机读写能力，对 HTML 和 CSS 的基本理解，对 JavaScript 的理解。
目标：要熟悉 JavaScript 中字符串的基本知识。
预备知识： + 基本的计算机读写能力，对 HTML 和 CSS 的基本理解，对 JavaScript 的理解。 +
目标：要熟悉 JavaScript 中字符串的基本知识。
-

语言的力量

+## 语言的力量 -

语言对人类非常重要——它们是我们交流的重要组成部分。由于 Web 是一种主要基于文本的媒介，旨在让人们进行交流和分享信息，因此对我们来说，掌握它所出现的单词是很有用的。{{glossary("HTML")}}为我们的文本提供了结构和意义， {{glossary("CSS")}} 允许我们精确地设计它的样式，JavaScript 包含许多操作字符串的特性，创建定制的欢迎消息，在需要时显示正确的文本标签，将术语排序到所需的顺序，等等。

+语言对人类非常重要——它们是我们交流的重要组成部分。由于 Web 是一种主要基于文本的媒介，旨在让人们进行交流和分享信息，因此对我们来说，掌握它所出现的单词是很有用的。{{glossary("HTML")}}为我们的文本提供了结构和意义， {{glossary("CSS")}} 允许我们精确地设计它的样式，JavaScript 包含许多操作字符串的特性，创建定制的欢迎消息，在需要时显示正确的文本标签，将术语排序到所需的顺序，等等。 -

到目前为止，我们在课程中展示的所有程序都涉及到一些字符串操作。

+到目前为止，我们在课程中展示的所有程序都涉及到一些字符串操作。 -

字符串 — 基本知识

+## 字符串 — 基本知识 -

字符串与数字的处理方式第一眼看上去十分相似，但是当您深入挖掘时，您将会看到一些显著的差异。让我们首先在一个控制台输入一些基本的行来熟悉一下。
- 我们在下面提供了一个 (您也可以在一个单独的选项卡或窗口中打开这个控制台，或者如果您愿意使用浏览器开发人员控制台)。

+字符串与数字的处理方式第一眼看上去十分相似，但是当您深入挖掘时，您将会看到一些显著的差异。让我们首先在一个控制台输入一些基本的行来熟悉一下。 +我们在下面提供了一个 (您也可以在一个单独的选项卡或窗口中[打开这个控制台](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html)，或者如果您愿意使用[浏览器开发人员控制台](/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools))。 - - -

{{ EmbedLiveSample('上下文中的串联', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

- -

这里我们使用的是第 4 行中的 {{domxref("window.prompt()", "window.prompt()")}} 函数，它要求用户通过一个弹出对话框回答一个问题然后将他们输入的文本存储在一个给定的变量中 — 在这个例子中是就是 name 变量。然后，我们在第 5 行中使用 {{domxref("window.alert()","window.alert()")}} 函数来显示另一个弹出窗口，其中包含一个字符串，我们用两个字符串常量和 name 变量通过连接进行组合。

- -

数字与字符

- -
    -
  1. 当我们尝试添加 (或连接) 一个字符串和一个数字时，会发生什么？
    - 让我们在我们的控制台中尝试一下： - 
    'Front ' + 242;
-
    - 您可能会认为这会抛出一个错误，但它运行得很好。
    - 试图将字符串表示为一个数字并不是很讲的通，但是用数字表示一个字符串则不然，因此浏览器很聪明地将数字转换为字符串，并将这两个字符串连接在一起。
    2. -
  2. 你甚至可以用两个数字来这么操作——你可以通过用引号将数字包装成一个字符串。尝试以下方法 (我们使用 typeof 操作符来检查变量是一个数字还是一个字符串): - 
    let myDate = '19' + '67';
-typeof myDate;
    -
    3. -
  3. 如果您有一个数值变量，您想要将其转换为字符串，并且不改变其他地方，或者您想将一个字符串转换为一个数字而不改变其其他地方，那么您可以使用以下两个构造： -
      -
    • 如果可以的话， {{jsxref("Number")}} 对象将把传递给它的任何东西转换成一个数字。
      - 试一试： - 
      let myString = '123';
-let myNum = Number(myString);
-typeof myNum;
      -
      • -
    • 另一方面，每个数字都有一个名为 toString() 的方法，它将把它转换成等价的字符串。
      - 试试这个： - 
      let myNum = 123;
-let myString = myNum.toString();
-typeof myString;
      -
      • -
    - 这些结构在某些情况下是非常有用的，例如，如果一个用户将一个数字输入到一个表单文本字段中，这将是一个字符串，但是如果你想要将这个数字添加到某些东西中时，你需要它是一个数字，所以你可以通过 Number() 来处理这个问题。我们在数字猜谜游戏中第 54 行就是这么做的。
    4. -
- -

结论

- -

这就是 JavaScript 中所涉及的字符串的基本内容。在下一篇文章中，我们将在此基础上，研究 JavaScript 中字符串的一些内置方法，以及如何使用它们来操纵我们的字符串，使之成为我们想要的形式。

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}

+} +``` + +{{ EmbedLiveSample('上下文中的串联', '100%', 50, "", "", "hide-codepen-jsfiddle") }} + +这里我们使用的是第 4 行中的 {{domxref("window.prompt()", "window.prompt()")}} 函数，它要求用户通过一个弹出对话框回答一个问题然后将他们输入的文本存储在一个给定的变量中 — 在这个例子中是就是 `name` 变量。然后，我们在第 5 行中使用 {{domxref("window.alert()","window.alert()")}} 函数来显示另一个弹出窗口，其中包含一个字符串，我们用两个字符串常量和 name 变量通过连接进行组合。 + +### 数字与字符 + +1. 当我们尝试添加 (或连接) 一个字符串和一个数字时，会发生什么？ + 让我们在我们的控制台中尝试一下： + + ```js + 'Front ' + 242; + ``` + + 您可能会认为这会抛出一个错误，但它运行得很好。 + 试图将字符串表示为一个数字并不是很讲的通，但是用数字表示一个字符串则不然，因此浏览器很聪明地将数字转换为字符串，并将这两个字符串连接在一起。 + +2. 你甚至可以用两个数字来这么操作——你可以通过用引号将数字包装成一个字符串。尝试以下方法 (我们使用 typeof 操作符来检查变量是一个数字还是一个字符串): + + ```js + let myDate = '19' + '67'; + typeof myDate; + ``` + +3. 如果您有一个数值变量，您想要将其转换为字符串，并且不改变其他地方，或者您想将一个字符串转换为一个数字而不改变其其他地方，那么您可以使用以下两个构造： + + - 如果可以的话， {{jsxref("Number")}} 对象将把传递给它的任何东西转换成一个数字。 + 试一试： + + ```js + let myString = '123'; + let myNum = Number(myString); + typeof myNum; + ``` + + - 另一方面，每个数字都有一个名为 [toString()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) 的方法，它将把它转换成等价的字符串。 + 试试这个： + + ```js + let myNum = 123; + let myString = myNum.toString(); + typeof myString; + ``` + + 这些结构在某些情况下是非常有用的，例如，如果一个用户将一个数字输入到一个表单文本字段中，这将是一个字符串，但是如果你想要将这个数字添加到某些东西中时，你需要它是一个数字，所以你可以通过 `Number()` 来处理这个问题。我们在[数字猜谜游戏中第 54 行](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L54)就是这么做的。 + +## 结论 + +这就是 JavaScript 中所涉及的字符串的基本内容。在下一篇文章中，我们将在此基础上，研究 JavaScript 中字符串的一些内置方法，以及如何使用它们来操纵我们的字符串，使之成为我们想要的形式。 + +{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}} diff --git a/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.md b/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.md index 1d85d6faa5bb3a..d01488e7f18f0c 100644 --- a/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.md +++ b/files/zh-cn/learn/javascript/first_steps/useful_string_methods/index.md @@ -12,43 +12,47 @@ tags: - 长度 translation_of: Learn/JavaScript/First_steps/Useful_string_methods --- -
{{LearnSidebar}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}} -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
- -

现在我们学习基本的字符串语法， 让我们开始思考一下我们可以对内置方法的字符串做什么有用的操作，例如查找文本字符串的长度，加入和分割字符串，将字符串中的一个字符替换为另一个字符。

+现在我们学习基本的字符串语法， 让我们开始思考一下我们可以对内置方法的字符串做什么有用的操作，例如查找文本字符串的长度，加入和分割字符串，将字符串中的一个字符替换为另一个字符。 - - - - - - - - - - + + + + + + + + + +
前提：基本的电脑知识，对 HTML 和 CSS 有一定的了解，最好是懂一点 javascript 知识。
目的：明白字符串这个对象，学会使用字符串的基本方法去处理字符串
前提： + 基本的电脑知识，对 HTML 和 CSS 有一定的了解，最好是懂一点 javascript + 知识。 +
目的：明白字符串这个对象，学会使用字符串的基本方法去处理字符串
-

把字符串当作对象

+## 把字符串当作对象 -

我们曾经说过，现在我们重申一遍—在 javascript 中，一切东西都可以被当作对象。例如我们创建一个字符串。

+我们曾经说过，现在我们重申一遍—在 javascript 中，一切东西都可以被当作对象。例如我们创建一个字符串。 -
let string = 'This is my string';
+```js +let string = 'This is my string'; +``` -

一旦你的变量成为字符串对象实例，你就可以有大量的原型和方法编辑它。如果你进入{{jsxref("String")}}对象页并观察页面旁边的列表你就会明白这一点。

+一旦你的变量成为字符串对象实例，你就可以有大量的原型和方法编辑它。如果你进入{{jsxref("String")}}对象页并观察页面旁边的列表你就会明白这一点。 -

可能现在你的大脑开始迷糊了，不要担心！ 在你的学习进程中你真的不需要过早地理解大部分这方面知识，但是接下来我们这儿要看的是你要经常使用的一些知识。

+**可能现在你的大脑开始迷糊了，不要担心！** 在你的学习进程中你真的不需要过早地理解大部分这方面知识，但是接下来我们这儿要看的是你要经常使用的一些知识。 -

现在我们在控制台中加些示例 ，我们已经提供了以下示例（你可在单独打开控制台标签或窗口，或者选择使用浏览器开发者控制台）

+现在我们在控制台中加些示例 ，我们已经提供了以下示例（你可在单独打开控制台标签或窗口，或者选择使用[浏览器开发者控制台](/zh-CN/docs/Learn/Discover_browser_developer_tools)） -