Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commita6e97fa

Browse files
committed
first four lessons
1 parent632b4f0 commita6e97fa

22 files changed

+549
-153
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
node_modules
2+
tutorial/_temp**

‎README.md

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,44 @@ let blockScoped = true;
3636

3737
#####Const
3838

39-
Writing basic functions continued.
39+
`const` is block-scoped, much like`let` statement.
4040

41-
We'll write two more basic functions, this time without any help.
41+
However, the value of a constant cannot change through re-assignment, and it can't be redeclared.
42+
43+
```js
44+
constname='Shawn';
45+
name='Ben';// Uncaught TypeError
46+
console.log(name);// Shawn
47+
```
48+
49+
*Note: Atom uses an older version of Chrome that does not fully implement const yet. Const will work in Atom after a few months.*
50+
51+
#####Arrow Functions
52+
53+
An arrow function (`=>`) expression has a shorter syntax compared to function expressions and lexically binds the`this` value.
54+
55+
Arrow functions are always anonymous.
56+
57+
```js
58+
// multi-line
59+
constadd= (x,y)=> {
60+
return x+ y;
61+
};
62+
// single line, auto returns
63+
constsubtractOne=x=> x-1;
64+
constgetOne= ()=>1;
65+
```
66+
67+
#####Template Literal
68+
69+
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
70+
71+
Template strings are wrapped in the backtick symbol: '\`'. Variables can be put inside of template strings using`${ name }` syntax.
72+
73+
```js
74+
let single=`string text`;
75+
let multi=`string text line 1
76+
string text line 2`;
77+
78+
let template=`string text${expression} string text`;
79+
```

‎coderoad.json

