반응형
<최종 화면> 자바스크립트를 이용하여 배열 사용방법에 대해서 알아보자.
우선 배열을 만들고 화면에 출력해보자.
arr2는 배열 길이가 3으로 만들었지만, 추후에 없는 인덱스 번호를 사용해도 자동으로 추가 생성된다.
arr2 배열의 값을 출력해보자.
위 사진처럼 없던 인덱스를 사용해도 추가 생성이 되고 값도 들어간다.
중간에 자동으로 생성된 방에는 undefined로 나온다.
이제 객체로 배열을 생성해보자.
코틀린이랑 비슷하게 자바스크립트에서 for문을 사용하여 배열 값을 출력해 보자.
자바스크립트에서 배열을 만들고, 나중에 값을 추가해도 된다.
지금까지 대괄호를 사용해서 배열 요소들에 접근했지만 키값을 이용해서 접근 가능하다.
연관 배열 (키값 사용)로 만드는데 객체처럼 만들 수 도있다.
연관 배열로 사용할 때 ['키값']으로 사용 가능하며, 객체처럼 .키값으로 가능하다.
form요소와 input요소를 사용해보자. 배열처럼 접근 가능하다.
body 안에 script문을 써보 상관 없다.
foems[0][0]과 아래 두줄은 같은 의미이다.
또한 더 줄여서 사용 가능하다. 접근하는 방법이 다양한다.
form, input요소에 반복문을 이용해서 처리 가능하다.
2차원 배열을 사용하는 예제를 해보자.
|
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
|
<!DOCTYPE html>
<html">
<head>
<meta charset="UTF-8">
<title>Array</title>
<script>
// 배열의 2가지 생성 방법
// 1.리터럴 배열 (literal array)
var arr= [10, 20, 30];
document.write( arr[0] + "<br>");
document.write( arr[1] + "<br>");
document.write( arr[2] + "<br>");
document.write("<br>");
// JS는 동적 타입이므로 여러 자료형의 값을 배열 하나에 넣을 수 있음.
var arr2 =[10, "aaa", true];
document.write( arr2[0] + "<br>");
document.write( arr2[1] + "<br>");
document.write( arr2[2] + "<br>");
document.write("<br>");
// 인덱스 번호가 틀려도 에러 아님.
document.write( arr2[3] + "<br>"); //undefined
document.write("<br>");
// 배열의 개수 변경이 가능함
document.write("배열길이 : "+arr2.length + "<br>"); //3
arr2[5]=100; //5번 방에 값이 대입되었기에 자동으로 3,4번 방을 추가로 생성함
document.write("배열길이 : "+arr2.length + "<br>"); //6
document.write( arr2[0] + "<br>");
document.write( arr2[1] + "<br>");
document.write( arr2[2] + "<br>");
document.write( arr2[3] + "<br>");
document.write( arr2[4] + "<br>");
document.write( arr2[5] + "<br>");
document.write("<br>");
document.write("<hr>");
// 2. Array 객체로 배열 생성
var arr3= new Array(10, "sam", 30);
for(var i=0; i<arr3.length;i++){
document.write(arr3[i] + "<br>");
}
document.write("<br>");
// for.. in문법 사용
for(var index in arr3){
document.write(arr3[index] + "<br>");
}
document.write("<br>");
// 배열객체를 먼저 만들고 나중에 요소를 추가해도 됨.
var arr4=new Array();
arr4[0]= "apple";
arr4[1]= 20;
arr4[2]= new Date();
for(var i in arr4){
document.write(arr4[i] + "<br>");
}
document.write("<br>");
// 연관배열 - '키'로 인덱스번호를 대신함. (마치 Map과 유사)
var arr5= new Array();
arr5['aa']= 10;
arr5['bb']= 20;
arr5['cc']= 30;
document.write(arr5['aa'] + "<br>");
document.write(arr5['bb'] + "<br>");
document.write(arr5['cc'] + "<br>");
document.write("<br>");
// 리터럴배열로 연관 배열 만들기
var arr6=[];
arr6['aa']= 10;
arr6['bb']= 20;
document.write(arr6['aa'] + "<br>");
document.write(arr6['bb'] + "<br>");
document.write("<br>");
// 배열을 만들면서 연관 배열로 만들기!!
var arr7={'aa':10, 'bb':20}; //객체만드는 방법과 비슷
document.write(arr7['aa'] + "<br>");
document.write(arr7['bb'] + "<br>");
document.write("<br>");
// 만드는 방식이 객체와 비슷하여 사용하는 것도
// 객체처럼 사용할 수 있음. [키를 멤버 변수명으로 사용]
document.write(arr7.aa + "<br>");
document.write(arr7.bb + "<br>");
document.write("<br>");
// 연관 배열을 사용의 좋은 예시!!
// input요소들을 제어할 때.. 매우 효과적임
// 알아보기 위해 아래 body안에 html요소로 실습해보기...
</script>
</head>
<body>
<hr>
<!-- form요소와 input요소들을 연관배열로 접근하는 특별한 방식 -->
<form action="" method="get" name="aa">
<input type="text" name="in1"><br>
<input type="text" name="in2"><br>
<input type="text" name="in3"><br>
</form>
<script>
// name 값이 in1인 요소에 값으로 10을 설정하기
// html요소의 속성으로 적용된 name속성값은 연관배열의 키 값으로 사용됨
// 더 줄여서...
// 더 줄여서...
document.aa.in1.value="sss";
document.aa.in2.value="kkk";
document.aa.in3.value="ggg";
// 참고.. 위 name 속성의 값이 문자열이므로..
// '키'값을 문자합성을 이용해서 반복처리 가능함
for(var i=1; i<=document.aa.length; i++){
}
</script>
<hr>
<!-- 2차원 배열 -->
<script>
var arr8= new Array(); //빈 배열
//1차원 배열 3개
var a1=[10, 20, 30];
var a2=["aa", "bb", "cc"];
var a3=[true, false, true, 3.14];
// 1차원 배열들을 빈 배열의 각 요소로 추가
arr8[0]= a1;
arr8[1]= a2;
arr8[2]= a3;
for(var i=0;i<arr8.length;i++){
for(var k=0;k<arr8[i].length;k++){
}
document.write("<br>");
}
document.write("<br>");
</script>
</body>
</html>
|
반응형
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글
| HTML+Java script (기초) 함수 사용 (0) | 2019.12.12 |
|---|---|
| HTML+ Java script (기초) dialog (0) | 2019.12.11 |
| HTML+Java script (기초) HTML요소와 속성을 JS객체,멤버변수처럼 사용 (0) | 2019.12.11 |
| HTML+Java script (기초) 연산자, 기능 메소드 알아보기 (0) | 2019.12.11 |
| HTML+Java script (기초) 자료형, 함수 참조, 객체 만들기 (0) | 2019.12.11 |
댓글