07-3. 여행 준비물 점검 프로그램 만들기
지금까지 Array 객체와 그 대표적인 함수들의 기능에 대해 알아보았다. 이제 이를 활용하여 여행 준비물 점검 프로그램을 만들어 보자.
1. 필요한 기능, 실행 순서 설정하기
준비물을 추가하고 지울 수 있는 프로그램 작성
2. 만드는 과정 미리 생각해 보기
- 배열 만들기: 준비물이 들어가 있는 배열을 만든다. (저장되어 있는 공간)
- 챙길 물건 배열에 추가하기: 원하는 위치에 추가하기 위해서 push() 함수를 사용한다.
- 추가한 내용 화면에 표시하기: for문을 이용해야 할 것이다.
- 챙긴 물건 배열에서 삭제하기: 특정 위치의 목록을 삭제하기 위해서 splice() 함수를 사용한다.
3. 입력 필드 만들기
<body>
<div id="wrapper">
<h2>여행 준비물 점검 목록</h2>
<form>
<input type="text" id="item" autofoucus="true">
<button type="button" id="add" class="addBtn">추가</button>
</form>
<div id="itemlist"></div>
</div>
</body>먼저 이런 식으로 필드를 채워준다. 이 때 id 이름을 기억해야 이를 추후 js에서 활용할 수 있다.
이후 css를 추가해 조금 더 보기 좋게 만들어 준다.
<link rel="stylesheet" href="css/input.css">
</head>미리 만들어진 input.css 파일을 연결하는 것이다. </head> 앞에 적어준다.
4. 항목 추가하기
이제 js 파일을 연결하고 소스를 작성해서 기능을 추가해야 한다.
var itemlist = [];
var addbtn = document.querySelector("#add");
addbtn.onclick = addList;우선 배열을 선언하고, addbtn이라는 변수에 document.querySelector("#add") 를 저장하였다.
그리고 onclick 시 addList가 시행되도록 하였다.
addList 함수는 다음과 같다.
function addList() {
var item = document.querySelector("#item").value;
if(item != null) {
itemlist.push(item);
document.querySelector("#item").value = null;
document.querySelector("#item").focus();
}
}우선 입력한 값 document.querySelector("#item").value 를 item 변수에 저장하고, 그게 null이 아니라면
1) itemlist 배열에 item값을 넣어주고 (push())
2) 해당 value를 null로 만들어 창에 작성한 값은 지워주고
3) focus함수를 이용해 해당 영역에 커서가 있도록 한다.
다음으로 이를 출력하는 printList 함수이다.
function printList(){
var list = "<ul>";
for(var i=0; i<itemList.length; i++){
list += "<li>"+ itemList[i] +"</li>";
}
list += "</ul>";
document.querySelector("#itemList").innerHTML = list;
}
<ul>
<li> itemlist[0] </li>
<li> itemlist[1] </li>
.....
</ul>
이 방식으로 출력해야 한다. 줄바꿈은 상관없으므로 list 변수에 for문을 이용해 위와 같이 저장한 후, document.querySelcetor("#itemList") = list로 출력해준다.
이제 삭제 버튼을 만들어야 한다.
우선 버튼을 만들기 위해서 다음과 같이 수정한다.
for(var i=0; i<itemList.length; i++){
list += "<li>"+ itemList[i] +"<span class='close' id=" + i + ">X</span></li>";
html 부분에 미리 만들어진 css 파일을 연결한다.
<link rel="stylesheet" href="css/input.css">
<link rel="stylesheet" href="css/list.css">
</head>
그리고 삭제 버튼을 모두 remove 변수에 배열로 저장하고, 이를 탐색하면서 click 이벤트가 발생할 경우 removeList 함수를 수행하도록 하였다.
var remove = document.querySelectorAll(".close");
for(var i=0; i<remove.length; i++){
remove[i].addEventListener("click", removeList);
}
this 예약어를 이용하면 이벤트가 발생한 그 지점의 id값을 return할 수 있다.
아까 X버튼을 정의하면서 그 부분의 id값을 i로 지정해두었으므로, id값은 삭제해야 하는 요소의 index를 뜻한다.
getAttrubute() 함수를 이용하면 id 값을 return받을 수 있다.
function removeList(){
var id = this.getAttribute("id");
}
그리고 해당 요소를 삭제하고 (splice() 함수 사용)
배열을 다시 출력해준다.
function removeList(){
var id = this.getAttribute("id");
itemList.splice(id, 1);
printList();
}
요소가 추가된 모습이다.
삭제를 수행하는 모습은 아래와 같다.
'스스로 공부하기 > Javascript' 카테고리의 다른 글
| [Javascript] 8장. 웹 문서를 다루는 방법, 문서 객체 모델 (DOM) (3) (0) | 2022.11.30 |
|---|---|
| [Javascript] 8장. 웹 문서를 다루는 방법, 문서 객체 모델 (DOM) (1, 2) (0) | 2022.11.30 |
| [Javascript] 7장. 배열을 쉽게 다루자! Array 객체 (1, 2) (0) | 2022.11.23 |
| [Javascript] 6장. 여러 자료를 한꺼번에 담는 객체 (0) | 2022.11.11 |