예제 8-9. HTML 문서 작성 연습 페이지 만들기
WEB/JAVASCRIPT-CONCEPT 2017. 10. 31. 11:55 |* document의 열기와 닫기, open()과 close()
현재 브라우저 윈도우에 출력된 HTML 텍스트를 지워버리고 새로운 내용을 출력하려면 먼저 document.open()을 출력하여 document 객체를 열어야 한다.
'열기'는 document 객체에 만들어진 현재 HTML 텍스트를 모두 지우고 새로운 HTML 텍스트를 받아들일 준비를 하는것이다.
그러고 나서 document.write()로 HTML 텍스트를 쓰고 document.close()를 호출하여 document 객체를 닫는다.
* window와 document
window는 document 객체가 그려지는 브라우저 윈도우를 나타내는 객체이다.
document는 HTML 문서 전체를 나타내는 객체이다.
window가 소멸되면(닫히면) 그 속에 담긴 document도 소멸된다.
// 현재 브라우저 윈도우에 새로운 HTML 텍스트를 출력하는 자바스크립트 코드
1 2 3 4 5 | document.open(); document.write("<html></head>...<body>안녕하세요.") document.write("..."); document.write("<body></html>"); document.close(); |
document.close()가 실행된 후에는 HTML 텍스트를 덧붙일 수 없다.
// 새 윈도우를 열고 그 곳에 HTML 문서(HTML 텍스트)를 출력하는 사례이다.
// HTML 텍스트를 모두 쓴 후에는 당연히 닫기를 해야 한다.
1 2 3 4 5 6 | var newwin = window.open("","outWin",""); // 새 윈도우 열기 newWin.document.open(); // newWin 윈도우의 document 객체 newWin.document.write("<html></head>...<body>안녕하세요.") newWin.document.write("..."); newWin.document.write("<body></html>"); newWin.document.close(); | 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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML 문서 작성기 만들기</title> <script> var win=null; function showHTML() { if(win == null || win.closed) win = window.open("", "outWin", "width=250,height=150"); var textArea = document.getElementById("srcText"); win.document.open(); win.document.write(textArea.value); win.document.close(); } </script> </head> <body> <h3>HTML 문서 작성기 만들기 </h3> <hr> <p>아래에 HTML 문서를 작성하고 버튼을 클릭해 보세요. 새 윈도우에 HTML 문서가 출력됩니다.</p> <textarea id="srcText" rows="10" cols="40"></textarea> <br> <br> <button onclick="showHTML()">HTML 문서 출력하기</button> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 9-1. HTML 태그 내에 이벤트 리스너 작성. 예제 9-2. DOM 객체의 이벤트 리스너 프로퍼티에 리스너 등록. 예제 9-3. addEventListener() 사용. 예제 9-4. 익명 함수로 이벤트 리스너 작성 (0) | 2017.10.31 |
|---|---|
| 예제 8-10. HTML 태그의 동적 추가 및 삭제 (0) | 2017.10.31 |
| 예제 8-8. document가 닫힌 후 document.write()를 잘못 사용하는 예 (0) | 2017.10.31 |
| 예제 8-7. write()와 writeIn()활용 (0) | 2017.10.31 |
| 예제 8-6. 태그 이름을 DOM 객체 찾기, getElementsByTagName() (0) | 2017.10.31 |