Input Value
모든 것은 Html에서 시작되어야 한다.
Html에서 작성하고 자바스크립트로 기능을 구현하는 것이 맞다.
✅ 로그인 시스템
// Html을 먼저 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Momentum</title>
</head>
<body>
<div id="login-form">
<input type="text" placeholder="what is your name?" />
<button>Log in</button>
<script src="app.js"></script>
</div>
</body>
</html>
1️⃣ 사용자가 이름을 작성할 수 있도록 input 태그를 작성한다.
type="text", 사용자에게 도움을 주기 위해 placeholder를 달아 준다.
2️⃣ 로그인 값을 전달할 버튼을 만든다.
3️⃣ 이를 자바스크립트에서 찾아주기 위해, id값을 넣은 div태그로 묶는다.
이 값을 자바스크립트로 불러와 기능을 구현한다.
// JS
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function onLoginBtnClick() {
const username = loginInput.value;
if (username === "") alert("Please write your name");
else if (username.length > 15) alert("Your name is too long");
else if (username === loginInput.value) alert("Good");
loginButton.addEventListener("click", onLoginBtnClick);
1️⃣ 값을 querySelector로 가져오기 위해 loginInput, loginButton를 만든다.
2️⃣ button을 눌렀을 때, 이벤트를 발생시키기 위해 onLoginBtnClick라는 함수로 지정해준다.
그 후 addEventListener로 click을 감지하도록 한다.
3️⃣ html에서 input 값을 text로 지정했다.
user가 입력하는 텍스트가 곧 loginInput.value이며, 이를 username으로 지정해준다.
✅ 결과화면
Submit
로그인 버튼을 눌렀을 때, 브라우저의 정보를 서버로 넘겨주면서 새로고침이 일어난다.
이 기능인 submit은 정보를 자동으로 넘기고 새로고침을 하는 특성이 있다.
쉽게 말하면 브라우저의 패시브인 기본 동작이다.
위에서 다뤘던 html 코드를 자체 기능을 이용하여 몇 가지 변동을 주었다.
// Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Momentum</title>
</head>
<body>
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="what is your name?"
/>
<input type="submit" value="Log in"></input>
</form>
<script src="app.js"></script>
</body>
</html>
먼저 html을 JS로 가져와 기능을 이용하기 위해,
폼의 div 태그를 form으로 바꿨고, 버튼은 submit 타입으로 바꿨다.
추가로, 이름 입력칸에 기본 기능을 넣어주었다.
필수 입력인 required 속성, 입력 최대 글자 수를 15자로 제한했다.
// JS
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit() {
const username = loginInput.value;
console.log(username);
}
loginForm.addEventListener("submit", onLoginSubmit);
JS를 다음과 같이 코딩 시, 로그인 버튼을 누르면 정상적으로 반응한다.
콘솔창에 잠깐 username(form)이 뜨고 사라진 후, 새로고침이 된다.
✅ 다음 챕터로 넘어가기 전에 정리하자.
1. 일단 html을 코딩하여 내가 원하는대로 구현한다.
2. JS에서 Html의 원하는 기능을 querySelector로 불러온다.
3. 버튼을 눌렀을 때, 이벤트를 감지하는 함수를 만든다.
4. 원하는 기능을 실행해줄 함수를 만든다.
preventDefault
때로는 브라우저의 기본 기능을 막고 싶을 때가 있다.
위에서 다룬 코드에서 새로고침이 자동으로 일어나지 않도록 막으려한다.
바로 preventDefault을 이용해서 말이다.
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(event) {
event.preventDefault();
console.log(loginInput.value);
}
loginForm.addEventListener("submit", onLoginSubmit);
다음과 같이 preventDefault을 기능을 사용하면 로그인 버튼을 눌러도 새로고침이 되지 않는다.
onLoginSubmit에 넣어준 event object는 preventDefault 함수를 기본적으로 가지고 있다.
submit 이벤트가 발생할 때, JS는 onLoginSubmit 함수를 호출하고 있고,
이때 event object를 argument로 주고 있고 preventDefault를 사용함으로써 새로고침을 막는 원리다.
