Loading Username

local storage 확인

local storage가 비어있으면 처음 설정된 대로 하면 되고, 만약 비어있지 않으면 form을 가리고 h1을 보여준다.

//javascript
const USERNAME_KEY="username";//string이 반복되는 경우에는 오타 체크를 위해 변수를 만들어서 사용한다.

function onLoginSubmit(event){
  //...
  localStorage.setItem(USERNAME_KEY, username);
  //localStorage.setItem(USERNAME_KEY, loginInput.value);//밑에 함수에 인자를 안주려고 할 때 사용하는 방법
  paintGreetings(username);//submit 된 username을 함수의 인자로 넣어준다.
}
//...
function paintGreetings(username_function){
  //const username_function = localStorage.getItem(USERNAME_KEY);인자값을 안받으려면 이거로 사용해도 된다.
  greeting.innerText=`Hello ${username_function}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}
//local storage 확인
//html에서 form도 hidden시키고 시작한다.
const savedUsername = localStorage.getItem(USERNAME_KEY); //윗줄에서 변수 설정을 제외하고 제일 처음 실행되는 기능이다.
if(savedUsername === null){ //값이 없는 경우
  //show the form. 
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit); //submit이 실행되면 함수 실행. 
}else{
  //show the greetings
  paintGreetings(savedUsername);//페이지를 새로고침 한 경우를 위한 부분이다.
  //local storage에 이미 저장된 값이 있다면, 저장된 이름을 인자로 함수를 실행시킨다.
}

< Clock >

Interval

기본 요소 세팅

<!--index.html-->
<!--h1 아랫줄부터 시작-->
<h2 id="clock">00:00</h2> <!--Emmet으로 치면 h2#hidden-->

//clock.js
const clock = document.querySelector("h2#clock");

setInterval

Internal : 매번 일어나야 하는 일. ex)매 2초
Interval함수는 매번 일어나야 하는 일을 만들때 사용하는 함수이다.

//clock.js
//...
function sayHello(){
  console.log("hello");
}
setInterval(sayHello, 5000); //5초마다 sayHello함수를 호출하라.