[JavaScript] JS로 크롬 만들기 7. Date 객체와 Interval(), padStart()

시간 관련 function과 object

setInterval()

• interval : 매번 일어나야 하는 무언가

setInterval(sayHello, 5000);

• setInterval(func, step_ms) 형식으로 사용
• 간격은 millisecond 단위
• 설정한 간격 이후부터 첫 함수 실행

setTimeout()

• func(); 방식으로 작성하면 JS가 바로 함수 호출 후 실행
• 이를 지연하게 하고 싶을 때 사용하는 함수

setTimeout(sayHello, 5000);

• setTimeout(func, step_ms) 형식으로 사용
• 간격은 millisecond 단위
• 설정한 간격 이후에 함수 실행

Object - Date

• new Date() 코드를 통해 새로운 Date 객체 생성
• 현재 날짜와 시간 정보 저장

Date.now()         : 1970.01.01 UTC 기준 누적 시간을 숫자값(ms단위)으로 반환

<!-- 인스턴스 메서드 -->

<!-- 날짜 -->
Date.prototype.getFullYear()      : 연도 정보(4자리)
Date.prototype.getMonth()         : 월 정보(0~6)
Date.prototype.getDate()          : 일 정보(1~31)
Date.prototype.getDay()           : 요일 정보(0~6)

<!-- 시각 -->
Date.prototype.getHours()         : 시 정보(0~23) 
Date.prototype.getMinutes()       : 분 정보(0~59) 
Date.prototype.getSeconds()       : 초 정보(0~59) 
Date.prototype.getMilliseconds()  : 밀리초 정보(0~999) 

참고자료 : MDN Date

활용 실습

// js/clock.js

const clock = document.querySelector("#clock");

function getClock() {
  const date = new Date();
  clock.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
}

getClock();                   // 1초 지연 없이 바로 시계를 표시하기 위해
setInterval(getClock, 1000);  // 1초마다 getClock 함수 호출

• 함수를 지연 없이 바로 호출하도록 getClock(); 을 작성

결과

매 초마다 현재 시각이 화면에 표시

padStart() : Text Formatting

문제 상황 : 숫자가 한 자리로 표시

해결 목표 : 숫자가 한 자리이더라도 두 자리로 표시

해결 방법 : padStart()

• 어떤 문자열을 표시할 때 앞쪽에 무언가를 더 넣을 때 사용

• pad는 padding에서 유래

• 인자 : 1)목표하는 길이, 2)남으면 채워줄 문자
• 문자열.padStart(목표길이, 보충문자) 형식

추가 1 : padEnd()

• 어떤 문자열을 표시할 때 뒤쪽에 무언가를 더 넣을 때 사용
• 함수의 사용은 padStart()와 동일

추가 2 : String()

• 숫자형 등을 문자형으로 변환
• .padStart() 처럼 string에서만 쓸 수 있는 함수를 사용할 때 필요

활용 실습

// js/clock.js

const clock = document.querySelector("#clock");

function getClock() {
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  clock.innerText = (`${hours}:${minutes}:${seconds}`)
}

• 시, 분, 초를 각각 hours, minutes, seconds로 지정
• date.get–() 함수로 숫자값을 받아 String()을 통해 string으로 변환
• padStart(2, “0”)를 사용해 한 자리라면 2자리가 되도록 앞에 0을 붙임