9 (EL 표현식)

2023.06.20 수업

교재 : 자바 웹 개발 워크북

1. 표현언어( EL : Expression Language )
- 값(데이터)을 웹페이지에 표현(=뷰를 만드는 것)하는데 사용하는 (서버쪽)태그들
- JSP 출력을 쉽게 하기 위해 개발되었고 프론트쪽 태그와 쉽게 어울릴 수 있게 기획되었다

   예) JSP 표현식 : <%= "표현식" %>  => ${"표현식"}
    % 서블릿 %      {자바영역}

2. 로직은 뷰에 나타나면 안되고 서블릿(자바클래스)로 보내야한다
     화면 출력(View)은 서블릿에 있으면 안되고 JSP에 보내야한다

3. 앞으로는 서블릿/jsp가 아닌 서블릿의 확장 스프링(프레임워크)/jsp를 사용하더라도 jsp에서는 EL/JSTL을 사용
* 프레임워크(Framework) : 프로그램 개발 방법을 큰 틀로 나누어 그 틀을 따라서 만들도록 유도하는 라이브러리 모음

4. EL에 사용가능한 데이터
- 정수형    int
- 실수형    double / float
- 문자열형 String
- 논리형    boolean
- null 객체참조형

5. EL 식의 연산자
- 산술 : +, -, *, /(or div)
- 관계 : ==(or eq), !=(or ne), <(or lt), >(or gt), <=(or le), >=(or ge)
- 조건 : a ? b : c ( a식이 참이면 b리턴 거짓이면 c리턴 )
- 논리(명제) : &&(or and) 논리곱, ||(or or), |(or not)
- null 검사 : empty

5-1. 연산자와 EL식 사용법
  ${연산식} 형식으로 사용
  ex) 산술연산 : ${ 5 + 5 }
관계연산 : ${ 3 > 2 }, ${ 3 eq  3 }
조건연산 : ${ (3 > 5) ? "3이 5보다 큽니다." : "3이 5보다 작습니다." } => 앞의 것 리턴
논리연산자 : ${ (3 > 5) && ( 10 > 9 ) }
= ${ (3 > 5) AND ( 10 > 9 ) } => 거짓
null 여부 : ${ empty input } : input변수의 내용이 비었는가? => 내용이 있으면 false, 없으면 true
<%
   String input = null;
%>
${ empty input } => true

5-2 연산자 우선순위
* 기본순서는 위 -> 아래, 왼쪽 -> 오른쪽
- []: 배열, .: 객체, (): 괄호묶음
- unary(양수), -(음수), not, !(논리부정), empty
- *, /, div, %, mod
- <, >, <=, >=, lt, gt, le, ge
- ==, !=, eq, ne
- && and, || or
- ?

5-3 HTML태그에 EL표현식을 사용하므로 몇가지 주의사항 필요
- EL표현식은 HTML태그가 아니다.
- EL표현식을 화면에 그대로 출력을 하려면 '\'에 EL표현식을 쓰면 된다
- 그러면 EL표현식을 escape했다고 생각하고 일반 텍스트문자열로 취급된다
ex) \{ 5 + 2 }는 EL표현식이 아니고 그냥 문자열 "{ 5 + 2 }"로 처리함

6. EL로 요청 파라미터 처리해보기
- 보통 request객체의 getParameter()류를 사용하지만 EL을 사용한다면 params 내장객체를 사용
- EL 요청 내장객체 param : JSP의 request의 getParameter()과 동등 특정 파라미터 키의 값을 알려줌
- paramValues : 동일한 키 이름을 가지고 전달되는 파라미터의 값들은 배열로 리턴된다.
- request의 getParameterValues()와 동등

▶ 실습

▷ EL 사용해보기

* jsp명 : /EL/el_01.jsp
-> EL 폴더가 생성되고 아래 el_01.jsp생성

* 화면에 출력하는 3가지 방법
- EL, 표현식, 스크립트릿

webapp아래 jsp파일 만들기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EL 사용해보기</title>
</head>
<body>

<!-- 표현언어(EL, Expression Language) 
	 이렇게 값을 가져오면 편하다
-->
<!-- EL(Expression Language) -->
${"안녕 나는 EL이야"} <br />

<!-- 표현식 -->
<%= "안녕 나는 표현식이야" %> <br /> 
 
<!-- 스크립트릿 -->
<%
	out.println("안녕 나는 스크립트릿이야");
%>

</body>
</html>

▷ EL 데이터형 사용해보기

* el_02.jsp 만들기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EL에서 사용하는 데이터형</title>
</head>
<body>
정수형 : ${ 1000 } <br />
실수형 : ${ 1000.0001 } <br />
문자열형 : ${ "안녕하세요" } <br />
논리형 : ${ true } <br />
<!-- null은 참조하는 주소 없음 -->
null : ${ null } <br />
<!-- 일반적으로 자바에서는 null(=가르키는 주소가 없음)이므로 
	 일반 콘솔에서는 Null Point Exception(NPE)이 나타나나
	 웹에서는 출력할 데이터가 없으면 빈 공백으로 처리됨 -->

