[JSP] JSP로 구구단 테이블 만들기

2012년 12월 06일 moonspam JSP, 개발이야기 0

수업시간에 JSP로 이용한 구구단 만들기 페이지를 만들어 보았다. 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>99Dam</title>
</head>
<body>
<h2>구구댐 출력</h2>
<table border="1" cellpadding="10" cellspacing="0">
<%
	for(int i = 2; i < 10; i++) {
		out.println("<tr>");
		if(i%2==0) {
			out.print("<td bgcolor='#F2F2F2'>");
		} else {
			out.print("<td>");
		}
		out.print(i + "단</td>");
		for(int j = 1; j < 10; j++) {
			if(i%2==0) {
				out.print("<td bgcolor='#F2F2F2'>");
			} else {
				out.print("<td>");
			}
			out.print(i + " * " + j + " = " + i*j + "</td>");
		}
		out.println("</tr>");
	}
%>
</table>
</body>
</html>

여기서 의문점이 들었던 부분은 <td>태그에 색을 넣는 if 문이 2번 반복된다는 점이다.
그래서 if 문을 함수로 묶을 수 없을까 고민해 보면서 끄적여 보았다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>99Dam</title>
</head>
<body>
<h2>구구댐 출력</h2>
<table border="1" cellpadding="10" cellspacing="0">
<%!
	int i;
	void e1() {
		if(i%2==0) {
			out.print("<td bgcolor='#F2F2F2'>");
		} else {
			out.print("<td>");
		}
	}
%>

<%
	for(int i = 2; i < 10; i++) {
		out.println("<tr>");
		e1();
		out.print(i + "단</td>");
		for(int j = 1; j < 10; j++) {
			e1();
			out.print(i + " * " + j + " = " + i*j + "</td>");
		}
		out.println("</tr>");
	}
%>
</table>
</body>
</html>

하지만 선언문에선 out.print() 함수를 읽을 수 없었다.
구글님 40분 검색 끝에 http://www.okjsp.pe.kr/seq/23601 이 곳에서 해결책을 찾았다ㅠ

<%@ page import = "javax.servlet.jsp.*" %> <!-- 서블릿을 불러온다 -->
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>99Dam</title>
</head>
<body>
<h2>구구댐 출력</h2>
<table border="1" cellpadding="10" cellspacing="0">
<%! // 컬러TD 함수 선언문
	int i; // 공통으로 사용 할 변수 i 생성
	public void colorTd(javax.servlet.jsp.JspWriter out) throws ServletException, Exception { 
		if(i%2==0) {
			out.print("<td bgcolor='#F2F2F2'>");
		} else {
			out.print("<td>");
		}
	} 
%>
<%
	for(i = 2; i < 10; i++) { // int를 지워준다. (지우지 않으면 색 적용이 안된다.)
		out.println("<tr>");
		colorTd(out);
		out.print(i + "단</td>");
		for(int j = 1; j < 10; j++) {
			colorTd(out);
			out.print(i + " * " + j + " = " + i*j + "</td>");
		}
		out.println("</tr>");
	}
%>
</table>
</body>
</html>

서블릿 패키지를 불러온 후 만들 컬러TD 함수 안에 (javax.servlet.jsp.JspWriter out)을 선언해 준 후 out을 사용하면 인식한다ㅠ
구구단 쉽지 않네!

의도한 내용은 아니지만 다른 방법도 있었다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>99Dam</title>
</head>
<body>
<h2>구구댐 출력</h2>
<table border="1" cellpadding="10" cellspacing="0">
<%! // 컬러TD 함수 선언문
	public String colorTd(int i) { 
		String a;
		if(i%2==0) {
			a ="<td bgcolor='#F2F2F2'>";
		} else {
			a = "<td>";
		}
		return a;
	} 
%>
<%
	for(int i = 2; i < 10; i++) {
		out.println("<tr>");
		out.println(colorTd(i));
		out.print(i + "단</td>");
		for(int j = 1; j < 10; j++) {
			out.println(colorTd(i));
			out.print(i + " * " + j + " = " + i*j + "</td>");
		}
		out.println("</tr>");
	}
%>
</table>
</body>
</html>