✍
서블릿의 복잡함을 좀더 간단히 사용할 수 있게 하는 것이 JSP이다.
client요청시 -> server ->client로 응답이 오는데
java코드들은 server에서 처리가 된다. client는 못본다!
JSP
/web/basic.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ page import="java.util.*, java.io.*" %>
<%--
jsp작성내용은 servlet으로 변환되어 서비스된다.
jsp를 수정한 경우, tomcat을 재시동할 필요가 없다.
클라이언트 호출시 변경된 내용이 자동변환/컴파일 처리된다.
--%>
<%
// scriptlet
System.out.println("Hello JSP!");
System.out.println(12345);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP Basic</title>
<style>
table {
border : 1px solid #000;
border-collapse: collapse;
margin : 10px 0;
}
th, td {
border : 1px solid #000;
padding : 3px;
}
</style>
<script>
window.onload = () => {
let sum = 0;
for(let i = 1; i <= 100; i++)
sum += i;
document.querySelector("#client-sum").innerHTML = sum;
document.querySelector("#client-millis").innerHTML = Date.now();
}
</script>
</head>
<body>
<%
int sum = 0;
for(int i = 1; i <= 100; i++)
sum += i;
%>
<h1>JSP Basic</h1>
<%-- jsp 주석 : servlet변환시 처리되지 않는다. --%>
<!-- html 주석 : client까지 전달된다. -->
<h2>1부터 100까지의 합은?</h2>
<ul>
<li>Server : <span class="sum"><%= sum %></span></li>
<li>Client : <span class="sum" id="client-sum"></span></li>
</ul>
<h2>Server | Client 시각출력</h2>
<ul>
<%-- <li>Server : <span class="millis"><%= System.currentTimeMillis() %></span></li> --%>
<li>Server : <span class="millis"><% out.print(System.currentTimeMillis()); %></span></li>
<li>Client : <span class="millis" id="client-millis"></span></li>
</ul>
<h2>분기</h2>
<%
String lang = request.getParameter("lang");
System.out.println("lang = " + lang);
if("en".equals(lang)){
%>
<p>Hello~</p>
<%
}
else if("ko".equals(lang)){
%>
<p>안녕하세요~</p>
<%
}
%>
<%
if(lang != null) {
switch(lang){
case "en":
%>
<p>Bye bye</p>
<%
break;
case "ko":
%>
<p>잘가요~</p>
<%
break;
}
}
%>
<h2>반복처리</h2>
<ul>
<%
List<String> names = Arrays.asList("홍길동", "신사임당", "이순신");
for(String name : names){
%>
<li><%= name %></li>
<%
}
%>
</ul>
<h2>@실습문제 - 주문</h2>
<!--
table
tbody
tr
th 주문번호
td ??
tr
th 상품명
td ??
tr
th 옵션1
td ??
tr
th 옵션2
td ??
-->
<%
int no = Integer.parseInt(request.getParameter("no"));
String prod = request.getParameter("prod");
String[] options = request.getParameterValues("option");
%>
<table>
<tbody>
<tr>
<th>주문번호</th>
<td><%= no %></td>
</tr>
<tr>
<th>상품명</th>
<td><%= prod %></td>
</tr>
<%
if(options != null){
for(int i = 0; i < options.length; i++){
%>
<tr>
<th>옵션<%= i + 1 %></th>
<td><%= options[i] %></td>
</tr>
<%
}
}
%>
</tbody>
</table>
</body>
</html>✍
밀리초 출력시 client와 server(java)의 시간차이를 생각하자
client는 JS, server는 java
✍
HTML 주석은 웹에도 표시가 된다. 보안상 주의하자.
✍
JSP 구성인자
지시어
page : <%@page %>
>% 마지막에 import문을 추가하거나 따로 작성이 가능하다
include : <%@include file="today.jsp" %> main제외한 나머지의 영역을 따로 jsp파일로 만들어
관리하고 inclide 지시어로 링크하여 통합한다.
스크립팅원소
출력식, 표헌식: <%= 자바코드 %> html 중간 자바코드 출력 가능
스크립틀릿 : <% 자바코드 %>
testPersonResult.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.Arrays" %>
<%
// jsp scriptlet - java영역
// request, response객체에 선언없이 접근 가능
String name = request.getParameter("name");
String color = request.getParameter("color");
String animal = request.getParameter("animal");
String[] foods = request.getParameterValues("food");
System.out.println("name = " + name);
System.out.println("color = " + color);
System.out.println("animal = " + animal);
System.out.println("food = " + (foods != null ? Arrays.toString(foods) : null));
String recommendation = (String) request.getAttribute("recommendation");
System.out.println("recommendation = " + recommendation);
%>
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>개인취향검사결과</title>
</head>
<body>
<h1>개인취향검사결과 <%= request.getMethod() %></h1>
<p>이름 : <%= name %></p> <%-- 출력식 --%>
<p>선호색상 : <%= color %></p>
<p>선호동물 : <%= animal %></p>
<p>선호중국음식 : <%= foods != null ? Arrays.toString(foods) : "없음" %></p>
<hr />
<h2><span><%= name %></span>님, 오늘은 <mark><%= recommendation %></mark> 어떠세요?</h2>
</body>
</html> TestPersonServlet3.java
✍
jsp가 reuqest로 접근 못하면?? 직접 servlet안에 setAttribute속성으로 전달한다.
main1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/jsp/header.jsp" %>
<h2>main1</h2>
<p><%= name %></p>
<p>Lorem ipsum do dolorum? Eligend</p>
<script>
console.log(num);
</script>
<%@ include file="/jsp/footer.jsp" %>header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name = "홍길동";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지재사용</title>
<script src="/web/js/jquery-3.6.0.js"></script>
<script>
const num = 123;
</script>
</head>
<body>
<header>
<h1>Hello Web</h1>
<nav>
<ul>
<li><a href="/web/jsp/main1.jsp">main1</a></li>
<li><a href="/web/jsp/main2.jsp">main2</a></li>
<li><a href="https://naver.com">네이버</a></li>
</ul>
</nav>
</header>
<main>footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
</main>
<footer>
<p>KH정보교육원</p>
</footer>
<script>
// jquery window.onload함수
$(() => {
console.log(456);
});
</script>
</body>
</html> ✍
include 지시어로 공통된 영역을 고정시키고 변경된 부분만 추가한다.
.png)