Skip to content

Commit c0fb337

Browse files
soyainesoyaine
committed
update the introduction of this guides
1 parent 72f78bf commit c0fb337

6 files changed

Lines changed: 37 additions & 29 deletions

File tree

‎01 - JavaScript Drum Kit/README.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
# 01 JavaScript Dump Kit 中文指南
22

3-
by [缉熙Soyaine](https://github.com/soyaine)
4-
5-
3+
> 作者：©[缉熙Soyaine](https://github.com/soyaine)
4+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 1 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
65
76
## 实现效果
87

‎02 - JS + CSS Clock/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# 02 纯 JS、CSS 时钟 中文指南
22

3+
> 作者：©[缉熙Soyaine](https://github.com/soyaine)
4+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 2 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
5+
36
## 实现效果
47

58
![实现效果 by soyaine](https://cl.ly/0y1C2T1z3p2R/Screen%20recording%202016-12-23%20at%2012.30.25%20PM.gif)

‎03 - CSS Variables/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# 03 CSS Variable
22

3+
> 作者：©[缉熙Soyaine](https://github.com/soyaine)
4+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 3 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
5+
36
## 实现效果
47

58
![实现 by Soyaine](https://cl.ly/2Z1x1N0M2u2D/Screen%20recording%202016-12-22%20at%2002.03.35%20PM.gif)

‎04 - Array Cardio Day 1/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# 04 Array Cardio 💪 指南
22

3+
> 作者：©[缉熙Soyaine](https://github.com/soyaine)
4+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 4 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
5+
36
## 实现效果
47

58
这一部分主要是熟悉 Array 的几个基本方法，其中有两个（filter、map）是 ES5 定义的迭代方法，这些迭代方法都有一个特点，就是对数组的每一项都运行给定函数，根据使用的迭代方法的不同，有不同的返回结果。

‎04 - Array Cardio Day 1/index-SOYAINE.html‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,14 @@
5656
// Array.prototype.sort()
5757
// 3. Sort the inventors by birthdate, oldest to youngest
5858
// 把这些人从大到小进行排序
59-
const ordered = inventors.sort(function(firstName, secondName) {
60-
if(firstName.year > secondName.year) {
61-
return 1; // 对 sort 函数，返回值为 -1 排在前面，1 排在后面
62-
} else {
63-
return -1;
64-
}
65-
});
66-
console.table(ordered);
59+
// const ordered = inventors.sort(function(firstName, secondName) {
60+
// if(firstName.year > secondName.year) {
61+
// return 1; // 对 sort 函数，返回值为 -1 排在前面，1 排在后面
62+
// } else {
63+
// return -1;
64+
// }
65+
// });
66+
// console.table(ordered);
6767

6868
const __ordered = inventors.sort((a, b) => (a > b) ? 1 : -1);
6969
console.table(__ordered);
@@ -73,16 +73,16 @@
7373
// 4. How many years did all the inventors live
7474
// 他们所有人一共活了多少岁
7575
// 下面三种写法是一样的效果
76-
var total = 0;
77-
for(var i = 0; i < inventors.length; i++) {
78-
total += inventors[i].passed - inventors[i].year;
79-
}
80-
console.log(total);
81-
82-
var totalYears = inventors.reduce(function(total, inventor) {
83-
return total + inventor.passed - inventor.year;
84-
}, 0);
85-
console.log(totalYears);
76+
// var total = 0;
77+
// for(var i = 0; i < inventors.length; i++) {
78+
// total += inventors[i].passed - inventors[i].year;
79+
// }
80+
// console.log(total);
81+
//
82+
// var totalYears = inventors.reduce(function(total, inventor) {
83+
// return total + inventor.passed - inventor.year;
84+
// }, 0);
85+
// console.log(totalYears);
8686

8787
const totalYear = inventors.reduce( (total, inventor) => {
8888
return total + inventor.passed - inventor.year;
@@ -112,10 +112,10 @@
112112

113113
// 下面是我在豆瓣里筛选书名里含有 CSS 的书的代码
114114
// https://book.douban.com/tag/web
115-
const cate = document.querySelectorAll('.subject-list h2 a');
116-
const book = links
117-
.map(link => link.title)
118-
.filter(title => title.includes('CSS'));
115+
// const links = document.querySelectorAll('.subject-list h2 a');
116+
// const book = links
117+
// .map(link => link.title)
118+
// .filter(title => title.includes('CSS'));
119119

120120

121121
// 7. sort Exercise
@@ -129,6 +129,7 @@
129129

130130
// 8. Reduce Exercise
131131
// Sum up the instances of each of these
132+
// 统计各个物品的数量
132133
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
133134
const reduce = data.reduce( (obj, item) => {
134135
if( !obj[item] ) {

‎README.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@
33
最后更新：2016-12-21
44

55
> 中文指南作者：©[缉熙Soyaine](https://github.com/soyaine)
6-
> JavaScript30 教程作者：[Wes Bos](https://github.com/wesbos)
7-
> JavaScript30 挑战官网：[JavaScript30](https://javascript30.com)
8-
> 指南发布平台：[GitHub](https://github.com/soyaine/JavaScript30)、[简书](http://www.jianshu.com/notebooks/8509835/latest)
6+
> [JavaScript30](https://javascript30.com) 教程作者：[Wes Bos](https://github.com/wesbos)
7+
> 完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
98
109
## JavaScript30 是什么？
1110

@@ -44,7 +43,7 @@ JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30
4443
1. [x] JavaScript Drum Kit [指南](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit) | [纯 JS 模拟敲鼓效果](http://soyaine.github.io/JavaScript30/01 - JavaScript Drum Kit/index-SOYAINE.html)
4544
2. [x] JS + CSS Clock [指南](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock) | [纯 JavaScript+CSS 时钟效果](http://soyaine.github.io/JavaScript30/02 - JS %2B CSS Clock/index-SOYAINE.html)
4645
3. [x] CSS Variables [指南](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables) | [用 CSS 变量实现拖动控制参数效果](http://soyaine.github.io/JavaScript30/03%20-%20CSS%20Variables/index-SOYAINE.html)
47-
4. [x] Array Cardio, Day 1 [指南](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201) | [数组基本操作方法示例](http://soyaine.github.io/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201/index-SOYAINE.html)
46+
4. [x] Array Cardio, Day 1 [指南](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201) | [数组基本操作方法示例](http://soyaine.github.io/JavaScript30/04%20-%20Array%20Cardio%20Day%201/index-SOYAINE.html)
4847
5. [ ] Flex Panel Gallery
4948
6. [ ] Type Ahead
5049
7. [ ] Array Cardio, Day 2

0 commit comments

Comments
 (0)