노마드 코더 바닐라 JS 챌린지 9일차

오늘도 5챕터의 강의 4개 + 코드챌린지로 시계만들기 하면서

Date 사용하는 연습을 하게될 것 같다

---

#5.0 Intervals

-setInterval은 매초마다 반복해서 일어나는 일을 만드는 함수로써 두개의 매개변수를 받는다. 첫번째는 실행할 함수, 두번째는 함수를 실행할 간격의 ms(1000분의 1초)를 받는다.

//3초마다 console에 hi를 찍어주는 기능
setInterval(()=>{
	console.log("hi");
}, 3000);

#5.1 Timeouts and Dates

-setTimeout()은 setInterval()과 모양은 비슷한데 기능은 해당 시간이 지나고 함수를 실행시키는 역할을 한다.(일종의 타이머 역할). 첫번째 매개변수로 실행할 함수를 넣고, 두번째 매개변수로 몇초 있다가 실행시킬것인지 ms단위로 받는다.

//5초뒤에 sayHello함수를 호출한다
function sayHello(){
	console.log("hello");
}

setTimeout(sayHello, 5000);

 

#Data object

-new Date() 는 오늘 날짜를 가져온다. 

-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date에서 Date오브젝트에서 사용할 수 있는 여러 메서드들을 확인할 수 있다.

-콘솔에 현재 시, 분, 초를 입력하고 싶을 때는 아래와 같이 코드를 작성하면 된다

function getClock(){
	const date = new Date();
	console.log(`${date.getHours()} : ${date.getMinutes()} : ${date.getSeconds()}`;
}

//처음부터 띄워야 하기 때문에 setInterval()이전에 먼저 호출해준다
getClock();
setInterval(getClock, 1000);

#5.2 PadStart

-padStart(문자의 길이, 채울 string)는 기존 문자 앞에 '채울 string'을 원래 문자의 길이 포함해서 얼만큼 채울지 정하는 기능을 한다. 

-padEnd()는 기존 문자가 먼저오고 뒤에 두번째 매개변수로 원래 문자길이를 포함해서 얼만큼 채울지를 정하는 기능을 한다. 

-Date() 객체로 시계를 만들때 한자리 숫자일 때는 1,2, 3, 4, ... 과 같이 한자리만 보이기 때문에 padStart를 써서 01, 02, 03...과 같이 보이게 다음과 같이 작성하는 것이 좋다.

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");
	console.log(`${hours} : ${minutes} : ${seconds}`;
}

getClock();
setInterval(getClock, 1000);