javascript30 - keyboard drum kit

자바스크립트30(https://JavaScript30.com) - day1 을 만들면서 알게 된 내용들

-코드는 깃헙에 올려놓았고 JavaScript30 의 내용을 fork한 후 각 DAY폴더에 mywork.html을 만들어 작업하고 있다

(start.html, finished.html은 손대지 않기!!!)

##currentTime; 

The HTMLMediaElement.currentTime property gives the current playback time in seconds. Setting this value seeks the media to the new time.

모질라에서 제공하는 docs에는 위처럼 설명이 나와있다. 짧은 영어로 이해한 내용을 정리하면,  'currentTime을 사용해서 시간을 지정해주면 지정한 시간으로 미디어파일의 재생시간이 돌아간다'로 이해했다

audio.currentTime = 0;

을 해줘야만 키보드를 반복적으로 눌렀을때 드럼소리가 누를때마다 난다. 적어주지 않으면 키보드를 여러번 눌러도 단 1회만 재생되고 끝

##classList

element.classList.toggle('className'); = $(element).toggleClass('className');

element.classList.add('className'); = $(element).addClass('className');

element.classList.remove('className'); = $(element).removeClass('className');

제이쿼리에만 있는줄 알았던 클래스 조작이 바닐라스크립트에도 있었다!!!

##play();

미디어를 재생시키는 메소드.

반대는 pause();가 있다

var vid = document.getElementById("myVideo"); 
 
function playVid() { 
    vid.play(); 
} 
 
function pauseVid() { 
    vid.pause(); 
}

##<kbd>태그

지금까지 퍼블리싱하는 동안 단 한번도 사용해보지 않았던 태그인 <kbd>

키보드의 입력을 정의하는 html태그이다

##transitionend

css 트랜지션으로 애니메이션을 동작하게 할 때 애니메이션이 종료 되었을 때 이벤트를 발생시키기 위한 메소드.

key.addEventListener('transitionend',removeTransition);

css애니메이션이 종료되면 removeTransition이라는 함수가 실행된다

트랜지션을 완료하면 발생하는 단일 이벤트가 있습니다. 모든 표준을 따르는 브라우저에서 그 이벤트는 transitionend이며, WebKit에서는 webkitTransitionEnd입니다. 자세한 내용은 맨 아래의 호환성 테이블을 참고하세요. transitionend 이벤트는 두 속성을 제공합니다.

라고 모질라에 나와있다. 

####느낀점

해야지 마음만 먹다가 시작한 javascript30인데 생각보다 어렵지 않았고 동영상도 영어자막을 켜고 보니 이해하는데 무리가 없었다. 

또 영상을 보다가 모르는 메소드나 내용이 있으면 멈춘다음 그때 그때 구글링을 해서 찾아보니 공부도 더 잘되는 것 같다.

단순히 문법만 공부하는게 아니라 뭘 직접 만드니까 재미도 있고 이해도 잘 된다

키보드 드럼을 만들고 나니 피아노도 만들어 볼 수 있겠다는 자신감이 생겼다 ㅎㅎㅎ

---

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다