[JavaScript] Momentum_01

1. clock.js

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

function getTime(){
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${
        hours < 10 ? `0${hours}` : hours
    }:${
        minutes < 10 ? `0${minutes}` : minutes
    }:${
        seconds < 10 ? `0${seconds}` : seconds
    }`;
}

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

init();

• setInterval(fn, timeInterval) : 일정한 시간 간격으로 함수를 실행
  • 시간은 ms 단위
• condition ? expr1 : expr2 (삼항 연산자) : 조건이 true이면 expr1을, false이면 expr2를 반환

 

2. greeting.js

const form = document.querySelector(".js-form"),
      input = form.querySelector("input"),
      greeting = document.querySelector(".js-greeting");

const LS_USER = "currentUser",
      CN_SHOWING = "showing";


function handleSubmit(event){
    event.preventDefault();
    const currentValue = input.value;
    paintGreeting(currentValue);
    localStorage.setItem(LS_USER, currentValue);
}

function askForName(){
    form.classList.add(CN_SHOWING);
    form.addEventListener("submit", handleSubmit);
}

function paintGreeting(text){
    form.classList.remove(CN_SHOWING);
    greeting.classList.add(CN_SHOWING);
    greeting.innerText = `Hello! ${text}`;
}

function loadName(){
    const currentUser = localStorage.getItem(LS_USER);
    if(currentUser === null){
        askForName();
    } else {
        paintGreeting(currentUser);
    }
}

function init(){
    loadName();
}

init();

• event.preventDefault() : 현재 이벤트의 기본 동작 중단

  • 위의 form 태그를 예로 들면, 사용자가 form을 작성 후 엔터를 치게 되면 form 안의 input 값들을 제출하는 동시에

    페이지도 리로드한다. 즉, 이벤트와 더불어 기본 동작도 수행하는 것이다. 따라서, preventDefault() 를 사용

    하게 되면 submit 이벤트 외의 별도의 브라우저 행동을 막을 수 있다.

• localStorage() : 사용자 로컬에 데이터를 저장하는 저장소

  • https://chagokx2.tistory.com/29?category=821074

 

---

 

참고 자료

• https://academy.nomadcoders.co/p/javascript-basics-for-absolute-beginners-kr

바닐라 JS로 크롬 앱 만들기

• https://programmingsummaries.tistory.com/313

[JavaScript] JavaScript에서 이벤트 전파를 중단하는 네가지 방법