오늘이라도

[Servlet & JSP] 13. EL 문법(표현식) ② : jsp23 ~ 28 본문

취업성공패키지 SW 개발자 교육/Web

[Servlet & JSP] 13. EL 문법(표현식) ② : jsp23 ~ 28

upcake_ 2020. 5. 26. 09:44
반응형

 ★EL(Expression Language) 문법(표현식) 
  ○ 기본 형식 ▶ ${ 출력값 } 출력값은 아래와 같이 다양한 형태로 표현 가능

형식 예시 해당 jsp 파일 번호
${ param.변수이름 } ${param.addr } jsp20, jsp24
${ 객체이름.속성이름 } ${dto.addr } jsp20, jsp28
${ 객체이름 } ${irum} jsp21, jsp22
${ paramValues.배열이름[인덱스] } ${paramValues.animal[0] } jsp23, jsp24
${ 수식(계산식, 비교 연산) } ${param.num1 + param.num2 } jsp25, jsp26
${ 배열이름[인덱스] } ${study[0] } jsp28
${ 배열이름[인덱스].속성이름 } ${mlist[0].irum } jsp28

 

▲jsp23 ~ 24 작동 화면

 

▼jsp23.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP 23</title>
</head>
<body>
	<form action="jsp24.jsp" method="post">
		이름 : <input type="text" name="irum" required="required" /><br />
		<br />
		다음 중 회원님께서 키우고 싶은 애완동물을 선택하세요.<br />
		<input type="checkbox" name="animal" value="강아지" />강아지<br />
		<input type="checkbox" name="animal" value="알파카" />알파카<br />
		<input type="checkbox" name="animal" value="토끼" />토끼<br />
		<input type="checkbox" name="animal" value="고슴도치" />고슴도치<br />
		<input type="checkbox" name="animal" value="금붕어" />금붕어<br />
		<input type="checkbox" name="animal" value="고양이" />고양이<br />
		<input type="submit" value="전송하기" />
	</form>
</body>
</html>

 

▼jsp24.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP 24</title>
</head>
<body>
	<%
	String irum = request.getParameter("irum");
	out.println("[스크립틀릿]<br/>");
	out.println("회원님의 이름은 " + irum + "님 입니다.<br />");
	out.println(irum + "님께서 키우고 싶은 애완동물은 ");
	
	String[] animal = request.getParameterValues("animal");
	if(animal != null) {
		for(int i = 0; i < animal.length; i++) {
			if(i != animal.length - 1) {
				out.println(animal[i] + ", ");
			} else {
				out.println(animal[i] + "입니다.<br /><br />");
			}
		}
	} else {
		out.println("선택하신 사항이 없습니다.<br /><br />");
	}
	%>
	[EL 문법]<br />
	회원님의 이름은 ${param.irum }님입니다.<br />
	<br />
	${param.irum }님께서 키우고 싶은 애완동물은
		${paramValues.animal[0] }
		${paramValues.animal[1] }
		${paramValues.animal[2] }
		${paramValues.animal[3] }
		${paramValues.animal[4] }
		${paramValues.animal[5] }입니다.
</body>
</html>

 

 

▲jsp25 작동 화면

 

▼jsp25Main.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP25 Main</title>
</head>
<body>
	<form action="jsp25.jsp" method="get">
		첫 번째 수 : <input type="number" name="num1" required="required" /><br />
		두 번째 수 : <input type="number" name="num2" required="required" /><br />
		<input type="submit" value="계산하기" />
		<input type="reset" value="초기화하기" />
	</form>
</body>
</html>

 

