728x90
1. JSP 스크립트 요소
JSP 페이지에서 여러가지 동적인 처리를 제공하는 기능으로, <% %> 기호 안에 자바 코드로 구현한다.
<% %> 기호를 스크립트릿이라고 부른다.
스크립트 요소의 종류
- 선언문: JSP에서 변수나 메서드를 선언
- 스크립트릿: JSP에서 자바 코드를 작성
- 표현식: JSP에서 변수의 값을 출력
2. 선언문 사용하기
선언문은 JSP 페이지에서 사용하는 멤버 변수나 멤버 메서드를 선언할 때 사용한다. 선언문 안의 멤버는 서블릿 변환 시 서블릿 클래스의 멤버로 변환된다.
선언문의 형식
<%! 멤버 변수 or 멤버 메서드 %>
JSP에서 선언문 실습
hello.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%!
String name = "개발진스";
public String name() { return name; }
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선언문 연습</title>
</head>
<body>
<h1>안녕하세요 <%= name %>님!!</h1>
</body>
</html>
변환된 자바 코드를 보면 선언문에서 선언된 변수와 메서드는 서블릿 클래스의 멤버 변수와 멤버 메서드로 변환된 것을 알 수 있다. 따라서 선언문에서 선언된 변수는 JSP(서블릿 클래스) 안에서 자유롭게 접근이 가능하다.
3. 스크립트릿 사용하기
스크립트릿은 현재 JSP 페이지에서는 거의 사용하지 않지만 자바 코드로 화면의 동적인 기능을 구현할 수 있다면 자바 코드를 대체해서 나온 여러가지 태그들을 이해하는 데 도움이 되는 태그이다.
스크립트릿의 형식
<% 자바 코드 %>
JSP에서 스크립트릿 실습
hello2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%!
String name = "개발진스";
public String getName() { return name; }
%>
<!-- 스크립트릿을 이용해 자바 코드를 작성 -->
<% String age = request.getParameter("age"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크립트릿 연습</title>
</head>
<body>
<h1>안녕하세요 <%= name %>님!!</h1>
<!-- 표현식을 이용해 전송된 나이를 출력 -->
<h1>나이는 <%= age %>입니다!!</h1>
</body>
</html>
JSP의 스크립트 요소는 브라우저로 전송되지 않고 브라우저로 전송되기 전에 컨테이너에서 자바 코드로 변환된다.
<% %> 안에는 자바 코드만 작성할 수 있다는 점을 꼭 기억하자.
4. 표현식 사용하기
JSP 페이지의 정한 위치에 값을 출력하는 기능이다. 즉, JSP 페이지에서 변수나 메서드의 결괏값 등을 브라우저에 출력하는 용도로 사용한다.
표현식의 형식
<%= 값 or 자바 변수 or 자바 식 %>
JSP에서 표현식 실습
hello3.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%!
String name = "개발진스";
public String getName() { return name; }
%>
<% String age = request.getParameter("age"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표현식 연습</title>
</head>
<body>
<h1>안녕하세요 <%=name %>님!!</h1>
<h1>나이는 <%=age %>입니다!!</h1>
<h1>키는 <%=165 %> 입니다!!</h1>
<h1>나이+10은 <%=Integer.parseInt(age)+10%>살입니다!!</h1>
</body>
</html>
5. 스크립트 요소 이용해 실습하기
1) 로그인 예제
login.html
<form name="frmLogin" method="post" action="result.jsp" encType="UTF-8">
아이디 : <input type="text" name="user_id"><br>
비밀번호: <input type="password" name="user_pw"><br>
<input type="submit" value="로그인">
<input type="reset" value="다시 입력">
</form>
result.jsp
<%
request.setCharacterEncoding("UTF-8");
String user_id = request.getParameter("user_id");
String user_pw = request.getParameter("user_pw");
%>
<h1>아이디 : <%= user_id %></h1>
<h1>비밀번호 : <%= user_pw %></h1>
아이디가 admin이면 관리자 로그인 페이지로 이동하는 예제
result3.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String user_id = request.getParameter("user_id");
String user_pw = request.getParameter("user_pw");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>결과출력창</title>
</head>
<body>
<%
if(user_id==null || user_id.length()==0) {
%>
아이디를 입력하세요.<br>
<a href="/pro12/login3.html">로그인하기</a>
<%
} else {
if(user_id.equals("admin")) {
%>
<h1>관리자로 로그인 했습니다.</h1>
<form>
<input type="button" value="회원정보 삭제하기"/>
<input type="button" value="회원정보 수정하기"/>
</form>
<%
} else {
%>
<h1>환영합니다. <%= user_id %>님!!!</h1>
<%
}
}
%>
</body>
</html>
2) 학점 변환 예제
scoreTest.html
<h1>시험 점수를 입력해 주세요.</h1>
<form method="get" action="scoreTest.jsp">
시험점수 : <input type="text" name="score" /> <br>
<input type="submit" value="변환하기">
</form>
scoreTest.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
// 전송된 시험 점수를 가져온다
int score=Integer.parseInt(request.getParameter("score"));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>점수 출력 창</title>
</head>
<body>
<h1>시험 점수 <%= score %>점</h1><br>
<%
if (score >= 90) {
%>
<h1>A학점입니다.</h1>
<%
} else if (score >= 80 && score < 90) {
%>
<h1> B학점입니다.</h1>
<%
} else if (score >= 70 && score < 80) {
%>
<h1> C학점입니다.</h1>
<%
} else if (score >= 60 && score < 70) {
%>
<h1> D학점입니다.</h1>
<%
} else {
%>
<h1> F학점입니다.</h1>
<%
}
%>
<br>
<a href="scoreTest.html">시험점수입력</a>
</body>
</html>
3) 구구단 출력 예제
gugu.html
<form method="get" action="gugu.jsp">
출력할 구구단 : <input type="text" name="dan"><br>
<input type="submit" value="출력하기">
</form>
gugu.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
int dan = Integer.parseInt(request.getParameter("dan"));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단 출력하기</title>
</head>
<body>
<table border='1' width='800'>
<tr align='center' bgcolor='#FFFF66'>
<td colspan='2'><%= dan %>단 출력</td>
</tr>
<%
for(int i=1; i<10; i++) {
%>
<tr align='center'>
<td width='400'>
<%= dan %> * <%= i %>
</td>
<td width='400'>
<%= dan * i %>
</td>
</tr>
<%
}
%>
</table>
</body>
</html>
4) 이미지 리스트 출력 예제
imageList.html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style>
.lst_type{overflow:hidden;width:80%;padding:0 10px; margin:0 auto}
.lst_type li{overflow:hidden;clear:both;margin:10px 0 0;color:#2d2c2d;
font-family:'돋움',Dotum;font-size:12px;line-height:100px;
list-style:none ; border-bottom: 2px solid lightgray;position:relative; }
.lst_type li img{display:inline;float:left;position:absolute; }
.lst_type li a{color:#2d2c2d;text-decoration:none; margin-left:340px}
.lst_type li a:hover{text-decoration:underline}
.lst_type li span{color:blue;margin-left:330px;font-family:'돋움',Dotum;font-
size:14px; }
</style>
<meta charset="UTF-8">
<title>이미지 리스트 창</title>
</head>
<body>
<ul class="lst_type">
<%-- 리스트의 헤더를 표시 --%>
<li>
<span style='margin-left:50px'>이미지</span>
<span>이미지 이름</span>
<span>선택하기</span>
</li>
<%-- for 반복문을 이용해 <li> 태그를 연속해서 출력 --%>
<%
for(int i=0; i<10; i++) {
%>
<%-- <li> 태그를 이용해 한 행에 <a> 태그의 이미지와 텍스트를 나타냄 --%>
<li>
<a href='#' style='margin-left:50px'>
<img src='image/pic1.png' width='90' height='90' alt='' /></a>
<a href='#'><strong>이미지 이름: 이미지<%= i %></strong></a>
<a href='#'><input name='chk<%= i %>' type='checkbox' /></a>
</li>
<%
}
%>
</ul>
</body>
</html>
리스트로 출력하는 기능은 웹 페이지에서 많이 사용하는 기능이다.
6. 내장 객체 기능
JSP 페이지의 내장 객체란 JSP가 서블릿으로 변환될 때 컨테이너가 자동으로 생성시키는 서블릿 멤버 변수를 말한다.
즉, 서블릿으로 구현 시 자주 사용했던 객체를 개발자가 일일이 만드는 것이 아니라 서블릿으로 변환 시 컨테이너가 자동으로 생성하여 사용하게끔 제공하는 것이다.
JSP에서 제공하는 내장 객체의 종류
| 내장 객체 | 서블릿 타입 | 설명 |
| request | javax.servlet.http.HttpServletRequest | 클라이언트의 요청 정보를 저장 |
| response | javax.servlet.http.HttpServletResponse | 응답 정보를 저장 |
| out | javax.servlet.jsp.JspWriter | JSP 페이지에서 결과를 출력 |
| session | javax.servlet.http.HttpSession | 세션 정보를 저장 |
| application | javax.servlet.ServletContext | 컨텍스트 정보를 저장 |
| pageContext | javax.servlet.jsp.PageContext | JSP 페이지에 대한 정보를 저장 |
| page | java.lang.Object | JSP 페이지의 서블릿 인스턴스를 저장 |
| config | javax.servlet.ServletConfig | JSP 페이지에 대한 설정 정보를 저장 |
| exception | java.lang.Exception | 예외 발생 시 예외를 처리 |
자주 사용되는 내장 객체들의 스코프
| 내장 객체 | 서블릿 | 스코프 |
| page | this | 한 번의 요청에 대해 하나의 JSP 페이지를 공유 |
| request | HttpServletRequest | 한 번의 요청에 대해 같은 요청을 공유하는 JSP 페이지를 공유 |
| session | HttpSession | 같은 브라우저에서 공유 |
| application | ServletContext | 같은 애플리케이션에서 공유 |
1) session 내장 객체에 데이터 바인딩 실습
SessionTest.java
@WebServlet("/sess")
public class SessionTest extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html; charset=utf-8");
PrintWriter pw = response.getWriter();
HttpSession session = request.getSession(); // session 객체를 가져옴
session.setAttribute("name", "개발진스"); // session 객체에 name을 바인딩
pw.println("<html><body>");
pw.println("<h1>세션에 이름을 바인딩합니다.</h1>");
pw.println("<a href='/pro12/session1.jsp'>첫 번째 페이지로 이동하기</a>");
pw.println("</body></html>");
}
}
session1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name = (String)session.getAttribute("name");
session.setAttribute("address", "서울시 강서구");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>session 내장 객체 테스트2</title>
</head>
<body>
이름은 <%= name %>입니다.<br>
<a href=session2.jsp>두 번째 페이지로 이동</a>
</body>
</html>session 객체의 사용법은 서블릿에서 배운 HttpSession 사용법과 같다.
JSP와의 차이점은 자동으로 세션 객체를 생성해주므로 굳이 getSession() 메서드를 호출해서 세션을 얻을 필요가 없다는 것이다.
getAttribute()메서드를 이용해 첫번째 JSP에서 session에 바인딩된 name 값을 가져온 후 setAttribute() 메서드를 이용해 session에 address를 바인딩 한다.
session2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name = (String)session.getAttribute("name");
String address = (String)session.getAttribute("address");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>session 내장 객체 테스트</title>
</head>
<body>
이름은 <%= name %>입니다.<br>
주소는 <%= address %>입니다.<br>
</body>
</html>getAttribute()를 이용해 서블릿과 JSP에서 session에 바인딩된 name과 address값을 가져온다
2) application 내장 객체에 데이터 바인딩 실습
appTest1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
session.setAttribute("name", "개발진스");
application.setAttribute("address", "서울시 성동구");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내장 객체 스코프 테스트1</title>
</head>
<body>
<h1>이름과 주소를 저장합니다.</h1>
<a href=appTest2.jsp>두 번째 웹 사이트로 이동</a>
</body>
</html>
appTest2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name = (String)session.getAttribute("name");
String address = (String)application.getAttribute("address");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>이름은 <%= name %>입니다.</h1>
<h1>주소는 <%= address %>입니다.</h1>
</body>
</html>
같은 브라우저에서 appTest2.jsp를 요청하면 session과 application에 저장된 값을 그대로 출력하지만, 다른 브라우저로 요청할 경우 session 내장 객체의 스코프는 접근할 수 없으므로 null을 출력한다. 이를 통해 application 내장 객체의 스코프는 애플리케이션 전체이고, session 내장 객체의 스코프는 같은 브라우저임을 알 수 있다.
3) request 내장 객체에 데이터 바인딩 실습
request1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
import="javax.servlet.RequestDispatcher"
pageEncoding="UTF-8"%>
<%
request.setAttribute("name", "개발진스");
request.setAttribute("address", "서울시 강서구");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>첫 번째 JSP</title>
</head>
<body>
<%
RequestDispatcher dispatch = request.getRequestDispatcher("request2.jsp");
dispatch.forward(request, response);
%>
</body>
</html>
request2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name = (String)request.getAttribute("name");
String address = (String)request.getAttribute("address");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>두 번째 JSP</title>
</head>
<body>
<h1>이름은 <%= name %>입니다.</h1>
<h1>주소는 <%= address %>입니다.</h1>
</body>
</html>
브라우저에서 request1.jsp로 요청하면 request 객체에 바인딩한 후 request2.jsp로 포워딩하여 이름과 주소를 출력한다.
4) out 내장 객체에 데이터 바인딩 실습
out1.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 method="post" action="out2.jsp">
이름 : <input type="text" name="name"><br>
나이 : <input type="text" name="age"><br>
<input type="submit" value="전송">
</form>
</body>
</html>
out2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>데이터 출력창</title>
</head>
<body>
<%
if(name != null || name.length() != 0) {
%>
<h1><%= name %>, <%= age %></h1>
<%
} else {
%>
<h1>이름을 입력하세요</h1>
<%
}
%>
<%
if(name != null || name.length() != 0) {
%>
<h1><% out.println(name + " , " + age); %></h1>
<%
} else {
%>
<h1>이름을 입력하세요</h1>
<%
}
%>
</body>
</html>
out 내장 객체를 이용해 스크립트릿으로 출력하면 복잡한 코드를 상대적으로 간단하게 출력할 수 있다는 장점이 있다.
참고 : ⌜자바 웹을 다루는 기술⌟ 책을 공부하며 요약・정리한 내용입니다.
728x90
'💻 Web_Back end > JSP' 카테고리의 다른 글
| JSP welcome 파일 지정하기 (0) | 2023.04.30 |
|---|---|
| JSP 페이지 예외 처리하기 (0) | 2023.04.29 |
| JSP 정의와 구성요소 (0) | 2023.04.27 |
| 페이지 모듈화와 요청 흐름 제어 (0) | 2023.04.07 |
| 기본 객체와 영역 (0) | 2023.04.07 |
