99병의 맥주 (자바스크립트)

루비와 파이썬에 이어 이번에는 자바스크립트를 이용하여 99병의 맥주를 출력하는 프로그램입니다.

여기서는 HTML 문서의 형태로 99병의 맥주가 출력되게 할 것입니다.

코드는 다음과 같습니다.

for (i = 99; i > 0; i--) { 
	var intxt = "<p>" + i + "병의 맥주가 벽장에 있네. " + i + "병의 맥주가 있네.<b" +
	  "r />한 병을 내려서 넘겼다네. ";
	if (i > 1) {
		intxt += (i - 1) + "병의 맥주가 벽장에 있네.</p>";
	} else {
		intxt += "더 이상 벽장에 맥주는 없네.</p>";
	}
	document.write(intxt);
}

intxt = "<p>더 이상 맥주가 벽장에 없네. 맥주는 더 이상 없네.<b" +
  "r />가게에 가서 다시 사왔네. 99병의 맥주가 벽장에 있네.</p>";
document.write(intxt);

코드 구문 강조기에서 <br /> 태그를 쓰니까 이상하게 줄바꿈이 되는 현상이 일어나 부득이하게 '<b' + 'r />' 이렇게 분리하였습니다.

여기서는 document.write() 문을 통해 문서의 내용이 조금씩 추가되는 방식입니다.
document.write(텍스트) 대신 document.getElementsByTagName("body")[0].innerHTML += 텍스트; 형태로 사용해도 됩니다.
※ jsfiddle 사이트에서는 document.write() 문을 사용할 수 없는 관계로 innerHTML로 대체해서 실험했습니다.

이 자바스크립트를 실행하면

99병의 맥주가 벽장에 있네. 99병의 맥주가 있네.
한 병을 내려서 넘겼다네. 98병의 맥주가 벽장에 있네.

98병의 맥주가 벽장에 있네. 98병의 맥주가 있네.
한 병을 내려서 넘겼다네. 97병의 맥주가 벽장에 있네.

97병의 맥주가 벽장에 있네. 97병의 맥주가 있네.
한 병을 내려서 넘겼다네. 96병의 맥주가 벽장에 있네.

(... 중간생략 ...)

2병의 맥주가 벽장에 있네. 2병의 맥주가 있네.
한 병을 내려서 넘겼다네. 1병의 맥주가 벽장에 있네.

1병의 맥주가 벽장에 있네. 1병의 맥주가 있네.
한 병을 내려서 넘겼다네. 더 이상 벽장에 맥주는 없네.

더 이상 맥주가 벽장에 없네. 맥주는 더 이상 없네.
가게에 가서 다시 사왔네. 99병의 맥주가 벽장에 있네.

이와 같이 화면에 HTML 문서의 형태로 99병의 맥주가 출력됩니다.
자바스크립트로도 역시 이렇게 짤막한 코딩으로 99병의 맥주를 출력할 수 있습니다.

많은 도움 되셨나요?

유용한 정보로 활용하시기 바랍니다.