JavaScript30 之01 – 架子鼓

JavaScript30是30天每天用原生JavaScript完成一个网页项目的挑战，附有免费的视频教程。 （https://javascript30.com/ ）

无意间在网上看到，觉得很有趣，就开始了。在这里记录一下过程中涉及到的自己不熟悉的内容吧。

01 – JavaScript Drum Kit

1. HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。element.dataset.*以获取该属性。

1. ES6新特性。模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号（`）时，需要在它前面加转义符（\）。
2. audio.play()
3. <kbd> 标签定义键盘文本。说到技术概念上的特殊样式时，就要提到 <kbd> 标签。正如你已经猜到的，它用来表示文本是从键盘上键入的。

CSS

CSS是题目给好的。因为CSS比较少写，就研读一下吧。

/*key的父节点*/
.keys {
  display: flex; /*表示它的子节点是flex布局*/

  flex: 1; /*flex属性是flex-grow, flex-shrink 和 flex-basis的简写。但是这个不是应该写在items上吗，为什么写在了容器上，不清楚是不是写错了。再研究一下。*/

  min-height: 100vh; /*视窗高度的百分比。视窗被均分为100单位的vh。视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。*/

  align-items: center; /*定义flex的盒子纵轴对齐的*/

  justify-content: center; /*定义flex的盒子横轴对齐的*/

}

flex布局的相关属性见http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

.key {
  border: .4rem solid black; /*border-width border-style border-color*/

  border-radius: .5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease; /* transition-property transition-duration transition-timing-function transition-delay */

  width: 10rem;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.4);
  text-shadow: 0 0 .5rem black;
}

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}
/* 当键盘被点击时，把对应的key加上playing这个类，就可以实现变化效果 */

.sound {
  font-size: 1.2rem;
  text-transform: uppercase; /*字面意思*/
  letter-spacing: .1rem; /*字面意思*/
  color: #ffc600;
}