[JS] Login 구현 - Input, Form, Events

# Input Values

 

모든 것은 HTML에서 시작되어야 함. HTML에서 작성하고 자바스크립트로 기능을 구현.
먼저, HTML 코드 작성하기

 

 

 

[HTML]
1. 사용자가 이름을 작성할 수 있도록 input 태그를 작성한다.
안에 텍스트를 넣을 거니까, type="text"해주고,

안에 미리 작성할 말은 placeholder 안에 써주기

2. 그리고 옆에 버튼을 만든다.
Log In

3. div태그로 위의 것들 묶어주고, id="login-form"을 해준다.
둘을 묶은 다음, 저 id를 통해 JS에서 원하는 태그들을 쉽게 찾기 위해 작성.

input 안에 뭔가를 작성하고 로그인 버튼을 누르면 저장해야 되니까
자바스크립트로 그 기능 구현하기
그냥 html 태그를 가져올 수 없으니까 변수 안에 넣고 거기서 텍스트 받기

 

 

 

 

[Javascript]
1. document 안에서 찾기. 
id="login-form"인 곳에서 input요소를 loginInput 안에 넣어주기

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

**querySelector 로 id태그를 쓸때는 #를 써야한다. 하지만 getElementById 로 id태그를 쓸땐 #를 안써도 된다.
**console.dir() 불러온 함수의 내부(엘리먼트)를 자세하게 보여준다.

2. 버튼을 클릭하면, 내가 작성한 값을 콘솔에 보여주는 기능

loginButton.addEventListener("click, onLoginBtnClick);

3. 함수 만들기

function onLoginBtnClick(){
console.log(loginInput.value);
}

input의 내용을 가져오려면 value라는 property를 찾아봐야 됨.

4. 클릭에 대한 작동시키기

dir을 통해서 loginInput의 내부를 보여준다.

console.dir(loginInput) ->console.log(loginInput.value)

클릭했을 때 함수를 쓰고 loginInput에 대한 value값을 얻는다.

value값이란 input창에 aaa를 적으면 aaa라는 값이 나오는 것이다.

console.log("hello", loginInput.value)

hello loginInput.value 값을 얻는다.

->단, hello를 한후 값을 입력하지 않으면 아무것도 뜨지 않는다.

-> if else를 통해 해결해보자

 

console.log("hello",loginInput.value)를

const value = loginInput.value로 변수에 할당 해준다.

+ if 문을 통해서 value 값이 없을 때 다음과 같이 행동하도록 한다.

4. 미입력 안내, 글자수 제한
[방법 1. if else 문] -> if else 문은 선호하는 방식이 아니므로 다른 방식을 사용한다.

문자 미입력시 please write your name 을 보여주고, 입력시 글자수 제한(15자)을 두려고 한다.

그렇다면 string의 길이를 어떻게 알 수 있을까?

-> username.length를 통해서 string의 길이를 구한다. 

-> 'username의 길이가 15보다 길다면'이라는 조건 설정은 > 15를 통해서 해준다.

 

[방법 2. html 활용]

html input 창에 required maxlength="15"를 적는다. 

if else 문을 없애고 username에 대한 값을 console.log에 넣는다.

(아직 username을 받는다는 걸 확인 하기 위해)

 

현재 필드값을 입력하지 않으면 요청이 들어오고 문자는 15자 이상을 쓸 수 없게 된다. 

입력을 하고 버튼을 누르면 새로고침이 실행되고 값이 사라진다.

 

5. 클릭 없이 제출 가능하게 하기

html 에서 button을 없애고,

input type=submit인 value 값에 login을 넣는다

**html요소에 submit을 넣었기 때문에 더이상 addEventListner가 필요하지 않다.

입력 후에 클릭이 아닌 엔터를 눌러도 form은 submit이 되기 때문

click이 필요 없이 form을 submit 하는 것이 중요하다.

->브라우저가 새로고침 하지 않고 user정보를 저장하도록 하고싶은 것

 

*반드시 form안에 input을 넣어야함

*규칙 form안에 input을 쓰고 엔터나 submit을 누르면 자동으로 제출됨.

 

그러나, 현재 form이 submit 될 때마다 새로고침이 되기 때문에 원하는 형태가 아니다. 

-> form이 submit 되는걸 막아줄 것임

 

6. 새로고침 없이 form을 submit 하도록 설정하기

form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. 

브라우저가 기본 동작을 실행하지 못하도록 막기 -> 'preventDefault()' 사용

function onLoginSubmit(event){
event.preventDefault();

이 preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다.

첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.
JS는(기본적으로) argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다. 

ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음

 

아래는 submit 이벤트가 발생한다면, onLoginSubmit 함수를 실행시킨다는 의미이다.

JS는 onLoginSubmit함수 호출시 인자를 담아서 호출한다. 해당 인자는 event object를 담은 정보들이다.

console.log(event);
}
loginForm.addEventListener("submit", onLoginSubmit);

 

 

 

[정리]

 

1. addEventListener 안에 있는 함수는 직접 실행하지 않는다. 
브라우저가 실행시켜주고, 브라우저에서 해당 이벤트에 대한 정보인 object를 가지게 된다.

2. 브라우저는 실행만 시켜주는것이 아니라 event에 대한 정보도 담아준다.
addEventListener의 함수에서 object에 대한 자리만 할당해주면 발생시킨 정보에 대한 object들을 볼 수 있다.
이때 해당 이벤트가 가진 기본 Default값은 preventDefault를 이용하여 막을 수 있다.