chore(i8n,learn): processed translations (#41350)
* chore(i8n,learn): processed translations * fix: restore deleted test * fix: revert casing change Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
8e4ada8f2d
commit
aff0ea700d
@ -13,7 +13,7 @@ dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image
|
||||
|
||||
# --instructions--
|
||||
|
||||
选取 `body` 元素，并设置整个页面的 `background` 为 url `https://i.imgur.com/MJAkxbh.png` 的图片。
|
||||
选取 `body` 元素，并设置整个页面的 `background` 为 url `https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png` 的图片。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ dashedName: learn-about-tertiary-colors
|
||||
|
||||
下面是使用分裂补色搭配法创建的三个颜色：
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>颜色</th><th>HEX 颜色码</th></tr></thead><thead></thead><tbody><tr><td>橙色</td><td>#FF7D00</td></tr><tr><td>蓝绿色</td><td>#00FFFF</td></tr><tr><td>树莓红</td><td>#FF007D</td></tr></tbody></table>
|
||||
<table class='table table-striped'><thead><tr><th>颜色</th><th>HEX 颜色码</th></tr></thead><thead></thead><tbody><tr><td>橙色</td><td>#FF7F00</td></tr><tr><td>蓝绿色</td><td>#00FFFF</td></tr><tr><td>树莓红</td><td>#FF007F</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,13 +9,11 @@ dashedName: use-the-u-tag-to-underline-text
|
||||
|
||||
# --description--
|
||||
|
||||
你可以使用 `u` 标签来给文字添加下划线。下划线通常用来表示重要内容或需要记忆的内容。添加了 `u` 标签后，浏览器会自动给元素添加这段样式：`text-decoration: underline;`。
|
||||
你可以使用 `u` 标签来给文字添加下划线。 下划线通常用来表示重要内容或需要记忆的内容。 添加了 `u` 标签后，浏览器会自动给元素添加这段样式：`text-decoration: underline;`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 `Ph.D. students` 添加 `u` 标签。
|
||||
|
||||
**注意：**当 `u` 标签可能会被混淆为链接时，避免使用它。锚标签也有默认下划线格式。
|
||||
**注意：** 如果使用 `u` 标签添加下划线，可能混淆文本和链接，则应避免使用它。 锚标签也有默认的下划线格式。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -109,12 +107,12 @@ assert($('u').text() === 'Ph.D. students');
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D.
|
||||
students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -32,7 +32,7 @@ assert(/cat photos/gi.test($('a').text()));
|
||||
你的 `a` 元素应链接到 `https://freecatphotoapp.com`。
|
||||
|
||||
```js
|
||||
assert(/https:\/\/(www\.)?freecatphotoapp\.com/gi.test($('a').attr('href')));
|
||||
assert(/^https?:\/\/freecatphotoapp\.com\/?$/i.test($('a').attr('href')));
|
||||
```
|
||||
|
||||
确保 `a` 元素有结束标签。
|
||||
|
||||
@ -47,8 +47,7 @@ dashedName: nest-an-anchor-element-within-a-paragraph
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]').length > 0 ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]').length > 0
|
||||
$('a[href="https://freecatphotoapp.com"]').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
@ -72,8 +71,7 @@ assert($('p') && $('p').length > 2);
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]').parent().is('p') ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]').parent().is('p')
|
||||
$('a[href="https://freecatphotoapp.com"]').parent().is('p')
|
||||
);
|
||||
```
|
||||
|
||||
@ -84,11 +82,7 @@ assert(
|
||||
$('a[href="https://freecatphotoapp.com"]')
|
||||
.parent()
|
||||
.text()
|
||||
.match(/View\smore\s/gi) ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]')
|
||||
.parent()
|
||||
.text()
|
||||
.match(/View\smore\s/gi)
|
||||
.match(/View\smore\s/gi)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ flex 子元素有时不能充满整个 flex 容器， 所以我们经常需要
|
||||
|
||||
回忆一下，如果把 flex 容器设为一个行，它的子元素会从左到右逐个排列； 如果把 flex 容器设为一个列，它的子元素会从上到下逐个排列。 子元素排列的方向被称为 **main axis（主轴）**。 对于行，主轴水平贯穿每一个项目； 对于列，主轴垂直贯穿每一个项目。
|
||||
|
||||
对于如何沿主轴线排放 flex 项目，有几种选择。 关于 flex 子元素在主轴的排列方式，很常用的是 `justify-content: center;`：即 flex 子元素在 flex 容器中居中排列。 其他可选值还有：
|
||||
对于如何沿主轴线排放 flex 项目，有几种选择。 很常用的一种是 `justify-content: center;`：即 flex 子元素在 flex 容器中居中排列。 其他选择包括：
|
||||
|
||||
<ul><li><code>flex-start</code>：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置 <code>justify-content</code> 的值，那么这就是默认值。</li><li><code>flex-end</code>：从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。</li><li><code>space-between</code>：项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。</li><li><code>space-around</code>：与<code>space-between</code>相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。</li><li><code>space-evenly</code>：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。</li></ul>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: a9bd25c716030ec90084d8a1
|
||||
title: Chunky Monkey
|
||||
title: 分割数组
|
||||
challengeType: 5
|
||||
forumTopicId: 16005
|
||||
dashedName: chunky-monkey
|
||||
@ -8,11 +8,11 @@ dashedName: chunky-monkey
|
||||
|
||||
# --description--
|
||||
|
||||
Write a function that splits an array (first argument) into groups the length of `size` (second argument) and returns them as a two-dimensional array.
|
||||
请编写一个函数，该函数将一个数组（第一个参数）拆分成若干长度为 `size`（第二个参数）的子数组，并将它们作为二维数组返回。
|
||||
|
||||
# --hints--
|
||||
|
||||
`chunkArrayInGroups(["a", "b", "c", "d"], 2)` should return `[["a", "b"], ["c", "d"]]`.
|
||||
`chunkArrayInGroups(["a", "b", "c", "d"], 2)` 应返回 `[["a", "b"], ["c", "d"]]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups(['a', 'b', 'c', 'd'], 2), [
|
||||
@ -21,7 +21,7 @@ assert.deepEqual(chunkArrayInGroups(['a', 'b', 'c', 'd'], 2), [
|
||||
]);
|
||||
```
|
||||
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)` should return `[[0, 1, 2], [3, 4, 5]]`.
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)` 应返回 `[[0, 1, 2], [3, 4, 5]]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [
|
||||
@ -30,7 +30,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [
|
||||
]);
|
||||
```
|
||||
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)` should return `[[0, 1], [2, 3], [4, 5]]`.
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)` 应返回 `[[0, 1], [2, 3], [4, 5]]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [
|
||||
@ -40,7 +40,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [
|
||||
]);
|
||||
```
|
||||
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)` should return `[[0, 1, 2, 3], [4, 5]]`.
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)` 应返回 `[[0, 1, 2, 3], [4, 5]]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [
|
||||
@ -49,7 +49,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [
|
||||
]);
|
||||
```
|
||||
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)` should return `[[0, 1, 2], [3, 4, 5], [6]]`.
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)` 应返回 `[[0, 1, 2], [3, 4, 5], [6]]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [
|
||||
@ -59,7 +59,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [
|
||||
]);
|
||||
```
|
||||
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)` should return `[[0, 1, 2, 3], [4, 5, 6, 7], [8]]`.
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)` 应返回 `[[0, 1, 2, 3], [4, 5, 6, 7], [8]]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [
|
||||
@ -69,7 +69,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [
|
||||
]);
|
||||
```
|
||||
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)` should return `[[0, 1], [2, 3], [4, 5], [6, 7], [8]]`.
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)` 应返回 `[[0, 1], [2, 3], [4, 5], [6, 7], [8]]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2), [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b3
|
||||
title: Convert Celsius to Fahrenheit
|
||||
title: 将摄氏度转换为华氏度
|
||||
challengeType: 1
|
||||
forumTopicId: 16806
|
||||
dashedName: convert-celsius-to-fahrenheit
|
||||
@ -8,43 +8,43 @@ dashedName: convert-celsius-to-fahrenheit
|
||||
|
||||
# --description--
|
||||
|
||||
The algorithm to convert from Celsius to Fahrenheit is the temperature in Celsius times `9/5`, plus `32`.
|
||||
将摄氏度转换为华氏度的计算方式为：摄氏度乘以 `9/5` 然后加上 `32`。
|
||||
|
||||
You are given a variable `celsius` representing a temperature in Celsius. Use the variable `fahrenheit` already defined and assign it the Fahrenheit temperature equivalent to the given Celsius temperature. Use the algorithm mentioned above to help convert the Celsius temperature to Fahrenheit.
|
||||
输入参数 `celsius` 代表一个摄氏度的温度。 使用已定义的变量 `fahrenheit`，并赋值为相应的华氏度的温度值。 根据上述转换公式来进行转换。
|
||||
|
||||
# --hints--
|
||||
|
||||
`convertToF(0)` should return a number
|
||||
`convertToF(0)` 应返回一个数字。
|
||||
|
||||
```js
|
||||
assert(typeof convertToF(0) === 'number');
|
||||
```
|
||||
|
||||
`convertToF(-30)` should return a value of `-22`
|
||||
`convertToF(-30)` 应返回 `-22`。
|
||||
|
||||
```js
|
||||
assert(convertToF(-30) === -22);
|
||||
```
|
||||
|
||||
`convertToF(-10)` should return a value of `14`
|
||||
`convertToF(-10)` 应返回 `14`。
|
||||
|
||||
```js
|
||||
assert(convertToF(-10) === 14);
|
||||
```
|
||||
|
||||
`convertToF(0)` should return a value of `32`
|
||||
`convertToF(0)` 应返回 `32`。
|
||||
|
||||
```js
|
||||
assert(convertToF(0) === 32);
|
||||
```
|
||||
|
||||
`convertToF(20)` should return a value of `68`
|
||||
`convertToF(20)` 应返回 `68`。
|
||||
|
||||
```js
|
||||
assert(convertToF(20) === 68);
|
||||
```
|
||||
|
||||
`convertToF(30)` should return a value of `86`
|
||||
`convertToF(30)` 应返回 `86`。
|
||||
|
||||
```js
|
||||
assert(convertToF(30) === 86);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: adf08ec01beb4f99fc7a68f2
|
||||
title: Falsy Bouncer
|
||||
title: 过滤数组中的假值
|
||||
challengeType: 5
|
||||
forumTopicId: 16014
|
||||
dashedName: falsy-bouncer
|
||||
@ -8,33 +8,33 @@ dashedName: falsy-bouncer
|
||||
|
||||
# --description--
|
||||
|
||||
Remove all falsy values from an array.
|
||||
从数组中移除所有假值（falsy values）。
|
||||
|
||||
Falsy values in JavaScript are `false`, `null`, `0`, `""`, `undefined`, and `NaN`.
|
||||
JavaScript 中的假值有 `false`、`null`、`0`、`""`、`undefined`、`NaN`。
|
||||
|
||||
Hint: Try converting each value to a Boolean.
|
||||
提示：可以考虑将每个值都转换为布尔值（boolean）。
|
||||
|
||||
# --hints--
|
||||
|
||||
`bouncer([7, "ate", "", false, 9])` should return `[7, "ate", 9]`.
|
||||
`bouncer([7, "ate", "", false, 9])` 应返回 `[7, "ate", 9]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(bouncer([7, 'ate', '', false, 9]), [7, 'ate', 9]);
|
||||
```
|
||||
|
||||
`bouncer(["a", "b", "c"])` should return `["a", "b", "c"]`.
|
||||
`bouncer(["a", "b", "c"])` 应返回 `["a", "b", "c"]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(bouncer(['a', 'b', 'c']), ['a', 'b', 'c']);
|
||||
```
|
||||
|
||||
`bouncer([false, null, 0, NaN, undefined, ""])` should return `[]`.
|
||||
`bouncer([false, null, 0, NaN, undefined, ""])` 应返回 `[]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(bouncer([false, null, 0, NaN, undefined, '']), []);
|
||||
```
|
||||
|
||||
`bouncer([null, NaN, 1, 2, undefined])` should return `[1, 2]`.
|
||||
`bouncer([null, NaN, 1, 2, undefined])` 应返回 `[1, 2]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(bouncer([null, NaN, 1, 2, undefined]), [1, 2]);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: a789b3483989747d63b0e427
|
||||
title: Return Largest Numbers in Arrays
|
||||
title: 找出多个数组中的最大数字
|
||||
challengeType: 5
|
||||
forumTopicId: 16042
|
||||
dashedName: return-largest-numbers-in-arrays
|
||||
@ -8,13 +8,13 @@ dashedName: return-largest-numbers-in-arrays
|
||||
|
||||
# --description--
|
||||
|
||||
Return an array consisting of the largest number from each provided sub-array. For simplicity, the provided array will contain exactly 4 sub-arrays.
|
||||
请返回一个数组，该数组由参数中每个子数组中的最大数字组成。 为简单起见，给出的数组总会包含 4 个子数组。
|
||||
|
||||
Remember, you can iterate through an array with a simple for loop, and access each member with array syntax `arr[i]`.
|
||||
别忘了，你可以通过 for 循环遍历一个数组，并用 `arr[i]` 的写法来访问数组中的元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
`largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])` should return an array.
|
||||
`largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])` 应返回一个数组。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -27,7 +27,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])` should return `[27, 5, 39, 1001]`.
|
||||
`largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])` 应返回 `[27, 5, 39, 1001]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
@ -41,7 +41,7 @@ assert.deepEqual(
|
||||
);
|
||||
```
|
||||
|
||||
`largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])` should return `[9, 35, 97, 1000000]`.
|
||||
`largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])` 应返回 `[9, 35, 97, 1000000]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
@ -55,7 +55,7 @@ assert.deepEqual(
|
||||
);
|
||||
```
|
||||
|
||||
`largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])` should return `[25, 48, 21, -3]`.
|
||||
`largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])` 应返回 `[25, 48, 21, -3]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 579e2a2c335b9d72dd32e05c
|
||||
title: Slice and Splice
|
||||
title: Slice 与 Splice
|
||||
challengeType: 5
|
||||
forumTopicId: 301148
|
||||
dashedName: slice-and-splice
|
||||
@ -8,29 +8,29 @@ dashedName: slice-and-splice
|
||||
|
||||
# --description--
|
||||
|
||||
You are given two arrays and an index.
|
||||
本挑战的输入参数为两个数组和一个索引值。
|
||||
|
||||
Copy each element of the first array into the second array, in order.
|
||||
将第一个数组中的所有元素依次复制到第二个数组中。
|
||||
|
||||
Begin inserting elements at index `n` of the second array.
|
||||
请注意，你需要从第二个数组索引值为 `n` 的地方开始插入。
|
||||
|
||||
Return the resulting array. The input arrays should remain the same after the function runs.
|
||||
最后，请返回插入元素后的数组。 作为输入参数的两个数组在函数执行前后应保持不变。
|
||||
|
||||
# --hints--
|
||||
|
||||
`frankenSplice([1, 2, 3], [4, 5], 1)` should return `[4, 1, 2, 3, 5]`.
|
||||
`frankenSplice([1, 2, 3], [4, 5], 1)` 应返回 `[4, 1, 2, 3, 5]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(frankenSplice([1, 2, 3], [4, 5], 1), [4, 1, 2, 3, 5]);
|
||||
```
|
||||
|
||||
`frankenSplice([1, 2], ["a", "b"], 1)` should return `["a", 1, 2, "b"]`.
|
||||
`frankenSplice([1, 2], ["a", "b"], 1)` 应返回 `["a", 1, 2, "b"]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(frankenSplice(testArr1, testArr2, 1), ['a', 1, 2, 'b']);
|
||||
```
|
||||
|
||||
`frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2)` should return `["head", "shoulders", "claw", "tentacle", "knees", "toes"]`.
|
||||
`frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2)` 应返回 `["head", "shoulders", "claw", "tentacle", "knees", "toes"]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
@ -43,20 +43,20 @@ assert.deepEqual(
|
||||
);
|
||||
```
|
||||
|
||||
All elements from the first array should be added to the second array in their original order.
|
||||
第一个数组中的所有元素都应按原始顺序添加到第二个数组中。
|
||||
|
||||
```js
|
||||
assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4]);
|
||||
```
|
||||
|
||||
The first array should remain the same after the function runs.
|
||||
函数运行后，第一个数组应保持不变。
|
||||
|
||||
```js
|
||||
frankenSplice(testArr1, testArr2, 1);
|
||||
assert.deepEqual(testArr1, [1, 2]);
|
||||
```
|
||||
|
||||
The second array should remain the same after the function runs.
|
||||
函数运行后，第二个数组应保持不变。
|
||||
|
||||
```js
|
||||
frankenSplice(testArr1, testArr2, 1);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: a24c1a4622e3c05097f71d67
|
||||
title: Where do I Belong
|
||||
title: 找出元素在排序后数组中的索引
|
||||
challengeType: 5
|
||||
forumTopicId: 16094
|
||||
dashedName: where-do-i-belong
|
||||
@ -8,105 +8,105 @@ dashedName: where-do-i-belong
|
||||
|
||||
# --description--
|
||||
|
||||
Return the lowest index at which a value (second argument) should be inserted into an array (first argument) once it has been sorted. The returned value should be a number.
|
||||
数组（第一个参数）在排序后，将一个值（第二个参数）插入该数组，并使数组保持有序。返回这个新插入元素的最小索引值。 返回值应为一个数字。
|
||||
|
||||
For example, `getIndexToIns([1,2,3,4], 1.5)` should return `1` because it is greater than `1` (index 0), but less than `2` (index 1).
|
||||
例如，`getIndexToIns([1,2,3,4], 1.5)` 应该返回 `1` 因为1.5 大于 `1`（索引为 0）且小于 `2`（索引为 1）。
|
||||
|
||||
Likewise, `getIndexToIns([20,3,5], 19)` should return `2` because once the array has been sorted it will look like `[3,5,20]` and `19` is less than `20` (index 2) and greater than `5` (index 1).
|
||||
同样地，`getIndexToIns([20,3,5], 19)` 应该返回 `2`。 因为数组排序后会变成 `[3,5,20]`，而 `19` 小于 `20`（索引为 2）且大于 `5`（索引为 1）。
|
||||
|
||||
# --hints--
|
||||
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 35)` should return `3`.
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 35)` 应返回 `3`。
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([10, 20, 30, 40, 50], 35) === 3);
|
||||
```
|
||||
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 35)` should return a number.
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 35)` 应返回一个数字。
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([10, 20, 30, 40, 50], 35) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 30)` should return `2`.
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 30)` 应返回 `2`。
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([10, 20, 30, 40, 50], 30) === 2);
|
||||
```
|
||||
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 30)` should return a number.
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 30)` 应返回一个数字。
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([10, 20, 30, 40, 50], 30) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([40, 60], 50)` should return `1`.
|
||||
`getIndexToIns([40, 60], 50)` 应返回 `1`。
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([40, 60], 50) === 1);
|
||||
```
|
||||
|
||||
`getIndexToIns([40, 60], 50)` should return a number.
|
||||
`getIndexToIns([40, 60], 50)` 应返回一个数字。
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([40, 60], 50) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([3, 10, 5], 3)` should return `0`.
|
||||
`getIndexToIns([3, 10, 5], 3)` 应返回 `0`。
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([3, 10, 5], 3) === 0);
|
||||
```
|
||||
|
||||
`getIndexToIns([3, 10, 5], 3)` should return a number.
|
||||
`getIndexToIns([3, 10, 5], 3)` 应返回一个数字。
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([3, 10, 5], 3) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([5, 3, 20, 3], 5)` should return `2`.
|
||||
`getIndexToIns([5, 3, 20, 3], 5)` 应返回 `2`。
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([5, 3, 20, 3], 5) === 2);
|
||||
```
|
||||
|
||||
`getIndexToIns([5, 3, 20, 3], 5)` should return a number.
|
||||
`getIndexToIns([5, 3, 20, 3], 5)` 应返回一个数字。
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([5, 3, 20, 3], 5) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([2, 20, 10], 19)` should return `2`.
|
||||
`getIndexToIns([2, 20, 10], 19)` 应返回 `2`。
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([2, 20, 10], 19) === 2);
|
||||
```
|
||||
|
||||
`getIndexToIns([2, 20, 10], 19)` should return a number.
|
||||
`getIndexToIns([2, 20, 10], 19)` 应返回一个数字。
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([2, 20, 10], 19) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([2, 5, 10], 15)` should return `3`.
|
||||
`getIndexToIns([2, 5, 10], 15)` 应返回 `3`。
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([2, 5, 10], 15) === 3);
|
||||
```
|
||||
|
||||
`getIndexToIns([2, 5, 10], 15)` should return a number.
|
||||
`getIndexToIns([2, 5, 10], 15)` 应返回一个数字。
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([2, 5, 10], 15) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([], 1)` should return `0`.
|
||||
`getIndexToIns([], 1)`应该返回 `0`。
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([], 1) === 0);
|
||||
```
|
||||
|
||||
`getIndexToIns([], 1)` should return a number.
|
||||
`getIndexToIns([], 1)` 应返回一个数字。
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([], 1) === 'number');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b1a
|
||||
title: Access Property Names with Bracket Notation
|
||||
title: 使用方括号访问属性名称
|
||||
challengeType: 1
|
||||
forumTopicId: 301150
|
||||
dashedName: access-property-names-with-bracket-notation
|
||||
@ -8,28 +8,28 @@ dashedName: access-property-names-with-bracket-notation
|
||||
|
||||
# --description--
|
||||
|
||||
In the first object challenge we mentioned the use of bracket notation as a way to access property values using the evaluation of a variable. For instance, imagine that our `foods` object is being used in a program for a supermarket cash register. We have some function that sets the `selectedFood` and we want to check our `foods` object for the presence of that food. This might look like:
|
||||
在关于对象的第一个挑战中，我们提到可以在一对方括号中用一个变量作为属性名来访问属性的值。 假设一个超市收银台程序中有一个 `foods` 对象, 并且有一个函数会设置 `selectedFood`；如果我们需要查询 `foods` 对象中，某种食物是否存在， 可以这样实现：
|
||||
|
||||
```js
|
||||
let selectedFood = getCurrentFood(scannedItem);
|
||||
let inventory = foods[selectedFood];
|
||||
```
|
||||
|
||||
This code will evaluate the value stored in the `selectedFood` variable and return the value of that key in the `foods` object, or `undefined` if it is not present. Bracket notation is very useful because sometimes object properties are not known before runtime or we need to access them in a more dynamic way.
|
||||
上述代码会先读取 `selectedFood` 变量的值，并返回 `foods` 对象中以该值命名的属性所对应的属性值。 若没有以该值命名的属性，则会返回 `undefined`。 有时候对象的属性名在运行之前是不确定的，或者我们需要动态地访问对象的属性值。在这些场景下，方括号表示法就变得十分有用。
|
||||
|
||||
# --instructions--
|
||||
|
||||
We've defined a function, `checkInventory`, which receives a scanned item as an argument. Return the current value of the `scannedItem` key in the `foods` object. You can assume that only valid keys will be provided as an argument to `checkInventory`.
|
||||
我们已经定义了 `checkInventory` 函数，它接受一个被扫描到的商品名作为输入参数。 请让这个函数返回 `foods` 对象中，以 `scannedItem` 的值所命名的属性对应的属性值。 在本挑战中，只有合理有效的属性名会作为参数传入 `checkInventory`，因此你不需要处理参数无效的情况。
|
||||
|
||||
# --hints--
|
||||
|
||||
`checkInventory` should be a function.
|
||||
`checkInventory` 应是一个函数。
|
||||
|
||||
```js
|
||||
assert.strictEqual(typeof checkInventory, 'function');
|
||||
```
|
||||
|
||||
The `foods` object should have only the following key-value pairs: `apples: 25`, `oranges: 32`, `plums: 28`, `bananas: 13`, `grapes: 35`, `strawberries: 27`.
|
||||
`foods` 对象应只包含以下键值对：`apples: 25`、`oranges: 32`、`plums: 28`、`bananas: 13`、`grapes: 35`、`strawberries: 27`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(foods, {
|
||||
@ -42,19 +42,19 @@ assert.deepEqual(foods, {
|
||||
});
|
||||
```
|
||||
|
||||
`checkInventory("apples")` should return `25`.
|
||||
`checkInventory("apples")` 应返回 `25`。
|
||||
|
||||
```js
|
||||
assert.strictEqual(checkInventory('apples'), 25);
|
||||
```
|
||||
|
||||
`checkInventory("bananas")` should return `13`.
|
||||
`checkInventory("bananas")` 应返回 `13`。
|
||||
|
||||
```js
|
||||
assert.strictEqual(checkInventory('bananas'), 13);
|
||||
```
|
||||
|
||||
`checkInventory("strawberries")` should return `27`.
|
||||
`checkInventory("strawberries")` 应返回 `27`。
|
||||
|
||||
```js
|
||||
assert.strictEqual(checkInventory('strawberries'), 27);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1e
|
||||
title: Generate an Array of All Object Keys with Object.keys()
|
||||
title: 使用 Object.keys() 生成由对象的所有属性组成的数组
|
||||
challengeType: 1
|
||||
forumTopicId: 301160
|
||||
dashedName: generate-an-array-of-all-object-keys-with-object-keys
|
||||
@ -8,15 +8,15 @@ dashedName: generate-an-array-of-all-object-keys-with-object-keys
|
||||
|
||||
# --description--
|
||||
|
||||
We can also generate an array which contains all the keys stored in an object using the `Object.keys()` method and passing in an object as the argument. This will return an array with strings representing each property in the object. Again, there will be no specific order to the entries in the array.
|
||||
我们可以给 `Object.keys()` 方法传入一个对象作为参数，来生成包含对象所有键的数组。 这会返回一个由对象中所有属性（字符串）组成的数组。 需要注意的是，数组中元素的顺序是不确定的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Finish writing the `getArrayOfUsers` function so that it returns an array containing all the properties in the object it receives as an argument.
|
||||
请完成 `getArrayOfUsers` 函数的实现，使其返回一个由输入对象中的所有属性所组成的数组。
|
||||
|
||||
# --hints--
|
||||
|
||||
The `users` object should only contain the keys `Alan`, `Jeff`, `Sarah`, and `Ryan`
|
||||
`users` 对象应该只包含 `Alan`、`Jeff`、`Sarah`、`Ryan` 这 4 个属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -28,7 +28,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `getArrayOfUsers` function should return an array which contains all the keys in the `users` object
|
||||
`getArrayOfUsers` 函数应返回一个包含 `users` 对象中所有属性的数组。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1f
|
||||
title: Modify an Array Stored in an Object
|
||||
title: 修改存储在对象中的数组
|
||||
challengeType: 1
|
||||
forumTopicId: 301163
|
||||
dashedName: modify-an-array-stored-in-an-object
|
||||
@ -8,21 +8,21 @@ dashedName: modify-an-array-stored-in-an-object
|
||||
|
||||
# --description--
|
||||
|
||||
Now you've seen all the basic operations for JavaScript objects. You can add, modify, and remove key-value pairs, check if keys exist, and iterate over all the keys in an object. As you continue learning JavaScript you will see even more versatile applications of objects. Additionally, the Data Structures lessons located in the Coding Interview Prep section of the curriculum also cover the ES6 <dfn>Map</dfn> and <dfn>Set</dfn> objects, both of which are similar to ordinary objects but provide some additional features. Now that you've learned the basics of arrays and objects, you're fully prepared to begin tackling more complex problems using JavaScript!
|
||||
我们已经学习了 JavaScript 对象的这些基本操作： 添加、修改、移除键值对、检查某个属性是否存在、遍历对象的所有属性。 在继续学习 JavaScript 的过程中，我们会了解对象的更多用法。 另外，在之后的数据结构课程中，我们还会学习 ES6 的 <dfn>Map</dfn> 和 <dfn>Set</dfn>。 这两种数据结构与我们现在学到的对象十分类似，但它们在对象的基础上提供了一些额外的功能。 目前，我们已经学习了数组和对象的基础知识，让我们试着来用所学的知识解决一些更复杂的问题。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Take a look at the object we've provided in the code editor. The `user` object contains three keys. The `data` key contains five keys, one of which contains an array of `friends`. From this, you can see how flexible objects are as data structures. We've started writing a function `addFriend`. Finish writing it so that it takes a `user` object and adds the name of the `friend` argument to the array stored in `user.data.friends` and returns that array.
|
||||
请看一下代码编辑器中我们为你写好的对象。 `user` 对象包含 3 个属性； `data` 对象包含 5 个属性，其中包含一个叫做 `friends` 的数组。 这就是对象作为数据结构所展现出的灵活性。 我们已经写好了 `addFriend` 函数的一部分， 请你完成这个函数，使其接受一个 `user` 对象，将 `friend` 参数中的名字添加到 `user.data.friends` 数组中并返回该数组。
|
||||
|
||||
# --hints--
|
||||
|
||||
The `user` object should have `name`, `age`, and `data` keys.
|
||||
`user` 对象应该包含 `name`、`age` 和 `data` 三个属性。
|
||||
|
||||
```js
|
||||
assert('name' in user && 'age' in user && 'data' in user);
|
||||
```
|
||||
|
||||
The `addFriend` function should accept a `user` object and a `friend` string as arguments and add the friend to the array of `friends` in the `user` object.
|
||||
`addFriend` 函数应该接受一个 `user` 对象和一个 `friend` 字符串作为输入参数，并将这个字符串插入到 `user` 对象的 `friends` 数组中。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,7 +35,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`addFriend(user, "Pete")` should return `["Sam", "Kira", "Tomo", "Pete"]`.
|
||||
`addFriend(user, "Pete")` 应该返回 `["Sam", "Kira", "Tomo", "Pete"]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b19
|
||||
title: Modify an Object Nested Within an Object
|
||||
title: 修改嵌套在对象中的对象
|
||||
challengeType: 1
|
||||
forumTopicId: 301164
|
||||
dashedName: modify-an-object-nested-within-an-object
|
||||
@ -8,7 +8,7 @@ dashedName: modify-an-object-nested-within-an-object
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's take a look at a slightly more complex object. Object properties can be nested to an arbitrary depth, and their values can be any type of data supported by JavaScript, including arrays and even other objects. Consider the following:
|
||||
现在我们来看一个稍复杂的对象。 在对象中，我们也可以嵌套任意层数的对象，对象的属性值可以是 JavaScript 支持的任意类型，包括数组和其他对象。 请看以下例子：
|
||||
|
||||
```js
|
||||
let nestedObject = {
|
||||
@ -26,7 +26,7 @@ let nestedObject = {
|
||||
};
|
||||
```
|
||||
|
||||
`nestedObject` has three properties: `id` (value is a number), `date` (value is a string), and `data` (value is an object with its nested structure). While structures can quickly become complex, we can still use the same notations to access the information we need. To assign the value `10` to the `busy` property of the nested `onlineStatus` object, we use dot notation to reference the property:
|
||||
`nestedObject` 有 3 个属性：`id`（属性值为数字）、`date`（属性值为字符串）、`data`（属性值为嵌套的对象）。 虽然对象中的数据可能很复杂，我们仍能使用上一个挑战中讲到的写法来访问我们需要的信息。 如果我们想把嵌套在 `onlineStatus` 中 `busy` 的属性值改为 `10`，可以用点号表示法来这样实现：
|
||||
|
||||
```js
|
||||
nestedObject.data.onlineStatus.busy = 10;
|
||||
@ -34,11 +34,11 @@ nestedObject.data.onlineStatus.busy = 10;
|
||||
|
||||
# --instructions--
|
||||
|
||||
Here we've defined an object `userActivity`, which includes another object nested within it. Set the value of the `online` key to `45`.
|
||||
我们已经定义了一个 `userActivity` 对象，它包含了另一个对象。 请将 `online` 的属性值改为 `45`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`userActivity` should have `id`, `date` and `data` properties.
|
||||
`userActivity` 应包含 `id`、`date` 和 `data` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -46,19 +46,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`userActivity` should have a `data` key set to an object with keys `totalUsers` and `online`.
|
||||
`userActivity` 应包含 `data` 属性，其属性值应为包含 `totalUsers` 和 `online` 属性的对象。
|
||||
|
||||
```js
|
||||
assert('totalUsers' in userActivity.data && 'online' in userActivity.data);
|
||||
```
|
||||
|
||||
The `online` property nested in the `data` key of `userActivity` should be set to `45`
|
||||
`userActivity` 的 `data` 属性值中的 `online` 属性值应被改为 `45`。
|
||||
|
||||
```js
|
||||
assert(userActivity.data.online === 45);
|
||||
```
|
||||
|
||||
The `online` property should be set using dot or bracket notation.
|
||||
应使用点号表示法或方括号表示法来修改 `online` 属性值。
|
||||
|
||||
```js
|
||||
assert.strictEqual(code.search(/online: 45/), -1);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b1b
|
||||
title: Use the delete Keyword to Remove Object Properties
|
||||
title: 使用 delete 关键字删除对象属性
|
||||
challengeType: 1
|
||||
forumTopicId: 301168
|
||||
dashedName: use-the-delete-keyword-to-remove-object-properties
|
||||
@ -8,11 +8,11 @@ dashedName: use-the-delete-keyword-to-remove-object-properties
|
||||
|
||||
# --description--
|
||||
|
||||
Now you know what objects are and their basic features and advantages. In short, they are key-value stores which provide a flexible, intuitive way to structure data, ***and***, they provide very fast lookup time. Throughout the rest of these challenges, we will describe several common operations you can perform on objects so you can become comfortable applying these useful data structures in your programs.
|
||||
现在我们已经学习了什么是对象以及对象的基本特性和用途。 总之，对象是以键值对的形式，灵活、直观地存储结构化数据的一种方式，***而且***，通过对象的属性查找属性值是速度很快的操作。 在本章余下的挑战中，我们来了解一下对象的几种常用操作，这样你能更好地在代码中使用这个十分有用的数据结构：对象。
|
||||
|
||||
In earlier challenges, we have both added to and modified an object's key-value pairs. Here we will see how we can *remove* a key-value pair from an object.
|
||||
在之前的挑战中，我们已经试过添加和修改对象中的键值对。 现在我们来看看如何从一个对象中*移除*一个键值对。
|
||||
|
||||
Let's revisit our `foods` object example one last time. If we wanted to remove the `apples` key, we can remove it by using the `delete` keyword like this:
|
||||
我们再来回顾一下上一个挑战中的 `foods` 对象。 如果我们想移除 `apples` 属性，可以像这样使用 `delete` 关键字：
|
||||
|
||||
```js
|
||||
delete foods.apples;
|
||||
@ -20,11 +20,11 @@ delete foods.apples;
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the delete keyword to remove the `oranges`, `plums`, and `strawberries` keys from the `foods` object.
|
||||
请使用 delete 关键字来移除 `foods` 中的 `oranges`、`plums` 和 `strawberries` 属性。
|
||||
|
||||
# --hints--
|
||||
|
||||
The `foods` object should only have three keys: `apples`, `grapes`, and `bananas`.
|
||||
`foods` 对象应只包含 3 个属性：`apples`、`grapes` 和 `bananas`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,7 +35,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `oranges`, `plums`, and `strawberries` keys should be removed using `delete`.
|
||||
应使用 `delete` 关键字来移除 `oranges`、`plums` 和 `strawberries` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244c3
|
||||
title: Assignment with a Returned Value
|
||||
title: 使用返回值赋值
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/ce2pEtB'
|
||||
forumTopicId: 16658
|
||||
@ -9,27 +9,27 @@ dashedName: assignment-with-a-returned-value
|
||||
|
||||
# --description--
|
||||
|
||||
If you'll recall from our discussion of [Storing Values with the Assignment Operator](/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator), everything to the right of the equal sign is resolved before the value is assigned. This means we can take the return value of a function and assign it to a variable.
|
||||
如果你还记得我们在[使用赋值运算符存储值](/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator)中的讨论的话，等号右侧的所有操作都会在赋值之前完成。 这意味着我们可以获取函数的返回值，并将其赋值给一个变量。
|
||||
|
||||
Assume we have pre-defined a function `sum` which adds two numbers together, then:
|
||||
假设我们有一个预先定义的函数 `sum` ，它将两个数相加，然后：
|
||||
|
||||
`ourSum = sum(5, 12);`
|
||||
|
||||
will call `sum` function, which returns a value of `17` and assigns it to `ourSum` variable.
|
||||
将会调用函数 `sum`，函数返回值 `17`，然后将该值赋给变量 `ourSum`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Call the `processArg` function with an argument of `7` and assign its return value to the variable `processed`.
|
||||
调用函数 `processArg`，传入参数 `7`，并将它的返回值赋给变量 `processed`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`processed` should have a value of `2`
|
||||
`processed` 的值应为 `2`。
|
||||
|
||||
```js
|
||||
assert(processed === 2);
|
||||
```
|
||||
|
||||
You should assign `processArg` to `processed`
|
||||
你应该将 `processArg` 赋值给 `processed`。
|
||||
|
||||
```js
|
||||
assert(/processed\s*=\s*processArg\(\s*7\s*\)/.test(code));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b2
|
||||
title: Compound Assignment With Augmented Division
|
||||
title: 复合赋值之 /=
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/c2QvKT2'
|
||||
forumTopicId: 16659
|
||||
@ -9,45 +9,45 @@ dashedName: compound-assignment-with-augmented-division
|
||||
|
||||
# --description--
|
||||
|
||||
The `/=` operator divides a variable by another number.
|
||||
`/=` 操作符是让变量与另一个数相除并赋值。
|
||||
|
||||
`myVar = myVar / 5;`
|
||||
|
||||
Will divide `myVar` by `5`. This can be rewritten as:
|
||||
变量 `myVar` 等于自身除以 `5` 的值。 等价于:
|
||||
|
||||
`myVar /= 5;`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Convert the assignments for `a`, `b`, and `c` to use the `/=` operator.
|
||||
使用 `/=` 操作符对 `a`，`b` 和 `c` 实现相除赋值操作。
|
||||
|
||||
# --hints--
|
||||
|
||||
`a` should equal `4`.
|
||||
`a` 应该等于 `4`。
|
||||
|
||||
```js
|
||||
assert(a === 4);
|
||||
```
|
||||
|
||||
`b` should equal `27`.
|
||||
`b` 应该等于 `27`。
|
||||
|
||||
```js
|
||||
assert(b === 27);
|
||||
```
|
||||
|
||||
`c` should equal `3`.
|
||||
`c` 应该等于`3`。
|
||||
|
||||
```js
|
||||
assert(c === 3);
|
||||
```
|
||||
|
||||
You should use the `/=` operator for each variable.
|
||||
应该对每个变量使用 `/=` 操作符。
|
||||
|
||||
```js
|
||||
assert(code.match(/\/=/g).length === 3);
|
||||
```
|
||||
|
||||
You should not modify the code above the specified comment.
|
||||
不要修改注释上面的代码。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b1
|
||||
title: Compound Assignment With Augmented Multiplication
|
||||
title: 复合赋值之 *=
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/c83vrfa'
|
||||
forumTopicId: 16662
|
||||
@ -9,45 +9,45 @@ dashedName: compound-assignment-with-augmented-multiplication
|
||||
|
||||
# --description--
|
||||
|
||||
The `*=` operator multiplies a variable by a number.
|
||||
`*=` 操作符是让变量与一个数相乘并赋值。
|
||||
|
||||
`myVar = myVar * 5;`
|
||||
|
||||
will multiply `myVar` by `5`. This can be rewritten as:
|
||||
变量 `myVar` 等于自身与数值 `5` 相乘的值。 也可以写作这样的形式:
|
||||
|
||||
`myVar *= 5;`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Convert the assignments for `a`, `b`, and `c` to use the `*=` operator.
|
||||
使用 `*=` 操作符给 `a`，`b` 和 `c` 实现赋值相乘操作。
|
||||
|
||||
# --hints--
|
||||
|
||||
`a` should equal `25`.
|
||||
`a` 应该等于`25`。
|
||||
|
||||
```js
|
||||
assert(a === 25);
|
||||
```
|
||||
|
||||
`b` should equal `36`.
|
||||
`b` 应该等于`36`。
|
||||
|
||||
```js
|
||||
assert(b === 36);
|
||||
```
|
||||
|
||||
`c` should equal `46`.
|
||||
`c` 应该等于`46`。
|
||||
|
||||
```js
|
||||
assert(c === 46);
|
||||
```
|
||||
|
||||
You should use the `*=` operator for each variable.
|
||||
应该对每个变量使用 `*=` 操作符。
|
||||
|
||||
```js
|
||||
assert(code.match(/\*=/g).length === 3);
|
||||
```
|
||||
|
||||
You should not modify the code above the specified comment.
|
||||
不要修改注释上面的代码。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b0
|
||||
title: Compound Assignment With Augmented Subtraction
|
||||
title: 复合赋值之 -=
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/c2Qv7AV'
|
||||
forumTopicId: 16660
|
||||
@ -9,45 +9,45 @@ dashedName: compound-assignment-with-augmented-subtraction
|
||||
|
||||
# --description--
|
||||
|
||||
Like the `+=` operator, `-=` subtracts a number from a variable.
|
||||
与 `+=` 操作符类似，`-=` 操作符用来对一个变量进行减法赋值操作。
|
||||
|
||||
`myVar = myVar - 5;`
|
||||
|
||||
will subtract `5` from `myVar`. This can be rewritten as:
|
||||
变量 `myVar` 等于自身减去 `5` 的值。 也可以写成这种形式：
|
||||
|
||||
`myVar -= 5;`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Convert the assignments for `a`, `b`, and `c` to use the `-=` operator.
|
||||
使用 `-=` 操作符对 `a`，`b` 和 `c` 实现相减赋值。
|
||||
|
||||
# --hints--
|
||||
|
||||
`a` should equal `5`.
|
||||
`a` 应该等于 `5`。
|
||||
|
||||
```js
|
||||
assert(a === 5);
|
||||
```
|
||||
|
||||
`b` should equal `-6`.
|
||||
`b` 应该等于 `-6`。
|
||||
|
||||
```js
|
||||
assert(b === -6);
|
||||
```
|
||||
|
||||
`c` should equal `2`.
|
||||
`c` 应该等于 `2`。
|
||||
|
||||
```js
|
||||
assert(c === 2);
|
||||
```
|
||||
|
||||
You should use the `-=` operator for each variable.
|
||||
应该对每个变量使用 `-=` 操作符。
|
||||
|
||||
```js
|
||||
assert(code.match(/-=/g).length === 3);
|
||||
```
|
||||
|
||||
You should not modify the code above the specified comment.
|
||||
不要修改注释上面的代码。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7123c9c443eddfaeb5bdef
|
||||
title: Declare JavaScript Variables
|
||||
title: 声明变量
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cNanrHq'
|
||||
forumTopicId: 17556
|
||||
@ -9,32 +9,32 @@ dashedName: declare-javascript-variables
|
||||
|
||||
# --description--
|
||||
|
||||
In computer science, <dfn>data</dfn> is anything that is meaningful to the computer. JavaScript provides eight different <dfn>data types</dfn> which are `undefined`, `null`, `boolean`, `string`, `symbol`, `bigint`, `number`, and `object`.
|
||||
在计算机科学中，<dfn>数据</dfn>就是一切，它对于计算机意义重大。 JavaScript 提供七种不同的<dfn>数据类型</dfn>，它们是 `undefined`（未定义）、`null`（空）、`boolean`（布尔型）、`string`（字符串）、`symbol`、`number`（数字）、`bigint`（可以表示任意大的整数）和 `object`（对象）。
|
||||
|
||||
For example, computers distinguish between numbers, such as the number `12`, and `strings`, such as `"12"`, `"dog"`, or `"123 cats"`, which are collections of characters. Computers can perform mathematical operations on a number, but not on a string.
|
||||
例如，计算机区分数字，例如 `12`，和由字符组成的字符串 `strings`，例如 `"12"`、`"dog"` 或 `"123 cats"`。 计算机可以对数字执行数学运算，但不能对字符串执行数学运算。
|
||||
|
||||
<dfn>Variables</dfn> allow computers to store and manipulate data in a dynamic fashion. They do this by using a "label" to point to the data rather than using the data itself. Any of the eight data types may be stored in a variable.
|
||||
<dfn>变量</dfn>允许计算机以一种动态的形式来存储和操作数据， 即通过操作指向数据的指针而不是数据本身来实现。 以上八种数据类型中的任何一种都可以存储到一个变量中。
|
||||
|
||||
`Variables` are similar to the x and y variables you use in mathematics, which means they're a simple name to represent the data we want to refer to. Computer `variables` differ from mathematical variables in that they can store different values at different times.
|
||||
变量非常类似于你在数学中使用的 x、y 变量，都是以一个简单命名的名称来代替我们赋值给它的数据。 计算机中的变量与数学中的变量不同的是，计算机可以在不同的时间存储不同类型的变量。
|
||||
|
||||
We tell JavaScript to create or <dfn>declare</dfn> a variable by putting the keyword `var` in front of it, like so:
|
||||
通过在变量前面使用关键字 `var`，<dfn>声明</dfn>一个变量，例如：
|
||||
|
||||
```js
|
||||
var ourName;
|
||||
```
|
||||
|
||||
creates a `variable` called `ourName`. In JavaScript we end statements with semicolons. `Variable` names can be made up of numbers, letters, and `$` or `_`, but may not contain spaces or start with a number.
|
||||
上面代码的意思是创建一个名为 `ourName` 的变量。 在 JavaScript 中我们以分号结束语句。 变量名称可以由数字、字母、美元符号 `$` 或者下划线 `_` 组成，但是不能包含空格或者以数字为开头。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the `var` keyword to create a variable called `myName`.
|
||||
使用 `var` 关键字来创建一个名为 `myName` 的变量。
|
||||
|
||||
**Hint**
|
||||
Look at the `ourName` example above if you get stuck.
|
||||
**提示：**
|
||||
如果遇到困难了，请看下 `ourName` 的例子是怎么写的。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare `myName` with the `var` keyword, ending with a semicolon
|
||||
使用 `var` 关键字定义一个变量 `myName`，并使用分号结尾。
|
||||
|
||||
```js
|
||||
assert(/var\s+myName\s*;/.test(code));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7993c9ca9feddfaeb7bdef
|
||||
title: Divide One Decimal by Another with JavaScript
|
||||
title: 两个小数相除
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cBZe9AW'
|
||||
forumTopicId: 18255
|
||||
@ -9,27 +9,27 @@ dashedName: divide-one-decimal-by-another-with-javascript
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's divide one decimal by another.
|
||||
现在让我们将一个小数除以另一个小数。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the `0.0` so that `quotient` will equal to `2.2`.
|
||||
改变数值 `0.0` 的值让变量 `quotient` 的值等于 `2.2`。
|
||||
|
||||
# --hints--
|
||||
|
||||
The variable `quotient` should equal `2.2`
|
||||
`quotient` 的值应该等于`2.2`。
|
||||
|
||||
```js
|
||||
assert(quotient === 2.2);
|
||||
```
|
||||
|
||||
You should use the `/` operator to divide 4.4 by 2
|
||||
使用 `/` 运算符将 4.4 除以 2。
|
||||
|
||||
```js
|
||||
assert(/4\.40*\s*\/\s*2\.*0*/.test(code));
|
||||
```
|
||||
|
||||
The quotient variable should only be assigned once
|
||||
quotient 变量应该只被赋值一次。
|
||||
|
||||
```js
|
||||
assert(code.match(/quotient/g).length === 1);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b5
|
||||
title: Escaping Literal Quotes in Strings
|
||||
title: 转义字符串中的引号
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/c2QvgSr'
|
||||
forumTopicId: 17568
|
||||
@ -9,31 +9,31 @@ dashedName: escaping-literal-quotes-in-strings
|
||||
|
||||
# --description--
|
||||
|
||||
When you are defining a string you must start and end with a single or double quote. What happens when you need a literal quote: `"` or `'` inside of your string?
|
||||
定义一个字符串必须要用单引号或双引号来包裹它。 那么当你的字符串里面包含引号 `"` 或者 `'` 时该怎么办呢?
|
||||
|
||||
In JavaScript, you can <dfn>escape</dfn> a quote from considering it as an end of string quote by placing a <dfn>backslash</dfn> (<code>\\</code>) in front of the quote.
|
||||
在 JavaScript 中，你可以通过在引号前面使用<dfn>反斜杠</dfn>（<code>\\</code>）来<dfn>转义</dfn>引号。
|
||||
|
||||
`var sampleStr = "Alan said, \"Peter is learning JavaScript\".";`
|
||||
|
||||
This signals to JavaScript that the following quote is not the end of the string, but should instead appear inside the string. So if you were to print this to the console, you would get:
|
||||
有了转义符号，JavaScript 就知道这个单引号或双引号并不是字符串的结尾，而是字符串内的字符。 所以，上面的字符串打印到控制台的结果为：
|
||||
|
||||
`Alan said, "Peter is learning JavaScript".`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use <dfn>backslashes</dfn> to assign a string to the `myStr` variable so that if you were to print it to the console, you would see:
|
||||
使用<dfn>反斜杠</dfn>将一个字符串赋值给变量 `myStr`，打印到控制台，输出为：
|
||||
|
||||
`I am a "double quoted" string inside "double quotes".`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use two double quotes (`"`) and four escaped double quotes (`\"`).
|
||||
你的代码中应该包含两个双引号（`"`）以及四个转义的双引号（`\"`）。
|
||||
|
||||
```js
|
||||
assert(code.match(/\\"/g).length === 4 && code.match(/[^\\]"/g).length === 2);
|
||||
```
|
||||
|
||||
Variable myStr should contain the string: `I am a "double quoted" string inside "double quotes".`
|
||||
变量 myStr 应该包含字符串 `I am a "double quoted" string inside "double quotes".`。
|
||||
|
||||
```js
|
||||
assert(/I am a "double quoted" string inside "double quotes(\."|"\.)$/.test(myStr));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: cf1111c1c12feddfaeb1bdef
|
||||
title: Generate Random Whole Numbers with JavaScript
|
||||
title: 使用 JavaScript 生成随机整数
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cRn6bfr'
|
||||
forumTopicId: 18186
|
||||
@ -9,25 +9,25 @@ dashedName: generate-random-whole-numbers-with-javascript
|
||||
|
||||
# --description--
|
||||
|
||||
It's great that we can generate random decimal numbers, but it's even more useful if we use it to generate random whole numbers.
|
||||
生成随机小数很棒，但随机数更有用的地方在于生成随机整数。
|
||||
|
||||
<ol><li>Use <code>Math.random()</code> to generate a random decimal.</li><li>Multiply that random decimal by <code>20</code>.</li><li>Use another function, <code>Math.floor()</code> to round the number down to its nearest whole number.</li></ol>
|
||||
<ol><li>用 <code>Math.random()</code> 生成一个随机小数。</li><li>把这个随机小数乘以 <code>20</code>。</li><li>用 <code>Math.floor()</code> 向下取整，获得它最近的整数。</li></ol>
|
||||
|
||||
Remember that `Math.random()` can never quite return a `1` and, because we're rounding down, it's impossible to actually get `20`. This technique will give us a whole number between `0` and `19`.
|
||||
记住 `Math.random()` 永远不会返回 `1`。同时因为我们是在向下取整，所以最终我们获得的结果不可能有 `20`。 这确保了我们获得了一个在 `0` 到 `19` 之间的整数。
|
||||
|
||||
Putting everything together, this is what our code looks like:
|
||||
把操作连缀起来，代码类似于下面：
|
||||
|
||||
`Math.floor(Math.random() * 20);`
|
||||
|
||||
We are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` function to round the value down to the nearest whole number.
|
||||
我们先调用 `Math.random()`，把它的结果乘以 20，然后把上一步的结果传给 `Math.floor()`，最终通过向下取整获得最近的整数。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use this technique to generate and return a random whole number between `0` and `9`.
|
||||
生成一个 `0` 到 `9` 之间的随机整数。
|
||||
|
||||
# --hints--
|
||||
|
||||
The result of `randomWholeNum` should be a whole number.
|
||||
`randomWholeNum` 的结果应该是一个整数。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -39,13 +39,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should use `Math.random` to generate a random number.
|
||||
需要使用 `Math.random` 生成一个随机数字。
|
||||
|
||||
```js
|
||||
assert(code.match(/Math.random/g).length >= 1);
|
||||
```
|
||||
|
||||
You should have multiplied the result of `Math.random` by 10 to make it a number that is between zero and nine.
|
||||
应该将 `Math.random` 的结果乘以 10，以生成 0 到 9 之间的随机数。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -54,7 +54,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should use `Math.floor` to remove the decimal part of the number.
|
||||
需要使用 `Math.floor` 移除数字中的小数部分。
|
||||
|
||||
```js
|
||||
assert(code.match(/Math.floor/g).length >= 1);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: cf1111c1c12feddfaeb2bdef
|
||||
title: Generate Random Whole Numbers within a Range
|
||||
title: 生成某个范围内的随机整数
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cm83yu6'
|
||||
forumTopicId: 18187
|
||||
@ -9,39 +9,39 @@ dashedName: generate-random-whole-numbers-within-a-range
|
||||
|
||||
# --description--
|
||||
|
||||
Instead of generating a random whole number between zero and a given number like we did before, we can generate a random whole number that falls within a range of two specific numbers.
|
||||
我们之前生成的随机数是在 0 到某个数之间，现在我们要生成的随机数是在两个指定的数之间。
|
||||
|
||||
To do this, we'll define a minimum number `min` and a maximum number `max`.
|
||||
我们需要定义一个最小值 `min` 和一个最大值 `max`。
|
||||
|
||||
Here's the formula we'll use. Take a moment to read it and try to understand what this code is doing:
|
||||
下面是我们将要使用的方法， 仔细看看并尝试理解这行代码到底在干嘛：
|
||||
|
||||
`Math.floor(Math.random() * (max - min + 1)) + min`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin`, and is less than or equal to `myMax`, inclusive.
|
||||
创建一个函数 `randomRange`，接收参数的范围在 `myMin` 和 `myMax`之间，返回一个在 `myMin`（包括 myMin）和 `myMax`（包括 myMax）之间的随机整数。
|
||||
|
||||
# --hints--
|
||||
|
||||
The lowest random number that can be generated by `randomRange` should be equal to your minimum number, `myMin`.
|
||||
`randomRange` 返回的随机数应该大于或等于 `myMin`。
|
||||
|
||||
```js
|
||||
assert(calcMin === 5);
|
||||
```
|
||||
|
||||
The highest random number that can be generated by `randomRange` should be equal to your maximum number, `myMax`.
|
||||
`randomRange` 返回的随机数最大值应该等于 `myMax`。
|
||||
|
||||
```js
|
||||
assert(calcMax === 15);
|
||||
```
|
||||
|
||||
The random number generated by `randomRange` should be an integer, not a decimal.
|
||||
`randomRange` 应该返回一个随机整数，而不是小数。
|
||||
|
||||
```js
|
||||
assert(randomRange(0, 1) % 1 === 0);
|
||||
```
|
||||
|
||||
`randomRange` should use both `myMax` and `myMin`, and return a random number in your range.
|
||||
`randomRange` 应该使用 `myMax` 和 `myMin`，并且返回两者之间的随机数。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244be
|
||||
title: Global Scope and Functions
|
||||
title: 全局作用域和函数
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cQM7mCN'
|
||||
forumTopicId: 18193
|
||||
@ -9,37 +9,37 @@ dashedName: global-scope-and-functions
|
||||
|
||||
# --description--
|
||||
|
||||
In JavaScript, <dfn>scope</dfn> refers to the visibility of variables. Variables which are defined outside of a function block have <dfn>Global</dfn> scope. This means, they can be seen everywhere in your JavaScript code.
|
||||
在 JavaScript 中，<dfn>作用域</dfn>涉及到变量的作用范围。 在函数外定义的变量具有 <dfn>全局</dfn> 作用域。 这意味着，具有全局作用域的变量可以在代码的任何地方被调用。
|
||||
|
||||
Variables which are used without the `var` keyword are automatically created in the `global` scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with `var`.
|
||||
这些没有使用 `var` 关键字定义的变量，会被自动创建在 `global` 作用域中，形成全局变量。 当在代码其他地方无意间定义了一个变量，刚好变量名与全局变量相同，这时会产生意想不到的后果。 因此你应该总是使用 `var` 关键字来声明你的变量。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Using `var`, declare a global variable named `myGlobal` outside of any function. Initialize it with a value of `10`.
|
||||
使用 `var`，在函数外声明一个全局变量 `myGlobal`， 并给它一个初始值 `10`。
|
||||
|
||||
Inside function `fun1`, assign `5` to `oopsGlobal` ***without*** using the `var` keyword.
|
||||
在函数 `fun1` 的内部，***不***使用 `var` 关键字，声明 `oopsGlobal`，并给它赋值为 `5`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`myGlobal` should be defined
|
||||
应定义 `myGlobal`。
|
||||
|
||||
```js
|
||||
assert(typeof myGlobal != 'undefined');
|
||||
```
|
||||
|
||||
`myGlobal` should have a value of `10`
|
||||
`myGlobal` 的值应为 `10`。
|
||||
|
||||
```js
|
||||
assert(myGlobal === 10);
|
||||
```
|
||||
|
||||
`myGlobal` should be declared using the `var` keyword
|
||||
应使用 `var` 关键字定义 `myGlobal`。
|
||||
|
||||
```js
|
||||
assert(/var\s+myGlobal/.test(code));
|
||||
```
|
||||
|
||||
`oopsGlobal` should be a global variable and have a value of `5`
|
||||
`oopsGlobal` 应为全局变量，值为 `5`。
|
||||
|
||||
```js
|
||||
assert(typeof oopsGlobal != 'undefined' && oopsGlobal === 5);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244a9
|
||||
title: Initializing Variables with the Assignment Operator
|
||||
title: 使用赋值运算符初始化变量
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cWJ4Bfb'
|
||||
forumTopicId: 301171
|
||||
@ -9,19 +9,19 @@ dashedName: initializing-variables-with-the-assignment-operator
|
||||
|
||||
# --description--
|
||||
|
||||
It is common to <dfn>initialize</dfn> a variable to an initial value in the same line as it is declared.
|
||||
通常在声明变量的时候会给变量<dfn>初始化</dfn>一个初始值。
|
||||
|
||||
`var myVar = 0;`
|
||||
|
||||
Creates a new variable called `myVar` and assigns it an initial value of `0`.
|
||||
创建一个名为 `myVar` 的变量，并指定其初始值 `0`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Define a variable `a` with `var` and initialize it to a value of `9`.
|
||||
通过关键字 `var` 定义一个变量 `a`，并给它一个初始值 `9`。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should initialize `a` to a value of `9`.
|
||||
你需要初始化 `a` 的值为 `9`。
|
||||
|
||||
```js
|
||||
assert(/var\s+a\s*=\s*9(\s*;?\s*)$/.test(code));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b85367417b2b2512b3a
|
||||
title: Catch Arguments Passed in the Wrong Order When Calling a Function
|
||||
title: 调用函数时，捕获以错误顺序传递的参数
|
||||
challengeType: 1
|
||||
forumTopicId: 301184
|
||||
dashedName: catch-arguments-passed-in-the-wrong-order-when-calling-a-function
|
||||
@ -8,21 +8,21 @@ dashedName: catch-arguments-passed-in-the-wrong-order-when-calling-a-function
|
||||
|
||||
# --description--
|
||||
|
||||
Continuing the discussion on calling functions, the next bug to watch out for is when a function's arguments are supplied in the incorrect order. If the arguments are different types, such as a function expecting an array and an integer, this will likely throw a runtime error. If the arguments are the same type (all integers, for example), then the logic of the code won't make sense. Make sure to supply all required arguments, in the proper order to avoid these issues.
|
||||
继续讨论调用函数，需要注意的下一个 bug 是函数的参数传递顺序错误。 如果参数分别是不同的类型，例如接受数组和整数两个参数的函数，参数顺序传错就可能会引发运行时错误。 对于接受相同类型参数的函数，传错参数也会导致逻辑错误或运行结果错误。 确保以正确的顺序提供所有必需的参数以避免这些问题。
|
||||
|
||||
# --instructions--
|
||||
|
||||
The function `raiseToPower` raises a base to an exponent. Unfortunately, it's not called properly - fix the code so the value of `power` is the expected 8.
|
||||
函数 `raiseToPower` 返回基数 (base) 的指数 (exponent) 次幂。 不幸的是，它没有被正确调用 — 修改代码，使`power`的值为 8。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should fix the variable `power` so it equals 2 raised to the 3rd power, not 3 raised to the 2nd power.
|
||||
你应修复变量 `power`，使其等于 2 的 3 次方，而不是 3 的 2 次方。
|
||||
|
||||
```js
|
||||
assert(power == 8);
|
||||
```
|
||||
|
||||
Your code should use the correct order of the arguments for the `raiseToPower` function call.
|
||||
你调用 `raiseToPower` 函数时，传递参数的顺序应正确。
|
||||
|
||||
```js
|
||||
assert(code.match(/raiseToPower\(\s*?base\s*?,\s*?exp\s*?\);/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b84367417b2b2512b35
|
||||
title: Catch Misspelled Variable and Function Names
|
||||
title: 捕获拼错的变量名和函数名
|
||||
challengeType: 1
|
||||
forumTopicId: 301186
|
||||
dashedName: catch-misspelled-variable-and-function-names
|
||||
@ -8,41 +8,41 @@ dashedName: catch-misspelled-variable-and-function-names
|
||||
|
||||
# --description--
|
||||
|
||||
The `console.log()` and `typeof` methods are the two primary ways to check intermediate values and types of program output. Now it's time to get into the common forms that bugs take. One syntax-level issue that fast typers can commiserate with is the humble spelling error.
|
||||
`console.log()` 和 `typeof` 方法是检查中间值和程序输出类型的两种主要方法。 现在是时候了解一下 bug 出现的常见的情形。 一个语法级别的问题是打字太快带来的低级拼写错误。
|
||||
|
||||
Transposed, missing, or mis-capitalized characters in a variable or function name will have the browser looking for an object that doesn't exist - and complain in the form of a reference error. JavaScript variable and function names are case-sensitive.
|
||||
变量或函数名的错写、漏写或大小写弄混都会让浏览器尝试查找并不存在的东西，并报出“引用错误”。 JavaScript 变量和函数名称区分大小写。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Fix the two spelling errors in the code so the `netWorkingCapital` calculation works.
|
||||
修复代码中的两个拼写错误，以便 `netWorkingCapital` 计算有效。
|
||||
|
||||
# --hints--
|
||||
|
||||
Check the spelling of the two variables used in the netWorkingCapital calculation, the console output should show that "Net working capital is: 2".
|
||||
检查计算 netWorkingCapital 值时使用的两个变量的拼写是否正确，控制台应该输出 "Net working capital is: 2"。
|
||||
|
||||
```js
|
||||
assert(netWorkingCapital === 2);
|
||||
```
|
||||
|
||||
There should be no instances of mis-spelled variables in the code.
|
||||
代码中不应存在拼写错误的变量。
|
||||
|
||||
```js
|
||||
assert(!code.match(/recievables/g));
|
||||
```
|
||||
|
||||
The `receivables` variable should be declared and used properly in the code.
|
||||
应在代码中声明并正确使用 `receivables` 变量。
|
||||
|
||||
```js
|
||||
assert(code.match(/receivables/g).length == 2);
|
||||
```
|
||||
|
||||
There should be no instances of mis-spelled variables in the code.
|
||||
代码中不应存在拼写错误的变量。
|
||||
|
||||
```js
|
||||
assert(!code.match(/payable;/g));
|
||||
```
|
||||
|
||||
The `payables` variable should be declared and used properly in the code.
|
||||
应在代码中声明并正确使用 `payables` 变量。
|
||||
|
||||
```js
|
||||
assert(code.match(/payables/g).length == 2);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7168d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Bar Chart
|
||||
title: 用条形图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301464
|
||||
dashedName: visualize-data-with-a-bar-chart
|
||||
@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-bar-chart
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/GrZVaM>.
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/GrZVaM> 的 App。
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。 通过 D3 测试需要这些刻度，因为它们的位置被用来确定绘制元素的对齐方式。 你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**User Story #1:** My chart should have a title with a corresponding `id="title"`.
|
||||
**需求 #1：** 图表应该包含一个具有 `id="title"` 属性的标题。
|
||||
|
||||
**User Story #2:** My chart should have a `g` element x-axis with a corresponding `id="x-axis"`.
|
||||
**需求 #2：** 图表应该包含一个 `g` 元素作为 x 轴，并相应地具有 `id="x-axis"` 属性。
|
||||
|
||||
**User Story #3:** My chart should have a `g` element y-axis with a corresponding `id="y-axis"`.
|
||||
**需求 #3：** 图表应该包含一个 `g` 元素作为 y 轴，并相应地具有`id="y-axis"` 属性。
|
||||
|
||||
**User Story #4:** Both axes should contain multiple tick labels, each with the corresponding `class="tick"`.
|
||||
**需求 #4：** 两个轴都应包含多个刻度标签，每个标签具有 `class="tick"` 属性
|
||||
|
||||
**User Story #5:** My chart should have a `rect` element for each data point with a corresponding `class="bar"` displaying the data.
|
||||
**需求 #5：** 在图表里，每个数据点都应该有一个具有 `class="bar"` 属性的 `rect` 元素来展示数据。
|
||||
|
||||
**User Story #6:** Each bar should have the properties `data-date` and `data-gdp` containing date and GDP values.
|
||||
**需求 #6：** 每个数据条应该具有包含日期的 `data-date` 属性以及包含 GDP 值的 `data-gdp` 属性。
|
||||
|
||||
**User Story #7:** The bar elements' `data-date` properties should match the order of the provided data.
|
||||
**需求 #7：** 数据条元素的 `data-date` 属性应与提供的数据的顺序相匹配。
|
||||
|
||||
**User Story #8:** The bar elements' `data-gdp` properties should match the order of the provided data.
|
||||
**需求 #8：** 数据条元素的 `data-gdp` 属性应与提供的数据的顺序相匹配。
|
||||
|
||||
**User Story #9:** Each bar element's height should accurately represent the data's corresponding GDP.
|
||||
**需求 #9：** 每个数据条元素的高度应准确地表示其数据所对应的 GDP 值。
|
||||
|
||||
**User Story #10:** The `data-date` attribute and its corresponding bar element should align with the corresponding value on the x-axis.
|
||||
**需求 #10：** `data-date` 属性和它对应的数据条元素应与 x 轴上的相应的值对齐。
|
||||
|
||||
**User Story #11:** The `data-gdp` attribute and its corresponding bar element should align with the corresponding value on the y-axis.
|
||||
**需求 #11：** `data-gdp` 属性和它对应的数据条元素应与 y 轴上的相应的值对齐。
|
||||
|
||||
**User Story #12:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**需求 #12：** 我可以将鼠标悬停在某个区域上，并查看具有 `id="tooltip"` 属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**User Story #13:** My tooltip should have a `data-date` property that corresponds to the `data-date` of the active area.
|
||||
**需求 #13：** 提示框应该有 `data-date` 属性，它对应了当前激活区域的 `data-date` 属性。
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||||
以下是完成此项目所需的数据： `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||||
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
你可以 fork [这个 CodePen pen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bbf
|
||||
title: Visualize Data with a Choropleth Map
|
||||
title: 用等值区域图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301465
|
||||
dashedName: visualize-data-with-a-choropleth-map
|
||||
@ -8,42 +8,42 @@ dashedName: visualize-data-with-a-choropleth-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/EZKqza> 的 App。
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**User Story #1:** My choropleth should have a title with a corresponding `id="title"`.
|
||||
**需求 #1：** 等值区域图包含一个具有 `id="title"` 属性的标题。
|
||||
|
||||
**User Story #2:** My choropleth should have a description element with a corresponding `id="description"`.
|
||||
**需求 #2：** 等值区域图包含一个具有 `id="description"` 属性的描述内容。
|
||||
|
||||
**User Story #3:** My choropleth should have counties with a corresponding `class="county"` that represent the data.
|
||||
**需求 #3：** 等值区域图包含一些州县来展示数据，这些州县应该具有 `class="county"` 属性。
|
||||
|
||||
**User Story #4:** There should be at least 4 different fill colors used for the counties.
|
||||
**需求 #4：** 这些州县至少应该有 4 种不同的填充颜色。
|
||||
|
||||
**User Story #5:** My counties should each have `data-fips` and `data-education` properties containing their corresponding fips and education values.
|
||||
**需求 #5：** 每个州县都应该具有 `data-fips` 和 `data-education` 属性，分别包含他们相应的 fips 值和教育值。
|
||||
|
||||
**User Story #6:** My choropleth should have a county for each provided data point.
|
||||
**需求 #6：** 在等值区域图中，每一个提供的数据点都应该有一个对应的州县。
|
||||
|
||||
**User Story #7:** The counties should have data-fips and data-education values that match the sample data.
|
||||
**需求 #7：** 各个州县应该具有与样本数据匹配的 fips 值和教育值。
|
||||
|
||||
**User Story #8:** My choropleth should have a legend with a corresponding `id="legend"`.
|
||||
**需求 #8：** 等值区域图包含一个具有 `id="legend"` 属性的图例。
|
||||
|
||||
**User Story #9:** There should be at least 4 different fill colors used for the legend.
|
||||
**需求 #9：** 图例至少应该使用 4 种不同的填充颜色。
|
||||
|
||||
**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**需求 #10：** 将鼠标悬停在某个区域上时，可以看到具有 `id="tooltip"` 属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**User Story #11:** My tooltip should have a `data-education` property that corresponds to the `data-education` of the active area.
|
||||
**需求 #11：** 提示框应该有 `data-education` 属性，它对应了当前激活区域的 `data-education` 属性。
|
||||
|
||||
Here are the datasets you will need to complete this project:
|
||||
以下是完成此项目所需的数据集：
|
||||
|
||||
- **US Education Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **US County Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
- **US Education Data:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **US County Data:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7188d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Heat Map
|
||||
title: 用热图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301466
|
||||
dashedName: visualize-data-with-a-heat-map
|
||||
@ -8,51 +8,51 @@ dashedName: visualize-data-with-a-heat-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/JEXgeY> 的 App。
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**User Story #1:** My heat map should have a title with a corresponding `id="title"`.
|
||||
**需求 #1：** 热度图包含一个具有 `id="title"` 属性的标题。
|
||||
|
||||
**User Story #2:** My heat map should have a description with a corresponding `id="description"`.
|
||||
**需求 #2：** 热度图包含一个具有 `id="description"` 属性的描述内容。
|
||||
|
||||
**User Story #3:** My heat map should have an x-axis with a corresponding `id="x-axis"`.
|
||||
**需求 #3：** 热度图包含一个具有 `id="x-axis"` 属性的 x 轴。
|
||||
|
||||
**User Story #4:** My heat map should have a y-axis with a corresponding `id="y-axis"`.
|
||||
**需求 #4：** 热度图包含一个具有 `id="y-axis"` 属性的 y 轴。
|
||||
|
||||
**User Story #5:** My heat map should have `rect` elements with a `class="cell"` that represent the data.
|
||||
**需求 #5：** 热度图包含一些 `rect` 元素来展示数据，他们具有 `class="cell"` 属性。
|
||||
|
||||
**User Story #6:** There should be at least 4 different fill colors used for the cells.
|
||||
**需求 #6：** 这些单元格元素至少应该有 4 种不同的填充颜色。
|
||||
|
||||
**User Story #7:** Each cell will have the properties `data-month`, `data-year`, `data-temp` containing their corresponding month, year, and temperature values.
|
||||
**需求 #7：** 每个单元格元素都有这些属性 `data-month`，`data-year`，`data-temp`，包含了它们相应的月份、年份和温度值。
|
||||
|
||||
**User Story #8:** The `data-month`, `data-year` of each cell should be within the range of the data.
|
||||
**需求 #8：** 每个元素的 `data-month`、`data-year` 属性应该在数据范围内。
|
||||
|
||||
**User Story #9:** My heat map should have cells that align with the corresponding month on the y-axis.
|
||||
**需求 #9：** 热度图包含与 y 轴上的相应月份对齐的单元格。
|
||||
|
||||
**User Story #10:** My heat map should have cells that align with the corresponding year on the x-axis.
|
||||
**需求 #10：** 热度图包含与 x 轴上相应年份对齐的单元格。
|
||||
|
||||
**User Story #11:** My heat map should have multiple tick labels on the y-axis with the full month name.
|
||||
**需求 #11：** 热度图在 y 轴上有多个刻度标签，并带有完整的月份名称。
|
||||
|
||||
**User Story #12:** My heat map should have multiple tick labels on the x-axis with the years between 1754 and 2015.
|
||||
**需求 #12：** 热度图在 x 轴上有多个刻度标签，年份在 1754 到 2015 之间。
|
||||
|
||||
**User Story #13:** My heat map should have a legend with a corresponding `id="legend"`.
|
||||
**需求 #13：** 热度图包含一个具有 `id="legend"` 属性的图例。
|
||||
|
||||
**User Story #14:** My legend should contain `rect` elements.
|
||||
**需求 #14：** 图例包含一些 `rect` 元素。
|
||||
|
||||
**User Story #15:** The `rect` elements in the legend should use at least 4 different fill colors.
|
||||
**需求 #15：** 图例中的这些 `rect` 元素应该至少使用 4 种不同的填充颜色。
|
||||
|
||||
**User Story #16:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**需求 #16：** 将鼠标悬停在某个区域上时，可以看到具有 `id="tooltip"` 属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**User Story #17:** My tooltip should have a `data-year` property that corresponds to the `data-year` of the active area.
|
||||
**需求 #17：** 提示框应该有 `data-year` 属性，它对应了当前激活区域的 `data-year` 属性。
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
以下是完成此项目所需的数据：`https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7178d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Scatterplot Graph
|
||||
title: 用散点图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301467
|
||||
dashedName: visualize-data-with-a-scatterplot-graph
|
||||
@ -8,47 +8,47 @@ dashedName: visualize-data-with-a-scatterplot-graph
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/bgpXyK> 的 App。
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。 这些刻度是通过 D3 测试所必需的，因为它们的位置是用来确定图表元素的对齐方式。 你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），因为内容是动态渲染的，试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 框架目前还不支持它们。
|
||||
|
||||
**User Story #1:** I can see a title element that has a corresponding `id="title"`.
|
||||
**需求 #1：** 散点图包含一个具有 `id="title"` 属性的标题元素。
|
||||
|
||||
**User Story #2:** I can see an x-axis that has a corresponding `id="x-axis"`.
|
||||
**需求 #2：** 散点图包含一个具有 `id="x-axis"` 属性的 x 轴。
|
||||
|
||||
**User Story #3:** I can see a y-axis that has a corresponding `id="y-axis"`.
|
||||
**需求 #3：** 散点图包含一个具有 `id="y-axis"` 属性的 y 轴。
|
||||
|
||||
**User Story #4:** I can see dots, that each have a class of `dot`, which represent the data being plotted.
|
||||
**需求 #4：** 散点图包含一些点，每个点都有一个值为 `dot` 的 class 属性，它代表了被绘制的数据。
|
||||
|
||||
**User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding x and y values.
|
||||
**需求 #5：** 每个点都应具有 `data-xvalue` 属性和 `data-yvalue` 属性，对应这个点的 x 和 y 值。
|
||||
|
||||
**User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or Date objects are acceptable for test evaluation. For `data-yvalue` (minutes), use Date objects.
|
||||
**需求 #6：** 每个点的 `data-xvalue` 属性和 `data-yvalue` 属性应该在实际数据的范围内，并且数据格式应该正确无误。 对于 `data-xvalue` 属性，可以接受整数（全年）或 Date 对象进行测试评估。 对于 `data-yvalue` 属性（分钟），请使用 Date 对象。
|
||||
|
||||
**User Story #7:** The `data-xvalue` and its corresponding dot should align with the corresponding point/value on the x-axis.
|
||||
**需求 #7：** `data-xvalue` 属性和它对应的点应该和 x 轴上的点或值对齐。
|
||||
|
||||
**User Story #8:** The `data-yvalue` and its corresponding dot should align with the corresponding point/value on the y-axis.
|
||||
**需求 #8：** `data-yvalue`属性和它对应的点应该和 y 轴上的点或值对齐。
|
||||
|
||||
**User Story #9:** I can see multiple tick labels on the y-axis with `%M:%S` time format.
|
||||
**需求 #9：** 散点图的 y 轴上有多个时间格式为 `%M:%S` 的刻度标签。
|
||||
|
||||
**User Story #10:** I can see multiple tick labels on the x-axis that show the year.
|
||||
**需求 #10：** 散点图的 x 轴上有多个显示年份的刻度标签。
|
||||
|
||||
**User Story #11:** I can see that the range of the x-axis labels are within the range of the actual x-axis data.
|
||||
**需求 #11：** 散点图的 x 轴标签的范围在实际 x 轴数据的范围内。
|
||||
|
||||
**User Story #12:** I can see that the range of the y-axis labels are within the range of the actual y-axis data.
|
||||
**需求 #12：** 散点图的 y 轴标签的范围在实际 y 轴数据的范围内。
|
||||
|
||||
**User Story #13:** I can see a legend containing descriptive text that has `id="legend"`.
|
||||
**需求 #13：** 散点图包含一个包含描述性文字的图例，它具有 `id="legend"` 属性。
|
||||
|
||||
**User Story #14:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**需求 #14：** 将鼠标悬停在某个区域上时，可以看到具有 `id="tooltip"` 属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**User Story #15:** My tooltip should have a `data-year` property that corresponds to the `data-xvalue` of the active area.
|
||||
**需求 #15：** 提示框应该有 `data-year` 属性，它对应了当前激活区域的 `data-xvalue` 属性。
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
以下是完成此项目所需的数据：`https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
一旦你完成了本项目并且通过所有测试，请提交项目的 URL。
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc0
|
||||
title: Visualize Data with a Treemap Diagram
|
||||
title: 用树形图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301468
|
||||
dashedName: visualize-data-with-a-treemap-diagram
|
||||
@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-treemap-diagram
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/KaNGNR> 的 App。
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
你可以使用 HTML、JavaScript、CSS、以及基于 svg 的 D3 可视化库来完成这个挑战。 该任务需要使用 D3 的坐标轴属性生成坐标轴，这个属性会自动生成沿轴的刻度。 这些刻度是通过 D3 测试所必需的，因为它们的位置是用来确定图表元素的对齐方式。 你可以在这里 <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis> 获取关于生成坐标轴的信息。 每次测试查询的元素都必须是非虚拟 DOM。 如果你使用了前端框架（例如 Vue），那么对于动态的内容测试结果可能不准确。 我们希望最终能够兼容这些框架，但 D3 项目目前还不支持它们。
|
||||
|
||||
**User Story #1:** My tree map should have a title with a corresponding `id="title"`.
|
||||
**需求 #1：** 矩阵树图包含一个具有 `id="title"` 属性的标题。
|
||||
|
||||
**User Story #2:** My tree map should have a description with a corresponding `id="description"`.
|
||||
**需求 #2：** 矩阵树图包含一个具有 `id="description"` 属性的描述内容。
|
||||
|
||||
**User Story #3:** My tree map should have `rect` elements with a corresponding `class="tile"` that represent the data.
|
||||
**需求 #3：** 矩阵树图包含一些具有 `class="tile"` 属性的 `rect` 元素来展示数据。
|
||||
|
||||
**User Story #4:** There should be at least 2 different fill colors used for the tiles.
|
||||
**需求 #4：** 这些矩形块元素至少应该有 2 种不同的填充颜色。
|
||||
|
||||
**User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding name, category, and value.
|
||||
**需求 #5：** 每一块矩形元素应该具有 `data-name`、`data-category`、以及`data-value` 这些属性，包含了它们相应的名称，分类，以及数值。
|
||||
|
||||
**User Story #6:** The area of each tile should correspond to the data-value amount: tiles with a larger data-value should have a bigger area.
|
||||
**需求 #6：** 每个矩形块的面积和它的 data-value 属性值相对应：data-value 值越大的矩形块面积越大。
|
||||
|
||||
**User Story #7:** My tree map should have a legend with corresponding `id="legend"`.
|
||||
**需求 #7：** 矩阵树图包含一个具有 `id="legend"` 属性的图例。
|
||||
|
||||
**User Story #8:** My legend should have `rect` elements with a corresponding `class="legend-item"`.
|
||||
**需求 #8：** 图例包含一些具有 `class="legend-item"` 属性的 `rect` 元素。
|
||||
|
||||
**User Story #9:** The `rect` elements in the legend should use at least 2 different fill colors.
|
||||
**需求 #9：** 图例中的这些 `rect` 元素至少应该使用 2 种不同的填充颜色。
|
||||
|
||||
**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**需求 #10：** 将鼠标悬停在某个区域上时，可以看到具有 `id="tooltip"` 属性的提示框，它会显示有关该区域的更多信息。
|
||||
|
||||
**User Story #11:** My tooltip should have a `data-value` property that corresponds to the `data-value` of the active area.
|
||||
**需求 #11：** 提示框应该有 `data-value` 属性，它对应了当前激活区域的 `data-value` 属性。
|
||||
|
||||
For this project you can use any of the following datasets:
|
||||
对于此项目，您可以使用以下任何数据集：
|
||||
|
||||
- **Kickstarter Pledges:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Movie Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Video Game Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
- **Kickstarter Pledges：** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Movie Sales：** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Video Game Sales：** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd4
|
||||
title: Add a Hover Effect to a D3 Element
|
||||
title: 给 D3 元素添加悬停效果
|
||||
challengeType: 6
|
||||
forumTopicId: 301469
|
||||
dashedName: add-a-hover-effect-to-a-d3-element
|
||||
@ -8,17 +8,17 @@ dashedName: add-a-hover-effect-to-a-d3-element
|
||||
|
||||
# --description--
|
||||
|
||||
It's possible to add effects that highlight a bar when the user hovers over it with the mouse. So far, the styling for the rectangles is applied with the built-in D3 and SVG methods, but you can use CSS as well.
|
||||
我们可以为用户的鼠标悬停行为添加高亮显示的效果。 到目前为止，矩形的样式应用了内置的 D3 和 SVG 方法，但是你也可以使用 CSS 来实现。
|
||||
|
||||
You set the CSS class on the SVG elements with the `attr()` method. Then the `:hover` pseudo-class for your new class holds the style rules for any hover effects.
|
||||
你可以使用 `attr()` 方法在 SVG 元素上设置 CSS class。 然后用 `:hover` 伪类为你新添加的 CSS 类设置鼠标悬停的效果。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the `attr()` method to add a class of `bar` to all the `rect` elements. This changes the `fill` color of the bar to brown when you mouse over it.
|
||||
用 `attr()` 方法给所有的 `rect` 元素都添加 `bar` class。 当鼠标悬停在元素上时，它的 `fill` 将变为棕色。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `rect` elements should have a class of `bar`.
|
||||
`rect` 元素应该有 `bar` class。
|
||||
|
||||
```js
|
||||
assert($('rect').attr('class') == 'bar');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: Add a Tooltip to a D3 Element
|
||||
title: 给 D3 元素添加工具提示
|
||||
challengeType: 6
|
||||
forumTopicId: 301470
|
||||
dashedName: add-a-tooltip-to-a-d3-element
|
||||
@ -8,71 +8,71 @@ dashedName: add-a-tooltip-to-a-d3-element
|
||||
|
||||
# --description--
|
||||
|
||||
A tooltip shows more information about an item on a page when the user hovers over that item. There are several ways to add a tooltip to a visualization, this challenge uses the SVG `title` element.
|
||||
当用户在一个对象上悬停时，提示框可以显示关于这个对象更多的信息。 在可视化中有多种方法添加提示框，这个挑战将使用 SVG 的 `title` 元素。
|
||||
|
||||
`title` pairs with the `text()` method to dynamically add data to the bars.
|
||||
`title` 和 `text()` 方法一起给每组动态添加数据。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Append a `title` element under each `rect` node. Then call the `text()` method with a callback function so the text displays the data value.
|
||||
在每个 `rect` 节点下附加 `title` 元素。 然后用回调函数调用 `text()` 方法使它的文本显示数据值。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 9 `title` elements.
|
||||
你应该有 9 个 `title` 元素。
|
||||
|
||||
```js
|
||||
assert($('title').length == 9);
|
||||
```
|
||||
|
||||
The first `title` element should have tooltip text of 12.
|
||||
第一个 `title` 元素的提示框文本应为 12。
|
||||
|
||||
```js
|
||||
assert($('title').eq(0).text() == '12');
|
||||
```
|
||||
|
||||
The second `title` element should have tooltip text of 31.
|
||||
第二个 `title` 元素的提示框文本应为 31。
|
||||
|
||||
```js
|
||||
assert($('title').eq(1).text() == '31');
|
||||
```
|
||||
|
||||
The third `title` element should have tooltip text of 22.
|
||||
第三个 `title` 元素的提示框文本应为 22。
|
||||
|
||||
```js
|
||||
assert($('title').eq(2).text() == '22');
|
||||
```
|
||||
|
||||
The fourth `title` element should have tooltip text of 17.
|
||||
第四个 `title` 元素的提示框文本应为 17。
|
||||
|
||||
```js
|
||||
assert($('title').eq(3).text() == '17');
|
||||
```
|
||||
|
||||
The fifth `title` element should have tooltip text of 25.
|
||||
第五个 `title` 元素的提示框文本应为 25。
|
||||
|
||||
```js
|
||||
assert($('title').eq(4).text() == '25');
|
||||
```
|
||||
|
||||
The sixth `title` element should have tooltip text of 18.
|
||||
第六个 `title` 元素的提示框文本应为 18。
|
||||
|
||||
```js
|
||||
assert($('title').eq(5).text() == '18');
|
||||
```
|
||||
|
||||
The seventh `title` element should have tooltip text of 29.
|
||||
第七个 `title` 元素的提示框文本应为 29。
|
||||
|
||||
```js
|
||||
assert($('title').eq(6).text() == '29');
|
||||
```
|
||||
|
||||
The eighth `title` element should have tooltip text of 14.
|
||||
第八个 `title` 元素的提示框文本应为 14。
|
||||
|
||||
```js
|
||||
assert($('title').eq(7).text() == '14');
|
||||
```
|
||||
|
||||
The ninth `title` element should have tooltip text of 9.
|
||||
第九个 `title` 元素的提示框文本应为 9。
|
||||
|
||||
```js
|
||||
assert($('title').eq(8).text() == '9');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: Add Attributes to the Circle Elements
|
||||
title: 给 Circle 元素添加属性
|
||||
challengeType: 6
|
||||
forumTopicId: 301471
|
||||
dashedName: add-attributes-to-the-circle-elements
|
||||
@ -8,27 +8,27 @@ dashedName: add-attributes-to-the-circle-elements
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge created the `circle` elements for each point in the `dataset`, and appended them to the SVG canvas. But D3 needs more information about the position and size of each `circle` to display them correctly.
|
||||
上个挑战为 `dataset` 中的每个点都创建了 `circle` 元素，并将它们添加到 SVG 画布上。 但是 D3 需要更多关于位置和 `circle` 大小的信息来正确地显示它们。
|
||||
|
||||
A `circle` in SVG has three main attributes. The `cx` and `cy` attributes are the coordinates. They tell D3 where to position the *center* of the shape on the SVG canvas. The radius (`r` attribute) gives the size of the `circle`.
|
||||
在 SVG 中 `circle` 有三个主要的属性。 `cx` 和 `cy` 属性是坐标。 它们告诉 D3 将图形的*中心*放在 SVG 画布的何处。 半径（ `r` 属性）给出 `circle` 的大小。
|
||||
|
||||
Just like the `rect` `y` coordinate, the `cy` attribute for a `circle` is measured from the top of the SVG canvas, not from the bottom.
|
||||
和 `rect` 的 `y` 坐标一样，`circle` 的 `cy` 属性是从 SVG 画布的顶端开始测量的，而不是从底端。
|
||||
|
||||
All three attributes can use a callback function to set their values dynamically. Remember that all methods chained after `data(dataset)` run once per item in `dataset`. The `d` parameter in the callback function refers to the current item in `dataset`, which is an array for each point. You use bracket notation, like `d[0]`, to access the values in that array.
|
||||
所有的属性都可以用回调函数来动态设值。 记住，所有串联在 `data(dataset)` 后面的方法会为 `dataset` 中的每个对象都运行一次。 回调函数中的 `d` 参数指在 `dataset` 中的当前对象，对每个点来说都是一个数组。 你可以使用方括号的方式，如 `d[0]`，来访问数组中的值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add `cx`, `cy`, and `r` attributes to the `circle` elements. The `cx` value should be the first number in the array for each item in `dataset`. The `cy` value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The `r` value should be 5 for all circles.
|
||||
为 `circle` 元素添加 `cx`、`cy`、`r` 属性。 `cx` 的值应该是 `dataset` 中每个对象的数组的第一个数， `cy` 的值应该根据数组中的第二个值，但是要确保正向显示图表而不是倒转。 所有圆圈的 `r` 的值应该为 5。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 10 `circle` elements.
|
||||
你应该有 10 个 `circle` 元素。
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
The first `circle` element should have a `cx` value of 34, a `cy` value of 422, and an `r` value of 5.
|
||||
第一个 `circle` 元素的 `cx` 值应该为 34，`cy` 值应该为 422，`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -38,7 +38,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second `circle` element should have a `cx` value of 109, a `cy` value of 220, and an `r` value of 5.
|
||||
第二个 `circle` 元素的 `cx` 值应该为 109，`cy` 值应该为 220，`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third `circle` element should have a `cx` value of 310, a `cy` value of 380, and an `r` value of 5.
|
||||
第三个 `circle` 元素的 `cx` 值应该为 310，`cy` 值应该为 380，`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -58,7 +58,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth `circle` element should have a `cx` value of 79, a `cy` value of 89, and an `r` value of 5.
|
||||
第四个 `circle` 元素的 `cx` 值应该为 79，`cy` 值应该为 89，`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -68,7 +68,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fifth `circle` element should have a `cx` value of 420, a `cy` value of 280, and an `r` value of 5.
|
||||
第五个 `circle` 元素的 `cx` 值应该为 420，`cy` 值应该为 280，`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -78,7 +78,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The sixth `circle` element should have a `cx` value of 233, a `cy` value of 355, and an `r` value of 5.
|
||||
第六个 `circle` 元素的 `cx` 值应该为 233，`cy` 值应该为 355，`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -88,7 +88,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The seventh `circle` element should have a `cx` value of 333, a `cy` value of 404, and an `r` value of 5.
|
||||
第七个 `circle` 元素的 `cx` 值应该为 333，`cy` 值应该为 404，`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -98,7 +98,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The eighth `circle` element should have a `cx` value of 222, a `cy` value of 167, and an `r` value of 5.
|
||||
第八个 `circle` 元素的 `cx` 值应该为 222，`cy` 值应该为 167，`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -108,7 +108,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The ninth `circle` element should have a `cx` value of 78, a `cy` value of 180, and an `r` value of 5.
|
||||
第九个 `circle` 元素的 `cx` 值应该为 78，`cy` 值应该为 180，`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -118,7 +118,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The tenth `circle` element should have a `cx` value of 21, a `cy` value of 377, and an `r` value of 5.
|
||||
第十个 `circle` 元素的 `cx` 值应该为 21，`cy` 值应该为 377，`r` 值应该为 5。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: Add Axes to a Visualization
|
||||
title: 添加坐标轴到视图中
|
||||
challengeType: 6
|
||||
forumTopicId: 301472
|
||||
dashedName: add-axes-to-a-visualization
|
||||
@ -8,15 +8,15 @@ dashedName: add-axes-to-a-visualization
|
||||
|
||||
# --description--
|
||||
|
||||
Another way to improve the scatter plot is to add an x-axis and a y-axis.
|
||||
另一种改进散点图的方法是添加 x 轴和 y 轴。
|
||||
|
||||
D3 has two methods, `axisLeft()` and `axisBottom()`, to render the y-axis and x-axis, respectively. Here's an example to create the x-axis based on the `xScale` in the previous challenges:
|
||||
D3 有两种方法来渲染 y 轴和 x 轴，分别是 `axisLeft()` 和 `axisBottom()`。 下面是一个基于上个挑战中的 `xScale` 创建 x 轴的例子：
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
```
|
||||
|
||||
The next step is to render the axis on the SVG canvas. To do so, you can use a general SVG component, the `g` element. The `g` stands for group. Unlike `rect`, `circle`, and `text`, an axis is just a straight line when it's rendered. Because it is a simple shape, using `g` works. The last step is to apply a `transform` attribute to position the axis on the SVG canvas in the right place. Otherwise, the line would render along the border of SVG canvas and wouldn't be visible. SVG supports different types of `transforms`, but positioning an axis needs `translate`. When it's applied to the `g` element, it moves the whole group over and down by the given amounts. Here's an example:
|
||||
下一步是在 SVG 画布上渲染 x 轴。 为此，你可以使用一个 SVG 组件， `g` 元素， `g` 是英文中组（group）的缩写。 不同于 `rect`、`circle`、`text`，在渲染时，轴只是一条直线。 因为它是一个简单的图形，所以可以用 `g` 。 最后一步是使用 `transform` 属性将轴放置在 SVG 画布的正确位置上。 否则，轴将会沿着 SVG 画布的边缘渲染，从而不可见。 SVG 支持多种 `transforms`，但是定位轴需要使用 `translate` 属性。 当它应用在 `g` 元素上时，它根据给出的总量移动整组。 下面是一个例子：
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
@ -26,21 +26,21 @@ svg.append("g")
|
||||
.call(xAxis);
|
||||
```
|
||||
|
||||
The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the `call()` method. The y-axis works in the same way, except the `translate` argument is in the form (x, 0). Because `translate` is a string in the `attr()` method above, you can use concatenation to include variable values for its arguments.
|
||||
上部分代码将 x 轴放置在 SVG 画布的底端。 然后 x 轴作为参数被传递给 `call()` 方法。 除了 `translate` 的参数变成 (x, 0) ，y 轴的定位也是一样的。 因为 `translate` 是 `attr()` 方法中的一个字符串，你可以在参数中使用字符串的连接将变量值包括进去。
|
||||
|
||||
# --instructions--
|
||||
|
||||
The scatter plot now has an x-axis. Create a y-axis in a variable named `yAxis` using the `axisLeft()` method. Then render the axis using a `g` element. Make sure to use a `transform` attribute to translate the axis by the amount of padding units right, and 0 units down. Remember to `call()` the axis.
|
||||
现在散点图有 x 轴了。 用 `axisLeft()` 方法创建 y 轴并赋值给 `yAxis` 变量， 然后通过 `g` 元素渲染 y 轴。 确保用 `transform` 属性将 y 轴向右平移 padding 个单位，向下平移 0 个单位。 记得对 y 轴调用 `call()` 方法。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `axisLeft()` method with `yScale` passed as the argument.
|
||||
你应该使用 `axisLeft()` 方法，并传入 `yScale` 作为参数。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.axisLeft\(yScale\)/g));
|
||||
```
|
||||
|
||||
The y-axis `g` element should have a `transform` attribute to translate the axis by (60, 0).
|
||||
y 轴的 `g` 元素应该有一个 `transform` 属性来将 y 轴平移（60，0）。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should call the `yAxis`.
|
||||
你应该调用(call) `yAxis` 。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc8
|
||||
title: Add Classes with D3
|
||||
title: 用 D3 添加 Class
|
||||
challengeType: 6
|
||||
forumTopicId: 301473
|
||||
dashedName: add-classes-with-d3
|
||||
@ -8,27 +8,27 @@ dashedName: add-classes-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
Using a lot of inline styles on HTML elements gets hard to manage, even for smaller apps. It's easier to add a class to elements and style that class one time using CSS rules. D3 has the `attr()` method to add any HTML attribute to an element, including a class name.
|
||||
即使对小型 app 来说，在 HTML 元素中大量使用内联样式也十分难以管理。 给元素添加类，并使用 CSS 规则给类添加样式会更加方便。 D3 中的 `attr()` 方法可以给元素添加任何 HTML 属性，包括 class 名称。
|
||||
|
||||
The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of "container" to a selection:
|
||||
`attr()` 方法和 `style()` 的使用方法一样。 它使用逗号分隔值，并且可以使用回调函数。 这里是一个给选中元素添加 class 名为 "container" 的例子：
|
||||
|
||||
`selection.attr("class", "container");`
|
||||
|
||||
Note that the "class" parameter will remain the same whenever you need to add a class and only the "container" parameter will change.
|
||||
请注意，当你需要添加类时，“class" 参数不会发生改变，只有 "container" 参数会发生变化。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the `attr()` method to the code in the editor and put a class of `bar` on the `div` elements.
|
||||
将 `attr()` 方法添加到编辑器的代码中，并在 `div` 元素上添加一个 `bar` 类。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` elements should have a class of `bar`.
|
||||
`div` 元素应该有值为 `bar` 的类。
|
||||
|
||||
```js
|
||||
assert($('div').attr('class') == 'bar');
|
||||
```
|
||||
|
||||
Your code should use the `attr()` method.
|
||||
你应该使用 `attr()` 方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.attr/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc2
|
||||
title: Add Document Elements with D3
|
||||
title: 用 D3 给文档添加元素
|
||||
challengeType: 6
|
||||
forumTopicId: 301474
|
||||
dashedName: add-document-elements-with-d3
|
||||
@ -8,21 +8,21 @@ dashedName: add-document-elements-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
D3 has several methods that let you add and change elements in your document.
|
||||
D3 有多种方法可以用来在文档中增加元素、修改元素。
|
||||
|
||||
The `select()` method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example:
|
||||
`select()` 方法从文档中选择一个元素。 它接受你想要选择的元素的名字作为参数，并返回文档中第一个与名字匹配的 HTML 节点。 以下是一个例子：
|
||||
|
||||
`const anchor = d3.select("a");`
|
||||
|
||||
The above example finds the first anchor tag on the page and saves an HTML node for it in the variable `anchor`. You can use the selection with other methods. The "d3" part of the example is a reference to the D3 object, which is how you access D3 methods.
|
||||
上面这个例子找到页面上的第一个锚点标签，将它作为一个 HTML 节点保存在变量 `anchor` 中。 你也可以用其他的方法选择页面上的元素。 例子中的 "d3" 是对 D3 对象的引用，可以通过它来访问 D3 的方法。
|
||||
|
||||
Two other useful methods are `append()` and `text()`.
|
||||
另外两个有用的方法是 `append()` 和 `text()` 。
|
||||
|
||||
The `append()` method takes an argument for the element you want to add to the document. It appends an HTML node to a selected item, and returns a handle to that node.
|
||||
`append()` 方法接受你希望添加到文档中的元素作为参数， 它将一个 HTML 节点添加到选中的对象上，并返回那个节点的句柄。
|
||||
|
||||
The `text()` method either sets the text of the selected node, or gets the current text. To set the value, you pass a string as an argument inside the parentheses of the method.
|
||||
`text()` 方法既可以给选中的节点设置文本，也可以获取节点的当前文本。 如果要设置文本值，需要方法的括号中传入一个字符串参数。
|
||||
|
||||
Here's an example that selects an unordered list, appends a list item, and adds text:
|
||||
下面是一个选择无序列表、添加列表项和添加文本的例子：
|
||||
|
||||
```js
|
||||
d3.select("ul")
|
||||
@ -30,45 +30,45 @@ d3.select("ul")
|
||||
.text("Very important item");
|
||||
```
|
||||
|
||||
D3 allows you to chain several methods together with periods to perform a number of actions in a row.
|
||||
在 D3 中可以串联多个方法，连续执行一系列操作。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the `select` method to select the `body` tag in the document. Then `append` an `h1` tag to it, and add the text "Learning D3" into the `h1` element.
|
||||
使用 `select` 方法选择文档中的 `body` 标签。 然后用 `append` 方法为它添加一个 `h1` 标签，同时在 `h1` 中添加文本 "Learning D3"。
|
||||
|
||||
# --hints--
|
||||
|
||||
The `body` should have one `h1` element.
|
||||
`body` 元素应该包含一个 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert($('body').children('h1').length == 1);
|
||||
```
|
||||
|
||||
The `h1` element should have the text "Learning D3" in it.
|
||||
`h1` 元素应该包含文本 'Learning D3'。
|
||||
|
||||
```js
|
||||
assert($('h1').text() == 'Learning D3');
|
||||
```
|
||||
|
||||
Your code should access the `d3` object.
|
||||
你应该能访问 `d3` 对象。
|
||||
|
||||
```js
|
||||
assert(code.match(/d3/g));
|
||||
```
|
||||
|
||||
Your code should use the `select` method.
|
||||
你应该使用 `select` 方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.select/g));
|
||||
```
|
||||
|
||||
Your code should use the `append` method.
|
||||
你应该使用 `append` 方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.append/g));
|
||||
```
|
||||
|
||||
Your code should use the `text` method.
|
||||
你应该使用 `text` 方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.text/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc6
|
||||
title: Add Inline Styling to Elements
|
||||
title: 给元素添加内联样式
|
||||
challengeType: 6
|
||||
forumTopicId: 301475
|
||||
dashedName: add-inline-styling-to-elements
|
||||
@ -8,25 +8,25 @@ dashedName: add-inline-styling-to-elements
|
||||
|
||||
# --description--
|
||||
|
||||
D3 lets you add inline CSS styles on dynamic elements with the `style()` method.
|
||||
D3允许你使用 `style()` 方法在动态元素上添加内联 CSS 样式。
|
||||
|
||||
The `style()` method takes a comma-separated key-value pair as an argument. Here's an example to set the selection's text color to blue:
|
||||
`style()` 方法以用逗号分隔的键值对作为参数。 这里是一个将选中文本的颜色设为蓝色的例子：
|
||||
|
||||
`selection.style("color","blue");`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the `style()` method to the code in the editor to make all the displayed text have a `font-family` of `verdana`.
|
||||
在编辑器中添加 `style()` 方法，使所有显示的文本都有 `font-family` 属性，且值为 `verdana`。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` elements should have a `font-family` of verdana.
|
||||
`h2` 元素应该有 `font-family` 属性，且值为 verdana。
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-family') == 'verdana');
|
||||
```
|
||||
|
||||
Your code should use the `style()` method.
|
||||
你应该使用 `style()` 方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.style/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd2
|
||||
title: Add Labels to D3 Elements
|
||||
title: 给 D3 元素添加标签
|
||||
challengeType: 6
|
||||
forumTopicId: 301476
|
||||
dashedName: add-labels-to-d3-elements
|
||||
@ -8,70 +8,70 @@ dashedName: add-labels-to-d3-elements
|
||||
|
||||
# --description--
|
||||
|
||||
D3 lets you label a graph element, such as a bar, using the SVG `text` element.
|
||||
D3 允许你使用 SVG 的 `text` 元素给图形元素，如条形图，添加标签。
|
||||
|
||||
Like the `rect` element, a `text` element needs to have `x` and `y` attributes, to place it on the SVG canvas. It also needs to access the data to display those values.
|
||||
和 `rect` 元素类似，`text` 元素也需要 `x` 和 `y` 属性来指定其放置在 SVG 画布上的位置， 它也需要能够获取数据来显示数据值。
|
||||
|
||||
D3 gives you a high level of control over how you label your bars.
|
||||
D3 给了你很高的权限给图形添加标签。
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code in the editor already binds the data to each new `text` element. First, append `text` nodes to the `svg`. Next, add attributes for the `x` and `y` coordinates. They should be calculated the same way as the `rect` ones, except the `y` value for the `text` should make the label sit 3 units higher than the bar. Finally, use the D3 `text()` method to set the label equal to the data point value.
|
||||
编辑器中的代码已经将数据绑定到每个新的 `text` 元素。 首先，在 `svg` 中添加 `text` 节点。 然后，添加 `x` 和 `y` 坐标属性， 它们的计算方法应该和 `rect` 中计算方法相同，除了 `text` 的 `y` 值应该使标签比条形图的高 3 个单位。 最后，用 D3 的 `text()` 方法将标签设置为和数据点相等的值。
|
||||
|
||||
**Note**
|
||||
For the label to sit higher than the bar, decide if the `y` value for the `text` should be 3 greater or 3 less than the `y` value for the bar.
|
||||
**提示**
|
||||
关于标签比条形图高，想一想 `text` 的 `y` 值应该比条形图的 `y` 值大 3 还是小 3。
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `text` element should have a label of 12 and a `y` value of 61.
|
||||
第一个 `text` 元素应该有一个值为 12 的标签，并且 `y` 值为 61。
|
||||
|
||||
```js
|
||||
assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61');
|
||||
```
|
||||
|
||||
The second `text` element should have a label of 31 and a `y` value of 4.
|
||||
第二个 `text` 元素应该有一个值为 31 的标签，并且 `y` 值为 4。
|
||||
|
||||
```js
|
||||
assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4');
|
||||
```
|
||||
|
||||
The third `text` element should have a label of 22 and a `y` value of 31.
|
||||
第三个 `text` 元素应该有一个值为 22 的标签，并且 `y` 值为 31。
|
||||
|
||||
```js
|
||||
assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31');
|
||||
```
|
||||
|
||||
The fourth `text` element should have a label of 17 and a `y` value of 46.
|
||||
第四个 `text` 元素应该有一个值为 17 的标签，并且 `y` 值为 46。
|
||||
|
||||
```js
|
||||
assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46');
|
||||
```
|
||||
|
||||
The fifth `text` element should have a label of 25 and a `y` value of 22.
|
||||
第五个 `text` 元素应该有一个值为 25 的标签，并且 `y` 值为 22。
|
||||
|
||||
```js
|
||||
assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22');
|
||||
```
|
||||
|
||||
The sixth `text` element should have a label of 18 and a `y` value of 43.
|
||||
第六个 `text` 元素应该有一个值为 18 的标签，并且 `y` 值为 43。
|
||||
|
||||
```js
|
||||
assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43');
|
||||
```
|
||||
|
||||
The seventh `text` element should have a label of 29 and a `y` value of 10.
|
||||
第七个 `text` 元素应该有一个值为 29 的标签，并且 `y` 值为 10。
|
||||
|
||||
```js
|
||||
assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10');
|
||||
```
|
||||
|
||||
The eighth `text` element should have a label of 14 and a `y` value of 55.
|
||||
第八个 `text` 元素应该有一个值为 14 的标签，并且 `y` 值为 55。
|
||||
|
||||
```js
|
||||
assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55');
|
||||
```
|
||||
|
||||
The ninth `text` element should have a label of 9 and a `y` value of 70.
|
||||
第九个 `text` 元素应该有一个值为 9 的标签，并且 `y` 值为 70。
|
||||
|
||||
```js
|
||||
assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd9
|
||||
title: Add Labels to Scatter Plot Circles
|
||||
title: 向散点图的 Circles 添加标签
|
||||
challengeType: 6
|
||||
forumTopicId: 301477
|
||||
dashedName: add-labels-to-scatter-plot-circles
|
||||
@ -8,25 +8,25 @@ dashedName: add-labels-to-scatter-plot-circles
|
||||
|
||||
# --description--
|
||||
|
||||
You can add text to create labels for the points in a scatter plot.
|
||||
你可以为散点图中的点添加文本来创建标签。
|
||||
|
||||
The goal is to display the comma-separated values for the first (`x`) and second (`y`) fields of each item in `dataset`.
|
||||
目标是显示 `dataset` 中每个对象的第一个（`x`）和第二个（`y`）字段中通过逗号分隔的值。
|
||||
|
||||
The `text` nodes need `x` and `y` attributes to position it on the SVG canvas. In this challenge, the `y` value (which determines height) can use the same value that the `circle` uses for its `cy` attribute. The `x` value can be slightly larger than the `cx` value of the `circle`, so the label is visible. This will push the label to the right of the plotted point.
|
||||
`text` 节点需要 `x` 和 `y` 属性来指定放置在 SVG 画布中的位置。 在这个挑战中，`y` 值（决定高度）可以用和 `circle` 的 `cy` 属性相同的值， `x` 值可以比 `circle` 的 `cx` 值稍微大一些，这样标签才可见， 并且被放置在散点的右边。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Label each point on the scatter plot using the `text` elements. The text of the label should be the two values separated by a comma and a space. For example, the label for the first point is "34, 78". Set the `x` attribute so it's 5 units more than the value you used for the `cx` attribute on the `circle`. Set the `y` attribute the same way that's used for the `cy` value on the `circle`.
|
||||
使用 `text` 元素标记散点图上的每个点。 标签的文本应该是用逗号和空格分隔的两个值。 例如，第一个点的标签为 "34, 78"。 设置 `x` 属性，使其比 `circle` 上 `cx` 属性使用的值多5个单位。 设置 `y` 属性的方式与 `circle` 上的 `cy` 值相同。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 10 `text` elements.
|
||||
你应该有 10 个 `text` 元素。
|
||||
|
||||
```js
|
||||
assert($('text').length == 10);
|
||||
```
|
||||
|
||||
The first label should have text of "34, 78", an `x` value of 39, and a `y` value of 422.
|
||||
第一个标签的文本应该为 '34, 78'， `x` 值应该为 39， `y` 应该为 422。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -36,7 +36,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second label should have text of "109, 280", an `x` value of 114, and a `y` value of 220.
|
||||
第二个标签的文本应该为 '109, 280'， `x` 值应该为 114， `y` 应该为 220。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -46,7 +46,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third label should have text of "310, 120", an `x` value of 315, and a `y` value of 380.
|
||||
第三个标签的文本应该为 '310, 120'， `x` 值应该为 315， `y` 应该为 380。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -56,7 +56,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth label should have text of "79, 411", an `x` value of 84, and a `y` value of 89.
|
||||
第四个标签的文本应该为 '79, 411'， `x` 值应该为 84， `y` 应该为 89。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -66,7 +66,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fifth label should have text of "420, 220", an `x` value of 425, and a `y` value of 280.
|
||||
第五个标签的文本应该为 '420, 220'， `x` 值应该为 425， `y` 应该为 280。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -76,7 +76,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The sixth label should have text of "233, 145", an `x` value of 238, and a `y` value of 355.
|
||||
第六个标签的文本应该为 '233, 145'， `x` 值应该为 238， `y` 应该为 355。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -86,7 +86,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The seventh label should have text of "333, 96", an `x` value of 338, and a `y` value of 404.
|
||||
第七个标签的文本应该为 '333, 96'， `x` 值应该为 338， `y` 应该为 404。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -96,7 +96,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The eighth label should have text of "222, 333", an `x` value of 227, and a `y` value of 167.
|
||||
第八个标签的文本应该为 '222, 333'， `x` 值应该为 227， `y` 应该为 167。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -106,7 +106,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The ninth label should have text of "78, 320", an `x` value of 83, and a `y` value of 180.
|
||||
第九个标签的文本应该为 '78, 320'， `x` 值应该为 83， `y` 应该为 180。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -116,7 +116,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The tenth label should have text of "21, 123", an `x` value of 26, and a `y` value of 377.
|
||||
第十个标签的文本应该为 '21, 123'， `x` 值应该为 26， `y` 应该为 377。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -40,20 +40,16 @@ dashedName: url-shortener-microservice
|
||||
async (getUserInput) => {
|
||||
const url = getUserInput('url');
|
||||
const urlVariable = Date.now();
|
||||
const fullUrl = `${url}/?v=${urlVariable}`
|
||||
const res = await fetch(url + '/api/shorturl/new/', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: `url=https://timestamp-microservice.freecodecamp.rocks/api/timestamp/${urlVariable}`
|
||||
body: `url=${fullUrl}`
|
||||
});
|
||||
if (res.ok) {
|
||||
const { short_url, original_url } = await res.json();
|
||||
assert.isNotNull(short_url);
|
||||
assert.match(
|
||||
original_url,
|
||||
new RegExp(
|
||||
`https://timestamp-microservice.freecodecamp.rocks/api/timestamp/${urlVariable}`
|
||||
)
|
||||
);
|
||||
assert.strictEqual(original_url, `${url}/?v=${urlVariable}`);
|
||||
} else {
|
||||
throw new Error(`${res.status} ${res.statusText}`);
|
||||
}
|
||||
@ -66,11 +62,12 @@ async (getUserInput) => {
|
||||
async (getUserInput) => {
|
||||
const url = getUserInput('url');
|
||||
const urlVariable = Date.now();
|
||||
const fullUrl = `${url}/?v=${urlVariable}`
|
||||
let shortenedUrlVariable;
|
||||
const postResponse = await fetch(url + '/api/shorturl/new/', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: `url=https://timestamp-microservice.freecodecamp.rocks/api/timestamp/${urlVariable}`
|
||||
body: `url=${fullUrl}`
|
||||
});
|
||||
if (postResponse.ok) {
|
||||
const { short_url } = await postResponse.json();
|
||||
@ -84,10 +81,7 @@ async (getUserInput) => {
|
||||
if (getResponse) {
|
||||
const { redirected, url } = getResponse;
|
||||
assert.isTrue(redirected);
|
||||
assert.strictEqual(
|
||||
url,
|
||||
`https://timestamp-microservice.freecodecamp.rocks/api/timestamp/${urlVariable}`
|
||||
);
|
||||
assert.strictEqual(url,fullUrl);
|
||||
} else {
|
||||
throw new Error(`${getResponse.status} ${getResponse.statusText}`);
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: get-data-from-post-requests
|
||||
|
||||
# --description--
|
||||
|
||||
在路径 `/name` 挂载一个 POST 处理方法， 和前面一样， 我们已经在 html 首页准备了一份表格， 它将提交与练习 10 相同的数据（查询字符串）， 如果 body-parser 正确配置好了，那么就可以在 `req.body` 对象中找到请求的参数。 来看看一个常规的例子：
|
||||
在路径 `/name` 挂载一个 POST 处理方法， 和前面一样， 我们已经在 html 首页准备了一份表单， 它将提交与练习 10 相同的数据（查询字符串）， 如果 body-parser 正确配置好了，那么就可以在 `req.body` 对象中找到请求的参数。 来看看一个常规的例子：
|
||||
|
||||
<blockquote>路由：POST '/library'<br>URL 编码的请求正文：userId=546&bookId=6754<br>req.body：{userId: '546', bookId: '6754'}</blockquote>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bed
|
||||
title: Meet the Node console
|
||||
title: 认识 Node 的控制台
|
||||
challengeType: 2
|
||||
forumTopicId: 301515
|
||||
dashedName: meet-the-node-console
|
||||
@ -8,21 +8,27 @@ dashedName: meet-the-node-console
|
||||
|
||||
# --description--
|
||||
|
||||
During the development process, it is important to be able to check what’s going on in your code.
|
||||
可以采用下面的任意一种方式完成这些挑战：
|
||||
|
||||
Node is just a JavaScript environment. Like client side JavaScript, you can use the console to display useful debug information. On your local machine, you would see console output in a terminal. On Repl.it, a terminal is open in the right pane by default.
|
||||
- 克隆 [这个 GitHub 仓库](https://github.com/freeCodeCamp/boilerplate-express/) 并在本地完成项目。
|
||||
- 使用 [Repl.it 上的初始化项目](https://repl.it/github/freeCodeCamp/boilerplate-express) 来完成项目。
|
||||
- 使用你选择的网站生成器来完成项目， 并确保包含了我们 GitHub 仓库的所有文件。
|
||||
|
||||
We recommend to keep the terminal open while working at these challenges. By reading the output in the terminal, you can see any errors that may occur.
|
||||
当完成本项目，请确认有一个正常运行的 demo 可以公开访问。 然后将 URL 提交到 `Solution Link` 中。
|
||||
|
||||
在开发过程中，能够随时看到代码的运行结果是非常重要的。
|
||||
|
||||
Node 只是一个 JavaScript 环境。 与客户端 JavaScript 一样，你可以使用控制台显示有用的调试信息。 在本地计算机上，你可以在终端中输出调试信息。 在 Repl.it 上，右侧边栏会默认打开一个终端。
|
||||
|
||||
我们建议在做这些挑战题时保持终端打开的状态。 通过这些终端的输出，你可能会发现这些错误的本质原因。
|
||||
|
||||
# --instructions--
|
||||
|
||||
If you have not already done so, please read the instructions in [the introduction](/learn/apis-and-microservices/basic-node-and-express/) and start a new project on Repl.it using [this link](https://repl.it/github/freeCodeCamp/boilerplate-express).
|
||||
|
||||
Modify the `myApp.js` file to log "Hello World" to the console.
|
||||
修改 `myApp.js` 文件，在控制台打印出 “Hello World”。
|
||||
|
||||
# --hints--
|
||||
|
||||
`"Hello World"` should be in the console
|
||||
控制台应该输出 `"Hello World"`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bf0
|
||||
title: Serve Static Assets
|
||||
title: 提供静态资源服务
|
||||
challengeType: 2
|
||||
forumTopicId: 301518
|
||||
dashedName: serve-static-assets
|
||||
@ -8,21 +8,25 @@ dashedName: serve-static-assets
|
||||
|
||||
# --description--
|
||||
|
||||
An HTML server usually has one or more directories that are accessible by the user. You can place there the static assets needed by your application (stylesheets, scripts, images). In Express, you can put in place this functionality using the middleware `express.static(path)`, where the `path` parameter is the absolute path of the folder containing the assets. If you don’t know what middleware is... don’t worry, we will discuss in detail later. Basically, middleware are functions that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method `app.use(path, middlewareFunction)`. The first `path` argument is optional. If you don’t pass it, the middleware will be executed for all requests.
|
||||
HTML 服务器通常有一个或多个用户可以访问的目录。 你可以将应用程序所需的静态资源 (样式表、脚本、图片) 放在那里。
|
||||
|
||||
在 Express 中可以使用中间件 `express.static(path)` 来设置此功能，它的参数 `path` 就是包含静态资源文件的绝对路径。
|
||||
|
||||
如果你不知道什么是中间件……别担心，我们将在后面详细讨论。 其实，中间件就是一个拦截路由处理方法并在里面添加一些信息的函数。 使用 `app.use(path, middlewareFunction)` 方法来加载一个中间件， 它的第一个参数 `path` 是可选的， 如果没设置第一个参数，那么所有的请求都会经过这个中间件处理。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Mount the `express.static()` middleware for all requests with `app.use()`. The absolute path to the assets folder is `__dirname + /public`.
|
||||
使用 `app.use()` 为路径 `/public` 的请求安装 `express.static()` 中间件， 静态资源的绝对路径是 `__dirname + /public`。
|
||||
|
||||
Now your app should be able to serve a CSS stylesheet. From outside, the public folder will appear mounted to the root directory. Your front-page should look a little better now!
|
||||
现在应用应该能提供 CSS 样式表， 请注意， `/public/style.css` 文件被项目模板的 `/views/index.html` 引用， 首页应该更好看了。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your app should serve asset files from the `/public` directory
|
||||
应用应该将资源文件从 `/public` 目录发送到 `/public` 路径
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/style.css').then(
|
||||
$.get(getUserInput('url') + '/public/style.css').then(
|
||||
(data) => {
|
||||
assert.match(
|
||||
data,
|
||||
|
||||
@ -28,7 +28,7 @@ name=John+Doe&age=25
|
||||
|
||||
在 `package.json` 中安装 `body-parser` 模块， 然后在文件顶部 `require` 进来， 用变量 `bodyParser` 保存它。 通过中间件的 `bodyParser.urlencoded({extended: false})` 方法处理 URL 编码数据， 将调用上个方法返回的函数传给 `app.use()`， 中间件通常挂载在所有需要它的路由之前。
|
||||
|
||||
**注意：**`extended=false`是一个告诉解析器使用经典编码的配置选项， 当使用它时，值只能是字符串或者数组， 拓展版本数据更加灵活，但稍逊于 JSON。
|
||||
**注意：**`extended=false` 是一个告诉解析器使用经典编码的配置选项， 当使用它时，值只能是字符串或者数组， 拓展版本数据更加灵活，但稍逊于 JSON。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb1367417b2b2512bf2
|
||||
title: Use the .env File
|
||||
title: 使用 .env 文件
|
||||
challengeType: 2
|
||||
forumTopicId: 301521
|
||||
dashedName: use-the--env-file
|
||||
@ -8,19 +8,19 @@ dashedName: use-the--env-file
|
||||
|
||||
# --description--
|
||||
|
||||
The `.env` file is a hidden file that is used to pass environment variables to your application. This file is secret, no one but you can access it, and it can be used to store data that you want to keep private or hidden. For example, you can store API keys from external services or your database URI. You can also use it to store configuration options. By setting configuration options, you can change the behavior of your application, without the need to rewrite some code.
|
||||
`.env` 文件是一个用于将环境变量传给应用程序的隐藏文件， 这是一个除了开发者之外没人可以访问的私密文件，它可以用来存储你想保密或者隐藏的数据， 例如，它可以存储第三方服务的 API 密钥或者数据库 URI， 也可以使用它来存储配置选项， 通过设置配置选项，你可以改变应用程序的行为，而无需重写一些代码。
|
||||
|
||||
The environment variables are accessible from the app as `process.env.VAR_NAME`. The `process.env` object is a global Node object, and variables are passed as strings. By convention, the variable names are all uppercase, with words separated by an underscore. The `.env` is a shell file, so you don’t need to wrap names or values in quotes. It is also important to note that there cannot be space around the equals sign when you are assigning values to your variables, e.g. `VAR_NAME=value`. Usually, you will put each variable definition on a separate line.
|
||||
在应用程序中可以通过 `process.env.VAR_NAME` 访问到环境变量。 `process.env` 对象是 Node 程序中的一个全局对象，可以给这个变量传字符串。 习惯上，变量名全部大写，单词之间用下划线分隔。 `.env` 是一个 shell 文件，因此不需要用给变量名和值加引号。 还有一点需要注意，当你给变量赋值时等号两侧不能有空格，例如：`VAR_NAME=value`。 通常来讲，每一个变量定义会独占一行。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Let's add an environment variable as a configuration option.
|
||||
添加一个环境变量作为配置选项。
|
||||
|
||||
Store the variable `MESSAGE_STYLE=uppercase` in the `.env` file. Then tell the GET `/json` route handler that you created in the last challenge to transform the response object’s message to uppercase if `process.env.MESSAGE_STYLE` equals `uppercase`. The response object should become `{"message": "HELLO JSON"}`.
|
||||
在项目根目录创建一个 `.env` 文件，并存储变量 `MESSAGE_STYLE=uppercase`。 当向 `/json` 发 GET 请求时，如果 `process.env.MESSAGE_STYLE` 的值为 `uppercase`，那么上一次挑战中的路由处理程序返回的对象的消息则应该大写， 即响应对象应该是 `{"message": "HELLO JSON"}`。
|
||||
|
||||
# --hints--
|
||||
|
||||
The response of the endpoint `/json` should change according to the environment variable `MESSAGE_STYLE`
|
||||
端口 `/json` 响应的值，应该随着环境变量 `MESSAGE_STYLE` 的变化而改变
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb3367417b2b2512bfb
|
||||
title: 'How to Use package.json, the Core of Any Node.js Project or npm Package'
|
||||
title: '如何使用 package.json ——所有 Node.js 项目或 npm 包的核心'
|
||||
challengeType: 2
|
||||
forumTopicId: 301528
|
||||
dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-package
|
||||
@ -8,11 +8,19 @@ dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-packa
|
||||
|
||||
# --description--
|
||||
|
||||
The `package.json` file is the center of any Node.js project or npm package. It stores information about your project, similar to how the <head> section of an HTML document describes the content of a webpage. It consists of a single JSON object where information is stored in key-value pairs. There are only two required fields; "name" and "version", but it’s good practice to provide additional information about your project that could be useful to future users or maintainers.
|
||||
可以采用下面的任意一种方式完成这些挑战：
|
||||
|
||||
If you look at the file tree of your project, you will find the package.json file on the top level of the tree. This is the file that you will be improving in the next couple of challenges.
|
||||
- 克隆 [GitHub repo](https://github.com/freeCodeCamp/boilerplate-npm/) 并在本地完成项目。
|
||||
- 使用 [Repl.it 上的初始化项目](https://repl.it/github/freeCodeCamp/boilerplate-npm) 来完成项目。
|
||||
- 使用你选择的网站生成器来完成项目， 并确保包含了我们 GitHub 仓库的所有文件。
|
||||
|
||||
One of the most common pieces of information in this file is the `author` field. It specifies who created the project, and can consist of a string or an object with contact or other details. An object is recommended for bigger projects, but a simple string like the following example will do for this project.
|
||||
当完成本项目，请确认有一个正常运行的 demo 可以公开访问。 然后将 URL 提交到 `Solution Link` 中。 此外，还可以将项目的源码提交到 `GitHub Link` 中。
|
||||
|
||||
`package.json` 文件是所有 Node.js 项目和 npm 包的枢纽， 和 HTML 文档中的 <head> 区域用来描述网页的配置信息（元数据）一样，它存储项目的相关信息。 它由单个 JSON 对象组成，并以键值对的形式存储项目信息， 且至少包含两个必填字段：“name”和“version”——但是最好提供有关项目的其他信息，这将对用户或者维护者有所帮助。
|
||||
|
||||
如果能找到项目的文件树，那么可以在文件树的最外层找到 package.json， 在接下来的几个挑战中将完善这个文件。
|
||||
|
||||
在这个文件中最常见的信息之一是 `author` 字段， 它说明了项目的创建者，它可以是字符串，也可以是带有联系人详细信息的对象。 对于较大的项目，建议使用对象；但是在我们的项目中，一个简单的字符串就够了，比如下面的例子：
|
||||
|
||||
```json
|
||||
"author": "Jane Doe",
|
||||
@ -20,13 +28,13 @@ One of the most common pieces of information in this file is the `author` field.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add your name as the `author` of the project in the package.json file.
|
||||
在项目的 package.json 文件的 `author` 键中添加你的名字。
|
||||
|
||||
**Note:** Remember that you’re writing JSON, so all field names must use double-quotes (") and be separated with a comma (,).
|
||||
**注意：** 正在修改的是一个 JSON，所有的字段名必须用双引号（"）包裹，也必须用逗号（,）分割。
|
||||
|
||||
# --hints--
|
||||
|
||||
package.json should have a valid "author" key
|
||||
package.json 应该有一个有效的“author”键
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb6367417b2b2512c06
|
||||
title: Install and Set Up Mongoose
|
||||
title: 安装和设置 Mongoose
|
||||
challengeType: 2
|
||||
forumTopicId: 301540
|
||||
dashedName: install-and-set-up-mongoose
|
||||
@ -8,11 +8,21 @@ dashedName: install-and-set-up-mongoose
|
||||
|
||||
# --description--
|
||||
|
||||
In this challenge, you will import the required projects, and connect to your Atlas database.
|
||||
可以采用下面的任意一种方式完成这些挑战：
|
||||
|
||||
- 克隆 [GitHub repo](https://github.com/freeCodeCamp/boilerplate-mongomongoose/) 并在本地完成项目。
|
||||
- 使用 [Repl.it 上的初始化项目](https://repl.it/github/freeCodeCamp/boilerplate-mongomongoose)来完成项目。
|
||||
- 使用你选择的网站生成器来完成项目， 并确保包含了我们 GitHub 仓库的所有文件。
|
||||
|
||||
当完成本项目，请确认有一个正常运行的 demo 可以公开访问。 然后将 URL 提交到 `Solution Link` 中。
|
||||
|
||||
在这个挑战中，你将建立一个 MongoDB Atlas 数据库并导入连接到它所需的软件包。
|
||||
|
||||
按照<a href='https://www.freecodecamp.org/news/get-started-with-mongodb-atlas/' rel='noopener noreferrer' target='_blank'>这篇教程</a>在 MongoDB Atlas 创建一个托管数据库。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add `mongodb` and `mongoose` to the project’s `package.json`. Then, require mongoose as `mongoose` in `myApp.js`. Store your MongoDB Atlas database URI in a private `.env` file as `MONGO_URI`. Surround the the URI with single or double quotes, and make sure no space exists between both the variable and the `=`, and the value and `=`. Connect to the database using the following syntax:
|
||||
将 `mongodb` 和 `mongoose` 添加到项目的 `package.json` 文件中。 然后，在 `myApp.js` 文件中请求 `mongoose`。 创建一个 `.env` 文件，给它添加一个 `MONGO_URI` 变量。 变量的值为你的 MongoDB Atlas 数据库 URI。 应用单引号或双引号包裹 URI。请记住，环境变量 `=` 两边不能有空格。 例如，`MONGO_URI='VALUE'`。 完成后，使用下面的代码来连接数据库。
|
||||
|
||||
```js
|
||||
mongoose.connect(<Your URI>, { useNewUrlParser: true, useUnifiedTopology: true });
|
||||
@ -20,7 +30,7 @@ mongoose.connect(<Your URI>, { useNewUrlParser: true, useUnifiedTopology: true }
|
||||
|
||||
# --hints--
|
||||
|
||||
"mongodb" dependency should be in package.json
|
||||
“mongodb” 应在 package.json 中作为依赖项定义。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -35,7 +45,7 @@ mongoose.connect(<Your URI>, { useNewUrlParser: true, useUnifiedTopology: true }
|
||||
);
|
||||
```
|
||||
|
||||
"mongoose" dependency should be in package.json
|
||||
“mongoose” 应在 package.json 中作为依赖项定义。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -50,7 +60,7 @@ mongoose.connect(<Your URI>, { useNewUrlParser: true, useUnifiedTopology: true }
|
||||
);
|
||||
```
|
||||
|
||||
"mongoose" should be connected to a database
|
||||
应使用 “mongoose” 连接数据库。
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -32,7 +32,7 @@ assert(/cat photos/gi.test($('a').text()));
|
||||
Necesitas un elemento `a` que enlace `https://freecatphotoapp.com`
|
||||
|
||||
```js
|
||||
assert(/https:\/\/(www\.)?freecatphotoapp\.com/gi.test($('a').attr('href')));
|
||||
assert(/^https?:\/\/freecatphotoapp\.com\/?$/i.test($('a').attr('href')));
|
||||
```
|
||||
|
||||
Tu elemento `a` debe tener una etiqueta de cierre.
|
||||
|
||||
@ -47,8 +47,7 @@ Debes tener un elemento `a` que enlace a "`https://freecatphotoapp.com`".
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]').length > 0 ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]').length > 0
|
||||
$('a[href="https://freecatphotoapp.com"]').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
@ -72,8 +71,7 @@ Tu elemento `a` debe ser anidado dentro de tu nuevo elemento `p`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://freecatphotoapp.com"]').parent().is('p') ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]').parent().is('p')
|
||||
$('a[href="https://freecatphotoapp.com"]').parent().is('p')
|
||||
);
|
||||
```
|
||||
|
||||
@ -84,11 +82,7 @@ assert(
|
||||
$('a[href="https://freecatphotoapp.com"]')
|
||||
.parent()
|
||||
.text()
|
||||
.match(/View\smore\s/gi) ||
|
||||
$('a[href="http://www.freecatphotoapp.com"]')
|
||||
.parent()
|
||||
.text()
|
||||
.match(/View\smore\s/gi)
|
||||
.match(/View\smore\s/gi)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: a9bd25c716030ec90084d8a1
|
||||
title: Chunky Monkey
|
||||
title: Monito Trocitos
|
||||
challengeType: 5
|
||||
forumTopicId: 16005
|
||||
dashedName: chunky-monkey
|
||||
@ -8,11 +8,11 @@ dashedName: chunky-monkey
|
||||
|
||||
# --description--
|
||||
|
||||
Write a function that splits an array (first argument) into groups the length of `size` (second argument) and returns them as a two-dimensional array.
|
||||
Escribe una función que divida un arreglo (primer argumento) en grupos de la longitud `size` (segundo argumento) y los devuelva como un arreglo bidimensional.
|
||||
|
||||
# --hints--
|
||||
|
||||
`chunkArrayInGroups(["a", "b", "c", "d"], 2)` should return `[["a", "b"], ["c", "d"]]`.
|
||||
`chunkArrayInGroups(["a", "b", "c", "d"], 2)` debe devolver `[["a", "b"], ["c", "d"]]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups(['a', 'b', 'c', 'd'], 2), [
|
||||
@ -21,7 +21,7 @@ assert.deepEqual(chunkArrayInGroups(['a', 'b', 'c', 'd'], 2), [
|
||||
]);
|
||||
```
|
||||
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)` should return `[[0, 1, 2], [3, 4, 5]]`.
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)` debe devolver `[[0, 1, 2], [3, 4, 5]]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [
|
||||
@ -30,7 +30,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [
|
||||
]);
|
||||
```
|
||||
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)` should return `[[0, 1], [2, 3], [4, 5]]`.
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)` debe devolver `[[0, 1], [2, 3], [4, 5]]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [
|
||||
@ -40,7 +40,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [
|
||||
]);
|
||||
```
|
||||
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)` should return `[[0, 1, 2, 3], [4, 5]]`.
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)` debe devolver `[[0, 1, 2, 3], [4, 5]]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [
|
||||
@ -49,7 +49,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [
|
||||
]);
|
||||
```
|
||||
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)` should return `[[0, 1, 2], [3, 4, 5], [6]]`.
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)` debe devolver `[[0, 1, 2], [3, 4, 5], [6]]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [
|
||||
@ -59,7 +59,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [
|
||||
]);
|
||||
```
|
||||
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)` should return `[[0, 1, 2, 3], [4, 5, 6, 7], [8]]`.
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)` debe devolver `[[0, 1, 2, 3], [4, 5, 6, 7], [8]]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [
|
||||
@ -69,7 +69,7 @@ assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [
|
||||
]);
|
||||
```
|
||||
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)` should return `[[0, 1], [2, 3], [4, 5], [6, 7], [8]]`.
|
||||
`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)` debe devolver `[[0, 1], [2, 3], [4, 5], [6, 7], [8]]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2), [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56533eb9ac21ba0edf2244b3
|
||||
title: Convert Celsius to Fahrenheit
|
||||
title: Convierte Celsius a Fahrenheit
|
||||
challengeType: 1
|
||||
forumTopicId: 16806
|
||||
dashedName: convert-celsius-to-fahrenheit
|
||||
@ -8,43 +8,43 @@ dashedName: convert-celsius-to-fahrenheit
|
||||
|
||||
# --description--
|
||||
|
||||
The algorithm to convert from Celsius to Fahrenheit is the temperature in Celsius times `9/5`, plus `32`.
|
||||
El algoritmo para convertir de Celsius a Fahrenheit es la temperatura en Celsius multiplicado por `9/5`, más `32`.
|
||||
|
||||
You are given a variable `celsius` representing a temperature in Celsius. Use the variable `fahrenheit` already defined and assign it the Fahrenheit temperature equivalent to the given Celsius temperature. Use the algorithm mentioned above to help convert the Celsius temperature to Fahrenheit.
|
||||
Se te da una variable `celsius` que representa una temperatura en Celsius. Utiliza la variable `fahrenheit` ya definida y asígnale la temperatura Fahrenheit equivalente a la temperatura Celsius dada. Utiliza el algoritmo mencionado arriba para ayudar a convertir la temperatura en Celsius a Fahrenheit.
|
||||
|
||||
# --hints--
|
||||
|
||||
`convertToF(0)` should return a number
|
||||
`convertToF(0)` debe devolver un número
|
||||
|
||||
```js
|
||||
assert(typeof convertToF(0) === 'number');
|
||||
```
|
||||
|
||||
`convertToF(-30)` should return a value of `-22`
|
||||
`convertToF(-30)` debe devolver un valor de `-22`
|
||||
|
||||
```js
|
||||
assert(convertToF(-30) === -22);
|
||||
```
|
||||
|
||||
`convertToF(-10)` should return a value of `14`
|
||||
`convertToF(-10)` debe devolver un valor de `14`
|
||||
|
||||
```js
|
||||
assert(convertToF(-10) === 14);
|
||||
```
|
||||
|
||||
`convertToF(0)` should return a value of `32`
|
||||
`convertToF(0)` debe devolver un valor de `32`
|
||||
|
||||
```js
|
||||
assert(convertToF(0) === 32);
|
||||
```
|
||||
|
||||
`convertToF(20)` should return a value of `68`
|
||||
`convertToF(20)` debe devolver un valor de `68`
|
||||
|
||||
```js
|
||||
assert(convertToF(20) === 68);
|
||||
```
|
||||
|
||||
`convertToF(30)` should return a value of `86`
|
||||
`convertToF(30)` debe devolver un valor de `86`
|
||||
|
||||
```js
|
||||
assert(convertToF(30) === 86);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: adf08ec01beb4f99fc7a68f2
|
||||
title: Falsy Bouncer
|
||||
title: Rebote falsy
|
||||
challengeType: 5
|
||||
forumTopicId: 16014
|
||||
dashedName: falsy-bouncer
|
||||
@ -8,33 +8,33 @@ dashedName: falsy-bouncer
|
||||
|
||||
# --description--
|
||||
|
||||
Remove all falsy values from an array.
|
||||
Quita todos los valores falsos de un arreglo.
|
||||
|
||||
Falsy values in JavaScript are `false`, `null`, `0`, `""`, `undefined`, and `NaN`.
|
||||
Los valores falsos en JavaScript son `false`, `null`, `0`, `""`, `undefined` y `NaN`.
|
||||
|
||||
Hint: Try converting each value to a Boolean.
|
||||
Sugerencia: Intenta convertir cada valor a booleano.
|
||||
|
||||
# --hints--
|
||||
|
||||
`bouncer([7, "ate", "", false, 9])` should return `[7, "ate", 9]`.
|
||||
`bouncer([7, "ate", "", false, 9])` debe devolver `[7, "ate", 9]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(bouncer([7, 'ate', '', false, 9]), [7, 'ate', 9]);
|
||||
```
|
||||
|
||||
`bouncer(["a", "b", "c"])` should return `["a", "b", "c"]`.
|
||||
`bouncer(["a", "b", "c"])` debe devolver `["a", "b", "c"]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(bouncer(['a', 'b', 'c']), ['a', 'b', 'c']);
|
||||
```
|
||||
|
||||
`bouncer([false, null, 0, NaN, undefined, ""])` should return `[]`.
|
||||
`bouncer([false, null, 0, NaN, undefined, ""])` debe devolver `[]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(bouncer([false, null, 0, NaN, undefined, '']), []);
|
||||
```
|
||||
|
||||
`bouncer([null, NaN, 1, 2, undefined])` should return `[1, 2]`.
|
||||
`bouncer([null, NaN, 1, 2, undefined])` debe devolver `[1, 2]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(bouncer([null, NaN, 1, 2, undefined]), [1, 2]);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: a789b3483989747d63b0e427
|
||||
title: Devolver los números mayores del arreglo
|
||||
title: Devuelve los números mayores en los arreglos
|
||||
challengeType: 5
|
||||
forumTopicId: 16042
|
||||
dashedName: return-largest-numbers-in-arrays
|
||||
@ -8,9 +8,9 @@ dashedName: return-largest-numbers-in-arrays
|
||||
|
||||
# --description--
|
||||
|
||||
Devuelve un arreglo que consista en el mayor número de cada sub-arreglo dada. Por simplicidad, el arreglo dado contendrá exactamente 4 sub-arreglos.
|
||||
Devuelve un arreglo que consista en el mayor número de cada sub-arreglo proporcionado. Por simplicidad, el arreglo dado contendrá exactamente 4 sub-arreglos.
|
||||
|
||||
Recuerde, usted puede iterar con cada arreglo con un simple bucle for, y acceder a cada miembro del arreglo con la sintaxis `arr[i]`.
|
||||
Recuerda, puedes iterar a través de un arreglo utilizando un simple bucle for, y acceder a cada miembro del arreglo con la sintaxis `arr[i]`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -41,7 +41,7 @@ assert.deepEqual(
|
||||
);
|
||||
```
|
||||
|
||||
`largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])` debe devolver`[9, 35, 97, 1000000]`.
|
||||
`largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])` debe devolver `[9, 35, 97, 1000000]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
|
||||
@ -18,7 +18,7 @@ Devuelve el arreglo resultante. Los arreglos de entrada deben permanecer iguales
|
||||
|
||||
# --hints--
|
||||
|
||||
`frankenSplice([1, 2, 3], [4, 5], 1)` debe devolver`[4, 1, 2, 3, 5]`.
|
||||
`frankenSplice([1, 2, 3], [4, 5], 1)` debe devolver `[4, 1, 2, 3, 5]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(frankenSplice([1, 2, 3], [4, 5], 1), [4, 1, 2, 3, 5]);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: a24c1a4622e3c05097f71d67
|
||||
title: Where do I Belong
|
||||
title: Dónde pertenezco
|
||||
challengeType: 5
|
||||
forumTopicId: 16094
|
||||
dashedName: where-do-i-belong
|
||||
@ -8,105 +8,105 @@ dashedName: where-do-i-belong
|
||||
|
||||
# --description--
|
||||
|
||||
Return the lowest index at which a value (second argument) should be inserted into an array (first argument) once it has been sorted. The returned value should be a number.
|
||||
Devuelve el índice mas bajo en el que un valor (segundo argumento) debe ser insertado en un arreglo (primer argumento) una vez que éste haya sido ordenado. El valor devuelto debe ser un número.
|
||||
|
||||
For example, `getIndexToIns([1,2,3,4], 1.5)` should return `1` because it is greater than `1` (index 0), but less than `2` (index 1).
|
||||
Por ejemplo, `getIndexToIns([1,2,3,4], 1.5)` debe devolver `1` por que este valor es más grande que `1` (índice 0), pero menor que `2` (índice 1).
|
||||
|
||||
Likewise, `getIndexToIns([20,3,5], 19)` should return `2` because once the array has been sorted it will look like `[3,5,20]` and `19` is less than `20` (index 2) and greater than `5` (index 1).
|
||||
De esta forma, `getIndexToIns([20,3,5], 19)` debe devolver `2` porque una vez ordenado el arreglo, éste se verá así `[3,5,20]` y `19` es menor que `20` (índice 2) y mayor que `5` (índice 1).
|
||||
|
||||
# --hints--
|
||||
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 35)` should return `3`.
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 35)` debe devolver `3`.
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([10, 20, 30, 40, 50], 35) === 3);
|
||||
```
|
||||
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 35)` should return a number.
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 35)` debe devolver un número.
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([10, 20, 30, 40, 50], 35) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 30)` should return `2`.
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 30)` debe devolver `2`.
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([10, 20, 30, 40, 50], 30) === 2);
|
||||
```
|
||||
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 30)` should return a number.
|
||||
`getIndexToIns([10, 20, 30, 40, 50], 30)` debe devolver un número.
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([10, 20, 30, 40, 50], 30) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([40, 60], 50)` should return `1`.
|
||||
`getIndexToIns([40, 60], 50)` debe devolver `1`.
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([40, 60], 50) === 1);
|
||||
```
|
||||
|
||||
`getIndexToIns([40, 60], 50)` should return a number.
|
||||
`getIndexToIns([40, 60], 50)` debe devolver un número.
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([40, 60], 50) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([3, 10, 5], 3)` should return `0`.
|
||||
`getIndexToIns([3, 10, 5], 3)` debe devolver `0`.
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([3, 10, 5], 3) === 0);
|
||||
```
|
||||
|
||||
`getIndexToIns([3, 10, 5], 3)` should return a number.
|
||||
`getIndexToIns([3, 10, 5], 3)` debe devolver un número.
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([3, 10, 5], 3) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([5, 3, 20, 3], 5)` should return `2`.
|
||||
`getIndexToIns([5, 3, 20, 3], 5)` debe devolver `2`.
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([5, 3, 20, 3], 5) === 2);
|
||||
```
|
||||
|
||||
`getIndexToIns([5, 3, 20, 3], 5)` should return a number.
|
||||
`getIndexToIns([5, 3, 20, 3], 5)` debe devolver un número.
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([5, 3, 20, 3], 5) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([2, 20, 10], 19)` should return `2`.
|
||||
`getIndexToIns([2, 20, 10], 19)` debe devolver `2`.
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([2, 20, 10], 19) === 2);
|
||||
```
|
||||
|
||||
`getIndexToIns([2, 20, 10], 19)` should return a number.
|
||||
`getIndexToIns([2, 20, 10], 19)` debe devolver un número.
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([2, 20, 10], 19) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([2, 5, 10], 15)` should return `3`.
|
||||
`getIndexToIns([2, 5, 10], 15)` debe devolver `3`.
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([2, 5, 10], 15) === 3);
|
||||
```
|
||||
|
||||
`getIndexToIns([2, 5, 10], 15)` should return a number.
|
||||
`getIndexToIns([2, 5, 10], 15)` debe devolver un número.
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([2, 5, 10], 15) === 'number');
|
||||
```
|
||||
|
||||
`getIndexToIns([], 1)` should return `0`.
|
||||
`getIndexToIns([], 1)` debe devolver `0`.
|
||||
|
||||
```js
|
||||
assert(getIndexToIns([], 1) === 0);
|
||||
```
|
||||
|
||||
`getIndexToIns([], 1)` should return a number.
|
||||
`getIndexToIns([], 1)` debe devolver un número.
|
||||
|
||||
```js
|
||||
assert(typeof getIndexToIns([], 1) === 'number');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b1a
|
||||
title: Access Property Names with Bracket Notation
|
||||
title: Accede a los nombres de propiedad con la notación de corchetes
|
||||
challengeType: 1
|
||||
forumTopicId: 301150
|
||||
dashedName: access-property-names-with-bracket-notation
|
||||
@ -8,28 +8,28 @@ dashedName: access-property-names-with-bracket-notation
|
||||
|
||||
# --description--
|
||||
|
||||
In the first object challenge we mentioned the use of bracket notation as a way to access property values using the evaluation of a variable. For instance, imagine that our `foods` object is being used in a program for a supermarket cash register. We have some function that sets the `selectedFood` and we want to check our `foods` object for the presence of that food. This might look like:
|
||||
En el primer desafío de objetos mencionamos el uso de notación de corchetes como una manera de acceder a los valores de una propiedad mediante la evaluación de una variable. Por ejemplo, imagina que nuestro objeto `foods` está siendo usado en un programa para una caja registradora de supermercado. Tenemos una función que establece `selectedFood` y queremos revisar en nuestro objeto `foods` si ese alimento está presente. Esto podría verse así:
|
||||
|
||||
```js
|
||||
let selectedFood = getCurrentFood(scannedItem);
|
||||
let inventory = foods[selectedFood];
|
||||
```
|
||||
|
||||
This code will evaluate the value stored in the `selectedFood` variable and return the value of that key in the `foods` object, or `undefined` if it is not present. Bracket notation is very useful because sometimes object properties are not known before runtime or we need to access them in a more dynamic way.
|
||||
El código evaluará el valor almacenado en la variable `selectedFood` y devolverá el valor de esa clave en el objeto `foods`, o `undefined` si no está presente. La notación de corchetes es muy útil porque a veces no conocemos las propiedades de los objetos antes de la ejecución o necesitamos acceder a ellos de una manera más dinámica.
|
||||
|
||||
# --instructions--
|
||||
|
||||
We've defined a function, `checkInventory`, which receives a scanned item as an argument. Return the current value of the `scannedItem` key in the `foods` object. You can assume that only valid keys will be provided as an argument to `checkInventory`.
|
||||
Hemos definido una función, `checkInventory`, que recibe como argumento un elemento escaneado. Devuelve el valor actual de la clave `scannedItem` en el objeto `foods`. Puedes asumir que sólo se proporcionarán claves válidas como argumento a `checkInventory`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`checkInventory` should be a function.
|
||||
`checkInventory` debe ser una función.
|
||||
|
||||
```js
|
||||
assert.strictEqual(typeof checkInventory, 'function');
|
||||
```
|
||||
|
||||
The `foods` object should have only the following key-value pairs: `apples: 25`, `oranges: 32`, `plums: 28`, `bananas: 13`, `grapes: 35`, `strawberries: 27`.
|
||||
El objeto `foods` debe tener solo los siguientes pares clave-valor: `apples: 25`, `oranges: 32`, `plums: 28`, `bananas: 13`, `grapes: 35`, `strawberries: 27`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(foods, {
|
||||
@ -42,19 +42,19 @@ assert.deepEqual(foods, {
|
||||
});
|
||||
```
|
||||
|
||||
`checkInventory("apples")` should return `25`.
|
||||
`checkInventory("apples")` debe devolver `25`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(checkInventory('apples'), 25);
|
||||
```
|
||||
|
||||
`checkInventory("bananas")` should return `13`.
|
||||
`checkInventory("bananas")` debe devolver `13`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(checkInventory('bananas'), 13);
|
||||
```
|
||||
|
||||
`checkInventory("strawberries")` should return `27`.
|
||||
`checkInventory("strawberries")` debe devolver `27`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(checkInventory('strawberries'), 27);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1e
|
||||
title: Generar un arreglo de todas las claves de los objetos con Object.keys()
|
||||
title: Genera un arreglo de todas las claves de los objetos con Object.keys()
|
||||
challengeType: 1
|
||||
forumTopicId: 301160
|
||||
dashedName: generate-an-array-of-all-object-keys-with-object-keys
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b7d367417b2b2512b1f
|
||||
title: Modificar un arreglo almacenado en un objeto
|
||||
title: Modifica un arreglo almacenado en un objeto
|
||||
challengeType: 1
|
||||
forumTopicId: 301163
|
||||
dashedName: modify-an-array-stored-in-an-object
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b19
|
||||
title: Modify an Object Nested Within an Object
|
||||
title: Modifica un objeto anidado dentro de un objeto
|
||||
challengeType: 1
|
||||
forumTopicId: 301164
|
||||
dashedName: modify-an-object-nested-within-an-object
|
||||
@ -8,7 +8,7 @@ dashedName: modify-an-object-nested-within-an-object
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's take a look at a slightly more complex object. Object properties can be nested to an arbitrary depth, and their values can be any type of data supported by JavaScript, including arrays and even other objects. Consider the following:
|
||||
Veamos ahora un objeto un poco más complejo. Las propiedades de los objetos pueden anidarse a una profundidad arbitraria, y sus valores pueden ser cualquier tipo de datos soportados por JavaScript, incluyendo arreglos e incluso otros objetos. Considera lo siguiente:
|
||||
|
||||
```js
|
||||
let nestedObject = {
|
||||
@ -26,7 +26,7 @@ let nestedObject = {
|
||||
};
|
||||
```
|
||||
|
||||
`nestedObject` has three properties: `id` (value is a number), `date` (value is a string), and `data` (value is an object with its nested structure). While structures can quickly become complex, we can still use the same notations to access the information we need. To assign the value `10` to the `busy` property of the nested `onlineStatus` object, we use dot notation to reference the property:
|
||||
`nestedObject` tiene tres propiedades: `id` (el valor es un número), `date` (el valor es una cadena), y `data` (el valor es un objeto con su estructura anidada). Aunque las estructuras pueden volverse rápidamente complejas, podemos seguir utilizando las mismas notaciones para acceder a la información que necesitamos. Para asignar el valor `10` a la propiedad `busy` del objeto anidado `onlineStatus`, utilizamos la notación de puntos para referenciar la propiedad:
|
||||
|
||||
```js
|
||||
nestedObject.data.onlineStatus.busy = 10;
|
||||
@ -34,11 +34,11 @@ nestedObject.data.onlineStatus.busy = 10;
|
||||
|
||||
# --instructions--
|
||||
|
||||
Here we've defined an object `userActivity`, which includes another object nested within it. Set the value of the `online` key to `45`.
|
||||
Aquí hemos definido un objeto `userActivity`, que incluye otro objeto anidado dentro de él. Establece el valor de la clave `online` en `45`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`userActivity` should have `id`, `date` and `data` properties.
|
||||
`userActivity` debe tener las propiedades `id`, `date` y `data`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -46,19 +46,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`userActivity` should have a `data` key set to an object with keys `totalUsers` and `online`.
|
||||
`userActivity` debe tener una clave `data` establecida en un objeto con las claves `totalUsers` y `online`.
|
||||
|
||||
```js
|
||||
assert('totalUsers' in userActivity.data && 'online' in userActivity.data);
|
||||
```
|
||||
|
||||
The `online` property nested in the `data` key of `userActivity` should be set to `45`
|
||||
La propiedad `online` anidada en la clave `data` de `userActivity` debe establecerse en `45`
|
||||
|
||||
```js
|
||||
assert(userActivity.data.online === 45);
|
||||
```
|
||||
|
||||
The `online` property should be set using dot or bracket notation.
|
||||
La propiedad `online` debe establecerse utilizando la notación de puntos o corchetes.
|
||||
|
||||
```js
|
||||
assert.strictEqual(code.search(/online: 45/), -1);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7b7c367417b2b2512b1b
|
||||
title: Use the delete Keyword to Remove Object Properties
|
||||
title: Usa la palabra clave "delete" para eliminar las propiedades de los objetos
|
||||
challengeType: 1
|
||||
forumTopicId: 301168
|
||||
dashedName: use-the-delete-keyword-to-remove-object-properties
|
||||
@ -8,11 +8,11 @@ dashedName: use-the-delete-keyword-to-remove-object-properties
|
||||
|
||||
# --description--
|
||||
|
||||
Now you know what objects are and their basic features and advantages. In short, they are key-value stores which provide a flexible, intuitive way to structure data, ***and***, they provide very fast lookup time. Throughout the rest of these challenges, we will describe several common operations you can perform on objects so you can become comfortable applying these useful data structures in your programs.
|
||||
Ahora ya sabes qué son los objetos y sus características y ventajas básicas. En resumen, son almacenes clave-valor que proporcionan una forma flexible e intuitiva de estructurar los datos, ***y***, proporcionan un tiempo de búsqueda muy rápido. A lo largo del resto de estos desafíos, describiremos varias operaciones comúnes que puedes realizar sobre los objetos para que te sientas cómodo aplicando estas útiles estructuras de datos en tus programas.
|
||||
|
||||
In earlier challenges, we have both added to and modified an object's key-value pairs. Here we will see how we can *remove* a key-value pair from an object.
|
||||
En desafíos anteriores, hemos agregado y modificado los pares clave-valor de un objeto. Aquí veremos cómo podemos *eliminar* un par clave-valor de un objeto.
|
||||
|
||||
Let's revisit our `foods` object example one last time. If we wanted to remove the `apples` key, we can remove it by using the `delete` keyword like this:
|
||||
Volvamos a nuestro ejemplo del objeto `foods` una última vez. Si quisiéramos eliminar la clave `apples`, podemos eliminarla utilizando la palabra clave `delete` de esta manera:
|
||||
|
||||
```js
|
||||
delete foods.apples;
|
||||
@ -20,11 +20,11 @@ delete foods.apples;
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the delete keyword to remove the `oranges`, `plums`, and `strawberries` keys from the `foods` object.
|
||||
Usa la palabra clave delete para eliminar las claves `oranges`, `plums` y `strawberries` del objeto `foods`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `foods` object should only have three keys: `apples`, `grapes`, and `bananas`.
|
||||
El objeto `foods` sólo debe tener tres claves: `apples`, `grapes` y `bananas`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,7 +35,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `oranges`, `plums`, and `strawberries` keys should be removed using `delete`.
|
||||
Las claves `oranges`, `plums` y `strawberries` deben ser eliminadas usando `delete`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 56104e9e514f539506016a5c
|
||||
title: Iterate Odd Numbers With a For Loop
|
||||
title: Itera números impares con un bucle "for"
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cm8n7T9'
|
||||
forumTopicId: 18212
|
||||
@ -9,9 +9,9 @@ dashedName: iterate-odd-numbers-with-a-for-loop
|
||||
|
||||
# --description--
|
||||
|
||||
For loops don't have to iterate one at a time. By changing our `final-expression`, we can count by even numbers.
|
||||
Los bucles "for" no tienen que iterar de uno en uno a la vez. Al cambiar nuestra `final-expression` (expresión final), podemos contar con números pares.
|
||||
|
||||
We'll start at `i = 0` and loop while `i < 10`. We'll increment `i` by 2 each loop with `i += 2`.
|
||||
Empezaremos en `i = 0` y realizaremos el bucle mientras `i < 10`. Incrementaremos `i` en 2 cada bucle utilizando `i += 2`.
|
||||
|
||||
```js
|
||||
var ourArray = [];
|
||||
@ -20,21 +20,21 @@ for (var i = 0; i < 10; i += 2) {
|
||||
}
|
||||
```
|
||||
|
||||
`ourArray` will now contain `[0,2,4,6,8]`. Let's change our `initialization` so we can count by odd numbers.
|
||||
`ourArray` ahora contendrá `[0,2,4,6,8]`. Cambiemos nuestra `initialization` (inicialización) para que podamos contar por números impares.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Push the odd numbers from 1 through 9 to `myArray` using a `for` loop.
|
||||
Inserta los números impares desde 1 hasta 9 en `myArray` utilizando un bucle `for`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should be using a `for` loop for this.
|
||||
Debes utilizar un bucle `for` para esto.
|
||||
|
||||
```js
|
||||
assert(/for\s*\([^)]+?\)/.test(code));
|
||||
```
|
||||
|
||||
`myArray` should equal `[1,3,5,7,9]`.
|
||||
`myArray` debe ser igual a `[1,3,5,7,9]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(myArray, [1, 3, 5, 7, 9]);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5675e877dbd60be8ad28edc6
|
||||
title: Iterate Through an Array with a For Loop
|
||||
title: Itera a través de un arreglo con un bucle "for"
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/caeR3HB'
|
||||
forumTopicId: 18216
|
||||
@ -9,7 +9,7 @@ dashedName: iterate-through-an-array-with-a-for-loop
|
||||
|
||||
# --description--
|
||||
|
||||
A common task in JavaScript is to iterate through the contents of an array. One way to do that is with a `for` loop. This code will output each element of the array `arr` to the console:
|
||||
Una tarea común en JavaScript es iterar a través del contenido de un arreglo. Una forma de hacerlo es con un bucle `for`. Este código mostrará cada elemento del arreglo `arr` en la consola:
|
||||
|
||||
```js
|
||||
var arr = [10, 9, 8, 7, 6];
|
||||
@ -18,33 +18,33 @@ for (var i = 0; i < arr.length; i++) {
|
||||
}
|
||||
```
|
||||
|
||||
Remember that arrays have zero-based indexing, which means the last index of the array is `length - 1`. Our condition for this loop is `i < arr.length`, which stops the loop when `i` is equal to `length`. In this case the last iteration is `i === 4` i.e. when `i` becomes equal to `arr.length` and outputs `6` to the console.
|
||||
Recuerda que los arreglos tienen una indexación basada en cero, lo que significa que el último índice del arreglo es igual a su longitud menos uno (`length - 1`). Nuestra condición para este bucle es `i < arr.length`, que detiene el bucle cuando `i` es igual a `length`. En este caso la última iteración es `i === 4`, es decir, cuando `i` es igual a `arr.length` e imprime `6` en la consola.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Declare and initialize a variable `total` to `0`. Use a `for` loop to add the value of each element of the `myArr` array to `total`.
|
||||
Declara e inicializa una variable `total` a `0`. Usa un bucle `for` para sumar el valor de cada elemento del arreglo `myArr` al `total`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`total` should be declared and initialized to 0.
|
||||
`total` debe declararse e inicializarse a 0.
|
||||
|
||||
```js
|
||||
assert(code.match(/(var|let|const)\s*?total\s*=\s*0.*?;?/));
|
||||
```
|
||||
|
||||
`total` should equal 20.
|
||||
`total` debe ser igual a 20.
|
||||
|
||||
```js
|
||||
assert(total === 20);
|
||||
```
|
||||
|
||||
You should use a `for` loop to iterate through `myArr`.
|
||||
Debes usar un bucle `for` para iterar a través de `myArr`.
|
||||
|
||||
```js
|
||||
assert(/for\s*\(/g.test(code) && /myArr\s*\[/g.test(code));
|
||||
```
|
||||
|
||||
You should not attempt to directly assign the value 20 to `total`.
|
||||
No debes intentar asignar directamente el valor 20 al `total`.
|
||||
|
||||
```js
|
||||
assert(!__helpers.removeWhiteSpace(code).match(/total[=+-]0*[1-9]+/gm));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a2efd662fb457916e1fe604
|
||||
title: Iterate with JavaScript Do...While Loops
|
||||
title: Itera con el bucle "do...while" de JavaScript
|
||||
challengeType: 1
|
||||
videoUrl: 'https://scrimba.com/c/cDqWGcp'
|
||||
forumTopicId: 301172
|
||||
@ -9,7 +9,7 @@ dashedName: iterate-with-javascript-do---while-loops
|
||||
|
||||
# --description--
|
||||
|
||||
The next type of loop you will learn is called a `do...while` loop. It is called a `do...while` loop because it will first `do` one pass of the code inside the loop no matter what, and then continue to run the loop `while` the specified condition evaluates to `true`.
|
||||
El siguiente tipo de bucle que aprenderás se llama bucle `do...while`. Se llama bucle `do...while` porque primero hace (`do`) una pasada por el código dentro del bucle sin importar qué, y luego continua ejecutando el bucle mientras (`while`) la condición especificada sea verdadera (`true`).
|
||||
|
||||
```js
|
||||
var ourArray = [];
|
||||
@ -20,7 +20,7 @@ do {
|
||||
} while (i < 5);
|
||||
```
|
||||
|
||||
The example above behaves similar to other types of loops, and the resulting array will look like `[0, 1, 2, 3, 4]`. However, what makes the `do...while` different from other loops is how it behaves when the condition fails on the first check. Let's see this in action: Here is a regular `while` loop that will run the code in the loop as long as `i < 5`:
|
||||
El ejemplo anterior se comporta de forma similar a otros tipos de bucles, siendo el arreglo resultante `[0, 1, 2, 3, 4]`. Sin embargo, lo que hace que el bucle `do...while` sea diferente a otros bucles es cómo se comporta cuando la condición falla en la primera verificación. Veamos esto en acción: Aquí puedes ver un bucle `while` que ejecutará el código una y otra vez siempre que `i < 5`:
|
||||
|
||||
```js
|
||||
var ourArray = [];
|
||||
@ -31,7 +31,7 @@ while (i < 5) {
|
||||
}
|
||||
```
|
||||
|
||||
In this example, we initialize the value of `ourArray` to an empty array and the value of `i` to 5. When we execute the `while` loop, the condition evaluates to `false` because `i` is not less than 5, so we do not execute the code inside the loop. The result is that `ourArray` will end up with no values added to it, and it will still look like `[]` when all of the code in the example above has completed running. Now, take a look at a `do...while` loop:
|
||||
En este ejemplo, inicializamos el valor de `ourArray` a un arreglo vacío y el valor de `i` a 5. Cuando ejecutamos el bucle `while`, la condición se evalúa como `false` porque `i` no es inferior a 5, así que no ejecutamos el código dentro del bucle. El resultado es que `ourArray` terminará sin valores añadidos, y todavía se verá como `[]` una vez el código del ejemplo anterior haya terminado de ejecutarse. Ahora, dale un vistazo a un bucle `do...while`:
|
||||
|
||||
```js
|
||||
var ourArray = [];
|
||||
@ -42,27 +42,27 @@ do {
|
||||
} while (i < 5);
|
||||
```
|
||||
|
||||
In this case, we initialize the value of `i` to 5, just like we did with the `while` loop. When we get to the next line, there is no condition to evaluate, so we go to the code inside the curly braces and execute it. We will add a single element to the array and then increment `i` before we get to the condition check. When we finally evaluate the condition `i < 5` on the last line, we see that `i` is now 6, which fails the conditional check, so we exit the loop and are done. At the end of the above example, the value of `ourArray` is `[5]`. Essentially, a `do...while` loop ensures that the code inside the loop will run at least once. Let's try getting a `do...while` loop to work by pushing values to an array.
|
||||
En este caso, inicializamos el valor de `i` a 5, tal como lo hicimos en el bucle `while`. Cuando lleguemos a la siguiente línea, no hay ninguna condición para evaluar, así que entramos al código dentro de las llaves y se ejecuta. Añadiremos un único elemento al arreglo y luego incrementaremos `i` antes de llegar a la verificación de la condición. Cuando finalmente evaluamos la condición `i < 5` en la última línea, vemos que el valor de `i` es ahora 6, por lo que falla la comprobación condicional. Salimos del bucle y hemos terminado. Al final del ejemplo anterior, el valor de `ourArray` es `[5]`. Esencialmente, un bucle `do...while` asegura que el código dentro del bucle se ejecute al menos una vez. Intentemos construir un bucle `do...while` para que funcione empujando valores a un arreglo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the `while` loop in the code to a `do...while` loop so the loop will push only the number `10` to `myArray`, and `i` will be equal to `11` when your code has finished running.
|
||||
Cambia el bucle `while` en el código por un bucle `do...while`. El bucle solo enviará el número `10` a `myArray`, e `i` será igual a `11` cuando tu código haya terminado de ejecutarse.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should be using a `do...while` loop for this exercise.
|
||||
Debes utilizar el bucle `do...while` para este ejercicio.
|
||||
|
||||
```js
|
||||
assert(code.match(/do/g));
|
||||
```
|
||||
|
||||
`myArray` should equal `[10]`.
|
||||
`myArray` debe ser igual a `[10]`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(myArray, [10]);
|
||||
```
|
||||
|
||||
`i` should equal `11`
|
||||
`i` debe ser igual a `11`
|
||||
|
||||
```js
|
||||
assert.equal(i, 11);
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: prevent-infinite-loops-with-a-valid-terminal-condition
|
||||
|
||||
El último tema es el temido bucle infinito. Los bucles son una gran herramienta cuando necesitas que tu programa ejecute un bloque de código un determinado número de veces o hasta que se cumpla una condición, pero necesitan una condición terminal para que finalice el bucle. Los bucles infinitos pueden congelar o bloquear el navegador, y causar un caos en la ejecución del programa en general, lo que nadie quiere.
|
||||
|
||||
Había un ejemplo de un bucle infinito en la introducción de esta sección - no tenía ninguna condición terminal para salir del bucle `while` dentro de `loopy()`. ¡NO llames a esta función!
|
||||
Había un ejemplo de un bucle infinito en la introducción de esta sección - no tenía ninguna condición terminal para salir del bucle `while` dentro de `loopy()`. ¡NO llames esta función!
|
||||
|
||||
```js
|
||||
function loopy() {
|
||||
|
||||
Reference in New Issue
Block a user