JSP - #1 JSP

임다이·2023년 10월 31일

jsp/servlet

Jsp/Servlet

목록 보기

6/10

JSP의 필요성

JSP vs Servlet

Servlet
- 장점
  복잡한 로직 구현에 적합함
- 단점
  JAVA코드 중심 → 화면작성 작업과 수정이 어려움
- 형식
JSP
- 장점
  HTML 코드 중심 → 화면작성 작업, 수정 용이
- 단점
  소스보기로 소스가 공개되어 중요정보에 부적합
- 형식

→ 로직구현은 Servlet 클래스에, HTML 중심의 코드는 JSP에

JSP(Jakarta Servlet Pages)

-HTML내에서 Java코드를 작성하고 Web서버에서 Web Page를 생성하여 웹 브라우저에게 돌려주는 Java를 기반으로 한 스크립트 언어
-.jsp 확장자
-동적으로 작동하여 html 문서로 응답
-Jsp → Servlet → class → HTML 으로 변환되어 실행

Jsp Life Cycle

Jsp 기본문법

스크립트릿(Scriptlet)
<% 실행문 %> → Jsp내에서 Java코드를 작성할 때 사용
.java로 변환시 _jspService()메소드 내로 이동
표현식
<%= 실행문 %> → 동적인 데이터를 Web에 출력할 때 사용
.java로 변환 시 out.print()메소드로 변환
선언문(Diclartion)
<%! 실행문 %> → 멤버 변수 선언, 메소드 정의할 때 사용
.java로 변환 시 해당 클래스의 영역에 선언

→ 선언문만 따로 문법이 있는 이유
메소드 안에 메소드 선언하면 지역 메소드가 되기 때문에 클래스에 저장하기 위해서 따로 작성한다.

지시자(Directive)
<%@ 속성 = 값 %> → .java로 변환할 때 필요한 정보 기술
- page
  현재 Jsp페이지의 전체적인 환경설정
- include
  현재 페이지에 다른 파일의 내용 삽입
- taglib
  태그 라이브러리에서 태그를 가져와서 사용

page 지시자
현재 Jsp페이지의 전체적인 환경설정
- contentType
  웹 브라우저에 전송되는 문서의 타입과 문자코드 지정
- lanuage
  스크립트 언어 종류 지정
- pageEncoding
  현재 Jsp페이지에 대한 문자 집합 지정
- import
  현재 Jsp페이지에서 사용할 Java패키지나 클래스 지정
- errorPage
  에러가 발생할 때에 대신 호출되어 처리될 페이지 지정
→ contentType의 값은 .java로 변환 시 response.setContentType의 매개변수로 변환

include 지시자
현재 Jsp페이지에 다른 파일의 내용을 삽입

taglib 지시자
태그 라이브러리에서 태그 가져와서 사용
- JSTL
  Jsp에서 사용 가능한 표준 라이브러리
- 커스텀태그
  Jsp를 작성할 때 자주 사용 되는 Java 코드를 Web에서 사용할 수 있는 태그로 만들어 놓은 것

주석
프로그래밍 내용 메모 등 코드 설명, 협업 하기 위해 사용

↓ 이렇게 뜬다

실습

basic.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>

<h1> Jsp 기본문법 </h1>
<!-- 1. 스트립트릿 : Jsp페이지 내에 Java코드를 작성하기 위해서 사용 -->
<%
    // Java언어 사용 가능
    int a = 1;
    int b = 3;
    int result = a+b;
    System.out.println("a+b의 결과 : " + result);
%>

<% for(int i=0; i<5; i++) {%>
    html코드
<%}%>

<!-- 2. 표현식 : Web에 결과값을 출력하기 위해 사용
              : 변수, 메소드 호출, 연산 -->
a + b의 결과값 : <%= result+5 %>

</body>
</html>

-스트립트릿 : Jsp페이지 내에 Java코드를 작성하기 위해서 사용
-표현식 : Web에 결과값을 출력하기 위해 사용
: 변수, 메소드 호출, 연산

sum100.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>

