스프링

[스프링] 4장 선언문, 표현문

반응형

 

선언문 태그 예시

 

 

 

  • 전역 변수
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Scripting Tag</title>
</head>
<body>
	<%!
		// 선언문 태그를 작성. 정수형 변수 data에 50을 할당(대입)
		// 전역 변수. 위/아래에서 사용 가능
		int data = 50;
	%>
	
	<%	// 스크립틀릿 태그
		out.print("<p>" + data + "</p>");
	%>
</body>
</html>

 

결과 화면1

 

 

 

  • 전역 메소드
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Scripting Tag</title>
</head>
<body>
	<%!
		// 선언문 태그를 작성.
		//int : 리턴 타입(정수형), a / b : 정수형 매개변수
		//전역 메소드
		int sum(int a, int b) {
			return a + b;
		}
	%>
	
	<%	// 스크립틀릿 태그
		//sum이라는 전역메소드를 호출(두 개의 파라미터 전달)
	    //out : JSP에서 제공해주는 기본 객체
		out.print("<p>2 + 3 = " + sum(2,3) + "</p>");
	%>
</body>
</html>

 

결과 화면2

 

 

 

  • 대문자 -> 소문자 변환
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Scripting Tag</title>
</head>
<body>
	<%!
		// 선언문 태그를 작성.
		//전역 메소드(makeItLower)->소문자처리
		String makeItLower(String eng){
			return eng.toLowerCase();
		}
	%>
	
	<%	// 스크립틀릿 태그
		//makeItLower이라는 전역메소드를 호출(한 개의 파라미터를 전달)
	    
	    //out.print() => result : have a good time!
		out.print("param : HAVE A GOOD TIME!<br>");
		out.print("result : " + makeItLower("HAVE A GOOD TIME!"));
	%>
    
<%-- 	<p>result : <%=makeItLower("HAVE A GOOD TIME!")%></p> --%>
</body>
</html>

 

결과 화면3

 

 

 

표현문 태그 예시

 

 

 

  • 현재 시간 출력
<!-- 페이지 디렉티브 -->
<%@ page import="java.util.Date"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Scripting Tag</title>
</head>
<body>
	<p>
		Today's date : 
		<%
			out.print(new Date() + "<br />");
		%>
		
		<!-- 표현문 : 끝에 세미콜론을 사용하지 않음-->
		Today's date : <%=new Date()%><br />
	</p>
</body>
</html>

 

결과 화면4

 

 

+ <%@ %> 설명

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!-- 
	위의 문장을 페이지 디렉티브로 부름
	골뱅이(디렉티브) page 
	contentType : 컨텐츠 유형 => html
	charset : 문자열 세트 => UTF-8로 설정
-->

 

 

 

스크립트 태그를 사용한 쇼핑몰 메인 화면 만들기

 

 

5초마다 페이지가 갱신되고 시간이 바뀌는 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.util.Date"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Welcome</title>
</head>
<body>
	<nav class="navbar navbar-expand navbar-dart bg-dark">
		<div class="container">
			<div class="navbar-header">
				<a class="navbar-brand" href="welcome.jsp">Home</a>
				<%=tagline%>
			</div>
		</div>
	</nav>

<%!
	String greeting = "웹 쇼핑몰에 오신 것을 환영합니다";
	String tagline = "Welcome to Web Market!";
%>
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3"><%=greeting%></h1>
		</div>
	</div>
	
	<div class="container">
		<!-- class="text-center" : style="text-align: center; -->
		<div class="text-center">
			<h3><%=tagline%></h3>
			<%
				// 5초마다 페이지를 갱신(새로고침)
				response.setIntHeader("Refresh", 5); // 5초마다 새로고침이 됨. 기존에 있는 기능임
                
				Date day = new Date();
				// 지역변수 선언
				String am_pm;
				int hour = day.getHours();
				int minute = day.getMinutes();
				int second = day.getSeconds();
				
				if(hour/12 == 0) { // 0~11 => 0. 정수/정수 => 정수
					am_pm = "AM";
				} else { //12~24 => 1 또는 2가 됨
					am_pm = "PM";
					// 13~23시이면 1~11시로 표현
					hour = hour - 12;
				}
				String CT = hour + ":" + minute + ":" + second + " " + am_pm;
				out.print("<p>현재 접속 시각 : " + CT + "</p>");
			%>
		</div>
	</div>
	
	<footer class="container">
		<p>&copy;WebMarket</p>
	</footer>

