Log in 만들기

1.input / button 만들기

html 내에

<div id = "login-form">
<input type="text" placeholder="what is your name?">
<button>Log In</button>
</div>
	

2. js에서 input, button element불러오기

js 내에

const loginInput = document.querySelector("#login-form input") 
const buttonInput = document.querySelector("logini-form button")

3. event 추가하기

function onLoginBtnClick(){
	const username = loginInput.value
    
    if(username===""){
    alert("please write your name")}
    else if(username.length>15){
    alert("your name is too long")}
    
    
loginInput.addEventListener("click", onLoginClick)

위와 같이 if문을 추가하는 대신, input의 유효성검사 기능을 통해 할 수도 있다.

input 유효성 검사

html 내에

<form id = "login-form">
<input 
	required
    maxlength = "15"
    type = "text"
    placeholder = "what is your name?>
</form>

input의 유효성 검사기능은 오직 form 안에서만 작동한다.

위와 같은 코드를 작성할 시 form 내에 글자를 넣으면 자동으로 새로 고침이 된다.
why? form이 자동으로 submit 되고 있기 때문이다.
-> HTML 의 규칙 : 우리가 form 내에서 enter를 누르고 input이 더이상 존재하지 않는다면 자동으로 submit된다는 규칙을 가지고 있다.
-> 자동으로 button 역할이 되기 때문에 button event 필요없다! 코드 지워줄 것!

4.Submit event를 이용하여 input 값 저장하고 새로고침 없애기

preventDefault()

어떤 event의 기본 동작이든지 발생하지 않도록 막는 것.

function onLoginSubmit(event){
	event.preventDefault();
   }
   
loginForm.addEventListener("submit", onLoginSubmit);

위의 preventDefault()를 통하여 더이상 form submit의 기본 동작인 새로고침이 작동하지 않는다.

onloginSubmit 괄호 내에 event를 채워줌으로써 첫번째 argument로 발생된 event에 대한 정보를 준다.

preventDefault() 응용

ex) 링크의 기본 기능인 새 page로 이동하는 동작 하지 않기
html 내에

<a href = "www.google.com">hi </a>

js 내에

const link = document.selectQuery("a");

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

이를 통해 더이상 새 page로 이동하지 않을 수 있다.
console.dir(event)를 통해 click event 가 mouse event 임을 확인할 수 있다.

중요사항 : addEvenetListener 안에 있는 함수 사용자가 직접 실행하지 않는다. 브라우저가 해주는 것!

5. user가 이름을 제출하면 form 사라지게 하기

1) style.css 내에

.hidden{display:none;}

2) js - function onLoginSubmit 내에 다음의 코드를 추가해준다.

loginForm.classList.add("hidden");

6. form 사라진 뒤 user의 이름 창제목에 띄워주기

user의 이름을 변수로 저장해주고 그 이름은 h1에 넣어주기!

1) html 내에

<h1 id = "greeting" class = "hidden"></h1>

2)js 내에

const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event){
중복 내용 생략
.
.
.

const username = loginInput.value ;
greeting.innerText = "hello " + username ; 
greeting.classList.remove(HIDDEN_CLASSNAME)}

"hello " + username  은
`hello ${username}` 으로 쓰일 수도 있음!

7.새로고침을 하더라도 username 기억하고 username 제목 유지하기

local storage

우리가 브라우저에 뭔가를 저장할 수 있게 해준다. 나중에 가져다쓸 수도 있다.

검사 - API - local sotrage 에서 확인가능.

localStorage.setItem("a","b") : 아이템 저장
localStorage.getItem("a") : 아이템 값 가져오기
localStorage.removeItem("a") : 아이템 값 지우기
a=우리가 저장할 값의 이름
b=저장할 값
ex)

localStorage.setItem("username","nico");
localStorage.getItem("username")
localStorage.removeItem("username")

위의 getItem 값으로 "nico"가 출력된다.
위의 removeItem 를 통하여 "nico"가 지워진다.

1) 함수 내에 localStorage.setItem("username",username) 추가해주기

function onLoginSubmit(event){
중복 내용 생략
.
.
.
localStorage.setItem("username",username) }

2) if문을 이용하여 user 정보가 있으면 id greeting을 보여주고, 없으면 form 유지하기

local storage 에 user 정보가 없을 시
console 에 localStorage.getItem("username") 라고 입력하면 "null"값이 출력된다.

• 화면 내에 form이 계속 표시되고 있기 때문에 form 과 greeting 모두 숨긴 채로 시작하기!
  html 내에

<form class = "hidden">

• username 이라는 string 너무 자주 쓰이면 오타의 가능성이 커지기 때문에 변수를 지정해준다.

const USERNAME_KEY = "username"

const savedUserName = localstorage.getItem(USERNAME_KEY);
if(savedUsername === null)
	{loginInput.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);}
    else{
    greeting.innerText=`Hello ${savedUserName}`
    greeting.classList.remove(HIDDEN_CLASSNAME);}

• 반복되는 코드는 함수로 따로 만들어주는 것이 좋다.

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

else 내에 두줄의 중복 코드 대신 아래의 함수로 적어주기

paintingGreetings(savedUsername)