[TIL] JS: 바닐라 JS로 크롬 앱 만들기 01

바닐라 JS

프레임워크나 라이브러리를 사용하지 않고 순수하게 JS만을 사용하는 것

자바스크립트 학습 진도가 영 안나가서 노마드코더 를 학습해보기로 했다.

새롭게 알게된 것

• alert(message) 팝업으로 메세지가 뜨게 하는 방법.

Camel case
변수명은 소문자로 시작해서 중간에 스페이스가 필요할 때 대문자로 표시한다.
ex) daysofweek 대신 daysOfWeek

• JS DOM Functions
  DOM=Document Object Module

// HTML에서 ID="title" 불러오기
const title = document.getElementById("title");
// HTML ID="title" 부분을 JS에서 수정하는 방법
title.innerHTML = "Hi! From JS";

console에 dir(document) 입력 시 document 객체를 조회할 수 있다.

• init() 어플리케이션 초기화하기
• local storage 저장하는 장소
• Events handlers

const title = document.querySelector("title");

const BASE_COLOR = "blue";
const OTHER_COLOR = "red";

function handleClick(){
  const currentColor = title.style.color;
  // title이 blue일 때 red로 
  if (currentColor === BASE_COLOR){
    title.style.color = OTHER_COLOR;
    // title이 red 일 때 blue로
  } else {
    title.style.color = BASE_COLOR;
  }
}
// title을 클릭할 때 색이 바뀌도록 하는 방법
function init() {
  title.style.color = BASE_COLOR;
  title.addEventListener("click", handleClick);

• CSS 파일에 .clicked 추가하고 JS로 조작하기

const title = document.querySelector("title");

const CLICKED_CLASS = "clicked";

function handleClick(){
  const hasClass = title.classList.contains(CLICKED_CLASS);
  // .clicked가 존재할 때 class 지우기
  if (hasClass){
    title.classList.remove(CLICKED_CLASS);
    // .clicked가 존재하지 않을 때 class 추가하기
  } else {
    title.classList.add(CLICKED_CLASS);
  }
}

function init() {
  title.addEventListener("click", handleClick);

• toggle() 이용하여 간략하게 표현하는 방법
  class 를 체크해서 있으면 add, 아니면 remove를 실행하는 함수이다.

function handleClick(){
  title.classList.toggle(CLICKED_CLASS);}

toggle()과 같은 함수는 developer.mozilla.org 에서 찾을 수 있다.

크롬 앱 만들기

💡 사용하고자 하는 기능을 console에 미리 입력해보면 즉각적으로 반응을 확인할 수 있다.

1. 시계

• 00:00:00 형식으로 시간을 표시하였다.
• getTime() 함수로 현재 시간을 불러왔다.
• 1초 단위로 시간이 표현되도록 setInterval() 함수를 이용했다.

// HTML에서 div class="js-clock" 불러오기
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();
  // 00:00:00로 표시하기 위한 조건문
  clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
  }

function init() {
  getTime();
  // getTime 함수를 1000millisecond 간격으로 실행하는 방법
  setInterval(getTime, 1000);
}

+++

⭐ 시계 형식을 main에 00:00 sub에 AM/PM과 00초로 나타내기

hours가 12 이상일 때 PM, 12 미만일 때 AM을 출력하는 함수를 추가하였다.

const hourMin = document.querySelector(".hourMin"),
 amPm = document.querySelector(".amPm"),
 sec = document.querySelector(".sec");

 function getTime(){
     const date = new Date();
     const hours = date.getHours();
     const minutes = date.getMinutes();
     const seconds = date.getSeconds();
     hourMin.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}`: minutes}`;
     sec.innerText = `${seconds < 10 ? `0${seconds}` : seconds}`;
     amPm.innerText = `${hours >= 12 ? `PM` : `AM`}`;
     }

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

 init();

날짜⭐ 년도, 월, 일, 요일 표시하기

• getMonth(), getDate(), getFullYear(), getDay()` 함수를 이용하여 날짜를 불러왔다.
• getMonth()의 경우 1월이 0으로 출력되기 때문에 +1을 해주었다.
• getDay()의 경우 일요일부터 토요일까지 0부터 6의 숫자로 출력이 된다. 때문에 배열의 특성을 이용하여 dayArray의 0번째 아이템이 일요일이 될 수 있도록 하였다.

const today = document.querySelector("h2");

function getDate(){
    const todayDate = new Date();
    const months = todayDate.getMonth()+1; // 1월이 0으로 출력된다.
    const day = todayDate.getDate();
    const year = todayDate.getFullYear();
    const week = todayDate.getDay(); // 일요일부터 토요일까지 0-6으로 출력된다.
    const dayArray = ['일','월','화','수','목','금','토'];
    today.innertext = `${year}년 ${months}월 ${day}일 ${dayArray[week]}요일`
};

 function init(){
    getDate();
 }

 init();