#TIL (May 1st, 열일곱번째 이야기)

Web development Bootcamp by Angela Yu

1.Hight Order Functions

"Higher order functions are functions that can take other functions as inputs."

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

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

function calculator(num1,num2,operator) {
  return operator(num1,num2);
  
calculator(1,2,add);
  //3 is printed 
calculator(4,5,multiply);
  //20 is printed 

1.1 debugger

debugger;
calculator(2,3,multiply); //먼저 debugger를 출력한후 calculaor함수를 실행시키면 어떻게 실행시키는지 자세히 볼수 있음. 디버깅에 유용! 

2. addEventListner

• 여러 버튼이 있을때 전체에 클릭 효과 적용하기

    <button class="w drum">w</button>
    <button class="a drum">a</button>
    <button class="s drum">s</button>
    <button class="d drum">d</button>
    <button class="j drum">j</button>
    <button class="k drum">k</button>
    <button class="l drum">l</button>

for (var i=0;i<document.querySelectorAll(".drum").length;i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", function(){
    alert("Hey you clicked me!");
  });
}

• 클릭해서 음성파일 재생 하기

for (var i=0;i<document.querySelectorAll(".drum").length;i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", function(){
    var audio = new Audio('sounds/tom-1.mp3');
  audio.play();
  });

2.1 This

• 현재 함수를 부른 객체가 누구인지를 나타낸다. 함수가 어떻게 호출되냐에 따라서 this가 결정된다.

for (var i=0;i<document.querySelectorAll(".drum").length;i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", function(){

    this.style.color = "white";



  });

2.2 Switch

switch (expression){
  case 값A :
      값이 A일 때 실행할 명령문;
      break;
  case 값B :
      값이 B일 때 실행할 명령문;
      break;
  case 값C :
      값이 C일 때 실행할 명령문;
      break;
  case 값D :
      값이 D일 때 실행할 명령문;
      break;
  case 값E :
      값이 E일 때 실행할 명령문;
      break;
  default :
      위의 값 A ~ E 모두 아닐때 실행할 명령문;

}

• 버튼 클릭했을때, 다른 드럼소리 나게 하려면?

  for (var i=0;i<document.querySelectorAll(".drum").length;i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", function(){
  var buttonInnerHTML = this.innerHTML;
    
    switch (buttonInnerHTML) {
      case "w" :
        var tom1= new Audio("sounds/tom-1.mp3");
        tom1.play();
        break;// class 수만큼 반복 
      
      case "a" :
        var tom2 = new Audio("sounds/tom-2.mp3);
        tom2.play();
       default:
        
  });
  }

3. Constructor Function

function HouseKeeper[first, last, age, expertise) {
 this.firstName = first;
 this.lastName = last;
 this.age = age;
 this.expertise = "bathroom";
} 
// and to initialise 
var houseKeeper1 = new HouseKeeper("jojo", "kim", 29, ["floor"]) 

3.1 add function in method

function HouseKeeper[first, last, age, expertise) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.expertise = "bathroom";
  this.clean = function () {
    alert("cleaning in progress");
} 
var houseKeeper1 = new HouseKeeper("jojo", "kim", 29, ["floor"]);


HouseKeeper1.clean();

3.2 Higher Order Function (Callback Function)

document.addeventListner("keypress", respondToKey(event) {
                         function respondToKey(event) {
  console.log("Key pressed.");

}})