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

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

★프로그래밍/HTML, CSS, JS, XML :: 2016.08.21 23:34

루비와 파이썬에 이어 이번에는 자바스크립트를 이용하여 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병의 맥주를 출력할 수 있습니다.

많은 도움 되셨나요?

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

Today 12    Yday 63    Tot 65,494
Juwan Park
Juwan Park's blog is powered by Daum and TISTORY.
Contemporary Blue for TISTORY.
Designed by Juwan Park. Creative Commons License
▲ TOP