"# JavaScript 30" 강의 - 01. JavaScript Drum Kit

학습일자

2020.9.28

 

학습내용

- (HTML) data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줌. data-*라는 속성으로 코드의 구분이 명확해지며 getAttribute()메소드가 아닌 dataset 속성을 통해 읽기, 쓰기가 가능

 : queryselector로 접근하는 경우 [data-name = "asdf"]식으로 가능
출처: https://coding-restaurant.tistory.com/231

data 속성에 대해서 알아보기

- ClassList : element의 클래스 목록에 접근하여 변환 kimtaekju-study.tistory.com/85

[JavaScript] classList

- Array.from() 메서드는 유사 배열 객체(array-like object)나반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듬

 

- 이벤트 객체 ('e')

: 이벤트가 발생되면 이벤트에 매개변수로 넘긴 콜백함수가 호출되는데, 이때 매개변수로 event 객체를 넘겨줌

: 이 event 객체의 프로퍼티에는 이벤트 발생 시 얻을 수 있는 정보가 들어 있으며 이벤트 모델의 전파 과정을 컨트롤할 수 있는 메서드와 브라우저의 기본 동작이 발생하지 않도록 하는 메서드가 포함
출처: https://webclub.tistory.com/490

event 객체의 프로퍼티 및 메서드

- Array.forEach

: 끝을 지정해주는 다른 반복문과 달리, 인자로 들어온 itrable-item의 내부 인덱스 끝까지 알아서 순환을 해주는 반복문 
: dydals5678.tistory.com/66

javascript - foreach 문 , for in 문 , for of문

- template literal ('${}')

: 문자열(string) 내에 표현식을 기재 가능 (보간-interpolation 기능)

: developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals

알게된 것들

- CSS의 Transition 적용에 의한 애니메이션 효과를 역으로 보여줘 사라지는 효과를 나타내는 방법은 CSS 적용 기준이 되는 클래스명을 삭제하면 OK

- 다수의 elements에 동일한 클래스명을 적용시키기 위해서는 해당 클래스를 포함하는 elements를 가져와서 arrary로 만들고, forEach 구문으로 className 추가하면 OK

- 특정 element에 css 애니메이션 효과 적용 원리는 추가되거나 제거되는 클래스(또는 아이디)에 대한 css의 속성 값 및 transform(변형 형태)에 대한 정보를 넣고, 적용되는 대상 element에 transition(변화 속도) 속성을 추가해 놓으면, 둘 간 조합을 통해 애니메이션 효과 발생 

 

		<script>
			function play(e) {
				const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
				const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
				key.classList.add("playing");
				audio.currentTime = 0;
				audio.play();
			}
			function remove(e) {
				e.target.classLissst.remove("playing");
			}

			const keys = Array.from(document.querySelectorAll("div .key"));
			keys.forEach((key) => key.addEventListener("transitionend", remove));

			window.addEventListener("keydown", play);
		</script>