[] - >方括号代表一个数组了解API返回的数据结构非常重要，因为它会影响您检索所需值的方式。在右侧，单击“获取消息”按钮，将freeCodeCamp Cat Photo API JSON加载到HTML中。您在JSON数据中看到的第一个和最后一个字符是方括号
{} - >圆括号代表一个对象
“” - >双引号代表一个字符串。它们还用于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）;
//打印“头上戴着绿色头盔形瓜的白猫。”
[ ] -> 方括号表示数组+理解 API 返回数据的结构是必需的，它将影响你如何获取你所需的值。 +在右侧，点击 "Get Message" 按钮，将 freeCodeCamp Cat Photo API JSON 加载到页面中。 +你看到在 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."
+```
+
+codeNames数组中向控制台输出第二个值。您应该在对象上使用括号和点表示法（保存在变量json ）来访问该值。 codeNames数组的第二个值到控制台，你应该在对象上使用括号或者点表示法（保存在变量json中）来访问该值。
+@@ -82,7 +100,6 @@ tests: Get Message
- ``` @@ -94,8 +111,60 @@ tests: ## Solution+ +
``` -/section> +message更改元素的文本，使其message “此消息是”。这可以通过在click事件中添加以下代码来实现： document.getElementsByClassName('message')[0].textContent="Here is the message"; message元素的文本为 "Here is the message"。
+通过在点击事件内添加以下代码实现：
+document.getElementsByClassName('message')[0].textContent="Here is the message";
+onclick事件处理程序中添加代码，以更改message元素内的文本，说“这是消息”。 onclick事件处理器中添加代码，改变message元素内的文字为 "Here is the message"。
+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
+
+
++ +
+``` + + + + + +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>”;
}）;
forEach方法来遍历它。当你拿到每个对象时，你就可以修改 HTML 元素了。
+首先，用let html = "";声明一个变量。
+接着，遍历 JSON，将 HTML 添加到用strong标记键名的变量，后面跟着值。当循环结束后渲染它。
+这是执行此操作的代码：
+
+```js
+let html = "";
+json.forEach(function(val) {
+ const keys = Object.keys(val);
+ html += "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"
+ ]
+ }
+]
+```
+
+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
+
+
++ +
+``` + + + +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。 navigator.geolocation对象是否存在。如果是，getCurrentPosition则调用该对象上的方法，该方法启动对用户位置的异步请求。如果请求成功，则运行方法中的回调函数。此函数position使用点表示法访问对象的纬度和经度值，并更新页面。
+script标记内添加示例代码以检查用户的当前位置并将其插入HTML。 script标记内添加示例代码以检查用户的当前位置并将其插入 HTML
+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
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 代码。
+fetch 方法而不是 XMLHttpRequest。
+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));
+
+```
+
++ The message will go here +
++ +
+``` + ++ The message will go here +
++ +
+``` + +{和} 。这些属性及其值通常称为“键值对”。但是，API传输的JSON以bytes形式发送，应用程序将其作为string接收。这些可以转换为JavaScript对象，但默认情况下它们不是JavaScript对象。 JSON.parse方法解析字符串并构造它描述的JavaScript对象。您可以从freeCodeCamp的Cat Photo API请求JSON。以下是您可以在点击事件中添加的代码： req = new XMLHttpRequest（）;这是对每件作品的评论。 JavaScript
req.open（ “GET”， '/ JSON / cats.json'，TRUE）;
req.send（）;
req.onload =函数（）{
JSON = JSON.parse（req.responseText）;
document.getElementsByClassName（ '信息'）[0] = .innerHTML JSON.stringify（JSON）;
};
XMLHttpRequest对象具有许多用于传输数据的属性和方法。首先，创建XMLHttpRequest对象的实例并将其保存在req变量中。接下来， open方法初始化一个请求 - 这个例子是从API请求数据，因此是一个“GET”请求。 open的第二个参数是您从中请求数据的API的URL。第三个参数是布尔值，其中true使其成为异步请求。 send方法发送请求。最后， onload事件处理程序解析返回的数据并应用JSON.stringify方法将JavaScript对象转换为字符串。然后将此字符串作为消息文本插入。 { 和 }之间。
+这些属性及其值通常称为 "键值对"。
+但是，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对象转换为字符串，然后将此字符串作为消息文本插入。
+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
+
+
@@ -85,7 +111,6 @@ tests: Get Message
- ``` @@ -97,8 +122,58 @@ tests: ## Solution+ +
``` -/section> +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(){};
+```
+
+DOMContentLoaded函数内为id为getMessage的元素添加一个click事件处理程序。 DOMContentLoaded函数内为 id 为getMessage的元素添加一个 click 事件处理器。
+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
+
@@ -75,7 +92,6 @@ tests: Get Message
- ``` @@ -87,8 +103,51 @@ tests: ## Solution+ +
``` -/section> +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字段中给出。 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字段中给出。
+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
+
+
@@ -90,7 +117,6 @@ tests: Send Message
- ``` @@ -103,7 +129,68 @@ tests:+ + +
``` -/section> +filter方法过滤掉“id”键值为1的cat。以下是执行此操作的代码： json = json.filter（function（val）{
return（val.id！== 1）;
}）;
filter方法过滤掉 "id" 键值为 1 的猫。
+这是执行此操作的代码：
+
+```js
+json = json.filter(function(val) {
+ return (val.id !== 1);
+});
+```
+
+filter json数据以删除“id”值为1的cat。 filter代码添加到 JSON 数据中来移除 "id" 值为 1 的猫。
+filter方法。
+ - text: 你的代码应该使用filter方法。
testString: assert(code.match(/json\.filter/g));
```
@@ -31,18 +44,18 @@ tests:
```html
+
+
@@ -90,7 +105,6 @@ tests: Get Message
- ``` @@ -102,8 +116,71 @@ tests: ## Solution+ +
``` -/section> +imageLink键，其值为cat图像的URL。循环浏览这些对象时，可以使用此imageLink属性在img元素中显示此图像。这是执行此操作的代码： html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"; imageLink键，其值为猫图像的 URL。
+当你遍历这些对象的时候，你可以使用imageLink属性在img元素中显示此图像。
+这是执行此操作的代码：
+html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
+img标记中使用imageLink和altText属性。 img标签中使用imageLink和altText属性。
+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
+
+
++ +
+``` + + + + + +