Re: 연습문제 : 구구단 구현해보기 (팀별) - 주석및 이해후 제출하기 - 주용현,김진규,최솔,이주화,임동혁,배경린,강송찬
작성자강송찬작성시간26.06.18조회수18 목록 댓글 2
examGuguForm
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>examGuguForm</title>
</head>
<body>
<div style="width: 450px; margin: auto">
<h2 style="text-align: center;">구구단 설정</h2>
<!-- 액션에 처리위치가 들어감 메서드는 전송방식, name(dan,limit,color)값 기준으로 데이터 전송 -->
<form action="gugudanServlet" method="post" style="width: 300px; margin: auto;">
<p>
<label>단 :</label>
<input type="number" name="dan" required>
</p>
<p>
<label>범위:</label>
<select name="limit">
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="9">9</option>
</select>
</p>
<p>
<label>색상:</label>
<input type="color" name="color" value="#ff0000">
</p>
<p style="text-align: center;">
<input type="submit" value="구구단 출력">
</p>
</form>
</div>
</body>
</html>
GugudanServlet
package exam;
import java.io.IOException;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
@WebServlet("/gugudanServlet")
public class GugudanServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
int dan = Integer.parseInt(req.getParameter("dan")); // form에서 넘어온 데이터를 req.getParameter로 받음
int limit = Integer.parseInt(req.getParameter("limit"));
String color = req.getParameter("color");
// 구구단 시작점,끝점 전처리
int start = dan - (limit / 2);
int end = dan + (limit / 2);
req.setAttribute("start", start); // (key, value)와 유사형태로 데이터 전송
req.setAttribute("end", end);
req.setAttribute("dan", dan);
req.setAttribute("color", color);
req.getRequestDispatcher("/WEB-INF/views/gugudan.jsp").forward(req, resp); // forward 이동
}
}
gugudan.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="jakarta.tags.core"%>
<!-- JSTL 사용하기 위함 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gugudan.jsp</title>
<style>
table {
margin: 20px auto;
border-collapse: collapse;
}
td {
border: 1px solid #999;
padding: 8px;
text-align: center;
}
th {
background-color: #f0f0f0;
padding: 8px;
}
</style>
</head>
<body>
<div style="width: 900px; margin: auto">
<table>
<c:forEach begin="0" end="9" step="1" var="i">
<!--forEach 속성 begin = 초기값 end= 종료값 step=증감값 var= 속성, varStatus=index 값 -->
<c:choose>
<c:when test="${i==0}">
<tr>
<c:forEach begin="${start}" end="${end}" step="1" var="e">
<!-- choose when == if else , switch case 와 유사,
test = 조건식-->
<c:choose>
<c:when test="${e==dan}">
<td style="background-color: ${color}">${e}단</td>
</c:when>
<c:when test="${e!=dan}">
<td>${e}단</td>
</c:when>
</c:choose>
</c:forEach>
</tr>
</c:when>
<c:when test="${i!=0}">
<tr>
<c:forEach begin="${start}" end="${end}" step="1" var="e">
<c:choose>
<c:when test="${e==dan}">
<td style="background-color: ${color}">${e}x${i}=${e * i}</td>
</c:when>
<c:when test="${e!=dan}">
<td>${e}x${i}=${e * i}</td>
</c:when>
</c:choose>
</c:forEach>
</tr>
</c:when>
</c:choose>
</c:forEach>
</table>
</div>
</body>
</html>
댓글
댓글 리스트-
작성자주용현 작성시간 26.06.18 new
저희 아까 제대로 정리 못했던 내용 정리글이에요
<c:forEach begin="0" end="9" step="1" var="e" varStatus="i"> 에서 var과 varStatus 차이점
var 은 forEach로 반복되어 나온 데이터값 (리액트에서 map(e) 에 해당 e와 완전히 같아요) 이고,
varStatus는 반복문의 현재 진행 상태, 인덱스 정보를 가지는 객채 라고 생각하시면 돼요( map(e,i) 에서 i를 *포함*하는 객체)
varStatus의 주요 속성
- .index - 0부터 시작하는 현재 반복 “순서”
- .count - 1부터 시작하는 현재 반복 “횟수”
- .current - 현재 루프에서 처리 중인 var와 동일한 객체 (e == i.current)
- .first - 현재 반복이 첫번째이면 true 반환
- .last - 현재 반복이 마지막이면 true 반환 -
작성자주용현 작성시간 26.06.18 new
<c:choose>
<c:when test="${e==dan}">
<td style="background-color: ${color}">${e}x${i}=${e * i}</td>
</c:when>
<c:when test="${e!=dan}">
<td>${e}x${i}=${e * i}</td>
</c:when>
</c:choose>
위 현 코드를 아래 처럼 삼항 연산자 이용해서 만들 수 있습니다. (원래 안되던 이유는 삼항연산자 false값에 #fff 을 직접 넣었기 때문이였습니다. '#fff' 로 문자열 처리 해주면 됩니다.)
<td style="background-color: ${e==dan ? color : '#fff'}">${e}x${i}=${e * i}</td>
