-
안녕하세요! 오늘은 JavaScript를 사용하여 Map과 List 클래스를 직접 구현하고, 이를 활용한 간단한 웹 애플리케이션을 만들어보겠습니다. 함께 살펴보시죠!
1. Map 클래스 구현
먼저 Map 클래스를 만들어 보겠습니다.
이 클래스는 키-값 쌍을 저장하는 기능을 제공합니다.
function Map() {
this.elements = {};
this.length = 0;
}
Map.prototype.put = function(key, value) {
this.elements[key] = value;
this.length = Object.keys(this.elements).length;
};
Map.prototype.get = function(key) {
return this.elements[key];
};
Map.prototype.update = function(key, value) {
this.elements[key] = value;
};
Map.prototype.delete = function(key) {
delete this.elements[key];
this.length = Object.keys(this.elements).length;
};이 클래스를 통해 데이터를 쉽게 추가, 수정, 삭제할 수 있습니다.
2. List 클래스 구현
이제 List 클래스를 구현해보겠습니다.
이 클래스는 순서가 있는 데이터를 관리하는 데 사용됩니다.
function List() {
this.elements = {};
this.idx = 0;
this.length = 0;
}
List.prototype.add = function(element) {
this.length++;
this.elements[this.idx++] = element;
};
List.prototype.get = function(idx) {
return this.elements[idx];
};
List.prototype.init = function() {
this.elements = {};
this.idx = 0;
this.length = 0;
};List 클래스를 활용하면 데이터를 순서대로 저장하고 관리할 수 있습니다.
3. 간단한 웹 애플리케이션 만들기
이제 두 클래스를 활용해 과일 목록을 관리하는 웹 애플리케이션을 만들어보겠습니다.
사용자가 과일 이름과 정보를 입력하면 목록에 추가되고, 이를 화면에 표시하는 기능을 구현해 볼게요.
HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Map과 List 활용 예제</title>
<script>
// Map과 List 클래스 정의 (생략)
// ...
let fruitList = new List();
let fruitInfoMap = new Map();
function addFruit() {
const fruitName = document.getElementById("fruitName").value;
const fruitInfo = document.getElementById("fruitInfo").value;
if (fruitName && fruitInfo) {
fruitList.add(fruitName);
fruitInfoMap.put(fruitName, fruitInfo);
displayFruits();
} else {
alert("과일 이름과 정보를 입력하세요.");
}
}
function displayFruits() {
const listElement = document.getElementById("fruitList");
listElement.innerHTML = "";
for (let i = 0; i < fruitList.length; i++) {
const fruit = fruitList.get(i);
const info = fruitInfoMap.get(fruit);
const listItem = document.createElement("li");
listItem.textContent = `${fruit}: ${info}`;
listElement.appendChild(listItem);
}
}
</script>
</head>
<body>
<h1>과일 목록 관리</h1>
<input type="text" id="fruitName" placeholder="과일 이름">
<input type="text" id="fruitInfo" placeholder="과일 정보">
<button onclick="addFruit()">추가하기</button>
<h2>현재 과일 목록</h2>
<ul id="fruitList"></ul>
</body>
</html>- 입력 필드: 사용자가 과일 이름과 정보를 입력할 수 있는 필드입니다.
- 버튼: "추가하기" 버튼을 클릭하면 입력된 과일이 목록에 추가됩니다.
- 목록 출력: 현재 과일 목록이 아래에 자동으로 나타납니다.
오늘은 JavaScript를 사용하여 Map과 List 클래스를 직접 구현하고, 이를 활용한 예제를 알아보았습니다.
그럼 오늘도 즐거운 하루 되시길 바라겠습니다.
'프로그래밍 > Front-end' 카테고리의 다른 글
| 자바스크립트에서 빈 값 체크와 기본값 설정하는 방법 (0) | 2024.11.26 |
|---|---|
| 자바스크립트로 숫자만 입력받는 방법 (0) | 2024.11.21 |
| 자바스크립트로 입력값 검증하는 방법: 아이디, 비밀번호, 이메일 체크하기 (0) | 2024.11.14 |
| 제이쿼리를 이용한 필수 입력 체크 (0) | 2024.10.31 |
| 자바스크립트로 HTML 색상 코드 다루기 (0) | 2024.10.30 |
| 자바스크립트 JSP 페이지 include 방법에 대하여! (0) | 2024.09.27 |
| 자바스크립트 EL태그와 JSTL태그의 정의와 사용법에 대하여! (0) | 2024.09.27 |
| 자바스크립트의 동기(synchronous)와 비동기(asynchronous) 처리에 대하여! (0) | 2024.09.27 |
