Login
✔Input Values
✔Form Submission
div, input, button, addEventListener("click", ), if문을 사용하면 username을 받는 form을 직접 만들수있지만 이미 존재하는 것을 이용하는 걸 추천하기때문에 우리는 div와 button대신 form과 input 태그를 사용할 것입니다.
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>
<input type="submit" value="Log In" />
</form>- required : 필수입력. 값을 입력하지않으면 메세지를 띄운다.
- maxlength : 최대길이. 그 이상은 입력이 불가능하다.
✔Events
엔터를 치거나 Submit 버튼을 누를 때 Event를 감지는 하지만 페이지가 자동으로 새로고침되기때문에 console.log에 찍힌값이 바로 사라집니다.
preventDefault() 함수로 새로고침을 막을 수 있습니다.
function onLoginSubmit(event) {
event.preventDefault(); //새로고침을 막음
console.log(event);
}
loginForm.addEventListener("submit", onLoginSubmit);onLoginSubmit는 submit이 발생할 때마다 브라우저에 의해 실행되는데 그냥 onLoginSubmit() 이렇게 아무값없이 실행되는 것이 아닙니다. 사실은 onLoginSubmit(event) 이렇게 어떠한 argument를 넘겨주고 있습니다. 이름은 어떤 것이든 상관없습니다. event, info, tomato, potato... 무엇이든 argument를 function이 받도록하고 그걸 자바스크립트에 넘겨주게됩니다.
addEventListener("submit", )
addEventListener("click", )
string인 첫번째 인자에 따라 event 객체로 전달되는 것들이 완전히 달라집니다.
event 객체를 콘솔에 찍은겁니다. 지금 발생하는 SubmitEvent에 대한 정보를 담고있습니다.
물론 event를 받지않아도됩니다. argument없이 비워두면 event를 받지않습니다.
✔Getting Username
input으로 username을 받아와서 그리팅 메세지에 username 표시하기.
form 이 submit 되면 form을 숨기고 그리팅메세지를 띄우고 싶습니다. 아예 form을 없애버리는 방법과 CSS를 이용해 숨기는 방법이 있습니다.
다음은 CSS를 이용한 방법입니다.
.hidden {
display: none;
}태그에 class="hidden"을 추가해주면 숨겨집니다.
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>
<input type="submit" value="Log In" />
</form>
<h1 id="greeting" class="hidden"></h1>const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
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);
}
loginForm.addEventListener("submit", onLoginSubmit);
클래스를 추가할때는 querySelector로 element를 찾아서 가지고온 다음
.classList.add()를 사용합니다.
클래스를 제거할때는
.classList.remove()를 사용합니다.
"hidden"이 두번 이상 사용되기때문에 HIDDEN_CLASSNAME으로 정의해주었습니다.
이렇게 username을 받아와서 그리팅 메세지로 띄우는 것은 성공했지만
새로고침을 하면 정보가 사라집니다.
✔Saving Username
local storage 사용하기
localStorage.setItem("key","value");
localStorage.getItem("key");
localStorage.removeItem("key");✔Loading Username
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;
// save username in localStorage
localStorage.setItem(USERNAME_KEY, username);
// greeting message
paintGreetings(username);
}
function paintGreetings(username) {
greeting.classList.remove(HIDDEN_CLASSNAME);
greeting.innerText = `Hello ${username}!`;
}
const savedUsername = localStorage.getItem(USERNAME_KEY);
// 새로고침시 savedUsername의 값에 따라 표시되는 것이 달라짐
if (savedUsername === null) {
// show the form
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
// show the greetings
loginForm.classList.add(HIDDEN_CLASSNAME);
paintGreetings(savedUsername);
}savedUsername에 localStorage에 "username"을 key로 저장한 value를 가져와 넣습니다. savedUsername에는 이제 null 혹은 입력받은 string값이 들어있을 것입니다. 새로고침시 savedUsername의 값에 따라 표시되는 것이 달라지도록 if else문을 통해 코드를 작성합니다.
