본문 바로가기
Language/JavaScript

[javaScript] Login 처리

by 계범 2022. 2. 22.

addEventListener() & preventDefault()

<!DOCTYPE html>
<html lang="en">
<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>Momentom</title>
</head>
<body>
    <form id="login-form">
        <input type="text" required maxlength="15" placeholder="what is your name?"/>
        <button>Log In</button>
    </form>
    <script src="app.js"></script>
</body>
</html>
const loginInput = document.querySelector("#login-form input");

function onLoginSubmit(event){
    event.preventDefault();
    const username = loginInput.value;
    if(username === ""){
        alert("Please write your name");
    } else if(username.length > 15){
        alert("15자 이하로만 적어주세요");
    }
}

loginForm.addEventListener("submit", onLoginSubmit);

 

addEventListener()

  • 첫번째 argument는 event에 대한 정보를 담고 있음.
  • argument는 아무 이름이나 주어도 됨. event가 관행

preventDefault()

  • 기본동작을 수행하지 않게하는 함수

 

a 태그와 submit&button 타입 기본이벤트동작

<a href="https://nomadcoders.co">Go to courses</a>


button 또는 submit 타입은 submitEvent를 기본적으로 실행하고
a클래스는 mouseEvent를 기본적으로 실행함.

 

display:none & 문자열 합치기

<!DOCTYPE html>
<html lang="en">
<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>Momentom</title>
</head>
<body>
    <form id="login-form">
        <input type="text" required maxlength="15" placeholder="what is your name?"/>
        <button>Log In</button>
    </form>
    // h1추가
    <h1 id="greeting"class="hidden"></h1>
    <script src="app.js"></script>
</body>
</html>
/* css 추가 */
.hidden {
    display: none;
}
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

//String들어간 변수거나 중요하지 않은 정보는 대문자로하는게 관행
const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    // greeting.innerText = "Hello " + username;
    greeting.innerText = `Hello ${username}`; // ``백틱 기호 사용 표현
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

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

loginForm.addEventListener("submit", onLoginSubmit);

form input 데이터를 h1태그에 넣고, form은 화면에 보이지 않음.

 

display:none

  • 화면에 css 보이지 않게 하기

 

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

  • h1 안의 글자 적기
  • `Hello ${username}`; :  ``백틱 기호를 사용한 문자열 표현. 변수는 ${}안에 넣어야함.

 

 

Local Storage

<!DOCTYPE html>
<html lang="en">
<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>Momentom</title>
</head>
<body>
	// 초기값 hidden처리
    <form class="hidden" id="login-form">
        <input type="text" required maxlength="15" placeholder="what is your name?"/>
        <button>Log In</button>
    </form>
    <h1 id="greeting"class="hidden"></h1>
    <script src="app.js"></script>
</body>
</html>
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
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);
    paintGreetings(username);
}

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

loginForm.addEventListener("submit", onLoginSubmit);

const saveUsername = localStorage.getItem(USERNAME_KEY);

if(saveUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);
}else {
    paintGreetings(saveUsername);
}

 

Local Storage

  • 브라우저 내 저장소
  • 데이터 저장: setItem(key,value);
  • 데이터 불러오기: getItem(key);

 

확인방법

  • 브라우저 - f12 개발자모드 - application - Storage - Local Storage - file:// 확인
  • 새로고침을 해도 데이터가 날라가지 않음.

 

참조

노마드코더 자바스크립트 강의

저작자표시 비영리 변경금지 (새창열림)

'Language > JavaScript' 카테고리의 다른 글

[javaScript] ToDoList 만들기  (0) 2022.02.24
[javaScript] 랜덤 명언& 배경 생성  (0) 2022.02.23
[javaScript] 시계 만들기(clock)  (0) 2022.02.23
[javaScript] 브라우저와의 연동 사용법  (0) 2022.02.19
[javaScript] 기초 문법  (0) 2022.02.19

관련글

댓글

티스토리툴바