chore(learn): Applied MDX format to Chinese curriculum files (#40462)
This commit is contained in:
Randell Dawson
GitHub
@ -1,169 +1,50 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be4
|
||||
title: 访问来自 API 的 JSON 数据
|
||||
challengeType: 6
|
||||
forumTopicId: 301499
|
||||
title: 访问来自 API 的 JSON 数据
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --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>的变量中：
|
||||
|
||||
你看到在 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."
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
对于 "id" 是 2 的猫， 打印<code>codeNames</code>数组的第二个值到控制台，你应该在对象上使用括号或者点表示法（保存在变量<code>json</code>中）来访问该值。
|
||||
</section>
|
||||
对于 "id" 是 2 的猫， 打印`codeNames`数组的第二个值到控制台，你应该在对象上使用括号或者点表示法（保存在变量`json`中）来访问该值。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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));
|
||||
你的代码应该使用括号和点表示法来读取正确的代码名称，并将 'Loki' 打印到控制台。
|
||||
|
||||
```js
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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);
|
||||
// 在这行下面添加代码
|
||||
|
||||
// 在这行上面添加代码
|
||||
};
|
||||
};
|
||||
});
|
||||
</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);
|
||||
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>
|
||||
|
||||
@ -1,148 +1,35 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be2
|
||||
title: 通过单击事件更改文本
|
||||
challengeType: 6
|
||||
forumTopicId: 301500
|
||||
title: 通过单击事件更改文本
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
当点击事件发生时，你可以使用 JavaScript 更新 HTML 元素。
|
||||
例如，当用户点击 "Get Message" 按钮时，它将改变类名<code>message</code>元素的文本为 "Here is the message"。
|
||||
|
||||
例如，当用户点击 "Get Message" 按钮时，它将改变类名`message`元素的文本为 "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>元素内的文字为 "Here is the message"。
|
||||
</section>
|
||||
`document.getElementsByClassName('message')[0].textContent="Here is the message";`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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));
|
||||
在`onclick`事件处理器中添加代码，改变`message`元素内的文字为 "Here is the message"。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该使用`document.getElementsByClassName`方法来选择类名为`message`的元素，然后将其`innerHTML`改为给定文字。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.textContent\s*?=\s*?('|")Here is the message\2/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// 在这行上面添加代码
|
||||
}
|
||||
});
|
||||
</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(){
|
||||
// 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
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,16 +1,20 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be5
|
||||
title: 将 JSON 数据转换为 HTML
|
||||
challengeType: 6
|
||||
forumTopicId: 16807
|
||||
title: 将 JSON 数据转换为 HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
现在你可以从 JSON API 获取数据了，你可以在 HTML 中显示它。
|
||||
既然 cat photo 对象保存在数组里，你可以使用<code>forEach</code>方法来遍历它。当你拿到每个对象时，你就可以修改 HTML 元素了。
|
||||
首先，用<code>let html = "";</code>声明一个变量。
|
||||
接着，遍历 JSON，将 HTML 添加到用<code>strong</code>标记键名的变量，后面跟着值。当循环结束后渲染它。
|
||||
|
||||
既然 cat photo 对象保存在数组里，你可以使用`forEach`方法来遍历它。当你拿到每个对象时，你就可以修改 HTML 元素了。
|
||||
|
||||
首先，用`let html = "";`声明一个变量。
|
||||
|
||||
接着，遍历 JSON，将 HTML 添加到用`strong`标记键名的变量，后面跟着值。当循环结束后渲染它。
|
||||
|
||||
这是执行此操作的代码：
|
||||
|
||||
```js
|
||||
@ -25,12 +29,12 @@ json.forEach(function(val) {
|
||||
});
|
||||
```
|
||||
|
||||
<strong>注意：</strong> 在本挑战需要给页面添加一个新的 HTML 元素，不能使用 `textContent` 方法，这个方法容易遭受跨站脚本攻击，可以用 `innerHTML` 来完成挑战。
|
||||
</section>
|
||||
**注意：** 在本挑战需要给页面添加一个新的 HTML 元素，不能使用 `textContent` 方法，这个方法容易遭受跨站脚本攻击，可以用 `innerHTML` 来完成挑战。
|
||||
|
||||
# --instructions--
|
||||
|
||||
添加一个`forEach`循环 JSON 数据的方法，并创建 HTML 元素以显示它。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
添加一个<code>forEach</code>循环 JSON 数据的方法，并创建 HTML 元素以显示它。
|
||||
以下是一个 JSON 示例：
|
||||
|
||||
```json
|
||||
@ -45,156 +49,25 @@ json.forEach(function(val) {
|
||||
]
|
||||
```
|
||||
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的代码应该将数据保存在<code>html</code>变量中。
|
||||
testString: assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g));
|
||||
- text: 你的代码应该使用<code>forEach</code>方法来遍历 API 中的 JSON 数据。
|
||||
testString: assert(code.match(/json\.forEach/g));
|
||||
- text: 你的代码应该将键名包装在<code>strong</code>标签中。
|
||||
testString: assert(code.match(/<strong>.+<\/strong>/g));
|
||||
你的代码应该将数据保存在`html`变量中。
|
||||
|
||||
```js
|
||||
assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
你的代码应该使用`forEach`方法来遍历 API 中的 JSON 数据。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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 = "";
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// 在这行上面添加代码
|
||||
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 box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```js
|
||||
assert(code.match(/json\.forEach/g));
|
||||
```
|
||||
|
||||
</div>
|
||||
你的代码应该将键名包装在`strong`标签中。
|
||||
|
||||
</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
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```js
|
||||
assert(code.match(/<strong>.+<\/strong>/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,16 +1,20 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be8
|
||||
title: 根据地理位置数据找到用户的 GPS 坐标
|
||||
challengeType: 6
|
||||
forumTopicId: 18188
|
||||
title: 根据地理位置数据找到用户的 GPS 坐标
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
你还能做一件很酷的事就是访问你用户当前的地理位置，每个浏览器都有内置的导航器，可以为你提供这些信息。
|
||||
|
||||
导航器会获取用户当前的经度和纬度。
|
||||
|
||||
您将看到允许或阻止此站点了解您当前位置的提示。只要代码正确，挑战就可以以任何一种方式完成。
|
||||
|
||||
通过选择允许，你将看到输出手机上的文本更改为你的纬度和经度
|
||||
|
||||
这是执行此操作的代码：
|
||||
|
||||
```js
|
||||
@ -21,72 +25,39 @@ if (navigator.geolocation){
|
||||
}
|
||||
```
|
||||
|
||||
首先，它检查<code>navigator.geolocation</code>对象是否存在。如果是，<code>getCurrentPosition</code>则调用该对象上的方法，该方法启动对用户位置的异步请求。如果请求成功，则运行方法中的回调函数。此函数<code>position</code>使用点表示法访问对象的纬度和经度值，并更新页面。
|
||||
</section>
|
||||
首先，它检查`navigator.geolocation`对象是否存在。如果是，`getCurrentPosition`则调用该对象上的方法，该方法启动对用户位置的异步请求。如果请求成功，则运行方法中的回调函数。此函数`position`使用点表示法访问对象的纬度和经度值，并更新页面。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>script</code>标记内添加示例代码以检查用户的当前位置并将其插入 HTML
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在`script`标记内添加示例代码以检查用户的当前位置并将其插入 HTML
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的代码应该用于<code>navigator.geolocation</code>访问用户的当前位置。
|
||||
testString: assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
|
||||
- text: 你的代码应该用于<code>position.coords.latitude</code>显示用户的纬度位置。
|
||||
testString: assert(code.match(/position\.coords\.latitude/g));
|
||||
- text: 你的代码应该用于<code>position.coords.longitude</code>显示用户的经度位置。
|
||||
testString: assert(code.match(/position\.coords\.longitude/g));
|
||||
- text: 你应该在<code>data</code>div 元素中显示用户的位置。
|
||||
testString: assert(code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g));
|
||||
# --hints--
|
||||
|
||||
你的代码应该用于`navigator.geolocation`访问用户的当前位置。
|
||||
|
||||
```js
|
||||
assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
你的代码应该用于`position.coords.latitude`显示用户的纬度位置。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// 在这行上面添加代码
|
||||
</script>
|
||||
<h4>You are here:</h4>
|
||||
<div id="data">
|
||||
|
||||
</div>
|
||||
```js
|
||||
assert(code.match(/position\.coords\.latitude/g));
|
||||
```
|
||||
|
||||
</div>
|
||||
你的代码应该用于`position.coords.longitude`显示用户的经度位置。
|
||||
|
||||
```js
|
||||
assert(code.match(/position\.coords\.longitude/g));
|
||||
```
|
||||
|
||||
你应该在`data`div 元素中显示用户的位置。
|
||||
|
||||
</section>
|
||||
```js
|
||||
assert(
|
||||
code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g)
|
||||
);
|
||||
```
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --solutions--
|
||||
|
||||
```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">
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
---
|
||||
id: 5ccfad82bb2dc6c965a848e5
|
||||
title: 使用 JavaScript 的 fetch 方法获取 JSON
|
||||
challengeType: 6
|
||||
forumTopicId: 301501
|
||||
title: 使用 JavaScript 的 fetch 方法获取 JSON
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
请求外部数据的另一个方法是使用 JavaScript 的 <code>fetch()</code> 方法。它的作用和 XMLHttpRequest 一致，但是语法更易理解。
|
||||
下面是使用 GET 请求 <code>/json/cats.json</code> 数据的例子。
|
||||
# --description--
|
||||
|
||||
请求外部数据的另一个方法是使用 JavaScript 的 `fetch()` 方法。它的作用和 XMLHttpRequest 一致，但是语法更易理解。
|
||||
|
||||
下面是使用 GET 请求 `/json/cats.json` 数据的例子。
|
||||
|
||||
```js
|
||||
|
||||
@ -19,149 +20,54 @@ fetch('/json/cats.json')
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
逐行解释一下代码。
|
||||
|
||||
第一行是发起请求。也就是说，<code>fetch(URL)</code> 向指定的 URL 发起 GET 请求。方法返回一个 Promise。
|
||||
第一行是发起请求。也就是说，`fetch(URL)` 向指定的 URL 发起 GET 请求。方法返回一个 Promise。
|
||||
|
||||
当 Promise 返回后，如果请求成功，会执行 <code>then</code> 方法，该方法把响应转换为 JSON 格式。
|
||||
当 Promise 返回后，如果请求成功，会执行 `then` 方法，该方法把响应转换为 JSON 格式。
|
||||
|
||||
<code>then</code> 方法返回的也是 Promise，会被下一个 <code>then</code> 方法捕获。第二个 <code>then</code> 方法传入的参数就是最终的 JSON 对象。
|
||||
`then` 方法返回的也是 Promise，会被下一个 `then` 方法捕获。第二个 `then` 方法传入的参数就是最终的 JSON 对象。
|
||||
|
||||
接着，使用 <code>document.getElementById()</code> 选择将要接收数据的元素。然后插入请求返回的 JSON 对象创建的字符串修改元素的 HTML 代码。
|
||||
</section>
|
||||
接着，使用 `document.getElementById()` 选择将要接收数据的元素。然后插入请求返回的 JSON 对象创建的字符串修改元素的 HTML 代码。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
更新代码，创建一个 "GET" 请求向 freeCodeCamp Cat Photo API 请求数据。这次使用 <code>fetch</code> 方法而不是 <code>XMLHttpRequest</code>。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
更新代码，创建一个 "GET" 请求向 freeCodeCamp Cat Photo API 请求数据。这次使用 `fetch` 方法而不是 `XMLHttpRequest`。
|
||||
|
||||
```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));
|
||||
# --hints--
|
||||
|
||||
应该使用 `fetch` 来发起 GET 请求。
|
||||
|
||||
```js
|
||||
assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
应该在 `then` 里面将响应转换为 JSON。
|
||||
|
||||
## 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>
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.then\s*\(\s*(response|\(\s*response\s*\))\s*=>\s*response\s*\.json\s*\(\s*\)\s*\)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
应该使用另一个 `then` 接收 `then` 转换的 JSON。
|
||||
|
||||
|
||||
|
||||
</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>
|
||||
```js
|
||||
assert(code.match(/\.then\s*\(\s*(data|\(\s*data\s*\))\s*=>\s*{[^}]*}\s*\)/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
代码应该选择 id 为 `message` 的元素然后把它的内部 HTML 改成 JSON data 的字符串。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/document\s*\.getElementById\s*\(\s*('|")message\1\s*\)\s*\.innerHTML\s*=\s*JSON\s*\.\s*stringify\s*\(\s*data\s*\)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,18 +1,24 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be3
|
||||
title: 使用 XMLHttpRequest 方法获取 JSON
|
||||
challengeType: 6
|
||||
forumTopicId: 301502
|
||||
title: 使用 XMLHttpRequest 方法获取 JSON
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
你还可以从外部链接请求数据，这就是 API 发挥作用的地方。
|
||||
|
||||
请记住，API（或叫应用程序编程接口）是计算机用来互相通信的工具。你将学习如何通过 AJAX技术 从 API 获得的数据来更新 HTML。
|
||||
|
||||
大部分 web APIs 以 JSON 格式传输数据。JSON 是 JavaScript Object Notation 的简写。
|
||||
JSON 语法与 JavaScript 对象字面符号非常相似，JSON 具有对象属性以及其当前值，夹在<code>{</code> 和 <code>}</code>之间。
|
||||
|
||||
JSON 语法与 JavaScript 对象字面符号非常相似，JSON 具有对象属性以及其当前值，夹在`{` 和 `}`之间。
|
||||
|
||||
这些属性及其值通常称为 "键值对"。
|
||||
但是，JSON 是由 API 以<code>bytes</code> 形式传输的，你的程序以<code>string</code>接受它。它们能转换成为 JavaScript 对象，但默认情况下它们不是 JavaScript 对象。 <code>JSON.parse</code>方法解析字符串并构造它描述的 JavaScript 对象。
|
||||
|
||||
但是，JSON 是由 API 以`bytes` 形式传输的，你的程序以`string`接受它。它们能转换成为 JavaScript 对象，但默认情况下它们不是 JavaScript 对象。 `JSON.parse`方法解析字符串并构造它描述的 JavaScript 对象。
|
||||
|
||||
你可以从 freeCodeCamp 的 Cat Photo API 请求 JSON，以下是你可以在点击事件中添加的代码：
|
||||
|
||||
```js
|
||||
@ -25,154 +31,59 @@ req.onload = function(){
|
||||
};
|
||||
```
|
||||
|
||||
这里介绍每行代码的作用，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>
|
||||
这里介绍每行代码的作用，JavaScript `XMLHttpRequest` 对象具有许多用于传输数据的属性和方法。首先，创建一个`XMLHttpRequest`对象实例，并保存在`req`变量里 。 接着, `open` 方法初始化请求 - 此示例从 API 请求数据，因此是个 "GET" 请求。第二个参数 `open` 是你要从中请求数据的 API 的 URL。第三个参数是一个布尔值， `true`使其成为异步请求。 该`send`方法发送请求，最后，`onload`事件处理程序解析返回的数据并应用该`JSON.stringify`方法将JavaScript对象转换为字符串，然后将此字符串作为消息文本插入。
|
||||
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
更新代码以创建并向 freeCodeCamp Cat Photo API 发送 "GET" 请求。然后点击 "Get Message" 按钮，你的 AJAX 函数将使用 API 的原生 JSON 替换 "The message will go here" 的文本。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的代码应该创建一个新的<code>XMLHttpRequest</code>。
|
||||
testString: assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
- 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>方法发送请求。
|
||||
testString: assert(code.match(/\.send\(\s*\)/g));
|
||||
- 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>。
|
||||
testString: assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g));
|
||||
- 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));
|
||||
你的代码应该创建一个新的`XMLHttpRequest`。
|
||||
|
||||
```js
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
你的代码应使用该`open`方法初始化对 freeCodeCamp Cat Photo API 的 'GET' 请求。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// 在这行上面添加代码
|
||||
};
|
||||
});
|
||||
</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>
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.open\(\s*?('|")GET\1\s*?,\s*?('|")\/json\/cats\.json\2\s*?,\s*?true\s*?\)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
你的代码应使用该`send`方法发送请求。
|
||||
|
||||
|
||||
|
||||
</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 = () => {
|
||||
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>
|
||||
```js
|
||||
assert(code.match(/\.send\(\s*\)/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
你的代码应该有一个`onload`设置为函数的事件处理程序。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.onload\s*=\s*(function|\(\s*?\))\s*?(\(\s*?\)|\=\>)\s*?{/g)
|
||||
);
|
||||
```
|
||||
|
||||
你的代码应该使用该`JSON.parse`方法来解析`responseText`。
|
||||
|
||||
```js
|
||||
assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g));
|
||||
```
|
||||
|
||||
你的代码应该用`message`获取元素，并将其内部 HTML 转换为 JSON 数据字符串。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.innerHTML\s*?=\s*?JSON\.stringify\(.+?\)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be1
|
||||
title: 使用 onclick 属性处理点击事件
|
||||
challengeType: 6
|
||||
forumTopicId: 301503
|
||||
title: 使用 onclick 属性处理点击事件
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
你希望代码仅在页面完成加载后执行。为此，你可将名为<code>DOMContentLoaded</code>的 JavaScript 事件附加到文档中。以下是实现的代码：
|
||||
# --description--
|
||||
|
||||
你希望代码仅在页面完成加载后执行。为此，你可将名为`DOMContentLoaded`的 JavaScript 事件附加到文档中。以下是实现的代码：
|
||||
|
||||
```js
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
@ -15,138 +15,29 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
```
|
||||
|
||||
你可以在<code>DOMContentLoaded</code>函数内部添加事件处理方法。你可以添加<code>onclick</code>事件处理器，当用户点击 id 为<code>getMessage</code>的元素时会触发事件。添加以下代码：
|
||||
你可以在`DOMContentLoaded`函数内部添加事件处理方法。你可以添加`onclick`事件处理器，当用户点击 id 为`getMessage`的元素时会触发事件。添加以下代码：
|
||||
|
||||
```js
|
||||
document.getElementById('getMessage').onclick = function(){};
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>DOMContentLoaded</code>函数内为 id 为<code>getMessage</code>的元素添加一个 click 事件处理器。
|
||||
</section>
|
||||
在`DOMContentLoaded`函数内为 id 为`getMessage`的元素添加一个 click 事件处理器。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的代码应该用<code>document.getElementById</code>方法来选择<code>getMessage</code>元素。
|
||||
testString: assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
|
||||
- text: 你的代码应该添加<code>onclick</code>事件处理器。
|
||||
testString: assert(typeof document.getElementById('getMessage').onclick === 'function');
|
||||
你的代码应该用`document.getElementById`方法来选择`getMessage`元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
你的代码应该添加`onclick`事件处理器。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
// 在这行下面添加代码
|
||||
|
||||
// 在这行上面添加代码
|
||||
});
|
||||
</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>
|
||||
```js
|
||||
assert(typeof document.getElementById('getMessage').onclick === 'function');
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```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>
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be9
|
||||
title: 使用 XMLHttpRequest 方法发送数据
|
||||
challengeType: 6
|
||||
forumTopicId: 301504
|
||||
title: 使用 XMLHttpRequest 方法发送数据
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
在前面的示例中，你在外部资源获取数据，你也可以将数据发送到外部资源，只要该资源支持 AJAX 请求并且你知道 URL。
|
||||
JavaScript 的<code>XMLHttpRequest</code>方法也用于将数据发布到服务器，这是个例子：
|
||||
|
||||
JavaScript 的`XMLHttpRequest`方法也用于将数据发布到服务器，这是个例子：
|
||||
|
||||
```js
|
||||
const xhr = new XMLHttpRequest();
|
||||
@ -24,172 +25,57 @@ 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>
|
||||
你在之前见过其中几种方法。这里`open`方法将请求初始化为对外部资源的给定 URL 的 "POST"，并使用`true`布尔值使其异步。 `setRequestHeader`方法设置HTTP请求标头的值，该标头包含有关发送人和请求的信息。它必须在`open`方法之后调用，但在`send`方法之前调用。这两个参数是标题的名称和要设置为该标题正文的值。 接下来，`onreadystatechange`事件侦听器处理请求状态的更改。`readyState`为 4 表示操作完成，`status`200表示操作成功。文档的HTML可以更新。 最后，该`send`方法发送带有`userName`值的请求，该值由用户在`input`字段中给出。
|
||||
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
更新代码以创建并发送 "POST" 请求。然后在输入框中输入你的姓名，你的 AJAX 函数会用服务器返回的数据替换 "Reply from Server will be here"。在这种情况下，你的名字附加 " loves cats"。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的代码应该创建一个新的<code>XMLHttpRequest</code>。
|
||||
testString: assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
- 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>方法。
|
||||
testString: assert(code.match(/\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")application\/json;\s*charset=UTF-8\2\s*?\)/g));
|
||||
- text: 你的代码应该有一个<code>onreadystatechange</code>设置为函数的事件处理程序。
|
||||
testString: assert(code.match(/\.onreadystatechange\s*?=/g));
|
||||
- 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>方法。
|
||||
testString: assert(code.match(/\.send\(\s*?body\s*?\)/g));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('sendMessage').onclick = function(){
|
||||
|
||||
const userName = document.getElementById('name').value;
|
||||
const url = 'https://jsonplaceholder.typicode.com/posts';
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// 在这行上面添加代码
|
||||
};
|
||||
});
|
||||
</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 Friends</h1>
|
||||
<p class="message box">
|
||||
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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
你的代码应该创建一个新的`XMLHttpRequest`。
|
||||
|
||||
```js
|
||||
<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>
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
你的代码应该使用该`open`方法初始化到服务器的 'POST' 请求。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
|
||||
```
|
||||
|
||||
你的代码应该使用该`setRequestHeader`方法。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")application\/json;\s*charset=UTF-8\2\s*?\)/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
你的代码应该有一个`onreadystatechange`设置为函数的事件处理程序。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.onreadystatechange\s*?=/g));
|
||||
```
|
||||
|
||||
你的代码应该使用类获取元素`message`并将其内部HTML更改为`responseText`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/document\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?.+?\.userName\s*?\+\s*?.+?\.suffix/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
你的代码应该使用该`send`方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.send\(\s*?body\s*?\)/g));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be7
|
||||
title: 预先过滤 JSON 以获得所需的数据
|
||||
challengeType: 6
|
||||
forumTopicId: 18257
|
||||
title: 预先过滤 JSON 以获得所需的数据
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
如果你不希望渲染每张从 freeCodeCamp Cat Photo API 取回的猫照片，你可以在循环先预先过滤 JSON 数据。
|
||||
鉴于 JSON 数据都存储在数组中，你可以使用<code>filter</code>方法过滤掉 "id" 键值为 1 的猫。
|
||||
|
||||
鉴于 JSON 数据都存储在数组中，你可以使用`filter`方法过滤掉 "id" 键值为 1 的猫。
|
||||
|
||||
这是执行此操作的代码：
|
||||
|
||||
```js
|
||||
@ -17,169 +19,17 @@ json = json.filter(function(val) {
|
||||
});
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
将<code>filter</code>代码添加到 JSON 数据中来移除 "id" 值为 1 的猫。
|
||||
</section>
|
||||
将`filter`代码添加到 JSON 数据中来移除 "id" 值为 1 的猫。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的代码应该使用<code>filter</code>方法。
|
||||
testString: assert(code.match(/json\.filter/g));
|
||||
你的代码应该使用`filter`方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/json\.filter/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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 = "";
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// 在这行上面添加代码
|
||||
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 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(){
|
||||
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>
|
||||
|
||||
@ -1,170 +1,37 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be6
|
||||
title: 渲染数据源的图像
|
||||
challengeType: 6
|
||||
forumTopicId: 18265
|
||||
title: 渲染数据源的图像
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
前几个挑战中表明，JSON 数组中的每个对象都包含一个<code>imageLink</code>键，其值为猫图像的 URL。
|
||||
当你遍历这些对象的时候，你可以使用<code>imageLink</code>属性在<code>img</code>元素中显示此图像。
|
||||
# --description--
|
||||
|
||||
前几个挑战中表明，JSON 数组中的每个对象都包含一个`imageLink`键，其值为猫图像的 URL。
|
||||
|
||||
当你遍历这些对象的时候，你可以使用`imageLink`属性在`img`元素中显示此图像。
|
||||
|
||||
这是执行此操作的代码：
|
||||
<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>
|
||||
`html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你应该使用<code>imageLink</code>属性来显示图像。
|
||||
testString: assert(code.match(/val\.imageLink/g));
|
||||
- text: 应该用 <code>altText</code> 做为图片的 alt 属性。
|
||||
testString: assert(code.match(/val\.altText/g));
|
||||
添加代码以在`img`标签中使用`imageLink`和`altText`属性。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该使用`imageLink`属性来显示图像。
|
||||
|
||||
```js
|
||||
assert(code.match(/val\.imageLink/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
应该用 `altText` 做为图片的 alt 属性。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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'>";
|
||||
// 在这行下面添加代码
|
||||
|
||||
|
||||
// 在这行上面添加代码
|
||||
html += "</div><br>";
|
||||
});
|
||||
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 box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```js
|
||||
assert(code.match(/val\.altText/g));
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</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;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user