▼jsp25.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
int num1 = Integer.parseInt(request.getParameter("num1"));
int num2 = Integer.parseInt(request.getParameter("num2"));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP25</title>
</head>
<body>
<!-- jsp25.jsp?num1=20&num2=10 -->
num1의 값(JSP) : <%=num1 %><br />
num2의 값(JSP) : <%=num2 %><br />
<br />
num1의 값(EL) : ${param.num1 }<br /> <!-- ${num1 }은 바인딩 객체가 없어서 출력되지 않는다. -->
num2의 값(EL) : ${param.num2 }<br /> <!-- request.getParameter()로 가져온 객체가 없어도 출력된다 -->
num1 + num2(잘못된 코드) : ${param.num1 } + ${param.num2 }<br />
<br />
[사칙 연산]<br />
num1 + num2 : ${param.num1 + param.num2 }<br />
num1 - num2 : ${param.num1 - param.num2 }<br />
num1 * num2 : ${param.num1 * param.num2 }<br />
num1 / num2 : ${param.num1 / param.num2 }<br />
num1 % num2 : ${param.num1 % param.num2 }<br />
<br />
[비교 연산]<br />
num1이 더 큽니까? : ${param.num1 - param.num2 > 0 }<br />
num1이 더 큽니까? : ${param.num1 > param.num2 }<br />
num1이 더 큽니까? : ${param.num1 gt param.num2 }<br />
num1이 더 큽니까? : ${param.num1 gt param.num2 ? "예" : "아니요" }<br />
<br />
num1과 num2가 같습니까? : ${param.num1 == param.num2 }<br />
num1과 num2가 같습니까? : ${param.num1 eq param.num2 }<br />
<!-- 
> 	: gt
>= 	: ge
==	: eq
<=	: le
<	: lt
!=	: ne
 -->
</body>
</html>

 

▲jsp26.jsp 작동 화면

 

▼jsp26.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- jsp26.jsp?str1=korea&str2=kor -->
입력 문자열 str1 : ${param.str1 }<br />
입력 문자열 str2 : ${param.str2 }<br />
문자열 대소 비교 : ${param.str1.compareTo(param.str2) > 0 ? param.str1 : param.str2 }<br />
두 문자열이 같나요? : ${param.str1 eq param.str2 ? "예" : "아니오" }<br />
<br /><br /><br />
<%
String str1 = request.getParameter("str1");
String str2 = request.getParameter("str2");
out.println("입력 문자열 str1 = " + str1 + "<br />");
out.println("입력 문자열 str1 = " + str2 + "<br />");
out.println("두 문자열이 같나요? : " + (str1.equals(str2) ? "예" : "아니오"));
%>
<br /><br /><br />
입력 문자열 str1 : <%=str1 %><br />
입력 문자열 str2 : <%=str2 %><br />
두 문자열이 같나요? : <%=(str1.equals(str2) ? "예" : "아니오") %>
</body>
</html>

 

▲jsp 27 ~ 28 작동 화면

▼jsp27.jsp

<%@page import="com.hanul.study.MemberDTO"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
//study[] 배열을 초기화 → 바인딩(연결) 객체 →jsp28.jsp 출력
String[] study = {"JAVA", "View", "SQL", "Servlet/JSP/SPRING", "Android", "IoT", "Project"};
request.setAttribute("study", study);

//ArrayList<> 배열을 생성하고 초기화 → 바인딩(연결) 객체 → jsp28.jsp 출력
ArrayList<String> list = new ArrayList<>();
list.add("오렌지");
list.add("바나나");
list.add("사과");
list.add("멜론");
list.add("레몬");
request.setAttribute("list", list);

//MemberDTO 객체를 생성하고 초기화 → 바인딩(연결) 객체 → jsp28.jsp 출력
MemberDTO dto = new MemberDTO();
dto.setIrum("한울");
dto.setId("hanul");
dto.setPw("1234");
dto.setAge(26);
dto.setAddr("광주시 서구 농성동");
dto.setTel("062-362-7797");
request.setAttribute("dto", dto);

