1-3-4.출력
문법을 실습하려면 코드의 실행 결과를 화면에 찍어서 확인해 봐야 한다. 결과가
너무 뻔해 보여도 코드만 보는 것보다는 눈으로 실행 모습을 직접 확인하면서 진도를 나가야 확실히 이해했다는 느낌이 든다. 한국 사람은 지극히 당연한 것도 눈으로 직접 봐야 믿는 습성이 있다.
또 가변적인 값에 따라 흐름을 제어할 때는 사용자로부터 값을 입력받아야 할 필요도 있다. 그래서 여기서는 문법 학습에 앞서 기본적인 입출력 방법부터 알아 보기로 한다.
웹 페이지에 문자열을 출력할 때는 Document 내장 객체의 다음 메서드를 호출한다.
document.write(exp1,exp2,exp3,...)
document.writeln(exp1,exp2,exp3,...)
document.write가 출력 메서드의 이름이다. 괄호안에 출력하고 싶은 표현식을 콤마로 구분하여 나열하면 모든 값을 한꺼번에 연결하여 출력한다. 표현식 개수에 제한은 없으므로 얼마든지 많은 변수나 수식을 출력해 볼 수 있다.
docwrite.html
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>docwrite</title>
</head>
<body>
<script>
var
score = 88;
document.write("점수는 ", score, "입니다.");
</script>
</body>
</html>
score라는 변수를 화면에 출력했다. 값만 덜렁 출력하면 무슨 값인지 알기 어려우므로 앞뒤로 적당한 안내문을 넣었다. 변수 앞뒤로 문자열을 같이 출력했다. 실행하면 브라우저 화면에 score 변수의 실제값이 출력된다.
세 표현식을 각각 따로 전달하는 대신 + 연산자로 연결하여 하나의
표현식으로 전달해도 결과는 마찬가지이다. 문자열에 대한 + 연산자는
연결 동작으로 정의되어 있어 변수값을 문자열에 포함시켜 하나의 긴 문자열을 만들어 낸다.
document.write("점수는
" + score + "입니다.");
writeln 메서드는 write와
사용법이 동일하되 맨 끝에 개행 코드를 출력하여 강제 개행한다는 점이 다르다. 여러 줄을 출력할 때는 write 대신 writeln 메서드를 사용한다. 그러나 막상 이 메서드를 호출해도 개행이 제대로 되지 않는다. 다음
예제로 이 문제를 연구해 보자.
docwriteln.html
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>docwriteln</title>
</head>
<body>
<script>
document.write("토끼");
document.write("거북이");
document.write("<hr>");
document.writeln("토끼");
document.writeln("거북이");
document.write("<hr>");
document.write("토끼<br>");
document.write("거북이");
</script>
</body>
</html>
수평선 사이 사이에 여러 가지 방법으로 토끼와 거북이를 연이어 출력해 보았다.
윗 줄은 write 메서드를 두 번 호출하고 가운데 줄은
writeln 메서드를 두 번 호출했다. writeln은 각 출력 사이에 개행 코드를 삽입하므로
토끼와 거북이가 각줄에 따로 나올 것 같지만 막상 실행해 보면 원하는 결과와는 다르다.
토끼와 거북이 사이에 공백이 하나 더 들어가 있을 뿐 결국 같은 줄에 출력된다.
이렇게 되는 이유는 writeln 메서드는 개행 코드를 실제로 출력하지만 웹 브라우저가 HTML 문서의 개행 코드를 무시하기 때문이다. HTML 문서에서
물리적인 개행 코드는 아무리 많아도 공백 하나와 같을 뿐이다. 같은 이유로 문자열 중간에 \n 확장열을 넣어 개행해도 실제 개행은 되지 않는다.
스크립트가 출력하는 문서는 결국 HTML이며 웹 브라우저는 HTML 방식대로 문서를 출력한다. writeln 메서드가 출력하는
개행 코드가 제대로 효과를 발휘하려면 스크립트를 <pre> 태그로 감싸는 방법을 생각할 수
있다. <pre> 태그 안에서는 공백이나 개행 코드가 그대로 유지된다. 그러나 두 줄 출력하고자 매번 <pre> 태그를 쓰는
것은 너무 번거롭다.
HTML 문서가 요구하는대로 개행할 때는 <br> 태그를 사용하는 것이 좋다. 마지막 줄은 write 메서드로 출력하되 토끼 다음에 <br> 태그를
같이 출력하여 HTML 문서상에서 개행하도록 했다.
<br>태그에 의해 두 동물이 개행되어 출력된다. 굳이 두 번에 나누어 출력할
필요 없이 그냥 한번에 "토끼<br>거북이"로 출력해도 상관없으며 토끼와 거북이를 각각의 <p> 태그로
감싸는 것도 가능하다. HTML 문서에서의 개행 여부는
<br> 태그로 결정하며 그래서 writeln 메서드는 실제로 별 실용성이 없다.
문서가 로드되기 전의 출력은 새 문서에 누적적으로 출력된다. 그래서 write 메서드로 토끼와 거북이를 순서대로 출력하면 두 동물이 문서에 차례대로 나타난다. 그러나 문서가 다 로드되어 화면에 표시된 상태에서 write 메서드는
새로운 출력을 문서 뒤에 누적시키는 것이 아니라 문서 전체를 다 지우고 새로 출력한다.
runtimewrite.html
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>runtimewrite</title>
</head>
<body>
<p>다음
버튼을 눌러 보세요</p>
<input
type="button" value="요기요"
onClick="btnClick()">
<script>
function
btnClick() {
document.write("참
잘했어요");
}
</script>
</body>
</html>
페이지를 로드하면 <p> 태그에 의해 출력된 문단과 <input> 태그로 배치한 버튼만 보인다. 스크립트가
작성되어 있지만 함수만 정의하는 것이어서 바로 실행되지 않으며 버튼을 클릭할 때 호출된다. 실행중에
버튼을 누르면 write 메서드에 의해 문서가 다시 작성되므로 문단과 버튼이 사라져 버리고 화면에는 write 메서드가 출력한 문자열만 남는다.
만약 기존 내용을 유지한 채 버튼 아래쪽에 새로운 문자열을 출력하고 싶다면
DOM 관련 메서드로 새 문단을 만들어 추가하는 복잡한 코드를 사용해야 한다. 이런 특성으로
인해 write 메서드는 실제 프로젝트에서 결과 출력용으로 거의 사용되지 않는다. 다만 코드의 실행 결과를 간편하게 확인할 수 있는 학습용 메서드일 뿐이다.