Form Submission

• required : 태그를 필수입력 항목으로 만들어 준다.
• maxlength : input 자체적으로 최대 글자수를 조절해 준다. 입력 시 maxlength를 넘어가는 글자수는 입력조차 안된다.

<div id="login-form">
  <input required maxlength="15" type="text" placeholder="what is your name?"/>  
  <button>Log In</button>
</div>
<script src="app.js"></script>

const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");
function onLoginBtnClick(){
  console.log(loginInput.value;
}
loginButton.addEventListener("click", onLoginBtnClick);

버튼을 클릭할 때 HTML에서 확인 작업을 하지 않고 있다. 콘솔창에 입력값이 뜨지 않고 html상에서 아무런 변화가 없다. input의 유효성 검사를 작동시키기 위해서는 form태그 안에 있어야 하는데 div태그 안에 들어가있기 때문이다.

div를 form으로 바꾸고 웹에서 버튼을 누르면 입력값이 사라진다. 이는 form이 submit되면서 웹사이트를 재시작시키기 때문이다.
input안에 있는 button을 누르거나 type이 submit인 input을 클릭하면 form이 submit된다.

<button>Log In</button>
<input type="submit" value="Log In"/><!--둘 다 subbit된다.-->

submit될 때 웹페이지가 새로고침 되지 않게 하려면 어떻게 해야할까?

Events

submit

이벤트 발생 시 새로고침

submit event의 발생 중간에 개입해서 submit event가 발생했다는 것을 파악해보자.

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(){
  const username = loginInput.value;
  console.log(username);
}
loginForm.addEventListener("submit", onLoginSubmit);

입력하면 콘솔에 입력값이 나타났다가 사라지게 된다. form 을 submit 할 때 입력값을 받아내는 것은 성공했고, 새로고침이 일어나서 값이 사라지게 된다.

새로고침이 일어나지 않게 막기

form을 submit 하면 브라우저가 onLoginSubmit함수를 호출하게 되는데, 이때 브라우저 내에서 event로부터 정보를 잡아내서 함수 실행을 하고 있다.

function onLoginSubmit(tomato){
  tomato.preventDefault(); //event의 기본행동이 발생되지 않도록 막는다.ex)누군가 form을 submit하면 브라우저가 페이지를 새로고침 하는 일
  console.log(tomato);//SubmitEvent {submit의 주체(input), 대상(form), 언제 submit 되었는가? 등등}
}

onLoginSubmit 함수에 대한 인자로 정보를 얻고 있었다.
JS는 onLoginSubmit 함수의 첫번째 인자로 발생한 일에 대해 사용자가 팔요할만한 정보를 준다.모든 EventListener 함수의 첫번째 인자는 지금 벌어진 일들에 대한 정보이다.

링크

링크로 이동

<a href = "https://nomadcoders.co"> Go to courses</a>

const link = document.querySelector("a");
function handleLinkClick(){
  alert("clicked!"); //pafe가 다른 동작을 하지 못하도록 막고 있지만, 확인 버튼을 누르면 브라우저 기본 동작이 실행되게 된다.
}
link.addEventListener("click", handleLinkClick);

handleLinkClick함수는 내가 실행시키는 것이 아니라, JS가 실행시키게 된다. 그러기 위해서 이름 뒤에 괄호를 붙이지 않고 이름만 적어놓는다. 그러면 click이벤트가 발생할 경우에만 JS가 handleLinkClick함수를 실행시키게 된다.

링크로 이동되지 않게 막기

가끔 우리는 기본 동작을 막아야 할 때가 있다. 어디가 클릭됐는지, 뭐가 클릭됐는지 등 정보를 알고 싶을 때도 있다.
JS는 함수를 실행시키는 동시에 그 함수에 첫번째 인자로 object를 넣어준다. 이 object에는 방금 일어난 event에 대한 여러 정보들이 담겨있다. object는 handleLinkClick을 위한 EventListener함수의 첫번째 인자로 주어지게 된다.
submit과 달리 이번에는 console.log(event)를 하면 MouseEvent 가 뜨게 된다.

function handleLinkClick(event){
  event.preventDefault(); //event의 기본행동이 발생되지 않도록 막는다. 여기서는 링크로 이동하지 않게 된다.
  console.dir(event);
}

Getting Username

입력값 숨기기

사용자에게 값을 입력받고 로그인 버튼을 누르면, 입력된 값이 없어지게 만들고자 한다. 이 때는 HTML요소 자체를 없애는 방법, CSS를 통해 숨기는 방법이 있다.

CSS 활용 방법

.hidden{ /* 이 클래스 이름을 주게 되면 요소를 숨기게 된다.*/
display:none;
}

<form id="login-form" class ="hidden">
  <input required maxlength="15" type="text" placeholder="What is your name?"/>
  <input type="submit" value="Log In"/>
</form>

이름 제출 후에만 CSS 적용

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

function onLoginSubmit(event){
  event.preventDefault();
  const username = loginInput.value;
  loginForm.classList.add("hidden"); //login-form을 아이디로 가지고 있는 요소를 숨김
}
loginForm.addEventListener("submit", onLoginSubmit);

hidden 적용 및 해제

h1에 표시할 텍스트가 있을 경우에 적용된 hidden을 해제하고 form에 hidden을 적용시켜보자

<!--html-->
<form id="login-form">
  <h1 id="greeting" class="hidden"></h1>
  <input required maxlength="15" type="text" placeholder="What is your name?"/>
  <input type="submit" value="Log In"/>
</form>

//javascript
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden"//두 번 이상 쓰니까 따로 변수를 만들어 준다.
//일반적으로 string만 포함된 변수는 대문자로 표기한다.
function onLoginSubmit(event){
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  greeting.innerText = "Hello " + username;
  //greeting.innerText = `Hello ${username}`; 위 코드와 같은 동작을 한다.
  //작은 따옴표가 아니라 백틱 기호를 쓴다.
  greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);

Saving Username

local storage

우리가 브라우저에 뭔가를 저장할 수 있게 해줘서 나중에 가져다 쓸 수 있다.

setItem

local storage에 정보를 저장할 수 있다.

//javascript
localStorage.setItem("username", "nico");
//local storage에 username을 Key로, nico를 Value로 갖는 값이 DB에 저장된다.

getItem

//javascript
localStorage.getItem("username");
//"nico"

removeItem

//javascript
localStorage.removeItem("username");

이름 저장하기

위에서 본 함수를 사용해서 입력된 이름을 저장한다.

//javascript
function onLogSubmit(event){
  //...
  localStorage.setItem("username", username);
  //...
}