본문 바로가기
코딩도전기/JSP

CODO Day17_JSP(JSTL태그&함수)

by 코도꼬마 2023. 2. 23.

JSTL TAG 종류

set JSP에서 사용될 변수 설정
remove 설정한 변수 제거
if 조건에 따라 내부코드 수행(If문)
choose 다중조건을 처리할 때 사용(Switch문과 비슷하지만 다중조건 가능)
forEach 컬렉션이나 Map의 각 항목을 처리할 때 사용
forTokens 구분자로 분리된 각각의 토큰을 처리할 때 사용
import URL을 사용하여 다른 자원의 결과를 삽입
redirect 지정한 경로로 리다이렉트
url URL을 재작성
catch 익셉션 처리에 사용
out JspWriter에 내용을 알맞게 처리한 후 출력

 

 

Choose Tag

  • 자바의 switch구문과 비슷하나 다중 조건 가능
  • c:whentest 속성에 조건을 넣음
  • 그 조건이 참이면 태그 몸체를 실행
  • c:otherwiseelse 역할
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<c:choose>
		<c:when test="${param.num == '0'}">
			<h3>num의 값은 0입니다.</h3>
		</c:when>
		<c:when test="${param.num == '1'}">
			<h3>num의 값은 1입니다.</h3>
		</c:when>
		<c:otherwise>
			<h3>0~1 사이의 값을 넣어주세요</h3>
		</c:otherwise>
	</c:choose>
</body>
</html>

 

ForEach Tag

  • array, map, list 등에 저장되어 있는 값을 순차적으로 꺼낼 때 사용
  • <c:forEach var="변수" items="덩어리" begin="시작값" end="끝값" step="증가값">
  • var, items  /  var, begin, end, step 같이 또는 따로 사용 가능
<%@page import="java.util.HashMap"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String[] sports = {"축구","야구","농구","골프","수영","볼링"};
	HashMap map = new HashMap();  //object와 비슷
	map.put("name", "hong");
	map.put("age", 20);
	map.put("phone", "010-1234-5678");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>	
	<!-- 일반적인 for처럼 사용하는 방식 / 잘 쓰지 않음-->
	<%for(int i=1; i<=10; i++){ %>
		<%= i %>
	<% } %>
	<hr/>
	<c:forEach var="i" begin="1" end="10" step="1">
		${i}
	</c:forEach>	
	
	<h3>1부터 100까지의 합</h3>
	<% int sum = 0; 
	for(int i=1; i<=100; i++){
		sum += i;
	} %>
	<%= sum %>
	
	<c:set var = "total">0</c:set>
	<c:forEach var="i" begin="1" end="100" step="1">
		<c:set var="total" value="${total + i }"/>
	</c:forEach>
	${total}
	
    
	<!-- 향상된 for처럼 사용하는 방식(*자주 사용할 방식) -->
	<h3>*sports 배열에 있는 값 뽑아내기</h3>
	<!-- sports는 scriptlet을 사용하여 선언했기 때문에 el을 사용할 수 없음 -->
	<c:forEach var="s" items="<%= sports %>" varStatus="stat">  //varStatus: c:forEach의 상태속성
		[${stat.index}]${s}
	</c:forEach>
	
    
	<h3>sports 배열에서 1~3번 인덱스만 뽑아내기</h3>
	<c:forEach var="s" items="<%= sports %>" varStatus="stat" begin="1" end="3" step="1">
		[${stat.index}]${s}
	</c:forEach>
	
    
	<h3>*map에 있는 모든 값을 뽑아내기</h3>
	<c:forEach var="item" items="<%= map %>">
		<p>${item.key} : ${item.value}</p>
	</c:forEach>
</body>
</html>

 

 

