5.1 Timeouts and Dates

강의

setTimeout

setTimeout(함수, 얼마나 기다릴지(ms))
일정시간이 흐른 뒤에 함수를 한번만 호출한다.

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

새로고침 하고 5초 후, hello가 출력된다.

---

Date Object

우리의 임무는 시간을 보여주는거다. 몇시 몇분 몇초인지
JS가 가지고 있는 Date object를 써보자!

콘솔에 new Date()를 입력하면 Wed Dec 22 2021 15:36:29 GMT+0900 (한국 표준시) 이런식으로 출력된다.

[ 콘솔창 ]
const date = new Date()
date.getDate() // 22
date.getDay() // 3 : 수요일이라서
date.getFullYear() //2021
date.getHours() // 15
date.getMinutes() // 37
date.getSeconds() // 56

우리가 해야할건 3개의 함수 getHours() ,getMinutes() ,getSeconds()를 호출하는거다. 매초마다!!

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

• 근데 15:45:1 한자리로 표현될 때가 있는데 별로임. 그래서 0을 00으로 표시해줄거다.
  => 다음 강의때 고칠거임
• 그리고 시간을 바로 보여주지 않는다. setInterval(getClock,1000); 함수를 써서 1초 후에 시계가 나온다.
  => setInterval(getClock,1000); 이 실행되기 전에 getClock()를 실행시키면 새로고침하자마자 함수가 딱 한번 실행되고 setInterval(getClock,1000); 때문에 매초마다 시계가 업뎃된다.

---

<h2 id="clock">00:00:00</h2>

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

시계 완성!! 화면에 출력했다!! 하지만 10미만일때, 이쁘지 않아서 그걸 고쳐줄거다. (02 03 04)
이건 다음 강의 하자!