자바스크립트의 개요
기본적인 개념만 정리하고 마지막에 실습 코드를 주석과 함께 첨부할테니 참고해서 이해하시길 바랍니다.
html 문서 자체를 관리하는 객체를 document객체라고 합니다.
자바스크립트는 head영역의 script태그에서 사용할 수 있고, body영역에 input태그의 버튼에서도 사용할 수 있습니다.
[스크립트 태그]
<script type="text/javascript">
var a;
a = '안녕하세요';
document.write(a + "<br>"); /* body 영역에 출력된다. */
</script>
[body영역에 input태그]
<!-- 자바스크립트 언어를 사용하는 윈도우객체에서 alert하도록하는 이벤트를 호출하는 정석적인 방법 -->
<input type="button" value="인사말" onclick="javasript:window.alert('안녕하세요');">
자바스크립트의 자료형
| 자료형 | 설명 |
| Number | 정수와 실수를 구분하지 않습니다. |
| String | 문자열("")과 문자('')를 구분하지 않습니다. |
| Date | 날짜 데이터를 저장합니다. |
| Boolean | 논리형 데이터를 저장합니다. |
자바스크립트의 변수 선언 방법
- var a;
- 예약어 var을 사용합니다.
- let b;
- 예약어 let을 사용합니다.
- c = a+ b;
- 예약어를 사용하지 않고도 선언할 수 있습니다.
- 다른 언어와는 달리 변수를 선언할 때 자료형을 선언하지 않고, 예약어만 사용하기 때문에, 변수를 선언하는 시점에서는 변수의 자료형을 알 수 업습니다. 변수의 자료형은 변수를 초기화했을때, 변수에 들어오는 데이터를 확인하고 그에 맞는 자료형이 결정됩니다.
[지역변수와 전역변수]
- 지역변수는 선언된 함수내부에서만 사용하는 변수이고, 전역변수는 함수 외부에서도 사용할 수 있습니다.
- 지역변수를 함수 외부에서 사용하게 되면 오류가 발생합니다.
- 지역변수는 함수 내에서 var예약어를 사용하고, 전역변수는 예약어를 사용하지 않고 선언합니다.
- 단, 이때 반드시 한번 함수를 호출해야, 전역변수를 사용할 수 있습니다. 쉽게 생각해서 변수를 생성하는 명령이 함수 내부에 있기 때문에 일단 한번은 실행을 해야 변수가 생성이 되고 사용할 수 있는것입니다.
아래 소스코드의 주석과 함께 참고하시길 바랍니다.
더보기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function testFn(){
//함수 내에서 var붙이면 지역변수
var local_a = 10; //지역변수, 선언된 블록 내부에서만 사용가능한 변수
//함수 내에서 var 안붙이면 전역변수
global_b = 20; //전역변수
}
testFn(); //호출 -> 한번 호출이 되어야만 함수 내부에 있는 전역변수가 생성이된다. 함수 내부에서 """var을 쓰면 지역변수""", """안쓰면 전역변수"""로 선언됩니다. 단, 한번은 호출되어야 합니다.
document.write(global_b + "<br>");
document.write(local_a + "<br>");
|
cs |
[자바스크립트 출력방법]
innerHTML : 태그내부에 값을 출력할 때 사용합니다.
document.write() : 해석이 되어 body 영역에 추가됩니다.
window.alert() : 웹 페이지에서 경고창으로 나타납니다.
console.log() : 콘솔에 출력하는 경우로, 디버깅시 많이 활용합니다.
[자바스크립트 기본 API]
| API | 설명 |
| length() | 문자열의 길이를 구합니다. |
| substring(a,b) | 문자열의 일부를 슬라이싱합니다. a: 시작index, b: 끝 인덱스+1 슬라이싱하는 인덱스의 범위는 다음과 같습니다. -> a <= x < b |
| substr(a,b) | 문자열의 일부를 슬라이싱합니다. a: 시작index, b: 추출할 문자 개수 index a부터 b개의 문자를 추출합니다. |
| charAt(i) | index가 i번째인 문자를 추출합니다. index는 ZeorBase입니다. |
| parseInt(a) | 숫자형 문자("123") a를 숫자자료형으로 변환합니다. |
| Number(a) | 숫자형 문자("123") a를 숫자자료형으로 변환합니다. |
| getYear() | 날짜데이터에서 "연도"만 가져옵니다. 이때, 연도는 1900년을 시점으로 셈하기 때문에 결과값에 +1900을 해주어야 정확한 결과가 나옵니다. |
| getMonth() | 날짜데이터에서 "월"만 가져옵니다. 이때, 월은 ZeroBase로 저장되기 때문에 +1해주어야 정확한 결과가 나옵니다. |
| getDate() | 날짜데이터에서 "일"만 가져옵니다. |
| getHours() | 날짜데이터에서 "시간"만 가져옵니다. |
| getMinutes() | 날짜데이터에서 "분"만 가져옵니다. |
| getSeconds() | 날짜데이터에서 "초"만 가져옵니다. |
소스코드 보기
더보기
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1라인 주석
/* 범위 주석 */
/* 자료형
문자(열)형 : string
숫자형 : number
날짜형 : date
논리형 : boolean
*/
/* 변수선언 */
var a; /* 가장 보편적인 방법 */
let b;
/* 값이 입력되어야 변수의 자료형이 결정된다. */
// 0 1 2 3 4 <- index
a = '안녕하세요';
document.write(a + "<br>"); /* body 영역에 출력된다. */
document.write(a.length + "<br>"); /* 문자열의 길이 출력 */
document.write(a.substring(2, 2+2) + "<br>"); //substring(a, b) /*index 2부터 2개 슬라이싱 범위는 다음과 같다. a <= x < b*/
document.write(a.substr(2,2) + "<br>"); //substr(a,c) a:시작인덱스, c: 출력개수
document.write(a.charAt(2) + "<br>"); //charAt(index) : 인덱스에 해당하는 문자를 가져온다.
a = "100";
document.write((a+1) + "<br>"); //원래 문자열에 1이 뒤에 붙는 것
//(숫자형)문자 - > 정수변환함수 : parseInt("123")
// : Number("123")
document.write(( parseInt(a)+1) + "<br>"); //원래 문자열을 숫자로 바꾸어서 연산
a = new Date(); /* 현재 시스템 날짜 */
document.write(a + "<br>");
document.write( a.getYear() + 1900 +"<br>"); //1900년을 기준으로 계산한 결과이다.
document.write( a.getMonth() + 1 +"<br>"); //제로베이스이므로 1월 : 0. 2월 : 1이므로 +1해줘야 합니다.
document.write( a.getDate() +"<br>");
document.write( a.getHours() +"<br>");
document.write( a.getMinutes() +"<br>");
document.write( a.getSeconds() +"<br>");
a = 3 > 2;
document.write(a + "<br>");
//함수
/*
1. 선언적
2.
3. 익명
*/
var global_a; //전역변수
function testFn(){
//함수 내에서 var붙이면 지역변수
var local_a = 10; //지역변수, 선언된 블록 내부에서만 사용가능한 변수
//함수 내에서 var 안붙이면 전역변수
global_b = 20; //전역변수
}
testFn(); //호출 -> 한번 호출이 되어야만 함수 내부에 있는 전역변수가 생성이된다. 함수 내부에서 """var을 쓰면 지역변수""", """안쓰면 전역변수"""로 선언됩니다. 단, 한번은 호출되어야 합니다.
document.write(global_b + "<br>");
document.write(local_a + "<br>");
</script>
</head>
<body>
<!-- 자바스크립트 언어를 사용하는 윈도우객체에서 alert하도록하는 이벤트를 호출하는 정석적인 방법 -->
<input type="button" value="인사말" onclick="javasript:window.alert('안녕하세요');">
</body>
</html>
|
cs |
반복문을 사용하는 기본적인 로직은 동일합니다.
단, 태그를 사용하는 경우 태그의 열고 닫음을 확실하게 해야 정확한 결과가 출력됩니다. 아래 소스, 주석과 결과를 비교해보면서 사용법을 숙지하시기 바랍니다.
[소스코드]
더보기
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* for문 */
for(var i=0; i<5; i++){
if(i%2==0){//짝수일때는 빨간색으로 출력
document.write("<font color='red'>");
document.write(i);
document.write("</font><br>");
} else{//홀수일때는 파란색으로 출력
document.write("<font color='blue'>");
document.write(i);
document.write("</font><br>");
}
}
document.write("--------------------------------<br>");
//var dan = 5;
var str = "<table border='1'>";
str = str + "<tr>"; //제목행 열기
for(var k=1; k<=9;k++){
str = str + "<th>" + k + "단 보기</th>"; //제목행 출력
}
str = str + "</tr>" //제목행 닫기
for(var i=1; i<=9; i++){
str = str + "<tr>"//각 행 열기
for(var j=1; j<=9;j++){
str = str + "<td>" + j + "x" + i + "=" + (i*j) + "</td>"; // 각 행의 열값 채우기, 각 행의 열은 j값 증가, 각 행은 i값 증가
}
str = str + "</tr>";//각 행 닫기
}
str = str + "</table>";
document.write(str);
document.write("--------------------------------<br>");
var str = "<table border='1'>"; //테이블 열기
for(var i=0; i<=9; i++){ //모든 행 10개이므로 10번 반복(제목행포함)
str = str + "<tr>"; //각 행을 열어주기
for(var dan=2;dan<=9;dan++){ //출력할 열의 개수. 2단부터 9단
if(i==0){//만약 제목행을 출력해야 한다면
//타이틀출력
str = str + "<th>" + dan + "단 보기</th>";
}else{
//데이터출력
//2중반복이므로 현재 i=1로 1행이고, 각 열을 채워야 하는데, 1x1, 2x1, 3x1...으로 열을 채워야 한다.
//따라서 각 열을 출력하는 dan을 x 앞에 i를 뒤에 출력하면서 한 행을 완성한다.
//다음 반복에서는 i=2가 되므로 2행에는 2x2, 3x2 ...로 열을 채운다.
str = str + "<td>" + dan + "x" + i + "=" + (i*dan) + "</td>";
}
}
str = str + "</tr>" //행 닫기
}
str = str + "</table>";
document.write(str);
document.write("--------------------------------<br>");
var msg;
var su = 10; // window.prompt("숫자만 입력하세요:");
//입력은 문자로 인식되기 때문에 숫자로 바꾸어야 합니다.
switch(parseInt(su)){
case 0: msg='Zero'; break;
case 1: msg='One'; break;
case 2: msg='Two'; break;
case 3: msg='Three'; break;
case 4: msg='Four'; break;
default: msg="Number";
}
document.write(su + "는(은)" + msg + "<br>");
</script>
</head>
<body>
</body>
</html>
|
cs |
[결과]
[자바스크립트 함수를 사용한 계산기 만들기]
- 정규식 : //사이에 작성합니다. -> /^[0-9]{1,4}$/;
- ^ : 시작문자
- $ : 끝문자
- [] : 값의 범위
- * : 0번 이상 반복
- ? : 0번 or 1번 반복(있거나 없거나)
- + : 1번 이상 반복
- {m, n} : m자리 이상 n자리 이하
- {m, } : m자리 이상
- {m} : 정확히 m자리
- 정규식의 부합 확인
- regular_number.test() -> true or false를 반환합니다.
- su1_ctrl = document.getElementById("su1")
- id가 su1인 태그의 정보를 가져옵니다.
- su1_ctrl을 사용해서 태그의 정보를 제어할 수 있습니다.
[소스코드]
더보기
|
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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
#title{
text-align: center;
}
div {
width:230px;
}
</style>
<script type="text/javascript">
//정규식(Regular Expression)
// ^: 시작 문자
// $: 끝 문자
//[]: 값의 범위
// *: 0번이상 반복
// ?: 0번 or 1번 반복(있을수도 있고, 없을수도 있음)
// +: 1번 이상 반복
//{m,n}: m~n자리 이상
//{m,} : m자리 이상
//{m} : m자리
// 0-9로 시작해서 0-9로 끝난다. 최소 1번, 최대 4번 반복한다.(자릿수)
// ㄴ> 1~4자리의 숫자
var regular_number = /^[0-9]{1,4}$/;
function clear1(){
var su1_ctrl = document.getElementById("su1");
su1_ctrl.value='';
su1_ctrl.focus();
}
function clear2(){
var su2_ctrl = document.getElementById("su2");
su2_ctrl.value='';
su2_ctrl.focus();
}
function clearAll(){
var su1_ctrl = document.getElementById("su1");
var su2_ctrl = document.getElementById("su2");
var result_ctrl = document.getElementById("result");
su1_ctrl.value='';
su2_ctrl.value='';
result_ctrl.value='';
}
function plus(){
//alert("+");
//컨트롤의 정보 얻어오기
var su1_ctrl = document.getElementById("su1"); //-> 컨트롤의 정보를 읽어온 것
var su2_ctrl = document.getElementById("su2");
var result_ctrl = document.getElementById("result");
//메소드를 통해 컨트롤의 정보를 알아오면 모든 제어가 가능하다.
//CSS
//su1_ctrl.style.display = 'none';//hide
//su1_ctrl.style.marginLeft = '100px';
//컨트롤의 value읽어오기
//읽어올때는 문자로 인식하기 때문에, 숫자형으로 데이터를 바꾸어 주어야 숫자 연산을 할 수 있습니다.
//그렇지 않으면 문자열 연결 연산이 수행됩니다.
var su1 = su1_ctrl.value; //-> 컨트롤에 입력된 value를 읽어온 것
var su2 = su2_ctrl.value;
//NaN(Not a Number)
//정규식을 이용한 숫자 체크
//정규표현식에 부합하는지 체크 -> test()
if(regular_number.test(su1)==false){
alert("1-4자리의 숫자만 입력하세요.");
su1_ctrl.value='';//값지우기
su1_ctrl.focus(); //입력 포커스 지정
return;
}
if(regular_number.test(su2)==false){
alert("1-4자리의 숫자만 입력하세요.");
su2_ctrl.value='';//값지우기
su2_ctrl.focus(); //입력 포커스 지정
return;
}
//이름은 대소문자를 명확하게 구분하므로 함수명을 정확히 입력하지 않으면 연산이 적용되지 않습니다.
//var result = Number(su1) + Number(su2);
var result = parseInt(su1) + parseInt(su2);
//결과값 넣기
result_ctrl.value = result;
}//end-plus
function minus(){
var su1_ctrl = document.getElementById("su1"); //-> 컨트롤의 정보를 읽어온 것
var su2_ctrl = document.getElementById("su2");
var result_ctrl = document.getElementById("result");
var su1 = su1_ctrl.value; //-> 컨트롤에 입력된 value를 읽어온 것
var su2 = su2_ctrl.value;
if(regular_number.test(su1)==false){
alert("1-4자리의 숫자만 입력하세요.");
su1_ctrl.value='';//값지우기
su1_ctrl.focus(); //입력 포커스 지정
return;
}
if(regular_number.test(su2)==false){
alert("1-4자리의 숫자만 입력하세요.");
su2_ctrl.value='';//값지우기
su2_ctrl.focus(); //입력 포커스 지정
return;
}
var result = parseInt(su1) - parseInt(su2);
//결과값 넣기
result_ctrl.value = result;
}//end-minus
function multiply(){
var su1_ctrl = document.getElementById("su1"); //-> 컨트롤의 정보를 읽어온 것
var su2_ctrl = document.getElementById("su2");
var result_ctrl = document.getElementById("result");
var su1 = su1_ctrl.value; //-> 컨트롤에 입력된 value를 읽어온 것
var su2 = su2_ctrl.value;
if(regular_number.test(su1)==false){
alert("1-4자리의 숫자만 입력하세요.");
su1_ctrl.value='';//값지우기
su1_ctrl.focus(); //입력 포커스 지정
return;
}
if(regular_number.test(su2)==false){
alert("1-4자리의 숫자만 입력하세요.");
su2_ctrl.value='';//값지우기
su2_ctrl.focus(); //입력 포커스 지정
return;
}
var result = parseInt(su1) * parseInt(su2);
//결과값 넣기
result_ctrl.value = result;
}//end-multiply
function divide(){
var su1_ctrl = document.getElementById("su1"); //-> 컨트롤의 정보를 읽어온 것
var su2_ctrl = document.getElementById("su2");
var result_ctrl = document.getElementById("result");
var su1 = su1_ctrl.value; //-> 컨트롤에 입력된 value를 읽어온 것
var su2 = su2_ctrl.value;
if(regular_number.test(su1)==false){
alert("1-4자리의 숫자만 입력하세요.");
su1_ctrl.value='';//값지우기
su1_ctrl.focus(); //입력 포커스 지정
return;
}
if(regular_number.test(su2)==false){
alert("1-4자리의 숫자만 입력하세요.");
su2_ctrl.value='';//값지우기
su2_ctrl.focus(); //입력 포커스 지정
return;
}
if(su2==0){
alert("연산이 불가능합니다. 0으로 나눌 수 없습니다.");
su2_ctrl.value='';//값지우기
su2_ctrl.focus(); //입력 포커스 지정
return;
}
var result = Math.round((parseInt(su1) / parseInt(su2))*100)/100;
//결과값 넣기
result_ctrl.value = result;
}//end-divide
function mod(){
var su1_ctrl = document.getElementById("su1"); //-> 컨트롤의 정보를 읽어온 것
var su2_ctrl = document.getElementById("su2");
var result_ctrl = document.getElementById("result");
var su1 = su1_ctrl.value; //-> 컨트롤에 입력된 value를 읽어온 것
var su2 = su2_ctrl.value;
if(regular_number.test(su1)==false){
alert("1-4자리의 숫자만 입력하세요.");
su1_ctrl.value='';//값지우기
su1_ctrl.focus(); //입력 포커스 지정
return;
}
if(regular_number.test(su2)==false){
alert("1-4자리의 숫자만 입력하세요.");
su2_ctrl.value='';//값지우기
su2_ctrl.focus(); //입력 포커스 지정
return;
}
if(su2==0){
alert("연산이 불가능합니다. 0으로 나눌 수 없습니다.");
su2_ctrl.value='';//값지우기
su2_ctrl.focus(); //입력 포커스 지정
return;
}
var result = parseInt(su1) % parseInt(su2);
//결과값 넣기
result_ctrl.value = result;
}//end-mod
function exp(){
var su1_ctrl = document.getElementById("su1"); //-> 컨트롤의 정보를 읽어온 것
var su2_ctrl = document.getElementById("su2");
var result_ctrl = document.getElementById("result");
var su1 = su1_ctrl.value; //-> 컨트롤에 입력된 value를 읽어온 것
var su2 = su2_ctrl.value;
if(regular_number.test(su1)==false){
alert("1-4자리의 숫자만 입력하세요.");
su1_ctrl.value='';//값지우기
su1_ctrl.focus(); //입력 포커스 지정
return;
}
if(regular_number.test(su2)==false){
alert("1-4자리의 숫자만 입력하세요.");
su2_ctrl.value='';//값지우기
su2_ctrl.focus(); //입력 포커스 지정
return;
}
var result = parseInt(su1) ** parseInt(su2);
//결과값 넣기
result_ctrl.value = result;
}//end-exp
</script>
</head>
<body>
<div id="title"><h1>계산기</h1></div>
수1 : <input id="su1" value="0" onclick="clear1()"><br>
수2 : <input id="su2" value="0" onclick="clear2()"><br>
<div id="operator">
<input type="button" class="btn-success" value="+" onclick="javascript:plus();">
<input type="button" class="btn-success" value="-" onclick="minus();">
<input type="button" class="btn-success" value="*" onclick="multiply();">
<input type="button" class="btn-success" value="/" onclick="divide();">
<input type="button" class="btn-success" value="%" onclick="mod();">
<input type="button" class="btn-success" value="**" onclick="exp();">
<input type="button" class="btn-success" value="초기화" onclick="clearAll();">
</div>
<div id="keypad">
<input type="button" class="" value="1" onclick="">
<input type="button" class="" value="2" onclick="">
<input type="button" class="" value="3" onclick="">
</div>
<br>
결과 : <input id="result">
</body>
</html>
|
cs |
[결과]
'BackEnd > WEB' 카테고리의 다른 글
| JSP_국비_DAY47 (0) | 2022.05.06 |
|---|---|
| JDBC 미니프로젝트 2일차 (0) | 2022.05.05 |
| 국비_DAY45 (0) | 2022.05.03 |
| 국비_DAY44 (0) | 2022.05.02 |
| CSS_국비_DAY43 (0) | 2022.04.29 |
