addEventListener to a Button

var numberOfDrumButton = document.querySelectorAll("button").length;

for(var i = 0; i<numberOfDrumButton; i++) {
    document.querySelectorAll(".drum")[i].addEventListener("click", function() {
        alert("I got clicked!");
    });
    
}

function

 document.querySelectorAll(".drum")[i].addEventListener("click", function() {
 
 }

조건 3가지

function add (num1, num2) {
    return num1 + num2 ;
}

function multiply (num1, num2){
    return num1 * num2 ;
}

function calculator (num1, num2, operator){
    return operator (num1, num2);
}

calculator(4,5,add);
// = 9

claculator(4,5,multiply);
// = 20

add Audio sounds

   var audio = new Audio("sounds/tom-1.mp3");
        audio.play();

this

입력: console.log(this.innerHTML);
출력: w를 클릭하면 w가 출력

Constructor Function (생성자 함수)

function BellBoy (name, age, hasWorkPermit, languages) { ///생성자 함수
  this.name = name;
  this.age = age;
  this.hasWorkPermit = hasWorkPermit;
  this.languages = languages;
}

var bellBoy1 = new BellBoy("jane", 24, true, ["French", "English"]);
var bellBoy2 = new BellBoy("sung", 26, true, ["Korean", "English"]);

console.log(bellBoy1.name);
= "jane"

console.log(bellBoy2.name);
= "sung"

switch문

switch (key) {
    case value:
        
        break;

    default:
        break;
}

 var buttonInnerHTML = this.innerHTML;

         switch (buttonInnerHTML) {
            case "w":
                    var tom1 = new Audio("sounds/tom-1.mp3");
                    tom1.play();
                break;
            case "a":
                    var tom2 = new Audio("sounds/tom-2.mp3");
                    tom2.play();

                break;
            case"s":
                    var tom3 = new Audio("sounds/tom-3.mp3");
                    tom3.play();
                break;
            case"d":
                    var tom4 = new Audio("sounds/tom-4.mp3");
                    tom4.play();
                break;
            case"j":
                    var crash = new Audio("sounds/crash.mp3");
                    crash.play();
                break;
            case"k":
                    var kick = new Audio("sounds/kick-bass.mp3");
                    kick.play();
                break;
            case"l":
                    var snare = new Audio("sounds/snare.mp3");
                    snare.play();
                break;

            default:
                console.log(buttonInnerHTML)
         }

Methods

function moveSuitcase {
  alert("May I take your suitcase?");
  pickupSuitcase();
  move();
}

var bellBoy1 = {
  name: "jane", 
  age: 24,
  hasWorkPermit: true, 
  languages: ["French", "English"],
  moveSuitcase function() {
  alert("May I take your suitcase?");
  pickupSuitcase();
  move();
	}
}

call Methods

bellBoy1.moveSuitcase();

Constructor Function(생성자 함수)에 대입

function BellBoy (name, age, hasWorkPermit, languages) { ///생성자 함수
  this.name = name;
  this.age = age;
  this.hasWorkPermit = hasWorkPermit;
  this.languages = languages;
  this.moveSuitcase = function() {
    alert("May I take your suitcase?");
  	pickupSuitcase();
  	move();
  }
}

console 창
var bellBoy1 = new BellBoy ("sung", 12, true, ["Korean", "French"];

입력: bellBoy1.moveSuitcase()
출력: alert("May I take your suitcase?");
  		pickupSuitcase();
  		move();

Constructor Function에 대해 자세히...

function Audio (fileLocation) {
  this.fileLocation = fileLocation;
  this.play = function () {
    //Tap into the audio hardware
    //Check the file at fileLocation exists
    //Check the file at fileLocation is a sounds file
    //Play the file at fileLocation
  }
}

var tom1 = new Audio("sounds/tom-1.mp3");
tom1.play();

keypress

	makesounds(buttonInnerHTML);
document.addEventLister("keypress",function(event){
  makesounds(event.key);
});

function makesounds(key){
 var buttonInnerHTML = this.innerHTML;
  switch (key){
    case "w" :
      var tom1 = new Audio("sounds/tom-1.mp3");
        tom1.play();
           break;
  }
  
}

Callback Function

document.addEventLister("keypress",respondToKey(event));

function respondToKey(event){
  console.log("key pressed.");
}

function sayHi(to) {
	console.log("Hello ", + to);
}

입력: sayHi("Tom");
출력: Hello, Tom

여기서 to는 아무거나 넣어도 상관없음.
e를 넣든 i를 넣든 그저 매개변수에 이름을 쥐어준것뿐.

animationButton

CSS

.pressed {
  box-shadow: 0 3px 4px 0 #DBEDF3;
  opacity: 0.5;
}

javascript

  function buttonAnimation(currentKey) {
        var activeButton = document.querySelector("." + currentKey);

        activeButton.classList.add("pressed");
        
        setTimeout (function() {
            activeButton.classList.remove("pressed")
        }, 100);
    }