wecode 사전스터디(7/20) 로그 - 1 (노마드코더 리뷰)

위코드 개강(8/17) D-28.

배운 것/개발한 것

☆ 노마드코더 JS 강의 : 강의 끝내기 + 코드 리뷰 글 올리기 (링크)

1. #3.0 Making a JS Clock (Part 1)

1) html 코드

</head>

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

</html>

<script src=""></script>문을 통해 index.html에서 실행할 자바스크립트 포함
각 기능별로 별도의 자바스크립트 파일로 최대한 세분화하는 것이 나중에 구조를 파악하기 좋음

2) JS 코드

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}`;
}

function init() {
  getTime();
}

init();

document.querySelector (참조) : 문서 내에서 해당 셀렉터와 일치하는 첫번째 값 return
new Date(참조) : 자바스크립트에서 시간 관련 데이터를 제공하는 모듈
date, minutes, seconds 통해 현재 시각 실시간으로 표현 가능

2. #3.0 Making a JS Clock (Part 1)

1) JS 코드

  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 ternary operator (참조) 사용 : 시간 값이 한자리수일 경우 앞 자리수에 0을 추가하여 표기하는 기능 완성

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

wecode 사전스터디(7/21) 로그 - (노마드코더 리뷰 3) (0)	2020.07.21
wecode 사전스터디(7/20) 로그 - 2 (노마드코더 리뷰) (0)	2020.07.20
wecode 사전스터디 1주차(7/19) 로그 (0)	2020.07.19
wecode 사전스터디 1주차(7/18) 로그 (0)	2020.07.18
wecode 사전스터디 1주차(7/17) 로그 (0)	2020.07.17