JavaScript 30
[ JavaScript30 | Wes Bos ]
Wes Bos가 만든 무료 자바스크립트 학습 코스 JavaScript 30(이하 JS30)을 시작했다. 코스는 미리 준비된 코드에 자바스크립트 코드를 더해가며 JS, CSS와 HTML를 배우는 30가지 문제로 구성되어 있다. 문제를 풀면서 새로 알게 된 지식을 더 잘 이해하기 위해서, 따로 작은 결과물을 만들기로 했다. 블로그 글 JavaScript 30 시리즈에는 각 문제에서 배우고 응용한 지식들을 정리한다.
문제를 응용한 결과물
[ The Singing Cat | 윤슬기 ]
JS 30 중 1번과 2번 문제를 풀고 나서 'The Singing Cat'을 만들었다. 자판을 눌러 피아노를 연주하면 고양이가 음에 따라 입모양을 바꾼다. 위 링크에서 확인할 수 있다(데스크탑 전용).
JS30 Day1 : JavaScript Drum Kit
1. HTMLElement: transitionend event
[ transitionend event | MDN ]
transitionend 이벤트는 CSS transition 이 완료된 시점에 실행된다. 아래 코드는 CSS transition이 끝난 시점에 key 라는 class를 가진 모든 엘리먼트에서 underline 클래스를 삭제하도록 EventListener를 추가하였다.
const removeClassTransitionEnd = (selector, className) => {
const node = document.querySelectorAll(selector);
node.forEach(element => {
element.addEventListener('transitionend', function(){
element.classList.remove(className)});
});
}
removeClassTransitionEnd('.key', 'underline');2. HTMLMediaElement.currentTime
[ HTMLMediaElement.currentTime | MDN ]
HTMLMediaElement.currentTime 프로퍼티는 현재 미디어가 재생중인 시간(초)를 나타낸다. 프로퍼티의 값을 변경하면 재생 시점이 변경된다. 값을 0으로 줄 경우 미디어의 재생지점이 시작 부분으로 이동한다.
아래 코드는 특정한 키를 눌렀을 때 해당하는 음악 파일을 재생시킨다. 만약 음악 파일의 재생시간이 5초라면, 키를 연속해서 눌러도 음악이 모두 재생될 5초 뒤까지 기다리지 않으면 다시 맨 앞부터 재생되지 않는다. 만약 키를 누를 때 마다 음악이 처음부터 재생되게 하고 싶다면 play() 메서드를 실행시키기 전에 currentTime 프로퍼티를 0 으로 설정한다.
const playSound = (event) => {
const sound = document.getElementById('sound');
sound.currentTime = 0;
sound.play();
}
window.addEventListener('keydown', playSound);3. KeyboardEvent.key
[ KeyboardEvent.key | mdn ]
KeyboradEvent.Key는 유저가 누른 키의 값을 반환한다. 영상에서는 KeyboardEvent.keyCode를 사용하지만, MDN 문서를 확인하니 사용 주의(최신 브라우저에서 지원 중단 우려) 표시가 있어 응용 결과물에는 event.key()를 사용했다.
const getKeyValue = () => {
console.log(`'${event.key}'키를 누르면 event.key값은 '${event.key}'이다.`);
}
window.addEventListener('keydown', getKeyValue);
// 'a'키를 누르면 event.key값은 'a'이다.
// 'CapsLock'키를 누르면 event.key값은 'CapsLock'이다.
// 'A'키를 누르면 event.key값은 'A'이다.
// 'ㅁ'키를 누르면 event.key값은 'ㅁ'이다.- 키를 누르면 다양한 프로퍼티 값을 알려주는 사이트 [ keycodes | Wes Bos ]
4. Document.querySelector() 복잡한 선택자 사용하기
[ Document.querySelector() | MDN ]
'... 아래 예제처럼 정말 강력한 선택자도 사용할 수 있습니다. 예제의 결과는 클래스가 "user-panel main"인 <div>(<div class="user-panel main">) 안의, 이름이 "login"인 <input> 중 첫 번째 요소입니다.'
var el = document.querySelector("div.user-panel.main input[name=login]");CSS 속성 선택자 문법을 Document.querySelector() 에서도 사용할 수 있다. 아래 코드는 이벤트로 입력된 키 값을 받아, 그와 같은 값을 data-key 속성에 설정한 div 엘리먼트를 가져와 그곳에 underline 클래스를 추가하는 함수다.
const underlineText = (event) => {
const text = document.querySelector(`div[data-key="${event.key}"]`);
if (!text) { return; }
text.classList.add('underline');
}
window.addEventListener('keydown', underlineText);JS30 Day2 : CSS + JS Clock
1. HTMLElement.style
[ HTMLElement.style | MDN ]
HTMLElement.style 속성은 요소의 인라인 스타일에 접근하거나 설정할 때 사용할 수 있다. 접근자로서는 요소의 인라인 style 속성이 포함한 CSS 선언을 담은 CSSStyleDeclaration 객체를 반환한다. HTMLElement.style 로 접근해서 변경한 값은, 기존에 설정한 값보다 우선순위가 높다(기존 값을 override한다).
아래 코드는 해당 엘리먼트의 인라인 스타일에 transform: rotate(20deg); 를 설정한다.
element.style.transform = 'rotate(20deg)';2. transform-origin
[ transform-origin | MDN ]
transform 속성의 변화의 중심점을 설정하는 프로퍼티. 기본값은 center 이다.
transform-origin: 100%;
/* 개체의 가장 오른쪽, 세로축 가운데 지점이 중심점으로 설정된다. */