Getting Username
.hidden{
display:none;
}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}`; // == "Hello " + username
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);css를 이용해 hidden 클래스에 display: none을 설정하고 classList를 이용해
유저이름을 입력하고 submit하면 form을 숨기고 greeting을 보이게 함
대문자_변수명
- string만 포함된 변수
- 중요한 정보를 담은 게 아닌 변수
` ~ ${변수명} ~ `
- string과 변수를 합치거나 변수를 string 안에 집어 넣을 때
- ` ` (백틱) 기호 중요!
Saving Username
-remembering
* API(Application Programming Interface 애플리케이션 프로그래밍 인터페이스, 응용 프로그램 프로그래밍 인터페이스)
응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.
localStorage
- API로 정의되어 있음
- 브라우저에 뭔가를 저장하고 나중에 가져다 쓸 수 있게 해줌
- 오른쪽 마우스 - 페이지 소스 보기 - Application 탭 - Local Storage에서 확인
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);
}
// localStorage.serItem을 추가하여 username을 기억하게 함
Loading Username
- 불러오기
<!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>Momentum</title>
</head>
<body>
<form class="hidden" 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>
<script src="app.js"></script>
</body>
</html>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;
localStorage.setItem(USERNAME_KEY, 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);
}같은 string을 두번 이상 쓰게 되면 대문자 변수로 만들어 넣기
같은 기능을 두번 이상 쓰게 되면 함수로 만들기
- local storage에 저장한 username을 불러오기
- username이 저장되면 form 숨기고 greeting 보여주기
- 새로고침을 해도 greeting이 사라지지 않고 계속 떠있기
js 실행 순서
1. local storage 확인 (USERNAME_KEY, value)
2. 값이 null이면 form class hidden을 삭제하고 표시
3. submit event가 발생하면
(1) 브라우저의 기본 동작을 막고
(2) form에 class hidden을 추가하고
(3) 입력값을 username이라는 변수로 저장
(4) "username"(USERNAME_KEY)을 key, 입력값을 value로 local storage에 저장
(5) paintGreetings 함수를 호출
4. paintGreetings는 username이라는 argument를 받고 비어있는 h1 요소 안에 텍스트 추가
5. h1에 class hidden을 삭제
6. 새로고침시 1번부터 다시 확인하여 local storage에 값이 저장되어 있으면 savedUsername으로 paintGreeting 함수 호출
'개발 > JavaScript' 카테고리의 다른 글
| 바닐라JS - 앱 만들기 randomness (0) | 2021.09.02 |
|---|---|
| 바닐라JS - 앱 만들기 clock (0) | 2021.09.01 |
| 바닐라 JS - 앱 만들기 input, prevent 1 (0) | 2021.08.26 |
| 바닐라 JS - CSS (0) | 2021.08.26 |
| 바닐라 JS - Events (0) | 2021.08.25 |
