다차원 배열 역시 전의 java와 내용은 같다.


차이점이라면 선언 시 ()괄호를 안쓰고 전부 [] 를 쓴다.


그리고 java가 7차원 까지 지원한다면


js는 2차원까지만 지원한다.


고로 예제에서는 3차원 부분에 값을 넣으려면 [배열 형태]로 값을 넣어주어야 한다.


[0][0][0]와 같은 3차원 형식으로 사용하면 인식이 안된다.



<html>
    <head>
        <meta charset="UTF-8">
        <title>다차원 배열</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--html 주석-->
    </body>
    <script>
        // 5층 5호
        var royalApart = [
            // 1층 1~5호
            [1, 2, 3, 4, 5],
            // 2층 1~5호
            [11, 12, 13, 14, 15],
            // 3층 1~5호
            [21, 22, 23, 24, 25],
            // 4층 1~5호
            [31, 32, 33, 34, 35],
            // 5층 1~5호
            [41, 42, 43, 44, 45]
        ];
        // 3층 2호의 값
        console.log(royalApart[2][1]);
        // 2층 2호의 값
        console.log(royalApart[1][1]);
        // 4층 4호의 값
        console.log(royalApart[3][3]);

        // 아파트 1층에 5호, 각 호를 추가
        var apart = []; // 아파트(층과 호가 이 안에 들어감)
        var floor = []; // 층(호가 이 안에 들어감)
        var ho = [0, 0, 0]; // 호 수 (이 안에 방이 3개 있다.)
        // 한 층에 5개 호를 넣는다.
        floor.push(ho);
        floor.push(ho);
        floor.push(ho);
        floor.push(ho);
        floor.push(ho);
        apart.push(floor) // 층을 아파트에 추가
        // 배열 구조 확인 하기
        console.log(apart);

        // 0번 아파트 2층의 각 호를 아이들에게 나눠주자.
        // 자바스크립트는 2차원 배열 까지만 지원
        // 3차원 이상 부터는 새로 배열을 만들어 추가 해야 한다.
        console.log(apart[0][2]);
        apart[0][2] = [1, 2, '이'];
        // apart[0][2][0] = "이" 는 제대로 인식이 안된다.
        console.log(apart[0][2]);

        // 나머지 층도 값을 부여
        apart[0][0] = [1, 2, '영']; 
        apart[0][1] = [1, 2, '일']; 
        apart[0][3] = [1, 2, '삼']; 
        apart[0][4] = [1, 2, '사']; 
    </script>
</html>


저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-07.Shallow Copy 현상, 배열 대입 이상  (0) 2018.10.19
[JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join)  (0) 2018.10.19
[JS]04-04.버튼에 기능 구현하기, 배열 값 넣기, 빼기 push, pop, unshift, shift  (0) 2018.10.18
[JS]04-03.함수 생성 및 사용, 배열 생성 및 사용  (0) 2018.10.18
[JS]04-02.선언, 객체 생성, 선언, 값 입력, 콘솔 출력  (0) 2018.10.18

버튼을 눌렀을 때 어떤 함수가 작동하게 끔 설정해보자.


함수는 배열의 값을 넣었다 뺏다 하는 함수를 만들것이고


배열에서 값을 앞에 먼저 넣거나 뒤에 먼저 넣는 예제를 만든다.



<html>
    <head>
        <meta charset="UTF-8">
        <title>배열 2</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--버튼 역할만 수행-->
        <input type="button" value="PUSH" onclick="arrPush()"/>
        <!--버튼+submit 역할 수행 : form 안에서 사용시 주의, form에선 누르기만 해도 서버에 전송될 수 있음-->
        <button onclick="arrPop()">POP</button>
        <br/>
        <input type="button" value="unshift" onclick="arrUnshift()"/>
        <input type="button" value="shift" onclick="arrShift()"/>
    </body>
    <script>

        var arrNum = [];
        var i = 0;

        function arrPush(){
            i++;
            arrNum.push(i);
            console.log(arrNum);
        }

        function arrPop(){
            console.log(arrNum.pop()); // 뺀 값을 반환
            console.log(arrNum); // 배열에서 하나씩 빠진다.
        }

        // [] [] [] [] <- push() (값을 넣음)
        // [] [] [] pop() -> [] (값을 뺌)
        // unshift() -> [][][][] (앞에서부터 집어 넣음)
        // [] <- shift() [][][] (앞에 값을 뺌)

        /*버튼 추가 후 shift와 unshift 사용 하기*/
        
        function arrUnshift(){
            i++;
            arrNum.unshift(i);
            console.log(arrNum);
        }

        function arrShift(){
            console.log(arrNum.shift()); // 뺀 값을 반환
            console.log(arrNum); // 배열에서 하나씩 빠진다.
        }
    </script>
