반응형
- _01_모듈화
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="_main.js" type="module"></script>
<!--자바스크립트를 사용하겠다. 선언하는 것 -->
</head>
<body>
</body>
</html>
- _main.js
import { ControllerMain } from "./_controllerMain.js";
ControllerMain.start();
- _memberDAO.js
export let MemberDAO = {
//export 연동하는것
memberList : [],
printMemberList(){
console.log("------[전체멤버]------");
for(let i = 0; i < this.memberList.length; i++){
console.log(this.memberList[i]);
}
},
insertMemberList(member){
this.memberList.push(member);
},
deleteMemberList(number){
for(let i = 0; i < this.memberList.length; i++){
if(this.memberList[i].number == number){
this.memberList.splice(i , 1);
break;
}
}
},
updateMemberList(number, changedName){
for(let i = 0; i < this.memberList.length; i++){
if(this.memberList[i].number == number){
this.memberList[i].name = changedName;
break;
}
}
},
selectMemberList(number){
console.log("------[선택멤버]------");
for(let i = 0; i < this.memberList.length; i++){
if(this.memberList[i].number == number){
console.log(this.memberList[i]);
break;
}
}
}
};
- _controllerMain.js
import { MemberDAO } from "./_memberDAO.js";
export let ControllerMain = {
start(){
let member1 = {number : 1001, name : "김철수",};
let member2 = {number : 1002, name : "이만수",};
let member3 = {number : 1003, name : "조영수",};
MemberDAO.insertMemberList(member1);
MemberDAO.insertMemberList(member2);
MemberDAO.insertMemberList(member3);
MemberDAO.printMemberList();
MemberDAO.deleteMemberList(1002);
MemberDAO.printMemberList();
MemberDAO.updateMemberList(1001, "홍길동");
MemberDAO.printMemberList();
MemberDAO.selectMemberList(1003);
}
};
- _02_모둘화와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></body></html>
반응형
'코딩 > 1-JavaScript' 카테고리의 다른 글
| 01_스네이크 ( 1 ~ 3 ) (1) | 2025.06.10 |
|---|---|
| 03_클래스버전_전체스태틱 - _01_member (2) | 2025.06.09 |
| D10_dom_SPA_암기 => 01_json버전 => _00_basic => _01_json과함수, _02_json과Controller (0) | 2025.06.09 |
| 05_달력1단계 ~ 05_달력2단계 (0) | 2025.06.05 |
| 04_숫자슬라이드게임1단계 ~ 04_숫자슬라이드게임3단계 (2) | 2025.06.05 |