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 <chenzhicheng@dayuwuxian.com> Co-authored-by: S1ngS1ng <liuxing0514@gmail.com>
This commit is contained in:
ZhichengChen
GitHub
parent
3b7b64feb3
commit
ff8db8ce9e
@ -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
|
||||
<section id="description">在之前的挑战中，您了解了如何从freeCodeCamp Cat Photo API获取JSON数据。现在，您将仔细查看返回的数据，以便更好地理解JSON格式。回想一下JavaScript中的一些表示法： <blockquote> [] - >方括号代表一个数组<br> {} - >圆括号代表一个对象<br> “” - >双引号代表一个字符串。它们还用于JSON中的键名</blockquote>了解API返回的数据结构非常重要，因为它会影响您检索所需值的方式。在右侧，单击“获取消息”按钮，将freeCodeCamp Cat Photo API JSON加载到HTML中。您在JSON数据中看到的第一个和最后一个字符是方括号<code>[ ]</code> 。这意味着返回的数据是一个数组。 JSON数据中的第二个字符是一个卷曲<code>{</code>括号，它启动一个对象。仔细观察，您可以看到有三个独立的对象。 JSON数据是一个包含三个对象的数组，其中每个对象都包含有关猫照片的信息。您之前了解到，对象包含以逗号分隔的“键值对”。在Cat Photo示例中，第一个对象具有<code>"id":0</code>其中“id”是键，0是其对应值。类似地，有“imageLink”，“altText”和“codeNames”的键。每个猫照片对象具有相同的键，但具有不同的值。第一个对象中另一个有趣的“键值对”是<code>"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]</code> 。这里“codeNames”是键，它的值是三个字符串的数组。可以有对象数组以及带有数组作为值的键。记住如何访问数组和对象中的数据。数组使用括号表示法来访问项目的特定索引。对象使用括号或点表示法来访问给定属性的值。这是打印第一张猫照片的“altText”的示例 - 请注意编辑器中解析的JSON数据保存在名为<code>json</code>的变量中： <blockquote>的console.log（JSON [0] .altText）; <br> //打印“头上戴着绿色头盔形瓜的白猫。” </blockquote></section>
|
||||
<section id='description'>
|
||||
在前面的挑战中，你了解了如何从 freeCodeCamp Cat Photo API 获取 JSON 数据。
|
||||
现在，你将进一步观察返回的数据来更好的了解 JSON 格式，回忆一下 JavaScript 中的一些符号：
|
||||
<blockquote>[ ] -> 方括号表示数组<br>{ } -> 大括号表示对象<br>" " -> 双引号表示字符串，它们还用于表示 JSON 中的键名</blockquote>
|
||||
理解 API 返回数据的结构是必需的，它将影响你如何获取你所需的值。
|
||||
在右侧，点击 "Get Message" 按钮，将 freeCodeCamp Cat Photo API JSON 加载到页面中。
|
||||
你看到在 JSON 数据中的第一个和最后一个字符是中括号<code>[ ]</code>，这意味着返回的数据是一个数组。JSON 数据中的第二个符号是一个大括号<code>{</code>，这意味着是一个对象。再仔细看，你会发现有三个独立的对象，这个 JSON 数据是一个包含三个对象的数组，它们各自都包含了 cat photo 的信息。
|
||||
你之前了解了对象包含了用逗号分隔的 "键值对"。在 Cat Photo 示例中，第一个对象的<code>"id":0</code>"id" 是键，0 是其对应的值，类似的，"imageLink", "altText", 和 "codeNames" 都是对应的键。每个 cat photo 对象具有相同的键，但具有不同的值
|
||||
在第一个对象中有一个有趣的 "键值对" 它是<code>"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]</code>。 "codeNames" 是键，它的值是包含三个字符串的数组。对象数组以及数组作为键可以作为值
|
||||
记住如何访问数组和对象中的数据，数组使用括号表示法来访问项目的特定索引，对象使用括号或点表示法来访问给定属性的值。这是打印第一张 cat photo 的“altText”的示例 - 请注意，编辑器中解析的 JSON 数据保存在名为<code>json</code>的变量中：
|
||||
|
||||
```js
|
||||
console.log(json[0].altText);
|
||||
// Prints "A white cat wearing a green helmet shaped melon on its head."
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">对于“id”为2的cat，在<code>codeNames</code>数组中向控制台输出第二个值。您应该在对象上使用括号和点表示法（保存在变量<code>json</code> ）来访问该值。 </section>
|
||||
<section id='instructions'>
|
||||
对于 "id" 是 2 的猫， 打印<code>codeNames</code>数组的第二个值到控制台，你应该在对象上使用括号或者点表示法（保存在变量<code>json</code>中）来访问该值。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='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
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
|
||||
// Add your code below this line
|
||||
const json = JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
// 在这行上面添加代码
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
@ -73,8 +91,8 @@ tests:
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
@ -82,7 +100,6 @@ tests:
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -94,8 +111,60 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
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);
|
||||
// Add your code below this line
|
||||
console.log(json[2].codeNames[1]);
|
||||
// Add your code above this line
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
@ -2,22 +2,29 @@
|
||||
id: 587d7fad367417b2b2512be2
|
||||
title: Change Text with click Events
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 单击“事件”更改文本
|
||||
forumTopicId: 301500
|
||||
localeTitle: 通过单击事件更改文本
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">当click事件发生时，您可以使用JavaScript来更新HTML元素。例如，当用户单击“获取消息”按钮时，它会使用类<code>message</code>更改元素的文本，使其<code>message</code> “此消息是”。这可以通过在click事件中添加以下代码来实现： <code>document.getElementsByClassName('message')[0].textContent="Here is the message";</code> </section>
|
||||
<section id='description'>
|
||||
当点击事件发生时，你可以使用 JavaScript 更新 HTML 元素。
|
||||
例如，当用户点击 "Get Message" 按钮时，它将改变类名<code>message</code>元素的文本为 "Here is the message"。
|
||||
通过在点击事件内添加以下代码实现：
|
||||
<code>document.getElementsByClassName('message')[0].textContent="Here is the message";</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>onclick</code>事件处理程序中添加代码，以更改<code>message</code>元素内的文本，说“这是消息”。 </section>
|
||||
<section id='instructions'>
|
||||
在<code>onclick</code>事件处理器中添加代码，改变<code>message</code>元素内的文字为 "Here is the message"。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应使用<code>document.getElementsByClassName</code>方法选择具有类<code>message</code>的元素，并将其<code>textContent</code>设置为给定的字符串。
|
||||
- text: 你的代码应该使用<code>document.getElementsByClassName</code>方法来选择类名为<code>message</code>的元素，然后将其<code>innerHTML</code>改为给定文字。
|
||||
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
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
// Add your code below this line
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
// 在这行上面添加代码
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
@ -66,6 +74,65 @@ tests:
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// Add your code below this line
|
||||
document.getElementsByClassName('message')[0].textContent = "Here is the message";
|
||||
// Add your code above this line
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
@ -78,17 +145,5 @@ tests:
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
/section>
|
||||
|
||||
@ -2,26 +2,62 @@
|
||||
id: 587d7fae367417b2b2512be5
|
||||
title: Convert JSON Data to HTML
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 将JSON数据转换为HTML
|
||||
forumTopicId: 16807
|
||||
localeTitle: 将 JSON 数据转换为 HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在您正在从JSON API获取数据，您可以在HTML中显示它。您可以使用<code>forEach</code>方法循环数据，因为cat照片对象保存在数组中。当您到达每个项目时，您可以修改HTML元素。首先，使用<code>var html = "";</code>声明一个html变量<code>var html = "";</code> 。然后，遍历JSON，将HTML添加到包含<code>strong</code>标记中的键名的变量，然后是值。循环结束后，渲染它。这是执行此操作的代码： <blockquote> json.forEach（function（val）{ <br> var keys = Object.keys（val）; <br> html + =“<div class ='cat'>”; <br> keys.forEach（function（key）{ <br> html + =“<strong>”+ key +“</ strong>：”+ val [key] +“<br>”; <br> }）; <br> html + =“</ div> <br>”; <br> }）; </blockquote></section>
|
||||
<section id='description'>
|
||||
现在你可以从 JSON API 获取数据了，你可以在 HTML 中显示它。
|
||||
既然 cat photo 对象保存在数组里，你可以使用<code>forEach</code>方法来遍历它。当你拿到每个对象时，你就可以修改 HTML 元素了。
|
||||
首先，用<code>let html = "";</code>声明一个变量。
|
||||
接着，遍历 JSON，将 HTML 添加到用<code>strong</code>标记键名的变量，后面跟着值。当循环结束后渲染它。
|
||||
这是执行此操作的代码：
|
||||
|
||||
```js
|
||||
let html = "";
|
||||
json.forEach(function(val) {
|
||||
const keys = Object.keys(val);
|
||||
html += "<div class = 'cat'>";
|
||||
keys.forEach(function(key) {
|
||||
html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
|
||||
});
|
||||
html += "</div><br>";
|
||||
});
|
||||
```
|
||||
|
||||
<strong>注意：</strong> 在本挑战需要给页面添加一个新的 HTML 元素，不能使用 `textContent` 方法，这个方法容易遭受跨站脚本攻击，可以用 `innerHTML` 来完成挑战。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">添加<code>forEach</code>方法以循环JSON数据并创建HTML元素以显示它。这是一些JSON示例<blockquote> [ <br> { <br> “ID”：0， <br> “IMAGELINK”： “https://s3.amazonaws.com/freecodecamp/funny-cat.jpg” <br> “altText”：“头上戴着绿色头盔形状瓜的白猫。”， <br> “codeNames”：[“Juggernaut”，“华莱士夫人”，“毛茛” <br> ] <br> } <br> ] </blockquote></section>
|
||||
<section id='instructions'>
|
||||
添加一个<code>forEach</code>循环 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"
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该将数据存储在<code>html</code>变量中
|
||||
- text: 你的代码应该将数据保存在<code>html</code>变量中。
|
||||
testString: assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g));
|
||||
- text: 您的代码应该使用<code>forEach</code>方法来循环API中的JSON数据。
|
||||
- text: 你的代码应该使用<code>forEach</code>方法来遍历 API 中的 JSON 数据。
|
||||
testString: assert(code.match(/json\.forEach/g));
|
||||
- text: 您的代码应将密钥名称包装在<code>strong</code>标记中。
|
||||
- text: 你的代码应该将键名包装在<code>strong</code>标签中。
|
||||
testString: assert(code.match(/<strong>.+<\/strong>/g));
|
||||
|
||||
```
|
||||
@ -35,24 +71,24 @@ tests:
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
// Add your code below this line
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
// 在这行上面添加代码
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
@ -79,6 +115,78 @@ tests:
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
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>";
|
||||
});
|
||||
// Add your code above this line
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
@ -88,20 +196,6 @@ tests:
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
/section>
|
||||
|
||||
@ -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
|
||||
<section id="description">您可以做的另一件很酷的事情是访问您用户的当前位置。每个浏览器都有一个内置的导航器，可以为您提供此信息。导航器将获得用户当前的经度和纬度。您将看到允许或阻止此站点了解您当前位置的提示。只要代码正确，挑战就可以以任何一种方式完成。通过选择允许，您将看到输出手机上的文本更改为您的纬度和经度。这是执行此操作的代码： <blockquote> if（navigator.geolocation）{ <br> navigator.geolocation.getCurrentPosition（function（position）{ <br> document.getElementById（'data'）。innerHTML =“latitude：”+ position.coords.latitude +“<br>经度：”+ position.coords.longitude; <br> }）; <br> } </blockquote>首先，它检查<code>navigator.geolocation</code>对象是否存在。如果是，则调用该对象上的<code>getCurrentPosition</code>方法，该方法启动对用户位置的异步请求。如果请求成功，则运行方法中的回调函数。此函数使用点表示法访问<code>position</code>对象的纬度和经度值，并更新HTML。 </section>
|
||||
<section id='description'>
|
||||
你还能做一件很酷的事就是访问你用户当前的地理位置，每个浏览器都有内置的导航器，可以为你提供这些信息。
|
||||
导航器会获取用户当前的经度和纬度。
|
||||
您将看到允许或阻止此站点了解您当前位置的提示。只要代码正确，挑战就可以以任何一种方式完成。
|
||||
通过选择允许，你将看到输出手机上的文本更改为你的纬度和经度
|
||||
这是执行此操作的代码：
|
||||
|
||||
```js
|
||||
if (navigator.geolocation){
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
document.getElementById('data').innerHTML="latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
首先，它检查<code>navigator.geolocation</code>对象是否存在。如果是，<code>getCurrentPosition</code>则调用该对象上的方法，该方法启动对用户位置的异步请求。如果请求成功，则运行方法中的回调函数。此函数<code>position</code>使用点表示法访问对象的纬度和经度值，并更新页面。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>script</code>标记内添加示例代码以检查用户的当前位置并将其插入HTML。 </section>
|
||||
<section id='instructions'>
|
||||
在<code>script</code>标记内添加示例代码以检查用户的当前位置并将其插入 HTML
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应使用<code>navigator.geolocation</code>来访问用户的当前位置。
|
||||
- text: 你的代码应该用于<code>navigator.geolocation</code>访问用户的当前位置。
|
||||
testString: assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
|
||||
- text: 您的代码应使用<code>position.coords.latitude</code>来显示用户的纬度位置。
|
||||
- text: 你的代码应该用于<code>position.coords.latitude</code>显示用户的纬度位置。
|
||||
testString: assert(code.match(/position\.coords\.latitude/g));
|
||||
- text: 您的代码应使用<code>position.coords.longitude</code>来显示用户的纵向位置。
|
||||
- text: 你的代码应该用于<code>position.coords.longitude</code>显示用户的经度位置。
|
||||
testString: assert(code.match(/position\.coords\.longitude/g));
|
||||
- text: 您应该在<code>data</code> div元素中显示用户的位置。
|
||||
- text: 你应该在<code>data</code>div 元素中显示用户的位置。
|
||||
testString: assert(code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g));
|
||||
|
||||
```
|
||||
@ -37,16 +55,15 @@ tests:
|
||||
|
||||
```html
|
||||
<script>
|
||||
// Add your code below this line
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
// 在这行上面添加代码
|
||||
</script>
|
||||
<h4>You are here:</h4>
|
||||
<div id="data">
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -58,8 +75,19 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
```html
|
||||
<script>
|
||||
// Add your code below this line
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
document.getElementById('data').innerHTML = "latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
|
||||
});
|
||||
}
|
||||
// Add your code above this line
|
||||
</script>
|
||||
<h4>You are here:</h4>
|
||||
<div id="data">
|
||||
|
||||
/section>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@ -0,0 +1,168 @@
|
||||
---
|
||||
id: 5ccfad82bb2dc6c965a848e5
|
||||
title: Get JSON with the JavaScript fetch method
|
||||
challengeType: 6
|
||||
forumTopicId: 301501
|
||||
localeTitle: 使用 JavaScript 的 fetch 方法获取 JSON
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
请求外部数据的另一个方法是使用 JavaScript 的 <code>fetch()</code> 方法。它的作用和 XMLHttpRequest 一致，但是语法更易理解。
|
||||
下面是使用 GET 请求 <code>/json/cats.json</code> 数据的例子。
|
||||
|
||||
```js
|
||||
|
||||
fetch('/json/cats.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('message').innerHTML = JSON.stringify(data);
|
||||
})
|
||||
|
||||
```
|
||||
逐行解释一下代码。
|
||||
|
||||
第一行是发起请求。也就是说，<code>fetch(URL)</code> 向指定的 URL 发起 GET 请求。方法返回一个 Promise。
|
||||
|
||||
当 Promise 返回后，如果请求成功，会执行 <code>then</code> 方法，该方法把响应转换为 JSON 格式。
|
||||
|
||||
<code>then</code> 方法返回的也是 Promise，会被下一个 <code>then</code> 方法捕获。第二个 <code>then</code> 方法传入的参数就是最终的 JSON 对象。
|
||||
|
||||
接着，使用 <code>document.getElementById()</code> 选择将要接收数据的元素。然后插入请求返回的 JSON 对象创建的字符串修改元素的 HTML 代码。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
更新代码，创建一个 "GET" 请求向 freeCodeCamp Cat Photo API 请求数据。这次使用 <code>fetch</code> 方法而不是 <code>XMLHttpRequest</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 应该使用 <code>fetch</code> 来发起 GET 请求。
|
||||
testString: assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));
|
||||
- text: 应该在 <code>then</code> 里面将响应转换为 JSON。
|
||||
testString: assert(code.match(/\.then\s*\(\s*(response|\(\s*response\s*\))\s*=>\s*response\s*\.json\s*\(\s*\)\s*\)/g))
|
||||
- text: 应该使用另一个 <code>then</code> 接收 <code>then</code> 转换的 JSON。
|
||||
testString: assert(code.match(/\.then\s*\(\s*(data|\(\s*data\s*\))\s*=>\s*{[^}]*}\s*\)/g))
|
||||
- text: 代码应该选择 id 为 <code>message</code> 的元素然后把它的内部 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));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick= () => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p id="message" class="box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick= () => {
|
||||
fetch('/json/cats.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('message').innerHTML=JSON.stringify(data);
|
||||
})
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p id="message" class="box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -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
|
||||
<section id="description">您还可以从外部源请求数据。这就是API发挥作用的地方。请记住，API（或应用程序编程接口）是计算机用来相互通信的工具。您将学习如何使用我们从API获得的数据使用称为AJAX的技术更新HTML。大多数Web API以称为JSON的格式传输数据。 JSON代表JavaScript Object Notation。 JSON语法看起来与JavaScript对象文字表示法非常相似。 JSON具有对象属性及其当前值，夹在<code>{</code>和<code>}</code> 。这些属性及其值通常称为“键值对”。但是，API传输的JSON以<code>bytes</code>形式发送，应用程序将其作为<code>string</code>接收。这些可以转换为JavaScript对象，但默认情况下它们不是JavaScript对象。 <code>JSON.parse</code>方法解析字符串并构造它描述的JavaScript对象。您可以从freeCodeCamp的Cat Photo API请求JSON。以下是您可以在点击事件中添加的代码： <blockquote> req = new XMLHttpRequest（）; <br> req.open（ “GET”， '/ JSON / cats.json'，TRUE）; <br> req.send（）; <br> req.onload =函数（）{ <br> JSON = JSON.parse（req.responseText）; <br> document.getElementsByClassName（ '信息'）[0] = .innerHTML JSON.stringify（JSON）; <br> }; </blockquote>这是对每件作品的评论。 JavaScript <code>XMLHttpRequest</code>对象具有许多用于传输数据的属性和方法。首先，创建<code>XMLHttpRequest</code>对象的实例并将其保存在<code>req</code>变量中。接下来， <code>open</code>方法初始化一个请求 - 这个例子是从API请求数据，因此是一个“GET”请求。 <code>open</code>的第二个参数是您从中请求数据的API的URL。第三个参数是布尔值，其中<code>true</code>使其成为异步请求。 <code>send</code>方法发送请求。最后， <code>onload</code>事件处理程序解析返回的数据并应用<code>JSON.stringify</code>方法将JavaScript对象转换为字符串。然后将此字符串作为消息文本插入。 </section>
|
||||
<section id='description'>
|
||||
你还可以从外部链接请求数据，这就是 API 发挥作用的地方。
|
||||
请记住，API（或叫应用程序编程接口）是计算机用来互相通信的工具。你将学习如何通过 AJAX技术 从 API 获得的数据来更新 HTML。
|
||||
大部分 web APIs 以 JSON 格式传输数据。JSON 是 JavaScript Object Notation 的简写。
|
||||
JSON 语法与 JavaScript 对象字面符号非常相似，JSON 具有对象属性以及其当前值，夹在<code>{</code> 和 <code>}</code>之间。
|
||||
这些属性及其值通常称为 "键值对"。
|
||||
但是，JSON 是由 API 以<code>bytes</code> 形式传输的，你的程序以<code>string</code>接受它。它们能转换成为 JavaScript 对象，但默认情况下它们不是 JavaScript 对象。 <code>JSON.parse</code>方法解析字符串并构造它描述的 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 <code>XMLHttpRequest</code> 对象具有许多用于传输数据的属性和方法。首先，创建一个<code>XMLHttpRequest</code>对象实例，并保存在<code>req</code>变量里 。
|
||||
接着, <code>open</code> 方法初始化请求 - 此示例从 API 请求数据，因此是个 "GET" 请求。第二个参数 <code>open</code> 是你要从中请求数据的 API 的 URL。第三个参数是一个布尔值， <code>true</code>使其成为异步请求。
|
||||
该<code>send</code>方法发送请求，最后，<code>onload</code>事件处理程序解析返回的数据并应用该<code>JSON.stringify</code>方法将JavaScript对象转换为字符串，然后将此字符串作为消息文本插入。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">更新代码以创建并向freeCodeCamp Cat Photo API发送“GET”请求。然后单击“获取消息”按钮。您的AJAX函数将使用API的原始JSON输出替换“消息将在此处”文本。 </section>
|
||||
<section id='instructions'>
|
||||
更新代码以创建并向 freeCodeCamp Cat Photo API 发送 "GET" 请求。然后点击 "Get Message" 按钮，你的 AJAX 函数将使用 API 的原生 JSON 替换 "The message will go here" 的文本。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该创建一个新的<code>XMLHttpRequest</code> 。
|
||||
- text: 你的代码应该创建一个新的<code>XMLHttpRequest</code>。
|
||||
testString: assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
- text: 您的代码应该使用<code>open</code>方法初始化对freeCodeCamp Cat Photo API的“GET”请求。
|
||||
- text: "你的代码应使用该<code>open</code>方法初始化对 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: 您的代码应使用<code>send</code>方法发送请求。
|
||||
- text: 你的代码应使用该<code>send</code>方法发送请求。
|
||||
testString: assert(code.match(/\.send\(\s*\)/g));
|
||||
- text: 您的代码应该有一个设置为函数的<code>onload</code>事件处理程序。
|
||||
- text: 你的代码应该有一个<code>onload</code>设置为函数的事件处理程序。
|
||||
testString: assert(code.match(/\.onload\s*=\s*(function|\(\s*?\))\s*?(\(\s*?\)|\=\>)\s*?{/g));
|
||||
- text: 您的代码应该使用<code>JSON.parse</code>方法来解析<code>responseText</code> 。
|
||||
- text: 你的代码应该使用该<code>JSON.parse</code>方法来解析<code>responseText</code>。
|
||||
testString: assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g));
|
||||
- text: 您的代码应该获取带有类<code>message</code>的元素，并将其内部HTML更改为JSON数据字符串。
|
||||
- text: 你的代码应该用<code>message</code>获取元素，并将其内部 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
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
// Add your code below this line
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
// 在这行上面添加代码
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
@ -76,8 +101,9 @@ tests:
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
@ -85,7 +111,6 @@ tests:
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -97,8 +122,58 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open('GET', '/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload = () => {
|
||||
const json = JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
|
||||
@ -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
|
||||
<section id="description">您希望代码仅在页面加载完成后执行。为此，您可以将JavaScript事件附加到名为<code>DOMContentLoaded</code>的文档中。这是执行此操作的代码： <blockquote> document.addEventListener（'DOMContentLoaded'，function（）{ <br><br> }）; </blockquote>您可以实现<code>DOMContentLoaded</code>函数内部的事件处理程序。您可以通过添加以下代码来实现<code>onclick</code>事件处理程序，该处理程序在用户单击id为<code>getMessage</code>的元素时触发： <blockquote> 。的document.getElementById（ '的getMessage'）的onclick =函数（）{}; </blockquote></section>
|
||||
<section id='description'>
|
||||
你希望代码仅在页面完成加载后执行。为此，你可将名为<code>DOMContentLoaded</code>的 JavaScript 事件附加到文档中。以下是实现的代码：
|
||||
|
||||
```js
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
你可以在<code>DOMContentLoaded</code>函数内部添加事件处理方法。你可以添加<code>onclick</code>事件处理器，当用户点击 id 为<code>getMessage</code>的元素时会触发事件。添加以下代码：
|
||||
|
||||
```js
|
||||
document.getElementById('getMessage').onclick = function(){};
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>DOMContentLoaded</code>函数内为id为<code>getMessage</code>的元素添加一个click事件处理程序。 </section>
|
||||
<section id='instructions'>
|
||||
在<code>DOMContentLoaded</code>函数内为 id 为<code>getMessage</code>的元素添加一个 click 事件处理器。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应使用<code>document.getElementById</code>方法来选择<code>getMessage</code>元素。
|
||||
- text: 你的代码应该用<code>document.getElementById</code>方法来选择<code>getMessage</code>元素。
|
||||
testString: assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
|
||||
- text: 您的代码应添加<code>onclick</code>事件处理程序。
|
||||
- text: 你的代码应该添加<code>onclick</code>事件处理器。
|
||||
testString: assert(typeof document.getElementById('getMessage').onclick === 'function');
|
||||
|
||||
```
|
||||
@ -33,13 +50,13 @@ tests:
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
// Add your code below this line
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
// 在这行上面添加代码
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
@ -67,7 +84,7 @@ tests:
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
@ -75,7 +92,6 @@ tests:
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -87,8 +103,51 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
// Add your code below this line
|
||||
document.getElementById('getMessage').onclick = function(){ };
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
|
||||
@ -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
|
||||
<section id="description">在前面的示例中，您从外部资源接收数据。您也可以将数据发送到外部资源，只要该资源支持AJAX请求并且您知道URL。 JavaScript的<code>XMLHttpRequest</code>方法也用于将数据发布到服务器。这是一个例子： <blockquote> req = new XMLHttpRequest（）; <br> req.open（ “POST”，网址，真实）; <br> req.setRequestHeader（ '内容 - 类型'， '文本/纯'）; <br> req.onreadystatechange =函数（）{ <br> if（req.readyState == 4 && req.status == 200）{ <br> document.getElementsByClassName（ '信息'）[0] = .innerHTML req.responseText; <br> } <br> }; <br> req.send（用户名）; </blockquote>你以前见过其中几种方法。这里<code>open</code>方法将请求初始化为对外部资源的给定URL的“POST”，并使用<code>true</code>布尔值使其异步。 <code>setRequestHeader</code>方法设置HTTP请求标头的值，该标头包含有关发件人和请求的信息。它必须在<code>open</code>方法之后调用，但在<code>send</code>方法之前调用。这两个参数是标题的名称和要设置为该标题正文的值。接下来， <code>onreadystatechange</code>事件侦听器处理请求状态的更改。 <code>readyState</code>为4表示操作已完成， <code>status</code>为200表示该操作成功。文档的HTML可以更新。最后， <code>send</code>方法使用<code>userName</code>值发送请求，该值由用户在<code>input</code>字段中给出。 </section>
|
||||
<section id='description'>
|
||||
在前面的示例中，你在外部资源获取数据，你也可以将数据发送到外部资源，只要该资源支持 AJAX 请求并且你知道 URL。
|
||||
JavaScript 的<code>XMLHttpRequest</code>方法也用于将数据发布到服务器，这是个例子：
|
||||
|
||||
```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);
|
||||
```
|
||||
|
||||
你在之前见过其中几种方法。这里<code>open</code>方法将请求初始化为对外部资源的给定 URL 的 "POST"，并使用<code>true</code>布尔值使其异步。
|
||||
<code>setRequestHeader</code>方法设置HTTP请求标头的值，该标头包含有关发送人和请求的信息。它必须在<code>open</code>方法之后调用，但在<code>send</code>方法之前调用。这两个参数是标题的名称和要设置为该标题正文的值。
|
||||
接下来，<code>onreadystatechange</code>事件侦听器处理请求状态的更改。<code>readyState</code>为 4 表示操作完成，<code>status</code>200表示操作成功。文档的HTML可以更新。
|
||||
最后，该<code>send</code>方法发送带有<code>userName</code>值的请求，该值由用户在<code>input</code>字段中给出。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">更新代码以创建并发送“POST”请求。然后在输入框中输入您的姓名，然后单击“发送消息”。您的AJAX功能将取代“来自服务器的回复将在这里”。与服务器的回复。在这种情况下，你的名字附加“爱猫”。 </section>
|
||||
<section id='instructions'>
|
||||
更新代码以创建并发送 "POST" 请求。然后在输入框中输入你的姓名，你的 AJAX 函数会用服务器返回的数据替换 "Reply from Server will be here"。在这种情况下，你的名字附加 " loves cats"。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该创建一个新的<code>XMLHttpRequest</code> 。
|
||||
- text: 你的代码应该创建一个新的<code>XMLHttpRequest</code>。
|
||||
testString: assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
- text: 您的代码应使用<code>open</code>方法初始化对服务器的“POST”请求。
|
||||
- text: "你的代码应该使用该<code>open</code>方法初始化到服务器的 'POST' 请求。"
|
||||
testString: assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
|
||||
- text: 您的代码应使用<code>setRequestHeader</code>方法。
|
||||
- text: 你的代码应该使用该<code>setRequestHeader</code>方法。
|
||||
testString: assert(code.match(/\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")application\/json;\s*charset=UTF-8\2\s*?\)/g));
|
||||
- text: 您的代码应该将<code>onreadystatechange</code>事件处理程序设置为函数。
|
||||
- text: 你的代码应该有一个<code>onreadystatechange</code>设置为函数的事件处理程序。
|
||||
testString: assert(code.match(/\.onreadystatechange\s*?=/g));
|
||||
- text: 您的代码应该获取带有类<code>message</code>的元素，并将其内部HTML更改为<code>responseText</code> 。
|
||||
- text: 你的代码应该使用类获取元素<code>message</code>并将其内部HTML更改为<code>responseText</code>。
|
||||
testString: assert(code.match(/document\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?.+?\.userName\s*?\+\s*?.+?\.suffix/g));
|
||||
- text: 您的代码应使用<code>send</code>方法。
|
||||
- text: 你的代码应该使用该<code>send</code>方法。
|
||||
testString: assert(code.match(/\.send\(\s*?body\s*?\)/g));
|
||||
|
||||
```
|
||||
@ -41,17 +65,19 @@ tests:
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('sendMessage').onclick=function(){
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('sendMessage').onclick = function(){
|
||||
|
||||
var userName=document.getElementById('name').value;
|
||||
// Add your code below this line
|
||||
const userName = document.getElementById('name').value;
|
||||
const url = 'https://jsonplaceholder.typicode.com/posts';
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
// 在这行上面添加代码
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
@ -78,8 +104,9 @@ tests:
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Friends</h1>
|
||||
<p class="message">
|
||||
<p class="message box">
|
||||
Reply from Server will be here
|
||||
</p>
|
||||
<p>
|
||||
@ -90,7 +117,6 @@ tests:
|
||||
Send Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -103,7 +129,68 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('sendMessage').onclick = function(){
|
||||
|
||||
const userName = document.getElementById('name').value;
|
||||
const url = 'https://jsonplaceholder.typicode.com/posts';
|
||||
// Add your code below this line
|
||||
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);
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p class="message">
|
||||
Reply from Server will be here
|
||||
</p>
|
||||
<p>
|
||||
<label for="name">Your name:
|
||||
<input type="text" id="name"/>
|
||||
</label>
|
||||
<button id="sendMessage">
|
||||
Send Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
|
||||
@ -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
|
||||
<section id="description">如果您不想渲染来自freeCodeCamp Cat Photo API的每张猫照片，您可以在循环之前预先过滤JSON。鉴于JSON数据存储在数组中，您可以使用<code>filter</code>方法过滤掉“id”键值为1的cat。以下是执行此操作的代码： <blockquote> json = json.filter（function（val）{ <br> return（val.id！== 1）; <br> }）; </blockquote></section>
|
||||
<section id='description'>
|
||||
如果你不希望渲染每张从 freeCodeCamp Cat Photo API 取回的猫照片，你可以在循环先预先过滤 JSON 数据。
|
||||
鉴于 JSON 数据都存储在数组中，你可以使用<code>filter</code>方法过滤掉 "id" 键值为 1 的猫。
|
||||
这是执行此操作的代码：
|
||||
|
||||
```js
|
||||
json = json.filter(function(val) {
|
||||
return (val.id !== 1);
|
||||
});
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">添加代码以<code>filter</code> json数据以删除“id”值为1的cat。 </section>
|
||||
<section id='instructions'>
|
||||
将<code>filter</code>代码添加到 JSON 数据中来移除 "id" 值为 1 的猫。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该使用<code>filter</code>方法。
|
||||
- text: 你的代码应该使用<code>filter</code>方法。
|
||||
testString: assert(code.match(/json\.filter/g));
|
||||
|
||||
```
|
||||
@ -31,18 +44,18 @@ tests:
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
// Add your code below this line
|
||||
let json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
// 在这行上面添加代码
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>"
|
||||
|
||||
@ -50,11 +63,12 @@ tests:
|
||||
|
||||
html += "</div>"
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
@ -81,8 +95,9 @@ tests:
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
@ -90,7 +105,6 @@ tests:
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -102,8 +116,71 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
let json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
json = json.filter(function(val) {
|
||||
return (val.id !== 1);
|
||||
});
|
||||
|
||||
// Add your code above this line
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>"
|
||||
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
|
||||
|
||||
html += "</div>"
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,32 @@
|
||||
id: 587d7fae367417b2b2512be6
|
||||
title: Render Images from Data Sources
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 从数据源渲染图像
|
||||
forumTopicId: 18265
|
||||
localeTitle: 渲染数据源的图像
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">最后几个挑战表明，JSON数组中的每个对象都包含一个<code>imageLink</code>键，其值为cat图像的URL。循环浏览这些对象时，可以使用此<code>imageLink</code>属性在<code>img</code>元素中显示此图像。这是执行此操作的代码： <code>html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";</code> </section>
|
||||
<section id='description'>
|
||||
前几个挑战中表明，JSON 数组中的每个对象都包含一个<code>imageLink</code>键，其值为猫图像的 URL。
|
||||
当你遍历这些对象的时候，你可以使用<code>imageLink</code>属性在<code>img</code>元素中显示此图像。
|
||||
这是执行此操作的代码：
|
||||
<code>html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">添加代码以在<code>img</code>标记中使用<code>imageLink</code>和<code>altText</code>属性。 </section>
|
||||
<section id='instructions'>
|
||||
添加代码以在<code>img</code>标签中使用<code>imageLink</code>和<code>altText</code>属性。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您应该使用<code>imageLink</code>属性来显示图像。
|
||||
- text: 你应该使用<code>imageLink</code>属性来显示图像。
|
||||
testString: assert(code.match(/val\.imageLink/g));
|
||||
- text: 应该用 <code>altText</code> 做为图片的 alt 属性。
|
||||
testString: assert(code.match(/val\.altText/g));
|
||||
|
||||
```
|
||||
|
||||
@ -31,20 +40,20 @@ tests:
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>";
|
||||
// Add your code below this line
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
// 在这行上面添加代码
|
||||
html += "</div><br>";
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
@ -52,6 +61,75 @@ tests:
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>";
|
||||
// Add your code below this line
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
||||
// Add your code above this line
|
||||
html += "</div><br>";
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
@ -90,17 +168,4 @@ tests:
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
/section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user