22.03.25-JSP 기초(스크립트/지시어)

Notice

Recent Posts

Recent Comments

Link

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

IT 성장 일기

22.03.25-JSP 기초(스크립트/지시어) 본문

IT 학습 노트/Java

22.03.25-JSP 기초(스크립트/지시어)

통통배 노아 2022. 3. 26. 15:11

JSP
(Java Server Pages)
동적인 컨텐츠를 생성하기 위해 스크립트 언어 형식으로 프로그램을 작성할 수 있어 개발자에게 쉬운 개발을 할 수 있게 한다. 사용자가 직접 태그를 정의해서 사용할 수 있는 사용자 정의 태그를 지정할 수 있는 기능을 갖고 있다.

개요

1.JSP는 자바 서블릿(Servlet) 기술을 확장시킨 웹 환경 상에서 100% 순수한 자바만으로 서버 사이드 모듈을 개발하기 위한 기술이다.

2.JSP는 DBMS와 같은 백 엔드 서버(Back-end Server)와 연동하여 이 백 엔드 서버의 데이터를 가공하여 웹 상의 최종적 사용자에게 디스플레이 할 수 있고, 여러 조건에 따라 디스플레이 할 수 있는 내용들을 동적으로 처리할 수 있는 기능을 제공한다.

JSP 문서의 기본 구조

1.JSP 기술에서 웹 애플리케이션을 구현 할 때 작성하는 코드.

2.JSP 페이지는 HTML 문서의 사이에 Java 문법의 코드가 삽입되는 형태로 작성한다.

3.JSP 페이지에 있는 HTML 코드는 웹 브라우저로 그대로 전송되지만, JSP 문법의 코드는 웹 컨테이너 쪽에서 실행되고 그 결과만 웹 브라우저로 전송한다.

Servlet 수행 Process

웹 컨테이너는 JSP 페이지 전체를 서블릿 클래스의 소스 코드로 변환한 다음에, 그 소스 코드를 컴파일해서 그 결과를 가지고 서블릿 객체를 만들고, 그 서블 릿 객체를 초기화해서 서블릿을 만든다. 웹 브라우저로부터 URL이 왔을 때 실행되는 것은 서블릿이다.

JSP 페이지가 실행되기까지의 과정

JSP 페이지 -------> 서블릿 클래스의 소스코드 -------> 서블릿 클래스의 클래스 파일 -------> 서블릿 객체 -------> 서블릿
변환 컴파일 인스턴화 초기화

JSP동작원리

1. HTML 태그와 JSP 태그를 사용하여 페이지를 작성-> 확장자를 .jsp 로 저장.

2. 변환: JSP 요청->JSP컨테이너가 태그로 만들어진 JSP파일을 자바소스로 변환하여 *.java 파일로 만듦.

3. 컴파일: JSP컨테이너는 *.jsp 파일을 변환한 *.java 파일을 컴파일 하여 *.class 파일을 만듦

4. 실행: 컴파일된 자바 실행 파일은 서블릿 컨테이너에 의해 서블릿으로서 동작.

5. 변환과 컴파일 작업은 최초의 요청이나 JSP 변경되었을때만 수행.

변환 (Translation)

컨테이너는 JSP를 해석하여 하나의 서블릿 소스로 만든 다음에 해당 소스를 컴파일 한다. 그러면 서블릿 클래스 파일이 생성되는데, 이 서블릿 클래스는 JSP가 실행 될 수 있는 형태로 구현된 JSP 구현 클래스 이다. 이러한 변환 과정은 웹 컴포넌트가 배치되는 시점이나 해당페이지에 대한 최초 요청이 있을 때 컨테이너가 수행한다

실행 (Execution)

실행은 요청이 있을 때마다 발생. 컨테이너는 서블릿으로 변환되어 컴파일된 구형 서블릿 클래스를 초기화 하고 이 서블릿 클래스를 통해 요청을 처리하고 응답한다.

JSP 구문의 구성요소

JSP구성요소는 아래왁 같이 6가지가 있는데 오늘 수업시간에는 스클립트와 지시어까지 배웠다. 나머지 요소들에 대해서는 이후에 다시 정리하여 작성 할 예정이다.

