20.04.06 노마드코더 - 바닐라JS #3.1 Making a JS Clock part One

1. momentum 따라하기

강의를 들으면서 단계별로 만들어가는 과정이다. 정말 이건 뭔가 싶을 정도로 이해가 안되는 부분이 있다면 거기서 또 한발자국도 나가지 않겠지만 강의 한 개씩 들어가며 따라해 보니, 다행히 그런 부분은 없었다. (이제 2개 들었음...)

2. 시작 전 준비

1. index.html 과 clock.js 파일 만들기 후 연결시키기
   : < script src = "clock.js"> < / script >

2. clock.js 의 초기 세팅 코드

function init() {

}

init();

3. html 에서 div 하나 만들고 클래스명을 js-clock 으로 하자.

3. JS const 선언하기

const clockContainer = document.querySelector(".js-clock");
//.js-clock 은 element의 자식 (clockTitle?) 을 탐색한다.

const clockTitle = clockContainer.querySelector("h1");
// 이 경우에는 document 로 보고 싶지 않은 경우, html 가서 div 안에 h1 태그를 만들어 연결.

이렇게 한 줄로 만들 수 있다.

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

4. 현재시간을 얻어내는 방법

구글 크롬 개발자도구 콘솔 창을 쓰자.

const date = new Date()
date //현재 한국 시각 이 나온다.

date.getDay()
1 // Monday 를 의미함.

date.getDate()
8 // 오늘의 날짜 8일.

date.getHours()
18 // 몇 시?

date.getMinutes()
22 // 몇 분?

음 이러하다

5. 함수를 만들고 안에 시간, 분, 초 선언해주기

function getTime() {
  const date = new Date();
  const minutes = date.getMinutes();
  const hours = date.getHours();
  const seconds = date.getSeconds();
}

6. 함수 내에 시계 정보를 문자열로 만들기

clockTitle.innerText = `${hours}:${minutes}:${seconds}`;

7. 함수가 실행되도록 init 함수 내에 만들었던 getTime() 함수 넣기

const clockContainer = document.querySelector(".js-clock"), 
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}:${minutes}:${seconds}`;
}

8. 실행

새로고침을 열심히 눌러 주면 초가 바뀌는 것을 확인할 수 있다.
그러나 우리는 date 를 얻고 다시 얻고 또 다시 얻게 만들고 싶다.
이 때는 setInterval 에 대해 알아야 한다.