겉바속촉

[html] JSTL-foreach, format연습하기 본문

IT일기(하반기)/HTML

[html] JSTL-foreach, format연습하기

겉바속촉 2020. 6. 24. 16:35
728x90
반응형

이번에는 foreach랑 format에 대해 배워볼게요

 

 

1. foreach 연습하기

 

 

구조는 다음과 같습니다

 

<c:forEach var="" begin="시작값" end="끝값" step="차이값">

반복되는 값 출력

</c:forEach>

 

<h2>jstl에서 반복문 foreach</h2>
	<hr>
	<h4>1부터 10까지 출력하기</h4>
	<c:forEach var="n" begin="1" end="10" step="1">
	<!-- step="1"은 생략가능 -->
	${n }&nbsp;&nbsp;&nbsp;&nbsp;	
	</c:forEach>
	
	<h4>1부터 100까지 5씩 증가하면서 출력하기</h4>
	<c:forEach var="n" begin="1" end="100" step="5">
	${n }&nbsp;&nbsp;&nbsp;&nbsp;	
	</c:forEach>
   

 

 

 

 

이번에는

자바배열을 다음과 같이 리퀘스트에 저장해둡니다:)

 

<h4>자바 배열 선언 후 리퀘스트로 저장한 후 출력</h4>
	<%
	List<String> list=new ArrayList<String>();
	
	String []str={"red","orange","yellow","green","blue","purple"};
	for(String s:str)
		list.add(s);
	//리퀘스트에 저장
	request.setAttribute("list1", list);
	
	%>

 

 

(1) 전체 출력해보기위한 코드

 

여기서 포인트는 count는 1부터, index는 0부터라고 이해해주기

<h2>List컬렉션 전체 출력하기</h2>
	<c:forEach var="s" items="${list1}" varStatus="a">
	${a.count }/${a.index}:<b style="color:${s }">${s }</b><br>
	</c:forEach>

 

(2) 부분출력해보기 위한 코드

	<hr>
	<h2>list부분출력도 가능</h2>
	<c:forEach var="s" begin="2" end="5" items="${list1 }"
	varStatus="a">
		${a.count }/${a.index }:<b style="color: ${s}">${s }</b><br>	
	</c:forEach>
	<hr>

 

2. format연습하기

 

숫자 format에 대해서 연습해보기위해서

num1 -> 64785

num2 -> 34.2561

이렇게 다른 형식의 수 2가지를 만들었습니다.

 

다음과 같이 코드를 작성하신 후에 하나씩 컴파일 하면서 숙지해주세요:)

<%@ 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="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

</head>
<body>

<c:set var="num1" value="64785"/>
<c:set var="num2" value="34.2561"/>

<b>숫자 포맷양식</b><br>
<fmt:formatNumber type="Currency" value="${num1 }"/><br>
<fmt:formatNumber type="number" value="${num1 }"/><br>
<fmt:formatNumber value="${num2 }" pattern="#,##0"/><br>
<fmt:formatNumber type="percent" value="${num2}"/><br>

<fmt:formatNumber value="${num2 }" pattern="0.0"/><br><br>



</body>
</html>

 

 

컴파일한 결과는 다음과 같은데요:)

 

이해하기 쉽도록 다음과 같이 써두었습니다!!

728x90
반응형