JavaScript_STUDY/JavaScript07.html at master · CreativePersonDW/JavaScript_STUDY · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264

<html lang='ko'>
    <head>
        <title>배열</title>
        <style>
            .area1{
                border:1px solid red;
                height:100px;
            }
            .area2{
                border:1px solid skyblue;
                height:200px;
            }
        </style>
    </head>
    <body>
        <h1>배열</h1>
        <h3>배열이란?</h3>
        <p>자바스크립트에서는 자료형 지정이 없기 때문에 모든 자료형을 보관하는 변수의 모음을 배열로 처리한다.<br>
        자바에서의 컬렉션과 비슷하다.</p>
        <div id = "area1" class = "area1"></div>
        <button onclick="arrayTest();">확인하기</button>
        <script>
            function arrayTest(){
                var area1 = document.getElementById("area1");

                var arr1 = ['김용승', 20, true, [1,2,3,4]];

                area1.innerHTML += arr1;
                console.log(arr1);
            }
        </script>

        <hr>

        <h3>배열의 선언</h3>
        <p>배열 선언시 크기를 정하지 않고 선언할 수도 있고, 크기를 정하고 선언할 수도 있다.</p>
        <div id="area2" class="area2"></div>
        <button onclick="arrayTest2();">확인하기</button>
        <script>
            function arrayTest2(){
                var area2 = document.getElementById("area2");

                var arr1 = new Array();     // 크기 선언 x
                var arr2 = new Array(3);    // 크기 선언 o

                console.log(arr1);
                console.log(arr2);

                // 배열에 값 대입
                arr1[0] = '바나나';
                arr1[1] = '복숭아';
                arr1[2] = '키위';
                arr1[3] = '딸기';

                console.log(arr1);

                arr2[0] = '자동차';
                arr2[1] = '비행기';
                arr2[2] = '도보';
                arr2[3] = '기차';

                console.log(arr2);

                // new 연산자를 활용한 초기화
                var arr3 = new Array('홍길동','임꺽정','춘향이');
                console.log(arr3);

                var arr4 = ['java','oracle','html5','css3','javascript'];
                console.log(arr4);
            }
        </script>

        <hr>

        <h3>array객체의 메소드</h3>
        <p>array도 하나의 객체이기 때문에 배열에서 활용할 수 있는 메소드가 있다.</p>

        <h4>indexOf() : 배열에서 요소가 위치한 인덱스 리턴</h4>
        <div id = "area3" class="area"></div>
        <button onclick="methodTest1();">확인하기</button>
        <script>
            function methodTest1(){
                var area3 = document.getElementById("area3");

                var arr1 = ['사과','딸기','바나나','복숭아','키위','파인애플','토마토'];

                area3.innerHTML += "바나나가 있는 인덱스 : " + arr1.indexOf('바나나')+ "<br>";
            }
        </script>

        <br>

        <h4>concat(배열명) : 두 개 또는 세 개의 배열을 결합한다.</h4>
        <div id="area4" class="area"></div>
        <button onclick = "methodTest2();">확인하기</button>
        <script>
            function methodTest2(){
                var area4 = document.getElementById("area4");

                var arr1 = ['사과','딸기','바나나'];
                var arr2 = ['복숭아','키위','파인애플','토마토'];

                var arr3 = arr1.concat(arr2);
                var arr4 = arr2.concat(arr1);

                console.log(arr1);
                console.log(arr2);
                console.log("arr1을 기준 : " + arr3);
                console.log("arr2를 기준 : " + arr4);
            }
        </script>

        <br>

        <h4>join() : 배열을 결합하여 문자열을 반환한다.</h4>
        <div id="area5" class="area"></div>
        <button onclick="methodTest3();">확인하기</button>
        <script>
            function methodTest3(){
                var area5 = document.getElementById("area5");

                var arr1 = ['치킨','피자','탕수육','열무김치'];
                var arr2 = ['강아지','고냥이','도마뱀?','똥싸는선인장'];

                var arr1join = arr1.join();
                var arr2join = arr2.join();

                area5.innerHTML += "arr1의 자료형 : " + typeof(arr1) +"<br>";
                area5.innerHTML += "arr2의 자료형 : " + typeof(arr2) +"<br>";

                area5.innerHTML += "arr1join의 자료형 : " + typeof(arr1join) +"<br>";
                area5.innerHTML += "arr2join의 자료형 : " + typeof(arr2join) +"<br>";

                area5.innerHTML += "arr1join의 값 : " + arr1join+"<br>";
                area5.innerHTML += "arr2join의 자료형 : " + arr2join +"<br>";
            }
        </script>

        <hr>
        <h4>reverse() : 배열의 순서를 뒤집는다.</h4>
        <div id = "area6"></div>
        <button onclick="methodTest4();">확인하기</button>
        <script>
            function methodTest4(){
                var area6 = document.getElementById("area6");

                var arr = [1,2,3,4,5,6,7,8,9];
                console.log(arr);   // 원본도 바뀐다.
                var arrReverse = arr.reverse();
                console.log(arrReverse);

            }
        </script>

        <h4>sort() : 배열을 내림차순 혹은 오름차순 정렬한다.</h4>
        <div id="area7" class="area"></div>
        <button onclick="methodTest5();">확인하기</button>
        <script>
            function methodTest5(){
                var area7 = document.getElementById("area7");

                var arr = [10, 543, 34, 450, 123, 885];

                area7.innerHTML += "arr.sort() 이전 값 : " + arr + "<br>";

                // 오름차순 정렬
                area7.innerHTML += "arr.sort() 후 값(오름) : " + arr.sort(function(left, right){
                                                                        return left-right;
                                                                    }) + "<br>";

                // 내림차순 정렬
                area7.innerHTML += "arr.sort() 후 값(내림) : " + arr.sort(function(left, right){
                                                                        return -(left-right);
                                                                    }) + "<br>";

                // 정렬 후 arr의 값
                area7.innerHTML += "정렬 후 arr의 값 : " + arr + "<br>";
            }
        </script>


        <h4>push() : 배열의 맨 뒤에 요소 추가, pop() : 배열의 맨 뒤에 요소 제거</h4>

        <div id="area8" class="area"></div>
        <button onclick="methodTest6();">확인하기</button>
        <script>
            function methodTest6(){
                var area8 = document.getElementById("area8");

                var arr = ['서초동', '방배동', '역삼동', '삼성동', '대치동'];

                area8.innerHTML += "arr의 기본값 : " + arr + "<br>";

                arr.push('남양주시');

                area8.innerHTML += "arr에 push : " + arr + "<br>";

                arr.sort();

                area8.innerHTML += "arr에 sort : " + arr + "<br>";

                arr.pop();

                area8.innerHTML += "arr에 pop : " + arr + "<br>";
            }
        </script>


        <h4>shift() : 배열의 맨 앞의 요소 제거, unshift() : 배열의 맨 앞에 요소 추가</h4>

        <div id="area9" class="area"></div>
        <button onclick="methodTest7();">확인하기</button>
        <script>
        function methodTest7(){
            var area9 = document.getElementById("area9");

            var arr = ['야구','축구','볼링','탁구','테니스'];

            area9.innerHTML += "arr의 기본값 : " + arr + "<br>";

            area9.innerHTML += "arr에서 shift하면 : " + arr.shift() + "<br>";

            area9.innerHTML += "shift하고 arr(원본)은 : " + arr + "<br>";

            area9.innerHTML += "arr에서 unshift하면 : " + arr.unshift('당구') + "<br>";

            area9.innerHTML += "unshift하고 arr(원본)은 : " + arr + "<br>";
        }
        </script>

        <h4>slice() : 배열의 요소 선택 잘라내기, splice() : 배열의 index위치의 요소 제거 및 추가</h4>
        <div id="area10" class="area"></div>
        <button onclick="methodTest8();">확인하기</button>
        <script>
            function methodTest8(){
                var area10 = document.getElementById("area10");

                var arr = ['자바','라클이','HTML','CSS','JavaScript'];

                area10.innerHTML += "arr 처음 원본 : " + arr + "<br>";

                // slice(시작인덱스, 종료인덱스-1)
                // 원본 배열이 지장을 받지 않는다.
                area10.innerHTML += "slice를 해보면 : " + arr.slice(2,4) + "를 가져옴 <br>";
                area10.innerHTML += "slice 이후 arr : " + arr + "<br>";

                // splice(인덱스, 제거 수, 추가 값)
                // 원본 배열이 지장을 받는다.
                area10.innerHTML += "splice를 해보면 : " + arr.splice(2,2,'Spring') + "<br>";
                area10.innerHTML += "splice 이후 arr : " + arr + "<br>";
            }
        </script>


        <!-- var check = document.getElementById("area10").getAttribute("class");
        document.write('<p>class 명 : ' + check + '</p>'); -->


        <br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br>
    </body>
</html>