[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - 시계만들기 / 20.06.05

출처

- Nomad Academy

 www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK

 

 

 

#3.1 Making a Js Clock part One

- html, css, javascript에서 동일한 클래스명을 써주고 싶기 때문에

  clock에 대한 div태그의 class명을 js-clock이라고 지정한다.

 

- javascrpt에서 clockContainer와 clockTitle변수를 만들고

  init라는 이름의 함수를 지정한다.

 

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();

 

const clockContainer = document.querySelector(".js-clock")

const clockTitle = document.querySelector("h1")

-> find 'h1' inside of document.

 

const clockContainer = document.querySelector(".js-clock")

const clockTitle = clockContainer.querySelector("h1")

-> find 'h1' inside of clockContainer.

 

Same result, but if you had more 'h1' the: document.querySelector("h1") would not work.

라고 하신다.

하나의 h1에만 적용시키기 위해 그런거시구나....

문제는.. 내 컴퓨타는 clockContainer.querySelector("h1")이

요소를 찾아내지를 못한다....

어느 한 강의도 오류 없이 넘어가는 법이 없다...하.....

: 왜 그랬던건지 이유를 찾아냄..

div안에 h1을 넣어줘야 하는데

따로따로 만들었다.;;

 

 

#3.2 Making a Js Clock part Two

- setInterval(function, 시간)

function을 시간 간격마다 반복 작동시킨다.

 

- ternary operator (삼항연산자)

if 조건문을 간결하게 쓴 것

조건 ? 조건o일 때 실행할 것 : 조건 x일 때 실행할 것

이렇게 써주면 된다. (? = if , : = else)

 

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

function getTime() {
  const date = new Date();
  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();