[JS]전자시계 만들기

with Nicolas.

 

JS 강의를 통해 전자시계를 만들었다.

제이쿼리를 사용해 홈페이지를 만들만한 실력을 되기 때문에 모르는 문법은 없을거라고 생각했으나,

처음 보는 문법이 있다. 복습해보자.

---

코딩 순서

1. html에 class를 가진 div를 생성 후 자식요소로 시계를 표현할 text 입력(00:00:00)

2. 변수 선언 - div와 text를 변수로 선언

3. 함수 선언 - 함수 내에 const date = new Date(); 를 시작으로 시, 분, 초를 변수 선언한다.

                   innerText 속성을 이용해 (00:00:00)이 시간으로 변경되게 한다.

4. 함수 선언 - 위에 선언한 함수를 호출하고, setInterval 메소드를 이용해 자동 업데이트 되게 한다.

5. 함수 호출 - 위의 함수를 호출한다.

---

const clockBox = document.querySelector('.js-clock');
const myClock = clockBox.querySelector('h1');

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

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

init();

이 강의에서 새로 알게된 것은

 

myClock.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds<10 ? `0${seconds}` :seconds}`;
}

 

이 부분이다. : 삼항연산자(ternary operator)

 

작은 if 구문이라고 생각하면 된다.

 

${hours < 10 ? `0${hours}` : hours} = 조건 ? 참일때 출력 : 거짓일때 출력