자바스크립트(Javascript) DOM document.write() 함수로 화면에 텍스트를 출력하기

 

환경: Eclipse Mars

 

디버그나 화면에 텍스트를 출력할때 많이 쓰고 있는 write() 함수에 대해 알아 보겠습니다. Document 오브젝트의 함수로 인수 값을 웹 브라우저에 표현하는데, html 코드가 포함되어 있으면 그대로 적용합니다. 주의할 것은 자동으로 줄바꿈이 적용되지 않습니다. 여러 값을 한번에 출력하면 붙어서 나옵니다. 

 

문법은 다음과 같습니다. "," 을 구분자로 여러 값을 한번에 출력할 수 있습니다. 단, 줄 바꿈이 되지 않습니다. 줄 바꿈을 하기 위해 <br> 태그를 함께 써야 합니다.    

 

<script>

    document.write(value1, value2, ...);

</script>

 

 write() 함수는 문자열에 태그가 포함되어 있으면 문법을 적용합니다. 샘플처럼 html <h2> 태그가 그대로 적용이 되었습니다. 여러 개의 인수를 한번에 넣으면 줄 바꿈이 되지 않기 때문에 태그와 함께 써 줍니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
	body {background-color: #e7e7e7;}
</style>
<script>
    document.write("<h2>Hellow World</h2>",
    			   "Hellow World1 ",
    			   "Hellow World2 ");
</script>
</head>
<body>
</body>
</html>

 

자바스크립트(Javascript) DOM document.write() 함수로 화면에 텍스트를 출력하기

 

 텍스트뿐만 아니라 날짜를 포함하고 있는 내장 객체를 인수로 넘기면 현재 날짜와 시간을 표현합니다. 아래에 표시된 시간 형식은 웹 브라우저에 설정된 형식을 따릅니다.

<script>
    document.write(Date());
</script>

 

자바스크립트(Javascript) DOM document.write() 함수로 화면에 텍스트를 출력하기

 

 다음 샘플 소스는 새롭게 띄운 창에 값을 출력하는 방법입니다. window.open 으로 창을 열고 리턴 값으로 팝업 윈도우 객체를 받습니다. 팝업 윈도우 객체의 document.write 함수를 이용하면 새롭게 띄운 팝업창 화면에 값을 출력할 수 있습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
	body {background-color: #e7e7e7;}
</style>
<script>
function newWindow() {
    var newWindow = window.open("", "MsgWindow", "width=200, height=100");
    newWindow.document.write("<p>새로운 창에 데이터 출력</p>");
}
</script>
</head>
<body>
<button type="button" onclick="newWindow()">새창띄우기</button>
</body>
</html>

 

자바스크립트(Javascript) DOM document.write() 함수로 화면에 텍스트를 출력하기

Posted by 녹두장군