HyungJin의 개발자 일기

JS로 momentum만들기-1 (Making Clock) 본문

IT/JS 바로알기

JS로 momentum만들기-1 (Making Clock)

HyungJin.Jeon 2020. 4. 23. 12:22

JS로 Momentum만들기 첫 부분입니다.

Momentum은 Chrome의 확장프로그램으로 첫 화면에서 사용자의 생산성을 높여주기 위한 페이지로 사용되는 앱입니다.

 

이와 비슷한 동작을 할 수 있는 앱을 JS를 사용해서 만들어 보겠습니다.

 

우선 화면에서 시계를 제공해 시간을 편리하게 볼 수 있도록 해줍니다.

 

Momentum의 시계 만들기

위의 화면처럼 보여지는 것이 시계 만들기의 목표 화면 입니다.

이를 위해서 간단하게 HTML코드에서

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <div class="js-clock">
        <h1>00:00</h1>
    </div>
    <script src="clock.js"></script>
</body>

</html>

body안에 div를 만들어 class를 지정하고 h1태그를 이용해 시계가 들어갈 부분을 만들어 줍니다.

그 후

const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector("h1");

function getTime() {
    const date = new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${
        minutes < 10 ? `0${minutes}` : minutes}:${
        seconds < 10 ? `0${seconds}` : seconds}`;

}

function init() {
    getTime();
    setInterval(getTime, 1000);
}

init();

JS에서 시계 동작을 할 수 있도록 만들어 주는데 Date객체를 사용해서 현재 시간, 분, 초를 가져와 화면에 나타내줍니다.

이 과정에서 Queryselector를 사용해 html에서 선언한 div와 h1태그의 내용을 가져올 수 있도록 해줍니다.

 

시계를 만들때 우리는 2가지 부분을 집중해서 볼 수 있습니다.

첫번째는 삼항연산자를 사용한 부분입니다.

//조건식 ? 참일 경우 : 거짓일 경우
hours < 10 : `0${hours} : hours`

위의 식에서 hours의 값이 10보다 작은 경우는 hours값 앞에 0을 붙여주고 아닌 경우는 그대로 hours를 사용할 수있도록 해주는 부분입니다.

이는 시계 표시 상 7시일때 7:00:00이 아닌 07:00:00로 표현해주기 위한 식입니다.

 

두번째

setInterval(getTime, 1000);

setInterval함수는 arg1의 자리에 오는 함수를 arg2의 시간 마다 반복시켜주는 함수입니다.

위의 식은 getTime함수는 1초(1000millsecs)마다 반복시켜주는 것을 의미합니다.

'IT > JS 바로알기' 카테고리의 다른 글

JS로 momentum만들기-3 (To Do List)  (0) 2020.04.23
JS로 momentum만들기-2 (Saving user name)  (0) 2020.04.23
JS 복습하기-9 (조건문)  (0) 2020.04.23
JS 복습하기-8 (Event, Handler)  (0) 2020.04.23
JS 복습하기-7 (JS DOM Functions)  (0) 2020.04.23
'IT/JS 바로알기' Related Articles more
Comments