1. HTML
<!DOCTYPE html>
<html lang="ko">
<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="./index.css" />
<script src="./app.js" defer></script>
<title>Momentum</title>
</head>
<body>
<div id="login-form">
<input type="text" placeholder="what is your name?" />
<button>Log In</button>
</div>
</body>
</html>2. JS
// querySelector
const $loginInput = document.querySelector('#login-form input');
const $loginButton = document.querySelector('#login-form button');
// 변수
let name = '';
// function
function handleChangeLoginInput(e) {
userName = e.target.value;
}
function handleLoginBtnClick() {
console.log(userName);
}
// addEventListener
$loginInput.addEventListener('input', handleChangeLoginInput);
$loginButton.addEventListener('click', handleLoginBtnClick);vanillaJS는 크게 3가지의 키워드를 숙지하고 그 안에서 쓰이는 메서드를 잘 활용하면 된다. (MDN 참고)
1. element를 찾아라 - document.querySelector();
2. event를 Listen 해라 - element.addEventListener( type, listener );
3. 그 event에 반응하는 Listener 함수를 작성한다 - function() { ... }
'NomadCoders > momentum-chromeApp(vanillaJS)' 카테고리의 다른 글
| vanillaJS MDN 활용하기 (0) | 2022.06.07 |
|---|---|
| [#02.4] Boolean (0) | 2022.06.04 |
| [#02.3] Variables (const and let) (0) | 2022.06.04 |
| [#02] Your First JS Project (0) | 2022.06.04 |
| [#01] Why JS? (0) | 2022.06.03 |