</body>
</html>

 

결과 화면5

 

 

 

  • 스크립트를 이용한 페이지 새로고침

 

+ slice 설명

더보기

.slice(-2)

: 뒤에서 앞까지 총 둘째자리를 잘라 가져옴

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.util.Date"%>
<!-- 
	위의 문장을 페이지 디렉티브로 부름
	골뱅이(디렉티브) page 
	contentType : 컨텐츠 유형 => html
	charset : 문자열 세트 => UTF-8로 설정
-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Welcome</title>
</head>
<body>
	<nav class="navbar navbar-expand navbar-dart bg-dark">
		<div class="container">
			<div class="navbar-header">
				<!-- 요청 URL : /welcome.jsp -->
				<a class="navbar-brand" href="welcome.jsp">Home</a>
				<%=tagline%> <!-- 전역 변수이기에 쓸 수 있음 -->
			</div>
		</div>
	</nav>

<%! //선언문(전역변수) : 자바 코드 사용 가능
	String greeting = "웹 쇼핑몰에 오신 것을 환영합니다";
	String tagline = "Welcome to Web Market!";
%>
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3"><%=greeting%></h1>
		</div>
	</div>
	
	<div class="container">
		<!-- class="text-center" : style="text-align: center; -->
		<div class="text-center">
			<!-- 표현문 : 변수에 할당된 값이 출력됨-->
			<h3><%=tagline%></h3>
			<%
				// 5초마다 페이지를 갱신(새로고침)
// 				response.setIntHeader("Refresh", 5); // 5초마다 새로고침이 됨. 기존에 있는 기능임
				
				Date day = new Date();
				// 지역변수 선언
				String am_pm;
				int hour = day.getHours();
				int minute = day.getMinutes();
				int second = day.getSeconds();
				
				if(hour/12 == 0) { // 0~11 => 0. 정수/정수 => 정수
					am_pm = "AM";
				} else { //12~24 => 1 또는 2가 됨
					am_pm = "PM";
					// 13~23시이면 1~11시로 표현
					hour = hour - 12;
				}
				String CT = hour + ":" + minute + ":" + second + " " + am_pm;
				out.print("<p>현재 접속 시각 : " + CT + "</p>");
			%>
		</div>
	</div>
	
	<footer class="container">
		<p>&copy;WebMarket</p>
	</footer>
	
<script type="text/javascript">
// 현재시간 처리
function fnCt() {
	console.log("개똥이");
	
	// document : body태그 내부
	// <h3>태그 select => object
	let h3 = document.getElementsByTagName("h3")[0];
	
	// h3 : <h3>Welcome to Web Market!</h3>
	let tagline = h3.innerHTML; 
	console.log("tagline : " + tagline);
	
	
	let today = new Date();
	console.log("today : " + today);
	// 연도
	let year = today.getFullYear();
	let month = ('0' + (today.getMonth()+1)).slice(-2); // 01, 02, 03
	let day = ('0' + today.getDate()).slice(-2); // 01, 02, 03 
	
	let dateString = year + "-" + month + "-" + day;
	console.log("dateString : " + dateString);
	
	// 시간
	let hours = ('0' + today.getHours()).slice(-2);
	let minutes = ('0' + today.getMinutes()).slice(-2); // 분
	let seconds = ('0' + today.getSeconds()).slice(-2); // 초
	
	let timeString = hours + ":" + minutes + ":" + seconds;
	console.log("timeString : " + timeString);
	
	//<div class="text-center"></div> 요소 선택
	const divTcenter = document.querySelector(".text-center");
	divTcenter.innerHTML = "<h3>" + tagline + "</h3><p>현재 접속 시각 : " + dateString + " " + timeString + "</p>";
	
}	
	