Url Tag

  • url을 생성
  • var와 scope 속성이 있으나 생략
  • param을 통해 url의 파라메터를 추가할 수 있음
  • *절대 url(주소값)과 *상대 url(./를 사용해 전체 주소를 밝히지 않음)을 입력할 수 있음
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- https://search.daum.net/search?w=blog&q=독도 -->
	<c:url value="https://search.daum.net/search" var="searchUrl">
		<c:param name="w">blog</c:param>
		<c:param name="q">독도</c:param>
	</c:url>
	
	<a href="${searchUrl}">독도 검색</a>
	
	<ul>
		<li>${searchUrl}</li><!-- 절대 url -->
		<li><c:url value="/url.jsp"></c:url><!-- 상대 url - 절대경로 -->
		<li><c:url value="./url.jsp"></c:url><!-- 상대 url - 상대경로 -->
		<li><c:url value="../index.jsp"></c:url><!-- 상대 url - 상대경로 -->
	</ul>
	
	<h3>c:url을 사용할 때 / 사용하지 않을 때</h3>
	<ul>
		<li><a href="./url.jsp" target="_blank">상대경로 url.jsp</a></li>
		<li>
			<a href="<c:url value="./url.jsp"/>" target="_blank">
				c:url 상대경로 url.jsp
			</a>
		</li>
		<li><a href="/index.jsp" target="_blank">절대경로 index.jsp</a></li>
		<li>
			<a href="<c:url value="/index.jsp"/>" target="_blank">
				c:url 절대경로 url.jsp
			</a>
	</ul>
	<p>절대경로에서 /는 root를 의미</p>
	
	<p>일반적으로는 ip:port 이후를 의미</p>
	<p>http://localhost:80/index.jsp</p>
	
	<p>c:url은 ip:port/context 이후를 root로 받아들임</p>
	<p>http://localhost/11_JSTL/index.jsp</p>
</body>
</html>

c:url 사용X - 절대경로 index.jsp
c:url 사용 - c:url 절대경로 url.jsp

# 상대경로에서는 ip:port 이후가 root를 의미하나 절대경로에서 /이후를 root로 받아들임
    http://localhost:80/index.jsp

# c:url은 ip:port/context 이후를 root로 받아들임
   http://localhost/11_JSTL/index.jsp

 

 

ForTokens Tag

  • 특정 구분자를 기준으로 값을 나눔
  • <c:forTokens var="쪼개진 값이 담길 변수 명" items="문자열" delims="구분자">
  • 자바의 Tokenizer와 같은 기능
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<c:set var="text" value="축구, 야구, 농구, 배구, 골프, 수영"/>
	<c:forTokens var="item" items="${text}" delims=",">
		${item}
	</c:forTokens>
	
	
	<c:forTokens var="sports" items="축구^ 야구^ 농구^ 배구^ 골프^ 수영" delims="^">
		${sports}
	</c:forTokens>
</body>
</html>

 

 

Import Tag

  • 특정 url의 결과를 읽어와 현재 위치에 삽입하거나 변수에 저장(server 자체에서 이동)
  • 자체 페이지 또는 *외부 페이지도 불러올 수 있다
  • <c:import url="불러올 페이지" var="변수명" scope="영역" charEncoding="캐릭터셋">
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 내부 페이지 -->
	<%-- <c:import url="../index.jsp"/> --%>
	
	<!-- 외부 페이지 -->
	<!-- https://www.youtube.com/results?search_query=jsp -->
	<c:import url="https://www.youtube.com/results">
		<c:param name="search_query" value="jsp"/>
	</c:import>
</body>
</html>

자체 페이지에서 불러오는 것으로 현재는 인터넷 연결X

 

 

Redirect Tag

  • client를 해당 사이트로 이동시킴
  • import와 비슷 / 다만 불러오느냐(import), 보내느냐(redirect)의 차이(잘 안씀)
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- https://www.youtube.com/results?search_query=jsp -->
	<c:redirect url="https://www.youtube.com/results">
		<c:param name="search_query" value="jsp"/>
	</c:redirect>
</body>
</html>

 

 

Function

