윈도우 내에 표시된 문서를 조작하는 것은 DOM객체의 역할이다.
Document객체에는 많은 프로퍼티와 메서드가 있으나 모두 DOM과 대응이 되므로 보통 DOM을 이용한다.
DOM에 대응되지 않는 기능만 확인해본다.
쿠키 저장/확인 가능
쿠키는 클라이언트에 저장되는 데이터.
스크립트로부터 필요한 정보를 유지하기 위해 사용
아이디 기억하기, 비회원 장바구니 등
cookietest.html
|
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
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document객체</title>
</head>
<body>
<script type="text/javascript">
function setCookie(name, value, expires, domain, path, secure){
var c = '';
c += name + '=' + encodeURIComponent(value);
if(expires){
var exp = new Date();
exp.setDate(exp.getDate() + expires);
c += '; expires=' + exp.toGMTString();
}
if(domain){ c += '; domain=' + domain; }
if(path) { c += '; path=' + path; }
if(secure){ c += '; secure'; }
document.cookie = c;
}
function getCookie(name){
var cs = document.cookie.split(';');
for(var i = 0; i < cs.length; i++){
var kv = cs[i].split('=');
if(kv[0] == name){ return decodeURIComponent(kv[1]); }
}
return null;
}
var cnt = getCookie('js_cnt');
cnt = cnt ? ++cnt : 1;
setCookie('js_cnt', cnt, 90);
document.write('당신은 이 사이트에 ' + cnt + '회, 액세스하였습니다.');
</script>
</body>
</html>
|
cs |
쿠키를 구성하는 파라미터
|
파라미터 |
설명 |
|
쿠키명 |
쿠키를 식별하기 위한 이름. 영어, 숫자 이외에는 encodeURIComponent함수로 인코딩 필요 |
|
expires |
쿠키의 유효시간(그리니치 표준시). 시간이 지난 쿠키는 브라우저를 닫는 시점에 삭제 |
|
domain |
쿠키가 유효한 도메인. 지정된 도메인에 요청 할 때에만 해당 쿠키를 전송함. |
|
path |
쿠키가 유효한 경로. 지정된 경로 하위에 대해서만 요청에 쿠키를 전송 |
|
secure |
SSL통신에서만 쿠키를 전송할 것인지 지정 |
스크립트에서 문자열 출력하기
document.writeln() 메서드를 이벤트 핸들러 내에서 사용하는 경우 주의
writelntest.html - 정상-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>writeln메소드</title>
</head>
<body>
안녕하세요, 여러분！<br />
<script type="text/javascript">
document.writeln('안녕하세요, JavaScript！');
</script>
</body>
</html>
|
cs |
기존 문서에 데이터를 추가하여 출력
writeln2test.html - 문제 있음 -
페이지 로드 후 새로운 문서에 write하게되어 기존 문서에 쓰여지지 않음.
중요) 페이지 출력(load)가 완료된 후에 writeln을 호출하면 새로운 문서를 open한다.
즉 이벤트 핸들러 내에서는 writeln을 사용하지 말 것!
document.writeln()의 용도는
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>writeln메소드</title>
<script type="text/javascript">
window.onload = function() {
alert(document.title);
document.writeln('안녕하세요, JavaScript！');
}
</script>
</head>
<body>
<script>
alert(document.title);
</script>
안녕하세요, 여러분！<br />
</body>
</html>
|
cs |
- 디버그 용도의 변수 출력
- 자식 윈도우에 대해 컨텐츠 출력
writeOpentest.html
|
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
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>write메소드</title>
<script type="text/javascript">
<!--
function winOpen(){
var subwin = window.open('','Child','width=200, height=200');
subwin.document.open('text/html');
subwin.document.writeln('입력값：');
subwin.document.writeln(subwin.opener.document.fm.data.value);
subwin.document.writeln('<br /><input type="button" value="닫기" ');
subwin.document.writeln('onclick="self.close();" />');
subwin.document.close();
}
//-->
</script>
</head>
<body>
<form name="fm">
<input type="text" name="data" value="출력되는 문자열" />
<input type="button" value="열기" onclick="winOpen()" />
</form>
</body>
</html>
|
cs |
설명
subwin.document.open('text/html'); //문서 출력의 시작 의미(생략가능)
subwin.document.writeln('입력값：');
subwin.document.writeln(subwin.opener.document.fm.data.value);
subwin.document.writeln('닫기" ');
subwin.document.writeln('onclick="self.close();" />');
subwin.document.close(); //문서 출력의 종료(필수)
subwin.opener. ~ 라고 작성하는 것은 자식 윈도우에서 자신을 오픈한 부모 윈도우를 참조하는 것.
서브윈도우를 닫고자 하는 경우 self.close() 를 사용한다.
self는 현재의 서브 윈도우를 나타내는 Window객체이다.
'교육자료 > Javascript' 카테고리의 다른 글
| 17-7. Screen 브라우저 객체 (0) | 2019.05.13 |
|---|---|
| 17-6. Navigator 브라우저 객체 (0) | 2019.05.13 |
| 17-4. Location 브라우저 객체 (0) | 2019.05.13 |
| 17-3. Form 브라우저 객체 (0) | 2019.05.13 |
| 17-2. Window 브라우저 객체 (0) | 2019.05.13 |