js 기초정리 (3)login

입력값 검사 

function onLoginBthClick(){
    const userName = loginInput.value;
    if(userName ==="") {
        alert("please write your name")
    }else if(userName.length){
        alert("your name is long")
    }
}

이렇게 할 수도 있지만 html 파일에서  input 태그안에 required(필수)항목과 max length 설정으로 할 수 있다 

 <form id="login-form">
        <input required max length= "10" type="text" placeholder="What is your name">
        <button>login</button>
 </form>

+_input이나 button등 form태그 안에 있으면 자동으로 결괏값이 submit이 된다. == 입력값이 전부 제출된다 

 

 

function onLoginSubmit(event){
event.preventDefault(); // 브라우저가 기본 동작을 실행하지 못하게 막기 // event object는 preventDefault함수를 기본적으로 갖고 있음
console.log(event);
}
loginForm.addEventListener("submit", onLoginSubmit);
// submit 이벤트가 발생한다면, onLoginSubmit함수를 실행시킨다는 의미
// JS는 onLoginSubmit함수 호출시 event object를 담은 정보들을 호출함

form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있음

---> preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다!!

preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다. 첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.
JS는(기본적으로)argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다.

ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음

 

+ preventDefault 응용

if html에 a태그가 있다고 했을 때 ,

const link = document.querySelector("a")

function handleLinkClick(event){
    event.preventDefault();
    console.dir(event)
    }
    
link.addEventListener("click",handleLinkClick)

a태그를 클릭해도 기본동작을 막아서 링크로 이동하지 않는다.

 

 

//  login input값 받은 후 h1태그로 input 값 나타내기 (css로 숨기기) 

 

css에 hidden이라는 class를 만든다

.hidden {
    display: none;
}

+visibility:hidden= 공간은 그대로 두고 보이지만 않음  display:none = 잡아둔 공간도 사라짐

 

const loginForm = document.querySelector("#login-form");
const greeting = document.querySelector("#greeting");  //h1 태그 id="greeting"
const HIDDEN_CLASSNAME= "hidden"   
//css속성 변수입력 (관습: string만 포함된 변수는 대문자로 쓴다 + 중요한 변수가 아니라서)


function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);     //loginForm에 HIDDEN_CLASSNAME 추가 
    const userName = loginInput.value;      
    greeting.innerText = "hello " + userName;     //h1태그에 텍스트를 넣는다
    greeting.innerText = `Hello ${userName}`;     //string이랑 변수를 합칠때 ``(백틱)을 사용해서 나타내는 방법도 있다

    greeting.classList.remove(HIDDEN_CLASSNAME)  //h1에서 hidden class 빼서 나타냄
}

 

 

//local storage : 브라우저에서 제공하는 DB로 key : value로 저장

ocalStorage.setItem("key","value")로 값을 저장
localStorage.getItem("key")로 값을 불러옴
localStorage.removeItem("key")로 데이터를 삭제

ex) localStorage.setItem("userName", userName);

 

 

//데이터가 없을때 로그인창 나타내기 

 

로그인 form에 hidden class를 넣어서 없애고 시작 

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");   //document 또는 하나의 element를 이용해 검색가능
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME= "hidden"
const USERNAME_KEY="username"    //실수방지를 위한 변수


function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const userName = loginInput.value;
    localStorage.setItem(USERNAME_KEY, userName);
    paintGreeting(saveUserName)
}


function paintGreeting(username){
    greeting.innerText=`HELLO ${username}`
    greeting.classList.remove(HIDDEN_CLASSNAME)

}
const saveUserName = localStorage.getItem(USERNAME_KEY);

if(saveUserName===null) {                       
    loginForm.classList.remove(HIDDEN_CLASSNAME)
    -------->if saveUserName===null(데이터가 없음)일때, hidden class제거
    loginForm.addEventListener("submit",onLoginSubmit);  
}else{
   paintGreeting(saveUserName)   // 
   
   	//greeting.innerText=`HELLO ${username}`
	//greeting.classList.remove(HIDDEN_CLASSNAME) 이렇게 나타낼 수도 있으나 문장 반복을 줄이기위해 함수 설정

    
}

 

+(응용)logout  버튼 만들어보기

 

---->html class=hidden인 logout 버튼 제작

const logoutBth = document.querySelector("#logout")

function onLogoutBth() {
    localStorage.removeItem(USERNAME_KEY);
    alert("로그아웃 합니다")
}


const saveUserName = localStorage.getItem(USERNAME_KEY);
if(saveUserName===null) {
    loginForm.classList.remove(HIDDEN_CLASSNAME)
    loginForm.addEventListener("submit",onLoginSubmit);
}else{
   paintGreeting(saveUserName)
   logoutBth.classList.remove(HIDDEN_CLASSNAME)
   logoutBth.addEventListener("click",onLogoutBth);   
}

else 밑에 두개만 추가해주었다