메뉴 건너뛰기

조회 수 11110 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

▶▷ 알아두면 좋은 것들

 Document.write(), 배열에 대한 이해

관련글

[자바스크립트] 배열의 리터럴 선언, 또다른 배열 선언 방법!

 

 이 글은 배열에 대한 개념을 이해하고 있다고 가정하고 쓰기 때문에, 배열에 관한 내용은 다른 글을 참고해 주세요.

 

 자바스크립트에서 배열(Array)을 사용하기 위해서는 자바와는 비슷하지만 다른 방식으로 접근을 해야하는데요~

특히, 다차원 배열 즉, 2차·3차 배열을 선언할 때 주의깊게 봐야합니다.

 

 우선, 1차원 배열을 선언하는 방법에 대해서 알아볼게요.

1. var arr = new Array(); 

2. var arr = new Array(3);

3. var arr = new Array("가", "나", "다", 3); 

 

 1차 배열을 선언하는 방법중에 첫번째 방법은, 가장 단순한 방법이기도 하고 많은 장점을 갖는 선언 방법입니다.

자바(JAVA)에서는 기본 배열을 선언할 시에 배열의 크기가 고정되어 있어서, 추후에 배열요소를 추가함에 있어서 배열의 길이가 바뀔때 새로운 길이 만큼의 배열을 선언하고 거기에 기존의 배열을 복사하는 형태로 배열을 늘일 수 있겠습니다.

이 단점을 보완한 것으로 여러 컬렉션이 있는데요. 그중에서 자바스크립트에서 지원하는 방식은 Vector와 ArrayList와 유사하네요.

 즉, 자바 스크립트에서 지원하는 방식은 요소에 어떤 타입이 들어가든 유동적으로 배열의 길이를 늘일 수 있습니다
배열의 크기와 상관없이 요소만 추가하면 된다는 거죠. 편합니다 편해 ^^ 조금더 알아보자면 연관배열도 있겠습니다만.. 이 글에서는 범위를 벗어나므로~

 

 그래서 다음과 같이 사용할 수 있겠습니다.

var arr = new Array();   
arr[0] = "가";
arr[1] = "나"'

 

두번째, 세번째 방법은 배열의 크기를 미리 정해줌과 동시에 세번째는 초기화가 선언과 동시에 이루어지는 방법입니다.

 

 그렇다면! 다차원 배열의 선언은 어떻게 하는 것일까요?

원래 자바스크립트에서는 다차원 배열을 지원하지 않지만, 요소안에서 다시 배열을 선언해주는 방법으로 다차원 배열을 구현할 수 있습니다. 다음과 같이 가능합니다!

1. 선언시 

var arr = new Array();

arr[0] = new Arry();

 

2. 사용시

arr[0][0] = "가";

arr[0][1] = "나";

 

3. 3차 배열 선언시

arr[0][0] = new Array();

 여기서 중요한건 각 요소마다 배열을 다시 선언 해줘야 한다는 점입니다.

길이가 길 때에는 반복문을 통한 선언이 더 편하겠지요?

 

  그렇다면 여기서 간단히 다차원 배열 선언을 통한 예제를 잠시 들어볼까해요.

2차원 배열을 만들고, for문을 통해서 입력한 데이터가 보일 수 있도록 하겠습니다.

<HTML>

<HEAD><TITLE>자바스크립트를 활용한 다차원 배열 예제</TITLE>

</HEAD>

<BODY>

<SCRIPT language="JavaScript">

 

var arr = new Array();

 

arr[0] = new Array();   //2차배열 선언

arr[1] = new Array();

 

arr[0][0] = "아무개";

arr[0][0] = "24세";

 

arr[0][0] = "홍길동";

arr[0][0] = "125세";

 

for(var i=0; i<arr.length; i++){

for(var j=0; j<arr[i].length; j++){

document.write(arr[i][j]+"<br>");

}

 

</SCRIPT>

</BODY>

</HTML>

 


  1. 'button', 클릭한 횟수 알아내기!

    Date2015.02.03 Views10757
    Read More
  2. 'checkbox', 체크박스 모두체크 그리고 모두해제!

    Date2015.02.03 Views7492
    Read More
  3. 'open', 새창을 열어보자!

    Date2015.02.03 Views6036
    Read More
  4. 'opener', 부모창과 자식창의 텍스트를 교환하자!

    Date2015.02.03 Views7308
    Read More
  5. 'setTimeout', 타이머를 사용하자!

    Date2015.02.03 Views7033
    Read More
  6. 'blur', 이미지 클릭시 테두리를 없애자!

    Date2015.02.03 Views7353
    Read More
  7. 'setInterval', 타이머를 사용하자! ==setTimeout

    Date2015.02.03 Views6223
    Read More
  8. 'onmouseover', 마우스 오버 효과 - 글씨 바꾸기!

    Date2015.02.03 Views9434
    Read More
  9. 드롭다운 메뉴를 만들어보자! -1탄

    Date2015.02.03 Views8170
    Read More
  10. '문자 ↔ 숫자', 타입을 바꿔보자!

    Date2015.02.03 Views6207
    Read More
  11. 배열의 리터럴 선언, 또다른 배열 선언 방법!

    Date2015.02.03 Views6408
    Read More
  12. 'Array', 배열 및 다차원 배열 선언에 대해 알아보자!

    Date2015.02.03 Views11110
    Read More
  13. '레이블', 반복문을 제어하자!

    Date2015.02.03 Views5540
    Read More
  14. 자바스크립트 이벤트 목록입니다. ( javascript event )

    Date2015.04.06 Views5596
    Read More
  15. jquery 메뉴 - 아래로 한번에 전체가 펼처짐

    Date2015.04.06 Views11698
    Read More
  16. 2단계 트리메뉴 마우스오버(mouseover), 온포커스(onfocus) 구현

    Date2015.04.06 Views8204
    Read More
  17. 선택된 데이터 부모창에 넘기기 (iframe ☞ 부모창)

    Date2015.04.28 Views6614
    Read More
  18. 선택(CheckBox) 된 Row 삭제 - 화면에서 추가된 Row

    Date2015.04.28 Views13541
    Read More
  19. CheckBox 전체 선택 & 해제

    Date2015.04.28 Views5580
    Read More
  20. location.href 로 새창 여는 방법 (target=_blank 효과)

    Date2015.06.19 Views9402
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved