JSP 프로그래밍 연습 - 구구단 출력 프로그램 (HTML, CSS 포함)

티스토리 뷰

JSP Servlet

JSP 프로그래밍 연습 - 구구단 출력 프로그램 (HTML, CSS 포함)

메이커JK 2015. 4. 21. 09:30

JSP 프로그래밍에서 화면출력 방식에 익숙해지기 위해 구구단 출력하는 프로그램을 작성해보았습니다.

JSP 구구단 출력 - HTML태그를 이용하는 방식

<%@ page language="java" 
         contentType="text/html; charset=UTF-8" 
         pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<html>
<head>
<title>구구단 출력</title>
<style>
	div {
		text-align: center;
	}
	td {
		background-color: #289AFF;
		color: #FFFFFF;
		padding: 10px;
	}
	h3 {
		color: #289AFF;
	}
</style>
</head>
<body>
	<div>
		<h3>구구단을 외우자!</h3>
		<table>
		<%
		for(int i = 1; i < 10; i++) {
		%>
			<tr>
			<%
			for(int j = 2; j < 10; j++) {
			%>
				<td>
					<%=Integer.toString(j) 
					    + " X " + Integer.toString(i) 
					    + " = " + Integer.toString(j * i) 
					%>
				</td>
			<%
			}
			%>
			</tr>
		<%
		}
		%>
		</table>
	</div>
</body>
</html>

이 프로그램은 HTML table태그 안에서 for구문으로 이중 루프를 돌며 행(tr)과 열(td)을 출력합니다.(참고로 Integer.toString()함수는 정수를 문자열로 변환하는 역할을 합니다.) 화면을 예쁘게 장식하기 위해 사용한 CSS코드를 제외하면 참 간단한 코드라고 할 수 있습니다. 하지만 JSP 코드블럭을 구분하기 위해 사용한 <% %> 괄호가 눈에 거슬립니다. 그래서 하나의 JSP 코드블럭(스크립트릿, Scriptlet)에서 자바 print.out을 사용해 출력할 수도 있습니다.

HTML 구구단 출력, JSP 구구단 출력, 구구단 출력 프로그램, JSP 프로그래밍

구구단이 웹브라우저에 출련된 모습입니다. CSS를 활용해서 나름 디자인을 했더니 그냥 HTML을 사용했을 때보다 훨씬 보기 좋네요.

JSP 구구단 출력 - 자바 print.out을 이용하는 방식

<%@ page language="java" 
         contentType="text/html; charset=UTF-8" 
         pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<html>
<head>
<title>구구단 출력</title>
<style>
	div {
		text-align: center;
	}
	td {
		background-color: #289AFF;
		color: #FFFFFF;
		padding: 10px;
	}
	h3 {
		color: #289AFF;
	}
</style>
</head>
<body>
	<div>
		<h3>구구단을 외우자!</h3>
		<table>
		<%
		for(int i = 1; i < 10; i++) {
			out.print("<tr>");
			for(int j = 2; j < 10; j++) {
				out.print("<td>");
				out.print(Integer.toString(j) 
					    + " X " + Integer.toString(i) 
					    + " = " + Integer.toString(j * i));
				out.print("</td>");
			}
			out.print("</tr>");
		}
		%>
		</table>
	</div>
</body>
</html>

print.out함수를 사용해서 구구단을 출력한 JSP코드입니다. for, while 반복문이나 if 조건문을 많이 사용하는 JSP 프로그래밍에서는 { }를 감싸기위해 <% %> 괄호를 사용하는 것보다 print.out함수를 사용하는 것이 코드가 훨씬 깔끔한 것을 볼 수 있습니다.

[JSP] - 이클립스 웹어플리케이션 war파일 배포 방법, 톰캣(tomcat)서버 환경 프로그램 배치

[JSP] - 이클립스 웹프로젝트 생성 및 실행방법 (Dynamic Web Project 만들기, 톰캣 JSP 개발환경)

[JSP] - 이클립스 아파치 톰캣서버 연동하기 (Eclipse Tomcat Server JSP 개발환경 구축방법)

[JSP] - 아파치 톰캣서버(Apache Tomcat Server) 포트(Port)번호 변경하기 (톰캣 웹서버 포트 설정 방법)

[JSP] - 윈도우환경 아파치 톰캣 설치, 실행 방법 (JSP 서블릿 컨테이너, 자바 웹 어플리케이션 서버 구축)