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

Commit2788494

Browse files
committed
tutorial updated for atom 0.9
1 parent30f56a1 commit2788494

File tree

9 files changed

+169
-150
lines changed

9 files changed

+169
-150
lines changed

‎README.md

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,6 @@ CodeRoad is an open-sourced interactive tutorial platform for the Atom Editor. L
1919

2020
##Outline
2121

22-
###Features
23-
24-
New features in ES2015.
25-
2622
#####Let
2723

2824
`let` allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.
@@ -77,3 +73,18 @@ let multi = `string text line 1
7773

7874
let template=`string text${expression} string text`;
7975
```
76+
77+
#####Object Literal
78+
79+
A shorthand for writing objects.
80+
81+
```js
82+
constfoo='something';
83+
constbar='else';
84+
85+
// using object literal shorthand
86+
constfooObj= {
87+
foo, bar
88+
};
89+
// { foo: 'something', bar: 'else'}
90+
```

‎coderoad.json

Lines changed: 147 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -3,155 +3,165 @@
33
"title":"ES2015",
44
"description":"Practice refactoring with ES2015 features."
55
},
6-
"chapters": [
6+
"pages": [
77
{
8-
"title":"Features",
9-
"description":"New featuresinES2015.",
10-
"pages": [
8+
"title":"Let",
9+
"description":"`let` allows you to declare variables that are limitedinscope to the block, statement, or expression on which it is used.\n\nThis is unlike the `var` keyword, which defines a variable globally, or locally to an entire function regardless of block scope.\n\n```js\nvar global = true;\nlet blockScoped = true;\n```",
10+
"tasks": [
1111
{
12-
"title":"Let",
13-
"description":"`let` allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.\n\nThis is unlike the `var` keyword, which defines a variable globally, or locally to an entire function regardless of block scope.\n\n```js\nvar global = true;\nlet blockScoped = true;\n```",
14-
"tasks": [
15-
{
16-
"description":"Run the `varTest` function and look in the console.",
17-
"tests": [
18-
"1/01/01"
19-
],
20-
"hints": [
21-
"Click\"SAVE\". ⌘ + S on Mac, ctrl + S on Windows"
22-
],
23-
"actions": [
24-
"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\n')"
26-
]
27-
},
28-
{
29-
"description":"Change `var` to `let` and run the `letTest` function. Don't forget to look in the console.",
30-
"tests": [
31-
"1/01/02"
32-
],
33-
"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\n')"
35-
]
36-
},
37-
{
38-
"description":"fix the broken loop to log numbers 1 to 5",
39-
"tests": [
40-
"1/01/03"
41-
],
42-
"actions": [
43-
"insert('\n// log numbers from 1 to 5\nfor (var i = 1; i <= 5 ; i++ ) {\n setTimeout(function() {\n console.log(i);\n })\n}\n// 6 6 6 6 6\n\n')"
44-
]
45-
}
12+
"description":"Run the `varTest` function and look in the console.",
13+
"tests": [
14+
"1/01/01"
4615
],
47-
"onPageComplete":"Great! Now you that you have an idea of how `let` works, continue to look at declaring variables with `const`."
16+
"hints": [
17+
"Click\"SAVE\". ⌘ + S on Mac, ctrl + S on Windows"
18+
],
19+
"actions": [
20+
"open('let.js')",
21+
"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')"
22+
]
23+
},
24+
{
25+
"description":"Change `var` to `let` and run the `letTest` function. Don't forget to look in the console.",
26+
"tests": [
27+
"1/01/02"
28+
],
29+
"actions": [
30+
"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')"
31+
]
32+
},
33+
{
34+
"description":"fix the broken loop to log numbers 1 to 5",
35+
"tests": [
36+
"1/01/03"
37+
],
38+
"actions": [
39+
"insert('\n// log numbers from 1 to 5\nfor (var i = 1; i <= 5 ; i++ ) {\n setTimeout(function() {\n console.log(i);\n })\n}\n// 6 6 6 6 6\n\n')"
40+
]
41+
}
42+
],
43+
"onPageComplete":"Great! Now you that you have an idea of how `let` works, continue to look at declaring variables with `const`."
44+
},
45+
{
46+
"title":"Const",
47+
"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.*",
48+
"tasks": [
49+
{
50+
"description":"Declare\"person\" as a `const`",
51+
"tests": [
52+
"1/02/01"
53+
],
54+
"actions": [
55+
"open('const.js')",
56+
"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')"
57+
]
4858
},
4959
{
50-
"title":"Const",
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.*",
52-
"tasks": [
53-
{
54-
"description":"Declare\"person\" as a `const`",
55-
"tests": [
56-
"1/02/01"
57-
],
58-
"actions": [
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')"
61-
]
62-
},
63-
{
64-
"description":"Declare\"person\" as a constant. Check the log to see what will happen.",
65-
"tests": [
66-
"1/02/02"
67-
],
68-
"actions": [
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')"
79-
]
80-
}
60+
"description":"Declare\"person\" as a constant. Check the log to see what will happen.",
61+
"tests": [
62+
"1/02/02"
63+
],
64+
"actions": [
65+
"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')"
8166
]
8267
},
8368
{
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-
}
69+
"description":"Declare\"people\" as a constant. Check the log again.",
70+
"tests": [
71+
"1/02/03"
72+
],
73+
"actions": [
74+
"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')"
75+
]
76+
}
77+
]
78+
},
79+
{
80+
"title":"Arrow Functions",
81+
"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```",
82+
"tasks": [
83+
{
84+
"description":"Change the\"greet\" function to use an `=>` function",
85+
"tests": [
86+
"1/03/01"
11587
],
116-
"onPageComplete":"Great! Now you should have a good idea how to use `=>` functions, and how arrow functions solve the confusion over `this`"
88+
"actions": [
89+
"open('arrow-function.js')",
90+
"set('// use =>\nconst greet = function (name) {\n\treturn 'hello ' + name;\n}\n\n\n')"
91+
]
11792
},
11893
{
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-
}
94+
"description":"Change the\"getName\" function to use an `=>` function without using the keyword `return`",
95+
"tests": [
96+
"1/03/02"
15397
],
154-
"onPageComplete":"Great! Now you should have a good idea how to use template literals in your code"
98+
"actions": [
99+
"insert('\n// use => no return statement\nconst getName = function getName() {\n\treturn 'Joe';\n}\n\n\n')"
100+
]
101+
},
102+
{
103+
"description":"Fix the broken clock by using arrow functions.",
104+
"tests": [
105+
"1/03/03"
106+
],
107+
"actions": [
108+
"insert('\n// fix the clock\n// http://codepen.io/redacademy/pen/mPjXVW\n\n')"
109+
]
110+
}
111+
],
112+
"onPageComplete":"Great! Now you should have a good idea how to use `=>` functions, and how arrow functions solve the confusion over `this`"
113+
},
114+
{
115+
"title":"Template Literal",
116+
"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```",
117+
"tasks": [
118+
{
119+
"description":"`log` a template literal using `template`. What does it look like?",
120+
"actions": [
121+
"open('template-literal.js')",
122+
"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')"
123+
],
124+
"tests": [
125+
"1/04/01"
126+
]
127+
},
128+
{
129+
"description":"rewrite `multiline` to use template literals",
130+
"tests": [
131+
"1/04/02"
132+
],
133+
"actions": [
134+
"insert('\nfunction multiline() {\n\tconsole.log('1.\\n2.\\n3.');\n}\nmultiline();\n// 1.\n// 2.\n// 3.\n\n\n')"
135+
]
136+
},
137+
{
138+
"description":"rewrite `expressions` to use template literals",
139+
"tests": [
140+
"1/04/03"
141+
],
142+
"hints": [
143+
"Use `${expressions}`"
144+
],
145+
"actions": [
146+
"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')"
147+
]
148+
}
149+
],
150+
"onPageComplete":"Great! Now you should have a good idea how to use template literals in your code"
151+
},
152+
{
153+
"title":"Object Literal",
154+
"description":"A shorthand for writing objects.\n\n```js\nconst foo = 'something';\nconst bar = 'else';\n\n// using object literal shorthand\nconst fooObj = {\n foo, bar\n};\n// { foo: 'something', bar: 'else'}\n```",
155+
"tasks": [
156+
{
157+
"description":"Rewrite the object in an easier way using object literals",
158+
"actions": [
159+
"open('object-literal.js')",
160+
"set('// rewrite in a simpler way\nfunction getPersonObj(name, city) {\n return {\n name: name,\n city: city\n };\n}\n')"
161+
],
162+
"tests": [
163+
"1/05/01"
164+
]
155165
}
156166
]
157167
}

‎tutorial/1/01/let.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
###Let
1+
##Let
22

33
`let` allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.
44

‎tutorial/1/02/const.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
###Const
1+
##Const
22

33
`const` is block-scoped, much like`let` statement.
44

‎tutorial/1/03/arrow-function.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
###Arrow Functions
1+
##Arrow Functions
22

33
An arrow function (`=>`) expression has a shorter syntax compared to function expressions and lexically binds the`this` value.
44

‎tutorial/1/04/template-literal.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
###Template Literal
1+
##Template Literal
22

33
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
44

File renamed without changes.

‎tutorial/2/01/object-literal.mdrenamed to‎tutorial/1/05/object-literal.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
###Object Literal
1+
##Object Literal
22

33
A shorthand for writing objects.
44

@@ -15,7 +15,7 @@ const fooObj = {
1515

1616
+ Rewrite the object in an easier way using object literals
1717
@action(open('object-literal.js'))
18-
@test('2/01/01')
18+
@test('1/05/01')
1919
@action(set(
2020
```
2121
// rewrite in a simpler way

‎tutorial/tutorial.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
#ES2015
22
Practice refactoring with ES2015 features.
33

4-
##Features
5-
New features in ES2015.
6-
74
@import('1/01/let')
85
@import('1/02/const')
96
@import('1/03/arrow-function')
107
@import('1/04/template-literal')
8+
@import('1/05/object-literal')

0 commit comments

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