</body>
</html>

▷ 연산자 사용해보기

* el_03.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연산자 연습</title>
</head>
<body>
문자열 출력: 연산자 출력
\{ 5 + 2 } : ${ 5 + 2 }<br /> 
\{ 5 - 2 } : ${ 5 - 2 }<br /> 
\{ 5 * 2 } : ${ 5 * 2 }<br /> 
\{ 5 / 2 } : ${ 5 div 2 }<br /> 
\{ 5 mod 2 } : ${ 5 mod 2 }<br />
\${ 5 > 2 } : ${ 5 > 2 }<br /> 
\${ 5 gt 2 } : ${ 5 gt 2 }<br /> 
\${ (5 > 2) ? 5 : 2  } : ${ (5 > 2 ) ? 5 : 2 }<br /> 
\${ (5 gt 2) } || (5 lt 2) } : ${ (5 > 2) || (5 < 2) }<br />
<%
	// 처리결과 input객체의 사용종료
	String input = null;
%> 
<%--2교시 \${ empty input } : ${ empty input }<br /> --%>
<% 
	// 서버쪽 로직
	if (input == null) {
%>
	<!-- HTML 출력 -->
	스크립트릿 사용<br />
	input객체가 현재 비어있습니다.(null)상태
<%	
	}
%>
<!-- JSTL을 사용하여 로직을 태그로 변환 -->
<c:if test=${ empty input }>
	<!-- test=${empty input}의 결과가 null이면 여기 출력 -->
	EL + JSTL 사용<br />
	input객체가 현재 비어있습니다. (null)상태
</c:if>

</body>
</html>

▷ 요청파라미터처리

* el_04.jsp

- 요청 양식

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요청파라미터 처리</title>
</head>
<body>
	<form action="el_04.do.jsp" method="">
		좋아하는 계절 :
		<input type="checkbox" name="season" value="Spring" />봄
		<input type="checkbox" name="season" value="Summer" />여름
		<input type="checkbox" name="season" value="Fall" />가을
		<input type="checkbox" name="season" value="Winter" />겨울
		<input type="submit" value="전송" />
	</form>
</body>
</html>

* el_04.do.jsp

- 처리

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%-- 
디렉티브(지시자) 태그 : 페이지 설정
스크립트 태그<%! %> : 실제 객체의 멤버변수와 멤버 메소드를 만듦
스크립트릿 태그 <% %> : 로컬메소드의 내용 _jsp_service()라는 메소드의 내용으로 들어감
표현식 태그 <%= %> 
--%>    
<%
	// 로컬처리영역
	String seasonArr[] = request.getParameterValues("season");
	out.println("당신이 좋아하는 계절 : ");
	for (String season : seasonArr ) {
		out.println(season + " | ");
	}
%>

▷ EL과 JSTL을 이용한 로그인 예제
* el_05.logon.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>
	<form action="el_05.logon_do.jsp">
		<label for="userid"> 아이디 : </label>
		<input type="text" name="id" id="userid" /> <br />
		<label for="userpwd"> 암 &nbsp; 호 : </label>
		<input type="text" name="pwd" id="userpwd" /> <br />
		<input type="submit" value="login" />
	</form>
</body>
</html>

- label : 양식에서 화면에 출력할때 설명문

* el_05.logon_do.jsp

- 처리

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EL과 JSTL을 이용한 로그인 예제</title>
</head>
<body>
	<!-- 표현식 내용 출력 -->
	당신이 입력한 정보입니다. (고전적 방식)
	아이디 : <%= request.getParameter("id") %><br />
	비밀번호 : <%= request.getParameter("pwd") %><br />
	
	당신이 입력한 정보입니다. (EL 방식)
	아이디 : ${ param.id }<br />
	비밀번호 : ${ param["pwd"] }<br />
	
</body>
</html>

▷null 비교하기
* el_06.null.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>
자바식 처리 : <%= request.getParameter("id") %> <br />
EL 표현식 : ${ param.id }
</body>
</html>

- 주소창에 id값이 있고 없고의 차이

* el_06.값비교_자바.jsp

- 자바에서는 값을 비교할때 숫자자료는 == 연산자 사용가능함
- 객체를 비교할때는 두가지로 비교해야함
- 같은 객체(주소 참조)인가 비교할때는 == 연산자를 사용함
- 객체의 값이 같은가를 비교하고 싶으면 equals()메소드를 사용함

- EL식을 사용한 비교
EL식은 주소비교를 하지 않고 값 비교를 기본으로 한다

