JAVA & JSP & JavaScript

JSTL

<% %> : Business Logic (Servlet)

밑에 html 영역 : UI를 응답 (view page, jsp, thymleaf)

c:if

클라이언트에게 문자열을 조건부로 출력

• test02.jsp 생성

<c:if test="true">
	<p>해당 문장 출력1</p>
</c:if>
<c:if test="false">
	<p>해당 문장 출력2</p>
</c:if>

해당 문장 출력1

• el 을 이용해서 연산의 결과를 list가 사용

<c:if test="${10%2 == 0}">
	<p>10은 짝수입니다1</p>
</c:if>
<c:if test="${10%2 eq 0}">
	<p>10은 짝수입니다2</p> <%-- 비교 연산자 eq 는 == 와 같다 --%>
</c:if>

10은 짝수입니다1

10은 짝수입니다2

비교 연산자

1. eq : ==

<c:if test="${10%2 == 0}">
	<p>10은 짝수입니다1</p>
</c:if>
<c:if test="${10%2 eq 0}">
	<p>10은 짝수입니다2</p>
</c:if>

10은 짝수입니다1

10은 짝수입니다2

2. gt : >

<c:if test="${20>10}">
	<p>20은 10보다 크다1 ${20>10}</p>
</c:if>
<c:if test="${20 gt 10}">
	<p>20은 10보다 크다2 ${20 gt 10}</p>
</c:if>

20은 10보다 크다1 true

20은 10보다 크다2 true

3. ne : !=

<c:if test="${10 != 20}">
	<p>10과 20은 다르다 ${10 ne 20}</p>
</c:if>
<c:if test="${'kim' ne 'park'}">
	<p>kim 과 park은 다르다</p>
</c:if>

10과 20은 다르다 true

kim 과 park은 다르다

4. ge : >=

<c:if test="${10 >= 10}">
	<p>10은 10보다 크거나 같다1 ${20>10}</p>
</c:if>
<c:if test="${20 ge 10}">
	<p>10은 10보다 크거나 같다2 ${20 ge 10}</p>
</c:if>

c:choose & c:when & c:otherwise

if else 로직, 조건부 출력

• test03.jsp 생성

<%
	// el, jstl 을 테스트 하기 위한 숫자를 "jumsu" 라는 키값으로 담기
	request.setAttribute("jumsu", 75);
%>

<p>
	<strong>${sessionScope.userName}</strong> 님이
	획득한 점수는 <strong>${jumsu}</strong> 입니다
	<br />
	점수는
	<c:if test="${jumsu%2 eq 0}">짝수 입니다</c:if>
	<c:if test="${jumsu%2 eq 1}">홀수 입니다</c:if>
	<c:choose>
		<c:when test="${jumsu%2 eq 0}">
			짝수 입니다
		</c:when>
		<c:otherwise>
			홀수 입니다
		</c:otherwise>
	</c:choose>
	<br />
	따라서 이번 학기 학점은
	<c:choose>
		<c:when test="${jumsu >= 90}">A</c:when>
		<c:when test="${jumsu >= 80}">B</c:when>
		<c:when test="${jumsu ge 70}">C</c:when>
		<c:when test="${jumsu ge 60}">D</c:when>
		<c:otherwise>F</c:otherwise>
	</c:choose>		
</p>

• navbar.jsp 코드 수정

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<ul class="navbar-nav me-auto">
	<li class="nav-item">
		<a class="nav-link ${param.thisPage eq 'member' ? 'active':''}" 
			href="${pageContext.request.contextPath }/member/list.jsp">Member</a>
	</li>
	<li class="nav-item">
		<a class="nav-link ${param.thisPage eq 'book' ? 'active':''}" 
			href="${pageContext.request.contextPath }/book/list.jsp">Book</a>
	</li>
	<li class="nav-item">
		<a class="nav-link ${param.thisPage eq 'board' ? 'active':''}" 
			href="${pageContext.request.contextPath }/board/list.jsp">Board</a>
	</li>
	<li class="nav-item">
		<a class="nav-link ${param.thisPage eq 'gallery' ? 'active':''}" 
			href="${pageContext.request.contextPath }/gallery/list.jsp">Gallery</a>
	</li>
</ul>
<!-- 오른쪽 사용자 메뉴 -->
<ul class="navbar-nav">
	<c:choose>
		<%-- sessionScope 는 생략 가능 --%>
	    <c:when test="${sessionScope.userName eq null}">
			<li class="nav-item">
			<a class="btn btn-outline-light btn-sm me-2"
				href="${pageContext.request.contextPath }/user/loginform.jsp">로그인</a>
			</li>
			<li class="nav-item">
				<a class="btn btn-warning btn-sm"
					href="${pageContext.request.contextPath }/user/signup-form.jsp">회원가입</a>
			</li>
		</c:when>
		<c:otherwise>
			<li class="nav-item  me-2">
				<a class="nav-link  p-0"
					href="${pageContext.request.contextPath}/user/info.jsp">
					<strong>${userName}</strong>
				</a>
			</li>
			<li class="nav-item me-2">
				<span class="navbar-text">Signed in</span>
			</li>
			<li class="nav-item">
				<a class="btn btn-danger btn-sm"
					href="${pageContext.request.contextPath }/user/logout.jsp">로그아웃</a>
			</li>
		</c:otherwise>
	</c:choose>
</ul>