length(obj) obj의 길이를 반환
toUpperCase(str) str을 대문자로 변환
toLowerCase(str) str을 소문자로 변환
substring(str, idx1, idx2) str.substring(idx1, idx2)의 결과를 반환
substringAfter(str1, str2) str1에서 str1에 포함되어 있는 str2 이후의 문자열을 구함
substringBefore(str1, str2) str1에서 str1에 포함되어 있는 str2 이전의 문자열을 구함
trim(str) str 좌우의 공백 문자를 제거
replace(str, src, dest) str에 있는 src를 dest로 변환
indexOf(str1, str2) str1에서 str2가 위치한 인덱스를 구함
startsWith(str1, str2) str1이 str2로 시작할 경우 true, 그렇지 않을 경우 false를 반환
endsWith(str1, str2) str1이 str2로 끝나는 경우 true, 그렇지 안을 경우 false를 반환
contains(str1, str2) st1이 str2를 포함하고 있을 경우 true를 반환
containslgnoreCase(str1, str2) 대소문자 구분없이 str1이 str2를 포함하고 있을 경우 true를 반환
split(str1, str2) str2로 명시한 글자를 기준으로 str1을 분리해서 배열로 반환
join(array, str2) array에 저장된 문자열을 합침, 각 문자열의 사이에는 str2가 붙음
escapeXml(str) XML의 객체 참조에 해당하는 특수문자를 처리함
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@page import="java.util.HashMap"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		HashMap map = new HashMap();
		map.put("1", "1");
		map.put("2", "2");
		map.put("3", "3");
		map.put("4", "4");
		map.put("5", "5");
	%>	
	
	<c:set var="map" value="<%= map %>" />
	<c:set var="str1" value="zer0box 카페, http://cafe.naver.com/goingdeveloper/"/>
	<c:set var="str2" value="카페" />
	<c:set var="tokens" value="1,2,3,4,5,6,7,8,9,10" />
	
	<h1>Function 태그</h1>
	*length(map) : ${ fn:length(map) }<br>
	*length(str1) : ${ fn:length(str1) }<br>
	
	toUpperCase(str1) : ${ fn:toUpperCase(str1)}<br>
	toLowerCase(str1) : ${ fn:toLowerCase(str1)}<br>
	
	<!--~ 부터 보여주고, ~ 부터 잘라낸다.-->
	*substring(str1, 12, 48) : ${ fn:substring(str1, 12, 48) }<br>
    
	<!--str2 를 기준으로 뒤만 보여줌-->
	substringAfter(str1, str2) : ${ fn:substringAfter(str1, str2) }<br>
    
	<!--str2 를 기준으로 앞만 보여줌-->
	substringBefore(str1, str2) : ${ fn:substringBefore(str1, str2) }<br>
	
	<!--str1 의 " " 을 ^ 로 변환-->
	*replace(str1, src, dest) : ${ fn:replace(str1, " ", "^") }<br>
    
	<!--str1 에서 str2 를 찾으면 몇번 인덱스에 있는가?-->
	indexOf(str1, str2) : ${ fn:indexOf(str1, str2) }<br>
    
	<!--str2 로 시작하는 값이 있나?-->
	startsWith(str1, str2) : ${ fn:startsWith(str1, 'zer0') }<br>
    
	<!--str2 로 끝나는 값이 있나?-->
	endsWith(str1, str2) : ${ fn:endsWith(str1, '/') }<br>
    
	<!--str2 를 포함하는 값이 있나?-->
	*contains(str1, str2) : ${ fn:contains(str1, str2) }<br>
    
	<!--str2를 포함하고 있나?(대소문자 구분 없이)-->
	containsIgnoreCase(str1, str2) : ${ fn:containsIgnoreCase(str1, str2) }<br>
	
	<!--구분자로 끊어서 배열에 삽입-->
	<c:set var="array" value="${ fn:split(tokens, ',') }" />
	join(array, "-") : ${ fn:join(array, "-") }<br><!-- 1-2-3-4-5-6-7-8-9-10 -->
	
	<!-- html에서는 태그형태(<>)를 태그로 오인한다. -->
	<welcome-file>default.htm</welcome-file>
    
	<!-- escapeXml() 을 사용하면 태그를 문자열로 인식할 수 있도록 해 준다. -->
	escapeXml("xmltag") : ${ fn:escapeXml("<welcome-file>default.htm</welcome-file>") }
</body>
</html>