라라리라
2023.10.20 / Step 7 [DOM_member] - 코딩 73 일차 본문
index.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">
<title>Document</title>
<script src="main.js" type="module"></script>
</head>
<body>
<div id="header"></div>
<div id="content">
</div>
<div id="footer"></div>
</body>
</html>
sampleHeader.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">
<title>Document</title>
<style>
#header-header {
margin: 0 auto;
border: 1px solid black;
}
</style>
</head>
<body>
<!--
button 기능
(1) 페이지 이동 : page
(2) 페이지 이동 + 데이터 처리 : pro(=process)
(3) 이벤트처리 : 이벤트명(clic, input, blur, ...)
-->
<table id="header-header">
<tr>
<td><button id="button-memberJoinPage">회원가입</button></td>
<td><button id="button-memberLoginPage">로그인</button></td>
</tr>
</table>
<script>
let buttonMemberJoinPageClick = (event) => {
}
let buttonMemberLoginPageClick = (event) => {
}
//--------------------------------------------------------------
let $buttonMemberJoinPage = document.querySelector("#button-memberJoinPage");
let $buttonMemberLoginPage = document.querySelector("#button-memberLoginPage");
$buttonMemberJoinPage.addEventListener("click", buttonMemberJoinPageClick);
$buttonMemberLoginPage.addEventListener("click", buttonMemberLoginPageClick);
</script>
</body>
</html>
sampleMemberLogin.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">
<title>Document</title>
<style>
#content-memberLogin {
margin: 0 auto;
border: 1px solid black;
}
</style>
</head>
<body>
<table id="content-memberLogin">
<tr>
<td>아이디</td>
<td><input type="text" id="input-memberId"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="text" id="input-memberPw"></td>
</tr>
</table>
</body>
</html>
controllerMain.js
import { PageHeader } from "./pageHeader.js";
import { PageIndex } from "./pageIndex.js";
import { PageMemberLogin } from "./pageMemberLogin.js";
export class ControllerMain {
// 싱글톤 패턴
static instacne = new ControllerMain(); // 자기자신 선언
static getInstance() { return this.instacne; } //getInstance == 바로 앞전에 선언한 자기자신을 리턴
start() {
this.pageList = {}; // 자신에게 페이지리스트라는 빈 {} 변수를 만듬
this.setPageList(); // 자신안의 함수 setPageList를 호출
this.changePage("page-header"); //자신안의 함수 chagePage("page-header")를 호출(``)
this.changePage("page-index"); // 자신안의 함수 chagePage("page-index")를 호출
}
setPageList() { //setPageList = start에서 만든 빈 변수에 배열의 형태로 값을 입력
this.pageList["page-header"] = new PageHeader(); //
this.pageList["page-index"] = new PageIndex();
this.pageList["page-memberLogin"] = new PageMemberLogin();
}
changePage(pageName) {
// new PageIndex().execute();
this.pageList[pageName].execute();
}
}
main.js
import { ControllerMain } from "./controllerMain.js";
import { JsonMember } from "./jsonMember.js";
// 시작 페이지
ControllerMain.getInstance().start();
JsonMember.getInstance().start();
jsonMember.js
export class JsonMember {
// 싱글톤 패턴
static instance = new JsonMember();
static getInstance() { return this.instance; }
// 기본 초기값 셋팅
start() {
this.memberList = null;
this.setSampleData();
}
setSampleData() {
this.memberList = [
{
"memberId": "qwer1234",
"memberPw": "Qwer1234!"
},
{
"memberId": "abcd1234",
"memberPw": "Awer1234!"
},
{
"memberId": "asdf1234",
"memberPw": "Asdf1234!"
},
];
}
memberLogin(memberId, memberPw) {
let check = false;
for(let i=0; i<this.memberList.length; i++) {
if(this.memberList[i].memberId == memberId
&& this.memberList[i].memberPw == memberPw) {
check = true;
break;
}
}
return check;
}
}
pageHeader.js
import { ControllerMain } from "./controllerMain.js";
export class PageHeader {
execute() {
let $header = document.querySelector("#header");
let tag = "";
tag +=
`
<style>
#header-header {
margin: 0 auto;
border: 1px solid black;
}
</style>
`;
tag +=
`
<table id="header-header">
<tr>
<td><button id="button-memberJoinPage">회원가입</button></td>
<td><button id="button-memberLoginPage">로그인</button></td>
</tr>
</table>
`;
$header.innerHTML = tag;
let $buttonMemberJoinPage = document.querySelector("#button-memberJoinPage");
let $buttonMemberLoginPage = document.querySelector("#button-memberLoginPage");
$buttonMemberJoinPage.addEventListener("click", this.buttonMemberJoinPageClick);
$buttonMemberLoginPage.addEventListener("click", this.buttonMemberLoginPageClick);
}
buttonMemberJoinPageClick = (event) => {
// ControllerMain.getInstance().changePage("page-memberJoin");
}
buttonMemberLoginPageClick = (event) => {
ControllerMain.getInstance().changePage("page-memberLogin");
}
}
pageIndex.js
export class PageIndex {
execute() {
let $content =
document.querySelector("#content");
let tag = "";
tag +=
`
<h1>이곳은 main페이지 입니다.</h1>
`;
$content.innerHTML = tag;
}
}
pageMemberLogin.js
import { JsonMember } from "./jsonMember.js";
export class PageMemberLogin {
$inputMemberId = null;
$inputMemberPw = null;
$buttonMemberLoginPro = null;
execute() {
let $content = document.querySelector("#content");
let tag = "";
tag +=
`
<style>
#content-memberLogin {
margin: 0 auto;
border: 1px solid black;
}
</style>
`;
tag +=
`
<table id="content-memberLogin">
<tr>
<td>아이디</td>
<td><input type="text" id="input-memberId"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="text" id="input-memberPw"></td>
</tr>
<tr>
<td colspan="2">
<button id="button-memberLoginPro">로그인</button>
</td>
</tr>
</table>
`;
$content.innerHTML = tag;
this.$inputMemberId = document.querySelector("#input-memberId");
this.$inputMemberPw = document.querySelector("#input-memberPw");
this.$buttonMemberLoginPro = document.querySelector("#button-memberLoginPro");
this.$buttonMemberLoginPro.addEventListener("click", this.buttonMemberLoginProClick);
}
buttonMemberLoginProClick = (event) => {
let memberId = this.$inputMemberId.value;
let memberPw = this.$inputMemberPw.value;
let check = JsonMember.getInstance().memberLogin(memberId, memberPw);
if(check) {
alert("로그인 성공");
} else {
alert("로그인 실패");
}
}
}
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.10.24 / Step 7 [DOM_Board_reply] - 코딩 75 일차 (0) | 2023.10.24 |
|---|---|
| 2023.10.23 / Step 7 [DOM_Board] - 코딩 74 일차 (0) | 2023.10.23 |
| 2023.10.19 / Step 7 [DOM_member] - 코딩 72 일차 (0) | 2023.10.19 |
| 2023.10.18 / Step 6 [DOM_경마게임] - 코딩 71 일차 (0) | 2023.10.18 |
| 2023.10.17 / Step 6 [DOM_테트리스] - 코딩 70 일차 (0) | 2023.10.17 |