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. **去除样式的事件处理程序**

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`` 方法。

## 解决难点

### 如何将键盘按键与页面按钮对应起来？

连接的帮手是 ``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');

}

最后更新：2016-12-19

我相信 Learn by Use 的同时也深信教是最好的学。

写这份中文指南的想法来源是 Nitish Dayal 写的 Guides，看了之后我决定效仿他在记录笔记的同时梳理思路，整理形成指南，希望能够帮助到想要进行练习的人们，特别是那些想要入门的前端小白们。

目前还在更新之中，点击下方目录中的链接即可跳转到练习对应的指南。

如果阅读过程中发现问题，请[在这里提 issue](https://github.com/soyaine/JavaScript30/issues)。

如果喜欢记得 Star 哟~♪(^∇^*)，鼓励我写出更好的文章。

下面是完成 Wes Bos 的 JavaScript30 挑战所能借鉴的文档，每个文档的具体使用建议如下：

- [挑战初始文档](https://github.com/wesbos/JavaScript30)：这是 Wes Bos 这份教程涉及的代码，你可以直接 Clone 或者下载到本地，然后开始你 30 天的挑战之旅。文档共有 30 个文件夹，每个文件夹中至少有两个文件。

- **index-START.html**：是提供给我们的初始文档，方便我们专注于 JavaScript 的编写，这个文档已经将基础的 HTML 和 CSS 部分写好，我们只需要在这个基础上编写 JavaScript 代码，实现特定的功能即可。

- ~~[在线 GitBook]（写完之后会有）~~

1. [x] JavaScript Drum Kit