javascript (10) - intervals, timeout, padStart, padEnd

* intervals = '매번'일어나야 하는 것

setInterval (함수,ms);

function sayHello() {     console.log("hello"); } setInterval(sayHello, 5000);

ㄴ sayHello함수를 5000ms(5초) 마다 실행

 

* timeout = 시간뒤에 '실행'

function sayHello() {     console.log("hello"); } setTimeout (sayHello, 5000);

ㄴ 5초 뒤에 sayHello 함수 실행

 

* padStart, padEnd

string의 문자길이를 맞춰 주는 함수 (string만 가능)

"1".padStart(2, "0");  // "01" 출력 "1".padEnd(2, "0");   //  "10" 출력

"1".padStart(2, "0"); 

ㄴ 문자길이가 2로 채워지도록 앞에 0을 붙여 출력

ㄴ "11"과 같이 이미 문자길이가 2이면 그대로 출력

 

* 시계만들기

 

const clock = document.querySelector("h2#clock") function getClock() {          const date = new Date();          const hours = String(date.getHours()).padStart(2, "0");     const minutes = String(date.getMinutes()).padStart(2, "0");     const seconds = String(date.getSeconds()).padStart(2, "0");     clock.innerText = (`${hours}:${minutes}:${seconds}`); } getClock(); setInterval(getClock, 1000);

const date = new Date();

js에는 기본적으로 시간을 불러올 수 있는 객체가 있다. 

new Date 이러한 객체는 새로운 변수에 지정해서 사용할 수 있다.

const date = new Date();

시간 - date.getHours();

분 - date.getMinutes();

초 - date.getSeconds();

 

tring(date.getHours())

padStsrt, padEnd는 string타입에만 사용할 수 있어

시간, 분, 초를 string타입으로 전환해야 한다.

 

tring(date.getHours()).padStart(2, "0");

기본적으로 숫자 2자리를 출력하는데 2자리가 안될 경우 앞에 0을 붙여준다.

 

getClock();

함수를 한번 실행하는 이유는 시간을 바로 보여주기 위함.

setInterval만 적용할 경우 1초 뒤에 시간을 보여준다.