#4

#4.0 Input Values

// html에서 id=login-form인 element의 input
const loginInput = loginForm.querySelector("#login-form input");
// html에서 id=login-form인 element의 button
const loginButton = loginForm.querySelector("#login-form button");

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

loginButton.addEventListener("click", onLoginBtnClick());

#4.1 Form Submission

form 안에서 엔터를 누르고 input이 더 존재하지 않는다면 자동으로 submit된다는 규칙!
form 안의 버튼을 눌러도 submit된다.
->

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

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

loginButton.addEventListener("click", onLoginBtnClick());

#4.2 Events

form submit의 기본동작은 새로고침이 되는 것이다.
브라우저가 그렇게 하도록 프로그래밍 되어있다는 것!
브라우저는 엔터를 누를때 새로고침을 하고 form을 submit하도록 되어있다.
-> we have to stop this default behavior.

EventListener함수의 첫번째 argument 안에 있는 function에 event 정보를 준더.
JS에서는 공짜로 첫번째 argument로 발생된 event에 대한 정보를 준다.

so,
submit event가 발생할 때, JS는 onLoginSubmit function을 호출하고, 이 때 event object를 argument로 전달한다.

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

function onLoginSubmit(event) {
	event.preventDefault();
	console.log(loginInput.value);
}

loginForm.addEventListener("submit", onLoginSubmit);

#4.3 Events part Two

addEventListener에 브라우저가 실행시킬 함수명을 알려준다.
브라우저가 "submit" event가 있을 때마다 첫번째 argument에 event object를 담아서 onLoginSubmit함수를 실행시킨다.

loginForm.addEventListener("submit", onLoginSubmit);

addEventListener 안에 있는 함수는 직접 실행하지 않는다.
onLoginSubmit() <- 이렇게 쓰면 안된다는 소리

loginForm.addEventListener("submit", onLoginSubmit());

#4.4 Getting Username

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

function onLoginBtnClick() {
const HIDDEN_CLASSNAME = "hidden";

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

loginButton.addEventListener("click", onLoginBtnClick);
loginForm.addEventListener("submit", onLoginSubmit);

같은 기능을 한다. 한번에 문자열 + 변수를 합치고 싶으면
1. 백틱 안에 문자열과 변수명이 들어가야한다.
2. 변수를 쓸 때는 ${변수명} 이렇게!

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

#4.5 Saving Username

localStorage : 우리가 브라우저에 뭔가를 저장할 수 있도록 해준다. -> 나중에 가져다 쓸 수 있음!

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

#4.6 Loading Username

#4.7 Super Recap