index.html
<!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 App</title>
</head>
<body>
<form id="login-form" **class="hidden"**>
<input required maxlength="15" type="text" placeholder="What is your name?" />
<button>Log In</button>
</form>
<h1 id="greeting" class="hidden"></h1>
<a href="https://nomadcoder.co">Go to courses</a>
<script src="app.js"></script>
</body>
</html>style.css
.hidden{
display: none;
}app.js
<변수 부분>
- document.querySelector -> document내에서 찾는걸로 내부요소까지 다 적어줘야 함
- loginForm.querySelector -> loginForm 안에서 찾는것이므로 loginForm안의 요소만 적어주면 됨
- 내가 직접 만들어서 사용하는 문자열은 변수로 저장해서 쓰는게 좋음!(대문자로)
const loginForm = document.querySelector("#login-form")
const loginInput = loginForm.querySelector("input")
//=document.querySelector("#login-form input")
//const loginButton=loginForm.querySelector("button") //loginForm안에서 바로 찾을 수 있음
const link = document.querySelector("a");
const greeting = document.getElementById("greeting")
//내가 사용하는 문자변수
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
- 전체 사이트의 동작: localStorage에 저장된 username이 없으면 form을 띄움.localStorage에 이름이 저장되어있으면 loginForm띄우지 않고 greeting을 띄움.(새로고침해도 유지되도록)
1. localStorage에 USERNAME_KEY가 저장되어 있는지 확인하고 동작하기
- ' ${} ' 를 통해 문자열을 연결해서 쓸 수 있음
- localStorage는 브라우저 로컬에 값을 저장함
- greeting과 loginForm은 html에서 애초에 HIDDEN_CLASSNAME을 적용해놓고 조건에 따라 remove해서 사용
- 반복되는 부분은 paintGreetings로 묶어서 사용
- localStorage.setItem(key,value)형태로 사용
function paintGreetings(username) {
greeting.classList.remove("hidden");
greeting.innerText = `Hello ${username}`; //문자열string 연결해서 쓸때 다음같이 쓸수있음 `이용해서
}
const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername === null) {
//show form
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
}
else {
paintGreetings(savedUsername);
}2. input입력 시 저장하기
HTML의 form 태그는 사용자 입력을 수집하는 데 사용되는 양식을 정의하고, HTML에서 다른 페이지(서버)에 정보를 보낼 때 사용된다.
- input태그는 가장 중요한 form element이다.
- form의 기본동작: submit
- 브라우저는 form submit 누르면 새로고침 되도록 기본동작 설정되어있음
input태그를 form태그로 감싼다.
우리가 원하는 작업은 input에 쓰고 submit해도 동작하지 않는 것(=브라우저가 새로고침 되지 않도록)
-> event.preventDefault() 사용
addEventListener에서 두번째파라미터인 함수를 선언할때 첫번째 매개변수로 event를 주면 js가 해당 이벤트에 접근할 수 있음.
preventDefault()도 event가 가지고 있는 함수? 중 하나
function onLoginSubmit(event) { //공간을 만들어놓으면 js가 event변수를 해당 이벤트에 대한 정보를 담아줌
event.preventDefault(); //어떤 event의 기본행동이든지 발생되지않도록 막음
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
console.log(username);
localStorage.setItem(USERNAME_KEY, username);
paintGreetings(username);
}