728x90
★ JSP 프로젝트 생성
- new -> Dynamic Project -> web
- webapps -> jsp파일 생성
■ 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>
<p>JSP로 만든 페이지입니다.</p>
</body>
</html>- 실행 결과
★ JSP, Java Server Pages
- 자바를 사용해서 서브측에서 페이지를 만드는 기술
- Servlet의 다음 버전
- 서블릿 vs JSP
1. 서블릿
a. 장점 : 자바 기반. 자바 구문을 사용할 수 있다. > 자바 클래스 사용
b. 단점 : 자바 기반. 클라이언트 코드를 작성하기 어려움. > 문자열 취급
> 가상 주소 매핑 필요
2. JSP(= 웹페이지처럼 보이는 서블릿)
a. 장점 : HTML 문서 기반. 클라리언트 코드 작성이 쉽다. > 구문 인식
> 가상 주소 매핑 불필요
b. 단점 : HTML 문서 기반. 자바 구문 작성이 불편하다.
3. 서블릿 + JSP
a. 서블릿 : 자바 코드 담당
b. JSP : 클라이언트 코드 담당
★ JSP 구성 요소
- 1. JSP 지시자, JSP Directive
page 지시자
include 지시자
taglib 지시자- 2. 스크립트 요소, Scripting Elements
스크립틀릿
익스프레션
선언부- 3. 액션 태그, Action Tags
기본 액션 태그
확장 액션 태그
사용자 정의 액션 태그
■ 구구단 만들기
- 소스코드
<%@page import="java.util.Random"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//스크립틀릿 영역 > 자바 영역
Random rnd = new Random();
int dan = rnd.nextInt(8) + 2;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
margin : 3px 10px;
}
</style>
</head>
<body>
<h1>구구단 <%= dan %>단</h1>
<%
for (int i=1; i<=9; i++) {
%>
<div><%= dan %> x <%= i %> = <%= dan*i %></div>
<%
}
%>
</body>
</html>- 실행 결과
■ 현재 날짜
- 소스코드
<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
Calendar now = Calendar.getInstance();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>현재 날짜</h1>
<p>오늘은 <%=String.format("%tF", now) %>입니다.</p>
</body>
</html>- 실행 결과
■ 방식
- SSR(Server Side Rendering)
- HTML 페이지를 서버측에서 만든다.
- 전통적 방식- CSR(Client Side Rendering)
- HTML 페이지를 JavaScript로 만든다.
- 필요한 데이터만 서버랑 송수신을 통해 얻는다.
- Ajax, JavaScript FrameWork(Angular, React 등..)
■ 1. JSP 지시자, JSP Directive
- 톰캣에게 여러가지 상황을 알려주는 역할 > 환경설정
- page 지시자 <%@ %>
- a. page 지시자
- JSP 페이지 관련 설정
- <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
- language="java" : 현재 페이지를 처리하는 서버측 언어가 java입니다.
- contentType="text/html; charset=UTF-8" : 브라우저에게 돌려줄 임시 페이지에 관련된 설정
- pageEncoding="UTF-8" : 현재 JSP 페이지의 인코딩
- <%@page import="java.util.Calendar"%> : 자바의 import
- errorPage="URL" : 오류가 발생하면 자동으로 URL로 이동. 오류 페이지- b. include 지시자
- <%@ include file="URL"%>
- 다른 JSP/HTML 페이지를 또 다른 JSP 페이지의 일부 영역에 삽입하는 기술
- 조각 페이지
- webapp > ex04_include.jsp : 메인 페이지
- webapp > "inc" > "sub.jsp" : 조각 페이지
사용
<%@ include file="inc/sub.jsp" %>
■ 2. 스크립트 요소, Scripting Elements
- a. 스크립틀릿 -> 일을 하는 역할
- <% %>
- 이 영역은 자바 영역이다.
- 순수 자바 코드를 HTML 페이지에서 작성 할 수 있도록 선언
- Scriptlet = Script + Applet
- 대부분의 비즈니스 코드 작성 담당(대부분의 업무 + 알고리즘 구현)
- 가장 중요한 역할- b. 익스프레션 -> 출력 하는 역할
- <%= 값 %>
- 자바의 값을 HTML 문서에 출력한다.- 실행 ex)
- 소스코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name = "홍길동";
int age = 20;
String color = "orange";
String txt = "<input type='text'>";
String attr = "background-color";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* CSS 구문으로 사용 */
div {
color : <%= color %>;
<%= attr %> : gold;
}
</style>
</head>
<body>
<%
//자바 영역
int a = 10;
int b = 20;
int c = a+b;
String str = name;
%>
<!-- HTML의 PCDATA로 출력 -->
<div><%= a %> + <%= b %> = <%= a+b %> </div>
<div><%= name %></div>
<!-- HTML의 속성값으로 출력 -->
<input type="text" value="<%= age %>">
<hr>
<%= txt %>
<input type="button" value="확인" id="btn1">
<script>
document.getElementById('btn1').onclick = function() {
//alert(<%= age %>);
alert('<%= name %>');
};
</script>
</body>
</html>- 실행 결과
- c. 선언부
<%! %>- jsp 주석
<%-- JSP 주석 --%>
728x90
'Server' 카테고리의 다른 글
| JSP STEP 4 - Response (1) | 2023.05.09 |
|---|---|
| JSP STEP 3 - Request_header (0) | 2023.05.09 |
| JSP STEP 2 - JSP 내장 객체 (0) | 2023.05.08 |
| SERVLET STEP 2 - Servlet 응용 (0) | 2023.05.08 |
| SERVLET STEP 1 - 기초 셋팅 및 설정 (0) | 2023.05.08 |
728x90
★ JSP 프로젝트 생성
- new -> Dynamic Project -> web
- webapps -> jsp파일 생성
■ 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>
<p>JSP로 만든 페이지입니다.</p>
</body>
</html>- 실행 결과
★ JSP, Java Server Pages
- 자바를 사용해서 서브측에서 페이지를 만드는 기술
- Servlet의 다음 버전
- 서블릿 vs JSP
1. 서블릿
a. 장점 : 자바 기반. 자바 구문을 사용할 수 있다. > 자바 클래스 사용
b. 단점 : 자바 기반. 클라이언트 코드를 작성하기 어려움. > 문자열 취급
> 가상 주소 매핑 필요
2. JSP(= 웹페이지처럼 보이는 서블릿)
a. 장점 : HTML 문서 기반. 클라리언트 코드 작성이 쉽다. > 구문 인식
> 가상 주소 매핑 불필요
b. 단점 : HTML 문서 기반. 자바 구문 작성이 불편하다.
3. 서블릿 + JSP
a. 서블릿 : 자바 코드 담당
b. JSP : 클라이언트 코드 담당
★ JSP 구성 요소
- 1. JSP 지시자, JSP Directive
page 지시자
include 지시자
taglib 지시자- 2. 스크립트 요소, Scripting Elements
스크립틀릿
익스프레션
선언부- 3. 액션 태그, Action Tags
기본 액션 태그
확장 액션 태그
사용자 정의 액션 태그
■ 구구단 만들기
- 소스코드
<%@page import="java.util.Random"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//스크립틀릿 영역 > 자바 영역
Random rnd = new Random();
int dan = rnd.nextInt(8) + 2;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
margin : 3px 10px;
}
</style>
</head>
<body>
<h1>구구단 <%= dan %>단</h1>
<%
for (int i=1; i<=9; i++) {
%>
<div><%= dan %> x <%= i %> = <%= dan*i %></div>
<%
}
%>
</body>
</html>- 실행 결과
■ 현재 날짜
- 소스코드
<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
Calendar now = Calendar.getInstance();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>현재 날짜</h1>
<p>오늘은 <%=String.format("%tF", now) %>입니다.</p>
</body>
</html>- 실행 결과
■ 방식
- SSR(Server Side Rendering)
- HTML 페이지를 서버측에서 만든다.
- 전통적 방식- CSR(Client Side Rendering)
- HTML 페이지를 JavaScript로 만든다.
- 필요한 데이터만 서버랑 송수신을 통해 얻는다.
- Ajax, JavaScript FrameWork(Angular, React 등..)
■ 1. JSP 지시자, JSP Directive
- 톰캣에게 여러가지 상황을 알려주는 역할 > 환경설정
- page 지시자 <%@ %>
- a. page 지시자
- JSP 페이지 관련 설정
- <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
- language="java" : 현재 페이지를 처리하는 서버측 언어가 java입니다.
- contentType="text/html; charset=UTF-8" : 브라우저에게 돌려줄 임시 페이지에 관련된 설정
- pageEncoding="UTF-8" : 현재 JSP 페이지의 인코딩
- <%@page import="java.util.Calendar"%> : 자바의 import
- errorPage="URL" : 오류가 발생하면 자동으로 URL로 이동. 오류 페이지- b. include 지시자
- <%@ include file="URL"%>
- 다른 JSP/HTML 페이지를 또 다른 JSP 페이지의 일부 영역에 삽입하는 기술
- 조각 페이지
- webapp > ex04_include.jsp : 메인 페이지
- webapp > "inc" > "sub.jsp" : 조각 페이지
사용
<%@ include file="inc/sub.jsp" %>
■ 2. 스크립트 요소, Scripting Elements
- a. 스크립틀릿 -> 일을 하는 역할
- <% %>
- 이 영역은 자바 영역이다.
- 순수 자바 코드를 HTML 페이지에서 작성 할 수 있도록 선언
- Scriptlet = Script + Applet
- 대부분의 비즈니스 코드 작성 담당(대부분의 업무 + 알고리즘 구현)
- 가장 중요한 역할- b. 익스프레션 -> 출력 하는 역할
- <%= 값 %>
- 자바의 값을 HTML 문서에 출력한다.- 실행 ex)
- 소스코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name = "홍길동";
int age = 20;
String color = "orange";
String txt = "<input type='text'>";
String attr = "background-color";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* CSS 구문으로 사용 */
div {
color : <%= color %>;
<%= attr %> : gold;
}
</style>
</head>
<body>
<%
//자바 영역
int a = 10;
int b = 20;
int c = a+b;
String str = name;
%>
<!-- HTML의 PCDATA로 출력 -->
<div><%= a %> + <%= b %> = <%= a+b %> </div>
<div><%= name %></div>
<!-- HTML의 속성값으로 출력 -->
<input type="text" value="<%= age %>">
<hr>
<%= txt %>
<input type="button" value="확인" id="btn1">
<script>
document.getElementById('btn1').onclick = function() {
//alert(<%= age %>);
alert('<%= name %>');
};
</script>
</body>
</html>- 실행 결과
- c. 선언부
<%! %>- jsp 주석
<%-- JSP 주석 --%>
728x90
'Server' 카테고리의 다른 글
| JSP STEP 4 - Response (1) | 2023.05.09 |
|---|---|
| JSP STEP 3 - Request_header (0) | 2023.05.09 |
| JSP STEP 2 - JSP 내장 객체 (0) | 2023.05.08 |
| SERVLET STEP 2 - Servlet 응용 (0) | 2023.05.08 |
| SERVLET STEP 1 - 기초 셋팅 및 설정 (0) | 2023.05.08 |
