-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjavascript1.html
More file actions
248 lines (197 loc) · 7.78 KB
/
javascript1.html
File metadata and controls
248 lines (197 loc) · 7.78 KB
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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 기본 문법</title>
<!-- Javascript는 HTML 문서 안에서 실행 합니다. -->
<!-- <script>...<script> -->
<!-- 자바스크립트는 head 태그 사이에 위치, body 태그 안에도 위치가 가능 -->
<!-- HTML의 문서는 1라인부터 아래도 실행된다!
-> 필요에 따라 자바스크립트의 위치를 변경해주어야한다. -->
<script>
// alert() 함수는 사용자에게 경고 메시지를 출력합니다.
// alert('Javascript Hello~!')
</script>
<script>
// 브라우저가 html문서의 내용을 모두 로드 했을 때 발생하는 이벤트 속성
// 이벤트 속성에는 핸들러(이벤트 처리 함수)를 등록한다.
window.onload = function(){
var list = '';
list += '<ul>\n';
list += ' <li>Javascript</li>\n';
list += ' <li>jQuery</li>\n';
list += '</ul>';
console.log('출력할 html',list); // 모든 타입의 데이터를 출력
// html 문서의 body 태그에 list가 가지는 문자열을 HTML 태그로 삽입
// 문서 객체 캐스팅 -> 태그를 자바스크립트의 객체로 만드는 것.
document.body.innerHTML = document.body.innerHTML + list;
//문서 객체를 캐스팅 -> html 컨트롤
}
</script>
</head>
<body>
<!-- <script>
alert('body 태그에 스크립트를 작성했습니다.');
</script> -->
</body>
<!-- <script>
alert('body 태그 밖에 \n "스크립트"를 작성했습니다.');
alert('<a href="https://www.naver.com"> \n naver \n </a>');
alert("<a href=\"https://www.naver.com\">naver</a>");
</script> -->
</html>
<!-- <script>
// Javascript 에서의 숫자는 정수와 실수를 구분하지 않고 하나의 타입으로 관리한다.
// 숫자 -> number 타입 하나로 처리
var num = 10;
alert(num);
num = 10.2;
alert(num);
alert(5+3*2); // 3*2 -> 5+6
alert((5+3)*2);
// ; 문장의 종결을 의미하는 ;은 생략 가능, 하지만 붙이자!!!
</script> -->
<!-- <script>
// 비교 연산 : > < >= <= == !=
// 문자열간의 크기 비교가 가능 -> 유니코드 값으로 비교!
alert('가 == 가 : '+('가' == '가'));
alert('가 == 하 : '+('가' == '하'));
alert('가 > 하 : '+('가' > '하'));
alert('가 < 하 : '+('가' < '하'));
// true => 1, false => 0
alert('true > false : '+ (true>false));
</script> -->
<!-- <script>
alert(true);
alert(false);
// 논리부정연산자 : !
alert('!true : ' + !true);
alert('!false : '+ !false);
var num = 10;
var chk = num > 0 && num < 100; // 0보다 크고 100보다 작은지 체크 논리연산
if(num>0){
// 조건식의 결과가 true 일 때 실행하는 블록({})
alert('num 변수의 값은 0보다 큰 값 입니다.');
}
if(chk){
alert('num의 값은 0보다 크고 100보다 작은 값입니다.')
}
</script> -->
<!-- <script>
var value = 10;
value += 20;
alert(value);
// var value = 'Javascript';
value = 'Javascript';
alert(value);
</script> -->
<!-- <script>
var func = function(){
}
var obj = {};
//자료형의 확인(검사) : typeof
console.log('\'Srting\'의 type : ', typeof('String'));
console.log('273의 type : ', typeof(273));
console.log('true의 type : ', typeof true);
console.log('function의 type : ', typeof(func));
console.log('object의 type : ', typeof(obj));
console.log('정의되지 않은 변수 type : ', typeof(value11));
// if(typeof(273)=='number'){
// alert('숫자 데이터 입니다.');
// }
</script> -->
<!-- <script>
// window 객체에서 제공하는 기본 함수
alert('String'); // 데이터를 출력
var str = prompt('숫자를 입력하세요~!!!');
console.log('str : ', typeof str);
alert(str);
var chk = confirm('정말 삭제하시겠습니까?');
console.log('chk : ', typeof chk);
if(chk){
alert('데이터를 삭제하는 코드가 실행됩니다.');
} else {
alert('데이터를 삭제하지 않습니다.');
}
</script> -->
<!-- <script>
// 문자열과 다른 타입간의 덧셈 : 문자열 우선 연산
console.log(273 + '22'); // 숫자 + 문자 => 문자 + 문자
console.log('273' + 22); // 문자 + 숫자 => 문자 + 문지
console.log('273' + '22'); // 문자 + 문자
console.log(273+22); // 숫자 + 숫자
// 덧셈을 제외한 나머지 사칙연산의 경우 숫자 우선으로 연산
console.log('12*5');
console.log('12'*5);
var year = prompt('태어난 연도를 입력해주세요');
var numberVal = Number(year);
// Number() -> 숫자타입으로 강제적인 형변환, 문자열이 숫자 형식이 아닌경우 NaN 반환.
console.log('numberVal type : ', typeof numberVal);
console.log(numberVal);
console.log(numberVal + 10);
console.log(isNaN(numberVal));
// isNaN(숫자데이터) -> NaN 일때 true값 반환.
//if(!isNaN(numberVal)){
//if(Boolean(numberVal) ){
if(!!numberVal){
//year 문자열을 숫자 타입으로 자동 형변환
alert(2021-year + '살 입니다.');
} else {
alert('정상적인 숫자 데이터를 입력해주세요.');
}
// boolean 타입으로 강제 형변환
// Boolean() => 논리값 반환
// 0, NaN, ''(공백문자), null, undefined => false
// 나머지 모두 true
console.log('Boolean(0)', Boolean(0));
console.log('Boolean(NaN)', Boolean(NaN));
console.log('Boolean(\'\')', Boolean(''));
console.log('Boolean(null)', Boolean(null));
console.log('Boolean(undefined)', Boolean(undefined));
// 논리부정 연산자 사용시
// 0, NaN, '', null, undefined 다섯개의 데이터는 자동으로 형변환 -> false
console.log(!!0);
console.log(!!NaN);
console.log(!!'');
console.log(!!null);
console.log(!!undefined);
// 비교연산의 경우 0 == false, '' == false => true
console.log('0 == false', 0 == false);
console.log('\'\' == false', ''==false);
console.log('\'\' == 0', ''== 0);
// 0 === false => false, '' === false => false
// 데이터의 비교와 타입의 일치여부도 확인
console.log('0 === false', 0 === false);
console.log('\'\' === false', '' === false);
console.log('\'\' === 0 ', '' === 0);
console.log('\'273\' === 273', '273' === 273);
// 매개변수로 값을 받는다.
// window.event 객체를 핸들러 함수의 매개변수로 받는다.
// e <- 매개변수
true || alert('좌변이 true입니다.');
numberVal || alert('좌변이 false 입니다.');
//e == null || alert('좌변이 false 입니다.');
</script> -->
<script>
// 배열 : 여러개의 변수를 하나의 묶음으로 관리
// 배열의 생성 : []
// 배열의 요소는 타입으로 제한을 두지 않는다.
// 배열도 객체다.
var arr1 = [11,22,33,44,55];
console.log(typeof arr1);
//alert(arr1);
console.log('arr1', arr1)
// 요소는 어떠한 타입이 와도 된다.
var arr2 = [100, 'String', function (){}, {}, [1,100]]
console.log('arr2', arr2);
// for 반복문을 이용한 요소 출력
for(var i=0; i<arr2.length; i++){
console.log(i, arr2[i]);
}
// for in 반복문을 통해서 배열의 요소를 출력
for(var e in arr1){
console.log(arr1[e]);
}
</script>