노마드코더 크롬 투두리스트 클론코딩 2

3.0 JS clock part 1

document: html 전체를 가리킴, document.querySelector로 하나의 변수에 집어넣었으면 그 변수(태그) 안의 자식태그는 변수.querySelector로 접근할 수 있다.

날짜에 대한 정보를 받으려면 const date = new Date(); 로 구조체 만들어서 date변수에 넣고 사용한다.

시간을 출력할 때 10미만 숫자에 0을 붙이기 위해 삼항 조건 연산자 사용

 

3.1 JS clock part 2

시간이 1초마다 갱신되야 해서 setInterval(fn,밀리초)이라는 함수를 사용한다.

1초마다 시간이 갱신되게 하려면 1초마다 시간을 출력하는 함수를 실행해야 한다. setInterval(fn,ms)함수를 사용하고 따라서 setInterval(init,1000); 이다.

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

function getTime() {
    const date = new Date();
    const minute = date.getMinutes();
    const hour = date.getHours();
    const second = date.getSeconds();

    clockTitle.innerText = `${hour < 10 ? `0${hour}`:hour}:${minute<10 ? `0${minute}`:minute}:${second <10 ? `0${second}` : second}`;
}

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

 

3.2 Saving the User Name 1

유저가 이름을 입력하면 유저의 컴퓨터에 이름이 저장돼서 브라우저를 재실행 했을 경우에 다시 이름을 입력할 필요 없게 해주는 방법을 알아보자.

querySelector()은 객체로 변환되어 반환하고 안에는 스트링이 와야 한다.

querySelectorAll()은 괄호에 해당되는 모든 요소를 배열에 넣어서 반환하기 때문에 번거롭다.

<Local Storage>

정보를 유저의 컴퓨터에 저장할 수 있게 한다.

브라우저-검사-Application-local storage에서 확인할 수 있다.

localStorage.setItem(key,value)으로 저장하고 localStorage.getItem(key)으로 가져온다.

 

3.3 Saving the User Name 2

일단 사용자 브라우저에 이름이 저장되어 있는지 파악하고 있으면 그 이름을 불러와서 출력하고 없으면 이름을 입력받는 폼을 불러온 후 그 폼에 이벤트리스너를 달아서 입력받는 순간 출력과 동시에 브라우저에 저장되는 과정의 코드를 작성한다.