1. 스크립트

2. 지시어

3. 내장객체

4. 액션태그

5. 표현언어

6. 사용자 정의 태그, JSTL

1.스크립트(script)요소

자바 코드를 작성하고 코드에서 작성한 변수나 계산식 및 메소드의 결과를 출력하기 위해 사용한다.

스크립트(script)요소
스크립틀릿(scriptlet)	<% ............ %>	자바(JAVA) 소스코드를 삽입
표현(expression)	<%= .....자바 식..... %>	값을 출력
선언부(declaration)	<%! ............. %>	멤버변수 및 메소드 선언

2.지시어(디렉티브:directive)

지시어는 JSP에 대한 설정 정보 또는 JSP 페이지에 다른문서를 포함 시킬때 사용한다.

<%@ 디렉티브이름 속성=“값” 속성=“값” … %> 의 형태로 작성

<%@ page ... %>		JSP 페이지 전체에 적용되는 정보를 설정 (import역할) 스크립트언어 , 에러페이지 지정, 버퍼 설정 등 을 정의한다.
<%@ include ... %>		번역단계에서 특정 영역에 다른 문서 포함.
<%@ tablib ... %>		태그 라이브러리 지정

예제

예제1) 파일 이름을 current Date로 도출하여 저장시킨 후 화면에 출력하기

1.html작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function chk() {
		if (!frm.title.value) {  alert("제목 ?");  
			frm.title.focus(); return false;		}
		if (!frm.writer.value) {  alert("작성자 ?");  
			frm.writer.focus(); return false;		}
		if (!frm.content.value) {  alert("내용 ?");  
			frm.content.focus(); return false;		}
		return true;
	}
</script>
</head>
<body>
	<h1>게시판 Ctrl+Shift+F 자동정렬</h1>
	<form action="board.jsp" name="frm" onsubmit="return chk()" method="post">
		<table bgcolor="pink">
			<tr>
				<td>제목</td>
				<td><input type="text" name="title"></td>
			</tr>
			<tr>
				<td>작성자</td>
				<td><input type="text" name="writer"></td>
			</tr>
			<tr>
				<td>내용</td>
				<td><textarea rows="6" cols="30" name="content"></textarea></td>
			</tr>
			<tr>
				<td><input type="submit" value="확인"></td>
				<td><input type="reset" value="입력취소"></td>
			</tr>
		</table>
	</form>
</body>
</html>

2.html을 실행하여 위와 같은 내용을 입력하여 확인을 누르면 현재 날짜와 시간으로 파일 저장되고 작성한 내용이 화면에 출력되게하는 jsp를 작성한다.

<%@page import="java.io.FileWriter"%>
<%@page import="java.util.Date"%>
<%@ 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>
<%

//.java에서는 	out.println("<html><body>"); 이런거 써서 직접 구조 만들어줬어야했는데
	//jsp사용하면 사용하지 않아도 된다. 그래서 jsp많이 사용해줌.
	
	request.setCharacterEncoding("utf-8");
	String title = request.getParameter("title");
	String writer = request.getParameter("writer");
	String content = request.getParameter("content");
	String msg = "제목 : " + title + "\r\n";
	msg += "작성자 : " + writer + "\r\n";
	msg += "내용 : " + content + "\r\n";
	
	
	
	
	//---------------------------------
	//------------파일저장--------------
	//---------------------------------
	Date date = new Date();
	
	long fileName = date.getTime();//current Date 에서 시간도출 하여 fileName 만듦
	String real = application.getRealPath("/WEB-INF/out/" + fileName + ".txt");
				//
	System.out.println(real);
	//File에 저장할 수 있는 객체
	FileWriter fw = new FileWriter(real);
	fw.write(msg); //위의 메세지를 저장해놓는다.
	fw.close();
	
	
	
	//---------------------------------
	//------------화면출력--------------
	//---------------------------------
	//PrintWriter out = response.getWriter(); 과 같은 의미인 jsp에서 갖고 있는 내장 객체
	out.println("제목: " + title + "<p>"); 
	out.println("작성자: " + writer + "<p>");
	out.println("작성일: " + date + "<p>");
