nomard crome app 2

Login

form

html에 이렇게 적으면 간단한 로그인 폼을 만들 수 있다.

<div id="login-form">
    <input type="text" placeholder="What is your name?" />
    <button>Log In</button>
</div>

로그인 폼을 JS로

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

또는

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

---

input

<input value = "someting" type="text" placeholder="What is your name?" />

처럼 value를 미리 정해줄 수도 있다.

console.dir(loginInput)

을 통해서 placeholder에 값을 입력했을 때 어떠한 프로퍼티 key가 그 value를 가지고 있는지 확인할 수 있고 그건 value였다.

---

evnet

function handleLoginClick() {
    console.log(loginInput.value);
}
loginButton.addEventListener("click", handleLoginClick);

loginInput에 값을 입력했을 때 console.log로 출력하는 방법

function handleLoginClick() {
    console.log("hello", loginInput.value);
}
loginButton.addEventListener("click", handleLoginClick);

이름을 입력하면 hello DK의 형태로 출력되지만 입력하지 않았을 때 hello만 나오기 때문에 loginInput.value에 값이 없을 때 출력되지 않도록 해야한다.

---

유효성 검사

username 유효성 검사

1. 비어있으면 안됨
2. 짧거나 길어도 안됨

function handleLoginClick() {
    const username = loginInput.value;
    if(username === "") {
        alert("Please write your name.");
    }   else if(username.length > 15) {
        alert("Your name is too long.");
    }
}

이름이 없거나 15를 초과한 경우 경고 메세지를 띄우는 코드

---

하지만 이것들은 html에서 이미 지원하고 있기 때문에 더 간단하게 구성할 수 있다.

<input 
    required 
    maxlength="15" 
    type="text" 
    placeholder="What is your name?" 
/>

requierd는 반드시 입력을 해야한다는 뜻

---

input을 사용하면서 input의 유효성 검사를 작동시키기 위해서는 div가 아닌 form 안에 있어야 한다.

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

따라서 JS는

function handleLoginClick() {
    const username = loginInput.value;
    console.log(username);
}

loginButton.addEventListener("click", handleLoginClick);

submit

---

하지만 html과 JS를 이렇게 바꾸면 login을 클릭하는 순간 웹사이트가 재시작된다. form이 submit때문이다.

input 안에 있는 button을 누르거나 type이 submit인 input

<input type="submit" value="Log In"/>

을 클릭하면 form이 submit된다.

더 이상 클릭하는 것에 신경 쓸 필요가 없다. 엔터만 눌러도 submit이 되기 때문에. form안에서 엔터를 누르거나 또는 form안에 있는 버튼을 눌렀을 때 input이 더 존재하지 않는다면 자동으로 submit 된다는 규칙이 있다.

이제 클릭말고 submit에 신경을 써야하고 브라우저가 새로고침을 하지 않고 user 정보를 저장하도록 해아한다.

---

submit event가 발생했다는 것을 파악해보자

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

function onSubmit() {
    const username = loginInput.value;
    console.log(username);
}

loginForm.addEventListener("submit", onSubmit);

이 코드로 submit event를 감지할 수 있다. 하지만 새로고침은 못 막고 있다. 새로고침은 form submit의 기본 동작이기 때문에 JS에서 막아야한다.

loginForm.addEventListener("submit", onSubmit);

의 두 번째 인수 onSubmit은 함수이고 호출이 되어 실행이 되지만 브라우저 자체에서 새로고침을 하기 때문에 짧게 보여주고 지나간다.

또한 onSubmit은 정보를 주고 있는데 함수 안에

anyThing.preventDefault();

라는 코드로 확인이 가능하다.

function onSubmit(anyThing) {
    anyThing.preventDefault();
    console.log(anyThing);
}

onSubmit이 하나의 argument를 받도록 하고 그것 JS에 넘겨주고 있다.

---

모든 EvnetListner function의 첫번째 arguemnt는 항상 지금 막 벌어진 일들에 대한 정보가 있다.

preventDefault() 함수는 event의 기본 행동이 발생되지 않도록 막는 함수다.(기본행동은 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작)

따라서

function onSubmit(event) {
    event.preventDefault();
    console.log(loginInput.value);
}

따라서 이 코드로 새로고침을 막고 loginInput.value를 띄울 수 있다.

---