HTML DOM의 writeln() 메서드는 여러 개의 표현식(HTML 또는 JavaScript)을 문서(document)에 직접 작성할 수 있는 기능을 제공합니다. 일반적인 write() 메서드와 유사하지만, 각 인수 뒤에 줄바꿈 문자가 추가된다는 점이 다릅니다.
참고: 이 메서드는 문서에 기존 HTML 코드가 있을 경우 해당 내용을 덮어쓰기(overwrite)하며, 전달된 인수들은 새로운 줄에 추가됩니다.
구문 (Syntax)
writeln() 메서드의 기본 구문은 다음과 같습니다.
document.writeln(argument1, argument2, ...)
예제 (Example)
아래는 HTML DOM document 객체의 writeln() 메서드를 활용한 실제 예제입니다. 이 예제에서는 자식 창(child window)을 열고, 입력된 이름이 'admin'이 아닌 경우 해당 창에 '권한 없는 사용자'라는 경고 메시지를 writeln()으로 출력합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM writeln()</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-writeln( )</legend>
<input id="urlSelect" type="url" placeholder="Type URL here..."><br>
<input id="textSelect" type="text" placeholder="Full Name"><br>
<input type="button" value="Go To" onclick="openWindow()">
<input type="button" value="Close" onclick="closeWindow()">
<input type="button" value="Restore" onclick="restoreWindow()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var urlSelect = document.getElementById("urlSelect");
var textSelect = document.getElementById("textSelect");
var winSource;
function openWindow() {
browseWindow = window.open(urlSelect.value, "browseWindow", "width=400, height=200");
winSource = urlSelect.value;
browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Active";
if(textSelect.value !== 'admin')
browseWindow.document.writeln("<p><strong>Unauthorized User:</strong></p>", "<p>"+textSelect.value+"</p>");
}
function closeWindow(){
if(browseWindow){
browseWindow.close();
browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Closed";
}
}
function restoreWindow(){
if(browseWindow.closed){
browseWindow = window.open(winSource, "browseWindow", "width=400, height=200");
browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Restored";
}
}
</script>
</body>
</html>출력 결과 (Output)
위 예제를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
권한 없는 이름(admin이 아닌 값)을 입력한 상태에서 'Go To' 버튼을 클릭하면, 열린 자식 창에 다음과 같이 권한 없는 사용자라는 메시지와 함께 입력한 이름이 출력됩니다.
반면, 권한이 있는 이름('admin')을 입력한 상태에서 'Go To' 버튼을 클릭하면, 자식 창에 별도의 경고 메시지 없이 정상적으로 페이지가 로드됩니다.
정리
writeln() 메서드는 write() 메서드와 거의 동일하게 동작하지만, 각 인수 끝에 줄바꿈 문자(\n)를 추가한다는 차이점이 있습니다. 다만 문서 로딩이 완료된 후 호출하면 기존 내용이 모두 사라지므로, 주로 문서 초기화 단계나 새로 연 창(window.open)에 내용을 쓸 때 활용하는 것이 좋습니다.