<h1> 1~100까지의 합 구하기 </h1>
<% 
    int sum = 0;
    for(int i=1; i<101; i++) {
        sum += i;
        // sum= sum+i;
}
%>
<%= sum %>

</body>
</html>

table.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>

<h1> 10개의 방 만들기 </h1>
<table  border=1 >
    <tr>
<%
        for(int i=1; i<11; i++){%>
            <td> <%= i  %> </td>
<%} %>
    </tr>
</table>

</body>
</html>

diclation.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>

<h1> Jsp 기본문법 - 선언문 </h1>
<!-- 3. 선언문 : 멤버변수, 메소드 선언 등을
                클래스 영역에 하기 위해서 사용 -->

<%!
    // 합을 구하는 메소드
    public int addNumber(int num1, int num2){
        return num1+num2;
    }
%>

<% System.out.println(addNumber(1,2)); %>
<%= addNumber(1,2)+3 %>

</body>
</html>

-선언문 : 멤버변수, 메소드 선언 등을
클래스 영역에 하기 위해서 사용

cla.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1> 계산기 </h1>

<form action="./Ex05_cal.jsp">
    Number 1 : <input type="text" name="num1"> <br>
    Number 2 : <input type="text" name="num2"> 
    <br><input type="submit">
</form>

</body>
</html>

cal.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<%!
    // 2. 선언문을 통해서 메소드 만들기
    public int plusNum(int num1, int num2) {
        return num1 + num2;
    }

    public int minusNum(int num1, int num2) {
        return num1 - num2;
    }
    public int multiNum(int num1, int num2){
        return num1 * num2;
    }
    public int diviNum(int num1, int num2){
        return num1 / num2;
    }
%>

    <%
    // 1. html에서 보낸 숫자 2개 받아오기
    String num1 = request.getParameter("num1");
    String num2 = request.getParameter("num2");
    %>

    <%
    int number1 = Integer.parseInt(num1);
    int number2 = Integer.parseInt(num2);
    %>

    <!-- 3. 표현식을 통해서 웹에 출력 -->
    <%= num1 %> + <%= num2 %> : <%= plusNum(number1, number2) %> <br>
    <%= num1 %> - <%= num2 %> : <%= minusNum(number1, number2) %> <br>
    <%= num1 %> * <%= num2 %> : <%= multiNum(number1, number2) %> <br>
    <%= num1 %> / <%= num2 %> : <%= diviNum(number1, number2) %>

</body>
</html>

error.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>

<img alt="" src="./img/error_txt1.png">

</body>
</html>

makeError.jsp

<!-- 4. 지시자 : Servlet으로 변환할 때 필요한 정보들을 기술
     4-1. page 지시자 : 현재 jsp 페이지에 대한 환경설정
          - language : 사용 될 언어
          - contentType : 문서의 종류, 인코딩 방식
            -> servlet으로 변환 될 때 response.setContentType(매개변수)의 매개변수값
          - pageEncoding : 현재 문서의 문자 타입
          - errorPage : 오류가 났을 때 대체 할 페이지 지정
          - import : Java패키지나 클래스를 볼러올 때 사용 -->
<%@page import="java.util.Random"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page errorPage="./Ex06_error.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 일부러 오류 나는 페이지 만들기 -->
<%= 2/0 %>

<% Random r = new Random(); %> 

</body>
</html>

-지시자 : Servlet으로 변환할 때 필요한 정보들을 기술
-page 지시자 : 현재 jsp 페이지에 대한 환경설정
- language : 사용 될 언어
- contentType : 문서의 종류, 인코딩 방식
-> servlet으로 변환 될 때 response.setContentType(매개변수)의 매개변수값
- pageEncoding : 현재 문서의 문자 타입
- errorPage : 오류가 났을 때 대체 할 페이지 지정
- import : Java패키지나 클래스를 볼러올 때 사용

footer.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>

<div>
    광주광역시 동구 예술길 31-15, 광주 아트센터 4층 <br>
    Tel. 062-655-3509 (사)스마트인재개발원
</div>

</body>
</html>

main.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>