Lines changed: 91 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
],
2323
"actions": [
2424
"open('let.js')",
25-
"set('// call `varTest()`\nfunction varTest() {\n\tvar x = 1;\n\tif (true) {\n\t\tvar x = 2;\n\t\tconsole.log(x);\n\t}\n\tconsole.log(x);\n}\nvarTest();\n\n')"
25+
"set('// call `varTest()`\nfunction varTest() {\n\tvar x = 1;\n\tif (true) {\n\t\tvar x = 2;\n\t\tconsole.log(x);\n\t}\n\tconsole.log(x);\n}\nvarTest();\n\n\n')"
2626
]
2727
},
2828
{
@@ -31,11 +31,11 @@
3131
"1/01/02"
3232
],
3333
"actions": [
34-
"insert('\n// use `let` and call `letTest()`\nfunction letTest() {\n\tvar x = 3;\n\tif (true) {\n\t\tvar x = 4;\n\t\tconsole.log(x);\n\t}\n\tconsole.log(x);\n}\nletTest();\n\n')"
34+
"insert('\n// use `let` and call `letTest()`\nfunction letTest() {\n\tvar x = 3;\n\tif (true) {\n\t\tvar x = 4;\n\t\tconsole.log(x);\n\t}\n\tconsole.log(x);\n}\nletTest();\n\n\n')"
3535
]
3636
},
3737
{
38-
"description":"fix thefor loop to log numbers from 1 to 5",
38+
"description":"fix thebroken loop to log numbers 1 to 5",
3939
"tests": [
4040
"1/01/03"
4141
],
@@ -48,28 +48,110 @@
4848
},
4949
{
5050
"title":"Const",
51-
"description":"Writing basic functions continued.\n\nWe'll write two more basic functions, this time without any help.",
51+
"description":"`const` is block-scoped, much like `let` statement.\n\nHowever, the value of a constant cannot change through re-assignment, and it can't be redeclared.\n\n```js\nconst name = 'Shawn';\nname = 'Ben'; // Uncaught TypeError\nconsole.log(name); // Shawn\n```\n\n*Note: Atom uses an older version of Chrome that does not fully implement const yet. Const will work in Atom after a few months.*",
5252
"tasks": [
5353
{
54-
"description":"write a function `divideOne` divides a number by 1",
54+
"description":"Declare\"person\" as a `const`",
5555
"tests": [
5656
"1/02/01"
5757
],
5858
"actions": [
59-
"open('page-02.js')",
60-
"set('// divideOne\nfunction divideOne(x) {\n return ::>\n}\n')"
59+
"open('const.js')",
60+
"set('/*\nNote: Atom uses an older version of Chrome (47) that does not fully implement `const` yet.\n\n`const` will work in a later version of chrome, so these tests are currently skipped.\n*/\n\n// change password into a const so that it\n// cannot be redeclared\nvar password = 'PASS';\npassword = '1234';\n\n\n')"
6161
]
6262
},
6363
{
64-
"description":"write a function `mutiplyone` that multiplies a number by 1",
64+
"description":"Declare\"person\" as a constant. Check the log to see what will happen.",
6565
"tests": [
6666
"1/02/02"
6767
],
6868
"actions": [
69-
"insert('\n// multiplyOne\nfunction multiplyOne(x) {\n return ::>\n}\n')"
69+
"insert('\n// declare person as a const\n// cannot be redeclared\nvar person = {\n name: 'Shawn',\n city: 'Vancouver'\n};\n\nperson = {\n name: 'Unknown',\n city: 'Las Vegas'\n};\n\nperson.favoriteColor = 'blue';\n\n// what will the output be?\nconsole.log(person);\n\n\n')"
70+
]
71+
},
72+
{
73+
"description":"Declare\"people\" as a constant. Check the log again.",
74+
"tests": [
75+
"1/02/03"
76+
],
77+
"actions": [
78+
"insert('\n// declare people as a const\n\nvar people = ['Mandi', 'Mack', 'Ben'];\n\npeople = [];\n\npeople.push('Shawn');\n\n// what will the output be?\nconsole.log(people);\n\n')"
7079
]
7180
}
7281
]
82+
},
83+
{
84+
"title":"Arrow Functions",
85+
"description":"An arrow function (`=>`) expression has a shorter syntax compared to function expressions and lexically binds the `this` value.\n\nArrow functions are always anonymous.\n\n```js\n// multi-line\nconst add = (x, y) => {\n\treturn x + y;\n};\n// single line, auto returns\nconst subtractOne = x => x - 1;\nconst getOne = () => 1;\n```",
86+
"tasks": [
87+
{
88+
"description":"Change the\"greet\" function to use an `=>` function",
89+
"tests": [
90+
"1/03/01"
91+
],
92+
"actions": [
93+
"open('arrow-function.js')",
94+
"set('// use =>\nconst greet = function (name) {\n\treturn 'hello ' + name;\n}\n\n\n')"
95+
]
96+
},
97+
{
98+
"description":"Change the\"getName\" function to use an `=>` function without using the keyword `return`",
99+
"tests": [
100+
"1/03/02"
101+
],
102+
"actions": [
103+
"insert('\n// use => no return statement\nconst getName = function getName() {\n\treturn 'Joe';\n}\n\n\n')"
104+
]
105+
},
106+
{
107+
"description":"Fix the broken clock by using arrow functions.",
108+
"tests": [
109+
"1/03/03"
110+
],
111+
"actions": [
112+
"insert('\n// fix the clock\n// http://codepen.io/redacademy/pen/mPjXVW\n\n')"
113+
]
114+
}
115+
],
116+
"onPageComplete":"Great! Now you should have a good idea how to use `=>` functions, and how arrow functions solve the confusion over `this`"
117+
},
118+
{
119+
"title":"Template Literal",
120+
"description":"Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.\n\nTemplate strings are wrapped in the backtick symbol: '\\`'. Variables can be put inside of template strings using `${ name }` syntax.\n\n```js\nlet single = `string text`;\nlet multi = `string text line 1\n string text line 2`;\n\nlet template = `string text ${expression} string text`;\n```",
121+
"tasks": [
122+
{
123+
"description":"`log` a template literal using `template`. What does it look like?",
124+
"actions": [
125+
"open('template-literal.js')",
126+
"set('// change the output to a template literal\n\nfunction template() {\n console.log('I know what a backtick is');\n}\ntemplate();\n\n\n')"
127+
],
128+
"tests": [
129+
"1/04/01"
130+
]
131+
},
132+
{
133+
"description":"rewrite `multiline` to use template literals",
134+
"tests": [
135+
"1/04/02"
136+
],
137+
"actions": [
138+
"insert('\nfunction multiline() {\n\tconsole.log('1.\\n2.\\n3.');\n}\nmultiline();\n// 1.\n// 2.\n// 3.\n\n\n')"
139+
]
140+
},
141+
{
142+
"description":"rewrite `expressions` to use template literals",
143+
"tests": [
144+
"1/04/03"
145+
],
146+
"hints": [
147+
"Use `${expressions}`"
148+
],
149+
"actions": [
150+
"insert('\nfunction expression(name) {\n console.log(\n 'Hello ' + name +\n ', your bill is ' +\n (2.25 * 1.15).toFixed(2) +\n '.'\n );\n}\nexpression('Joe');\n\n')"
151+
]
152+
}
153+
],
154+
"onPageComplete":"Great! Now you should have a good idea how to use template literals in your code"
73155
}
74156
]
75157
}

