Momentum clone coding

1. Required

HTML

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

• required는 필수 입력 값이라는 뜻이다.
• input에 아무것도 입력하지 않으면 이 입력란을 작성해달라는 메시지가 뜬다.

2. maxlength

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

• maxlength는 입력값의 최대길이.

3. form

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

• input의 유효성 검사를 작동시키기 위해 form 안에 input이 위치해야함.
• form 안에 Input을 위치시키면 클릭이 아닌 엔터를 눌러도 submit한다.
• form 을 submit 하면 페이지를 새로고침 하고 이는 브라우저에 내장된 기능이다.

4. preventDefault()

JS

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


function onLoginSubmit(tomato) {
    // console.dir(loginInput);
    // console.log("click!!!!!");
    // const username = loginInput.value;
    tomato.preventDefault();
    console.log(tomato);
}

loginForm.addEventListener("submit", onLoginSubmit)

// 보통은 tomato라고 적지않고 event 또는 e 로 
// 인자를 전달한다. 위 예시에선 어떤 키워드를 입력해도
// 가능하다는것을 보여주기 위한 극단적인 예시이다.

• onLoginSubmit 함수의 매개변수로 tomato를 넣었다.
• tomato.preventDefault()는 새로고침을 막는다
• console.log(tomato) 해보면 콘솔창에 여러 정보들을 출력한다.
• event가 발생할때 브라우저가 function을 호출하게 되는데, 첫번째 인자로써 추가적인 정보를 가지고 호출하게 하는것
• 함수의 매개변수로써 공간(?)만 제공하면 방금 일어난 event에 대한 정보를 가진 argument를 JS가 자동으로 채워준다(위 코드에서는 console을 찍었으니 콘솔에 출력)

HTML에서 버튼(input type=submit)을 누른결과:

JS

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


function onLoginSubmit(e) {
    // console.dir(loginInput);
    // console.log("click!!!!!");
    // const username = loginInput.value;
    e.preventDefault();
    console.log(loginInput.value);
}

loginForm.addEventListener("submit", onLoginSubmit)

• 위와 같이 코드를 작성하고 브라우저의 input창에 값을 입력하고 submit 버튼을 누르면 사용자가 입력한 값이 console.log를 이용하여 콘솔에 찍히게 된다.

결과: