반응형
<최종 화면> - window (최상위) , screen, location, history, navigator 객체에 대해 알아본다.
우선 버튼을 눌렀을 시, 현재창에서 특정 사이트가 열리게 해보자.
현재 창이 아닌, 새로운 창으로 띄워보자.
빈 윈도우를 띄워보자.
새로운 비 윈도우에 글씨도 쓸 수 있다.
윈도우를 닫는 버튼 내용을 적어보자.
그런데 문제는 현재 창이 닫힌다.. (예상은 새로 띄운 창을 닫고 싶었지만)
버튼 두개를 추가하여 열고, 닫아 보자.
변수로 쉽게 제어할 수 있다.
이제 새로 창을 띄우고, 창을 움직여 보자.
move window 버튼도 해보자. 누르때마다. 창이 (10,10)으로 이동한다.
setTimeout을 이용해 몇초 후에 자동 실행되게 해보자.
setInterval을 이용해서 1초마다 콜백함수를 실행해보자.
인코딩에 대해 알아보자.
디코딩에 대해 알아보자.
encodingURI()에 대해 알아보자.
encodinURICompenent()에 대해서 알아보자.
문자열을 js코드로 해석하는 함수에 대해 알아보자.
우선 현재는 당연히 문자로 인식하기 때문에, 계산하지 않고 있는 그대로 나온다.
js 코드로 해석하는 함수를 이용 해보자.
숫자인지 아닌지 판단하는 함수도 알아보자. (단 자동으로 parse도 하여 숫자를 판단한다.)
해상도 정보를 알려주는 screen 객체에 대해서 알아보자.
버튼을 누르면, 전체 화면으로 새창을 띄워보자.
웹 브라우저 사이즈도 알 수 있다.
주소에 관련된 location 객체에 대해서 알아보자.
3개의 버튼을 만들고, 주소를 이용해서 문서를 열어보자.
네이버로 새로운 문서를 열어보겠다. 여기에선 뒤로가기 버튼이 활성화 된다.
현재문서 다시 열기를 해보자.
이제 새로운 문서로 열어보자. (여기에선 assign()과 차이가 있다. 바로 뒤로가기가 없다는 것이다.)
방문한 페이지 수도 알 수 있다.
<복붙용 코드>
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM</title>
</head>
<body>
<!-- BOM(Browser Object Model) -->
<!-- 1. Window : 최상위 객체 -->
<!-- 주요 메소드들 -->
<!-- 1) open, close() -->
<button onclick="aaa()">naver</button>
<script>
function aaa(){
// open() : 새로운 창(window)를 여는 메소드
}
// 옵션들 : 속성에 넣을 수 있는 것들은 교재 or w3school
var specs= 'width=500, height=200, left=200, top=150';
</script>
<!-- 빈 윈도우 띄우기 -->
<button onclick="bbb()">message window</button>
<script>
function bbb(){
var win= window.open('','','width=500, height=200');
win.document.write('<h4>Hello world!! </h4>');
win.document.write('<p>This is new Window </p>');
}
</script>
<!-- 윈도우 닫기 -->
<button onclick="ccc()">close window</button>
<script>
function ccc(){
//최상위 객체인 window는 생략이 가능함!!
window.close();
}
</script>
<!-- 윈도우 열고 닫기 -->
<button onclick="ddd()">open</button>
<button onclick="eee()">close</button>
<script>
var win;
function ddd(){
win= open('','','width=500, height=200');
win.document.write('new window');
}
function eee(){
win.close();
}
</script>
<hr>
<h4>moveTo, moveBy</h4>
<button onclick="ooo()">open window</button>
<button onclick="mmm()">move window</button>
<script>
function ooo(){
//w는 var 키워드가 없으므로 전역변수로 만들어짐
w= open('','','width=500, height=200');
w.document.write('오늘의 특가 상품입니다.');
w.moveTo(300, 100);
}
function mmm(){
w.moveBy(10,10); //현재위치에서의 차이
w.focus(); //움직였을 때 상위 위치로..
}
</script>
<hr>
<h4>setTimeOut, setInterval, clearInterval</h4>
<button onclick="showAlert()">3초 후에 경고창 띄우기</button>
<script>
function showAlert(){
//두 번째 파라미터의 시간이 경과한 후 첫번째 파라미터 함수가 자동 실행됨
setTimeout( function(){alert('3초 경과');},3000 );
}
</script>
<br>
<input type="text" id="in1" value="0">
<button onclick="startCount()">1초마다 카운트 증가!!</button>
<button onclick="stopCount()">카운트 종료!!</button>
<script>
var show= function(){
var e= document.getElementById('in1');
e.value=parseInt(e.value)+1; //input 요소의 value는 string임!!
}
var a;
function startCount(){
a=setInterval(show,1000); //1초 마다 콜백함수(show)를 실행!!
}
function stopCount(){
clearInterval(a);
}
</script>
<hr>
<!-- 기타 window의 쓸만한 메소드들 -->
<script>
// 인코딩 함수
// 인터넷 주소에는 한글이 인식되지 않기에 이를 암호화(encoding) 작업이 필요함.
// 1. escape() - 영문, 숫자, 일부 특수문자(@,*,-,_,+,.,/)를 제외하고 모두 인코딩
document.write(a);
document.write('<br>');
//1.1 디코딩 함수 : 인코딩 된 것을 원래대로 돌리는 함수
var a1= unescape(a);
document.write(a1);
document.write('<hr>');
//2. encodingURI()- 인테넷 주소에 쓰는 특수문자(:,;,/,?,&)도 인코딩 한하는 방식[가장 많이 사용하는 방식!!]
document.write(a);
document.write('<br>');
//2.1 디코딩 함수 : 인코딩 된 것을 원래대로 돌리는 함수
var a1= decodeURI(a);
document.write(a1);
document.write('<hr>');
//3. encodingURIComponent()- 영문자/숫자 제외하고 모두 인코딩
document.write(a);
document.write('<br>');
//3.1 디코딩 함수 : 인코딩 된 것을 원래대로 돌리는 함수
var a1= decodeURIComponent(a);
document.write(a1);
document.write('<hr>');
// eval() - 문자열을 js코드로 해석해주는 함수
var x='10+2*6';
document.write(x+"<br>");
var z= eval('10+2*6');
document.write(z+"<br>");
// 기타함수
// NaN()
document.write(isNaN(10)+"<br>"); //숫자가 아니냐?? false
document.write(isNaN('10')+"<br>"); //숫자가 될수 있으므로 false [parse될 수 있는 값은 NaN이 아니라고 봄]
document.write(isNaN('Hello')+"<br>"); //숫자로 parse 될 수 없는 값일때 true
//유효한 숫자
document.write(isFinite(10)+"<br>"); //유한한 숫자면 true
document.write(isFinite(10/0)+"<br>"); //무한대일 경우 false
</script>
<!-- window의 하위객체들... -->
<!-- 2. document는 이미 많이 해봐서.. -->
<!-- 원래는 window.document.write()가 원래 표기법 -->
<!-- 3. screen : 화면의 사이즈 및 color정보 -->
<hr>
<h2>screen 객체</h2>
<script>
//모니터의 화면 해상도
document.write('작업표시줄을 제외 사이즈 : '+screen.availWidth+" , "+ screen.availHeight+"<br>");
// 전체화면 창 띄울때 사용
function fullWindow(){
var specs= 'width='+screen.availWidth+', '+'height='+screen.availHeight;
open('','',specs);
}
</script>
<button onclick="fullWindow()">전체화면 윈도우</button>
<!-- 브라우저 창(윈도우)의 사이즈?? window객체에게 -->
<script>
document.write('웹브라우저 document영역 사이즈 : '+window.innerWidth+", "+window.innerHeight+"<br>");
document.write('웹브라우저 전체 사이즈 : '+window.outerWidth+", "+window.outerHeight+"<br>");
</script>
<!-- 4. location: URL 정보(GPS같은 위치정보 아님) -->
<hr>
<h2>location 객체</h2>
<script>
document.write(location.href+"<br>"); //현재 문서의 주소
document.write(location.protocol+"<br>");
document.write(location.pathname+"<br>");
</script>
<!-- location의 주요 메소드 -->
<button onclick="assign()">새로운 문서 열기</button>
<button onclick="reload()">현재 문서 다시 열기</button>
<button onclick="replace()">새로운 문서로 대체하여 열기</button>
<script>
function assign(){
location.assign('http://www.naver.com');
}
function reload(){
location.reload(); //현재 문서 다시 열기
}
function replace(){
location.replace('http://www.naver.com');
}
</script>
<!-- 5. history : 방문한 URL정보 기록 객체 -->
<hr>
<h2>hostory 객체</h2>
<script>
document.write('방문한 페이지 수 : '+history.length+"<br>");
function back(){history.back();}
function forward(){history.forward();}
function go(){history.go(-2);}
</script>
<button onclick="back()">뒤로</button>
<button onclick="forward()">앞으로</button>
<button onclick="go()">2칸 뒤</button>
<!-- 6. navigator : 브라우저 정보 [별 필요 없음] -->
<hr>
<h2>navigator 객체</h2>
<script>
// 사용하는 브라우저의 정보 얻어오기
document.write("<p>"+navigator.appCodeName+"</p>");
document.write("<p>"+navigator.appName+"</p>");
document.write("<p>"+navigator.appVersion+"</p>");
document.write("<p>"+navigator.platform+"</p>");
document.write("<p>"+navigator.userAgent+"</p>");
</script>
</body>
</html>
|
반응형
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글
| HTML+Java script (기초) Key Event (키보드 이벤트) (0) | 2019.12.17 |
|---|---|
| HTML+Java script (기초) 이벤트 처리, 정규표현식 (0) | 2019.12.17 |
| HTML+Java script (기초) DOM 요소(속성 변경, 노드 동적 생성) (0) | 2019.12.16 |
| HTML+Java script (기초) DOM (트리 구성 요소 제어 요소,속성,텍스트 ) (0) | 2019.12.16 |
| HTML+Java script (기초) Exception, throw (예외처리) (0) | 2019.12.13 |
댓글