바닐라 JS - 앱 만들기 input, prevent 1

 

Input - HTML

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

input의 유효성 검사를 작동시키기 위해서는 form 안에 있어야 함

입력을 하지 않고 버튼을 눌렀을 때

required maxlength로 html에서 값의 조건을 걸 수 있음

 

form 규칙

1. form 안에서 엔터를 누르고 input이 더 존재하지 않으면 자동으로 submit

2. form 안에 있는 버튼을 누르면 자동으로 submit

 

문제점: form이 submit을 하면 페이지가 새로고침 되면서 user 정보가 사라짐

 

 

* 매개변수(parameter)와 전달인자(argument)

매개변수는 함수의 정의부분에 나열되어 있는 변수들을 의미 (고유성)

전달인자는 함수를 호출할때 전달되는 실제 값을 의미 (변동성)

# parameter (매개변수)
# 함수의 정의 부분에 나열되어 있는 변수, 여기서는 plus 함수 정의시에 사용되는 a, b를 parameter(매개변수) 라고 한다.
def plus(a, b):
  return a + b

# argument (전달인자)
# 함수를 호출할때 전달 되는 실제 값, 여기서는 plus 라는 함수에 넣어주는 값 1, 2를 argument(전달인자)라고 한다.
result = plus(1, 2)

 

참고 - https://wayhome25.github.io/etc/2017/12/31/parameter-argument/

 

 

 

prevent

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

function onLoginSubmit(event) {
    event.preventDefault();
    console.log(event);  // event 대신 loginInput.value를 넣으면 input한 정보가 뜸
}

loginForm.addEventListener("submit", onLoginSubmit);

// js가 함수를 실행할 때 onLoginSubmit() 형태가 아닌 onLoginSubmit({event information}) 형태로 실행

 

위 코드를 실행할 때 확인할 수 있는 이벤트 object 정보 (함수 실행시 전달받은 argument에 저장된 정보)

 

preventDefault() : 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작을 막음

  예) form이 submit할 때 페이지를 새로고침을 하는 행위를 막음

 

console.dir(event)로 자세한 정보 확인