complete 01 Drum Kit Guide

Author: soyaine

Diff for: 01 - JavaScript Drum Kit/README.md

@@ -0,0 +1,104 @@
+# 01 JavaScript Dump Kit 中文指南
+
+by [缉熙Soyaine](https://github.com/soyaine)
+
+
+
+## 实现效果
+
+模拟一个打鼓的页面。用户在键盘上按下 ASDFGHJKL 这几个键时，页面上与字母对应的按钮变大变亮，对应的鼓点声音响起来。
+
+## 关键点
+
+1. 键盘事件
+2. 播放声音
+3. 改变样式
+
+
+## 步骤分解
+
+1. **添加键盘事件监听**。在 window 上添加键盘 `keydown` 事件。
+2. **对应事件处理程序。**
+    1. **获取键码**
+    2. **用 `querySelector` 获取元素**
+    3. **获取 `data-key` 为对应键码的元素**
+    4. **处理元素**。播放音频、添加样式。
+3. **为所有的 `div.key` 添加 `transitionened` 事件**。
+    1. **获取所有样式为 `key` 的元素**
+    2. **为其添加事件监听**
+4. **去除样式的事件处理程序**
+
+## 基础语法
+
+### 一些 ES6 语法
+
+1.  ``const`` ：声明一个只读的常量，标识符的值只能赋值一次。
+
+2.  \`字符串 ${ 变量、属性名 } \`：模板字面量（Template literals）中用于表示模板字符串的标识。特点是字符串首尾用反引号（\`），内部的模板部分用 ${ } 括起来表示，具体请看[MDN文档]( https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings)。简单例子如下：
+
+    ````javascript
+          var a = 1;
+          var b = 2;
+          //不用模板的写法
+          console.log("三是" + (a + b) + "不是" + (2 * a + b)); //"三是3不是4"
+          //使用模板字符串的写法
+          console.log(`三是${a + b}不是${2 * a + b}`); //"三是3不是4"
+    ````
+
+### ``forEach`` 与箭头函数
+
+使用 ``document.querySelector`` 获取一组符合 CSS 选择符的元素快照，类型为 NodeList，对其进行遍历时可采用 ``forEach`` 方法。
+
+```javascript
+// Code from http://es6-features.org/#StatementBodies
+
+// ES6
+nums.forEach(v => {
+	if (v % 5 === 0)
+		fives.push(v);
+})
+
+// ES5
+nums.forEach(function (v) {
+	if (v % 5 === 0)
+		five.push(v);
+})
+```
+
+
+## 解决难点
+
+### 如何将键盘按键与页面按钮对应起来？
+
+连接的帮手是 ``keydown`` 事件中的 `keyCode` 属性，`keyCode` 属性的值和 ASCII 编码值相同（对应小写字母）。在[这个网站]( http://keycode.info/ )可以用按键盘来查看对应的键码。
+
+我们能获取到的初始页面中，按钮 `div` 和音频 `audio` 标签中都添加了一个属性 `data-key` 用于存储对应的键码，这样做的目的是，添加键盘事件监听后，触发键盘事件时即可获取事件的 `keyCode` 属性值，以此为线索，操作对应的按钮及音频。
+
+````javascript
+const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
+````
+
+### 如何保证按键被按住不放时，可以马上响起连续鼓点声？
+
+每次播放音频之前，设置播放时间戳为 0：
+
+````javascript
+var audio = document.getElementById("video"); 
+audio.currentTime = 0;
+audio.play();
+````
+
+### 如何使页面按钮恢复原状？
+
+利用一个叫 [`transitionened`](https://developer.mozilla.org/zh-CN/docs/Web/Events/transitionend) 的事件，它在 CSS transition 结束后会被触发。我们就可以利用这个事件，在每次打鼓的效果（尺寸变大、颜色变化）完成之后，去除相应样式。
+
+在这个页面中，发生 `transition` 的样式属性不止一个（`box-shadow`, `transform`, `border-color`），所以需要添加一个判断语句，使每发生一次按键事件时，只去除一次样式。
+
+````javascript
+funciton remove(event) {
+  if (event.propertyName !== 'border-left-color') return;
+  this.classList.remove('playing');
+  // event.target.classList.remove('playing');
+}
+````

Diff for: README.md

@@ -1,7 +1,8 @@
-# JavaScript30 - 30 天挑战纯 JS 中文指南
+# JavaScript30 - 一个月纯 JS 挑战中文指南
 
-> _© 版权声明_    
-> 中文指南作者：[缉熙Soyaine](https://github.com/soyaine)，一枚学生  
+最后更新：2016-12-19
+
+> 中文指南作者：©[缉熙Soyaine](https://github.com/soyaine)，一枚学生  
 > JavaScript30 教程作者：[Wes Bos](https://github.com/wesbos)    
 > JavaScript30 挑战官网：[JavaScript30](https://javascript30.com)  
 > 指南发布平台：[GitHub](https://github.com/soyaine/JavaScript30)、[简书](http://www.jianshu.com/notebooks/8509835/latest)、[Blog](http://soyaine.cn/code/)  
@@ -16,24 +17,24 @@
 
 This is my note when I practice the JavaScript30.
 
-想法来源是 [Nitish Dayal 写的教程](https://github.com/nitishdayal/JavaScript30/tree/master/exercises)。因为看了他的教程，我在深信「Learn by Use」的同时也相信，教是最好的学。所以我决定在练习的过程中写一份指南，希望能够帮助到想要进行练习的人们。
-
-## 如何使用
-目前还在更新之中，点击下方目录中的链接即可跳转到练习对应的指南。
+我相信 Learn by Use 的同时也深信教是最好的学。
 
-如果阅读过程中，发现问题请[在这里提 issue](https://github.com/soyaine/JavaScript30/issues)。如果喜欢记得 Star 哟~♪(^∇^*)
-
-~~[在线 GitBook]（写完之后会有）~~
+写这份中文指南的想法来源是 Nitish Dayal 写的 Guides，看了之后我决定效仿他在记录笔记的同时梳理思路，整理形成指南，希望能够帮助到想要进行练习的人们，特别是那些想要入门的前端小白们。
 
+## 如何使用
+目前还在更新之中，点击下方目录中的链接即可跳转到练习对应的指南。   
+如果阅读过程中发现问题，请[在这里提 issue](https://github.com/soyaine/JavaScript30/issues)。  
+如果喜欢记得 Star 哟~♪(^∇^*)，鼓励我写出更好的文章。
 
-Wes Bos 提供了一份教程，该如何使用他的资料呢？
+下面是完成 Wes Bos 的 JavaScript30 挑战所能借鉴的文档，每个文档的具体使用建议如下：
 
 - [JavaScript30 官网](https://javascript30.com)：进入官网注册后可以观看和下载所有教程视频。
 - [Nitish Dayal 写的英文指南](https://github.com/nitishdayal/JavaScript30/tree/master/exercises)：这是一份非官方的文字版指南，也是激励我写这一系列文章的主要因素。
-- [挑战初始文档](https://github.com/wesbos/JavaScript30)：这是 Web Bos 这份教程涉及的代码，共有 30 个文件夹，每个文件夹中至少有两个文件。
-	- **index-START.html**：是提供给我们的初始文档，为了便于我们专注于 JavaScript 的编写，这个文档已经将基础的 HTML 和 CSS 部分写好，我们只需要在这个基础上编写 JavaScript 代码，实现特定的功能即可。
+- [挑战初始文档](https://github.com/wesbos/JavaScript30)：这是 Wes Bos 这份教程涉及的代码，你可以直接 Clone 或者下载到本地，然后开始你 30 天的挑战之旅。文档共有 30 个文件夹，每个文件夹中至少有两个文件。
+	- **index-START.html**：是提供给我们的初始文档，方便我们专注于 JavaScript 的编写，这个文档已经将基础的 HTML 和 CSS 部分写好，我们只需要在这个基础上编写 JavaScript 代码，实现特定的功能即可。
 	- **index-FINISHED.html**：已经实现了最终效果的文档，可以查看效果和实现思路。
 - [我写的中文指南源码](https://github.com/soyaine/JavaScript30)：部分代码写了注释，文档结构和 Wes Bos 提供的相同，进入每个文件夹都可查看当前挑战的指南。
+- ~~[在线 GitBook]（写完之后会有）~~
 
 ## Plan
 
@@ -48,7 +49,7 @@ figure out what way you learn best
 
 ## 目录
 
-1. [ ] JavaScript Drum Kit
+1. [x] JavaScript Drum Kit
 2. [ ] JS + CSS Clock
 3. [ ] CSS Variables
 4. [ ] Array Cardio, Day 1