로그인
<body>
<div id="login-form">
<input type="text" placeholder="what is your name?">
<button>Log In</button>
</div>
<script src="app.js"></script>
</body>
const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");
login-form이라는 id를 가진 태그를 찾아 loginForm 변수에 저장한다
그다음, loginForm 안에서 querySelector를 이용하여 input과 botton 태그를 찾아 각각 변수에 저장한다
document가 아니라 login-form 안에 있는 것들을 바로 찾을 수 있다.
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
이런 식으로도 가능하다
input의 value값 얻기
function onLoginBtnClick(){
console.log(loginInput.value)
}
loginButton.addEventListener("click", onLoginBtnClick)
이런 식으로 input 안에 작성된 값을 console에 출력가능하다.
function onLoginBtnClick(){
const username = loginInput.value;
if (username === "") {
alert("Please write your name");
} else if (username.length > 15) {
alert("your name is too long..");
}
}
loginButton.addEventListener("click", onLoginBtnClick)
값이 비어있을 때와 길이에 따라서 알림창 뜨게 하기
<input required maxlength="15" type="text" placeholder="what is your name?">
이 값들은 html input태그의 required와 maxlength 속성으로 설정할 수도 있다.
input이 유효성 검사를 통과하기 위해선 form 태그 안에 있어야 한다.
이런 식으로 뜬다. 글자수도 15가 넘으면 더이상 작성되지 않는다. 만약 form태그 안에 넣지 않으면 이와 같이 작동하지 않는다.
문제는 로그인 버튼을 누르면 페이지가 새로고침이 된다. 폼이 submit되고 있기 때문이당
function onLoginSubmit(event){
event.preventDefault();
console.log(event);
}
loginForm.addEventListener("submit", onLoginSubmit)
함수의 괄호안에 argument를 입력해 주고 console.log하면 실행한 event의 정보가 뜬다. (js는 첫 번째 argument로 발생한 event에 대한 정보를 줄 것이다)
preventDefault는 event의 기본행동(즉 여기선 새로고침)이 발생하지 않도록 해줌
const link = document.querySelector("a");
function handelLinkClick(event){
event.preventDefault();
console.log(event);
}
link.addEventListener("click", handelLinkClick)
이런 식으로 a태그의 동작도 막을 수 있다
<body>
<form 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>
.hidden {
display: none;
}
const HIDDEN_CLASSNAME = "hidden"
function onLoginSubmit(event){
event.preventDefault();
const username = loginInput.value;
loginForm.classList.add(HIDDEN_CLASSNAME)
greeting.innerText = "Hello " + username;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit)
관습적으로 string만 포함된 변수는 대문자로 표기한다!! loginForm 같이 중요한 정보가 아니라 대문자로 작성한다.
이런 식으로 코드를 짜면 로그인 버튼을 누르면 폼이 사라지면서
이와 같이 나타난다.
innerText를 통해서 태그 안에 텍스트를 삽입해 줄 수 있다
greeting.innerText = "Hello " + username;
greeting.innerText = `Hello ${username}`;
변수와 스트링 결합 방법. 위 방법은 아래 방법으로 대체할 수 있당
localStorage
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
Window.localStorage - Web API | MDN
localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이
developer.mozilla.org
localStorage의 setItem 메소드를 사용하면 값을 저장할 수 있고 getItem을 사용하면 저장했던 값을 불러올 수 있다.
removeItem을 사용하면 값을 지울 수도 있다.
지워진 모습 확인
localStorage.setItem("username", username)
를 함수에 추가해 주어서 유저네임이 저장되도록 한다.
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);
}
loginForm.addEventListener("submit", onLoginSubmit);
저장되는 모습 확인
새로고침할때 폼 안 뜨게 하기
function onLoginSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
greeting.innerText = `Hello ${username}`
greeting.classList.remove(HIDDEN_CLASSNAME);
}
function paintGreetings() {
greeting.innerText = `Hello ${savedUsername}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
greeting.innerText = `Hello ${savedUsername}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
스토리지에 저장된 값이 null값이면 폼의 히든 클래스를 지워서 폼을 보이게 하고
이벤트리스너를 동작하게 한다.
만약 값이 저장되어 있다면 h1태그에 이너텍스트를 넣어주고 히든 클래스를 지워주어서 화면에 보이도록 한다.
반복되는 부분은 변수를 만들어서 넣어준다.
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
위 코드를 보면 이부분이 계속 반복되고 있다
function paintGreetings(username) {
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
그래서 이렇게 따로 함수를 만들어 주어서
function onLoginSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
paintGreetings(username);
}
if (savedUsername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
paintGreetings(savedUsername);
}
이와 같이 깔끔하게 만들어준다
괄호 안에 적절한 인자를 넣어주어야 한다.
저장되지 않았을 경우에는 username(input태그에 작성한 값)을 넣어주고, 저장되었으면 saveUsername(로컬스토리지에 저장되어 있는 값)을 넣어준다.
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);
}
전체 코드는 이와 같다
