[JS] 바닐라 JS | #4.0~4.6) 입력폼 만들기

#4.0 Input Values

html에 있는 input element를 js로 받아온다.

loginInput 변수에 input element를 할당하고, loginButton 변수에 button element를 할당한다. 

 

(input element).value

input element의 object는 value 프로퍼티를 가진다. 아무것도 입력하지 않으면 value=""이다. 입력 받으면 입력받은 것 대로 값이 바뀐다.

eventListener를 통해 button을 클릭하면 input element의 value 값을 console.log하게 할 수 있다. 그 코드는 아래와 같다.

 

#4.1 Form Submission

이전까지는 input에 입력 받은 value 값을 바로 console.log 했다. 이제는 그 value 값을 새로운 변수에 저장해보자.

저장한 변수에 if-else 구문은 물론 다양한 작업을 할 수 있다.

(string).length -> 문자 길이 구할 수 있음

아래와 같이 작업할 수 있다.

 

하지만 이는 div 태그 안에서 작업할 때의 이야기이다.

 

Form tag 

form 태그를 사용한다면 기본적으로 form 태그에서 제공하는 것들이 많아진다. 그러면 위의 코드처럼 user가 입력하는 value의 validity를 검사하는 코드를 직접 짜지 않아도 된다. 또한 addEventListener도 필요가 없어진다. form에서는 required를 이용해 필수 입력 사항으로 지정할 수 있고, maxlength를 이용해 string의 최대 글자 수도 지정할 수 있다. required를 어길 시 alert가 뜬다. 그리고 maxlength를 초과하면 더 이상 텍스트를 입력받지 않는다.

 

 

그러나 위에 처럼 하면 문제가 발생한다. log in 버튼을 누르면 사이트 주소 맨 끝에 ?이 붙는다. 그리고 console.log(username)을 입력해보면 console에 아무것도 출력되지 않는다는 것을 알 수 있다.

이 이유는 log in 버튼을 누르면 웹이 새로고침 되기 때문이다. 말그대로 내 웹사이트를 재시작시키고 있는 것이다. 이렇게 되는 이유는 form이 submit 되고 있기 때문이다. input 안에 있는 button을 누르거나 type이 submit인 input을 클릭하면 내가 작성한 form이 submit한다. 이는 우리가 form 안에서 엔터를 누르고 input이 더이상 존재하지 않는다면 자동으로 submit 된다는 html의 규칙이다.

따라서 우리는 더 이상 click에 신경 쓸 필요가 없다. -> 우리의 관심사는 form을 submit하는 것이다.

브라우저가 새로고침하지 않고 user 정보를 저장하도록 해야한다.

 

#4.2 Events

preventDefault();

이 function을 추가함으로써 기본 동작을 막을 수 있다.

 

 

#4.3 Event part Two

 

 

#4.4 Getting Username

 

#4.5 Saving Username

value를 저장하는 법 -> localStorage: 미니 DB

localStorage.removeItem()

localStorage.setItem()

localStorage.getItem()

localStorage.setItem("저장될 아이템의 이름",값)

 

#4.6 Loading Username 

새로고침 시,

local storage가 비어있으면(null) form부터 보여줌

local storage에 유저정보가 있으면 form을 보여주면 안 된다.(h1만 보여야 함)

 

로직

만약 local storage에 유저정보가 있으면 거기서 유저정보를 받아서 인자로 넣어줌

먄약 local storage에 유저정보가 없다면, 우리는 form의 submit을 기다리고, form이 submit 되면 우리는 input으로부터 유저정보를 받고, input에서 받은 user를 가진 paintGreetings를 호출함.