[Javascript] Event

[Javascript] Event - 기본

pogles 2022. 12. 17. 15:34

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <form id="login-form">
    	
        <input required maxlength=5 type="text" placeholder="what is your name?"/>
        
        // required: 반드시 채워야함.
        // maxlength: 입력의 최대길이.
        // placeholder: 입력전 예시문구.
        
        <button>Login</button>
        <a href="www.naver.com>네이버로 이동</a>
    </form>
    <script src="app.js"></script>
</body>
</html>

로그인에 필요한 기능 구현 시 주의할 점이 있다. 브라우저는 기본적으로 form 을 submit 하면 새로고침하게 되어있다.

네이버나 카카오톡 등 주요 사이트 들의 로그인 내용을 보면 로그인에 실패해도 id 정보가 남는 것처럼 새로고침 못하도록 구현되어 있다.

기본적으로 실행되는 브라우저 기능을 제어하기 위해서 Javascript 에서 event.preventDefault() 를 사용한다.

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const link = document.querySelector("a")

function onLoginBtnClick(event) {
    event.preventDefault(); //브라우저의 기본동작 멈춤
    console.log(event);
}

function handleLinkClick(event) {
	event.preventDefault();
    console.dir(event);
}

loginForm.addEventListener("submit",onLoginBtnClick); // submit 해도 새로고침 x
link.addEventListener("click",handleLinkClick); // 링크 눌러도 작동x

function 부분을 보면 onLoginBtnClick에 매개변수 event 를 부여하고 있다. 매개변수 event 를 넣어주는 이유는 submit event 가 발생할 떄, 이 이벤트의 정보를 담아줄 object 가 필요하기 때문이다. 관행적으로 매개변수의 이름을 event 로 부여한다고 한다.

+ localStorage API

localStorge 를 통해 작은 로컬 DB 를 사용할 수 있다. localStorage 에 key, value 로 저장할 수 있으며, 웹페이지를 새로고침해도 DB는 유지된다. DB 를 초기화 하고싶다면 개발자도구(F12)에 들어가 Application -> Storage -> Local Storage 에서 x 버튼을 누르면 된다.

localStorage.setItem(key, value)	local storage 에 key - value 저장.
localStorage.getItem(key)	key 에 대응하는 value 반환.
localStorage.removeItem(key)	key 에 대응하는 value 삭제.
localStorage.clear()	local storage 데이터 모두 삭제.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <form id="login-form">
        <input required maxlength=5 type="text" placeholder="what is your name?"/>
        <button>Login</button>
    </form>
    <h1 id="greeting"></h1>
    <script src="app.js"></script>
</body>
</html>

.hidden {
	display: none;
}

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.getElementById("greeting");

const HIDDEN_CLASS="hidden"; // string 변수는 관행적으로 대문자로 이루어진 변수를 사용

function onLoginBtnClick(event) {
    event.preventDefault(); //브라우저의 기본동작 멈춤
    loginForm.classList.add(HIDDEN_CLASS); //로그인 후 form 숨기기
    const userName = loginInput.value;
    localstorage.setItem("username",userName); //mini DB 로그인 정보 저장
    greeting.innerText = `Hello! ${userName}`;
}

loginForm.addEventListener("submit",onLoginBtnClick);