chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be4
|
||||
title: 访问来自 API 的 JSON 数据
|
||||
title: Access the JSON Data from an API
|
||||
challengeType: 6
|
||||
forumTopicId: 301499
|
||||
dashedName: access-the-json-data-from-an-api
|
||||
@ -8,23 +8,23 @@ dashedName: access-the-json-data-from-an-api
|
||||
|
||||
# --description--
|
||||
|
||||
在前面的挑战中，你了解了如何从 freeCodeCamp Cat Photo API 获取 JSON 数据。
|
||||
In the previous challenge, you saw how to get JSON data from the freeCodeCamp Cat Photo API.
|
||||
|
||||
现在，你将进一步观察返回的数据来更好的了解 JSON 格式，回忆一下 JavaScript 中的一些符号：
|
||||
Now you'll take a closer look at the returned data to better understand the JSON format. Recall some notation in JavaScript:
|
||||
|
||||
<blockquote>[ ] -> 方括号表示数组<br>{ } -> 大括号表示对象<br>" " -> 双引号表示字符串，它们还用于表示 JSON 中的键名</blockquote>
|
||||
<blockquote>[ ] -> Square brackets represent an array<br>{ } -> Curly brackets represent an object<br>" " -> Double quotes represent a string. They are also used for key names in JSON</blockquote>
|
||||
|
||||
理解 API 返回数据的结构是必需的，它将影响你如何获取你所需的值。
|
||||
Understanding the structure of the data that an API returns is important because it influences how you retrieve the values you need.
|
||||
|
||||
在右侧，点击 "Get Message" 按钮，将 freeCodeCamp Cat Photo API JSON 加载到页面中。
|
||||
On the right, click the "Get Message" button to load the freeCodeCamp Cat Photo API JSON into the HTML.
|
||||
|
||||
你看到在 JSON 数据中的第一个和最后一个字符是中括号`[ ]`，这意味着返回的数据是一个数组。JSON 数据中的第二个符号是一个大括号`{`，这意味着是一个对象。再仔细看，你会发现有三个独立的对象，这个 JSON 数据是一个包含三个对象的数组，它们各自都包含了 cat photo 的信息。
|
||||
The first and last character you see in the JSON data are square brackets `[ ]`. This means that the returned data is an array. The second character in the JSON data is a curly `{` bracket, which starts an object. Looking closely, you can see that there are three separate objects. The JSON data is an array of three objects, where each object contains information about a cat photo.
|
||||
|
||||
你之前了解了对象包含了用逗号分隔的 "键值对"。在 Cat Photo 示例中，第一个对象的`"id":0`"id" 是键，0 是其对应的值，类似的，"imageLink", "altText", 和 "codeNames" 都是对应的键。每个 cat photo 对象具有相同的键，但具有不同的值
|
||||
You learned earlier that objects contain "key-value pairs" that are separated by commas. In the Cat Photo example, the first object has `"id":0` where "id" is a key and 0 is its corresponding value. Similarly, there are keys for "imageLink", "altText", and "codeNames". Each cat photo object has these same keys, but with different values.
|
||||
|
||||
在第一个对象中有一个有趣的 "键值对" 它是`"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`。 "codeNames" 是键，它的值是包含三个字符串的数组。对象数组以及数组作为键可以作为值
|
||||
Another interesting "key-value pair" in the first object is `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Here "codeNames" is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.
|
||||
|
||||
记住如何访问数组和对象中的数据，数组使用括号表示法来访问项目的特定索引，对象使用括号或点表示法来访问给定属性的值。这是打印第一张 cat photo 的“altText”的示例 - 请注意，编辑器中解析的 JSON 数据保存在名为`json`的变量中：
|
||||
Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the "altText" of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called `json`:
|
||||
|
||||
```js
|
||||
console.log(json[0].altText);
|
||||
@ -33,11 +33,11 @@ console.log(json[0].altText);
|
||||
|
||||
# --instructions--
|
||||
|
||||
对于 "id" 是 2 的猫， 打印`codeNames`数组的第二个值到控制台，你应该在对象上使用括号或者点表示法（保存在变量`json`中）来访问该值。
|
||||
For the cat with the "id" of 2, print to the console the second value in the `codeNames` array. You should use bracket and dot notation on the object (which is saved in the variable `json`) to access the value.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该使用括号和点表示法来读取正确的代码名称，并将 'Loki' 打印到控制台。
|
||||
Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be2
|
||||
title: 通过单击事件更改文本
|
||||
title: Change Text with click Events
|
||||
challengeType: 6
|
||||
forumTopicId: 301500
|
||||
dashedName: change-text-with-click-events
|
||||
@ -8,21 +8,21 @@ dashedName: change-text-with-click-events
|
||||
|
||||
# --description--
|
||||
|
||||
当点击事件发生时，你可以使用 JavaScript 更新 HTML 元素。
|
||||
When the click event happens, you can use JavaScript to update an HTML element.
|
||||
|
||||
例如，当用户点击 "Get Message" 按钮时，它将改变类名`message`元素的文本为 "Here is the message"。
|
||||
For example, when a user clicks the "Get Message" button, it changes the text of the element with the class `message` to say "Here is the message".
|
||||
|
||||
通过在点击事件内添加以下代码实现：
|
||||
This works by adding the following code within the click event:
|
||||
|
||||
`document.getElementsByClassName('message')[0].textContent="Here is the message";`
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`onclick`事件处理器中添加代码，改变`message`元素内的文字为 "Here is the message"。
|
||||
Add code inside the `onclick` event handler to change the text inside the `message` element to say "Here is the message".
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该使用`document.getElementsByClassName`方法来选择类名为`message`的元素，然后将其`innerHTML`改为给定文字。
|
||||
Your code should use the `document.getElementsByClassName` method to select the element with class `message` and set its `textContent` to the given string.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be5
|
||||
title: 将 JSON 数据转换为 HTML
|
||||
title: Convert JSON Data to HTML
|
||||
challengeType: 6
|
||||
forumTopicId: 16807
|
||||
dashedName: convert-json-data-to-html
|
||||
@ -8,15 +8,15 @@ dashedName: convert-json-data-to-html
|
||||
|
||||
# --description--
|
||||
|
||||
现在你从 JSON API 获取了数据，可以在 HTML 中显示它们了。
|
||||
Now that you're getting data from a JSON API, you can display it in the HTML.
|
||||
|
||||
既然 cat photo 对象都保存在数组里，你可以使用 `forEach` 方法来遍历它们。当你拿到每个对象时，你就可以修改 HTML 元素了。
|
||||
You can use a `forEach` method to loop through the data since the cat photo objects are held in an array. As you get to each item, you can modify the HTML elements.
|
||||
|
||||
首先，通过 `let html = "";` 声明一个 html 变量。
|
||||
First, declare an html variable with `let html = "";`.
|
||||
|
||||
接着，遍历 JSON，将用 `strong` 标签包裹的键名和后面跟着值的 html 元素添加给变量。当循环结束后渲染它。
|
||||
Then, loop through the JSON, adding HTML to the variable that wraps the key names in `strong` tags, followed by the value. When the loop is finished, you render it.
|
||||
|
||||
这是执行此操作的代码：
|
||||
Here's the code that does this:
|
||||
|
||||
```js
|
||||
let html = "";
|
||||
@ -30,13 +30,13 @@ json.forEach(function(val) {
|
||||
});
|
||||
```
|
||||
|
||||
**注意：** 在本挑战中，你需要给页面添加新的 HTML 元素，不能依赖 `textContent` 方法，这个方法容易遭受跨站脚本攻击，可以用 `innerHTML` 来完成挑战。
|
||||
**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to Cross-site scripting attacks.
|
||||
|
||||
# --instructions--
|
||||
|
||||
添加一个 `forEach` 循环来遍历 JSON 数据，并创建 HTML 元素以显示它。
|
||||
Add a `forEach` method to loop over the JSON data and create the HTML elements to display it.
|
||||
|
||||
以下是一个 JSON 示例：
|
||||
Here is some example JSON
|
||||
|
||||
```json
|
||||
[
|
||||
@ -52,19 +52,19 @@ json.forEach(function(val) {
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该将数据保存在 `html` 变量中。
|
||||
Your code should store the data in the `html` variable
|
||||
|
||||
```js
|
||||
assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g));
|
||||
```
|
||||
|
||||
你的代码应该使用 `forEach` 方法来遍历 API 中的 JSON 数据。
|
||||
Your code should use a `forEach` method to loop over the JSON data from the API.
|
||||
|
||||
```js
|
||||
assert(code.match(/json\.forEach/g));
|
||||
```
|
||||
|
||||
你的代码应该用 `strong` 标签包裹键名。
|
||||
Your code should wrap the key names in `strong` tags.
|
||||
|
||||
```js
|
||||
assert(code.match(/<strong>.+<\/strong>/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be8
|
||||
title: 根据地理位置数据找到用户的 GPS 坐标
|
||||
title: Get Geolocation Data to Find A User's GPS Coordinates
|
||||
challengeType: 6
|
||||
forumTopicId: 18188
|
||||
dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
|
||||
@ -8,15 +8,15 @@ dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
|
||||
|
||||
# --description--
|
||||
|
||||
你还能做一件很酷的事就是访问你用户当前的地理位置，每个浏览器都有内置的导航器，可以为你提供这些信息。
|
||||
Another cool thing you can do is access your user's current location. Every browser has a built in navigator that can give you this information.
|
||||
|
||||
导航器会获取用户当前的经度和纬度。
|
||||
The navigator will get the user's current longitude and latitude.
|
||||
|
||||
您将看到允许或阻止此站点了解您当前位置的提示。只要代码正确，挑战就可以以任何一种方式完成。
|
||||
You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.
|
||||
|
||||
通过选择允许，你将看到输出手机上的文本更改为你的纬度和经度
|
||||
By selecting allow, you will see the text on the output phone change to your latitude and longitude.
|
||||
|
||||
这是执行此操作的代码：
|
||||
Here's code that does this:
|
||||
|
||||
```js
|
||||
if (navigator.geolocation){
|
||||
@ -26,33 +26,33 @@ if (navigator.geolocation){
|
||||
}
|
||||
```
|
||||
|
||||
首先，它检查`navigator.geolocation`对象是否存在。如果是，`getCurrentPosition`则调用该对象上的方法，该方法启动对用户位置的异步请求。如果请求成功，则运行方法中的回调函数。此函数`position`使用点表示法访问对象的纬度和经度值，并更新页面。
|
||||
First, it checks if the `navigator.geolocation` object exists. If it does, the `getCurrentPosition` method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the `position` object's values for latitude and longitude using dot notation and updates the HTML.
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`script`标记内添加示例代码以检查用户的当前位置并将其插入 HTML
|
||||
Add the example code inside the `script` tags to check a user's current location and insert it into the HTML.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该用于`navigator.geolocation`访问用户的当前位置。
|
||||
Your code should use `navigator.geolocation` to access the user's current location.
|
||||
|
||||
```js
|
||||
assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
|
||||
```
|
||||
|
||||
你的代码应该用于`position.coords.latitude`显示用户的纬度位置。
|
||||
Your code should use `position.coords.latitude` to display the user's latitudinal location.
|
||||
|
||||
```js
|
||||
assert(code.match(/position\.coords\.latitude/g));
|
||||
```
|
||||
|
||||
你的代码应该用于`position.coords.longitude`显示用户的经度位置。
|
||||
Your code should use `position.coords.longitude` to display the user's longitudinal location.
|
||||
|
||||
```js
|
||||
assert(code.match(/position\.coords\.longitude/g));
|
||||
```
|
||||
|
||||
你应该在`data`div 元素中显示用户的位置。
|
||||
You should display the user's position within the `data` div element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5ccfad82bb2dc6c965a848e5
|
||||
title: 使用 JavaScript 的 fetch 方法获取 JSON
|
||||
title: Get JSON with the JavaScript fetch method
|
||||
challengeType: 6
|
||||
forumTopicId: 301501
|
||||
dashedName: get-json-with-the-javascript-fetch-method
|
||||
@ -8,59 +8,59 @@ dashedName: get-json-with-the-javascript-fetch-method
|
||||
|
||||
# --description--
|
||||
|
||||
请求外部数据的另一个方法是使用 JavaScript 的 `fetch()` 方法。它的作用和 XMLHttpRequest 一致，但是语法更易理解。
|
||||
Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to XMLHttpRequest, but the syntax is considered easier to understand.
|
||||
|
||||
下面是使用 GET 请求 `/json/cats.json` 数据的例子。
|
||||
Here is the code for making a GET request to `/json/cats.json`
|
||||
|
||||
```js
|
||||
|
||||
fetch('/json/cats.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('message').innerHTML = JSON.stringify(data);
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('message').innerHTML = JSON.stringify(data);
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
逐行解释一下代码。
|
||||
Take a look at each piece of this code.
|
||||
|
||||
第一行是发起请求。也就是说，`fetch(URL)` 向指定的 URL 发起 GET 请求。方法返回一个 Promise。
|
||||
The first line is the one that makes the request. So, `fetch(URL)` makes a GET request to the URL specified. The method returns a Promise.
|
||||
|
||||
当 Promise 返回后，如果请求成功，会执行 `then` 方法，该方法把响应转换为 JSON 格式。
|
||||
After a Promise is returned, if the request was successful, the `then` method is executed, which takes the response and converts it to JSON format.
|
||||
|
||||
`then` 方法返回的也是 Promise，会被下一个 `then` 方法捕获。第二个 `then` 方法传入的参数就是最终的 JSON 对象。
|
||||
The `then` method also returns a Promise, which is handled by the next `then` method. The argument in the second `then` is the JSON object you are looking for!
|
||||
|
||||
接着，使用 `document.getElementById()` 选择将要接收数据的元素。然后插入请求返回的 JSON 对象创建的字符串修改元素的 HTML 代码。
|
||||
Now, it selects the element that will receive the data by using `document.getElementById()`. Then it modifies the HTML code of the element by inserting a string created from the JSON object returned from the request.
|
||||
|
||||
# --instructions--
|
||||
|
||||
更新代码，创建一个 "GET" 请求向 freeCodeCamp Cat Photo API 请求数据。这次使用 `fetch` 方法而不是 `XMLHttpRequest`。
|
||||
Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`.
|
||||
|
||||
# --hints--
|
||||
|
||||
应该使用 `fetch` 来发起 GET 请求。
|
||||
Your code should make a GET request with `fetch`.
|
||||
|
||||
```js
|
||||
assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));
|
||||
```
|
||||
|
||||
应该在 `then` 里面将响应转换为 JSON。
|
||||
Your code should use `then` to convert the response to JSON.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.then\s*\(\s*(response|\(\s*response\s*\))\s*=>\s*response\s*\.json\s*\(\s*\)\s*\)/g
|
||||
/\.then\s*\(\s*\(?(?<var>\w+)\)?\s*=>\s*\k<var>\s*\.json\s*\(\s*\)\s*\)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
应该使用另一个 `then` 接收 `then` 转换的 JSON。
|
||||
Your code should use `then` to handle the data converted to JSON by the other `then`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.then\s*\(\s*(data|\(\s*data\s*\))\s*=>\s*{[^}]*}\s*\)/g));
|
||||
```
|
||||
|
||||
代码应该选择 id 为 `message` 的元素然后把它的内部 HTML 改成 JSON data 的字符串。
|
||||
Your code should get the element with id `message` and change its inner HTML to the string of JSON data.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be3
|
||||
title: 使用 XMLHttpRequest 方法获取 JSON
|
||||
title: Get JSON with the JavaScript XMLHttpRequest Method
|
||||
challengeType: 6
|
||||
forumTopicId: 301502
|
||||
dashedName: get-json-with-the-javascript-xmlhttprequest-method
|
||||
@ -8,19 +8,19 @@ dashedName: get-json-with-the-javascript-xmlhttprequest-method
|
||||
|
||||
# --description--
|
||||
|
||||
你还可以从外部链接请求数据，这就是 API 发挥作用的地方。
|
||||
You can also request data from an external source. This is where APIs come into play.
|
||||
|
||||
请记住，API（或叫应用程序编程接口）是计算机用来互相通信的工具。你将学习如何通过 AJAX技术 从 API 获得的数据来更新 HTML。
|
||||
Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another. You'll learn how to update HTML with the data we get from APIs using a technology called AJAX.
|
||||
|
||||
大部分 web APIs 以 JSON 格式传输数据。JSON 是 JavaScript Object Notation 的简写。
|
||||
Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.
|
||||
|
||||
JSON 语法与 JavaScript 对象字面符号非常相似，JSON 具有对象属性以及其当前值，夹在`{` 和 `}`之间。
|
||||
JSON syntax looks very similar to JavaScript object literal notation. JSON has object properties and their current values, sandwiched between a `{` and a `}`.
|
||||
|
||||
这些属性及其值通常称为 "键值对"。
|
||||
These properties and their values are often referred to as "key-value pairs".
|
||||
|
||||
但是，JSON 是由 API 以`bytes` 形式传输的，你的程序以`string`接受它。它们能转换成为 JavaScript 对象，但默认情况下它们不是 JavaScript 对象。 `JSON.parse`方法解析字符串并构造它描述的 JavaScript 对象。
|
||||
However, JSON transmitted by APIs are sent as `bytes`, and your application receives it as a `string`. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The `JSON.parse` method parses the string and constructs the JavaScript object described by it.
|
||||
|
||||
你可以从 freeCodeCamp 的 Cat Photo API 请求 JSON，以下是你可以在点击事件中添加的代码：
|
||||
You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this:
|
||||
|
||||
```js
|
||||
const req = new XMLHttpRequest();
|
||||
@ -32,21 +32,21 @@ req.onload = function(){
|
||||
};
|
||||
```
|
||||
|
||||
这里介绍每行代码的作用，JavaScript `XMLHttpRequest` 对象具有许多用于传输数据的属性和方法。首先，创建一个`XMLHttpRequest`对象实例，并保存在`req`变量里 。 接着, `open` 方法初始化请求 - 此示例从 API 请求数据，因此是个 "GET" 请求。第二个参数 `open` 是你要从中请求数据的 API 的 URL。第三个参数是一个布尔值， `true`使其成为异步请求。 该`send`方法发送请求，最后，`onload`事件处理程序解析返回的数据并应用该`JSON.stringify`方法将JavaScript对象转换为字符串，然后将此字符串作为消息文本插入。
|
||||
Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a "GET" request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text.
|
||||
|
||||
# --instructions--
|
||||
|
||||
更新代码以创建并向 freeCodeCamp Cat Photo API 发送 "GET" 请求。然后点击 "Get Message" 按钮，你的 AJAX 函数将使用 API 的原生 JSON 替换 "The message will go here" 的文本。
|
||||
Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo API. Then click the "Get Message" button. Your AJAX function will replace the "The message will go here" text with the raw JSON output from the API.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该创建一个新的`XMLHttpRequest`。
|
||||
Your code should create a new `XMLHttpRequest`.
|
||||
|
||||
```js
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
你的代码应使用该`open`方法初始化对 freeCodeCamp Cat Photo API 的 'GET' 请求。
|
||||
Your code should use the `open` method to initialize a "GET" request to the freeCodeCamp Cat Photo API.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -56,13 +56,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
你的代码应使用该`send`方法发送请求。
|
||||
Your code should use the `send` method to send the request.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.send\(\s*\)/g));
|
||||
```
|
||||
|
||||
你的代码应该有一个`onload`设置为函数的事件处理程序。
|
||||
Your code should have an `onload` event handler set to a function.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -70,13 +70,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
你的代码应该使用该`JSON.parse`方法来解析`responseText`。
|
||||
Your code should use the `JSON.parse` method to parse the `responseText`.
|
||||
|
||||
```js
|
||||
assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g));
|
||||
```
|
||||
|
||||
你的代码应该用`message`获取元素，并将其内部 HTML 转换为 JSON 数据字符串。
|
||||
Your code should get the element with class `message` and change its inner HTML to the string of JSON data.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be1
|
||||
title: 使用 onclick 属性处理点击事件
|
||||
title: Handle Click Events with JavaScript using the onclick property
|
||||
challengeType: 6
|
||||
forumTopicId: 301503
|
||||
dashedName: handle-click-events-with-javascript-using-the-onclick-property
|
||||
@ -8,7 +8,7 @@ dashedName: handle-click-events-with-javascript-using-the-onclick-property
|
||||
|
||||
# --description--
|
||||
|
||||
你希望代码仅在页面完成加载后执行。为此，你可将名为`DOMContentLoaded`的 JavaScript 事件附加到文档中。以下是实现的代码：
|
||||
You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called `DOMContentLoaded`. Here's the code that does this:
|
||||
|
||||
```js
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
```
|
||||
|
||||
你可以在`DOMContentLoaded`函数内部添加事件处理方法。你可以添加`onclick`事件处理器，当用户点击 id 为`getMessage`的元素时会触发事件。添加以下代码：
|
||||
You can implement event handlers that go inside of the `DOMContentLoaded` function. You can implement an `onclick` event handler which triggers when the user clicks on the element with id `getMessage`, by adding the following code:
|
||||
|
||||
```js
|
||||
document.getElementById('getMessage').onclick = function(){};
|
||||
@ -24,17 +24,17 @@ document.getElementById('getMessage').onclick = function(){};
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`DOMContentLoaded`函数内为 id 为`getMessage`的元素添加一个 click 事件处理器。
|
||||
Add a click event handler inside of the `DOMContentLoaded` function for the element with id of `getMessage`.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该用`document.getElementById`方法来选择`getMessage`元素。
|
||||
Your code should use the `document.getElementById` method to select the `getMessage` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
|
||||
```
|
||||
|
||||
你的代码应该添加`onclick`事件处理器。
|
||||
Your code should add an `onclick` event handler.
|
||||
|
||||
```js
|
||||
assert(typeof document.getElementById('getMessage').onclick === 'function');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be9
|
||||
title: 使用 XMLHttpRequest 方法发送数据
|
||||
title: Post Data with the JavaScript XMLHttpRequest Method
|
||||
challengeType: 6
|
||||
forumTopicId: 301504
|
||||
dashedName: post-data-with-the-javascript-xmlhttprequest-method
|
||||
@ -8,9 +8,9 @@ dashedName: post-data-with-the-javascript-xmlhttprequest-method
|
||||
|
||||
# --description--
|
||||
|
||||
在前面的示例中，你通过外部资源获取数据。此外，你也可以将数据发送到外部资源，只要该资源支持 AJAX 请求并且你知道 URL。
|
||||
In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.
|
||||
|
||||
JavaScript 的`XMLHttpRequest`方法也用于将数据发布到服务器，这是个例子：
|
||||
JavaScript's `XMLHttpRequest` method is also used to post data to a server. Here's an example:
|
||||
|
||||
```js
|
||||
const xhr = new XMLHttpRequest();
|
||||
@ -26,27 +26,27 @@ const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
|
||||
xhr.send(body);
|
||||
```
|
||||
|
||||
你之前已经见过这些方法。`open` 方法根据给定的外部资源的 URL 初始化一个 POST 请求，参数 `true` 表示请求是异步执行的。 `setRequestHeader` 方法设置了 HTTP 请求标头的值，该标头包含有关发送人和请求的信息。它必须在 `open` 方法之后、`send` 方法之前调用。它的两个参数表示标头的内容类型和标头数据将被设置成什么值。 接下来，`onreadystatechange` 事件监听器监听请求状态的更改。`readyState` 为 4 表示操作完成，`status` 为 201 表示请求成功，此时文档的 HTML 可以更新了。 最后，`send` 方法发送带有 `body` 值的请求，其中 `userName` 的值由用户在 `input` 字段中输入。
|
||||
You've seen several of these methods before. Here the `open` method initializes the request as a "POST" to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of 4 means the operation is complete, and a `status` of 201 means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field.
|
||||
|
||||
# --instructions--
|
||||
|
||||
更新代码以创建并发送 "POST" 请求。然后在输入框中输入你的姓名，并点击 "Send Message"。你的 AJAX 函数会用服务器返回的数据替换 "Reply from Server will be here"。修改返回的请求结果，在你的名字前加上 " loves cats"。
|
||||
Update the code so it makes a "POST" request to the API endpoint. Then type your name in the input field and click "Send Message". Your AJAX function should replace "Reply from Server will be here." with data from the server. Format the response to display your name appended with " loves cats".
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该创建一个新的 `XMLHttpRequest`。
|
||||
Your code should create a new `XMLHttpRequest`.
|
||||
|
||||
```js
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
你的代码应该使用 `open` 方法初始化一个发送给服务器的 'POST' 请求。
|
||||
Your code should use the `open` method to initialize a "POST" request to the server.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
|
||||
```
|
||||
|
||||
你的代码应该使用 `setRequestHeader` 方法。
|
||||
Your code should use the `setRequestHeader` method.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -56,13 +56,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
你的代码应该有一个 `onreadystatechange` 的事件监听器。
|
||||
Your code should have an `onreadystatechange` event handler set to a function.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.onreadystatechange\s*?=/g));
|
||||
```
|
||||
|
||||
你的代码应该获取 class 为 `message` 的元素，并将它的 `textContent` 更改为 "`userName` loves cats"。
|
||||
Your code should get the element with class `message` and change its `textContent` to "`userName` loves cats"
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -72,7 +72,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
你的代码应该使用 `send` 方法。
|
||||
Your code should use the `send` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.send\(\s*?body\s*?\)/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be7
|
||||
title: 预先过滤 JSON 以获得所需的数据
|
||||
title: Pre-filter JSON to Get the Data You Need
|
||||
challengeType: 6
|
||||
forumTopicId: 18257
|
||||
dashedName: pre-filter-json-to-get-the-data-you-need
|
||||
@ -8,11 +8,11 @@ dashedName: pre-filter-json-to-get-the-data-you-need
|
||||
|
||||
# --description--
|
||||
|
||||
如果你不希望渲染每张从 freeCodeCamp Cat Photo API 取回的猫照片，你可以在循环先预先过滤 JSON 数据。
|
||||
If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it.
|
||||
|
||||
鉴于 JSON 数据都存储在数组中，你可以使用`filter`方法过滤掉 "id" 键值为 1 的猫。
|
||||
Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose "id" key has a value of 1.
|
||||
|
||||
这是执行此操作的代码：
|
||||
Here's the code to do this:
|
||||
|
||||
```js
|
||||
json = json.filter(function(val) {
|
||||
@ -22,11 +22,11 @@ json = json.filter(function(val) {
|
||||
|
||||
# --instructions--
|
||||
|
||||
将`filter`代码添加到 JSON 数据中来移除 "id" 值为 1 的猫。
|
||||
Add code to `filter` the json data to remove the cat with the "id" value of 1.
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该使用`filter`方法。
|
||||
Your code should use the `filter` method.
|
||||
|
||||
```js
|
||||
assert(code.match(/json\.filter/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be6
|
||||
title: 渲染数据源的图像
|
||||
title: Render Images from Data Sources
|
||||
challengeType: 6
|
||||
forumTopicId: 18265
|
||||
dashedName: render-images-from-data-sources
|
||||
@ -8,27 +8,27 @@ dashedName: render-images-from-data-sources
|
||||
|
||||
# --description--
|
||||
|
||||
前几个挑战中表明，JSON 数组中的每个对象都包含一个`imageLink`键，其值为猫图像的 URL。
|
||||
The last few challenges showed that each object in the JSON array contains an `imageLink` key with a value that is the URL of a cat's image.
|
||||
|
||||
当你遍历这些对象的时候，你可以使用`imageLink`属性在`img`元素中显示此图像。
|
||||
When you're looping through these objects, you can use this `imageLink` property to display this image in an `img` element.
|
||||
|
||||
这是执行此操作的代码：
|
||||
Here's the code that does this:
|
||||
|
||||
`html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";`
|
||||
|
||||
# --instructions--
|
||||
|
||||
添加代码以在`img`标签中使用`imageLink`和`altText`属性。
|
||||
Add code to use the `imageLink` and `altText` properties in an `img` tag.
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该使用`imageLink`属性来显示图像。
|
||||
You should use the `imageLink` property to display the images.
|
||||
|
||||
```js
|
||||
assert(code.match(/val\.imageLink/g));
|
||||
```
|
||||
|
||||
应该用 `altText` 做为图片的 alt 属性。
|
||||
You should use the `altText` for the alt attribute values of the images.
|
||||
|
||||
```js
|
||||
assert(code.match(/val\.altText/g));
|
||||
|
||||
Reference in New Issue
Block a user