● 프로그램 작성시 가장 먼저 할 일은 HTML작성
HTML을 작성한 후 거기 있는 element를 끌고오기.
● 다음 step은 HTML, CSS, JS를 각각의 역할을 충분히 수행하도록 역할 나누기
login시 input의 길이 등 유효성 검사는 HTML에서.(input이 form 안에 들어있을 때)
● form의 기본 동작은 submit이다.
-모든 EventListener function의 첫번째 인자는 항상 지금 막 벌어진 일들에 대한 정보. JS가 정보를 제공함.
//querySelector로 classname, tagname 모두 검색 가능하므로 대상이 id인지 명확히 해주기(#)
const loginForm=document.querySelector("#login-form");
const loginInput=loginForm.querySelector("#login-form input");
//submit은 엔터를 누르거나 버튼을 클릭할 때 발생
function onLoginSubmit(event)
{
//submit하면 새로고침 되는 등의 브라우저가 기본으로 하는 행동을 막음.
event.preventDefault();
console.log(event);
}
loginForm.addEventListener("submit",onLoginSubmit);->app.js
위에서 알 수 있듯이 아무것도 안해도 JS가 event object를 담은 채로 function을 호출함.
● 유저가 이름을 제출한 뒤 form을 사라지게 하는 코드
//querySelector로 classname, tagname 모두 검색 가능하므로 대상이 id인지 명확히 해주기(#)
const loginForm=document.querySelector("#login-form");
const loginInput=loginForm.querySelector("#login-form input");
const link=document.querySelector("a");
//submit은 엔터를 누르거나 버튼을 클릭할 때 발생
function onLoginSubmit(event)
{
//submit하면 새로고침 되는 등의 브라우저가 기본으로 하는 행동을 막음.
event.preventDefault();
const username=loginInput.value;
loginForm.classList.add("hidden");
console.log(username);
}
function handleLinkClick(event){
console.log(event);
alert("clicked!");
}
loginForm.addEventListener("submit",onLoginSubmit);
link.addEventListener("click", handleLinkClick);->app.js
.hidden{
display:none;
}->style.css
<!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 id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>
<input type="submit" value="Log In"/>
</form>
<a href="https://nomadcoders.co">Go to courses</a>
<script src="app.js"></script>
</body>
</html>->index.html
● localStorage
작은 DB라 생각하면 편하다. console 창에서 localStorage 뒤에 .removeItem, .getItem, setItem 명령어를 실행하면 key,value pair를 remove, get, set 할 수 있다.
● user의 이름을 받고 localStorage에 저장하는 것까지의 코드
//querySelector로 classname, tagname 모두 검색 가능하므로 대상이 id인지 명확히 해주기(#)
const loginForm=document.querySelector("#login-form");
const loginInput=loginForm.querySelector("#login-form input");
const greeting=document.querySelector("#greeting");
const HIDDEN_CLASSNAME="hidden";
const link=document.querySelector("a");
//submit은 엔터를 누르거나 버튼을 클릭할 때 발생
function onLoginSubmit(event)
{
//submit하면 새로고침 되는 등의 브라우저가 기본으로 하는 행동을 막음.
event.preventDefault();
//form을 숨김
loginForm.classList.add(HIDDEN_CLASSNAME);
const username=loginInput.value;
localStorage.setItem("username",username);
//greeting.innerText="Hello "+username;과 동일한 역할 수행
greeting.innerText=`Hello ${username};`
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit",onLoginSubmit);->app.js
● 4장 LOGIN 구현 최종 코드
//querySelector로 classname, tagname 모두 검색 가능하므로 대상이 id인지 명확히 해주기(#)
const loginForm=document.querySelector("#login-form");
const loginInput=loginForm.querySelector("#login-form input");
const greeting=document.querySelector("#greeting");
//만든 string이 두번 이상 반복되면 const로 선언해주는게 좋음. 실수 방지
const HIDDEN_CLASSNAME="hidden";
const USERNAME_KEY="username";
//submit은 엔터를 누르거나 버튼을 클릭할 때 발생
function onLoginSubmit(event)
{
//submit하면 새로고침 되는 등의 브라우저가 기본으로 하는 행동을 막음.
event.preventDefault();
//form을 숨김
loginForm.classList.add(HIDDEN_CLASSNAME);
const username=loginInput.value;
localStorage.setItem(USERNAME_KEY,username);
//greeting.innerText="Hello "+username;과 동일한 역할 수행
paintGreeting(username);
}
function paintGreeting(username){
greeting.innerText=`Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
const savedUsername=localStorage.getItem(USERNAME_KEY);
if(savedUsername===null){
//입력된 name이 없으면 show the form
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
}
else{
//입력된 name이 있으면 show the greetings
paintGreeting(savedUsername);
}->app.js
.hidden{
display:none;
}->style.css
<!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?"
/>
<input type="submit" value="Log In"/>
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="app.js"></script>
</body>
</html>->index.html
