Array 객체를 활용하여 여행 준비물 프로그램을 만들어보겠습니다.
여행 준비물 프로그램
프로그래밍 과정
1단계 화면상에 입력 필드 만들기
2단계 배열을 만들어 챙길 물건 배열에 추가하기
3단계 추가한 내용 화면에 표시하기
4단계 챙긴 물건은 목록에서 삭제하기
1단계 입력 필드(input) 만들기
<html 코드>
<css 코드 1>
<css 코드 2>
<html/css 결과값>
2단계 배열을 만들어 챙길 물건 배열에 추가하기
#1 텍스트 필드에 입력한 값이 배열에 추가 되도록 만들기
1) 배열 만들기
2) 추가버튼 활성화 하기 위해 이벤트 연결하기
addBtn을 클릭하면 addList 함수가 실행되게 만들었으니
addList 함수를 만들어 보겠습니다.
3) addList에 텍스트 필드에 입력한 값이 배열에 추가 되게 하는 함수 만들기
텍스트 필드의 값을 가져오는 변수 item을 만들었습니다.
4) if문을 사용하여 null 값이 아닌 값만 가져오기
push() 함수를 사용하여 입력 값이 배열 맨 끝에 추가되도록 합니다.
#1 1~4) 결과값
콘솔 창에 itemList를 입력하자 배열 창이 떴습니다.
텍스트 필드에 준비를을 입력하고 추가 버튼을 누르자
itemList 배열에 하나씩 추가가 되었습니다.
5) 텍스트 필드에 남아있는 값을 자동으로 지우고 커서 활성화 기능 추가하기
텍스트 필드 값을 입력하고 추가 버튼을 누르면 필드의 값을 초기화 하고,
focus() 함수를 적용하여 텍스트 필드에 커서를 활성화 시켰습니다.
3단계 추가한 내용 화면에 표시하기
텍스트 필드에 입력한 값이 itemList 배열에 추가를 했지만
화면상에는 아직 나타나지 않고 콘솔창에서만 확인할 수 있습니다.
이제부터 배열에 추가한 내용을 화면에 표시해 보겠습니다.
#1 ul / li 목록 태그를 이용하여 화면상에 표시하기
변수 list를 만들어 ul / li 태그로 itemList 배열을 감싸준 뒤
#itemList 태그에 list를 추가해줍니다.
showList 함수를 addList 함수에 넣어주면 화면상에 나타나게 됩니다.
#1 결과값
4단계 챙긴 물건은 목록에서 삭제하기
#1 삭제버튼을 만들고 목록 삭제하기
1) 삭제 버튼 만들기
기존 showList 함수 안에 있는 li태그에
<span class = 'close' id =" + i + ">X</span>을 넣어
삭제 버튼에 id 값을 인덱스 값 i로 지정하고 저장합니다.
#1 1) 결과값
2) 삭제 버튼 누를 시 삭제하는 함수 만들기
querySelectorAll로 모든 close 함수를 가져온 뒤
버튼을 클릭 시 removeList 함수가 작동되는 for문을 만듭니다.
3) removeList 함수 만들기
this 키워드를 사용하여 이벤트가 발생한 요소를 알아내고
getAttribute함수로 id 속성값을 불러옵니다.
splice() 함수를 이용하여 itemList배열에서 '1'인 항목은 지우고
showList() 함수를 다시 실행하면 완성입니다.
<총 js 코드>
< 총 결과값 >
꽤 복잡해서 순서대로 하나하나 정리 해 봤습니다!
다시 복습 해봐야겠어요 :)