#4.0~4.2

Input Values

모든 것은 HTML에서 시작

const loginForm = document.querySelector('#login-form'); // Element
const loginForm = document.getElementById('login-form');

document 또는 하나의 element를 통해서 검색이 가능

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

Form Submission

1. HTML에 이미 구현된 기능(인풋의 유효성검사)이 있으니 이것을 사용한다.
   근데 HTML에서 input의 유효성검사를 하기위해서는, 인풋이 form 태그 안에 들어가있어야한다. 따라서 div를 form으로 수정한다.

2. form 태그 안에 들어있는 button을 누르거나, type이 submit인input을 클릭하면 내가 작성한 form이 submit됨.

   문제는 form이 submit되면서 내용이 날라가서 user정보를 저장할 수가 없게 된다.

3. 따라서 form이 submit되어서 새로고침 되는것을 막아준다.

Events

loginForm.addEventListener('submit', onSubmit);

=> loginForm 요소에 submit 이벤트가 발생하면 onSubmit 함수를 호출
onSubmit()함수의 첫 번째 argument(인자)에 event object를 넣을 수 있음
어떤 함수가 실행되는 동안 어떤 정보를 함수에게 보낼 수 있는 방법

addEventListener의 event가 발생할 때 호출되는 함수에 발생한 event에 정보 인자를 넘겨줄 수 있음

• default behavior : 어떤 fn에 대해 브라우저가 기본적으로 수행하는 동작