LOGIN- input value

js로 input value 반환하기(참고만)

const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");

function loginClick() {
  console.log(loginInput.value);
  console.log("click!!!");
}

loginButton.addEventListener("click", loginClick);

• input의 유효성 검사를
  html에서 input이 form안에 있어야 된다.
  JavaScript에서 구현하는 대신에 가능하다면 required, maxlength 등 HTML의 기본 속성을 최대한 이용하기

• preventDefault()
  기본동작 발생을 막기 위해 preventDefault() 함수를 이용할 수 있다.
  이 함수는 어떤 이벤트의 기본동작(어떤 함수에 대해 브라우저가 기본적으로 수행하는 동작)이든지 발생되지 않도록 막는다. 이때 js는 첫번째 인자로 발생된 event에 대한 정보(=방금 실행된 event에 대한 정보들)는 매개변수(첫번째 인자argument) 안에 담긴다.

1. submit 감지
   form은 submit 될 때마다 브라우저는 기본적으로 페이지가 새로고침 하도록 되어있다.
   (form의 기본 동작 = submit)

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

function onLoginSubmit(tomato) {   //tomato를 event로 작성하는 것이 관행. 
  tomato.preventDefault();
  console.log(tomato);
}

loginForm.addEventListener("submit", onLoginSubmit);

2. link의 기본동작 = 클릭 시 다른 페이지로 이동하는 것

const link = document.querySelector("a");

function handleLinkClick(event) {
  event.preventDefault();
  console.dir(event);
}

link.addEventListener("click", handleLinkClick);