1) document.querySelector()
- 괄호 안에 객체의 id, name, 형식 등의 정보를 넣어 HTML 객체를 JS파일 내에서 정의
<!-- login.ejs -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로그인</title>
<style>
ul {list-style:none;}
</style>
<script src="/js/home/login.js"></script> <!--app.js에서 use 미들웨어를 통해 public 폴더 내의 js/home/login.js로 접근할 수 있게 됨-->
</head>
<body>
<form id="login">
<ul>
<li>
<label for="id">아이디</label>
<input type="text" id="id">
<!-- id가 "id"인 객체 -->
</li>
<li>
<label for="pw">비밀번호</label>
<input type="password" id="pw">
<!-- id가 "pw"인 객체 -->
</li>
<input type="submit" value="로그인" id="loginBtn">
<!-- id가 "loginBtn"인 객체 -->
<button>회원가입</button>
</ul>
</form>
</body>
</html>// login.js
"use strict";
const id = document.querySelector("#id"),
pw = document.querySelector("#pw"),
loginBtn = document.querySelector("#loginBtn"); // 각각 HTML에서 id가 "id", "pw", "loginBtn"인 객체를 받아옴
2) HTML문서에서 JS파일을 연결할 때, id가 정의되기 전 JS 파일이 id를 받아들여서 JS파일에서 객체가 null로 정의되는 것을 방지
-script에서 JS파일 연결할 때 defer 명령어 추가
<script src="/js/home/login.js" defer></script>
<!-- defer를 사용하여 login.js의 실행 순서를 조정(id객체를 받기 전에 js파일이 실행되는 것 방지) -->
3) JS파일에서 HTML의 객체를 받은 것을 이용해 기능 구현
-로그인 버튼을 클릭했을 때 id에 입력된 값과 pw에 입력된 값 console에 출력하기
// login.js
loginBtn.addEventListener("click", login);
function login() {
const req = {
id: id.value,
pw: pw.value,
};
console.log(req);
}
4) 결과
'back-end > Javascript' 카테고리의 다른 글
| [Node.js] 서버에서 받은 데이터에 따라 프런트 동작 처리하기 (0) | 2022.11.30 |
|---|---|
| [Node.js] fetch를 이용해 프런트의 정보를 서버로 보내기 (0) | 2022.11.30 |
| [Node.js] nodemon을 이용해 서버 띄우기 (0) | 2022.11.28 |
| [Node.js] 프런트를 위한 자바스크립트 파일 만들기 (0) | 2022.11.28 |
| [Node.js] app.listen 모듈화 (0) | 2022.11.22 |