chore: update translations (#41737)
This commit is contained in:
@ -27,7 +27,7 @@ RGB 值与我们之前学到的十六进制编码不同。`RGB` 值不需要用
|
|||||||
|
|
||||||
如果我们稍微计算一下,就不难发现这两种表示方式本质上是等价的。在十六进制编码中,我们用两个十六进制数表示一个颜色;这样,每种颜色都有 16 \* 16(即 256)种可能。 所以,`RGB` 从零开始计算,与十六进制代码的值的数量完全相同。
|
如果我们稍微计算一下,就不难发现这两种表示方式本质上是等价的。在十六进制编码中,我们用两个十六进制数表示一个颜色;这样,每种颜色都有 16 \* 16(即 256)种可能。 所以,`RGB` 从零开始计算,与十六进制代码的值的数量完全相同。
|
||||||
|
|
||||||
下面是通过使用 RGB 值设置背景颜色为橘色的例子:
|
下面是通过使用 RGB 值设置背景颜色为橘色的例子:`body`。
|
||||||
|
|
||||||
```css
|
```css
|
||||||
body {
|
body {
|
||||||
@ -47,7 +47,7 @@ body {
|
|||||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||||
```
|
```
|
||||||
|
|
||||||
`body` 元素的背景颜色的属性值应使用 `rgb` 值。
|
您应该使用 `rgb` 给您的 `body` 元素黑色背景。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
|
assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
|
||||||
|
@ -24,7 +24,14 @@ dashedName: create-a-set-of-radio-buttons
|
|||||||
</label>
|
</label>
|
||||||
```
|
```
|
||||||
|
|
||||||
最佳实践是在 `label` 元素上设置 `for` 属性,让其值与相关联的 `input` 单选按钮的 `id` 属性值相同。 这使得辅助技术能够在标签和子项 `input` 元素之间建立关联关系。 例如:
|
最佳实践是在 `label` 元素上设置 `for` 属性,让其值与相关联的 `input` 单选按钮的 `id` 属性值相同。 这使得辅助技术能够在标签和相关的 `input` 元素之间建立关联关系。 例如:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<input id="indoor" type="radio" name="indoor-outdoor">
|
||||||
|
<label for="indoor">Indoor</label>
|
||||||
|
```
|
||||||
|
|
||||||
|
我们也可以在 `label` 标签中嵌入 `input` 元素:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<label for="indoor">
|
<label for="indoor">
|
||||||
@ -86,7 +93,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
所有的单选按钮都应该包含在 `form` 表单中。
|
所有的单选按钮都应该包含在 `form` 标签中。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||||
|
@ -13,13 +13,17 @@ dashedName: add-new-properties-to-a-javascript-object
|
|||||||
|
|
||||||
这里展示了如何给 `ourDog` 添加一个属性 `bark`:
|
这里展示了如何给 `ourDog` 添加一个属性 `bark`:
|
||||||
|
|
||||||
`ourDog.bark = "bow-wow";`
|
```js
|
||||||
|
ourDog.bark = "bow-wow";
|
||||||
|
```
|
||||||
|
|
||||||
或者
|
或者
|
||||||
|
|
||||||
`ourDog["bark"] = "bow-wow";`
|
```js
|
||||||
|
ourDog["bark"] = "bow-wow";
|
||||||
|
```
|
||||||
|
|
||||||
现在,当我们执行 `ourDog.bark` 时,我们就能得到他的叫声,`bow-wow`。
|
现在,当我们执行 `ourDog.bark` 时,就能得到他的叫声,`bow-wow`。
|
||||||
|
|
||||||
例如:
|
例如:
|
||||||
|
|
||||||
@ -36,17 +40,17 @@ ourDog.bark = "bow-wow";
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
给 `myDog` 添加一个属性 `bark` ,并将其设置为狗的声音,比如“woof“. 你可以使用点号表示法或方括号表示法来完成此挑战。
|
给 `myDog` 添加一个属性 `bark` ,并将其设置为狗的声音,比如 “woof“。 可以使用点操作符或者中括号操作符。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
你应该将属性 `bark` 添加到 `myDog`。
|
应该给 `myDog` 添加属性 `bark`。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(myDog.bark !== undefined);
|
assert(myDog.bark !== undefined);
|
||||||
```
|
```
|
||||||
|
|
||||||
你不应该在 Setup 部分添加 `bark`。
|
不应该在初始化部分添加 `bark`。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(!/bark[^\n]:/.test(code));
|
assert(!/bark[^\n]:/.test(code));
|
||||||
|
@ -13,13 +13,15 @@ dashedName: assignment-with-a-returned-value
|
|||||||
|
|
||||||
假设我们有一个预先定义的函数 `sum` ,它将两个数相加,然后:
|
假设我们有一个预先定义的函数 `sum` ,它将两个数相加,然后:
|
||||||
|
|
||||||
`ourSum = sum(5, 12);`
|
```js
|
||||||
|
ourSum = sum(5, 12);
|
||||||
|
```
|
||||||
|
|
||||||
将会调用函数 `sum`,函数返回值 `17`,然后将该值赋给变量 `ourSum`。
|
将会调用函数 `sum`,函数返回值 `17`,然后将该值赋给变量 `ourSum`。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
调用函数 `processArg`,传入参数 `7`,并将它的返回值赋给变量 `processed`。
|
调用 `processArg` 函数,参数为 `7`,然后把返回的值赋值给变量 `processed`。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
@ -29,7 +31,7 @@ dashedName: assignment-with-a-returned-value
|
|||||||
assert(processed === 2);
|
assert(processed === 2);
|
||||||
```
|
```
|
||||||
|
|
||||||
你应该将 `processArg` 赋值给 `processed`。
|
应该将 `processArg` 赋值给 `processed`。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(/processed\s*=\s*processArg\(\s*7\s*\)/.test(code));
|
assert(/processed\s*=\s*processArg\(\s*7\s*\)/.test(code));
|
||||||
|
@ -11,9 +11,11 @@ dashedName: compound-assignment-with-augmented-addition
|
|||||||
|
|
||||||
在编程中,通常通过赋值来修改变量的内容。 记住,赋值时 JavaScript 会先计算等号右边的内容,所以我们可以写这样的语句:
|
在编程中,通常通过赋值来修改变量的内容。 记住,赋值时 JavaScript 会先计算等号右边的内容,所以我们可以写这样的语句:
|
||||||
|
|
||||||
`myVar = myVar + 5;`
|
```js
|
||||||
|
myVar = myVar + 5;
|
||||||
|
```
|
||||||
|
|
||||||
给 `myVar` 加上 `5`。 以上是最常见的运算赋值语句,即先运算、再赋值。还有一类操作符是一步到位既做运算也赋值的。
|
给 `myVar` 加上 `5`。 这是最常见的运算赋值语句,即先运算、再赋值。还有一类操作符是一步到位,既做运算也赋值的。
|
||||||
|
|
||||||
其中一种就是 `+=` 运算符。
|
其中一种就是 `+=` 运算符。
|
||||||
|
|
||||||
@ -23,11 +25,11 @@ myVar += 5;
|
|||||||
console.log(myVar);
|
console.log(myVar);
|
||||||
```
|
```
|
||||||
|
|
||||||
字符串 `6` 将会出现在控制台中。
|
控制台将会显示 `6`。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
使用 `+=` 操作符对 `a`、`b` 和 `c` 实现同样的效果。
|
使用 `+=` 操作符对 `a`、`b` 和 `c` 赋值。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -11,11 +11,15 @@ dashedName: compound-assignment-with-augmented-division
|
|||||||
|
|
||||||
`/=` 操作符是让变量与另一个数相除并赋值。
|
`/=` 操作符是让变量与另一个数相除并赋值。
|
||||||
|
|
||||||
`myVar = myVar / 5;`
|
```js
|
||||||
|
myVar = myVar / 5;
|
||||||
|
```
|
||||||
|
|
||||||
变量 `myVar` 等于自身除以 `5` 的值。 等价于:
|
将 `myVar` 除以 `5`。 等价于:
|
||||||
|
|
||||||
`myVar /= 5;`
|
```js
|
||||||
|
myVar /= 5;
|
||||||
|
```
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
|
@ -11,15 +11,19 @@ dashedName: compound-assignment-with-augmented-multiplication
|
|||||||
|
|
||||||
`*=` 操作符是让变量与一个数相乘并赋值。
|
`*=` 操作符是让变量与一个数相乘并赋值。
|
||||||
|
|
||||||
`myVar = myVar * 5;`
|
```js
|
||||||
|
myVar = myVar * 5;
|
||||||
|
```
|
||||||
|
|
||||||
变量 `myVar` 等于自身与数值 `5` 相乘的值。 也可以写作这样的形式:
|
将 `myVar` 乘以 `5`。 等价于:
|
||||||
|
|
||||||
`myVar *= 5;`
|
```js
|
||||||
|
myVar *= 5;
|
||||||
|
```
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
使用 `*=` 操作符给 `a`,`b` 和 `c` 实现赋值相乘操作。
|
使用 `*=` 操作符对 `a`、`b` 和 `c` 实现赋值相乘操作。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -11,15 +11,19 @@ dashedName: compound-assignment-with-augmented-subtraction
|
|||||||
|
|
||||||
与 `+=` 操作符类似,`-=` 操作符用来对一个变量进行减法赋值操作。
|
与 `+=` 操作符类似,`-=` 操作符用来对一个变量进行减法赋值操作。
|
||||||
|
|
||||||
`myVar = myVar - 5;`
|
```js
|
||||||
|
myVar = myVar - 5;
|
||||||
|
```
|
||||||
|
|
||||||
变量 `myVar` 等于自身减去 `5` 的值。 也可以写成这种形式:
|
将从 `myVar` 中减去 `5`。 等价于:
|
||||||
|
|
||||||
`myVar -= 5;`
|
```js
|
||||||
|
myVar -= 5;
|
||||||
|
```
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
使用 `-=` 操作符对 `a`,`b` 和 `c` 实现相减赋值。
|
使用 `-=` 操作符对 `a`、`b` 和 `c` 实现相减赋值操作。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -22,7 +22,7 @@ for (var i = 10; i > 0; i -= 2) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
循环结束后,`ourArray` 的值为 `[10,8,6,4,2]`。 让我们改变 initialization 和 final-expression,这样我们就可以按照奇数从后往前两两倒着数。
|
循环结束后,`ourArray` 的值为 `[10,8,6,4,2]`。 让我们改变初始值和最后的表达式,这样我们就可以按照奇数从后往前两两倒着数。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
|
@ -17,9 +17,7 @@ dashedName: counting-cards
|
|||||||
|
|
||||||
请写一个函数实现 21 点算法。 它根据参数 `card` 的值(见表格,可能是数字或者字符串)来递增或递减全局变量 `count`。 然后函数返回一个由当前 count(计数)和 `Bet`(当 count > 0 时)或 `Hold`(当 count <= 0 时) 拼接的字符串。 注意 count(计数)和玩家的决定(`Bet` 或 `Hold`)之间应该有空格。
|
请写一个函数实现 21 点算法。 它根据参数 `card` 的值(见表格,可能是数字或者字符串)来递增或递减全局变量 `count`。 然后函数返回一个由当前 count(计数)和 `Bet`(当 count > 0 时)或 `Hold`(当 count <= 0 时) 拼接的字符串。 注意 count(计数)和玩家的决定(`Bet` 或 `Hold`)之间应该有空格。
|
||||||
|
|
||||||
**示例输出:**
|
**示例输出:**`-3 Hold` 或者 `5 Bet`
|
||||||
`-3 Hold`
|
|
||||||
`5 Bet`
|
|
||||||
|
|
||||||
**提示:**
|
**提示:**
|
||||||
当卡牌为 7、8、9 时,不要把 `count` 值重置为 0。 不要返回一个数组。
|
当卡牌为 7、8、9 时,不要把 `count` 值重置为 0。 不要返回一个数组。
|
||||||
|
@ -11,17 +11,19 @@ dashedName: declare-string-variables
|
|||||||
|
|
||||||
之前我们写过这样的代码:
|
之前我们写过这样的代码:
|
||||||
|
|
||||||
`var myName = "your name";`
|
```js
|
||||||
|
var myName = "your name";
|
||||||
|
```
|
||||||
|
|
||||||
`"your name"` 被称作<dfn>字符串</dfn><dfn>变量</dfn>。 字符串是用单引号或双引号包裹起来的一连串的零个或多个字符。
|
`"your name"` 被称作<dfn>字符串</dfn><dfn>字面量</dfn>。 这是一个字符串,因为它是一系列包含在单引号或双引号中的零或多个字符。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
创建两个新的 string 变量:`myFirstName` 和 `myLastName`,并用你的姓和名分别为它们赋值。
|
创建两个新的字符串变量:`myFirstName` 和 `myLastName`,并用你的姓和名分别为它们赋值。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
`myFirstName` 应该是一个字符串,并且至少包含一个字符。
|
`myFirstName` 应该是一个字符串,至少包含一个字符。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -39,7 +41,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
`myLastName` 应该是一个字符串,并且至少包含一个字符。
|
`myLastName` 应该是一个字符串,至少包含一个字符。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -9,19 +9,23 @@ dashedName: decrement-a-number-with-javascript
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
使用自减符号`--`,你可以很方便地对一个变量执行<dfn>自减</dfn>或者 -1 运算。
|
使用自减符号 `--`,你可以很方便地对一个变量执行<dfn>自减</dfn>或者 -1 运算。
|
||||||
|
|
||||||
`i--;`
|
```js
|
||||||
|
i--;
|
||||||
|
```
|
||||||
|
|
||||||
等效于
|
等效于:
|
||||||
|
|
||||||
`i = i - 1;`
|
```js
|
||||||
|
i = i - 1;
|
||||||
|
```
|
||||||
|
|
||||||
**提示** `i--;` 这种写法,省去了书写等号的必要。
|
**注意:**`i--;` 这种写法省去了书写等号的必要。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
重写代码,使用 `--` 符号对 `myVar` 执行自减操作。
|
修改代码,使用 `--` 符号对 `myVar` 执行自减操作。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
@ -31,7 +35,7 @@ dashedName: decrement-a-number-with-javascript
|
|||||||
assert(myVar === 10);
|
assert(myVar === 10);
|
||||||
```
|
```
|
||||||
|
|
||||||
`myVar = myVar - 1;` 语句应该被修改。
|
应该修改 `myVar = myVar - 1;`。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -39,13 +43,13 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
对 `myVar` 使用 `--` 运算符。
|
应该对 `myVar` 使用 `--` 运算符。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(/[-]{2}\s*myVar|myVar\s*[-]{2}/.test(code));
|
assert(/[-]{2}\s*myVar|myVar\s*[-]{2}/.test(code));
|
||||||
```
|
```
|
||||||
|
|
||||||
不要修改注释上面的代码。
|
不应修改注释上方的代码。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(/var myVar = 11;/.test(code));
|
assert(/var myVar = 11;/.test(code));
|
||||||
|
@ -11,7 +11,9 @@ dashedName: delete-properties-from-a-javascript-object
|
|||||||
|
|
||||||
我们同样可以删除对象的属性,例如:
|
我们同样可以删除对象的属性,例如:
|
||||||
|
|
||||||
`delete ourDog.bark;`
|
```js
|
||||||
|
delete ourDog.bark;
|
||||||
|
```
|
||||||
|
|
||||||
例如:
|
例如:
|
||||||
|
|
||||||
|
@ -13,17 +13,23 @@ dashedName: escaping-literal-quotes-in-strings
|
|||||||
|
|
||||||
在 JavaScript 中,可以通过在引号前面使用<dfn>反斜杠</dfn>(`\`)来<dfn>转义</dfn>引号。
|
在 JavaScript 中,可以通过在引号前面使用<dfn>反斜杠</dfn>(`\`)来<dfn>转义</dfn>引号。
|
||||||
|
|
||||||
`var sampleStr = "Alan said, \"Peter is learning JavaScript\".";`
|
```js
|
||||||
|
var sampleStr = "Alan said, \"Peter is learning JavaScript\".";
|
||||||
|
```
|
||||||
|
|
||||||
有了转义符号,JavaScript 就知道这个单引号或双引号并不是字符串的结尾,而是字符串内的字符。 所以,上面的字符串打印到控制台的结果为:
|
有了转义符号,JavaScript 就知道这个单引号或双引号并不是字符串的结尾,而是字符串内的字符。 所以,上面的字符串打印到控制台的结果为:
|
||||||
|
|
||||||
`Alan said, "Peter is learning JavaScript".`
|
```js
|
||||||
|
Alan said, "Peter is learning JavaScript".
|
||||||
|
```
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
使用<dfn>反斜杠</dfn>将一个字符串赋值给变量 `myStr`,打印到控制台,输出为:
|
使用<dfn>反斜杠</dfn>给 `myStr` 变量赋值一个字符串,这样如果你要打印它到控制台,将会看到:
|
||||||
|
|
||||||
`I am a "double quoted" string inside "double quotes".`
|
```js
|
||||||
|
I am a "double quoted" string inside "double quotes".
|
||||||
|
```
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
@ -33,7 +39,7 @@ dashedName: escaping-literal-quotes-in-strings
|
|||||||
assert(code.match(/\\"/g).length === 4 && code.match(/[^\\]"/g).length === 2);
|
assert(code.match(/\\"/g).length === 4 && code.match(/[^\\]"/g).length === 2);
|
||||||
```
|
```
|
||||||
|
|
||||||
变量 myStr 应该包含字符串 `I am a "double quoted" string inside "double quotes".`。
|
变量 myStr 应该包含字符串 `I am a "double quoted" string inside "double quotes".`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(/I am a "double quoted" string inside "double quotes(\."|"\.)$/.test(myStr));
|
assert(/I am a "double quoted" string inside "double quotes(\."|"\.)$/.test(myStr));
|
||||||
|
@ -17,13 +17,15 @@ dashedName: generate-random-whole-numbers-with-javascript
|
|||||||
|
|
||||||
把操作连缀起来,代码类似于下面:
|
把操作连缀起来,代码类似于下面:
|
||||||
|
|
||||||
`Math.floor(Math.random() * 20);`
|
```js
|
||||||
|
Math.floor(Math.random() * 20);
|
||||||
|
```
|
||||||
|
|
||||||
我们先调用 `Math.random()`,把它的结果乘以 20,然后把上一步的结果传给 `Math.floor()`,最终通过向下取整获得最近的整数。
|
我们先调用 `Math.random()`,把它的结果乘以 20,然后把上一步的结果传给 `Math.floor()`,最终通过向下取整获得最近的整数。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
生成一个 `0` 到 `9` 之间的随机整数。
|
使用这个方法生成并返回 `0` 和 `9` 之间的随机整数。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
@ -39,7 +41,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
需要使用 `Math.random` 生成一个随机数字。
|
应该使用 `Math.random` 生成一个随机数字。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/Math.random/g).length >= 1);
|
assert(code.match(/Math.random/g).length >= 1);
|
||||||
@ -54,7 +56,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
需要使用 `Math.floor` 移除数字中的小数部分。
|
应该使用 `Math.floor` 来删除数字的十进制部分。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/Math.floor/g).length >= 1);
|
assert(code.match(/Math.floor/g).length >= 1);
|
||||||
|
@ -15,11 +15,13 @@ dashedName: generate-random-whole-numbers-within-a-range
|
|||||||
|
|
||||||
下面是我们将要使用的方法, 仔细看看并尝试理解这行代码到底在干嘛:
|
下面是我们将要使用的方法, 仔细看看并尝试理解这行代码到底在干嘛:
|
||||||
|
|
||||||
`Math.floor(Math.random() * (max - min + 1)) + min`
|
```js
|
||||||
|
Math.floor(Math.random() * (max - min + 1)) + min
|
||||||
|
```
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
创建一个函数 `randomRange`,接收参数的范围在 `myMin` 和 `myMax`之间,返回一个在 `myMin`(包括 myMin)和 `myMax`(包括 myMax)之间的随机整数。
|
创建一个函数 `randomRange`,参数为 `myMin` 和 `myMax`,返回一个在 `myMin`(包括 myMin)和 `myMax`(包括 myMax)之间的随机整数。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
@ -29,7 +31,7 @@ dashedName: generate-random-whole-numbers-within-a-range
|
|||||||
assert(calcMin === 5);
|
assert(calcMin === 5);
|
||||||
```
|
```
|
||||||
|
|
||||||
`randomRange` 返回的随机数最大值应该等于 `myMax`。
|
`randomRange` 返回的随机数应该小于或等于 `myMax`。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(calcMax === 15);
|
assert(calcMax === 15);
|
||||||
|
@ -11,21 +11,25 @@ dashedName: increment-a-number-with-javascript
|
|||||||
|
|
||||||
使用 `++`,我们可以很容易地对变量进行<dfn>自增</dfn>或者 +1 运算。
|
使用 `++`,我们可以很容易地对变量进行<dfn>自增</dfn>或者 +1 运算。
|
||||||
|
|
||||||
`i++;`
|
```js
|
||||||
|
i++;
|
||||||
|
```
|
||||||
|
|
||||||
等效于
|
等效于:
|
||||||
|
|
||||||
`i = i + 1;`
|
```js
|
||||||
|
i = i + 1;
|
||||||
|
```
|
||||||
|
|
||||||
**提示** `i++;` 这种写法,省去了书写等号的必要。
|
**注意:**`i++;` 这种写法省去了书写等号的必要。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
重写代码,使用 `++` 来对变量 `myVar` 进行自增操作。
|
修改代码,使用 `++` 来对变量 `myVar` 进行自增操作。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
`myVar` should equal `88`.
|
`myVar` 应该等于 `88`。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(myVar === 88);
|
assert(myVar === 88);
|
||||||
@ -39,13 +43,13 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
使用 `++` 运算符。
|
应该使用 `++` 运算符。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(/[+]{2}\s*myVar|myVar\s*[+]{2}/.test(code));
|
assert(/[+]{2}\s*myVar|myVar\s*[+]{2}/.test(code));
|
||||||
```
|
```
|
||||||
|
|
||||||
不要修改注释上面的代码。
|
不应该修改注释上面的代码。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(/var myVar = 87;/.test(code));
|
assert(/var myVar = 87;/.test(code));
|
||||||
|
@ -11,17 +11,19 @@ dashedName: initializing-variables-with-the-assignment-operator
|
|||||||
|
|
||||||
通常在声明变量的时候会给变量<dfn>初始化</dfn>一个初始值。
|
通常在声明变量的时候会给变量<dfn>初始化</dfn>一个初始值。
|
||||||
|
|
||||||
`var myVar = 0;`
|
```js
|
||||||
|
var myVar = 0;
|
||||||
|
```
|
||||||
|
|
||||||
创建一个名为 `myVar` 的变量,并指定其初始值 `0`。
|
创建一个名为 `myVar` 的变量,并指定其初始值为 `0`。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
通过关键字 `var` 定义一个变量 `a`,并给它一个初始值 `9`。
|
通过关键字 `var` 定义一个变量 `a`,并且给它一个初始值 `9`。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
你需要初始化 `a` 的值为 `9`。
|
应该初始化 `a` 的值为 `9`。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(/var\s+a\s*=\s*9(\s*;?\s*)$/.test(code));
|
assert(/var\s+a\s*=\s*9(\s*;?\s*)$/.test(code));
|
||||||
|
@ -13,31 +13,33 @@ dashedName: shopping-list
|
|||||||
|
|
||||||
每个子数组中的第一个元素应该是购买的物品名称。 第二个元素应该是物品的数量,类似于:
|
每个子数组中的第一个元素应该是购买的物品名称。 第二个元素应该是物品的数量,类似于:
|
||||||
|
|
||||||
`["Chocolate Bar", 15]`
|
```js
|
||||||
|
["Chocolate Bar", 15]
|
||||||
|
```
|
||||||
|
|
||||||
任务:你的购物清单至少应该有 5 个子数组。
|
列表中应至少有 5 个子数组。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
`myList` 应该是一个数组
|
`myList` 应该是一个数组。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(isArray);
|
assert(isArray);
|
||||||
```
|
```
|
||||||
|
|
||||||
你的每个子数组的第一个元素的类型都应该是字符串
|
每个子数组的第一个元素都应该是字符串。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(hasString);
|
assert(hasString);
|
||||||
```
|
```
|
||||||
|
|
||||||
你的每个子数组的第二个元素的类型都应该是数字
|
每个子数组的第二个元素都应该是数字。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(hasNumber);
|
assert(hasNumber);
|
||||||
```
|
```
|
||||||
|
|
||||||
你的列表中至少要包含 5 个元素
|
列表中至少要包含 5 个元素。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(count > 4);
|
assert(count > 4);
|
||||||
|
@ -13,7 +13,9 @@ dashedName: store-multiple-values-in-one-variable-using-javascript-arrays
|
|||||||
|
|
||||||
以左方括号开始定义一个数组,以右方括号结束,里面每个元素之间用逗号隔开,例如:
|
以左方括号开始定义一个数组,以右方括号结束,里面每个元素之间用逗号隔开,例如:
|
||||||
|
|
||||||
`var sandwich = ["peanut butter", "jelly", "bread"]`
|
```js
|
||||||
|
var sandwich = ["peanut butter", "jelly", "bread"]
|
||||||
|
```
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
@ -21,7 +23,7 @@ dashedName: store-multiple-values-in-one-variable-using-javascript-arrays
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
`myArray`应该是一个数组(`array`)。
|
`myArray` 应该是一个数组(`array`)。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(typeof myArray == 'object');
|
assert(typeof myArray == 'object');
|
||||||
|
@ -11,18 +11,20 @@ dashedName: storing-values-with-the-assignment-operator
|
|||||||
|
|
||||||
在 JavaScript 中,你可以使用赋值(<dfn>assignment</dfn>)运算符 (`=`)将值存储在变量中。
|
在 JavaScript 中,你可以使用赋值(<dfn>assignment</dfn>)运算符 (`=`)将值存储在变量中。
|
||||||
|
|
||||||
`myVariable = 5;`
|
```js
|
||||||
|
myVariable = 5;
|
||||||
|
```
|
||||||
|
|
||||||
这条语句把 `Number` 类型的值 `5` 赋给变量 `myVariable`。
|
这条语句把 `Number` 类型的值 `5` 赋给变量 `myVariable`。
|
||||||
|
|
||||||
在将值分配给运算符左侧的变量之前,将解析 `=` 运算符右侧的所有内容。
|
在将值赋给运算符左侧的变量之前,将先执行 `=` 运算符右侧的所有运算。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var myVar;
|
var myVar;
|
||||||
myVar = 5;
|
myVar = 5;
|
||||||
```
|
```
|
||||||
|
|
||||||
首先,此代码创建一个名为 `myVar` 的变量。 数值 `5` 被赋给变量 `myVar`。 现在,如果 `myVar` 再次出现在代码中,程序将会将它视为 `5`。
|
首先,此代码创建一个名为 `myVar` 的变量。 然后,数值 `5` 被赋给变量 `myVar`。 现在,如果 `myVar` 再次出现在代码中,程序将会将它视为 `5`。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
@ -30,7 +32,7 @@ myVar = 5;
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
你不应该修改注释上面的代码。
|
不应该修改注释上面的代码。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(/var a;/.test(code));
|
assert(/var a;/.test(code));
|
||||||
|
@ -13,45 +13,49 @@ dashedName: use-the-parseint-function-with-a-radix
|
|||||||
|
|
||||||
函数调用如下所示:
|
函数调用如下所示:
|
||||||
|
|
||||||
`parseInt(string, radix);`
|
```js
|
||||||
|
parseInt(string, radix);
|
||||||
|
```
|
||||||
|
|
||||||
示例:
|
这是一个示例:
|
||||||
|
|
||||||
`var a = parseInt("11", 2);`
|
```js
|
||||||
|
var a = parseInt("11", 2);
|
||||||
|
```
|
||||||
|
|
||||||
参数 2 表示 `11` 使用二进制数。 此示例将字符串 `11` 转换为整数 `3`。
|
变量 radix 表示 `11` 是在二进制系统中。 这个示例将字符串 `11` 转换为整数 `3`。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
在 `convertToInteger` 函数中使用 `parseInt()` 将二进制数转换为正数并返回。
|
在 `convertToInteger` 函数中使用 `parseInt()` ,将二进制数转换为整数并返回。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
`convertToInteger` 中应该使用 `parseInt()` 函数
|
`convertToInteger` 应该使用 `parseInt()` 函数。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(/parseInt/g.test(code));
|
assert(/parseInt/g.test(code));
|
||||||
```
|
```
|
||||||
|
|
||||||
`convertToInteger("10011")` 应该返回一个数字
|
`convertToInteger("10011")` 应该返回一个数字。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(typeof convertToInteger('10011') === 'number');
|
assert(typeof convertToInteger('10011') === 'number');
|
||||||
```
|
```
|
||||||
|
|
||||||
`convertToInteger("10011")` 应该返回 19
|
`convertToInteger("10011")` 应该返回 19。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(convertToInteger('10011') === 19);
|
assert(convertToInteger('10011') === 19);
|
||||||
```
|
```
|
||||||
|
|
||||||
`convertToInteger("111001")` 应该返回 57
|
`convertToInteger("111001")` 应该返回 57。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(convertToInteger('111001') === 57);
|
assert(convertToInteger('111001') === 57);
|
||||||
```
|
```
|
||||||
|
|
||||||
`convertToInteger("JamesBond")` 应该返回 `NaN`
|
`convertToInteger("JamesBond")`应该返回 `NaN`。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert.isNaN(convertToInteger('JamesBond'));
|
assert.isNaN(convertToInteger('JamesBond'));
|
||||||
|
@ -11,41 +11,43 @@ dashedName: use-the-parseint-function
|
|||||||
|
|
||||||
`parseInt()` 函数解析一个字符串返回一个整数。 下面是一个示例:
|
`parseInt()` 函数解析一个字符串返回一个整数。 下面是一个示例:
|
||||||
|
|
||||||
`var a = parseInt("007");`
|
```js
|
||||||
|
var a = parseInt("007");
|
||||||
|
```
|
||||||
|
|
||||||
上述函数将字符串 `007` 转换为整数 `7`。 如果字符串参数的第一个字符是字符串类型的,结果将不会转换成数字,而是返回 `NaN`。
|
上述函数将字符串 `007` 转换为整数 `7`。 如果字符串中的第一个字符不能转换为数字,则返回 `NaN`。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
在 `convertToInteger` 函数中使用 `parseInt()` 将字符串 `str` 转换为正数并返回。
|
在 `convertToInteger` 函数中使用 `parseInt()` 将字符串 `str` 转换为一个整数,并返回这个值。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
`convertToInteger` 应该使用 `parseInt()` 函数
|
`convertToInteger` 中应该使用 `parseInt()` 函数。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(/parseInt/g.test(code));
|
assert(/parseInt/g.test(code));
|
||||||
```
|
```
|
||||||
|
|
||||||
`convertToInteger("56")` 应该返回一个数字
|
`convertToInteger("56")` 应该返回一个数字。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(typeof convertToInteger('56') === 'number');
|
assert(typeof convertToInteger('56') === 'number');
|
||||||
```
|
```
|
||||||
|
|
||||||
`convertToInteger("56")` 应该返回 56
|
`convertToInteger("56")` 应该返回 56。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(convertToInteger('56') === 56);
|
assert(convertToInteger('56') === 56);
|
||||||
```
|
```
|
||||||
|
|
||||||
`convertToInteger("77")`应该返回 77
|
`convertToInteger("77")` 应该返回 77。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(convertToInteger('77') === 77);
|
assert(convertToInteger('77') === 77);
|
||||||
```
|
```
|
||||||
|
|
||||||
`convertToInteger("JamesBond")`应该返回 `NaN`
|
`convertToInteger("JamesBond")` 应该返回 `NaN`。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert.isNaN(convertToInteger('JamesBond'));
|
assert.isNaN(convertToInteger('JamesBond'));
|
||||||
|
@ -16,11 +16,13 @@ Chrome 和 Firefox 都有出色的 JavaScript 控制台(也称为 DevTools)
|
|||||||
|
|
||||||
下面是输出 `Hello world!` 字符串到控制台的示例:
|
下面是输出 `Hello world!` 字符串到控制台的示例:
|
||||||
|
|
||||||
`console.log('Hello world!');`
|
```js
|
||||||
|
console.log('Hello world!');
|
||||||
|
```
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
请使用 `console.log()` 方法在代码中注明的地方输出变量 `a` 的值。
|
使用 `console.log()` 方法打印代码中记录的变量 `a` 的值。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -8,9 +8,7 @@ dashedName: learn-about-functional-programming
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
函数式编程是一种方案简单、功能独立、对作用域外没有任何副作用的编程范式。
|
函数式编程是一种方案简单、功能独立、对作用域外没有任何副作用的编程范式:`INPUT -> PROCESS -> OUTPUT`。
|
||||||
|
|
||||||
`INPUT -> PROCESS -> OUTPUT`
|
|
||||||
|
|
||||||
函数式编程:
|
函数式编程:
|
||||||
|
|
||||||
@ -22,9 +20,9 @@ dashedName: learn-about-functional-programming
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
freeCodeCamp 成员在 love tea 的故事。
|
freeCodeCamp 的成员们爱喝茶。
|
||||||
|
|
||||||
在代码编辑器中,已经为你定义好了 `prepareTea` 和 `getTea` 函数。 调用 `getTea` 函数为团队准备 40 杯茶,并将它们存储在 `tea4TeamFCC` 变量里。
|
在代码编辑器中,已经为你定义好了`prepareTea`和`getTea`函数。 调用 `getTea` 函数为团队准备 40 杯茶,并将它们存储在 `tea4TeamFCC` 变量里。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
@ -34,7 +32,7 @@ freeCodeCamp 成员在 love tea 的故事。
|
|||||||
assert(tea4TeamFCC.length === 40);
|
assert(tea4TeamFCC.length === 40);
|
||||||
```
|
```
|
||||||
|
|
||||||
`tea4TeamFCC` 变量里应有 greenTea。
|
`tea4TeamFCC` 变量里应有几杯 greenTea(绿茶)。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(tea4TeamFCC[0] === 'greenTea');
|
assert(tea4TeamFCC[0] === 'greenTea');
|
||||||
|
@ -82,7 +82,7 @@ var watchList = [
|
|||||||
"Genre": "Action, Adventure, Crime",
|
"Genre": "Action, Adventure, Crime",
|
||||||
"Director": "Christopher Nolan",
|
"Director": "Christopher Nolan",
|
||||||
"Writer": "Christopher Nolan",
|
"Writer": "Christopher Nolan",
|
||||||
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
|
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
|
||||||
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
||||||
"Language": "English, Japanese, French",
|
"Language": "English, Japanese, French",
|
||||||
"Country": "USA, UK",
|
"Country": "USA, UK",
|
||||||
@ -208,7 +208,7 @@ var watchList = [
|
|||||||
"Genre": "Action, Adventure, Crime",
|
"Genre": "Action, Adventure, Crime",
|
||||||
"Director": "Christopher Nolan",
|
"Director": "Christopher Nolan",
|
||||||
"Writer": "Christopher Nolan",
|
"Writer": "Christopher Nolan",
|
||||||
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
|
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
|
||||||
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
||||||
"Language": "English, Japanese, French",
|
"Language": "English, Japanese, French",
|
||||||
"Country": "USA, UK",
|
"Country": "USA, UK",
|
||||||
|
@ -89,7 +89,7 @@ var watchList = [
|
|||||||
"Genre": "Action, Adventure, Crime",
|
"Genre": "Action, Adventure, Crime",
|
||||||
"Director": "Christopher Nolan",
|
"Director": "Christopher Nolan",
|
||||||
"Writer": "Christopher Nolan",
|
"Writer": "Christopher Nolan",
|
||||||
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
|
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
|
||||||
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
||||||
"Language": "English, Japanese, French",
|
"Language": "English, Japanese, French",
|
||||||
"Country": "USA, UK",
|
"Country": "USA, UK",
|
||||||
@ -218,7 +218,7 @@ var watchList = [
|
|||||||
"Genre": "Action, Adventure, Crime",
|
"Genre": "Action, Adventure, Crime",
|
||||||
"Director": "Christopher Nolan",
|
"Director": "Christopher Nolan",
|
||||||
"Writer": "Christopher Nolan",
|
"Writer": "Christopher Nolan",
|
||||||
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
|
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
|
||||||
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
||||||
"Language": "English, Japanese, French",
|
"Language": "English, Japanese, French",
|
||||||
"Country": "USA, UK",
|
"Country": "USA, UK",
|
||||||
|
@ -103,7 +103,7 @@ var watchList = [
|
|||||||
"Genre": "Action, Adventure, Crime",
|
"Genre": "Action, Adventure, Crime",
|
||||||
"Director": "Christopher Nolan",
|
"Director": "Christopher Nolan",
|
||||||
"Writer": "Christopher Nolan",
|
"Writer": "Christopher Nolan",
|
||||||
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
|
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
|
||||||
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
||||||
"Language": "English, Japanese, French",
|
"Language": "English, Japanese, French",
|
||||||
"Country": "USA, UK",
|
"Country": "USA, UK",
|
||||||
@ -231,7 +231,7 @@ var watchList = [
|
|||||||
"Genre": "Action, Adventure, Crime",
|
"Genre": "Action, Adventure, Crime",
|
||||||
"Director": "Christopher Nolan",
|
"Director": "Christopher Nolan",
|
||||||
"Writer": "Christopher Nolan",
|
"Writer": "Christopher Nolan",
|
||||||
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
|
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
|
||||||
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
||||||
"Language": "English, Japanese, French",
|
"Language": "English, Japanese, French",
|
||||||
"Country": "USA, UK",
|
"Country": "USA, UK",
|
||||||
|
@ -14,11 +14,13 @@ dashedName: arguments-optional
|
|||||||
|
|
||||||
调用这个返回的函数,为它传入一个值,会返回两个值的总和:
|
调用这个返回的函数,为它传入一个值,会返回两个值的总和:
|
||||||
|
|
||||||
`var sumTwoAnd = addTogether(2);`
|
```js
|
||||||
|
var sumTwoAnd = addTogether(2);
|
||||||
|
```
|
||||||
|
|
||||||
`sumTwoAnd(3)` 此时应返回 `5`。
|
`sumTwoAnd(3)` 应返回 `5`。
|
||||||
|
|
||||||
任何时候,只要任一传入的参数不是数字,就应返回 undefined。
|
如果任一参数不是有效数字,则返回 undefined。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -8,7 +8,7 @@ dashedName: iterate-over-all-properties
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
现在你已经了解了两种属性: `own` 属性和 `prototype` 属性。 `Own` 属性是直接在对象上定义的。 而 `prototype` 属性是定义在 `prototype` 上的。
|
现在你已经了解了两种属性: <dfn>自身属性</dfn>和 `prototype` 属性。 自身属性是直接在对象上定义的。 而 `prototype` 属性是定义在 `prototype` 上的。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
function Bird(name) {
|
function Bird(name) {
|
||||||
@ -20,7 +20,7 @@ Bird.prototype.numLegs = 2; // prototype property
|
|||||||
let duck = new Bird("Donald");
|
let duck = new Bird("Donald");
|
||||||
```
|
```
|
||||||
|
|
||||||
这个示例会告诉你如何将 `duck` 的 `own` 属性和 `prototype` 属性分别添加到 `ownProps` 数组和 `prototypeProps` 数组里面:
|
这个示例会告诉你如何将 `duck` 的自身属性和 `prototype` 属性分别添加到 `ownProps` 数组和 `prototypeProps` 数组里面:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
let ownProps = [];
|
let ownProps = [];
|
||||||
@ -42,7 +42,7 @@ console.log(prototypeProps);
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
将 `beagle` 的 `own` 属性都添加到 `ownProps` 数组里面去。 将 `Dog` 中所有的 `prototype` 属性都添加到 `prototypeProps` 数组中。
|
将 `beagle` 的自身属性都添加到 `ownProps` 数组里面去。 将 `Dog` 中所有的 `prototype` 属性都添加到 `prototypeProps` 数组中。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -10,9 +10,11 @@ dashedName: make-code-more-reusable-with-the-this-keyword
|
|||||||
|
|
||||||
在上一个挑战中我们了解了该如何给 `duck` 对象设置一个方法。 然后在 return 语句里,我们通过使用 “点号表示法” `duck.name` 来获取 `name` 的属性值:
|
在上一个挑战中我们了解了该如何给 `duck` 对象设置一个方法。 然后在 return 语句里,我们通过使用 “点号表示法” `duck.name` 来获取 `name` 的属性值:
|
||||||
|
|
||||||
`sayName: function() {return "The name of this duck is " + duck.name + ".";}`
|
```js
|
||||||
|
sayName: function() {return "The name of this duck is " + duck.name + ".";}
|
||||||
|
```
|
||||||
|
|
||||||
虽然这是访问对象属性的有效方法,但是这里有一个陷阱。 如果变量名发生了改变,那么引用了原始名称的任何代码都需要更新。 在一个简短的对象定义中这并不是问题,但是如果对象有很多对其属性的引用,那么发生错误的可能性就更大了。
|
虽然这是访问对象属性的有效方法,但是这里有一个陷阱。 如果变量名发生了改变,那么引用了原始名称的任何代码都需要更新。 在一个简短的对象定义中,这并不是问题,但是如果对象有很多对其属性的引用,那么发生错误的可能性就更大了。
|
||||||
|
|
||||||
我们可以使用 `this` 关键字来避免这一问题:
|
我们可以使用 `this` 关键字来避免这一问题:
|
||||||
|
|
||||||
@ -24,11 +26,11 @@ let duck = {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
`this` 是一个很复杂的知识点,而上面那个例子也只是使用 this 的一种方法而已。 在当前的上下文环境中,`this` 指向的就是与这个方法有关联的 `duck` 对象。 如果把对象的变量名改为 `mallard`,那使用 this 就没有必要在代码中找到所有指向 `duck` 的部分。 这样可以使得代码更具有可读性和复用性。
|
`this` 是一个很复杂的知识点,而上面那个例子也只是使用它的一种方法而已。 在当前的上下文环境中,`this` 指向的就是与这个方法有关联的 `duck` 对象。 如果把对象的变量名改为 `mallard`,那使用 this 后就没有必要在代码中找到所有指向 `duck` 的部分。 这样可以使得代码更具有可读性和复用性。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
修改 `dog.sayLegs` 方法以将所有直接对 `dog` 的引用删除。 可以参考上面 `duck` 的例子。
|
修改 `dog.sayLegs` 方法,以将所有直接对 `dog` 的引用删除。 可以参考上面 `duck` 的例子。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
@ -38,7 +40,7 @@ let duck = {
|
|||||||
assert(dog.sayLegs() === 'This dog has 4 legs.');
|
assert(dog.sayLegs() === 'This dog has 4 legs.');
|
||||||
```
|
```
|
||||||
|
|
||||||
你的代码应该使用 `this` 关键字来访问 `dog` 对象的 `numLegs` 属性值。
|
应该使用 `this` 关键字来访问 `dog` 对象的 `numLegs` 属性值。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/this\.numLegs/g));
|
assert(code.match(/this\.numLegs/g));
|
||||||
|
@ -20,7 +20,7 @@ let duck = new Bird("Donald");
|
|||||||
let canary = new Bird("Tweety");
|
let canary = new Bird("Tweety");
|
||||||
```
|
```
|
||||||
|
|
||||||
`name` 和 `numLegs` 被叫做 `own` 属性,因为他们是直接在实例对象上定义的。 这就意味着 `duck` 和 `canary` 这两个对象分别拥有这些属性的独立副本。 事实上,`Bird` 的所有实例都将拥有这些属性的独立副本。 以下的代码将 `duck` 里面所有的 `own` 属性都存到一个叫 `ownProps` 的数组里面:
|
`name` 和 `numLegs` 被叫做 <dfn>自身属性</dfn>,因为它们是直接在实例对象上定义的。 这就意味着 `duck` 和 `canary` 这两个对象分别拥有这些属性的独立副本。 事实上,`Bird` 的所有实例都将拥有这些属性的独立副本。 下面的代码将 `duck` 的所有自身属性都存到一个叫作 `ownProps` 的数组里面:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
let ownProps = [];
|
let ownProps = [];
|
||||||
@ -38,7 +38,7 @@ console.log(ownProps);
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
将 `canary` 对象里面的 `own` 属性添加到 `ownProps` 数组里面。
|
将 `canary` 的自身属性添加到 `ownProps` 数组里面。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -10,15 +10,13 @@ dashedName: moving-forward-from-here
|
|||||||
|
|
||||||
恭喜! 你完成了 React 和 Redux 的所有课程! 结束之前,还要再提一点。 通常,我们不会在这样的编辑器中编写 React 应用代码。 如果你在自己的计算机上使用 npm 和文件系统,这个挑战可让你一瞥 React 应用的语法之貌。 除了使用 `import` 语句(这些语句引入了各挑战中提供的所有依赖关系),其代码看起来类似。 “管理包(含 npm)”这一节更详细地介绍了 npm。
|
恭喜! 你完成了 React 和 Redux 的所有课程! 结束之前,还要再提一点。 通常,我们不会在这样的编辑器中编写 React 应用代码。 如果你在自己的计算机上使用 npm 和文件系统,这个挑战可让你一瞥 React 应用的语法之貌。 除了使用 `import` 语句(这些语句引入了各挑战中提供的所有依赖关系),其代码看起来类似。 “管理包(含 npm)”这一节更详细地介绍了 npm。
|
||||||
|
|
||||||
最后,写 React 和 Redux 的代码通常需要一些配置, 且很快会变得复杂起来。 如果你有兴趣在自己的计算机上试试,
|
最后,写 React 和 Redux 的代码通常需要一些配置, 且很快会变得复杂起来。 如果你有兴趣在自己的电脑上尝试,<a href="https://github.com/facebookincubator/create-react-app" target="_blank" rel="nofollow">Create React App</a> 已配置好,并准备就绪。
|
||||||
|
|
||||||
[Create React App](https://github.com/facebookincubator/create-react-app) 可获取已配置好的现成代码。
|
或者,你可以在 CodePen 中启用 Babel 作为 JavaScript 预处理器,将 React 和 ReactDOM 添加为外部 JavaScript 资源,这样编写应用。
|
||||||
|
|
||||||
另一种做法是在 CodePen 中启用 Babel 作为 JavaScript 预处理器,将 React 和 ReactDOM 添加为外部 JavaScript 资源,在那里编写应用。
|
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
把 `'Now I know React and Redux!'` 这一消息输出到控制台。
|
在控制台输出消息 `'Now I know React and Redux!'`。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -12,23 +12,25 @@ dashedName: add-classes-with-d3
|
|||||||
|
|
||||||
`attr()` 方法和 `style()` 的使用方法一样。 它使用逗号分隔值,并且可以使用回调函数。 下面是给选中元素添加 `container` class 的例子:
|
`attr()` 方法和 `style()` 的使用方法一样。 它使用逗号分隔值,并且可以使用回调函数。 下面是给选中元素添加 `container` class 的例子:
|
||||||
|
|
||||||
`selection.attr("class", "container");`
|
```js
|
||||||
|
selection.attr("class", "container");
|
||||||
|
```
|
||||||
|
|
||||||
请注意,当你需要添加 class 时,`class` 参数保持不变,只有 `container` 参数会发生变化。
|
请注意,当你需要添加 class 时,`class` 参数保持不变,只有 `container` 参数会发生变化。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
将 `attr()` 方法添加到编辑器的代码中,并在 `div` 元素上添加一个 `bar` 类。
|
将 `attr()` 方法添加到编辑器中的代码中,并在 `div` 元素上添加一个 `bar` 类。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
`div` 元素应该有值为 `bar` 的类。
|
`div` 元素应该一个 `bar` class。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('div').attr('class') == 'bar');
|
assert($('div').attr('class') == 'bar');
|
||||||
```
|
```
|
||||||
|
|
||||||
你应该使用 `attr()` 方法。
|
应该使用 `attr()` 方法。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(code.match(/\.attr/g));
|
assert(code.match(/\.attr/g));
|
||||||
|
@ -12,17 +12,19 @@ D3 有多种方法可以用来在文档中增加元素、修改元素。
|
|||||||
|
|
||||||
`select()` 方法从文档中选择一个元素。 它接受你想要选择的元素的名字作为参数,并返回文档中第一个与名字匹配的 HTML 节点。 以下是一个例子:
|
`select()` 方法从文档中选择一个元素。 它接受你想要选择的元素的名字作为参数,并返回文档中第一个与名字匹配的 HTML 节点。 以下是一个例子:
|
||||||
|
|
||||||
`const anchor = d3.select("a");`
|
```js
|
||||||
|
const anchor = d3.select("a");
|
||||||
|
```
|
||||||
|
|
||||||
上面这个例子找到页面上的第一个锚点标签,将它作为一个 HTML 节点保存在变量 `anchor` 中。 你也可以用其他的方法选择页面上的元素。 示例中的 `d3` 部分是对 D3 对象的引用,通过它访问 D3 方法。
|
上面这个例子找到页面上的第一个锚点标签,将它作为一个 HTML 节点保存在变量 `anchor` 中。 你可以使用其他方法进行选择。 示例中的 `d3` 部分是对 D3 对象的引用,通过它访问 D3 方法。
|
||||||
|
|
||||||
另外两个有用的方法是 `append()` 和 `text()` 。
|
另外两个有用的方法是 `append()` 和 `text()` 。
|
||||||
|
|
||||||
`append()` 方法接受你希望添加到文档中的元素作为参数, 它将一个 HTML 节点添加到选中的对象上,并返回那个节点的句柄。
|
`append()` 方法接收你希望添加到文档中的元素作为参数。 它将 HTML 节点附加到选定项目,并返回该节点的句柄。
|
||||||
|
|
||||||
`text()` 方法既可以给选中的节点设置文本,也可以获取节点的当前文本。 如果要设置文本值,需要方法的括号中传入一个字符串参数。
|
`text()` 方法可以设置所选节点的文本,也可以获取当前文本。 要设置该值,请在方法的括号内传递一个字符串作为参数。
|
||||||
|
|
||||||
下面是一个选择无序列表、添加列表项和添加文本的例子:
|
下面的例子是选择一个无序列表,添加列表项和添加文本:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
d3.select("ul")
|
d3.select("ul")
|
||||||
|
@ -12,11 +12,13 @@ D3允许你使用 `style()` 方法在动态元素上添加内联 CSS 样式。
|
|||||||
|
|
||||||
`style()` 方法以用逗号分隔的键值对作为参数。 这里是一个将选中文本的颜色设为蓝色的例子:
|
`style()` 方法以用逗号分隔的键值对作为参数。 这里是一个将选中文本的颜色设为蓝色的例子:
|
||||||
|
|
||||||
`selection.style("color","blue");`
|
```js
|
||||||
|
selection.style("color","blue");
|
||||||
|
```
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
在编辑器中添加 `style()` 方法,使所有显示的文本都有 `font-family` 属性,且值为 `verdana`。
|
将 `style()` 方法添加到编辑器中的代码中,使所有显示的文本都具有 `verdana` 的 `font-family` 。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -18,13 +18,15 @@ D3 中,比例尺可帮助布局数据。 `scales` 是函数,它告诉程序
|
|||||||
|
|
||||||
D3 有几种缩放类型。 对于线性缩放(通常使用于定量数据),使用 D3 的 `scaleLinear()` 方法:
|
D3 有几种缩放类型。 对于线性缩放(通常使用于定量数据),使用 D3 的 `scaleLinear()` 方法:
|
||||||
|
|
||||||
`const scale = d3.scaleLinear()`
|
```js
|
||||||
|
const scale = d3.scaleLinear()
|
||||||
|
```
|
||||||
|
|
||||||
默认情况下,比例尺使用一比一的比例, 输出的值和输入的值相同。 后面的挑战将涉及如何改变默认比例。
|
默认情况下,比例尺使用一对一关系(identity relationship)。 输入的值和输出的值相同。 后面的挑战将涉及如何改变默认比例。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
改变 `scale` 变量的值,创建线性缩放。 然后将 `output` 变量设置为 scale 函数,调用函数时传入参数 `50`。
|
更改 `scale` 变量,以创建线性比例。 然后将 `output` 变量设置为 scale 函数,调用函数时传入参数 `50`。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -10,7 +10,9 @@ dashedName: select-a-group-of-elements-with-d3
|
|||||||
|
|
||||||
`selectAll()` 方法选择一组元素。 它以 HTML 节点数组的形式返回该文本中所有匹配所输入字符串的对象。 以下是一个选择文本中所有锚标签的例子:
|
`selectAll()` 方法选择一组元素。 它以 HTML 节点数组的形式返回该文本中所有匹配所输入字符串的对象。 以下是一个选择文本中所有锚标签的例子:
|
||||||
|
|
||||||
`const anchors = d3.selectAll("a");`
|
```js
|
||||||
|
const anchors = d3.selectAll("a");
|
||||||
|
```
|
||||||
|
|
||||||
像 `select()` 方法一样,`selectAll()` 也支持链式调用,你可以在它之后调用其他方法。
|
像 `select()` 方法一样,`selectAll()` 也支持链式调用,你可以在它之后调用其他方法。
|
||||||
|
|
||||||
@ -20,7 +22,7 @@ dashedName: select-a-group-of-elements-with-d3
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
页面上应该有 3 个 `li` 元素,每个元素的文本内容应为 `list item`。 大小写和空格必须一致。
|
页面上应该有 3 个 `li` 元素,每个元素的文本内容应为 `list item`。 大写和间距应完全匹配。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -16,11 +16,13 @@ dashedName: update-the-height-of-an-element-dynamically
|
|||||||
|
|
||||||
回想使用回调函数设置样式的格式:
|
回想使用回调函数设置样式的格式:
|
||||||
|
|
||||||
`selection.style("cssProperty", (d) => d)`
|
```js
|
||||||
|
selection.style("cssProperty", (d) => d)
|
||||||
|
```
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
在编辑器中添加 `style()` 方法给每个元素设置 `height` 属性。 使用回调函数返回数据点的值,加上字符串 `px`。
|
将 `style()` 方法添加到编辑器中的代码中,以设置每个元素的 `height` 属性。 使用回调函数返回数据点的值,加上字符串 `px`。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -14,11 +14,13 @@ dashedName: work-with-dynamic-data-in-d3
|
|||||||
|
|
||||||
`text()` 方法以字符串或者回调函数作为参数:
|
`text()` 方法以字符串或者回调函数作为参数:
|
||||||
|
|
||||||
`selection.text((d) => d)`
|
```js
|
||||||
|
selection.text((d) => d)
|
||||||
|
```
|
||||||
|
|
||||||
上面这个例子中的参数 `d` 指关联数据集的一个对象。
|
上面这个例子中的参数 `d` 指关联数据集的一个对象。
|
||||||
|
|
||||||
以当前例子为例,第一个 `h2` 元素和 12 关联,第二个 `h2` 元素和 31 关联,第三个 `h2` 元素和 22 关联,以此类推。
|
使用当前示例作为上下文,第一个 `h2` 元素绑定到 12,第二个 `h2` 元素绑定到 31,第三个 `h2` 元素绑定到 22,依此类推。
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
|
@ -14,7 +14,9 @@ dashedName: change-text-with-click-events
|
|||||||
|
|
||||||
通过在点击事件内添加以下代码实现:
|
通过在点击事件内添加以下代码实现:
|
||||||
|
|
||||||
`document.getElementsByClassName('message')[0].textContent="Here is the message";`
|
```js
|
||||||
|
document.getElementsByClassName('message')[0].textContent="Here is the message";
|
||||||
|
```
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
|
@ -14,11 +14,13 @@ dashedName: render-images-from-data-sources
|
|||||||
|
|
||||||
这是执行此操作的代码:
|
这是执行此操作的代码:
|
||||||
|
|
||||||
`html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";`
|
```js
|
||||||
|
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
||||||
|
```
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
添加代码,在 `img` 标签中使用 `imageLink` 和 `altText` 属性。
|
添加代码以在 `img` 标记中使用 `imageLink` 和 `altText` 属性。
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -19,7 +19,7 @@ const io = require('socket.io')(http);
|
|||||||
|
|
||||||
现在我们的 *express 应用*已经包含了 *http* 服务,接下来我们需要监听 *http* 服务的事件。 为此,我们需要把 `app.listen` 更新为 `http.listen`。
|
现在我们的 *express 应用*已经包含了 *http* 服务,接下来我们需要监听 *http* 服务的事件。 为此,我们需要把 `app.listen` 更新为 `http.listen`。
|
||||||
|
|
||||||
需要处理的第一件事是监听客户端的新连接。 <dfn>on</dfn> 关键字就是监听这个特定事件。 它接收两个参数:一个是发出的事件的标题字符串,另一个是后续用来传递数据的回调函数。 在连接监听器中,我们用 *socket* 来代表它所包含的数据。 socket 就是指已连接到服务器的客户端。
|
需要处理的第一件事是监听客户端的新连接。 <dfn>on</dfn> 关键字就是监听这个特定事件。 它需要 2 个参数:一个包含所发出事件标题的字符串,以及一个用于传递数据的函数。 在连接监听器中,我们用 *socket* 来代表它所包含的数据。 socket 就是指已连接到服务器的客户端。
|
||||||
|
|
||||||
为了可以监听服务器的连接事件,我们在数据库连接的部分加入如下代码:
|
为了可以监听服务器的连接事件,我们在数据库连接的部分加入如下代码:
|
||||||
|
|
||||||
|
@ -65,7 +65,7 @@ assert(Array.isArray(myMusic));
|
|||||||
assert(myMusic.length > 1);
|
assert(myMusic.length > 1);
|
||||||
```
|
```
|
||||||
|
|
||||||
`myMusic` debe tener al menos dos elementos
|
Los elementos en el arreglo `myMusic` deben ser objetos
|
||||||
|
|
||||||
```js
|
```js
|
||||||
myMusic.forEach(object => {assert.typeOf(object, 'object')})
|
myMusic.forEach(object => {assert.typeOf(object, 'object')})
|
||||||
|
@ -82,7 +82,7 @@ var watchList = [
|
|||||||
"Genre": "Action, Adventure, Crime",
|
"Genre": "Action, Adventure, Crime",
|
||||||
"Director": "Christopher Nolan",
|
"Director": "Christopher Nolan",
|
||||||
"Writer": "Christopher Nolan",
|
"Writer": "Christopher Nolan",
|
||||||
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
|
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
|
||||||
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
||||||
"Language": "English, Japanese, French",
|
"Language": "English, Japanese, French",
|
||||||
"Country": "USA, UK",
|
"Country": "USA, UK",
|
||||||
@ -208,7 +208,7 @@ var watchList = [
|
|||||||
"Genre": "Action, Adventure, Crime",
|
"Genre": "Action, Adventure, Crime",
|
||||||
"Director": "Christopher Nolan",
|
"Director": "Christopher Nolan",
|
||||||
"Writer": "Christopher Nolan",
|
"Writer": "Christopher Nolan",
|
||||||
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
|
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
|
||||||
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
||||||
"Language": "English, Japanese, French",
|
"Language": "English, Japanese, French",
|
||||||
"Country": "USA, UK",
|
"Country": "USA, UK",
|
||||||
|
@ -89,7 +89,7 @@ var watchList = [
|
|||||||
"Genre": "Action, Adventure, Crime",
|
"Genre": "Action, Adventure, Crime",
|
||||||
"Director": "Christopher Nolan",
|
"Director": "Christopher Nolan",
|
||||||
"Writer": "Christopher Nolan",
|
"Writer": "Christopher Nolan",
|
||||||
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
|
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
|
||||||
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
||||||
"Language": "English, Japanese, French",
|
"Language": "English, Japanese, French",
|
||||||
"Country": "USA, UK",
|
"Country": "USA, UK",
|
||||||
@ -218,7 +218,7 @@ var watchList = [
|
|||||||
"Genre": "Action, Adventure, Crime",
|
"Genre": "Action, Adventure, Crime",
|
||||||
"Director": "Christopher Nolan",
|
"Director": "Christopher Nolan",
|
||||||
"Writer": "Christopher Nolan",
|
"Writer": "Christopher Nolan",
|
||||||
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
|
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
|
||||||
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
||||||
"Language": "English, Japanese, French",
|
"Language": "English, Japanese, French",
|
||||||
"Country": "USA, UK",
|
"Country": "USA, UK",
|
||||||
|
@ -103,7 +103,7 @@ var watchList = [
|
|||||||
"Genre": "Action, Adventure, Crime",
|
"Genre": "Action, Adventure, Crime",
|
||||||
"Director": "Christopher Nolan",
|
"Director": "Christopher Nolan",
|
||||||
"Writer": "Christopher Nolan",
|
"Writer": "Christopher Nolan",
|
||||||
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
|
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
|
||||||
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
||||||
"Language": "English, Japanese, French",
|
"Language": "English, Japanese, French",
|
||||||
"Country": "USA, UK",
|
"Country": "USA, UK",
|
||||||
@ -231,7 +231,7 @@ var watchList = [
|
|||||||
"Genre": "Action, Adventure, Crime",
|
"Genre": "Action, Adventure, Crime",
|
||||||
"Director": "Christopher Nolan",
|
"Director": "Christopher Nolan",
|
||||||
"Writer": "Christopher Nolan",
|
"Writer": "Christopher Nolan",
|
||||||
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
|
"Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
|
||||||
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
"Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
|
||||||
"Language": "English, Japanese, French",
|
"Language": "English, Japanese, French",
|
||||||
"Country": "USA, UK",
|
"Country": "USA, UK",
|
||||||
|
@ -38,7 +38,7 @@ El constructor es más flexible. Ahora es posible definir las propiedades para c
|
|||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
Crea otro constructor `Dog`. Esta vez, configúralo para tomar los parámetros `name` y `color`, y haz que la propiedad `numLegs` quede fija en 4. Luego crea un nuevo `Dog` almacenado en una variable `terrier`. Pasale dos cadenas de texto como argumentos para las propiedades `name` y `color`.
|
Crea otro constructor `Dog`. Esta vez, configúralo para que tome los parámetros `name` y `color`, y ten la propiedad `numLegs` fija a 4. Luego crea un nuevo `Dog` almacenado en una variable `terrier`. Pasale dos cadenas de texto como argumentos para las propiedades `name` y `color`.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
id: bad87fee1348bd9aec908849
|
id: bad87fee1348bd9aec908849
|
||||||
title: Add Elements within Your Bootstrap Wells
|
title: Agregar elementos dentro de tus Bootstrap Wells
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
forumTopicId: 16636
|
forumTopicId: 16636
|
||||||
dashedName: add-elements-within-your-bootstrap-wells
|
dashedName: add-elements-within-your-bootstrap-wells
|
||||||
@ -8,13 +8,13 @@ dashedName: add-elements-within-your-bootstrap-wells
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
Now we're several `div` elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our `button` elements.
|
Ahora estamos a varios elementos `div` de profundidad en cada columna de nuestras filas. Esto es todo lo que necesitamos. Ahora podemos agregar nuestros elementos `button`.
|
||||||
|
|
||||||
Nest three `button` elements within each of your `div` elements having the class name `well`.
|
Anida tres elementos `button` dentro de cada uno de los elementos `div` que posean una clase `well`.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Three `button` elements should be nested within each of your `div` elements with class `well`.
|
Tres elementos `button` deberían ser anidados cada uno dentro de elementos `div` con la clase `well`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -23,13 +23,13 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
You should have a total of 6 `button` elements.
|
Debería haber un total de 6 elementos `button`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('button') && $('button').length > 5);
|
assert($('button') && $('button').length > 5);
|
||||||
```
|
```
|
||||||
|
|
||||||
All of your `button` elements should have closing tags.
|
Todos los elementos `button` deben tener etiqueta de cierre.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
id: bad87fee1348bd9aedc08845
|
id: bad87fee1348bd9aedc08845
|
||||||
title: Add Font Awesome Icons to all of our Buttons
|
title: Agrega íconos Font Awesome a todos nuestros botones
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
forumTopicId: 16637
|
forumTopicId: 16637
|
||||||
required:
|
required:
|
||||||
@ -12,17 +12,17 @@ dashedName: add-font-awesome-icons-to-all-of-our-buttons
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
Font Awesome is a convenient library of icons. These icons can be web fonts or vector graphics. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.
|
Font Awesome es una conveniente librería de íconos. Éstos pueden ser fuentes de la web o gráficos vectoriales. Los iconos son tratados como fuentes. Puedes especificar su tamaño usando píxeles y ellos asumirán el tamaño de fuente de su elemento HTML padre.
|
||||||
|
|
||||||
# --instructions--
|
# --instructions--
|
||||||
|
|
||||||
Use Font Awesome to add an `info-circle` icon to your info button and a `trash` icon to your delete button.
|
Utiliza Font Awesome para agregar un icono `info-circle` a su botón info y un icono `trash` al botón borrar.
|
||||||
|
|
||||||
**Note:** The `span` element is an acceptable alternative to the `i` element for the directions below.
|
** Nota: **El elemento `span` es una alternativa aceptable al elemento `i` para las direcciones a continuación.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
You should add a `<i class="fas fa-info-circle"></i>` within your info button element.
|
Deberías añadir un elemento `<i class="fas fa-info-circle"></i>` dentro de tu elemento `info` botón info.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -31,7 +31,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
You should add a `<i class="fas fa-trash"></i>` within your delete button element.
|
Deberías añadir un elemento `<i class="fas fa-trash"></i>` dentro de tu elemento botón `delete`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -40,7 +40,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
Each of your `i` elements should have a closing tag and `<i class="fas fa-thumbs-up"></i>` is in your like button element.
|
Cada uno de tus elementos `i` debe tener una etiqueta de cierre y `<i class="fas fa-thumbs-up"></i>` tiene que estar en el botón `like`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
id: bad87fee1348bd9aec908853
|
id: bad87fee1348bd9aec908853
|
||||||
title: Add id Attributes to Bootstrap Elements
|
title: Añade atributos de identificación a elementos de Bootstrap
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
forumTopicId: 16639
|
forumTopicId: 16639
|
||||||
dashedName: add-id-attributes-to-bootstrap-elements
|
dashedName: add-id-attributes-to-bootstrap-elements
|
||||||
@ -8,21 +8,23 @@ dashedName: add-id-attributes-to-bootstrap-elements
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
Recall that in addition to class attributes, you can give each of your elements an `id` attribute.
|
Recuerda que además de los atributos de clase, puedes darle a cada elemento un atributo `id`.
|
||||||
|
|
||||||
Each id must be unique to a specific element and used only once per page.
|
Cada "id" debe ser único en un elemento específico y utilizarse una sola vez por página.
|
||||||
|
|
||||||
Let's give a unique id to each of our `div` elements of class `well`.
|
Vamos a dar un "id" único a cada uno de nuestros elementos `div` de la clase `well`.
|
||||||
|
|
||||||
Remember that you can give an element an id like this:
|
Recuerda que puedes dar un "id" a un elemento de esta manera:
|
||||||
|
|
||||||
`<div class="well" id="center-well">`
|
```html
|
||||||
|
<div class="well" id="center-well">
|
||||||
|
```
|
||||||
|
|
||||||
Give the well on the left the id of `left-well`. Give the well on the right the id of `right-well`.
|
Agrega el "id" `left-well` al elemento de la izquierda de la clase "well". Agrega el "id" `right-well` al elemento de la derecha de la clase "well".
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Your left `well` should have the id of `left-well`.
|
El elemento de la izquierda de la clase `well` deberá tener el "id" `left-well`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
@ -31,7 +33,7 @@ assert(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
Your right `well` should have the id of `right-well`.
|
El elemento de la derecha de la clase `well` deberá tener el "id" `right-well`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
id: bad87fee1348bd9aec908850
|
id: bad87fee1348bd9aec908850
|
||||||
title: Apply the Default Bootstrap Button Style
|
title: Aplica el estilo predeterminado de botón de estilo de Bootstrap
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
forumTopicId: 16657
|
forumTopicId: 16657
|
||||||
dashedName: apply-the-default-bootstrap-button-style
|
dashedName: apply-the-default-bootstrap-button-style
|
||||||
@ -8,19 +8,19 @@ dashedName: apply-the-default-bootstrap-button-style
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
Bootstrap has another button class called `btn-default`.
|
Bootstrap tiene otra clase de botón llamada `btn-default`.
|
||||||
|
|
||||||
Apply both the `btn` and `btn-default` classes to each of your `button` elements.
|
Aplica las clases `btn` y `btn-default` a cada uno de tus elementos `button`.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
You should apply the `btn` class to each of your `button` elements.
|
Debes aplicar la clase `btn` a cada uno de tus elementos `button`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('.btn').length > 5);
|
assert($('.btn').length > 5);
|
||||||
```
|
```
|
||||||
|
|
||||||
You should apply the `btn-default` class to each of your `button` elements.
|
Debes aplicar la clase `btn-default` a cada uno de tus elementos `button`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('.btn-default').length > 5);
|
assert($('.btn-default').length > 5);
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
id: bad87fee1348cd8acef08813
|
id: bad87fee1348cd8acef08813
|
||||||
title: Call out Optional Actions with btn-info
|
title: Llama a acciones opcionales con btn-info
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
forumTopicId: 16770
|
forumTopicId: 16770
|
||||||
dashedName: call-out-optional-actions-with-btn-info
|
dashedName: call-out-optional-actions-with-btn-info
|
||||||
@ -8,33 +8,33 @@ dashedName: call-out-optional-actions-with-btn-info
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
Bootstrap comes with several pre-defined colors for buttons. The `btn-info` class is used to call attention to optional actions that the user can take.
|
Bootstrap viene con diferentes colores predefinidos para botones. La clase `btn-info` se utiliza para llamar la atención sobre las acciones opcionales que el usuario puede realizar.
|
||||||
|
|
||||||
Create a new block-level Bootstrap button below your "Like" button with the text "Info", and add Bootstrap's `btn-info` and `btn-block` classes to it.
|
Crea un nuevo botón de Bootstrap debajo de tu botón `Like` con el texto `Info` y añádele las clases de Bootstrap `btn-info` y `btn-block`.
|
||||||
|
|
||||||
Note that these buttons still need the `btn` and `btn-block` classes.
|
Ten en cuenta que estos botones todavía necesitan las clases `btn` y `btn-block`.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
You should create a new `button` element with the text "Info".
|
Debes crear un nuevo elemento `button` con el texto `Info`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(new RegExp('info', 'gi').test($('button').text()));
|
assert(new RegExp('info', 'gi').test($('button').text()));
|
||||||
```
|
```
|
||||||
|
|
||||||
Both of your Bootstrap buttons should have the `btn` and `btn-block` classes.
|
Ambos botones deben tener las clases `btn` y `btn-block`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('button.btn-block.btn').length > 1);
|
assert($('button.btn-block.btn').length > 1);
|
||||||
```
|
```
|
||||||
|
|
||||||
Your new button should have the class `btn-info`.
|
Tu nuevo botón debe tener la clase `btn-info`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('button').hasClass('btn-info'));
|
assert($('button').hasClass('btn-info'));
|
||||||
```
|
```
|
||||||
|
|
||||||
All of your `button` elements should have closing tags.
|
Todos los elementos `button` deben tener etiquetas de cierre.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
id: bad87fee1348bd8acde08812
|
id: bad87fee1348bd8acde08812
|
||||||
title: Center Text with Bootstrap
|
title: Centrar texto con Bootstrap
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
forumTopicId: 16771
|
forumTopicId: 16771
|
||||||
dashedName: center-text-with-bootstrap
|
dashedName: center-text-with-bootstrap
|
||||||
@ -8,21 +8,23 @@ dashedName: center-text-with-bootstrap
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class `text-center` to our `h2` element.
|
Ahora que estamos usando Bootstrap, podemos centrar el encabezado para que luzca mejor. Todo lo que necesitamos hacer es añadir la clase `text-center` a nuestro elemento `h2`.
|
||||||
|
|
||||||
Remember that you can add several classes to the same element by separating each of them with a space, like this:
|
Recuerda que puedes añadir varias clases al mismo elemento separando cada una de ellas con un espacio:
|
||||||
|
|
||||||
`<h2 class="red-text text-center">your text</h2>`
|
```html
|
||||||
|
<h2 class="red-text text-center">your text</h2>
|
||||||
|
```
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Your `h2` element should be centered by applying the class `text-center`
|
Tu elemento `h2` debe estar centrado al aplicar la clase `text-center`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('h2').hasClass('text-center'));
|
assert($('h2').hasClass('text-center'));
|
||||||
```
|
```
|
||||||
|
|
||||||
Your `h2` element should still have the class `red-text`
|
Tu elemento `h2` debe conservar la clase `red-text`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('h2').hasClass('red-text'));
|
assert($('h2').hasClass('red-text'));
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
id: bad87fee1348cd8acef08812
|
id: bad87fee1348cd8acef08812
|
||||||
title: Create a Block Element Bootstrap Button
|
title: Crear un botón Bootstrap como elemento de bloque
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
forumTopicId: 16810
|
forumTopicId: 16810
|
||||||
dashedName: create-a-block-element-bootstrap-button
|
dashedName: create-a-block-element-bootstrap-button
|
||||||
@ -8,41 +8,45 @@ dashedName: create-a-block-element-bootstrap-button
|
|||||||
|
|
||||||
# --description--
|
# --description--
|
||||||
|
|
||||||
Normally, your `button` elements with the `btn` and `btn-default` classes are only as wide as the text that they contain. For example:
|
Normalmente, tus elementos `button` con las clases `btn` y `btn-default` son tan anchos como el texto que contienen. Por ejemplo:
|
||||||
|
|
||||||
`<button class="btn btn-default">Submit</button>`
|
```html
|
||||||
|
<button class="btn btn-default">Submit</button>
|
||||||
|
```
|
||||||
|
|
||||||
This button would only be as wide as the word "Submit".
|
Este botón será tan ancho como la palabra `Submit`.
|
||||||
|
|
||||||
<button class='btn btn-default'>Submit</button>
|
<button class='btn btn-default'>Enviar</button>
|
||||||
|
|
||||||
By making them block elements with the additional class of `btn-block`, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a "new line" below the block.
|
Al hacer los elementos de bloque con la clase `btn-block`, tu botón ocupará el ancho horizontal de la página y cualquier elemento que lo siga se posicionará en una "nueva línea" debajo del bloque.
|
||||||
|
|
||||||
`<button class="btn btn-default btn-block">Submit</button>`
|
```html
|
||||||
|
<button class="btn btn-default btn-block">Submit</button>
|
||||||
|
```
|
||||||
|
|
||||||
This button would take up 100% of the available width.
|
Este botón tomará el 100% del ancho disponible.
|
||||||
|
|
||||||
<button class='btn btn-default btn-block'>Submit</button>
|
<button class='btn btn-default btn-block'>Enviar</button>
|
||||||
|
|
||||||
Note that these buttons still need the `btn` class.
|
Ten en cuenta que estos botones aún necesitan la clase `btn`.
|
||||||
|
|
||||||
Add Bootstrap's `btn-block` class to your Bootstrap button.
|
Añade la clase `btn-block` a tu botón Bootstrap.
|
||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Your button should still have the `btn` and `btn-default` classes.
|
Tu botón debe contener las clases `btn` y `btn-default`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
|
assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
|
||||||
```
|
```
|
||||||
|
|
||||||
Your button should have the class `btn-block`.
|
Tu botón debe contener la clase `btn-block`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert($('button').hasClass('btn-block'));
|
assert($('button').hasClass('btn-block'));
|
||||||
```
|
```
|
||||||
|
|
||||||
All of your `button` elements should have closing tags.
|
Todos tu elementos `button` deben tener etiquetas de cierre.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
assert(
|
assert(
|
||||||
|
Reference in New Issue
Block a user