setInterval
setInterval은 지정한 시간마다 반복 하는 함수이다
(똑같은 함수를 여러번 사용하고싶을떄 사용한다)
setInterval는 2개의 argument를 받는댜
첫 번째 argument는 실행하고자 하는 function이고
두 번째 argument는 호출되는 function의 간격을 몇ms 로 할건지 정한다
ex) setInterval( ABC,1000) -> ABC 함수를 1초마다 실행
setTimeout
setTimeout은 지정한 시간 이후에 함수를 실행시키는 함수이다.
setTimeout도 setInterval과 동일하게 2개의 argument를 받고 받은 argument의 유형도 똑같이 (function,1000)이다
new Date
new Date → 날짜와 시간에 대한 정보를 가져올 수 있다.
clock tool → new Data( )
해당 코드를 출력하면
padStart()
padStart(X,"y")는 string이 가져야할 길이를 설정하고 그 길이에 맞지 않는다면 원하는 문자로 빈 문자열을 채운다
(내가 가지고있는 string의 길이를 보다 길게 만들어야할때 쓴다)
X → string 길이
"y" → 원하는 문자
하지만 padStart는 string에만 사용 가능하기때문에
abc.getDay();
abc.getHours();
abc.getMinutes();
abc.getSeconds();
는 number이기때문에 padStart 사용할 수 없다.
그래서 앞에 String으로 감싸주면서 문자열로 바꾼다음에 사용하면 된다.
시계를 만들때 초 부분을 5초가 아닌 05초로 만들고 싶기떄문에
그 결과 시계를 만들때 1의 자리 앞부분에 0을 붙임으로
1의 자리수일땐 00~09로 표시되게 만들었다.
위 함수에서 padStart를 시간, 분 , 초에 다 붙여두었기때문에
나머지 시간, 분 단위에서도 1의자리수 일땐 앞자리에 0이 표시된다.
시계를 실시간으로 알려주고싶다면
setInterval 함수를 꼭 호출 해야한다.
serInterval 함수를 호출하지않으면 clockplay()가 한 번만 호출되고 끝나기 때문에 시계는 함수가 호출된 시간 한번만 찍히게 된다.
clockplay()는 호출해 주지 않으면
HTML의 innerText인
00:00:00에서 setInterval함수가 호출된 다음
시간이 표시 되기때문에 1초 딜레이가 생기게 된다
웹페이지를 보기좋게 만들고싶다면 무조건 호출해 주는것이 보기 좋다.
