#4 Login
• input
사용자로부터 데이터를 입력받기 위해 사용되는 폼
※ input 요소를 form 요소 안에 넣어야 하는 상황
- 데이터를 서버로 전송할 때
- 브라우저의 기본 폼 기능을 사용할 때
- 클라이언트 측 유효성 검사를 할 때
- 접근성을 높일 때
- 폼 데이터를 그룹화할 때
form 요소 안에 넣어야 하는 이유!
- 사용자가 데이터를 입력하고 엔터 키 or 버튼 누를 때 해당 데이터가 자동으로 서버로 제출
• Event
function onLoginSubmit(event){
event.preventDefault();
console.log(event);
}
➣ preventDefalut 함수
브라우저가 기본적으로 수행하는 동작을 막는다
ex) 새로고침
onLoginSubmit(event)
→ event : 실행된 event들이 저장된다
(event)
- 이벤트 객체 사용 가능, 정보 활용 ex) 객체를 통해 클릭된 요소, 클릭위치 등
()
- 이벤트 객체 사용 불가능, 함수가 실행되지만 이벤트에 대한 구체적인 정보 사용 불가능
greeting.innerText = "Hello " + username;
↓
greeting.innerText = `Hello ${username}`;
➣ String + 변수, 변수를 String에 넣을 때 사용
` ` (백틱 사용)
• localStorage
브라우저가 제공하는 웹 저장소 API
localStorage.setItem("username", username);
➣ 첫 번째 인자 : key , 두 번째 인자 : value
※ key는 문자열로 저장 ∴ " " or ' ' 사용
Login practice
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum App</title>
</head>
<body>
<form class="hidden" id ="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?" />
<button>Log In</button>
</form>
<h1 id = "greeting" class="hidden"></h1>
<script src ="app.js"></script>
</body>
</html>
<css>
.hidden{
display: none;
}
<JavaScript>
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KRY = "username";
function onLoginSubmit(event){
event.preventDefault();
//form 숨김
loginForm.classList.add(HIDDEN_CLASSNAME);
const inputUsername = loginInput.value;
localStorage.setItem(USERNAME_KRY, inputUsername);
//user정보 input으로부터 온다
paintGreetings(inputUsername);
}
function paintGreetings(username){
greeting.innerText = `Hello ${username}`;
//h1을 띄움
greeting.classList.remove(HIDDEN_CLASSNAME);
}
const savedUsername = localStorage.getItem(USERNAME_KRY);
if(savedUsername === null){
//form hidden를 지움 -> form 띄움
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
//user정보가 localStorage로부터 온다
paintGreetings(savedUsername);
}
'JavaScript > 노마드코더 Vanilla JS' 카테고리의 다른 글
| [Vanilla JS] Weather API (0) | 2024.07.07 |
|---|---|
| [Vanilla Js] To do list (0) | 2024.07.07 |
| [Vanilla JS] Clock, Quotes and background (0) | 2024.07.06 |
| [Vanilla Js] Js on the browser (0) | 2024.07.04 |