4.0~1 로그인
<!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>Document</title>
</head>
<body>
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>
<input type="submit" value="Log In" />
<button>Log In</button>
</form>
<script src="app.js"></script>
</body>
</html>div말고 form을 쓰면 매번 화면이 새로고침 되는데, 이것을 고쳐야 한다.
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login=-form button");
function onLoginBtnClick() {
const username = loginInput.value;
console.log("hello", loginInput.value);
}
loginButton.addEventListener("click", onLoginBtnClick);4.2~3 자동실행
form을 쓰면 계속 새로고침이 되는 것을 막기 위해서 preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다.
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login=-form button");
function onLoginSubmit(tomato) {
tomato.preventDefault()
console.log(tomato);
}
loginButton.addEventListener("submit", onLoginSubmit);이 preventDefault()함수는 자동실행이 되는 것을 막아주므로,
event.preventDefault()같은 식으로 코드를 작성하면, 특정 event에 대해서 자동실행을 막아준다.
4.4~6 사용자이름
먼저 사용자에게 인사하는 코드를 짜보면
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login=-form button");
const greeting = document.querySelector("#greeting");
function onLoginSubmit(event) {
event.preventDefault()
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
greeting.innerText = `Hello ${username}`;
greeting.classlist.remove(HIDDEN_CLASSNAME);
}
loginButton.addEventListener("submit", onLoginSubmit);hidden을 이용하여 loginForm을 감추고 remove hidden을 이용하여 숨겨졌던 문구Hello를 다시 나타내고 Hello와 username을 합쳐서 완전한 문구를 완성한다.
여기서 "Hello " + username; 이랑 Hello ${username};이랑 같다.
하지만 우리가 유저를 기억할 수 없어서 사용자가 매번 새로 로그인을 해야한다는 단점이 있는데 그것을 해결하기 위해서 localStorage를 이용하여 브라우저에 무언가를 저장할 수 있다.
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login=-form button");
const greeting = document.querySelector("#greeting");
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);
}
loginButton.addEventListener("submit", onLoginSubmit);여기서 유저정보가 있는지 없는지를 알아야 어떤 것을 실행할지를 판단할 수 있기 때문에 유저정보의 유무를 파악해야한다. 유저정보가 없으면 null로 뜨고, 유저정보가 있으면 유저의 이름이 나온다.
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login=-form button");
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", username);
paintGreetings(username);
}
function paintGreetings(username){
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername === null){
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
paintGreetings(savedUsername);
}이렇게 하면 유저의 정보도 기억하고, 유무도 알고, 그에 맞는 실행결과를 얻어낼 수 있다.
