JSP 스크립트 2

스크립트릿과 표현식에 이해

<%@ 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>&nbsp;</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"/>