javascript, css 시계 만들기 (javascript30 - 2)

javascript를 시작하는 (아주 기초는 알고 있는) 사람들에게 유용한 사이트 입니다.

https://javascript30.com/

https://github.com/wesbos/JavaScript30

하루에 하나씩 배워가면서 javascript의 심화 단계로 발전하는 사이트 입니다.

강사님의 강의를 돈을 지불하고 배울수도 있지만, 우선은 무료 강좌 부터 하나씩 보고 단계를 밟아보려고 합니다.

#시계만들기 (https://github.com/KIMSG/javascript30/tree/master/day2)

위와 같은 시계 화면을 만들기 위해 css와 javascript 코드를 적용했습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<script>       const secondHand = document.querySelector('.second-hand');       const minsHand = document.querySelector('.min-hand');       const hourHand = document.querySelector('.hour-hand');         function setTime(){         const now = new Date();           const seconds = now.getSeconds();         const secondsDegrees = ((seconds / 60) * 360)+90;         secondHand.style.transform = 'rotate('+secondsDegrees+'deg)';           const mins = now.getMinutes();         const minsDegrees = ((mins / 60) * 360) + 90;         minsHand.style.transform = 'rotate('+minsDegrees+'deg)';           const hours = now.getMinutes();         const hoursDegrees = ((hours / 12) * 360) + 90;         hourHand.style.transform = 'rotate('+hoursDegrees+'deg)';         }         setInterval(setTime, 1000);       </script> Colored by Color Scripter

cs

기본 ES3 정도의 문법을 사용한다고 생각할 때 const라는 선언자가 익숙하지 않을 수도 있는데 var 와 비슷한 선언자 입니다.

ES6에서 let, const 라는 선언방법이 생겼습니다.

const

한번만 선언이 가능합니다. 다시 재사용이 불가능합니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

new Date() 

자바스크립트에서 바로 시간을 선언받아 사용할 수 있습니다.

document.querySelector

문장의 첫번째 element를 반환합니다.

결론, const와 let을 사용하도록 하자?