2021.09.30
JS #5.0~#5.3 수강

CLOCK

#5.0 - Intervals

setInterval()

• 매순간 계속해서 일어나는 function을 설정해주는 것
• () 안에는
  첫째로, 실행하고자 하는 functionName
  둘째로, 호출되는 function 간격을 몇 ms(millisecends) 로 할 지 입력
• 그러면 ms 마다 한 번씩 입력해준 functionName의 function 이 실행된다.

#5.1~#5.2 - Timeouts and Making Clock!

setTimeout()

• 처음에 한 번만 일어날 function을 설정해주는 것
• () 안에는
  첫째로, 실행하고자 하는 functionName
  둘째로, 얼마나 기다릴지 ms(millisecends)단위로 입력

시계 구현하기

• new Date().getTimes() 콘솔창에 입력하면 해당하는 값이 나오는 걸 알 수 있다.
• 이것과 setInterval()을 이용해서 화면에 시계를 구현 해보자.
• 우선 html 에서 아래와 같이 코드를 입력해주고~
  <h2 class="clock">00:00:00</h2>
• setInterval(functionName, 호출되는 ms간격(ms*1000=s)); 입력후,
• new Date() 를 특정 변수값으로 설정해주고,
• h2 를 JS 로 불러와줘서 innerText 값을 아래와 같이 입력해준다.
• 화면에 시간이 가고있는 시계를 바로 불러와주기 위해서, getClock(); 값을
  SetInterval(); 값에 앞서 꼭 입력해주자.
  

00:00:00 처럼 두 자릿수를 유지하도록 보수해보자!

padStart()

• string의 앞쪽에 글자수를 채워주는 function
• (string에 요구되는 길이, "replacement")
• 이를 이용해서 시계를 00:00:00 으로 구현해보자.
• 그런데 new Date().getTimes() 값은 string이 아닌, number 임
  
• String() 으로 해당값을 감싸줌으로써 number-->string 으로 바꿔준다!
  
• 성공!