<%@ 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>
<p>
자바에서는 값을 비교할때 숫자자료는 == 연산자 사용가능함
객체를 비교할때는 두가지로 비교해야함
같은 객체(주소 참조)인가 비교할때는 == 연산자를 사용함
객체의 값이 같은가를 비교하고 싶으면 equals()메소드를 사용함
</p>
자바코드를 사용한 비교<br />
== 연산자 사용 결과 : <%= request.getParameter("id") == "seoul" %> <br />
equals() 사용 결과 : <%= request.getParameter("id").equals("seoul") %><br />
<hr />
<br>
<br>
EL식을 사용한 비교<br />
EL식은 주소비교를 하지 않고 값 비교를 기본으로 합니다.
== 연산자 사용 결과 : ${ param.id == "seoul" }<br>

</body>
</html>

- 실행시 ?id=seoul 작성하기
작성하지 않으면 null(상태)이기 때문에 값과 비교가 안되서 500에러 발생
-> null은 값이 아니고 가르키지 않음의 상태, 빈 것이 아님

* el_06.null_에러처리.jsp

- 자바코드를 사용한 NPE(Null Pointer Exception) 처리

<%@ 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>
자바코드를 사용한 NPE(Null Pointer Exception) 처리 <br />
<%
	// 요청 파라미터 id가 null이 아니면 처리를 하고
	if(request.getParameter("id") != null ) {
%>
	== 연산자 사용 결과 : <%= request.getParameter("id") == "seoul" %> <br />
	equals() 사용결과 : <%= request.getParameter("id").equals("seoul") %> <br />
<%
	}else {
		// out.println("id를 전달해 주세요")
%>
	id를 전달해 주세요 <br />
<%		
	}
%>	
EL표현식으로 처리하면 param은 값을 무조건 리턴하므로 NPE예외(500)가 발생하지 않는다

<% %>
</body>
</html>

-> param은 빈문자열 또는 값으로 나옴 , null이 없다

▷ EL 표현식으로 간단하게 계산기 만들기

* el_07.간단계산기.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>
	<form action="el_07.간단계산기_결과.jsp">
		숫자 1 : <input type="number" name="num1"	 /><br />
		숫자 2 : <input type="number" name="num2"	 /><br />
		연산자 : <input type="text" name="op" value="+" size="1" /><br />
		<input type="submit" value="보내기" />
	</form>
</body>
</html>

* el_07.간단계산기_결과.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>
	1. 고전적인 방식 : <%-- 스크립트에서의 자바코드 이용 --%>
	<% 
	   // 요청값으로 넘어오는 값은 기본이 모두 문자열이므로 String
	   String str1 = request.getParameter("num1");
	   String str2 = request.getParameter("num2");
	   String op = request.getParameter("op");
	   
	   // 위의 문자열을 활용하려면 숫자로 바꿔야 함
	   int num1 = Integer.parseInt(str1);
	   int num2 = Integer.parseInt(str2);
	   
	   // 2. 스크립트로 출력하는 방식
	   out.println(
			   num1 + " + " + num2 + " = " 
	           + (num1 + num2) + "<hr />");
	%>
	<%-- 표현식을 이용한 방법 --%>
	<%= num1 %> + <%= num2 %> = <%= (num1 + num2) %><hr />
	3. EL표현언어 방식 <%-- 보다 깔끔하고 간단한 코드 --%>
	${ param.num1 } + ${ param.num2 } = ${ param.num1 + param.num2 }	
</body>
</html>

※ EL표현언어를 사용하면 보다 깔끔하고 간단한 코드작성이 가능

EL은 간단한 표현식을 이용해서 데이터를 출력하는 역할이기 때문에 '문'을 처리하기 위해 JSTL라이브러리가 필요함

2023.06.22 - [백엔드/JSP & Servlet] - JSP & Servlet - 8(JSTL + 게시판 만들기)

JSP & Servlet - 8(JSTL + 게시판 만들기)

2023.06.19 수업 복습 * 스프링은 서블릿 기반 * 프로토콜주소:// 주소:포트(기본은 생략 가능)/폴더(=웹앱)/쿼리스트링 * ? 데이터 : 쿼리스트링(query String) 키=값(변수=저장데이터) * 요청한 서버주소

dustj0824.tistory.com

'백엔드 > 웹 개발' 카테고리의 다른 글

11 게시판 만들기( JDBC 구현 ) (0)	2023.06.23
10 (JDBC 프로그래밍 준비) (0)	2023.06.23
8(JSTL + 게시판 만들기) (0)	2023.06.22
7 (게시판 만들기) (0)	2023.06.22
6(MVC 방식 + 게시판 만들기) (0)	2023.06.21

study_ys

9 (EL 표현식)

'백엔드 > 웹 개발' 카테고리의 다른 글

티스토리툴바

9 (EL 표현식)

'백엔드 > 웹 개발' 카테고리의 다른 글

관련글

티스토리툴바