Login form 만들기

input value

인풋의 유효성검사를 하기 위해서는
form안에 input이 있어야함

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

form 태그 안에서의 button은 제출하는 역할
button태그의 기본값인 submit으로 그냥 두어야 제출이 됨.

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

function onLoginBtnClick() {
  console.dir(loginInput);
  console.log(loginInput.value);
}

loginButton.addEventListener("click", onLoginBtnClick);

console.dir(loginInput)으로
input의 property들을 볼 수 있음

function onLoginBtnClick() {
  const username = loginInput.value;
  if (username === "") {
    alert("Please write your name");
  } else if (username.length > 15) {
    alert("Your name is too long");
  }
}

javascript에서 구현하는 대신 할 수 있다면 HTML의 기본 속성을 최대한 활용하기

required

input을 필수입력 항목으로 만들어줌

<input required />

maxlength

최대 글자수 조절

<input max length="15"/>

Events

addEventListener

안의 함수는 직접 실행하지 않음
function을 입력할때 뒤의 ()는 즉시 실행의 뜻
브라우저가 실행시켜줌, event에 대한 정보도 담아줌

submit

form안에서 엔터를 누르고 input이 더 존재하지 않으면 자동으로 submit

로그인 실행될때마다 url주소에 ?가 붙고
새로고침되면서 input값도 사라짐

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

function onLoginSubmit() {
	const username = loginInput.value;
    console.log(username);
}

loginForm.addEventListener("submit",onLoginSubmit);

e.preventDefault();

브라우저가 기본 동작을 실행하지 못하게 막아주는 것
event멈추고 아무것도 진행 x

function onLoginSubmit(tomato) {
	tomato.preventDefault();
    console.log(tomato);
}

event 생길때 onLoginSubmit function을 호출,
onLoginSubmit(xxxx) 첫번째 argument로써 xxx를 추가적인 정보를 가진채로 호출

실행된 이벤트

PointerEvent

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

link.addEventListener("click", handleLinkClick);

handleLinkClick({})
함수에 첫번째 인자로 object를 넣어줌
object에는 방금 일어난 event에 대한 정보가 담김

Getting Username

로그인시 input값 입력하면 input form은 사라지고
h1이 input값을 받아서 나타나게 하려고 함

function onLoginSubmit(event) {
	event.preventDefault();
    const username = loginInput.value;
  loginForm.classList.add("hidden");
  console.log("username");
 }

로그인 input값 입력하고 submit시 hidden 클래스를 붙여 숨김처리

function onLoginSubmit(event) {
  event.preventDefault();
  const username = loginInput.value;
  loginForm.classList.add("hidden");
  console.log("username");
  greeting.innerText = "Hello " + username;
  greeting.classList.remove("hidden");
}

string 변수

hidden이 두개나 들어가있음

const HIDDEN_CLASSNAME = "hidden";

loginForm이나 loginInput처럼 중요한 정보를 담은게 아니라 대문자로 작성
string만 포함된 변수는 대문자로 표기
string작성시 오타가 나도 자바스크립트는 지적하지 않기때문에 여러번 사용할 경우 변수명으로 작성하고 표시하는 것이 좋음

`` 백틱 기호

변수와 string을 결합 : ${변수명}
``, $} 같이 써야함

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

Saving Username

local storage

브라우저에 뭔가를 저장할 수 있게 해줌
작은 미니 DB같은것. key와 value로 이루어져있음

setItem

정보 저장

localStorage.setItem('username', 'nico);

getItem

localStorage.getItem("username");

removeItem

localStorage.removeItem("username");

function onLoginSubmit(event) {
  event.preventDefault();
  const username = loginInput.value;
  localStorage.setItem("username", username);
  loginForm.classList.add(HIDDEN_CLASSNAME);
  console.log("username");
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

새로고침하면 form은 다시 초기화

적용

겹치는 기능들 따로 빼서 함수화

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

const USERNAME_KEY = "username";

const savedUsername = localStorage.getItem("username");

console.log(saveUsername);

if (savedUsername === null) {
  //show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  //show the greetings
   paintGreetings(savedUsername);
}

새로고침해도 form이 초기화되지 않고 localStorage에서 값을 불러옴