스크립트릿과 표현식에 이해
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:include page="/layout/header.jsp"/>
<style>
main {
display: flex;
padding: 20px;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
main pre {
width: 100%;
border: 1px solid black;
padding: 20px;
}
</style>
<main>
<pre>
<% %> <-- 스크립트 릿(scriptlet, HTML 랜더링 후 태그는 보이지 않습니다.)
<%= "" %> <-- 표현식(expression, HTML 랜더링 후 태그는 보이지 않습니다.)
<%-- 여기는 확인 할 수 없어요!!! --%> <-- jsp 주석 (HTML 랜더링 후 태그는 보이지 않습니다.)
<!-- 여기는 HTML 주석 입니다. 소스보기로 확인 가능 합니다. -->
-------------------------------------------------------------
스크립트 릿은 HTML과 Java 코드를 혼합하여 사용할 수 있습니다.
<% new java.util.Date(); %><-- 부분은 출력은 안됨.
화면에 데이터를 출력 하려면 표현식을 사용해야 한다.
<%= new java.util.Date() %>
--------------------------------------------------------------
사용방법
스크립트 릿 : <% %> JSP 페이지에서 자바코드를 실행 할 수 있습니다.
표현식 : <%= "" %> JSP 페이지에서 Java 코드의 결과 값을 출력할 수 있습니다.
자바 코드 위치
스크립트 릿 : JSP 페이지 어디든지 위치할 수 있습니다.
표현식 : HTML 태그 내부에서만 사용할 수 있습니다.
출력 결과
스크립트릿 : 출력 결과를 지정하지 않으면 아무런 출력이 되지 않습니다.
표현식 : 자바 결과 값을 출력합니다.
</pre>
</main>
<jsp:include page="/layout/footer.jsp"/>선언문과 표현식
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.util.TimeZone"%>
<%@page import="java.util.Date"%>
<jsp:include page="/layout/header.jsp" />
<style>
main {
display: flex;
padding: 20px;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
main pre {
width: 100%;
border: 1px solid black;
padding: 20px;
}
</style>
<main>
<pre>
선언문(declaration)
<%! %><-- 태그로 표현 합니다.
JSP 페이지에서 전역변수, 메서드, 클래스등을 선언할 수 있습니다.
스크립트릿과 달리, JSP 페이지에서 직접 호출 할 수 없습니다.
------------------------------------------------------
선언문과 표현식 연습
현재 시간은 한국 표기법으로 <%=getKoreanTime() %>
</pre>
</main>
<%!
public String getKoreanTime() {
// 서버의 시간대를 한국 시단대로 변경
TimeZone.setDefault( TimeZone.getTimeZone("Asia/Seoul"));
// 현재 시간을 가져와서 문자열로 변환
Date now = new Date();
System.out.println(System.currentTimeMillis());
String timeStr = String.format("%tY년 %tm월 %td일 %tT",now, now, now, now);
return timeStr;
}
%>
<jsp:include page="/layout/footer.jsp" />스크립트릿과 표현식 사용 - 구구단 만들기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:include page="/layout/header.jsp" />
<style>
main {
display: flex;
padding: 20px;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
main pre {
width: 100%;
border: 1px solid black;
padding: 20px;
}
table {
border-collapse: collapse;
width: 400px;
font-size: 14px;
margin: 20px;
}
td {
background-color: #f2f2f2;
border: 1px solid #ccc;
text-align: center;
}
</style>
<main>
<h1>구구단 예제</h1>
<table>
<% for(int i = 2; i < 10; i++) { %>
<tr>
<td><%=i %>단 시작</td>
</tr>
<% for(int j = 1; j <= 9; j++ ) { %>
<tr>
<td><%=i %> X <%=j %> = <%= i * j %></td>
</tr>
<% } %>
<tr>
<td> </td>
</tr>
<%} %>
</table>
<br>
<pre>
스크립트릿과 표현식을 잘 구분해 봅시다.
</pre>
</main>
<jsp:include page="/layout/footer.jsp" />학생 성적표 만들어 보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:include page="/layout/header.jsp" />
<style>
main {
display: flex;
padding: 20px;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
main pre {
width: 100%;
border: 1px solid black;
padding: 20px;
}
table {
border-collapse: collapse;
margin: 5px 10px;
font-size: 14px;
width: 400px;
}
td,th {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
</style>
<main>
<h1>학생 성적표</h1>
<table>
<tr>
<th>이름</th>
<th>국어</th>
<th>영어</th>
<th>수학</th>
<th>총점</th>
<th>평균</th>
</tr>
<%
// 학생 정보를 2중배열로 저의
String[][] students = {
{"홍길동", "90", "80", "85"},
{"김철수", "85", "90", "99"},
{"박영희", "75", "99", "80"},
};
for(int i = 0; i < students.length; i++) {
String name = students[i][0];
int kor = Integer.parseInt(students[i][1]);
int eng = Integer.parseInt(students[i][2]);
int math = Integer.parseInt(students[i][3]);
int total = kor + eng + math;
double avg = total / 3.0;
%>
<tr>
<td><%=name %></td>
<td><%=kor %></td>
<td><%=eng %></td>
<td><%=math %></td>
<td><%=total %></td>
<td><%=String.format("%.1f", avg) %></td>
</tr>
<%} %>
</table>
</main>
<jsp:include page="/layout/footer.jsp" />덧셈 게임 만들어 보기
tag5.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:include page="/layout/header.jsp"/>
<style>
main {
height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 20px;
}
h1 {
margin-top: 30px;
margin-bottom: 10px;
font-size: 28px;
font-weight: bold;
text-align: center;
}
</style>
<main>
<h1>덧셈 게임</h1>
<%
int num1 = (int)(Math.random() * 10) + 1;
int num2 = (int)(Math.random() * 10) + 1;
int answer = num1 + num2;
%>
<p><%=num1 %> + <%=num2 %> = ? </p>
<form action="/demo3/result.jsp" method="post">
<input type="hidden" name="answer" value="<%=answer %>">
<input type="number" name="guess" required="required">
<input type="submit" value="정답제출">
</form>
</main>
<jsp:include page="/layout/footer.jsp"/>
result.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:include page="/layout/header.jsp"/>
<style>
main {
height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 20px;
}
h1 {
margin-top: 30px;
margin-bottom: 10px;
font-size: 28px;
font-weight: bold;
text-align: center;
}
a {
text-decoration: none;
color: black;
}
</style>
<main>
<h1>덧셈 게임</h1>
<%
if(request.getParameter("answer") != null) {
int answer = Integer.parseInt(request.getParameter("answer"));
int guess = Integer.parseInt(request.getParameter("guess"));
if(answer == guess) {
out.println("<p>축하합니다! 정답입니다</p>");
} else {
out.println("<p>아쉽지만 틀렸습니다. 다시 도전해 보세요</p>");
}
}
%>
<br>
<div>
<a href="/demo3/tag5.jsp">문제 더 풀어보기</a>
</div>
</main>
<jsp:include page="/layout/footer.jsp"/>
'JSP' 카테고리의 다른 글
| JSP 스크립트 (0) | 2023.04.06 |
|---|---|
| Servelet with Form 데이터 처리 (0) | 2023.03.27 |
| Servlet Life-Cycle (0) | 2023.03.27 |
| Servlet mapping (0) | 2023.03.27 |
| JSP 와 Servlet 개념 (0) | 2023.03.27 |
