Map 컬렉션의 활용

다음과 같은 문단이 있다고 가정해 봅시다:

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

각 문단을 클릭했을 때, 해당 문단의 끝에 문단 목록에서의 순서 번호가 기록되도록 해봅시다. Map을 사용하여 문제를 해결해 보겠습니다.

시작해 봅시다. 먼저 문단들을 변수에 저장합니다:

let elems = document.querySelectorAll('p');

새로운 Map 컬렉션을 생성합니다:

let map = new Map;

키(key)는 문단, 값(value)은 순서 번호가 되도록 우리의 컬렉션을 채웁니다:

let i = 1;
for (let elem of elems) {
	map.set(elem, i++);
}

반복문으로 문단들을 순회하며 클릭 이벤트 핸들러를 등록합니다:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		
	});
}

이제 클릭 시, 문단 텍스트의 끝에 순서 번호를 추가해 봅시다. 이 번호는 우리의 컬렉션에서 가져옵니다:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.textContent += map.get(this);
	});
}

입력 필드들이 주어졌습니다. 반복문으로 이 입력 필드들을 순회하며 Map 컬렉션을 생성하세요. 컬렉션에서 키(key)는 입력 필드, 값(value)은 페이지에서의 순서 번호가 되어야 합니다. 어떤 입력 필드를 클릭하더라도 해당 입력 필드의 value에 순서 번호가 기록되도록 만드세요.

입력 필드들이 주어졌습니다. 각 입력 필드에 숫자를 입력할 수 있습니다. Enter 키를 누르면 입력 필드가 입력된 숫자를 기억하도록 합니다. 입력 필드에서 포커스를 잃었을 때(focus out), 해당 입력 필드에 이전에 입력된 모든 숫자의 배열이 콘솔에 출력되도록 하세요.