반응형
디버그나 화면에 텍스트를 출력할때 많이 쓰고 있는 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>
▼ 텍스트뿐만 아니라 날짜를 포함하고 있는 내장 객체를 인수로 넘기면 현재 날짜와 시간을 표현합니다. 아래에 표시된 시간 형식은 웹 브라우저에 설정된 형식을 따릅니다.
<script>
document.write(Date());
</script>
▼ 다음 샘플 소스는 새롭게 띄운 창에 값을 출력하는 방법입니다. 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>
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 ▶ 크롬 브라우저 웹 페이지 소스 보기, HTML 디자인 확인하기 ▶ 윈도우 메모장에 HTML 문서 작성하는 방법 ▶ HTML 단락 들여쓰기 blockquote 태그 사용하는 방법 ▶ HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 |
반응형
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트(Javascript) Date() 함수 (0) | 2024.08.08 |
|---|---|
| 자바스크립트(Javascript) 웹 페이지 자동 새로 고침 적용하기 (3) | 2024.04.17 |
| 자바스크립트(JavaScript) 웹 소스 테스트 사이트 소개 (0) | 2024.04.05 |
| 구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법 (0) | 2024.03.20 |
| 자바스크립트(Javascript) escape, encodeURI, encodeURIComponent 인코딩 함수 (1) | 2024.01.15 |
| 자바스크립트(Javascript) 글자수 체크하는 방법 (5) | 2024.01.12 |
| 자바스크립트(Javascript) 문자열에 쓰이는 특수 문자를 기호로 넣는 방법 (1) | 2024.01.06 |
| 자바스크립트 match() 일치하는 문자열 검색 (1) | 2024.01.01 |
