image.png

개요

키보드 이벤트에 반응하는 div 와 audio 태그를 만들어보자.

배운 점

  1. Array.prototype.forEach() 의 사용

    • Array 객체에서만 사용할 수 있으며 CallBack 함수를 매개변수로 받아 Array 의 모든 요소에 대해 CallBack 함수를 수행합니다.
  2. ES6 의 화살표 함수

    • 익명 함수에서만 사용할 수 있습니다.
    • call, applay, bind 를 사용하지 않아도 언제나 상위 스코프의 this를 가리키며 이를 Lexical this라 합니다.
    • 화살표 함수는 생성자 함수로 사용할 수 없습니다. 생성자 함수는 prototype 프로퍼티를 가지며 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용합니다. 하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않습니다.
  3. addEventListener 의 활용

    • javascript 를 통해 event 를 추가할 수 있으며, 매개변수를 통해 어떤 event 형태도 조작할 수 있습니다.
    • window 에 붙이는 경우 전역의 형태로 이벤트를 감지할 수 있습니다.
    • 이벤트 객체는 이벤트 핸들러나 리스너로 지정된 함수에 전달됩니다. 전달받기 위한 함수의 매개변수 이름은 보통 e를 사용합니다.
  4. HTML 태그의 data set 사용

    • HTML 태그내에 data 문을 사용하여 임의의 데이터를 저장할 수 있습니다.
      하지만 HTML 코드에 노출됨으로 제한적으로 사용하여야 됩니다.

추가적으로 찾아볼 것 & 후기

  • foreach 문은 for 문보다 간결하며 속도나 메모리 면에서 이점을 가지고 있는 방법이라고 합니다. 하지만 아직 거기까지는 이해하기 힘들었기에 나중의 과제로 남겨두기로 했습니다.

참고자료

  1. ES6 의 화살표 함수
    http://webframeworks.kr/tutorials/translate/arrow-function/
    https://poiemaweb.com/es6-arrow-function
  1. HTML 태그의 data set 사용
    https://www.zerocho.com/category/HTML&DOM/post/5a76d1eaabd090001b981ba6
    https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0