Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

디버그나 화면에 텍스트를 출력할때 많이 쓰고 있는 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() 함수로 화면에 텍스트를 출력하기

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법
크롬 브라우저 페이지 소스 보기, HTML 디자인 확인하기
윈도우 메모장에 HTML 문서 작성하는 방법
HTML 단락 들여쓰기 blockquote 태그 사용하는 방법
HTML 입력양식 input 태그 HTML5 추가된 type 타입 대한 설명
반응형
Posted by 녹두장군

댓글을 달아 주세요

  1. Favicon of https://seokd.tistory.com Damon11 2021.01.13 13:56 신고  댓글주소  수정/삭제  댓글쓰기

    write 내부에 '' 이 따옴표가 아니라
    `` (키보드 1 왼쪽에 있는, 물결기호랑 같이있는 버튼)을 사용하면 자동 줄바꿈이 가능합니다!