스프링 (26)

반응형

 

디렉티브

 

 

  • 디렉티브 태그의 3 종류
디렉티브 명 설명
include 디렉티브 태그 JSP 페이지의 특정 영역에 다른 문서를 포함

예시) <%@ include file="menu.jsp" %>
page 디렉티브 태그 JSP 페이지에 대한 정보를 설정
ex) 언어 등등

예시) <%@ page import="java.util.Date"%>
taglib  디렉티브 태그 JSP 페이지에서 사용할 태그 라이브러리 설정

예시) <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 

 

 

page 디렉티브 태그의 속성

 

 

속성 설명 기본 값
language 프로그래밍 언어 설정 java
contentType 콘텐츠 유형 설정 text/html
pageEncoding 문자 인코딩 설정 UTF-8
import 사용할 자바 클래스 설정  
errorPage 오류 발생 시 보여줄 오류 페이지 설정  
isErrorPage 오류 페이지인지 여부 설정 True

 

 

 

  • contentType 타입 변환

1. application/msword 로 변환

 

파일을 word 문서로 다운 받을 수 있음

 

<%@ page language="java" contentType="application/msword; charset=UTF-8"%>
<%@ page import="java.util.Date"%>
<!DOCTYPE html>
<html>
<head>
<title>Directives Tag</title>
</head>
<body>
	Today is : <%=new Date() %>
</body>
</html>

 

결과 화면1 : 기존에 출력된 화면은 text/html로 했을때

 

 

2. text/xml 로 변환

 

xml 파일로 출력됨

 

<%@ page language="java" contentType="text/xml; charset=UTF-8"%>
<%@ page import="java.util.Date"%>
<!DOCTYPE html>
<html>
<head>
<title>Directives Tag</title>
</head>
<body>
   <h2>contentType 디렉티브 태그</h2>
   <h4>text/html : HTML 출력</h4>
   <h4>charset=utf-8 : 문자 인코딩</h4>
</body>
</html>

 

결과 화면2

 

 

 

  • errorPage 속성

: 오류 발생시 띄워줄 페이지 설정

 

<%@ page errorPage="MyErrorPage.jsp" %>

 

 

 

+ 용어 설명

프로세스 : 실행중인 프로그램. CPU를 점유하고 있는 상태

 

예외처리 : 
1. page 디렉티브의 errorPage속성을 활용
2. web.xml의 filter를 활용
3. try~catch~를 활용하는 방법
4. spring프레임워크의 어노테이션을 활용하는 방법

 

 

 

page_errorPage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page errorPage="page_errorPage_error.jsp" %>
<!DOCTYPE html>
<html>
<head>
<title>Directives Tag</title>
</head>
<body>
	<%	// 스크립틀릿
		// 지역변수 : 아래쪽에서만 변수 활용 가능 
		String str = null;
	
		// 오류 발생! (null은 toString()할 수 없음)
		out.print(str.toString());
	%>
	
	<!-- 표현문 -> 지역변수에 할당된 데이터를 화면에 출력 -->
	<%=str%>
</body>
</html>

 

 

page_errorPage_error.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>시스템 점검 안내</title>
</head>
<body>
<img src="/images/error.jpg" />
</body>
</html>

 

결과 화면3

 

 

 

  • isErrorPage 속성

: 오류 페이지인지 확인

 

<%@ page isErrorPage="true" %>
<!-- 기본이 false -->

 

 

- printStackTrace 사용

page_errorPage2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page errorPage="page_errorPage2_error.jsp" %>
<!DOCTYPE html>
<html>
<head>
<title>Directives Tag</title>
</head>
<body>
	<%	// 스크립틀릿
		int result = 3/0;
	%>
	
	<%=result%>
</body>
</html>

 

 

page_errorPage2_error.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page isErrorPage="true" %>
<%@page import="java.io.PrintWriter"%>
<!--
isErrorPage : 현재 JSP 페이지가 오류 페이지인지 여부를 설정 
 -->
<!DOCTYPE html>
<html>
<head>
<title>시스템 점검 안내</title>
</head>
<body>
<img src="/images/error.jpg" />
<%
	// exception : JSP 내장객체
	exception.printStackTrace(new PrintWriter(out));
%>
</body>
</html>

 

결과 화면4

 

 

 

- getMessage 사용

page_errorPage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page errorPage="page_errorPage_error.jsp" %>
<!DOCTYPE html>
<html>
<head>
<title>Directives Tag</title>
</head>
<body>
	<%	// 스크립틀릿
		// 지역변수 : 아래쪽에서만 변수 활용 가능 
		String str = null;
	
		// 오류 발생! (null은 toString()할 수 없음)
		out.print(str.toString());
	%>
	
	<!-- 표현문 -> 지역변수에 할당된 데이터를 화면에 출력 -->
	<%=str%>
</body>
</html>

 

 

page_errorPage_error.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page isErrorPage="true" %>
<!DOCTYPE html>
<html>
<head>
<title>시스템 점검 안내</title>
</head>
<body>
<img src="/images/error.jpg" />