//스크립트에서 제공되는 내장 함수로 파라미터 2개가 필수 / 1초마다 fnCt 함수 요청
setInterval(fnCt, 1000);
</script>

</body>
</html>

 

결과 화면6

 

 

 

  • 헤더와 푸터를 다른 파일로 나누기

menu.jsp(헤더 파일)

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<nav class="navbar navbar-expand navbar-dart bg-dark">
	<div class="container">
		<div class="navbar-header">
			<!-- 요청 URL : /welcome.jsp -->
			<a class="navbar-brand" href="welcome.jsp">Home</a>
		</div>
	</div>
</nav>

 

 

welcome.jsp (바디 파일)

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.util.Date"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Welcome</title>
</head>
<body>
	<!-- 머리글에 해당하는 menu.jsp 파일의 내용이 포함되도록 include 디렉티브 태그를 작성 -->
	<%@ include file="menu.jsp" %>
	
<%! 
	String greeting = "웹 쇼핑몰에 오신 것을 환영합니다";
	String tagline = "Welcome to Web Market!";
%>
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3"><%=greeting%></h1>
		</div>
	</div>
	
	<div class="container">
		<!-- class="text-center" : style="text-align: center; -->
		<div class="text-center">
			<h3><%=tagline%></h3>
			<%
				Date day = new Date();
                
				String am_pm;
				int hour = day.getHours();
				int minute = day.getMinutes();
				int second = day.getSeconds();
				
				if(hour/12 == 0) { // 0~11 => 0. 정수/정수 => 정수
					am_pm = "AM";
				} else { //12~24 => 1 또는 2가 됨
					am_pm = "PM";
					// 13~23시이면 1~11시로 표현
					hour = hour - 12;
				}
				String CT = hour + ":" + minute + ":" + second + " " + am_pm;
				out.print("<p>현재 접속 시각 : " + CT + "</p>");
			%>
		</div>
	</div>
	
	<%@ include file="footer.jsp" %>
	
<script type="text/javascript">
function fnCt() {
	console.log("개똥이");
	
	let h3 = document.getElementsByTagName("h3")[0];
	
	// h3 : <h3>Welcome to Web Market!</h3>
	let tagline = h3.innerHTML; 
	console.log("tagline : " + tagline);
	
	
	let today = new Date();
	console.log("today : " + today);
	// 연도
	let year = today.getFullYear();
	let month = ('0' + (today.getMonth()+1)).slice(-2); // 01, 02, 03
	let day = ('0' + today.getDate()).slice(-2); // 01, 02, 03 
	
	let dateString = year + "-" + month + "-" + day;
	console.log("dateString : " + dateString);
	
	// 시간
	let hours = ('0' + today.getHours()).slice(-2);
	let minutes = ('0' + today.getMinutes()).slice(-2); // 분
	let seconds = ('0' + today.getSeconds()).slice(-2); // 초
	
	let timeString = hours + ":" + minutes + ":" + seconds;
	console.log("timeString : " + timeString);
	
	//<div class="text-center"></div> 요소 선택
	const divTcenter = document.querySelector(".text-center");
	divTcenter.innerHTML = "<h3>" + tagline + "</h3><p>현재 접속 시각 : " + dateString + " " + timeString + "</p>";
	
}	
	
//스크립트에서 제공되는 내장 함수로 파라미터 2개가 필수 / 1초마다 fnCt 함수 요청
setInterval(fnCt, 1000);
</script>

</body>
</html>

 

 

footer.jsp (푸터 파일)

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<footer class="container">
	<p>&copy;WebMarket</p>
</footer>

 

결과 화면7

 

 

반응형

'스프링' 카테고리의 다른 글

[스프링] 6장 쇼핑몰 시스템  (0) 2024.03.29
[스프링] 5장 디렉티브  (0) 2024.03.28
[스프링] 4.5장 과제  (0) 2024.03.28
[스프링] 2장 프로젝트 생성 및 설정 방법  (0) 2024.03.25
[스프링] 1장 JSP의 개요  (0) 2024.03.25

티스토리툴바