From ff8db8ce9e8413f490626e1572e7fd09825db39c Mon Sep 17 00:00:00 2001 From: ZhichengChen Date: Mon, 7 Sep 2020 16:18:38 +0800 Subject: [PATCH] fix(i18n): update Chinese translation of json apis and ajax (#38863) * fix(i18n): update Chinese translation of json apis and ajax * address comments Co-authored-by: Zhicheng Chen Co-authored-by: S1ngS1ng --- ...ccess-the-json-data-from-an-api.chinese.md | 109 +++++++++--- .../change-text-with-click-events.chinese.md | 97 +++++++--- .../convert-json-data-to-html.chinese.md | 156 ++++++++++++---- ...to-find-a-users-gps-coordinates.chinese.md | 58 ++++-- ...ith-the-javascript-fetch-method.chinese.md | 168 ++++++++++++++++++ ...avascript-xmlhttprequest-method.chinese.md | 113 ++++++++++-- ...ript-using-the-onclick-property.chinese.md | 89 ++++++++-- ...avascript-xmlhttprequest-method.chinese.md | 125 +++++++++++-- ...r-json-to-get-the-data-you-need.chinese.md | 115 ++++++++++-- ...render-images-from-data-sources.chinese.md | 117 +++++++++--- 10 files changed, 962 insertions(+), 185 deletions(-) create mode 100644 curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.chinese.md diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.chinese.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.chinese.md index 2648c72658..fec98a27f2 100644 --- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.chinese.md @@ -2,22 +2,40 @@ id: 587d7fae367417b2b2512be4 title: Access the JSON Data from an API challengeType: 6 -videoUrl: '' -localeTitle: 从API访问JSON数据 +forumTopicId: 301499 +localeTitle: 访问来自 API 的 JSON 数据 --- ## Description -
在之前的挑战中，您了解了如何从freeCodeCamp Cat Photo API获取JSON数据。现在，您将仔细查看返回的数据，以便更好地理解JSON格式。回想一下JavaScript中的一些表示法：
[] - >方括号代表一个数组
{} - >圆括号代表一个对象
“” - >双引号代表一个字符串。它们还用于JSON中的键名
了解API返回的数据结构非常重要，因为它会影响您检索所需值的方式。在右侧，单击“获取消息”按钮，将freeCodeCamp Cat Photo API JSON加载到HTML中。您在JSON数据中看到的第一个和最后一个字符是方括号[ ] 。这意味着返回的数据是一个数组。 JSON数据中的第二个字符是一个卷曲{括号，它启动一个对象。仔细观察，您可以看到有三个独立的对象。 JSON数据是一个包含三个对象的数组，其中每个对象都包含有关猫照片的信息。您之前了解到，对象包含以逗号分隔的“键值对”。在Cat Photo示例中，第一个对象具有"id":0其中“id”是键，0是其对应值。类似地，有“imageLink”，“altText”和“codeNames”的键。每个猫照片对象具有相同的键，但具有不同的值。第一个对象中另一个有趣的“键值对”是"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"] 。这里“codeNames”是键，它的值是三个字符串的数组。可以有对象数组以及带有数组作为值的键。记住如何访问数组和对象中的数据。数组使用括号表示法来访问项目的特定索引。对象使用括号或点表示法来访问给定属性的值。这是打印第一张猫照片的“altText”的示例 - 请注意编辑器中解析的JSON数据保存在名为json的变量中：
的console.log（JSON [0] .altText）;
//打印“头上戴着绿色头盔形瓜的白猫。”
+
+在前面的挑战中，你了解了如何从 freeCodeCamp Cat Photo API 获取 JSON 数据。 +现在，你将进一步观察返回的数据来更好的了解 JSON 格式，回忆一下 JavaScript 中的一些符号： +
[ ] -> 方括号表示数组
{ } -> 大括号表示对象
" " -> 双引号表示字符串，它们还用于表示 JSON 中的键名
+理解 API 返回数据的结构是必需的，它将影响你如何获取你所需的值。 +在右侧，点击 "Get Message" 按钮，将 freeCodeCamp Cat Photo API JSON 加载到页面中。 +你看到在 JSON 数据中的第一个和最后一个字符是中括号[ ]，这意味着返回的数据是一个数组。JSON 数据中的第二个符号是一个大括号{，这意味着是一个对象。再仔细看，你会发现有三个独立的对象，这个 JSON 数据是一个包含三个对象的数组，它们各自都包含了 cat photo 的信息。 +你之前了解了对象包含了用逗号分隔的 "键值对"。在 Cat Photo 示例中，第一个对象的"id":0"id" 是键，0 是其对应的值，类似的，"imageLink", "altText", 和 "codeNames" 都是对应的键。每个 cat photo 对象具有相同的键，但具有不同的值 +在第一个对象中有一个有趣的 "键值对" 它是"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]。 "codeNames" 是键，它的值是包含三个字符串的数组。对象数组以及数组作为键可以作为值 +记住如何访问数组和对象中的数据，数组使用括号表示法来访问项目的特定索引，对象使用括号或点表示法来访问给定属性的值。这是打印第一张 cat photo 的“altText”的示例 - 请注意，编辑器中解析的 JSON 数据保存在名为json的变量中： + +```js +console.log(json[0].altText); +// Prints "A white cat wearing a green helmet shaped melon on its head." +``` + +
## Instructions -
对于“id”为2的cat，在codeNames数组中向控制台输出第二个值。您应该在对象上使用括号和点表示法（保存在变量json ）来访问该值。
+
+对于 "id" 是 2 的猫， 打印codeNames数组的第二个值到控制台，你应该在对象上使用括号或者点表示法（保存在变量json中）来访问该值。 +
## Tests
```yml tests: - - text: 您的代码应使用括号和点符号来访问正确的代码名称，并将“Loki”打印到控制台。 + - text: "你的代码应该使用括号和点表示法来读取正确的代码名称，并将 'Loki' 打印到控制台。" testString: assert(code.match(/console\s*\.\s*log\s*\(\s*json\s*\[2\]\s*(\.\s*codeNames|\[\s*('|`|")codeNames\2\s*\])\s*\[\s*1\s*\]\s*\)/g)); ``` @@ -31,22 +49,22 @@ tests: ```html + -

Cat Photo Finder

-

+

Cat Photo Finder

+

The message will go here

@@ -82,7 +100,6 @@ tests: Get Message

- ``` @@ -94,8 +111,60 @@ tests: ## Solution
-```js -// solution required +```html + + + + +

Cat Photo Finder

+

+ The message will go here +

+

+ +

``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.chinese.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.chinese.md index b03c95394d..7ab3440a1a 100644 --- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.chinese.md @@ -2,22 +2,29 @@ id: 587d7fad367417b2b2512be2 title: Change Text with click Events challengeType: 6 -videoUrl: '' -localeTitle: 单击“事件”更改文本 +forumTopicId: 301500 +localeTitle: 通过单击事件更改文本 --- ## Description -
当click事件发生时，您可以使用JavaScript来更新HTML元素。例如，当用户单击“获取消息”按钮时，它会使用类message更改元素的文本，使其message “此消息是”。这可以通过在click事件中添加以下代码来实现： document.getElementsByClassName('message')[0].textContent="Here is the message";
+
+当点击事件发生时，你可以使用 JavaScript 更新 HTML 元素。 +例如，当用户点击 "Get Message" 按钮时，它将改变类名message元素的文本为 "Here is the message"。 +通过在点击事件内添加以下代码实现： +document.getElementsByClassName('message')[0].textContent="Here is the message"; +
## Instructions -
在onclick事件处理程序中添加代码，以更改message元素内的文本，说“这是消息”。
+
+在onclick事件处理器中添加代码，改变message元素内的文字为 "Here is the message"。 +
## Tests
```yml tests: - - text: 您的代码应使用document.getElementsByClassName方法选择具有类message的元素，并将其textContent设置为给定的字符串。 + - text: 你的代码应该使用document.getElementsByClassName方法来选择类名为message的元素，然后将其innerHTML改为给定文字。 testString: assert(code.match(/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.textContent\s*?=\s*?('|")Here is the message\2/g)); ``` @@ -31,15 +38,16 @@ tests: ```html + + +

Cat Photo Finder

+

+ The message will go here +

+

+ +

+``` + + + + + +
+ +## Solution +
+ +```html + + + +

Cat Photo Finder

The message will go here @@ -78,17 +145,5 @@ tests: ``` - - - -

-## Solution -
- -```js -// solution required -``` - -/section> diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.chinese.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.chinese.md index 41c065258b..6cee895796 100644 --- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.chinese.md @@ -2,26 +2,62 @@ id: 587d7fae367417b2b2512be5 title: Convert JSON Data to HTML challengeType: 6 -videoUrl: '' -localeTitle: 将JSON数据转换为HTML +forumTopicId: 16807 +localeTitle: 将 JSON 数据转换为 HTML --- ## Description -
现在您正在从JSON API获取数据，您可以在HTML中显示它。您可以使用forEach方法循环数据，因为cat照片对象保存在数组中。当您到达每个项目时，您可以修改HTML元素。首先，使用var html = "";声明一个html变量var html = ""; 。然后，遍历JSON，将HTML添加到包含strong标记中的键名的变量，然后是值。循环结束后，渲染它。这是执行此操作的代码：
json.forEach（function（val）{
var keys = Object.keys（val）;
html + =“<div class ='cat'>”;
keys.forEach（function（key）{
html + =“<strong>”+ key +“</ strong>：”+ val [key] +“<br>”;
}）;
html + =“</ div> <br>”;
}）;
+
+现在你可以从 JSON API 获取数据了，你可以在 HTML 中显示它。 +既然 cat photo 对象保存在数组里，你可以使用forEach方法来遍历它。当你拿到每个对象时，你就可以修改 HTML 元素了。 +首先，用let html = "";声明一个变量。 +接着，遍历 JSON，将 HTML 添加到用strong标记键名的变量，后面跟着值。当循环结束后渲染它。 +这是执行此操作的代码： + +```js +let html = ""; +json.forEach(function(val) { + const keys = Object.keys(val); + html += "
"; + keys.forEach(function(key) { + html += "" + key + ": " + val[key] + "
"; + }); + html += "

"; +}); +``` + +注意： 在本挑战需要给页面添加一个新的 HTML 元素，不能使用 `textContent` 方法，这个方法容易遭受跨站脚本攻击，可以用 `innerHTML` 来完成挑战。 +
## Instructions -
添加forEach方法以循环JSON数据并创建HTML元素以显示它。这是一些JSON示例
[
{
“ID”：0，
“IMAGELINK”： “https://s3.amazonaws.com/freecodecamp/funny-cat.jpg”
“altText”：“头上戴着绿色头盔形状瓜的白猫。”，
“codeNames”：[“Juggernaut”，“华莱士夫人”，“毛茛”
]
}
]
+
+添加一个forEach循环 JSON 数据的方法，并创建 HTML 元素以显示它。 +以下是一个 JSON 示例： + +```json +[ + { + "id":0, + "imageLink":"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg", + "altText":"A white cat wearing a green helmet shaped melon on its head. ", + "codeNames":[ "Juggernaut", "Mrs. Wallace", "Buttercup" + ] + } +] +``` + +
## Tests
```yml tests: - - text: 您的代码应该将数据存储在html变量中 + - text: 你的代码应该将数据保存在html变量中。 testString: assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g)); - - text: 您的代码应该使用forEach方法来循环API中的JSON数据。 + - text: 你的代码应该使用forEach方法来遍历 API 中的 JSON 数据。 testString: assert(code.match(/json\.forEach/g)); - - text: 您的代码应将密钥名称包装在strong标记中。 + - text: 你的代码应该将键名包装在strong标签中。 testString: assert(code.match(/.+<\/strong>/g)); ``` @@ -35,24 +71,24 @@ tests: ```html + + +

Cat Photo Finder

+

+ The message will go here +

+

+ +

+``` + + + +
+ +## Solution +
+ +```html + + + +

Cat Photo Finder

The message will go here @@ -88,20 +196,6 @@ tests: Get Message

- ``` - - - -
- -## Solution -
- -```js -// solution required -``` - -/section> diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.chinese.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.chinese.md index f018bf451a..18e07d22af 100644 --- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.chinese.md @@ -2,28 +2,46 @@ id: 587d7faf367417b2b2512be8 title: Get Geolocation Data to Find A User's GPS Coordinates challengeType: 6 -videoUrl: '' -localeTitle: 获取地理位置数据以查找用户的GPS坐标 +forumTopicId: 18188 +localeTitle: 根据地理位置数据找到用户的 GPS 坐标 --- ## Description -
您可以做的另一件很酷的事情是访问您用户的当前位置。每个浏览器都有一个内置的导航器，可以为您提供此信息。导航器将获得用户当前的经度和纬度。您将看到允许或阻止此站点了解您当前位置的提示。只要代码正确，挑战就可以以任何一种方式完成。通过选择允许，您将看到输出手机上的文本更改为您的纬度和经度。这是执行此操作的代码：
if（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（function（position）{
document.getElementById（'data'）。innerHTML =“latitude：”+ position.coords.latitude +“<br>经度：”+ position.coords.longitude;
}）;
}
首先，它检查navigator.geolocation对象是否存在。如果是，则调用该对象上的getCurrentPosition方法，该方法启动对用户位置的异步请求。如果请求成功，则运行方法中的回调函数。此函数使用点表示法访问position对象的纬度和经度值，并更新HTML。
+
+你还能做一件很酷的事就是访问你用户当前的地理位置，每个浏览器都有内置的导航器，可以为你提供这些信息。 +导航器会获取用户当前的经度和纬度。 +您将看到允许或阻止此站点了解您当前位置的提示。只要代码正确，挑战就可以以任何一种方式完成。 +通过选择允许，你将看到输出手机上的文本更改为你的纬度和经度 +这是执行此操作的代码： + +```js +if (navigator.geolocation){ + navigator.geolocation.getCurrentPosition(function(position) { + document.getElementById('data').innerHTML="latitude: " + position.coords.latitude + "
longitude: " + position.coords.longitude; + }); +} +``` + +首先，它检查navigator.geolocation对象是否存在。如果是，getCurrentPosition则调用该对象上的方法，该方法启动对用户位置的异步请求。如果请求成功，则运行方法中的回调函数。此函数position使用点表示法访问对象的纬度和经度值，并更新页面。 +
## Instructions -
在script标记内添加示例代码以检查用户的当前位置并将其插入HTML。
+
+在script标记内添加示例代码以检查用户的当前位置并将其插入 HTML +
## Tests
```yml tests: - - text: 您的代码应使用navigator.geolocation来访问用户的当前位置。 + - text: 你的代码应该用于navigator.geolocation访问用户的当前位置。 testString: assert(code.match(/navigator\.geolocation\.getCurrentPosition/g)); - - text: 您的代码应使用position.coords.latitude来显示用户的纬度位置。 + - text: 你的代码应该用于position.coords.latitude显示用户的纬度位置。 testString: assert(code.match(/position\.coords\.latitude/g)); - - text: 您的代码应使用position.coords.longitude来显示用户的纵向位置。 + - text: 你的代码应该用于position.coords.longitude显示用户的经度位置。 testString: assert(code.match(/position\.coords\.longitude/g)); - - text: 您应该在data div元素中显示用户的位置。 + - text: 你应该在datadiv 元素中显示用户的位置。 testString: assert(code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g)); ``` @@ -37,16 +55,15 @@ tests: ```html

You are here:

- ``` @@ -58,8 +75,19 @@ tests: ## Solution
-```js -// solution required -``` +```html + +

You are here:

+
-/section> +
+ +
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.chinese.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.chinese.md new file mode 100644 index 0000000000..c6e006aee5 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.chinese.md @@ -0,0 +1,168 @@ +--- +id: 5ccfad82bb2dc6c965a848e5 +title: Get JSON with the JavaScript fetch method +challengeType: 6 +forumTopicId: 301501 +localeTitle: 使用 JavaScript 的 fetch 方法获取 JSON +--- + +## Description +
+请求外部数据的另一个方法是使用 JavaScript 的 fetch() 方法。它的作用和 XMLHttpRequest 一致，但是语法更易理解。 +下面是使用 GET 请求 /json/cats.json 数据的例子。 + +```js + +fetch('/json/cats.json') + .then(response => response.json()) + .then(data => { + document.getElementById('message').innerHTML = JSON.stringify(data); + }) + +``` +逐行解释一下代码。 + +第一行是发起请求。也就是说，fetch(URL) 向指定的 URL 发起 GET 请求。方法返回一个 Promise。 + +当 Promise 返回后，如果请求成功，会执行 then 方法，该方法把响应转换为 JSON 格式。 + +then 方法返回的也是 Promise，会被下一个 then 方法捕获。第二个 then 方法传入的参数就是最终的 JSON 对象。 + +接着，使用 document.getElementById() 选择将要接收数据的元素。然后插入请求返回的 JSON 对象创建的字符串修改元素的 HTML 代码。 +
+ +## Instructions +
+更新代码，创建一个 "GET" 请求向 freeCodeCamp Cat Photo API 请求数据。这次使用 fetch 方法而不是 XMLHttpRequest。 +
+ +## Tests +
+ +```yml +tests: + - text: 应该使用 fetch 来发起 GET 请求。 + testString: assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g)); + - text: 应该在 then 里面将响应转换为 JSON。 + testString: assert(code.match(/\.then\s*\(\s*(response|\(\s*response\s*\))\s*=>\s*response\s*\.json\s*\(\s*\)\s*\)/g)) + - text: 应该使用另一个 then 接收 then 转换的 JSON。 + testString: assert(code.match(/\.then\s*\(\s*(data|\(\s*data\s*\))\s*=>\s*{[^}]*}\s*\)/g)) + - text: 代码应该选择 id 为 message 的元素然后把它的内部 HTML 改成 JSON data 的字符串。 + testString: assert(code.match(/document\s*\.getElementById\s*\(\s*('|")message\1\s*\)\s*\.innerHTML\s*=\s*JSON\s*\.\s*stringify\s*\(\s*data\s*\)/g)); + +``` + +
+ +## Challenge Seed +
+ +
+ +```html + + +

Cat Photo Finder

+

+ The message will go here +

+

+ +

+``` + +
+ + + +
+ +## Solution +
+ +```html + + +

Cat Photo Finder

+

+ The message will go here +

+

+ +

+``` + +
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.chinese.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.chinese.md index 971f6e6706..a7a6830c9f 100644 --- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.chinese.md @@ -2,32 +2,56 @@ id: 587d7fae367417b2b2512be3 title: Get JSON with the JavaScript XMLHttpRequest Method challengeType: 6 -videoUrl: '' -localeTitle: 使用JavaScript XMLHttpRequest方法获取JSON +forumTopicId: 301502 +localeTitle: 使用 XMLHttpRequest 方法获取 JSON --- ## Description -
您还可以从外部源请求数据。这就是API发挥作用的地方。请记住，API（或应用程序编程接口）是计算机用来相互通信的工具。您将学习如何使用我们从API获得的数据使用称为AJAX的技术更新HTML。大多数Web API以称为JSON的格式传输数据。 JSON代表JavaScript Object Notation。 JSON语法看起来与JavaScript对象文字表示法非常相似。 JSON具有对象属性及其当前值，夹在{和} 。这些属性及其值通常称为“键值对”。但是，API传输的JSON以bytes形式发送，应用程序将其作为string接收。这些可以转换为JavaScript对象，但默认情况下它们不是JavaScript对象。 JSON.parse方法解析字符串并构造它描述的JavaScript对象。您可以从freeCodeCamp的Cat Photo API请求JSON。以下是您可以在点击事件中添加的代码：
req = new XMLHttpRequest（）;
req.open（ “GET”， '/ JSON / cats.json'，TRUE）;
req.send（）;
req.onload =函数（）{
JSON = JSON.parse（req.responseText）;
document.getElementsByClassName（ '信息'）[0] = .innerHTML JSON.stringify（JSON）;
};
这是对每件作品的评论。 JavaScript XMLHttpRequest对象具有许多用于传输数据的属性和方法。首先，创建XMLHttpRequest对象的实例并将其保存在req变量中。接下来， open方法初始化一个请求 - 这个例子是从API请求数据，因此是一个“GET”请求。 open的第二个参数是您从中请求数据的API的URL。第三个参数是布尔值，其中true使其成为异步请求。 send方法发送请求。最后， onload事件处理程序解析返回的数据并应用JSON.stringify方法将JavaScript对象转换为字符串。然后将此字符串作为消息文本插入。
+
+你还可以从外部链接请求数据，这就是 API 发挥作用的地方。 +请记住，API（或叫应用程序编程接口）是计算机用来互相通信的工具。你将学习如何通过 AJAX技术 从 API 获得的数据来更新 HTML。 +大部分 web APIs 以 JSON 格式传输数据。JSON 是 JavaScript Object Notation 的简写。 +JSON 语法与 JavaScript 对象字面符号非常相似，JSON 具有对象属性以及其当前值，夹在{ 和 }之间。 +这些属性及其值通常称为 "键值对"。 +但是，JSON 是由 API 以bytes 形式传输的，你的程序以string接受它。它们能转换成为 JavaScript 对象，但默认情况下它们不是 JavaScript 对象。 JSON.parse方法解析字符串并构造它描述的 JavaScript 对象。 +你可以从 freeCodeCamp 的 Cat Photo API 请求 JSON，以下是你可以在点击事件中添加的代码： + +```js +const req = new XMLHttpRequest(); +req.open("GET",'/json/cats.json',true); +req.send(); +req.onload = function(){ + const json = JSON.parse(req.responseText); + document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json); +}; +``` + +这里介绍每行代码的作用，JavaScript XMLHttpRequest 对象具有许多用于传输数据的属性和方法。首先，创建一个XMLHttpRequest对象实例，并保存在req变量里 。 +接着, open 方法初始化请求 - 此示例从 API 请求数据，因此是个 "GET" 请求。第二个参数 open 是你要从中请求数据的 API 的 URL。第三个参数是一个布尔值， true使其成为异步请求。 +该send方法发送请求，最后，onload事件处理程序解析返回的数据并应用该JSON.stringify方法将JavaScript对象转换为字符串，然后将此字符串作为消息文本插入。 +
## Instructions -
更新代码以创建并向freeCodeCamp Cat Photo API发送“GET”请求。然后单击“获取消息”按钮。您的AJAX函数将使用API​​的原始JSON输出替换“消息将在此处”文本。
+
+更新代码以创建并向 freeCodeCamp Cat Photo API 发送 "GET" 请求。然后点击 "Get Message" 按钮，你的 AJAX 函数将使用 API 的原生 JSON 替换 "The message will go here" 的文本。 +
## Tests
```yml tests: - - text: 您的代码应该创建一个新的XMLHttpRequest 。 + - text: 你的代码应该创建一个新的XMLHttpRequest。 testString: assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g)); - - text: 您的代码应该使用open方法初始化对freeCodeCamp Cat Photo API的“GET”请求。 + - text: "你的代码应使用该open方法初始化对 freeCodeCamp Cat Photo API 的 'GET' 请求。" testString: assert(code.match(/\.open\(\s*?('|")GET\1\s*?,\s*?('|")\/json\/cats\.json\2\s*?,\s*?true\s*?\)/g)); - - text: 您的代码应使用send方法发送请求。 + - text: 你的代码应使用该send方法发送请求。 testString: assert(code.match(/\.send\(\s*\)/g)); - - text: 您的代码应该有一个设置为函数的onload事件处理程序。 + - text: 你的代码应该有一个onload设置为函数的事件处理程序。 testString: assert(code.match(/\.onload\s*=\s*(function|\(\s*?\))\s*?(\(\s*?\)|\=\>)\s*?{/g)); - - text: 您的代码应该使用JSON.parse方法来解析responseText 。 + - text: 你的代码应该使用该JSON.parse方法来解析responseText。 testString: assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g)); - - text: 您的代码应该获取带有类message的元素，并将其内部HTML更改为JSON数据字符串。 + - text: 你的代码应该用message获取元素，并将其内部 HTML 转换为 JSON 数据字符串。 testString: assert(code.match(/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.innerHTML\s*?=\s*?JSON\.stringify\(.+?\)/g)); ``` @@ -41,15 +65,16 @@ tests: ```html + +

Cat Photo Finder

-

+

The message will go here

@@ -85,7 +111,6 @@ tests: Get Message

- ``` @@ -97,8 +122,58 @@ tests: ## Solution
-```js -// solution required +```html + + + + +

Cat Photo Finder

+

+ The message will go here +

+

+ +

``` -/section> +
+ diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.chinese.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.chinese.md index f775b3ceff..3995714f86 100644 --- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.chinese.md @@ -2,24 +2,41 @@ id: 587d7fad367417b2b2512be1 title: Handle Click Events with JavaScript using the onclick property challengeType: 6 -videoUrl: '' -localeTitle: 使用onclick属性处理使用JavaScript单击事件 +forumTopicId: 301503 +localeTitle: 使用 onclick 属性处理点击事件 --- ## Description -
您希望代码仅在页面加载完成后执行。为此，您可以将JavaScript事件附加到名为DOMContentLoaded的文档中。这是执行此操作的代码：
document.addEventListener（'DOMContentLoaded'，function（）{

}）;
您可以实现DOMContentLoaded函数内部的事件处理程序。您可以通过添加以下代码来实现onclick事件处理程序，该处理程序在用户单击id为getMessage的元素时触发：
。的document.getElementById（ '的getMessage'）的onclick =函数（）{};
+
+你希望代码仅在页面完成加载后执行。为此，你可将名为DOMContentLoaded的 JavaScript 事件附加到文档中。以下是实现的代码： + +```js +document.addEventListener('DOMContentLoaded', function() { + +}); +``` + +你可以在DOMContentLoaded函数内部添加事件处理方法。你可以添加onclick事件处理器，当用户点击 id 为getMessage的元素时会触发事件。添加以下代码： + +```js +document.getElementById('getMessage').onclick = function(){}; +``` + +
## Instructions -
在DOMContentLoaded函数内为id为getMessage的元素添加一个click事件处理程序。
+
+在DOMContentLoaded函数内为 id 为getMessage的元素添加一个 click 事件处理器。 +
## Tests
```yml tests: - - text: 您的代码应使用document.getElementById方法来选择getMessage元素。 + - text: 你的代码应该用document.getElementById方法来选择getMessage元素。 testString: assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g)); - - text: 您的代码应添加onclick事件处理程序。 + - text: 你的代码应该添加onclick事件处理器。 testString: assert(typeof document.getElementById('getMessage').onclick === 'function'); ``` @@ -33,13 +50,13 @@ tests: ```html +

Cat Photo Finder

-

+

The message will go here

@@ -75,7 +92,6 @@ tests: Get Message

- ``` @@ -87,8 +103,51 @@ tests: ## Solution
-```js -// solution required +```html + + + +

Cat Photo Finder

+

+ The message will go here +

+

+ +

``` -/section> +
+ diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.chinese.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.chinese.md index c4a8ecbf24..6c032ab35f 100644 --- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.chinese.md @@ -2,32 +2,56 @@ id: 587d7faf367417b2b2512be9 title: Post Data with the JavaScript XMLHttpRequest Method challengeType: 6 -videoUrl: '' -localeTitle: 使用JavaScript XMLHttpRequest方法发布数据 +forumTopicId: 301504 +localeTitle: 使用 XMLHttpRequest 方法发送数据 --- ## Description -
在前面的示例中，您从外部资源接收数据。您也可以将数据发送到外部资源，只要该资源支持AJAX请求并且您知道URL。 JavaScript的XMLHttpRequest方法也用于将数据发布到服务器。这是一个例子：
req = new XMLHttpRequest（）;
req.open（ “POST”，网址，真实）;
req.setRequestHeader（ '内容 - 类型'， '文本/纯'）;
req.onreadystatechange =函数（）{
if（req.readyState == 4 && req.status == 200）{
document.getElementsByClassName（ '信息'）[0] = .innerHTML req.responseText;
}
};
req.send（用户名）;
你以前见过其中几种方法。这里open方法将请求初始化为对外部资源的给定URL的“POST”，并使用true布尔值使其异步。 setRequestHeader方法设置HTTP请求标头的值，该标头包含有关发件人和请求的信息。它必须在open方法之后调用，但在send方法之前调用。这两个参数是标题的名称和要设置为该标题正文的值。接下来， onreadystatechange事件侦听器处理请求状态的更改。 readyState为4表示操作已完成， status为200表示该操作成功。文档的HTML可以更新。最后， send方法使用userName值发送请求，该值由用户在input字段中给出。
+
+在前面的示例中，你在外部资源获取数据，你也可以将数据发送到外部资源，只要该资源支持 AJAX 请求并且你知道 URL。 +JavaScript 的XMLHttpRequest方法也用于将数据发布到服务器，这是个例子： + +```js +const xhr = new XMLHttpRequest(); +xhr.open('POST', url, true); +xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); +xhr.onreadystatechange = function () { + if (xhr.readyState === 4 && xhr.status === 201){ + const serverResponse = JSON.parse(xhr.response); + document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix; + } +}; +const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' }); +xhr.send(body); +``` + +你在之前见过其中几种方法。这里open方法将请求初始化为对外部资源的给定 URL 的 "POST"，并使用true布尔值使其异步。 +setRequestHeader方法设置HTTP请求标头的值，该标头包含有关发送人和请求的信息。它必须在open方法之后调用，但在send方法之前调用。这两个参数是标题的名称和要设置为该标题正文的值。 +接下来，onreadystatechange事件侦听器处理请求状态的更改。readyState为 4 表示操作完成，status200表示操作成功。文档的HTML可以更新。 +最后，该send方法发送带有userName值的请求，该值由用户在input字段中给出。 +
## Instructions -
更新代码以创建并发送“POST”请求。然后在输入框中输入您的姓名，然后单击“发送消息”。您的AJAX功能将取代“来自服务器的回复将在这里”。与服务器的回复。在这种情况下，你的名字附加“爱猫”。
+
+更新代码以创建并发送 "POST" 请求。然后在输入框中输入你的姓名，你的 AJAX 函数会用服务器返回的数据替换 "Reply from Server will be here"。在这种情况下，你的名字附加 " loves cats"。 +
## Tests
```yml tests: - - text: 您的代码应该创建一个新的XMLHttpRequest 。 + - text: 你的代码应该创建一个新的XMLHttpRequest。 testString: assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g)); - - text: 您的代码应使用open方法初始化对服务器的“POST”请求。 + - text: "你的代码应该使用该open方法初始化到服务器的 'POST' 请求。" testString: assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g)); - - text: 您的代码应使用setRequestHeader方法。 + - text: 你的代码应该使用该setRequestHeader方法。 testString: assert(code.match(/\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")application\/json;\s*charset=UTF-8\2\s*?\)/g)); - - text: 您的代码应该将onreadystatechange事件处理程序设置为函数。 + - text: 你的代码应该有一个onreadystatechange设置为函数的事件处理程序。 testString: assert(code.match(/\.onreadystatechange\s*?=/g)); - - text: 您的代码应该获取带有类message的元素，并将其内部HTML更改为responseText 。 + - text: 你的代码应该使用类获取元素message并将其内部HTML更改为responseText。 testString: assert(code.match(/document\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?.+?\.userName\s*?\+\s*?.+?\.suffix/g)); - - text: 您的代码应使用send方法。 + - text: 你的代码应该使用该send方法。 testString: assert(code.match(/\.send\(\s*?body\s*?\)/g)); ``` @@ -41,17 +65,19 @@ tests: ```html + +

Cat Friends

-

+

Reply from Server will be here

@@ -90,7 +117,6 @@ tests: Send Message

- ``` @@ -103,7 +129,68 @@ tests:
```js -// solution required + + + + +

+ Reply from Server will be here +

+

+ + +

``` -/section> +
+ diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.chinese.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.chinese.md index 38dfbd157b..b79345f8b3 100644 --- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.chinese.md @@ -2,22 +2,35 @@ id: 587d7fae367417b2b2512be7 title: Pre-filter JSON to Get the Data You Need challengeType: 6 -videoUrl: '' -localeTitle: 预过滤JSON以获取所需的数据 +forumTopicId: 18257 +localeTitle: 预先过滤 JSON 以获得所需的数据 --- ## Description -
如果您不想渲染来自freeCodeCamp Cat Photo API的每张猫照片，您可以在循环之前预先过滤JSON。鉴于JSON数据存储在数组中，您可以使用filter方法过滤掉“id”键值为1的cat。以下是执行此操作的代码：
json = json.filter（function（val）{
return（val.id！== 1）;
}）;
+
+如果你不希望渲染每张从 freeCodeCamp Cat Photo API 取回的猫照片，你可以在循环先预先过滤 JSON 数据。 +鉴于 JSON 数据都存储在数组中，你可以使用filter方法过滤掉 "id" 键值为 1 的猫。 +这是执行此操作的代码： + +```js +json = json.filter(function(val) { + return (val.id !== 1); +}); +``` + +
## Instructions -
添加代码以filter json数据以删除“id”值为1的cat。
+
+将filter代码添加到 JSON 数据中来移除 "id" 值为 1 的猫。 +
## Tests
```yml tests: - - text: 您的代码应该使用filter方法。 + - text: 你的代码应该使用filter方法。 testString: assert(code.match(/json\.filter/g)); ``` @@ -31,18 +44,18 @@ tests: ```html + +

Cat Photo Finder

-

+

The message will go here

@@ -90,7 +105,6 @@ tests: Get Message

- ``` @@ -102,8 +116,71 @@ tests: ## Solution
-```js -// solution required +```html + + + + +

Cat Photo Finder

+

+ The message will go here +

+

+ +

``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.chinese.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.chinese.md index a377b8141c..9c667a9e9f 100644 --- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.chinese.md @@ -2,23 +2,32 @@ id: 587d7fae367417b2b2512be6 title: Render Images from Data Sources challengeType: 6 -videoUrl: '' -localeTitle: 从数据源渲染图像 +forumTopicId: 18265 +localeTitle: 渲染数据源的图像 --- ## Description -
最后几个挑战表明，JSON数组中的每个对象都包含一个imageLink键，其值为cat图像的URL。循环浏览这些对象时，可以使用此imageLink属性在img元素中显示此图像。这是执行此操作的代码： html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
+
+前几个挑战中表明，JSON 数组中的每个对象都包含一个imageLink键，其值为猫图像的 URL。 +当你遍历这些对象的时候，你可以使用imageLink属性在img元素中显示此图像。 +这是执行此操作的代码： +html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"; +
## Instructions -
添加代码以在img标记中使用imageLink和altText属性。
+
+添加代码以在img标签中使用imageLink和altText属性。 +
## Tests
```yml tests: - - text: 您应该使用imageLink属性来显示图像。 + - text: 你应该使用imageLink属性来显示图像。 testString: assert(code.match(/val\.imageLink/g)); + - text: 应该用 altText 做为图片的 alt 属性。 + testString: assert(code.match(/val\.altText/g)); ``` @@ -31,20 +40,20 @@ tests: ```html + + +

Cat Photo Finder

+

+ The message will go here +

+

+ +

+``` + + + + + +
+ +## Solution +
+ +```html +