Skip to content

Commit a6e97fa

Browse files
ShMcKShMcK
committed
first four lessons
1 parent 632b4f0 commit a6e97fa

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+
const name = '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+
const add = (x, y) => {
60+
return x + y;
61+
};
62+
// single line, auto returns
63+
const subtractOne = x => x - 1;
64+
const getOne = () => 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 the for loop to log numbers from 1 to 5",
38+
"description": "fix the broken 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 the for loop to log numbers from 1 to 5
54+
+ fix the broken 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-
var expect = 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+
var chai = require('chai');
3+
var spies = require('chai-spies');
4+
var expect = chai.expect;
5+
chai.use(spies);
6+
var spy = 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)