<%=exception.getMessage()%>
</body>
</html>

 

결과 화면5

 

 

 

잘 사용하지 않는 page 디렉티브

 

1. session 

: HTTP 세션 사용 여부를 설정

자동으로 사용하는 경우 true로 설정

 

<%@ page session="true" %>

 

 

2. buffer

: 출력 버퍼 크기 설정

none과 버퍼 크기로 설정

 

<%@ page buffer="none" %>

<%@ page buffer="32KB" %>

 

 

3. autoFlush

: 출력 버퍼 자동 비우기

 

<%@ page autoFlush="true" %>

 

 

4. isThreadSafe

: 멀티스레드 처리

 

<%@ page isThreadSafe="true" %>

 

 

5. info

: jsp 페이지 설명을 위한 설정

 

<%@ page info="Home Page JSP" %>

 

 

6. isELIgnored

: 표현 언어를 처리하지 않음

 

<%@ page isELIgnored="true" %>

 

 

7. isScriptingEnabled

: 스크립트 태그를 사용하지 않음

 

<%@ page isScriptingEnabled="false" %>

 

 

 

include 디렉티브 태그

 

: 외부 파일의 내용을 포함하는 태그

 

<%@ include file="파일명" %>

 

 

include01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.net.URLEncoder"%>
<!DOCTYPE html>
<html>
<head>
<title>Directives Tag</title>
</head>
<body>
<%
	// 지역변수
	String memId = "개똥이";
	// 상단의 UTF-8로 인한 인코딩 
	out.print("<h5>" + memId + "</h5>");

	// 전송되는 데이터의 인코딩
	memId = URLEncoder.encode(memId);
%>
<h4>----현재 페이지 영역----</h4>
<h5><%=memId%></h5>

</body>
</html>

 

결과 화면6

 

 

 

  • header 파일 추가

include01_header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%! // 선언물
	// 전역 변수
	int pageCount = 0;

	// 전역 메소드, 리턴 타입 : void
	void addCount(){
		// 1 증가
		pageCount++;
	}
%>

<%
	// 스크립틀릿
	// 전역 메소드를 호출 => 방문수 1 증가
	addCount();
%>

<p>이 사이트 방문은 <%=pageCount%>번째 입니다.</p>

 

결과 화면7 : 새로고침 시 숫자가 1씩 증가함

 

 

include01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.net.URLEncoder"%>
<!DOCTYPE html>
<html>
<head>
<title>Directives Tag</title>
</head>
<body>
<%
	// 지역변수
	String memId = "개똥이";
	// 상단의 UTF-8로 인한 인코딩 
	out.print("<h5>" + memId + "</h5>");

	// 전송되는 데이터의 인코딩
	memId = URLEncoder.encode(memId);
%>

<%@ include file="include01_header.jsp" %>

<h4>----현재 페이지 영역----</h4>
<h5><%=memId%></h5>

</body>
</html>

 

결과 화면8 : 결과 화면7의 다음 숫자가 출력되는 것이 아닌 처음 1부터 하여 새로고침 시 증가함

 

 

 

  • footer 파일 추가

 

include01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.net.URLEncoder"%>
<!DOCTYPE html>
<html>
<head>
<title>Directives Tag</title>
</head>
<body>
<%
	// 지역변수
	String memId = "개똥이";
	// 상단의 UTF-8로 인한 인코딩 
	out.print("<h5>" + memId + "</h5>");

	// 전송되는 데이터의 인코딩
	memId = URLEncoder.encode(memId);
%>

<%@ include file="include01_header.jsp" %>

<h4>----현재 페이지 영역----</h4>
<h5><%=memId%></h5>


<!-- 
	1. include 디렉티브 : 파라미터 전달(x), 정적
	include file="include01_footer.jsp?memId="+memId (x)
	
	=> jsp:include 를 사용함 (jsp 액션 태그)
-->
<!-- 2. jsp 액션 태그 -->
<jsp:include page="include01_footer.jsp">
	<jsp:param value="<%=memId%>" name="memId"/>
</jsp:include>

</body>
</html>

 

 

include01_footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.net.URLDecoder"%>
<!-- 
/ch03/include01_footer.jsp?memId=%EA%B0%9C%EB%98%A5%EC%9D%B4
요청 파라미터(memId=%EA%B0%9C%EB%98%A5%EC%9D%B4)는
	request객체에 들어있음
 -->
<%
String memId 
	= request.getParameter("memId"); // %EA%B0%9C%EB%98%A5%EC%9D%B4
memId = URLDecoder.decode(memId); // 개똥이
%>

Copyright <%=memId%>

 

결과 화면9

 

 

 

include02.jsp

<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Directives Tag</title>
</head>
<body>
<%
	String memId = "이수빈";
	memId = URLEncoder.encode(memId);
