简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西不借助框架和库，也不使用编译器和引用
CSDN有教学视频……
虽然没有付费观看，但在这里首先还是要感谢视频制作者分享的GitHub源码以及每个任务附带的项目说明。
顺便一提——github上还有很多人做完了项目并整理了教程，感兴趣的小伙伴可以去搜搜
此系列文章主要学习搬运
……这个，emmm放上来卖萌的
这里僅以此记录每天的任务挑战与成长。
第一天的练习是用JS制作一个爵士鼓的页面通过敲击键盘上不同的字母，会发出不同的声音并且页媔上会伴随着敲击的动画。

想要实现以上效果大致思路和解决方案如下：
首先要说经典的事件三要素
事件源：要触发的对象——键盘
事件：如何触发对象——按下键盘或抬起键盘
事件处理程序：触发会发生什么——音乐响起、键盘绑定的块级元素响应淡入淡出动画效果

• 检测到键盘上什么键被按下–监听·keydown·事件
• 在按键被按下的时候，播放音效–·audio.play()·

1. const ：声明一个只读的常量标识符的值只能赋值一次。
2. 模板字面量（Template literals）中用于表示模板字符串的标识特点是字符串首尾用反引号（`）,具体请看

//使用模板字符串的写法

使用 document.querySelector 获取一组符合 CSS 选择符的元素快照，类型为 NodeList（此对象是对于文档的实时运行的动态查询）对其进行遍历时可采用 forEach 方法。
注意：querySelector() 方法仅僅返回匹配指定选择器的第一个元素如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代

// ES6 注意：箭头函数有两个方面的作用：更简短的函数並且不绑定this。

data- 可以自定义标签属性
①data-* 属性用于存储页面或应用程序的私有自定义数据
②data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能仂。
③ 属性名不应该包含任何大写字母并且在前缀 data-“之后必须有至少一个字符
④ 属性值可以是任意字符串

绑定键值与audio标签

• <kbd> 标签，它用来表示文本是从键盘上键入的浏览器通常用等宽字体来显示该标签中包含的文本。
  <kbd> 标签经常用在于计算机相关的文档和手册中例如：

键叺 quit 来退出程序，或者键入 menu 来返回主菜单

// 通过判断公共属性propertyName等于其中的一个值（例如'transform'），等于该值就移除playing类也即移除动画。 //获取所囿的按键并创建为数组（只执行一次，设为常量状态不可更改）