로그인을하면 인사메세지가 나오도록 만들기
<body>
<div id="login-form">
<form action="">
<input type="text" placeholder="what is your name" required maxlength="15">
<button>log in</button>
</form>
</div>
<h1 class="hidden" id="greeting"></h1>
<script src="app.js"></script>
</body>.hidden{
display: none;
}- 로그인창 밑에 비어있는 h1태그를 만들고 해당 클래스가 보이지 않도록 css 코드를 작성한다.
const loginInput=document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const link = document.querySelector('a');
const greetning = document.querySelector('#greeting')
const HIDDEN_CLASSNAME="hidden" //문자열을 담은 상수는 대문자로 표기한다
function onLoginSubmit(event){
event.preventDefault(); //함수가 갖고있는 기본적인 이벤트를 막는다. (전송값은 전송된다)
const username = loginInput.value; //로그인 폼에 작성된 값을 상수로 선언한다.
loginForm.classList.add(HIDDEN_CLASSNAME); //로그인 폼이 보이지 않게 class를 추가한다
// greetning.innerText="Hello "+username;
greetning.innerText=`Hello ${username}`; //빈 h1태그에 해당값을 추가한다
greetning.classList.remove(HIDDEN_CLASSNAME); //h1태그를 숨기고 있던 클래스명을 삭제한다
}- 자바스크립트를 활용해 이름을 입력하면 로그인 폼이 사라지고 인사 메세지가 나오도록한다.
greetning.innerText="Hello "+username;
greetning.innerText=`Hello ${username}`;- 이 두 코드는 같은 태그이다 자바스크립트는 ``안에 ${}로 표기한 변수명을 변수명에 할당된 값으로 인식하여 출력할수있다.
입력한 값 브라우저에 저장하기
<div id="login-form" class="hidden">
<form action="">
<input type="text" placeholder="what is your name" required maxlength="15">
<button>log in</button>
</form>
</div>
<h1 class="hidden" id="greeting"></h1>- 로그인 폼과 메세지 출력창에 hidden 클래스를 주어서 모두 기본적으로 안보이게 한다.
const loginInput=document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const link = document.querySelector('a');
const greetning = document.querySelector('#greeting')
const HIDDEN_CLASSNAME="hidden" //문자열을 담은 상수는 대문자로 표기한다
//1
const USERNAME_KEY="username;"
//3
const saveUserName = localStorage.getItem(USERNAME_KEY)
//6
function onLoginSubmit(event){
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
//2
localStorage.setItem(USERNAME_KEY,username);
paintGreeting(username)
}
//4
function paintGreeting(username){
greetning.innerText=`Hello ${username}`;
greetning.classList.remove(HIDDEN_CLASSNAME);
}
//5
if(saveUserName==null){
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit",onLoginSubmit)
}else{
paintGreeting(saveUserName)
}const USERNAME_KEY="username;": 계속 uasername이라는 텍스트가 사용되기에 코드의 편리성을 위하여 상수로 선언하고 여러번 사용했다.localStorage.setItem(USERNAME_KEY,username);: 브라우저의 로컬저장소에 내가 원하는 키와 원하는 값을 저장하는 코드이다.- localStorage.setItem(키값,저장할값)
const saveUserName = localStorage.getItem(USERNAME_KEY)localStorage.getItem(키값): 키값을 매개변수로 보내면 해당 키 값에 맞는 저장값을 출력한다.- 여기에서는 상수로 선언한 “username”이 키값이며 input태그에 입력한 value가 해당키값에 저장된 값이다.
- 해당 키 값을 받으면 출력할수있게 만든 함수이다. 매개변수로 username을 받도록했으나 함수를 실행할 단계에서 매개변수를 어떤것을 넣느냐에 따라 출력되는 값이 바뀐다. 지금은 편의상 username이라고 썼을뿐 위에서 선언한
const username = loginInput.value;과는 관계없다. - savsUserName은 위에서 localstage에 저장한 username이라는 키의 저장값으로 선언해두었다. 만약 이 함수가 실행되지 않아 아직 username이 저장되어있지 않다면 그 값은 null이고(만약 키는 저장되어있는데 내용값이 저장되어있지 않다면 값은 null이 아니라 “” 공백이 된다.)
- 해당값이 저장된적이 없는 null일경우 폼에 저장된 hidden클래스를 삭제해 폼이 보이도록하고 위에 미리 만들어둔 이름을 submit으로 보내는 함수가 실행된다.
- 이미 해당값이 저장되어 값이 있을경우에는 4에서 만든 함수가 실행된다, 여기서의 매개변수는 savsUserName로 함수는 username이라는 매개변수를 받는다고 설정되어있으나 그 값은 saveUserName으로 3번에서 저장된 값이 보내진다.
- 이 함수에서는 인풋창에 값을 받아 submit을 하면 값은 전송되지만 새로고침을 하지 않는 코드(
event.preventDefault();)가 들어가있다- submit을 누르면 hidden클래스가 추가되어 폼은 보이지 않게된다.
- 이때에 input에 입력한 value를 username으로 선언해주어야 한다.(
const username = loginInput.value;)- 만약 미리 선언하면 const는 상수를 뜻하기 때문에 먼저 비어있는 input의 value를 username이라고 판단해 username = “” (공백)이라고 인식한다.
- 2에서 설명한것처럼 로컬저장소에 저장하고 선언된 username을 가지고 greetingPrint함수가 실행돼면 내가 원한 값이 정상 출력된다.
코드 수정하기
function onLoginSubmit(event){
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
localStorage.setItem(USERNAME_KEY,loginInput.value);
//username을 없애고 value를 바로 받는다
paintGreeting() //매개변수 없음
}
function paintGreeting(){
const username= localStorage.getItem(USERNAME_KEY)
//username을 여기서 선언하고 사용하면 매개변수를 받지 않아도 된다.
greetning.innerText=`Hello ${username}`;
greetning.classList.remove(HIDDEN_CLASSNAME);
}
if(saveUserName==null){
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit",onLoginSubmit)
}else{
paintGreeting() //매개변수 없음
}- 매개변수를 받지 않고 함수에서 직접 매개변수가 출력할 값을 선언하여 출력할수도 있다.
hello world