</html>



버튼의 경우 onclick 이벤트  속성을 선언하고 속성에 Script에 만들어둔


함수()를 입력하면 버튼을 누를 때 마다 적용된다.

저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join)  (0) 2018.10.19
[JS]04-05.2차원 배열 생성, 값 조회, 추가  (0) 2018.10.19
[JS]04-03.함수 생성 및 사용, 배열 생성 및 사용  (0) 2018.10.18
[JS]04-02.선언, 객체 생성, 선언, 값 입력, 콘솔 출력  (0) 2018.10.18
[JS]04-01.기본 뼈대  (0) 2018.10.18

js에서 함수는 변수처럼 생성한다.


따로 특징은 다음 예제의 주석에서 설명한다.


블로그 내용을 쭉 따라 와서 java를 봤다면 비슷하기 때문에 보는데 문제는 없을 것이다.


<html>
    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--html 주석-->
    </body>
    <script>
        //객체에 함수
        var Check = {};
        Check.balance = 10000;
        Check.deposit = function(amount){// js는 데이터 타입을 안받는다.
            console.log(amount + "원을 예금 하셨습니다.");
            this.balance += amount;
            console("총액 : " + this.balance)
        };

        //실행(매개 변수가 없어도 된다. 데이터 타입이 다 틀려도 그냥 대입이 되어 연산 된다.)
        Check.deposit();
        Check.deposit(1000);
        

    </script>
</html>












배열도 마찬가지로 java와 유사하다.


하지만 문자열 숫자열 등 상관없이 값을 넣을 수 있는데


왠만하면 한가지 타입만 넣는것을 권장한다.


배열을 사용하는 이유가 반복문을 통해서 같은 작업을 하게 되는데


자료형이 틀리면 오류가 발생할 수 있기 때문에 조심해야 한다.



js 자체가 거의 자료형 구분이 없다고 보면 되는데 연산 작업에는 자료형 구분이 중요하기 때문에


개인 판단에 맞겨서 알맞게 하면 된다.


참고로 "" 와 '' 구분도 상관없다.




java에서 전부 Object타입으로 선언하는 것과 같다.


내부에서 알아서 형변환이 이루어져 연산이 처리된다.


이러한 이유로 성능에 안좋다고 하지만 요즘 컴퓨터들이 상향 평준화 되어


연산이나 메모리 16기가를 채울 정도로 성능에 영향을 주는게 아니기 때문에 js가 주목받고 있다.




또한 배열과 비슷하다기 보다는 ArrayList와 비슷한데


js의 배열은 값을 추가할 수 있다는 특징이 있다.


예제를 한번 확인해보자



<html>
    <head>
        <meta charset="UTF-8">
        <title>배열 1</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--html 주석-->
    </body>
    <script>
        // 배열 선언 법 1
        var arrNum = [];
        // 배열 선언 법 2
        var arrString = new Array();

        /*데이터 넣기*/
        arrNum = [1, 2, 3, 4];
        arrString = ['a', 'b', 'c', 'd'];


        arrNum[4] = 5;
        arrString[4] = 'e';

        arrNum.push(6);
        arrString.push("f");

        console.log(arrNum.length);
        console.log(arrString.length);

        console.log(arrNum);
        console.log(arrString);
        
    </script>
</html>









저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join)  (0) 2018.10.19
[JS]04-05.2차원 배열 생성, 값 조회, 추가  (0) 2018.10.19
[JS]04-04.버튼에 기능 구현하기, 배열 값 넣기, 빼기 push, pop, unshift, shift  (0) 2018.10.18
[JS]04-02.선언, 객체 생성, 선언, 값 입력, 콘솔 출력  (0) 2018.10.18
[JS]04-01.기본 뼈대  (0) 2018.10.18

+ Recent posts

티스토리툴바