//ArralyList<> 구조에 MemberDTO 객체 배열 생성 → 바인딩(연결) 객체 → jsp28.jsp 출력
ArrayList<MemberDTO> mlist = new ArrayList<>();
mlist.add(new MemberDTO("홍길동", "hong", "1234", 11, "광주시", "010-1111-1111"));
mlist.add(new MemberDTO("홍길동", "hong", "1234", 22, "광주시", "010-1111-1111"));
mlist.add(new MemberDTO("홍길동", "hong", "1234", 33, "광주시", "010-1111-1111"));
mlist.add(new MemberDTO("홍길동", "hong", "1234", 44, "광주시", "010-1111-1111"));
mlist.add(new MemberDTO("홍길동", "hong", "1234", 55, "광주시", "010-1111-1111"));
request.setAttribute("mlist", mlist);
%>
<jsp:forward page="jsp28.jsp" />

 

▼jsp28.jsp

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
//Object 타입을 String[] 타입으로 캐스팅 해준다.
String[] studyJSP = (String[]) request.getAttribute("study");
ArrayList<String> listJSP = (ArrayList<String>) request.getAttribute("list");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
[배열을 받는 방법(JSP) - ①]<br />
<%for(int i = 0; i < studyJSP.length; i++) { %>
	studyJSP[] 배열의 <%=i %>번지(인덱스) 값 : <%=studyJSP[i] %><br />
<%} %>
<br />
[배열을 받는 방법(JSP) - ②]<br />
<%for(int i = 0; i < studyJSP.length; i++) {
	out.println("studyJSP[] 배열의 " + i + "번지(인덱스) 값 : " + studyJSP[i] + "<br />");
}%>
<br />
[배열을 받는 방법(EL)]<br />
<!-- study[]을 페이지에 작성하진 않았지만, 27에서 넘어온 study[]에 접근할 수 있다. -->
study[] 배열의 0번지(인덱스) 값 : ${study[0] }<br />
study[] 배열의 1번지(인덱스) 값 : ${study[1] }<br />
study[] 배열의 2번지(인덱스) 값 : ${study[2] }<br />
study[] 배열의 3번지(인덱스) 값 : ${study[3] }<br />
study[] 배열의 4번지(인덱스) 값 : ${study[4] }<br />
study[] 배열의 5번지(인덱스) 값 : ${study[5] }<br />
study[] 배열의 6번지(인덱스) 값 : ${study[6] }<br />
<br /><hr><br />
[리스트를 받는 방법(JSP)]<br />
<%
for(int i = 0; i < listJSP.size(); i++) {
	out.println("ArrayList 배열의 " + i + "번지 값 : " + listJSP.get(i) + "<br />");
}
%>
<br />
[리스트를 받는 방법(EL)]<br />
ArrayList 배열의 0번지 값 : ${list[0] }<br />
ArrayList 배열의 1번지 값 : ${list[1] }<br />
ArrayList 배열의 2번지 값 : ${list[2] }<br />
ArrayList 배열의 3번지 값 : ${list[3] }<br />
ArrayList 배열의 4번지 값 : ${list[4] }<br />
<br /><hr><br />

[바인딩 객체(dto)를 받는 방법(EL)]<br />
이름 : ${dto.irum }<br />
아이디 : ${dto.id }<br />
비밀번호 : ${dto.pw }<br />
나이 : ${dto.age }<br />
주소 : ${dto.addr }<br />
전화번호 : ${dto.tel }<br />
<br /><hr><br />

[리스크 구조에 객체가 저장된 객체 배열을 받는 방법]<br />
mlist 0번지 값 : ${mlist[0].irum }, ${mlist[0].id }, ${mlist[0].pw },
					 ${mlist[0].age }, ${mlist[0].addr }, ${mlist[0].tel }<br />
mlist 4번지 값 : ${mlist[4].irum }, ${mlist[4].id }, ${mlist[4].pw }, ${mlist[4].age }, ${mlist[4].addr }, ${mlist[4].tel }<br />
</body>
</html>
반응형