10. Momentum 만들기 1 - 시간 출력

1단계 시계만들기

• Personal Dashboard New Tab Chrome Extension
• 예제 URL : https://momentumdash.com/

키워드1: 스크립트 엄격모드

'use strict';

스크립트 엄격모드

ECMAScript 5 소개되었으며 javascript 의 제한된 버전을 선택하여 느슨한 모드
(sloppy mode)를 해제하기 위한 방법

1. 기존에는 무시되던 에러를 출력
2. Javascript 엔진의 최적화 작업을 어렵게 만드는 실수를 바로잡음
3. 엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지

키워드2 Date Object

• Date 생성자는 시간의 특정 지점을 나타내는 Date Object를 생성
• Date Object를 얻기 위해서는 new 연산자를 이용하는 것이 유일한 방법임

    const date = new Date();

    //Object를 가져왔으니 date.***으로 날짜 정보를 가져올 수 있음
    const hours = date.getHours(); //주어진 날짜의 현지 시간 기준 시를 반환
    const minutes = date.getMinutes(); //Date 인스턴스의 분을 현지 시간 기준으로 반환
    const seconds = date.getSeconds(); //Date 객체의 초 값을 현지 시간에 맞춰 반환

전체코드

'use strict';

const clockContainer = document.querySelector('.js-clock');
const clockTitle = clockContainer.querySelector('.js-title');

function getTime() {
    const date = new Date();

    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    //가져온 정보들을  .js-title 클랙스가 있는 DOM 에 text 로 등록
    //백틱을 이용하는 방법(`)으로 표기 [IE 에서는 지원하지 않음]
    clockTitle.innerHTML = `${hours}:${minutes}:${seconds}`;
}

function init() {
    getTime();
}

init();

1. 예제 이미지

2. 결과 이미지

시간정보 등록