1.Input Values
- input 태그에 value 속성을 사용하여 사용자가 입력한 값을 받을 수 있다.
<body> <div id="loginForm"> <input type="text" placeholder="what is your name"> <button>Log in</button> </div> </body> <script> const loginInput = document.querySelector("#loginForm input"); const loginBtn = document.querySelector("#loginForm button"); function loginBtnClick(){ console.log("hello", loginInput.value) console.log("click"); } loginBtn.addEventListener("click", loginBtnClick); </script> </body>
2. Form Submission
- submit은 엔터를 누르거나 버튼을 클릭할 때 발생하는 이벤트 타입이다.
- input의 유효성검사(max required같은 속성)를 이용하기 위해서 form 요소가 무조건 필요하다.
<body> <form id= "loginForm"> <input type="text" placeholder="what is your name" required maxlength="15"> <input type="submit">Log in</input> </form> </body><script> const loginForm = document.querySelector("#loginForm"); const loginInput = document.querySelector("#loginForm input"); function onLoginSubmit(event){ event.preventDefault(); console.log(loginInput.value); } loginForm.addEventListener("submit", onLoginSubmit); //함수에 ()을 더하면 브라우저는 자동으로 function을 실행시킨다. //addEventListener는 우선 onLoginSubmit 함수를 호출하고 //브라우저가 함수를 실행시키고 있기는 하지만 //onLoginSubmit()의 ()에 인자에서 우리에게 정보를 주고있다. //브라우저는 브라우저 내에서 event로부터 정보를 잡아내서 </script>-form을 submit할때 입력값을 받아내고 submit event를 감지한다.
-기본행동이란 어떤 함수에 대해서 브라우저가 기본적으로 수행하는 동작이다.
-브라우저에서 form을 submit하면 기본적으로 페이지가 새로고침되고 이것이 submit의 기본행동이다.
-event.preventDefault();은 어떤 event의 기본 행동이 발생되지 않도록 막아주는 함수이다. 이 함수를 추가함으로서 기본 행동을 막는다.
-event가 발생할 때 브러우저는 function을 호출하는데 onLoginSubmit()에 인자가 비어있는 채로 호출하는 것이 아니라 첫 번째 인자로써 추가적인 정보를 가진 채로 호출하게 된다.
-모든 이벤트 리스너 함수의 첫 번째 인자는 항상 지금 막 벌어진 일들에 대한 정보가 된다.
-JS는 방금 일어난 event에 대한 정보를 지닌 인자를 자동으로 채워넣는다.
3. A link
- 링크의 기본 동작은 클릭시 해당 링크로 페이지가 이동하는 것이다.
- 우리는 이 기본동작을 막아줄 필요가 있을 때가 있다. 가령 뭐가 클릭됐는지 어디가 클릭됐는지 등 정보를 알고 싶을 땐 JS는 단순히 함수를 실행시키기만 하는게 아니라 함수를 실행시키는 동시에 그 함수에 첫 번째 인자로 Object를 넣는다.
<body> <a href="https://nomadcoders.co/">Go to link</a> </body> <script> handleLinkClick({information about event that just happend}) const link = document.querySelector("a"); function handleLinkClick(event){ event.preventDefault(); console.dir(event); } link.addEventListener("click",handleLinkClick); </script>-이 object는 방금 일어난 event에 대한 여러가지 정보가 담겨있다.
-이 인자는 handleLinkClick을 위한 EventListener 함수의 첫 번째 인자로 주어진다.
-event.preventDefault(); 함수를 호출하여 event는 기본 동작을 막아준다.
...! 중요한 건 addEventListener에 있는 함수는 직접 실행하지 않기때문 ()을 적어주지 않는다.
-대신 브라우저가 대신 실행을 시켜주고 event에 대한 정보도 담아준다.
-따라서 우리는 인자가 들어갈 자리만 만들어주면 되고 이 정보안에 몇가지 함수도 같이 들어가있다. 방금 살펴본 preventDefault()와 같은 함수말이다.
4. Getting Username
1> 먼저 submit 이벤트의 기본동작을 막아준다.
2> 스타일 시트에 hidden 클래스의 display:none을 만들어 classList.add를 통해 hidden클래스를 추가하여 form 태그가 사라지도록 만들어준다.
3> 입력값을 받을 수 있도록 input태그의 value를 변수에 저장해준다.
4> class이름을 hidden을 가진 비어있는 h1태그를 만들어 js로 선택한 뒤 innerHTML을 통해 3>유저의 입력 변수를 넣어준다.
5> h1 태그가 함께 사라지는 걸 막기위해 classList.remove를 통해 h1태그의
hidden을 제거해준다.
+> 문자열과 변수를 합칠 때 '+'를 사용하는데 이를 다른 방식으로 표기할 수 있다.
()백틱 기호를 사용해 묶어주고 ${}안에 변수를 넣어준다.<body> <form id="loginForm"> <input type="text" placeholder="what is your name" required maxlength="15"> <input type="submit" value="Log in"></input> <h1></h1> </form> <h1 id="greeting" class="hidden"></h1> </body> <script> const loginForm = document.querySelector("#loginForm"); const loginInput = document.querySelector("#loginForm 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.innerHTML = `Hello ${username}`; greeting.classList.remove(HIDDEN_CLASSNAME) } loginForm.addEventListener("submit",onLoginSubmit); </script>
5. Saving Username
- 우리는 유저가 이름을 제출할 때 이를 저장해줘야한다.
- localStorage API를 사용하여 저장하는 기능을 구현할 수 있다.
-localStorage.setItem(key, value)
setItem 메소드를 활용하면 local storage에 정보를 저장할 수 있다.
인자로 저정할 값의 이름(key)을 넣어주고 두 번째 인자로 저장할 값(value)을 적어준다.
-getItem(key)
저장된 값을 불러올 수 있다.
-removeItem(key)
저장된 값을 제거할 수 있다.
6. Loading Username
- local storage에 유저정보가 이미 들어가 있다면 form을 보여주는 대신 h1이 남아있어야한다. 먼저 local storage에 유저정보 유뮤를 확인하고 없다면 form을 보여준다.
+>본인이 작성한 string을 반복해서 사용하게 될 경우에 변수로 저장해서 사용하는 것이
용이하다.<script> const savedUserName = localStorage.getItem(USERNAME_KEY); if(savedUserName === null){ // shwo the form } else { // show the greetings; } </script>
7. 전체흐름 정리
form을 통해 유저의 이름을 얻기 위한 절차는 다음과 같다.
0> 마크업, 유저의 이름을 받아내는 tex타입과 submit타입의 input을 담고 있는 form과
비어있는 h1 태그를 만들어주고 class=hidden을 넣어준다.
1> hidden class의 역할은 요소를 숨겨준다. 자바스크립트를 불러오기 전부터 이 두 요소는 숨겨져있다.<style> .hidden { display: none; } </style>
2> JS는 가장 먼저 local storage를 확인해준다.
localStorage는 브라우저가 가지고 있는 작은 DB같은 API이다.
만약 local storag에 없는 정보를 받으면 NULL을 리턴, 존재하는 정보를 불러오면 KEY에 해당하는 VALUE를 리턴한다.
2-1> if(savedUserName === null) 즉 유저가 처음 방문한 상태일 땐 loginForm으로부터
class hidden을 제거하여 form이 보이도록 만들어준다. 그리고 submit event가 발생하면
onLoginSubmit실행된다.const savedUserName = localStorage.getItem(USERNAME_KEY); if(savedUserName === null){ loginForm.classList.remove(HIDDEN_CLASS_NAME); loginForm.addEventListener("submit",onLoginSubmit); } else { paintGreetings(savedUserName); }
2-2> onLoginSubmit함수 실행 순서
step1. event가 원래하는 기본 동작, 새로고침을 막아준다.
step2. form을 다시 숨겨준다.
step3. loginInput.value을 username 변수에 저장해준다.
step4. local Storage에 username값, value를 USERNAME_KEY이라는 key와 함께 저장해준다.
step5. paintGreetings함수를 호출해준다.<script> const HIDDEN_CLASS_NAME = "hidden" const USERNAME_KEY = "username" function onLoginSubmit(event){ event.preventDefault(); loginForm.classList.add(HIDDEN_CLASS_NAME); const username = loginInput.value; localStorage.setItem(USERNAME_KEY, username); function paintGreetings(username) } </script>
2-3> paintGreetings함수 실행 순서
step0>paintGreetings함수는 하나의 인자를 받고 있는데 onLoginSubmit안에 있는 paintGreetings함수는 유저가 form안에 있는 input에 입력한 value값, 유저명을 받는다.
step1> 비어있는 h1 요소 안에 'Hello ${username}'라는 텍스트를 추가해준다.
step2> h1 요소로부터 hidden이라는 클래스명을 제거하여 hello + 유저명이 화면에 나타난다.<script> function paintGreetings(username){ greeting.innerText = `Hello ${username}`; greeting.classList.remove(HIDDEN_CLASS_NAME) } </script>
3-1> 새로고침을 하면 form과 h1 둘다 hidden 클래스가 들어가 상태로 돌아간다.
3-2> 앱이 실행되면 local Storage에서 savedUserName을 얻으려고하는데 username이라는 key를 가지고 찾기 시작하고 이미 유저 정보가 저장되어있기에 (savedUserName === null) 조건은 거짓이된다.
3-3> 따라서 else 블럭으로 넘어가고 paintGreetings(savedUserName)함수가 실행된다.
이 경우 paintGreetings함수는 local Storage에 저장된 값을 인자로 받게되고 paintGreetings함수를 호출하여 페이지에 그대로 h1태그가 남아있게된다.
-전체 html + css
<!DOCTYPE html> <html lang="en"> <head> <style> .hidden { display: none; } </style> </head> <body> <form id="loginForm" class="hidden"> <input type="text" placeholder="what is your name" required maxlength="15"> <input type="submit" value="Log in"></input> </form> <h1 id="greeting" class="hidden"></h1> <script src="../js/project_momentum.js"></script> <script> </script> </body> </html>-전체 JS코드
<script> const loginForm = document.querySelector("#loginForm"); const loginInput = document.querySelector("#loginForm input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASS_NAME = "hidden" const USERNAME_KEY = "username" function onLoginSubmit(event){ event.preventDefault(); loginForm.classList.add(HIDDEN_CLASS_NAME); const username = loginInput.value; localStorage.setItem(USERNAME_KEY, username); paintGreetings(username); } function paintGreetings(username){ greeting.innerText = `Hello ${username}`; greeting.classList.remove(HIDDEN_CLASS_NAME); } loginForm.addEventListener("submit",onLoginSubmit); const savedUserName = localStorage.getItem(USERNAME_KEY); if(savedUserName === null){ loginForm.classList.remove(HIDDEN_CLASS_NAME); loginForm.addEventListener("submit",onLoginSubmit); } else { paintGreetings(savedUserName); } </script>
