예제 8-7. write()와 writeIn()활용
WEB/JAVASCRIPT-CONCEPT 2017. 10. 31. 11:31 |* document.write()와 document.writeIn()
브라우저는 HTML 문서를 로드하기 전 빈 상태의 document 객체를 생성한다.
그리고 HTML 문서를 위 아래로 해석하면서 HTML 태그들을 document 객체에 담아간다.
이 태그들은 곧장 DOM 객체로 만들어져 DOM 트리에 연결된다. </html> 태그를 만나면 document 객체를 완성하고 닫는다.
document.write()는 현재 document 객체에 담긴 내용의 끝에 HTML 텍스트를 추가하는 코드이다.
추가되는 HTML 텍스트는 DOM 객체로 바뀌고 DOM 트리에 추가된다. 그결과 삽입된 HTML 텍스트가 브라우저 화면에 출력된다.
document.write()는 document 객체가 닫히기 전에만 실행가능하다.
ex)
document.write("<h3>Welcome to my home</h3>");
document.write(2+3); // 합한 결과 5 출력
writeIn()은 HTML 텍스트에 '\n'을 덧붙여 출력한다. 브라우저는 '\n'을 공백 문자 한 개로 처리하므로 한 칸 띄는 효과 밖에 없다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>write()와 writeln()</title></head> <body> <h3>write()와 writeln()</h3> <hr> <script> document.write("<h3>동물원에 소풍갑시다</h3>"); document.write("<p style='color:blue'>날씨가 좋아 "); document.write("소풍갑니다</p>"); document.write(2+3); document.write("명입니다.<br>"); // 다음 줄로 넘어가기 document.writeln(5); // 다음 줄에 넘어가지 못함 document.writeln("명입니다.<br>"); </script> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 8-9. HTML 문서 작성 연습 페이지 만들기 (0) | 2017.10.31 |
|---|---|
| 예제 8-8. document가 닫힌 후 document.write()를 잘못 사용하는 예 (0) | 2017.10.31 |
| 예제 8-6. 태그 이름을 DOM 객체 찾기, getElementsByTagName() (0) | 2017.10.31 |
| 예제 8-5. document 객체의 프로퍼티 출력 (0) | 2017.10.31 |
| 예제 8-4. this 활용 (0) | 2017.10.30 |