JavaScript -  Drum Kit

講者：王譽錚

日期：2019/11/27

大綱

  • 陣列
  • function
  • Drum Kit - HTML
  • Drum Kit - JavaScript

陣列

' A'      'F'      'G'     'W'      'E'      'N'      'C'      'Z'

    0       1        2        3         4         5       6       7

let a = [' A', 'F', 'G', 'W', 'E', 'N', 'C', 'Z']

宣告與呼叫

let colors = ["Red", "Green", "Blue"];
let numbers = new Array(1, 2, 3);
let t = new Array(5);
let country = Array("台灣", "日本", "美國");

colors;
>>> (3) ["Red", "Green", "Blue"]
numbers[2];
>>> 3
let x = 1;
country[x];
>>> "日本"

增加

colors[colors.length] = 'Orange';
colors;
>>> (4) ["Red", "Green", "Blue", "Orange"]

numbers.push(0);
numbers;
>>> [1, 2, 3, 0]

country[3] = '西班牙';
country;
>>> (4) ["台灣", "日本", "美國", "西班牙"]

刪除

let lastElement = colors.pop();
colors;
>>> (3) ["Red", "Green", "Blue"]

colors.pop();
>>> (2) ["Red", "Green"]

LAB 1

現有陣列A: [1, 2, 5, 6, 99, 4, 5]跟B: [1, 6, 0, 33, 44, 88, -10])，請分別找到兩個陣列的最小值，並回傳A跟B哪邊比較大（一樣則回傳一樣大）

LAB 1 解答

A = [1, 2, 5, 6, 99, 4, 5];
B = [1, 6, 0, 33, 44, 88, -10];
a = A[0];
b = B[0];
for(let i = 1; i < A.length; i++){
  if(a > A[i]){
    a = A[i];
  }
}
for(let i = 1; i < B.length; i++){
  if(b > B[i]){
    b = B[i];
  }
}
if(a > b){
  console.log("A比較大");
}else if(a < b){
  console.log("B比較大");
}else{
  console.log("一樣大");
}

Function

Function寫法

function square(number) {
  return number * number;
}
square(2);  // 4

1. 陳述式：
    function 名稱(參數){執行內容}

Function寫法

const makeNoise = function() {
  console.log("Pling!");
};
makeNoise();  // → Pling!

console.log(typeof makeNoise);	//function

2. 函式運算式：
    變數名稱 = function (參數){執行內容}

Function寫法

let power = (base, exponent) => {
  let result = 1;
  for (let count = 0; count < exponent; count++) {
    result *= base;
  }
  return result;
};

3. 箭頭函式：
    宣告 變數名稱 = (參數) => {執行內容}

LAB 2

請寫出一個叫做 starReturn 的 function 並且接受一個參數 n，能回傳 n 個 *

LAB 2 解答

function starReturn(n){
  ans = '';
  for(let i = 0; i < n; i ++){
  	ans = ans + '*'
  }
  console.log(ans);
}

n = prompt();
starReturn(n);

Drum Kit - HTML

JavaScript Drum Kit

<div class="keys">    
	<div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>
</div>

在畫面上顯示按鍵

<audio data-key="65" src="sounds/clap.wav"></audio>

加上音樂

Drum Kit - JavaScript

鍵碼

function removeTransition(e) {
  if (e.propertyName !== 'transform') return;
  e.target.classList.remove('playing');
}

移除播放效果

function playSound(e) {
    if (e.keyCode !== 65) return; 
    let keyNo = 65;
    let audio = document.querySelector(`audio[data-key="${keyNo}"]`);
    let key = document.querySelector(`div[data-key="${keyNo}"]`);
    if (!audio) return;

    key.classList.add('playing');
    audio.currentTime = 0;
    audio.play();
}

播放對應的音樂

 

let keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);

監聽按鍵是否有按下

LAB 3

嘗試把程式碼改成鍵盤按下畫面上對應的按鍵的時候，會有對應的聲音出現

LAB 4

嘗試把程式碼改成用滑鼠按下畫面上的按鍵的時候，會有對應的聲音出現

參考來源

JavaScript專案 hackmd：https://hackmd.io/a3TlMztVSwWkmfccNFdOFA?edit

Made with Slides.com