%>
	<!-- header : 일시가 바뀜 -->
	<%@ include file="include02_header.jsp" %>
	
	<p>방문해 주셔서 감사합니다.</p>
	
	<!-- footer : jsp액션태그를 통해 내 이름을 파라미터로 전달 -->
	<jsp:include page="include02_footer.jsp">
		<jsp:param value="<%=memId%>" name="memId"/>
	</jsp:include>
</body>
</html>

 

 

include02_header.jsp

<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<div id="divTm">2024-03-28 11:43:12 오전</div>


<script>
// document.ElementById('divTm')
function tim() {
	let date = new Date();
	
	let year = date.getFullYear();
	let month = ('0' + (date.getMonth()+1)).slice(-2);
	let day = ('0' + date.getDate()).slice(-2);
	
	let hou = ('0' + date.getHours()).slice(-2);
	let min = ('0' + date.getMinutes()).slice(-2);
	let sec = ('0' + date.getSeconds()).slice(-2);

	let amPm;
	if(hou/12 == 0) {
		amPm = "오전";
	} else {
		amPm = "오후";
		hou = ('0' + (hou - 12)).slice(-2);
	}
	console.log(year+"-"+month+"-"+day);
	console.log(hou+":"+min+":"+sec+" "+amPm);
	
	let divTm = document.getElementById('divTm');
	divTm.innerHTML = year+"-"+month+"-"+day+" "+hou+":"+min+":"+sec+" "+amPm;
}

setInterval(tim, 1000);
</script>

 

 

include02_footer.jsp

<%@page import="java.net.URLDecoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String memId = request.getParameter("memId");
	memId = URLDecoder.decode(memId);
%>
Copyright <%=memId%>

 

결과 화면10

 

 

반응형

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

[스프링] 6.5장 과제  (0) 2024.04.01
[스프링] 6장 쇼핑몰 시스템  (0) 2024.03.29
[스프링] 4.5장 과제  (0) 2024.03.28
[스프링] 4장 선언문, 표현문  (0) 2024.03.27
[스프링] 2장 프로젝트 생성 및 설정 방법  (0) 2024.03.25
반응형

 

연습문제 01

 

스크립트 태그의 세 가지 종류에 대해 간단히 설명하시오.

 

더보기

1. 선언문

<%!  %>

자바 변수나 메소드 정의하는 데 사용

 

 

2. 스크립틀릿

<%  %>

자바 로직 코드를 작성하는 데 사용

 

 

3. 표현문

<%=  %>

변수, 계산식, 메소드 호출 결과를 문자열 형태로 출력하는 데 사용

 

 

 

연습문제 02

 

선언문 태그와 스크립플릿 태그의 차이점을 설명하시오.

 

더보기

- 선언문 태그

변수, 메소드 선언 가능

서블릿 프로그램으로 변환될 때 _jspService() 메소드 외부에 배치

 

- 스크립틀릿 태그

변수만 선언 가능

서블릿 프로그램으로 변환될 때 _jspService() 메소드 내부에 배치

 

 

 

연습문제 03

 

애플리케이션 실행 결과에는 보이지 않는 JSP 주석 표기법은 무엇인가?

 

더보기

<%-- 주석 --%>

 

 

 

연습문제 04

 

선언문 태그를 이용하여 다음 조건에 맞게 JSP 애플리케이션을 만들고 실행 결과를 확인하시오.

 

 

더보기

 

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Scripting Tag</title>
</head>
<body>
	<%! 
		String st = "Hello, Java Server Pages";
		
		public String getString(String st) {
			return st;
		}
		
	%>
		<p><%=getString(st)%></p>
</body>
</html>

 

Exercise.zip
0.00MB

 

 

 

연습문제 05

 

스크립틀릿 태그를 이용하여 다음 조건에 맞게 JSP 애플리케이션을 만들고 실행 결과를 확인하시오.

 

 

더보기

 

<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Scripting Tag</title>
</head>
<body>
	<%
		Date day = new Date();
		out.print("Today: " + day);
	%>
</body>
</html>

 

Exercise.zip
0.00MB

 

 

 

연습문제 06

 

표현문 태그를 이용하여 다음 조건에 맞게 JSP 애플리케이션을 만들고 실행 결과를 확인하시오.

 

 

더보기

 

<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Scripting Tag</title>
</head>
<body>
	<%
		Calendar cal = Calendar.getInstance();
	%>
	
	Current Time: <%=cal.getTime()%>
</body>
</html>

 

 

 

연습문제 07

 

다음 조건에 맞게 도서 웹 쇼핑몰을 위한 웹 애플리케이션을 만들고 실행 결과를 확인하시오.

 

 

더보기

 

<%@ page language="java" contentType="text/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></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>
			</div>
		</div>
	</nav>
	
	<%!
		String hea = "Book Market Mall";
		String con = "Welcome to Book Market";
	%>
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3"><%=hea%></h1>
		</div>
	</div>
	
	<div class="container">
		<div class="text-center">
			<h3><%=con%></h3>
		</div>
	</div>
</body>
</html>

 

 

반응형
반응형

 

선언문 태그 예시

 

 

 

  • 전역 변수
<%@ 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
1 ··· 5 6 7 8 9