%>
</body>
</html>

3. 확인을 누르면 부라우저에 결과가 잘 출력되는 것이 확인된다.

4. 그럼 파일이 잘 저장되었는지 확인해보고자 한다.

확인을 누르는 순간, Console화면에서 아래와 같은 문구가 뜬다.

C:\jsp\jspSrc\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\och03\WEB-INF\out\1648273172908.txt

이는 입력한 내용이 저장된 위치와 date.getTime()으로 current Date를 도출하여 자동으로 설정된 파일이름을 의미한다.

4. 파일이 이동한 위치로 이동하기

C드라이브->jsp->jspSrc->.metadata->.plugins->org.eclipse.wst.server.core->tmp0->wtpwebapps->och03->WEB-INF->out->1648273172908.txt 순으로 직접 찾아가거나 해당 글을 복사하여 경로에 복붙하여도 된다.

5. 내용이 잘 저장되었는지 확인

예제2) 사칙연산

1.html 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function chk() {
		if (!frm.num1.value) {
			alert("첫번째 수 ?");			
			frm.num1.focus();
			return false;
		}
		if (isNaN(frm.num1.value)) {
			alert("그게 숫자냐 ?");
			frm.num1.focus();
			frm.num1.value = "";
			return false;
		}
		if (!frm.num2.value) {
			alert("두번째 수 ?");
			frm.num2.focus();
			return false;
		}
		if (isNaN(frm.num2.value)) {
			alert("숫자가 아닙니다.");
			frm.num2.focus();
			frm.num2.value = "";
			return false;
		}
		return true;
	}
</script>

</head>
<body>
	<h2>사칙연산 할 데이터 입력</h2>
	<form action="cal.jsp" name="frm" onsubmit="return chk()">
		첫번째 수 : <input type="text" name="num1"> <p>
		두번째 수 : <input type="text" name="num2"> <p>
		<input type="submit" value="확인">
	</form>
</body>
</html>

2.jsp 작성

<%@page import="java.io.PrintWriter"%>
<%@ 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>
<% 
int num1 = Integer.parseInt(request.getParameter("num1"));
int num2 = Integer.parseInt(request.getParameter("num2"));
int add = num1+num2;
int min = num1-num2;
int mul = num1*num2;
int div = num1/num2;
%>

덧셈 :	<%=add %><p>
뺄셈 :	<%=min %><p>
곱셈 :	<%=mul %><p>
나눗셈 :	<%=div %><p>
</body>
</html>

3.결과 확인

예제3) 선택한 색상으로 브라우저 화면 배경색 바꾸기

1.html 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>좋아하는 색은?</h1>
<form action="color.jsp">
	빨강<input type="radio" name="color" value="red" checked="checked"><br>
	주황<input type="radio" name="color" value="orange"><br>
	노랑<input type="radio" name="color" value="yellow"><br>
	초록<input type="radio" name="color" value="green"><br>
	파랑<input type="radio" name="color" value="blue"><br>
	남색<input type="radio" name="color" value="navy"><br>
	보라<input type="radio" name="color" value="violet"><br>
	<input type="submit" value="확인"><br>
</form>
</body>
</html>

2.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>
<%
// Parameter 받기
String color = request.getParameter("color");

%>
<body bgcolor="<%=color%>">

<h1>익스프레션 이용한 색깔변경</h1>

</body>
</html>

3.결과 화면

'IT 학습 노트 > Java' 카테고리의 다른 글

22.06.05-Spring MVC 파일 업로드(라이브러리 및 설정) (0)	2022.06.14
22.03.20-java 클래스/ 프로젝트 파일 가져오기(import 방법) (0)	2022.03.20
22.02.15 (0)	2022.02.15
22.02.14 인풋스트림 아웃풋 스트림 (0)	2022.02.14
22.02.10 (0)	2022.02.11

'IT 학습 노트/Java' Related Articles

IT 성장 일기

22.03.25-JSP 기초(스크립트/지시어) 본문

22.03.25-JSP 기초(스크립트/지시어)

예제

'IT 학습 노트 > Java' 카테고리의 다른 글

티스토리툴바