#4 [2021 UPDATE] LOGIN

#4.0 Input Values

input의 내용을 가져오려면 
value 라는 property를 이용해야 함을 

console.dir ( 객체 ) ; 사용하여 확인할 수 있었다.

#4.1 Form Submission

input 태그에 max-length 라던지, required 같은 속성은 input 태그가 form 태그 안에 존재할 때만 브라우저에서 작동하고 있다

#4.2 Events

preventDefault() 메소드는 일반적으로 하는 기본 행동을 실행하지 않게 하는 것
(브라우저의 기본동작을 막아주는 메소드)
(submit 버튼을 클릭했을 때 브라우저를 새로고침하는 기능을 포함)

function login(tomato){
    tomato.preventDefault();
    console.log(tomato);
    console.dir(tomato);
}

tomato는 아주 가장 기본적인 정보들을 전달한다......
즉 자바스크립트는 공짜로 argument에 발생한 첫번째 event에 관한 정보를 준다.

#4.3 Events part Two

a 태그를 클릭했을 때 그 주소로 넘어가는 것을 방지하는 코드 만들어보기

function clickAnchor(tomato){
    tomato.preventDefault();
}

const anchor = document.querySelector("a");
anchor.addEventListener("click", clickAnchor);

 

#4.4 Getting Username

String만 포함된 변수는 대문자로 표기하고, string을 저장하고 싶을 때 한다

greeting.innerText = "Hello "+ userName;
greeting.innerText = `Hello ${userName}`;

두 가지 방법

 

브라우저에 로컬스토리지 localStorage가 존재한다

반복되는 변수는 저장하는 것이 좋다

#4.5 Saving Username

#4.6 Loading Username

 window.onload = function(){
            const loginForm = document.querySelector("#login-form");
            const USERNAME_KEY = "userName";
            const isUserName = (localStorage.getItem(USERNAME_KEY));
            if(isUserName === null){
                // show the form
                loginForm.classList.remove("hidden");
            } else {
                // show the greetings
                paintGreetings(isUserName);

            }

        
            function loginClick(event) {
                event.preventDefault();

                const HIDDEN_CLASSNAME = "hidden";
                
                loginForm.classList.add(HIDDEN_CLASSNAME);
                const userName = document.querySelector("#login-form input").value;

                const greeting = document.querySelector("#greeting");
                localStorage.setItem(USERNAME_KEY, userName);
                // greeting.innerText = "Hello "+ userName;
                greeting.innerText = `Hello ${userName}`;
            }

            loginForm.addEventListener("submit", loginClick);

            function paintGreetings(userName){
                greeting.innerText = `Hello ${userName}`;
                greeting.classList.remove(HIDDEN_CLASSNAME);
            }

        }

window.onload 함수 쓰지 않아도 되고, 코드를 더 정리할 필요가 있다

#4.7 Super Recap

localStorage가 정보를 저장하고 불러오고 삭제하는 브라우저가 가지고 있는 작은 DB 같은 API