‎tutorial/1/01/01.spec.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ var spy = chai.spy.on(console, 'log');
77

88
/// load('let.js')
99

10-
describe('01 varTest',function(){
10+
describe('01 varTest',()=>{
1111

12-
it('doesn\'t exist',function(){
12+
it('doesn\'t exist',()=>{
1313
expect(varTest).to.be.defined;
1414
});
1515

16-
it('hasn\'t been called',function(){
16+
it('hasn\'t been called',()=>{
1717
expect(spy.__spy.calls[0][0]).to.equal(2);
1818
expect(spy.__spy.calls[1][0]).to.equal(2);
1919
});

‎tutorial/1/01/02.spec.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
describe('02 letTest',function(){
1+
describe('02 letTest',()=>{
22

3-
it('doesn\'t exist',function(){
3+
it('doesn\'t exist',()=>{
44
expect(letTest).to.be.defined;
55
});
66

7-
it('should use `let` instead of `var`',function(){
7+
it('should use `let` instead of `var`',()=>{
88
console.log('spy',spy);
99
expect(spy).to.have.been.called.with(4);
1010
});
1111

12-
it('isn\'t calling 4 & 3',function(){
12+
it('isn\'t calling 4 & 3',()=>{
1313
expect(spy.__spy.calls[2][0]).to.equal(4);
1414
expect(spy.__spy.calls[3][0]).to.equal(3);
1515
});

‎tutorial/1/01/03.spec.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
describe('03 the for loop',function(){
1+
describe('03 the for loop',()=>{
22

3-
it('isn\'t logging from 1 to 5',function(){
3+
it('isn\'t logging from 1 to 5',()=>{
44
expect(spy.__spy.calls[4][0]).to.equal(1);
55
expect(spy.__spy.calls[8][0]).to.equal(5);
66
});

‎tutorial/1/01/let.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ function varTest() {
2727
}
2828
varTest();
2929
30+
3031
```
3132
))
3233

@@ -46,10 +47,11 @@ function letTest() {
4647
}
4748
letTest();
4849
50+
4951
```
5052
))
5153

52-
+ fix thefor loop to log numbers from 1 to 5
54+
+ fix thebroken loop to log numbers 1 to 5
5355
@test('1/01/03')
5456
@action(insert(
5557
```

‎tutorial/1/02/01.spec.js

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,15 @@
1-
varexpect=require('chai').expect;
2-
3-
// load('page-02.js')
4-
5-
describe('01 divideOne',function(){
6-
7-
it('doesn\'t exist',function(){
8-
expect(divideOne).to.be.defined;
9-
});
10-
11-
it('should take a parameter',function(){
12-
expect(divideOne).to.have.length(1);
13-
});
14-
15-
it('doesn\'t output a number',function(){
16-
expect(divideOne(1)).to.be.a('number');
17-
});
18-
19-
it('returns the same number',function(){
20-
expect(divideOne(1)).to.equal(1);
21-
expect(divideOne(10)).to.equal(10);
22-
});
23-
1+
'use strict';
2+
varchai=require('chai');
3+
varspies=require('chai-spies');
4+
varexpect=chai.expect;
5+
chai.use(spies);
6+
varspy=chai.spy.on(console,'log');
7+
8+
/// load('const.js')
9+
10+
describe('01 password',()=>{
11+
// cannot redeclare
12+
it('should pass',()=>{
13+
expect(true).to.be.true;
14+
})
2415
});

‎tutorial/1/02/02.spec.js

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,8 @@
1-
describe('02 multiplyOne',function(){
2-
3-
it('doesn\'t exist',function(){
4-
expect(multiplyOne).to.be.defined;
5-
});
6-
7-
it('should take a parameter',function(){
8-
expect(multiplyOne).to.have.length(1);
9-
});
10-
11-
it('should output a number',function(){
12-
expect(multiplyOne(1)).to.be.a('number');
13-
});
14-
15-
it('returns the multiplied number by one',function(){
16-
expect(multiplyOne(1)).to.equal(1);
17-
expect(multiplyOne(10)).to.equal(10);
18-
});
1+
describe('02 person',()=>{
2+
// cannot redeclare object
3+
// can change object
4+
it('should just pass',()=>{
5+
expect(true).to.be.true;
6+
});
197

208
});

‎tutorial/1/02/03.spec.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
describe('03 people',()=>{
2+
// cannot redeclare array
3+
// can change array
4+
it('should just pass',()=>{
5+
expect(true).to.be.true;
6+
});
7+
8+
});

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp