Do it : JS -7. Array 객체

Array 객체란?

-여러 개의 항목을 하나의 변수에 저장해야 할 때 사용

-내장객체

 

Array 객체로 배열 만들기

-인스턴스 만들기

var myArray = new Array();

-Array 객체의 인스턴스 만든 후 > myArray 변수에 저장

-( ) 빈 괄호를 사용 > 개수가 고정X > 많은 자료 저장 가능

-초깃값이 있는 배열 : 리터럴 사용해서 배열 |  Array객체 사용해서 만들기

 

배열에서 for문 사용하기

-여행 준비물 점검 목록 프로그램

-여러 준비물을 배열 유형으로 저장 후 > 준비물확인하기 위해서 - 배열 값을 전부 확인

  > for문 처음부터 끝요소까지 반복

-배열에 몇 개의 요소가 있는지 확인 : Array 객체에 length 속성 사용

-배열의 인덱스 : 0 ~ Array객체.length-1

 

---

Array 객체의 함수 

 

contact()함수 - 둘 이상의 배열 연결

-기존 배열에 다른 배열, 값을 합쳐 > 새로운 배열 만든다

-기존의 배열에는 영향주지 않는다.

-순서주의 : 앞에 쓴 것이 먼저 나온다.

 

join()함수 - 배열 요소를 연결

-배열요소를 연결해서 나열할 때 구분기호 지정 > ()안에 쓰면 된다, 안쓰면 기본 쉼표(,)

 

push()함수, unshift()함수 - 새로운 요소를 추가

-맨 끝에 요소 추가 : push()

-맨 앞에 요소 추가 : unshift()

-원래 배열이 바뀐다 = 추가하면 늘어난다

 

pop()함수, shift()함수 - 요소 추출

-챙긴 여행 준비물은 목록에서 삭제 = 목록에서 요소 추출

-맨 뒤 요소 추출 : pop()

-맨 앞 요소 추출 : shift()

 

splice()함수 - 원하는 위치의 요소 삭제, 추가

인수가 1개

-괄호 안에 인수는 그 배열의 인덱스 값

-인수가 가리키는 인덱스 ~ 배열의 끝요소까지 삭제

-splice()함수는 삭제한 요소로 구성된 배열 반환

-원래 배열에는 삭제 결과가 반영된 배열 반환

 

인수가 2개

-첫번째 인수 : 인덱스 값

-두번째 인수 : 삭제할 개수

 

인수가 3개

-첫번째 인수 : 인덱스 값

-두번째 인수 : 삭제할 개수

-세번째 인수 : 새로 추가할 요소 지정

-요소 삭제 안하고 새로운 요소 추가하려면 두번째 인수에 0 넣는다.

-여러 개의 요소를 추가 : 세 번째 인수부터 차례대로 나열 

 

slice()함수 - 원하는 위치의 요소들을 추출

-pop()함수, shift()함수와 비슷

-여러개 요소를 꺼낼 수 있다

-시작인수, 끝인수 정해서 > 시작 인덱스 ~ 끝 인덱스 직전 까지!

-시작인수만 지정하면 시작~배열끝까지 추출

-원래 배열은 그대로이다.

splice() VS slice()

-공통점 : 특정 위치의 요소를 활용한다.

-splice()는 원래 배열 수정된다

-slice()는 원래 배열 그대로이다

 

Array 객체의 함수

concat	배열을 추가 | 새로운 배열 만들기
every	배열의 모든 요소가 주어진 함수에 대해 true이면 > true 반환 false이면 > false 반환
filter	주어진 필터링 함수에 대해 true인 요소만 골라 > 새로운 배열 만듬
forEach	배열의 모든 요소에 > 주어진 함수 실행
indexOf	주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스 찾는다
join	배열 요소를 문자열로 합친다 | 구분자 지정
pop	배열 마지막 요소 꺼냄 > 그 값 반환
push	배열 맨 끝에 새로운 요소 추가 새로운 length 반환
reverse	배열 배치 순서 역순
shift	배열 첫번째 요소 꺼냄 > 그 값 반환

slice	특정한 부분만 추출 | 기존 배열 그대로
sort	지정한 조건에 따라 배열 요소 정렬
splice	배열에 요소 추가 | 추출
toString	지정한 부분을  문자열로 반환 쉼표로 구분
unshift	맨 앞에 요소 추가

Array 구문 예제 확인

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#

Array

 

---

여행 준비물 점검 프로그램 

-필요한 물건의 항목을 적고

-물건을 챙길 때마다 적어 놓은 항목 삭제 가능

 

만드는 과정 미리 생각해보기

1. 배열 만들기

-여행 가방에 들어갈 준비물 여러가지

-여러 값을 저장할 수 있는 자료 구조 = Array(배열)

-배열 : 여러 개의 바구니 한줄로 늘어 놓고,  순서대로 여러 개의 값 저장할 수 있는 공간

 

2. 챙길 물건 배열에 추가

-챙겨야 할 물건의 이름을 목록에 추가한다

-텍스트 필드 : 물건의 이름 입력 받는다

-[추가]누르면 > 배열 끝에 물건 이름 추가 = push()함수

 

3. 추가한 내용 화면에 표시

-사용자가 배열에 추가한 준비물 > 화면에서 바로 확인 

-배열에 추가하는 것과 동시에, for문 사용해서 > 배열의 전체 내용을 텍스트 필드 아래쪽 화면에 나타낸다.

 

4. 챙긴 물건 목록에서 삭제

-목록 표시할 때, 준비물 옆에 [삭제]버튼 추가한다

-X글자 사용

-배열의 특정 위치 요소 삭제하려면 > splice()함수 사용

 

 

입력 필드 만들기

1. 제목<h2>, 텍스트 필드<form>, 준비물 목록 표시될 영역<div>

-요소마다 id 값 기억하기

 

2. form요소에 CSS추가하기 

   <link rel="stylesheet" href="input.css">

 

 

항목 추가하기

-프로그램 작동 위해 자바스크립트 파일 연결, 소스 작성

-[추가]버튼 눌렀을 때 텍스트 필드에 입력한 값이 배열에 추가된다 > 자바스크립트로 작성

 

1. checklist.js로 파일 만들기,  index.html문서에 자바스크립트 파일 연결

 

2. checklist.js에서 준비물 저장할 배열 만든다.

   빈 배열 만들고 > itemList 변수에 저장한다.

 

3. 기능을 수행할 함수와 [추가]버튼이 눌리는 이벤트를 연결해야 한다.

[추가]버튼 요소 가져와 > addBtn 변수에 저장 

addEventListener()함수 사용해 > addBtn에 click이벤트 발생했을 때 처리할 함수 연결

연결하는 함수 이름 : addList()

 

4. addList()함수 만들기

-준비물을 입력하고 [추가] 버튼을 누를 때마다 배열에 준비물 추가하는 함수

-사용자가 준비물 입력했는지 텍스트 필드 값 검사

-값이 있을 경우 가져와서 배열에 추가

 

텍스트 필드에 입력된 값 가져오기

-함수 선언 영역 만들기

-id="item"인 텍스트 필드값 가져오기

-item변수에 저장

 

5. if문 사용해서 > itemList 배열에 추가

-item 변숫값이 null이 아닌경우 = 입력값이 있는 경우에만 배열에 추가한다

-맨끝에 값을 추가 : push()함수

 

6. 콘솔창에서 확인

itemList 입력 > []빈셀

텍스트필드 내용 입력 후 itemList > ["내용"] > 잘 입력됨!!!

 

7. 텍스트 필드 비우는 소스, 포커스 부여하는 소스 추가 > if문 안에

 

화면에 점검 목록 표시

-콘솔 말고 직접 화면에서 항목을 볼 수 있어야 한다

 

1. 순서가 없는 항목 <ul>사용

 

2. 자바스크립트로 웹 문서에 목록 태그 나타낼때 > 줄 바꿈 고려X

 

3.  itemList 배열에 저장된 값 <li>태그에 넣으려면 for문 사용

 

4. 목록을 화면에 표시하는 함수 만들기

-showList()함수 선언

-함수 안에 list 변수 선언 (표시할 목록의 소스 저장)

 

5. 준비물 목록을 표시할 영역 id="itemList"에 list변숫값 표시하기 위해 showList()함수 끝에 다음소스 추가

document.querySelector("#itemList").innerHTML = list;

 

6. 함수 실행 소스 작성

-항목을 추가하자마자 결과를 화면에 보여줘야 하므로 addLIst()함수 끝부분에서 showList()함수 실행한다.

-if문 다음에 소스 추가하고 저장한다

 

챙긴 준비물 목록에서 지우기

1. 항목 오른쪽의 삭제 버튼 누르면 항목 삭제

-삭제 버튼을 눌렀을 때 어떤 항목을 삭제해야 하는지 프로그램이 정확히 알아야 한다

-해당 항목의 인덱스 값을 삭제 버튼의 id값으로 사용한다

-첫번째 항목의 인덱스 값은 0이다

ex. itemList[0] ㅡ id=0

 

2. showList()함수에서 [X]버튼 추가

-스타일 지정을 위해 class='close'속성 사용

-버튼의 id값을 배열의 인덱스 값인 i로 지정

-연결 연산자(+) > 숫자i를 문자열로 변환한다

 

3. css파일= list.css 파일을 연결해서 > 불릿 없애고 [X]버튼 오른쪽으로 띄우기

 

4. 목록에서 내용을 삭제하는 함수 만들기

-showList()함수 안에 추가한다 (삭제버튼은 목록과 함께 표시되기 때문)

-삭제 버튼을 프로그램에서 사용하려면 변수로 저장해야 한다

-삭제 버튼은 class값이  close로 똑같다

-모든 삭제 버튼을 remove변수에 저장한다

-querySelectorAll()함수를 사용해서 > class="close"인 요소를 모두 가져와 remove변수에 저장한다

-remove 변수는 배열 형태가 된다.

-querySelectorAll()함수는 괄호안 지정한 class이름을 가진 모든 요소를 가져온다

 

5. for문을 사용해 > remove 배열의 요소를 차례로 훑어보면서 click 이벤트가 발생하면 그 요소를 삭제하는 기능을 가진 함수를 실행하도록 지정

-함수 이름은 removeList()

 

6. removeList()함수 작성 

-순서 : 어떤 삭제 버튼이 눌렸는지 알아낸다 > 그 버튼의 id값을 가져온다 > 눌린 버튼에서 가져온 id값과 같은 인덱스 값을 가진 항목을 itemList() 배열에서 삭제한다

 

1. 어떤 버튼이 눌렸는지 알아내는 소스

-객체에서 이벤트가 발생했을 때 그 이벤트 대상을 알아내려면 > 자바스크립트에 this 예약어 사용

 

2. 삭제 버튼을 눌렀을 때 그 버튼의 id값을 가져온다 > getAttribute()함수 사용

-getAttribute()함수 : 지정한 속성의 값을 가져오는 함수

 

3. 눌린 버튼의 id값을 사용해 itemList 배열에서 해당 항목을 삭제한다

-특정 위치의 내용을 삭제하기 위해 : splice()함수 사용

-바뀐 내용을 화면에 다시 보여주기 위해 : showList()함수 실행