Advanced Javascript and DOM Manipulation

• EventTarget.addEventListener();
  • sets up a function to be called whenever the specified event is delivered to the target
  • target is an obj which an event is calling the method 
    • addEventListener(type, listener[ , options]); 
      • addEventListener(eventName, respondToEvent);
    • addEventListener(type, listener[ , useCapture]);
  • type: event type th listen for
  • listener: usually javascript function. called when the event gets detected

document.querySelector("button").addEventListener("click",handleClick);
/*find the target "button", adds EventListener to the button so it can listen for "click"
when it does, it calls the listener "handleClick", runs the func inside handleClick

만약 listener에 ()가 붙어있으면, 바로 함수호출이랑 똑같은 형태니까 event와 관계없이 바로 실행되어버림
*/

function handleClick(){
  alert("clicked!");
}

//아니면 이렇게 바로 작동될 함수 작성해도 됨. 위랑 똑같음!
document.querySelector("button").addEventListener("click", function(){
	alert("clicked!);
});

//반복문(for, while)을 이용하여 모든 버튼들이 클릭되었을 때 alert가 뜨도록 설정 가능하다!
for(var i=0;i<document.querySelectorAll(".drum").length;i++){
  document.querySelectorAll(".drum")[i].addEventListener("click", function(){
    alert("button clicked!")
  });
}

function add(num1, num2){
    return num1+num2;}
undefined
function multiply(num1,num2){
    return num1*num2;
}
undefined
function calculator(num1,num2, operator){
    return operator(num1, num2);
}

//사용 시 calculator(4, 5, add); 이렇게 쓰면 잘 작동됨!

• debugger
  • 어떻게 작동하는지 보여줌

var audioOne=new Audio('sounds/tom-1.mp3');
//creating html audio element
audioOne.play();

for(var i=0;i<document.querySelectorAll(".drum").length;i++){
  document.querySelectorAll(".drum")[i].addEventListener("click", function(){
    this.style.color="white"; //클릭시 색 바꾸기
  });
}

setting properties of an object

var player1 ={
	name: "Nuguri",
    age: 24,
    team: "DK",
    worked:["2018","2019","2020", "2022"]
}

• constructor function
  • sets properites for an object

funtion Player(name, age, team, worked){ //대문자로 시작 필수
	this.name=name;
    this.age=age;
    this.team=team;
    this.worked=worked;
}

• Initialise Object using constructor function
  • var midLaner1 = new Player("Showmaker", 23, "DK", [2018, 2019, 2020, 2021, 2022] );

switch문

일반적인 switch문과 형태 동일

switch(buttonInnerHTML){
      case "w":
        var audio = new Audio("sounds/tom-1.mp3");
        break;

      case "a":
        var audio = new Audio("sounds/tom-2.mp3");
        break;

      case "s":
        var audio = new Audio("sounds/tom-3.mp3");
        break;

      case "d":
      var audio = new Audio("sounds/tom-4.mp3");
      break;

      case "j":
      var audio = new Audio("sounds/snare.mp3");
      break;

      case "k":
      var audio = new Audio("sounds/crash.mp3");
      break;

      case "l":
      var audio = new Audio("sounds/kick-bass.mp3");
      break;

      default: //해당되지 않은 것
        console.log(innerHTML);

    }

Methods

• when function is attached to an object, that is method
• function that is associated with an object
• can be used just like java, but it is attached just like other properties

var bellBoy1={
  name:"Tim",
  age: 21,
  hasWorkPermit: true,
  languages: ["French","English"],
  moveSuitcase: function(){ //this is a method
    alert("May I take your suitcase?");
    pickUpSuitCase();
    move();
  }
}

//or if you want to use it with constructor function, do this
function BellBoy(name, age, hasWorkPermit, languages){
	this.name=name;
    this.age=age;
    this.hasWorkPermit = hasWorkPermit;
    this.moveSuitcase = function(){
    alert("May I take your suitcase?");
    pickUpSuitCase();
    move();
  }
}

bellBoy1.moveSuitcase();

function Audio(fileLocation){
	this.fileLocation = fileLocation;
    this.play= function(){
    	//tap into the audio hardware
        //check the file at fileLocation exists
        //check the file at file at fileLocation is a sound file
        //play the file at fileLocation
    }
 }
 //using this constructor function, we can
 
 var tom1 = new Audio("sounds/tom-1.mp3");
 tom1.play();
 
 //play the audio at fileLoctaion

• Higer order function: take functions as input
• callback function: responds as an input of other function

document.addEventListener("keypress", respondToKey(event));
//here, addEventListener is a higher order function
function respondToKey(event){ //this is callback function
	console.log("Key Pressed.");
}

• event, or whatever namedparameters used in these functions
  • called by the object that experienced the event(here, it's click)
  • when it happens, we can get it to send some information that'll only know once the event happens
  • (like which button got clicked...)

function anotherAddEventListener(typeOfEvent, callback){
    //Detect Event Code...
    //callback doesn't get called for every event
    var eventThatHappened = {
        eventType:"keydown",
        key:"p",
        durationOfKeydown: 2
    }
if(eventThatHappened.eventType ===typeOfEvent){
    
callback(eventThatHappened);
    //what event triggered the eventlistener
}}

anotherAddEventListener("keydown",function(event){
    console.log(event)
});

//result : {eventType: 'keydown', key: 'p', durationOfKeydown: 2}

• setTimeOut : 설정된 시간 이후 명시된 function 실행

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