<h1> 메인 페이지 </h1>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
맨 아래
<!-- 4-2. include 지시자 : 현재 페이지에 다른 페이지를 삽입할 때 사용 -->
<%@ include file="Ex07_footer.jsp" %>

</body>
</html>

-include 지시자 : 현재 페이지에 다른 페이지를 삽입할 때 사용

annotation.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>

<!-- HTML 주석 : 소스보기 공개 -->
<%-- 스크립트 주석 : 소스보기 비공개 --%>

<%
    // Java 주석 : 소스보기 비공개
    /* Java 주석 : 소스보기 비공개 */
%>

</body>
</html>

JSTL.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
  <!-- 4-3. taglib 지시자 : 태그 라이브러리를 사용하기 위한 지시자 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!-- 문자 하나를 정해서 JSTL을 사용하겠다고 알려주기
  prefix -> 이제 밑에서 우리가 custom한 태그를 쓸 건데 기호를 정해서 해당 라이브러리를 사용하겠다! -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- 화면에 1~10 출력 -->

	<%
    for(int i=1;i<=10;i++){
       out.print(i + "<br>");
    }
 %>

	<!-- 태그 라이브러리 -->
 	<!-- var:변수선언, begin:시작, end:끝, step:증가량 -->
 	<c:forEach var="i" begin="1" end="10" step="1">
	<!-- EL표기법 -->
    <c:if test="${i%2==0}">
       ${i} <br>
    </c:if>
    
 </c:forEach>

	<!-- 1. 변수 선언 -->
	<c:set var="a" value="10"> </c:set> <!-- a라는 변수명에 10이라는 값을 주겠다. -->
	<c:set var="a" value="10"/> <!-- 끝태그를 쓰지않아도 /를 쓰면 끝태그처럼 쓸 수 있다. -->

	<!-- 출력 -->
	<c:out value="${a}"></c:out> <!-- a라는 변수명을 쓰고 싶으면 EL표기법을 쓰면된다. -->

	<!-- 2. if문 -->
	<hr>
	<c:if test="${a%2==0}">
		<c:out value="a는 짝수" />
	</c:if>
	<c:if test="${a%2==1}">
		<c:out value="a는 홀수"></c:out>
	</c:if>

	<!-- 3. switch문 -->
	<hr>
	<c:set var="b" value="11"></c:set>
	<c:out value="${b}"></c:out>
	<hr>
	<c:choose>
		<c:when test="${b%2==0}">
			<c:out value="b는 짝수"></c:out>
		</c:when>
		<c:otherwise>
			<c:out value="b는 홀수"></c:out>
		</c:otherwise>
	</c:choose>

	<!-- 4. for문 -->
	<hr>
	<c:forEach var="i" begin="1" end="5">
		<c:out value="${i}"></c:out>
	</c:forEach>

	<!-- 5. functions로 배열 만들기 -->
	<hr>
	<c:set var="team" value="${fn:split('안서혁,정윤오,임다이,이상훈', ',')}"></c:set>

	<c:forEach var="member" items="${team}">
		<c:out value="${member}"></c:out>
	</c:forEach>
	<hr>
	<c:out value="${team[1]}"></c:out>

	<!-- 6. functions로 문자열의 길이 가져오기 -->
	<hr>
	<c:out value="${fn:length(team)}"></c:out>
	<c:out value="${fn:length('임다이입니다.')}"></c:out>

``` -taglib 지시자 : 태그 라이브러리를 사용하기 위한 지시자 -prefix -> 이제 밑에서 우리가 custom한 태그를 쓸 건데 기호를 정해서 해당 라이브러리를 사용하겠다! -태그라이브러리 var : 변수선언, begin : 시작, end : 끝, step : 증가량 ![](https://velog.velcdn.com/images/ekdl/post/010891a3-f8c4-43ff-ace1-476e0c7c1ca1/image.png)

임다이

노는게 제일 좋아~!

이전 포스트

Servlet - #5 HTTP Method

다음 포스트

JSP - #1 JSP

Jsp/Servlet

JSP(Jakarta Servlet Pages)

Jsp 기본문법

실습

Servlet - #5 HTTP Method

JSP - #2 MVC Pattern

0개의 댓글