ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 22-09-07_jsp(4)
      main 2022. 9. 7. 19:01

      내일은 response의 header를 더 가지고 놀거라고 하심

       

      calender를 이제 가지고 놀아보시재요...

       

      //

      필드에서는 get method handler를 잘 안쓰고 post처리한다고

       

      a tag를 쓰는데, 얘는 기본이 get이라서 얘만으로는 post처리가 안되서 추가적인 처리가 필요함

      //

       

      자 이런식으로 만들건데요 row/col갯수를 맞춰서 할거예요

       

      이걸 추가할거고요
      이런식으로 하고있고요....static 넣어준건 저렇게 해서 다 써먹을거란거
      이 숫자의 특징은 반복문이 한번 돌 때마다 숫자가 하나씩 커지네요

       

      <%@ page import ="java.util.Calendar" %>
<%@ page import ="static java.util.Calendar.*" %>

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>05/calendar.jsp</title>
</head>
<body>
<table>
	<%
		//Calendar.getInstance();
		int count =1;
		for(int row=1; row<=6; row++){
			out.println("<tr>");
			for(int col=SUNDAY; col<=SATURDAY; col++){
				out.println(String.format("<td>%d</td>", count++));
			}
			out.println("</tr>");
		}
	%>
</table>
</body>
</html>

      일단 이렇게 하면

       

      이렇게 나와요

       

       

      이걸 설정해줄거예요 매달의 시작,...
      9/1이 목요일이라서 4를 뺴주는데요ㅕ.. 뭔소리냐면

      9/1이 목요일, 숫자로는 5 요일임. 그래서 숫자 4를 빼면 첫날을 잡을 수 있음. 그렇다고 함

       

      그럼 이제 우리 달력의 시작점을 잡아야 함 위에서 보면 8/28일같은거

       

       

      <%
	Calendar calendar = getInstance();
	calendar.set(DAY_OF_MONTH,1);
	int dayOfWeek1st = calendar.get(DAY_OF_WEEK);	//목요일이면 5요일이니까 5를 가짐
	int offset = dayOfWeek1st -1;
	
//	calendar.add(DAY_OF_MONTH, 1);	//내일의 날짜를 찾겠다.. 하루 뒤의 날짜로 바뀌는거임
//	calendar.add(DAY_OF_MONTH, -1); //이렇게 하면 하루 전날로 바뀌는 거임
	calendar.add(DAY_OF_MONTH, -offset); //이렇게 하면 달력의 시작이 며칠이 될 지 나옴
%>

       

       

      Ctrl+shft+T 를 누르면 이런게 나온다

      formatter가서 보자

      https://docs.oracle.com/javase/8/docs/api/java/util/Formatter.html

       

      Formatter (Java Platform SE 8 )

      'e' '\u0065' Requires the output to be formatted using computerized scientific notation. The localization algorithm is applied. The formatting of the magnitude m depends upon its value. If m is NaN or infinite, the literal strings "NaN" or "Infinity", resp

      docs.oracle.com

      이릏게쓰는거래요

       

      언어에따라 다양하게 보여줘야되는데 저 글자들을 하드코딩해버리면 의미가 없어짐 다르게 할거임

       

       

      localizable이란게 보이네여

      한가지 형식으로 date 가져오는게 아니라 다양하게 가져온단거

       

      두가지 생성자의 형태 가짐
      리턴타입이 배열인데, ... 상수가 사용되는...

       

       

      <%@page import="java.text.DateFormatSymbols"%>
<%@ page import ="java.util.Calendar" %>
<%@ page import ="static java.util.Calendar.*" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   
<%
	Calendar calendar = getInstance();
	calendar.set(DAY_OF_MONTH,1);
	int dayOfWeek1st = calendar.get(DAY_OF_WEEK);	//목요일이면 5요일이니까 5를 가짐
	int offset = dayOfWeek1st -1;
	
//	calendar.add(DAY_OF_MONTH, 1);	//내일의 날짜를 찾겠다.. 하루 뒤의 날짜로 바뀌는거임
//	calendar.add(DAY_OF_MONTH, -1); //이렇게 하면 하루 전날로 바뀌는 거임
	calendar.add(DAY_OF_MONTH, -offset); //이렇게 하면 달력의 시작이 며칠이 될 지 나옴
	
	DateFormatSymbols dfs = new DateFormatSymbols(); 
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05/calendar.jsp</title>
</head>
<body>
<table>
<thead>
	<tr>
		<%
		String[] weekDays = dfs.getShortWeekdays();
		for(int col=SUNDAY; col<=SATURDAY; col++){
			out.println(String.format("<th>%s</th>", weekDays[col]));
		}
			%>
	</tr>
</thead>
	<%
		
		
		for(int row=1; row<=6; row++){
			out.println("<tr>");
			for(int col=SUNDAY; col<=SATURDAY; col++){
				out.println(String.format("<td>%te</td>", calendar));
				calendar.add(DAY_OF_MONTH, 1);
			}
			out.println("</tr>");
		}
	%>
</table>
</body>
</html>

      일단 이 상태에서

      이렇게 나옴
      이제 생성자중에 저 Locale이라는 놈을 보면 두가지 정보를 가짐,.. 지역이랑 뭐 뭔가 가진댔음..
      해당 국가와 언어의 정보도 가짐. canada가 french까지 두개거든
      그래서 canada, french 처리하면 이렇게 나옴
      이걸 이렇게 지워버리면 한글이 나오는데, server side에서 처리함. 그래서 영문판으로 받아서 쓰면 한글 아니고 영어나옴

       

       

      ===

       

      server side..

       

      서버의 언어가 뭐냐에 따라 무조건 그에 따라 서비스 하는게 아니라, 요청 헤더에 보게 되면, accept language에 따라서 서비스 되는거임

      근데 여기 보면 언어가 여러개가 있는데, 최우선에 되어있는거 위주로 처리됨. 지금은 맨앞이 kor 한글인거

       

       

       

      이렇게 locale을 설정해두면 이제 server side가 아니라 client side로 받ㄴ는거임

       

       

       

      locale 추가 가능...

       

      추가

      근데 이대로 돌리면 500에러 남. 구멍은 하난데 데이터가 두개...

       

      String title = String.format(locale, "%1$ty, %1$tB",  calendar);

       

      근데 이렇게 처리하면 가능함

       

       

      짠...

      근데 연도가 두개로 나오니이상하네요

       

      요렇게 하면 연도가 두자리가 아닌 네자리로 나온답니다?

       

      저 ?는 queryString을 주겠다는거...
      이런식으로...
      이르케이르케...
      이렇게 처리를 해서 자동으로 전 달, 다음 달...뽑아오게...
      그래서 << 버튼 누르면 주소에 2022, 7이 들어감 자동으로

       

       

      <%@page import="java.util.Locale"%>
<%@page import="java.text.DateFormatSymbols"%>
<%@ page import ="java.util.Calendar" %>
<%@ page import ="static java.util.Calendar.*" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   
<%
	Locale locale = request.getLocale(); //이제 locale 정보를 받아놓을거임...
	String yearParam = request.getParameter("year");
	String monthParam = request.getParameter("month");
	
	Calendar calendar = getInstance();
	//데이터 검증할것, 데이터가 있어야 하며, 데이터가 4자리 숫자여야 한다
	//("\\d{4}")) --> d는 문자 한개 + {4} 4번 반복 ==> 4자리 문자
	if(yearParam!=null && yearParam.matches("\\d{4}")
		&& monthParam!=null && monthParam.matches("^1[0,1]$|^[0-9]$")
			//^[0-9]$ 이건 한자리라서 1~10월만 볼 수 있고 11,12월을 못봄. 근데 이 둘의 공통은 문장의 시작이 1임
			//^1$[0,1] : 문장의시작(^)이 1로 시작하고 끝남($)의 조건, 두가지 조건을 합침 (|)	
		){
		calendar.set(YEAR, Integer.parseInt(yearParam));
		calendar.set(MONTH, Integer.parseInt(monthParam));
	}
	
	String title = String.format(locale, "%1$ty, %1$tB",  calendar);
	
	calendar.add(MONTH, -1);		//전 달로 가겠다
	int beforeYear = calendar.get(YEAR);	//연도를뽑겠다
	int beforeMonth = calendar.get(MONTH);	//달을 뽑겠다.
	
	calendar.add(MONTH, 2);			//다음 달로 가겠다
	int nextYear = calendar.get(YEAR);
	int nextMonth = calendar.get(MONTH);
	
	calendar.add(MONTH, -1);		//다시 이번 달로 오겠다.
	
	calendar.set(DAY_OF_MONTH,1);
	int dayOfWeek1st = calendar.get(DAY_OF_WEEK);	//목요일이면 5요일이니까 5를 가짐
	int offset = dayOfWeek1st -1;
	
//	calendar.add(DAY_OF_MONTH, 1);	//내일의 날짜를 찾겠다.. 하루 뒤의 날짜로 바뀌는거임
//	calendar.add(DAY_OF_MONTH, -1); //이렇게 하면 하루 전날로 바뀌는 거임
	calendar.add(DAY_OF_MONTH, -offset); //이렇게 하면 달력의 시작이 며칠이 될 지 나옴
	
	
	
	DateFormatSymbols dfs = new DateFormatSymbols(locale); 
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05/calendar.jsp</title>
</head>
<body>
<h4>
<a href="?year=<%=beforeYear %>&month=<%=beforeMonth %>">&lt;&lt;&lt;</a>
<%= title %>
<a href="?year=<%=nextYear %>&month=<%=nextMonth %>">&gt;&gt;&gt;</a>
</h4>
<table>
<thead>
	<tr>
		<%
		String[] weekDays = dfs.getShortWeekdays();
		for(int col=SUNDAY; col<=SATURDAY; col++){
			out.println(String.format("<th>%s</th>", weekDays[col]));
		}
			%>
	</tr>
</thead>
	<%
		
		
		for(int row=1; row<=6; row++){
			out.println("<tr>");
			for(int col=SUNDAY; col<=SATURDAY; col++){
				out.println(String.format("<td>%te</td>", calendar));
				calendar.add(DAY_OF_MONTH, 1);
			}
			out.println("</tr>");
		}
	%>
</table>
</body>
</html>

      이제 버튼누르면 좌우로 넘어가고요...

       

      이제 이 아래를 할건데요

      form에 방법이 안붙으면 get이고 body가 그럼 안붙음

       

      pattern속성, 입력방식을 제한하겠다.

       

       

      name 에 year....써준건 yaer 이름으로 parameter위에서 받아왔으니까. 아래에 보면 이씅ㅁ

       

      이거 바꾸면 a태그 두개와 input tag 바꿔줘야 함.
      month도 year랑 마찬가지

      <%@page import="java.util.Locale"%>
<%@page import="java.text.DateFormatSymbols"%>
<%@ page import ="java.util.Calendar" %>
<%@ page import ="static java.util.Calendar.*" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   
<%
	Locale locale = request.getLocale(); //이제 locale 정보를 받아놓을거임...
	String yearParam = request.getParameter("year");
	String monthParam = request.getParameter("month");
	
	Calendar calendar = getInstance();
	//데이터 검증할것, 데이터가 있어야 하며, 데이터가 4자리 숫자여야 한다
	//("\\d{4}")) --> d는 문자 한개 + {4} 4번 반복 ==> 4자리 문자
	if(yearParam!=null && yearParam.matches("\\d{4}")
		&& monthParam!=null && monthParam.matches("^1[0,1]$|^[0-9]$")
			//^[0-9]$ 이건 한자리라서 1~10월만 볼 수 있고 11,12월을 못봄. 근데 이 둘의 공통은 문장의 시작이 1임
			//^1$[0,1] : 문장의시작(^)이 1로 시작하고 끝남($)의 조건, 두가지 조건을 합침 (|)	
		){
		calendar.set(YEAR, Integer.parseInt(yearParam));
		calendar.set(MONTH, Integer.parseInt(monthParam));
	}
	
	String title = String.format(locale, "%1$ty, %1$tB",  calendar);
	
	calendar.add(MONTH, -1);		//전 달로 가겠다
	int beforeYear = calendar.get(YEAR);	//연도를뽑겠다
	int beforeMonth = calendar.get(MONTH);	//달을 뽑겠다.
	
	calendar.add(MONTH, 2);			//다음 달로 가겠다
	int nextYear = calendar.get(YEAR);
	int nextMonth = calendar.get(MONTH);
	
	calendar.add(MONTH, -1);		//다시 이번 달로 오겠다.
	
	calendar.set(DAY_OF_MONTH,1);
	int dayOfWeek1st = calendar.get(DAY_OF_WEEK);	//목요일이면 5요일이니까 5를 가짐
	int offset = dayOfWeek1st -1;
	
//	calendar.add(DAY_OF_MONTH, 1);	//내일의 날짜를 찾겠다.. 하루 뒤의 날짜로 바뀌는거임
//	calendar.add(DAY_OF_MONTH, -1); //이렇게 하면 하루 전날로 바뀌는 거임
	calendar.add(DAY_OF_MONTH, -offset); //이렇게 하면 달력의 시작이 며칠이 될 지 나옴
	
	
	
	DateFormatSymbols dfs = new DateFormatSymbols(locale); 
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05/calendar.jsp</title>
</head>
<body>
<h4>
<a href="?year=<%=beforeYear %>&month=<%=beforeMonth %>">&lt;&lt;&lt;</a>
<%= title %>
<a href="?year=<%=nextYear %>&month=<%=nextMonth %>">&gt;&gt;&gt;</a>
</h4>
<form>
	<input type="text" name="year" pattern="\d{4}" placeholder="2022">
	<select name="month">
		<%
			String[] months = dfs.getMonths();
			for(int idx=JANUARY; idx<=DECEMBER; idx++){
				out.println( String.format("<option value='%d'>%s</option>", idx, months[idx]));
				
			}
		%>
	</select>
</form>
<table>
<thead>
	<tr>
		<%
		String[] weekDays = dfs.getShortWeekdays();
		for(int col=SUNDAY; col<=SATURDAY; col++){
			out.println(String.format("<th>%s</th>", weekDays[col]));
		}
			%>
	</tr>
</thead>
	<%
		
		
		for(int row=1; row<=6; row++){
			out.println("<tr>");
			for(int col=SUNDAY; col<=SATURDAY; col++){
				out.println(String.format("<td>%te</td>", calendar));
				calendar.add(DAY_OF_MONTH, 1);
			}
			out.println("</tr>");
		}
	%>
</table>
</body>
</html>

      이렇게 하면

       

      이렇게 나오고요

       

      --

      이제 eventhandler를 넣을거에요

       

      일단 두놈을 처리해줄건데, 위에건 jquery 넣은거에요

       

      아래에 script 적어줄건데

      <script type="text/javascript">
	$(document.calForm).on("change",":input[name]",function(event){
//		evetn.target == this // evetn.target은 this와 같은 의미를 가짐
		this.form.submit();		//		이건 submit 이벤트 발생 안 함
				// this.form ,== document.calForm 이건 이거랑 같죠
		this.form.requestSubmit();	//이건 submit 이벤트 발생함
	})
	

</script>

      name이 변경되는 놈들을 감시하겠다 그런 함수임

       

       

       

      <%@page import="java.util.Locale"%>
<%@page import="java.text.DateFormatSymbols"%>
<%@ page import ="java.util.Calendar" %>
<%@ page import ="static java.util.Calendar.*" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   
<%
	Locale locale = request.getLocale(); //이제 locale 정보를 받아놓을거임...
	String yearParam = request.getParameter("year");
	String monthParam = request.getParameter("month");
	
	Calendar calendar = getInstance();
	//데이터 검증할것, 데이터가 있어야 하며, 데이터가 4자리 숫자여야 한다
	//("\\d{4}")) --> d는 문자 한개 + {4} 4번 반복 ==> 4자리 문자
	if(yearParam!=null && yearParam.matches("\\d{4}")
		&& monthParam!=null && monthParam.matches("^1[0,1]$|^[0-9]$")
			//^[0-9]$ 이건 한자리라서 1~10월만 볼 수 있고 11,12월을 못봄. 근데 이 둘의 공통은 문장의 시작이 1임
			//^1$[0,1] : 문장의시작(^)이 1로 시작하고 끝남($)의 조건, 두가지 조건을 합침 (|)	
		){
		calendar.set(YEAR, Integer.parseInt(yearParam));
		calendar.set(MONTH, Integer.parseInt(monthParam));
	}
	
	String title = String.format(locale, "%1$ty, %1$tB",  calendar);
	
	calendar.add(MONTH, -1);		//전 달로 가겠다
	int beforeYear = calendar.get(YEAR);	//연도를뽑겠다
	int beforeMonth = calendar.get(MONTH);	//달을 뽑겠다.
	
	calendar.add(MONTH, 2);			//다음 달로 가겠다
	int nextYear = calendar.get(YEAR);
	int nextMonth = calendar.get(MONTH);
	
	calendar.add(MONTH, -1);		//다시 이번 달로 오겠다.
	int year = calendar.get(YEAR);
	int month = calendar.get(MONTH);
	
	calendar.set(DAY_OF_MONTH,1);
	int dayOfWeek1st = calendar.get(DAY_OF_WEEK);	//목요일이면 5요일이니까 5를 가짐
	int offset = dayOfWeek1st -1;
	
//	calendar.add(DAY_OF_MONTH, 1);	//내일의 날짜를 찾겠다.. 하루 뒤의 날짜로 바뀌는거임
//	calendar.add(DAY_OF_MONTH, -1); //이렇게 하면 하루 전날로 바뀌는 거임
	calendar.add(DAY_OF_MONTH, -offset); //이렇게 하면 달력의 시작이 며칠이 될 지 나옴
	
	
	
	DateFormatSymbols dfs = new DateFormatSymbols(locale); 
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05/calendar.jsp</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-3.6.1.min.js"></script>
</head>
<body>
<h4>
<a href="?year=<%=beforeYear %>&month=<%=beforeMonth %>">&lt;&lt;&lt;</a>
<%= title %>
<a href="?year=<%=nextYear %>&month=<%=nextMonth %>">&gt;&gt;&gt;</a>
</h4>
<form name ="calForm">
	<input type="text" name="year" pattern="\d{4}" placeholder="2022" value="<%=year%>">
	<select name="month">
		<%
			String[] months = dfs.getMonths();
			for(int idx=JANUARY; idx<=DECEMBER; idx++){
				out.println( String.format("<option value='%d'>%s</option>", idx, months[idx]));
				
			}
		%>
	</select>
</form>
<table>
<thead>
	<tr>
		<%
		String[] weekDays = dfs.getShortWeekdays();
		for(int col=SUNDAY; col<=SATURDAY; col++){
			out.println(String.format("<th>%s</th>", weekDays[col]));
		}
			%>
	</tr>
</thead>
	<%
		
		
		for(int row=1; row<=6; row++){
			out.println("<tr>");
			for(int col=SUNDAY; col<=SATURDAY; col++){
				out.println(String.format("<td>%te</td>", calendar));
				calendar.add(DAY_OF_MONTH, 1);
			}
			out.println("</tr>");
		}
	%>
</table>
<script type="text/javascript">
	$("[name=year]").val("<%=year %>");
	$("[name=month]").val("<%=month %>");
	$(document.calForm).on("change",":input[name]",function(event){
//		evetn.target == this // evetn.target은 this와 같은 의미를 가짐
//		this.form.submit();		//		이건 submit 이벤트 발생 안 함
				// this.form ,== document.calForm 이건 이거랑 같죠
		this.form.requestSubmit();	//이건 submit 이벤트 발생함
	})
	

</script>
</body>
</html>

      일단 이렇게 했고요...

       

      연도랑 월을 바꾸면 url에 정보가 뜬다. 보호가 안됨.

       

       

       

      변경사항이 마쳤을때 cost를 최저로 낮출수 있을만큼 낮춰서, 수정이 발생하더라도 수정할 부분이 최소한으로 나오도록 코드를 짜야한다.

       

      현재는 요청이 세개가 발생하는데, 다 동일하게 하는건데 세개를 따로 짜놔서 세개를 고쳐야 하면 각각 다 고쳐야 함...

       

      만약에 1,2,3번에서 수정사항이 발생해도 한가지로 처리된다면?

       

       

      일단 url에서 data가 노출되지 않으려면 body를 만들어 줘야 하고..

       

      또 method를 만들어 줘야 함..

       

      그럼 1,2,3번 중에 method라는 설정을 추가할 수 있는걸? 3번뿐임.

       

      이렇게

      이렇게 처리하면 url에 노출도 안되고 body도 만들어질거임.

       

      그러면

       

      여기서 요청이 발생하면 안되고
      여기서만 발생해야 함

       

      a태그의 href는 #처리해서 작동 안하게 해 주고

      class 추가해주고 

       

      아래에 이거 추가해줌

      	$(".changeBtn").on("click",function(event){
		event.preventDefault();	//안전하게 한번 더 취소... 이제 a태그는 역할을 하지 않음
		calForm.submit();
		return false;	//event의 기본행위 취소
		
	})
	
	let calForm = $(document.calForm).on("change",":input[name]",function(event){
//		evetn.target == this // evetn.target은 this와 같은 의미를 가짐
//		this.form.submit();		//		이건 submit 이벤트 발생 안 함
				// this.form ,== document.calForm 이건 이거랑 같죠
		this.form.requestSubmit();	//이건 submit 이벤트 발생함
	})

      이릏게

      근데 이제 a태그를 봐도 전달인지 뭔지 없으니까 data- (데이터하이픈)속성을 써보자

      하이픈 뒤에 뭘 적으면 map key의 역할을 한다고

       

      이릏게.....

       

      이제 click event handler가보자...

      여기...
      이건 사족인데,혹시 저 뒤에 값을 쓰면 값을 변경하겠다는 의미

      하.. name year인 놈을 찾는거

       

       

      <%@page import="java.util.Locale"%>
<%@page import="java.text.DateFormatSymbols"%>
<%@ page import ="java.util.Calendar" %>
<%@ page import ="static java.util.Calendar.*" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   
<%
	Locale locale = request.getLocale(); //이제 locale 정보를 받아놓을거임...
	String yearParam = request.getParameter("year");
	String monthParam = request.getParameter("month");
	
	Calendar calendar = getInstance();
	//데이터 검증할것, 데이터가 있어야 하며, 데이터가 4자리 숫자여야 한다
	//("\\d{4}")) --> d는 문자 한개 + {4} 4번 반복 ==> 4자리 문자
	if(yearParam!=null && yearParam.matches("\\d{4}")
		&& monthParam!=null && monthParam.matches("^1[0,1]$|^[0-9]$")
			//^[0-9]$ 이건 한자리라서 1~10월만 볼 수 있고 11,12월을 못봄. 근데 이 둘의 공통은 문장의 시작이 1임
			//^1$[0,1] : 문장의시작(^)이 1로 시작하고 끝남($)의 조건, 두가지 조건을 합침 (|)	
		){
		calendar.set(YEAR, Integer.parseInt(yearParam));
		calendar.set(MONTH, Integer.parseInt(monthParam));
	}
	
	String title = String.format(locale, "%1$ty, %1$tB",  calendar);
	
	calendar.add(MONTH, -1);		//전 달로 가겠다
	int beforeYear = calendar.get(YEAR);	//연도를뽑겠다
	int beforeMonth = calendar.get(MONTH);	//달을 뽑겠다.
	
	calendar.add(MONTH, 2);			//다음 달로 가겠다
	int nextYear = calendar.get(YEAR);
	int nextMonth = calendar.get(MONTH);
	
	calendar.add(MONTH, -1);		//다시 이번 달로 오겠다.
	int year = calendar.get(YEAR);
	int month = calendar.get(MONTH);
	
	calendar.set(DAY_OF_MONTH,1);
	int dayOfWeek1st = calendar.get(DAY_OF_WEEK);	//목요일이면 5요일이니까 5를 가짐
	int offset = dayOfWeek1st -1;
	
//	calendar.add(DAY_OF_MONTH, 1);	//내일의 날짜를 찾겠다.. 하루 뒤의 날짜로 바뀌는거임
//	calendar.add(DAY_OF_MONTH, -1); //이렇게 하면 하루 전날로 바뀌는 거임
	calendar.add(DAY_OF_MONTH, -offset); //이렇게 하면 달력의 시작이 며칠이 될 지 나옴
	
	
	
	DateFormatSymbols dfs = new DateFormatSymbols(locale); 
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05/calendar.jsp</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-3.6.1.min.js"></script>
</head>
<body>
<h4>
<%-- ?year=<%=beforeYear %>&month=<%=beforeMonth %> --%>
<a href="#" class="changeBtn" data-year="<%=beforeYear %>" data-month="<%=beforeMonth %>">&lt;&lt;&lt;</a>
<%= title %>
<!--  ?year=<%=nextYear %>&month=<%=nextMonth %>-->
<a href="#" class="changeBtn" data-year="<%=nextYear %>" data-month="<%=nextMonth %>">&gt;&gt;&gt;</a>
</h4>
<form name ="calForm" method="post">
	<input type="text" name="year" pattern="\d{4}" placeholder="2022" value="<%=year%>">
	<select name="month">
		<%
			String[] months = dfs.getMonths();
			for(int idx=JANUARY; idx<=DECEMBER; idx++){
				out.println( String.format("<option value='%d'>%s</option>", idx, months[idx]));
				
			}
		%>
	</select>
</form>
<table>
<thead>
	<tr>
		<%
		String[] weekDays = dfs.getShortWeekdays();
		for(int col=SUNDAY; col<=SATURDAY; col++){
			out.println(String.format("<th>%s</th>", weekDays[col]));
		}
			%>
	</tr>
</thead>
	<%
		
		
		for(int row=1; row<=6; row++){
			out.println("<tr>");
			for(int col=SUNDAY; col<=SATURDAY; col++){
				out.println(String.format("<td>%te</td>", calendar));
				calendar.add(DAY_OF_MONTH, 1);
			}
			out.println("</tr>");
		}
	%>
</table>
<script type="text/javascript">
	let yearTag = $("[name=year]").val("<%=year %>");
	let monthTag = $("[name=month]").val("<%=month %>");
	
	$(".changeBtn").on("click",function(event){
		event.preventDefault();	//안전하게 한번 더 취소... 이제 a태그는 역할을 하지 않음
		
		//값을 세팅해 줘야 함... 연도와 월을 꺼내야 함....
		let year = $(this).data("year");
		let month = $(this).data("month");
		
		yearTag.val(year);
		monthTag.val(month);
		
		calForm.submit();
		return false;	//event의 기본행위 취소
		
	})
	
	let calForm = $(document.calForm).on("change",":input[name]",function(event){
//		evetn.target == this // evetn.target은 this와 같은 의미를 가짐
//		this.form.submit();		//		이건 submit 이벤트 발생 안 함
				// this.form ,== document.calForm 이건 이거랑 같죠
		this.form.requestSubmit();	//이건 submit 이벤트 발생함
	})
	

</script>
</body>
</html>

      하...

       

      이제 url에도 안뜨고 잘만돏니다..

       

      anchor tag를 가지고 interface를 만든다고하면 지금같은 구조가 필요해요? 라고?

       

       

      이제 뭐.. 누르면 한국어 영어 바뀌는걸 할건데

       

      저걸 languge tag 또는 locale code라고 함
      그래서 저런게있음

       

       

      <%@page import="java.util.Locale"%>
<%@page import="java.text.DateFormatSymbols"%>
<%@ page import ="java.util.Calendar" %>
<%@ page import ="static java.util.Calendar.*" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   
<%
	Locale locale = request.getLocale(); //이제 locale 정보를 받아놓을거임...
	String yearParam = request.getParameter("year");
	String monthParam = request.getParameter("month");
	
	Calendar calendar = getInstance();
	//데이터 검증할것, 데이터가 있어야 하며, 데이터가 4자리 숫자여야 한다
	//("\\d{4}")) --> d는 문자 한개 + {4} 4번 반복 ==> 4자리 문자
	if(yearParam!=null && yearParam.matches("\\d{4}")
		&& monthParam!=null && monthParam.matches("^1[0,1]$|^[0-9]$")
			//^[0-9]$ 이건 한자리라서 1~10월만 볼 수 있고 11,12월을 못봄. 근데 이 둘의 공통은 문장의 시작이 1임
			//^1$[0,1] : 문장의시작(^)이 1로 시작하고 끝남($)의 조건, 두가지 조건을 합침 (|)	
		){
		calendar.set(YEAR, Integer.parseInt(yearParam));
		calendar.set(MONTH, Integer.parseInt(monthParam));
	}
	
	String title = String.format(locale, "%1$ty, %1$tB",  calendar);
	
	calendar.add(MONTH, -1);		//전 달로 가겠다
	int beforeYear = calendar.get(YEAR);	//연도를뽑겠다
	int beforeMonth = calendar.get(MONTH);	//달을 뽑겠다.
	
	calendar.add(MONTH, 2);			//다음 달로 가겠다
	int nextYear = calendar.get(YEAR);
	int nextMonth = calendar.get(MONTH);
	
	calendar.add(MONTH, -1);		//다시 이번 달로 오겠다.
	int year = calendar.get(YEAR);
	int month = calendar.get(MONTH);
	
	calendar.set(DAY_OF_MONTH,1);
	int dayOfWeek1st = calendar.get(DAY_OF_WEEK);	//목요일이면 5요일이니까 5를 가짐
	int offset = dayOfWeek1st -1;
	
//	calendar.add(DAY_OF_MONTH, 1);	//내일의 날짜를 찾겠다.. 하루 뒤의 날짜로 바뀌는거임
//	calendar.add(DAY_OF_MONTH, -1); //이렇게 하면 하루 전날로 바뀌는 거임
	calendar.add(DAY_OF_MONTH, -offset); //이렇게 하면 달력의 시작이 며칠이 될 지 나옴
	
	
	
	DateFormatSymbols dfs = new DateFormatSymbols(locale); 
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05/calendar.jsp</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-3.6.1.min.js"></script>
</head>
<body>
<h4>
<%-- ?year=<%=beforeYear %>&month=<%=beforeMonth %> --%>
<a href="#" class="changeBtn" data-year="<%=beforeYear %>" data-month="<%=beforeMonth %>">&lt;&lt;&lt;</a>
<%= title %>
<!--  ?year=<%=nextYear %>&month=<%=nextMonth %>-->
<a href="#" class="changeBtn" data-year="<%=nextYear %>" data-month="<%=nextMonth %>">&gt;&gt;&gt;</a>
</h4>
<form name ="calForm" method="post">
	<input type="text" name="year" pattern="\d{4}" placeholder="2022" value="<%=year%>">
	<select name="month">
		<%
			String[] months = dfs.getMonths();
			for(int idx=JANUARY; idx<=DECEMBER; idx++){
				out.println( String.format("<option value='%d'>%s</option>", idx, months[idx]));
				
			}
		%>
	</select>
	<select name="language">
		<%
			Locale[] locales =Locale.getAvailableLocales();
			for(Locale tmp : locales){
				out.println(String.format("<option value ='%s'>%s</option>", tmp.toLanguageTag(), tmp.getDisplayLanguage(tmp))
						);
			}
		%>
		<option value="ko-KR">한국어</option>
		<option>영어</option>
	</select>
</form>
<table>
<thead>
	<tr>
		<%
		String[] weekDays = dfs.getShortWeekdays();
		for(int col=SUNDAY; col<=SATURDAY; col++){
			out.println(String.format("<th>%s</th>", weekDays[col]));
		}
			%>
	</tr>
</thead>
	<%
		
		
		for(int row=1; row<=6; row++){
			out.println("<tr>");
			for(int col=SUNDAY; col<=SATURDAY; col++){
				out.println(String.format("<td>%te</td>", calendar));
				calendar.add(DAY_OF_MONTH, 1);
			}
			out.println("</tr>");
		}
	%>
</table>
<script type="text/javascript">
	let yearTag = $("[name=year]").val("<%=year %>");
	let monthTag = $("[name=month]").val("<%=month %>");
	
	$(".changeBtn").on("click",function(event){
		event.preventDefault();	//안전하게 한번 더 취소... 이제 a태그는 역할을 하지 않음
		
		//값을 세팅해 줘야 함... 연도와 월을 꺼내야 함....
		let year = $(this).data("year");
		let month = $(this).data("month");
		
		yearTag.val(year);
		monthTag.val(month);
		
		calForm.submit();
		return false;	//event의 기본행위 취소
		
	})
	
	let calForm = $(document.calForm).on("change",":input[name]",function(event){
//		evetn.target == this // evetn.target은 this와 같은 의미를 가짐
//		this.form.submit();		//		이건 submit 이벤트 발생 안 함
				// this.form ,== document.calForm 이건 이거랑 같죠
		this.form.requestSubmit();	//이건 submit 이벤트 발생함
	})
	

</script>
</body>
</html>

      이제...

       

      언어옵션이 추가되었다...

       

      <select name="language">
		<%
			Locale[] locales =Locale.getAvailableLocales();
			for(Locale tmp : locales){
				String display = tmp.getDisplayLanguage(tmp);
				if(display.isEmpty()) continue;
				
				out.println(
						String.format("<option value ='%s'>%s</option>", tmp.toLanguageTag(), display)
						);
			}
		%>
		<option value="ko-KR">한국어</option>
		<option>영어</option>
	</select>

      뭔가 쓰잘데기없는 옵션이 있었어서 이렇게 없앳대요

       

      자 이제 요청 한번에 데이터 세개가 이렇게 예쁘게 날아갑니다

       

      언어를 추가해줍니다
      이런걸 하나하나 추가해줘야하니까 귀찮으니까 내일은 이런걸 생략?할 수 있는걸 해보겠다
      추가해줘여

       

      이제 언어 바꾸면 바꾸는 언어대로 바뀌어여

      자이제 한줄이 더 필요해여

      상태를 유지하기 위한...

       

      그래여 이거져
      자 이제 빨강이를 바꾸면 파랑이가 자동으로 바뀌게 되어여

       

       

      오늘 미션이 또있때요

       1) 아까 있었던 5칙연산과제

       2) 시간대라는 정보도 우리가 다룰 수 있져? 시간대를 변경할 수 있는 UI를 추가하고, 그에 따른 처리를 완성하기예요

       

      이걸 써보시라는 얘기에요

       

      <%@page import="java.util.Locale"%>
<%@page import="java.text.DateFormatSymbols"%>
<%@ page import ="java.util.Calendar" %>
<%@ page import ="static java.util.Calendar.*" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   
<%
	Locale locale = request.getLocale(); //이제 locale 정보를 받아놓을거임...
	String yearParam = request.getParameter("year");
	String monthParam = request.getParameter("month");
	String language = request.getParameter("language");
	
	Calendar calendar = getInstance();
	//데이터 검증할것, 데이터가 있어야 하며, 데이터가 4자리 숫자여야 한다
	//("\\d{4}")) --> d는 문자 한개 + {4} 4번 반복 ==> 4자리 문자
	if(yearParam!=null && yearParam.matches("\\d{4}")
		&& monthParam!=null && monthParam.matches("^1[0,1]$|^[0-9]$")
			//^[0-9]$ 이건 한자리라서 1~10월만 볼 수 있고 11,12월을 못봄. 근데 이 둘의 공통은 문장의 시작이 1임
			//^1$[0,1] : 문장의시작(^)이 1로 시작하고 끝남($)의 조건, 두가지 조건을 합침 (|)	
		){
		calendar.set(YEAR, Integer.parseInt(yearParam));
		calendar.set(MONTH, Integer.parseInt(monthParam));
	}
	if(language!=null && !language.isEmpty()){
		locale = Locale.forLanguageTag(language);
	}
	
//	String title = String.format(locale, "%1$ty, %1$tB",  calendar); //%1$ty... 여기서 y를 소문자로 적으면 연도가 두자리 
	String title = String.format(locale, "%1$tY, %1$tB",  calendar);	// y를 대문자로 적으면 연도가 4자리로 나옴
	
	calendar.add(MONTH, -1);		//전 달로 가겠다
	int beforeYear = calendar.get(YEAR);	//연도를뽑겠다
	int beforeMonth = calendar.get(MONTH);	//달을 뽑겠다.
	
	calendar.add(MONTH, 2);			//다음 달로 가겠다
	int nextYear = calendar.get(YEAR);
	int nextMonth = calendar.get(MONTH);
	
	calendar.add(MONTH, -1);		//다시 이번 달로 오겠다.
	int year = calendar.get(YEAR);
	int month = calendar.get(MONTH);
	
	calendar.set(DAY_OF_MONTH,1);
	int dayOfWeek1st = calendar.get(DAY_OF_WEEK);	//목요일이면 5요일이니까 5를 가짐
	int offset = dayOfWeek1st -1;
	
//	calendar.add(DAY_OF_MONTH, 1);	//내일의 날짜를 찾겠다.. 하루 뒤의 날짜로 바뀌는거임
//	calendar.add(DAY_OF_MONTH, -1); //이렇게 하면 하루 전날로 바뀌는 거임
	calendar.add(DAY_OF_MONTH, -offset); //이렇게 하면 달력의 시작이 며칠이 될 지 나옴
	
	
	
	DateFormatSymbols dfs = new DateFormatSymbols(locale); 
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05/calendar.jsp</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-3.6.1.min.js"></script>
</head>
<body>
<h4>
<%-- ?year=<%=beforeYear %>&month=<%=beforeMonth %> --%>
<a href="#" class="changeBtn" data-year="<%=beforeYear %>" data-month="<%=beforeMonth %>">&lt;&lt;&lt;</a>
<%= title %>
<!--  ?year=<%=nextYear %>&month=<%=nextMonth %>-->
<a href="#" class="changeBtn" data-year="<%=nextYear %>" data-month="<%=nextMonth %>">&gt;&gt;&gt;</a>
</h4>
<form name ="calForm" method="post">
	<input type="text" name="year" pattern="\d{4}" placeholder="2022" value="<%=year%>">
	<select name="month">
		<%
			String[] months = dfs.getMonths();
			for(int idx=JANUARY; idx<=DECEMBER; idx++){
				out.println( String.format("<option value='%d'>%s</option>", idx, months[idx]));
				
			}
		%>
	</select>
	<select name="language">
		<%
			Locale[] locales =Locale.getAvailableLocales();
			for(Locale tmp : locales){
				String display = tmp.getDisplayLanguage(tmp);
				if(display.isEmpty()) continue;
				
				out.println(
						String.format("<option value ='%s'>%s</option>", tmp.toLanguageTag(), display)
						);
			}
		%>
		<!-- <option value="ko-KR">한국어</option>
		<option>영어</option> -->
	</select>
	<select name ="timeZoneId">
		<%
			//Timezone
		%>
		<option value="Asia/Seoul">아시아/서울</option>
	</select>
</form>
<table>
<thead>
	<tr>
		<%
		String[] weekDays = dfs.getShortWeekdays();
		for(int col=SUNDAY; col<=SATURDAY; col++){
			out.println(String.format("<th>%s</th>", weekDays[col]));
		}
			%>
	</tr>
</thead>
	<%
		
		
		for(int row=1; row<=6; row++){
			out.println("<tr>");
			for(int col=SUNDAY; col<=SATURDAY; col++){
				out.println(String.format("<td>%te</td>", calendar));
				calendar.add(DAY_OF_MONTH, 1);
			}
			out.println("</tr>");
		}
	%>
</table>
<script type="text/javascript">
	let yearTag = $("[name=year]").val("<%=year %>");
	let monthTag = $("[name=month]").val("<%=month %>");
	let languageTag = $("[name=language]").val("<%=language %>");
	
	$(".changeBtn").on("click",function(event){
		event.preventDefault();	//안전하게 한번 더 취소... 이제 a태그는 역할을 하지 않음
		
		//값을 세팅해 줘야 함... 연도와 월을 꺼내야 함....
		let year = $(this).data("year");
		let month = $(this).data("month");
		
		yearTag.val(year);
		monthTag.val(month);
		
		calForm.submit();
		return false;	//event의 기본행위 취소
		
	})
	
	let calForm = $(document.calForm).on("change",":input[name]",function(event){
//		evetn.target == this // evetn.target은 this와 같은 의미를 가짐
//		this.form.submit();		//		이건 submit 이벤트 발생 안 함
				// this.form ,== document.calForm 이건 이거랑 같죠
		this.form.requestSubmit();	//이건 submit 이벤트 발생함
	})
	

</script>
</body>
</html>

      일단 오늘의 최종코드,....

       

      <%@page import="java.util.Locale"%>
<%@page import="java.text.DateFormatSymbols"%>
<%@ page import="java.util.Calendar" %>
<%@ page import="static java.util.Calendar.*" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	Locale locale = request.getLocale();
	String yearParam = request.getParameter("year");
	String monthParam = request.getParameter("month");
	String language = request.getParameter("language");

	Calendar calendar = getInstance();
	if(yearParam!=null && yearParam.matches("\\d{4}")
			&& monthParam!=null && monthParam.matches("^1[0-1]$|^[0-9]$")){
		calendar.set(YEAR, Integer.parseInt(yearParam));
		calendar.set(MONTH, Integer.parseInt(monthParam));
	}
	if(language!=null && !language.isEmpty()){
		locale = Locale.forLanguageTag(language);
	}
	
	String title = String.format(locale, "%1$tY, %1$tB", calendar);
	
	calendar.add(MONTH, -1);
	int beforeYear = calendar.get(YEAR);
	int beforeMonth = calendar.get(MONTH);
	calendar.add(MONTH, 2);
	int nextYear = calendar.get(YEAR);
	int nextMonth = calendar.get(MONTH);
	
	calendar.add(MONTH, -1);
	int year = calendar.get(YEAR);
	int month = calendar.get(MONTH);
	
	calendar.set(DAY_OF_MONTH, 1);
	int dayOfWeek1st = calendar.get(DAY_OF_WEEK);
	int offset = dayOfWeek1st - 1;
	calendar.add(DAY_OF_MONTH, -offset);
	
	DateFormatSymbols dfs = new DateFormatSymbols(locale);
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05/calendar.jsp</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-3.6.1.min.js"></script>
</head>
<body>
<h4>
<a href="#" class="changeBtn" data-year="<%=beforeYear %>" data-month="<%=beforeMonth %>">&lt;&lt;&lt;</a>
<%=title %>
<a href="#" class="changeBtn" data-year="<%=nextYear %>" data-month="<%=nextMonth %>">&gt;&gt;&gt;</a>
</h4>
<form name="calForm" method="post">
	<input type="text" name="year" pattern="\d{4}" placeholder="2022" value="<%=year %>"/>
	<select name="month">
		<%
			String[] months = dfs.getMonths();
			for(int idx=JANUARY; idx<=DECEMBER; idx++){
				out.println(
					String.format("<option value='%d'>%s</option>", idx, months[idx])
				);
			}
		%>
	</select>
	<select name="language">
		<%
			Locale[] locales = Locale.getAvailableLocales();
			for(Locale tmp : locales){
				String display = tmp.getDisplayLanguage(tmp);
				
				if(display.isEmpty()) continue;
				
				out.println(
					String.format("<option value='%s'>%s</option>"
							, tmp.toLanguageTag(), display)
				);
			}
		%>
	</select>
	<select name="timeZoneId">
		<%--
			TimeZo
		--%>
		<option value="Asia/Seoul">아시아/서울</option>
	</select>
</form>
<table>
	<thead>
		<tr>
		<%
			String[] weekDays = dfs.getShortWeekdays();
			for(int col=SUNDAY; col<=SATURDAY; col++){
				out.println(String.format("<th>%s</th>", weekDays[col]));
			}
		%>
		</tr>
	</thead>
	<tbody>
	<%
		for(int row=1; row<=6; row++){
			out.println("<tr>");
			for(int col=SUNDAY; col<=SATURDAY; col++){
				out.println(String.format("<td>%te</td>", calendar));
				calendar.add(DAY_OF_MONTH, 1);
			}
			out.println("</tr>");
		}
	%>
	</tbody>
</table>
<script type="text/javascript">
	let yearTag = $("[name=year]").val("<%=year %>");
	let monthTag = $("[name=month]").val("<%=month %>");
	let languageTag = $("[name=language]").val("<%=language %>");
	
	$(".changeBtn").on("click", function(event){
		event.preventDefault();
		let year = $(this).data("year");
		let month = $(this).data("month");
		yearTag.val(year);
		monthTag.val(month);
		calForm.submit();
		return false;
	});
	
	let calForm = $(document.calForm).on("change", ":input[name]", function(event){
// 		event.target == this
// 		this.form.submit(); // submit 이벤트는 발생하지 않는다.
		this.form.requestSubmit(); // submit 이벤트 발생;
	});
</script>
</body>
</html>

      쌤이짠코드

      'main' 카테고리의 다른 글

      22-09-08_jsp(2)  (0) 2022.09.08
      22-09-08_jsp(1)  (2) 2022.09.08
      22-09-07_jsp(3)_과제있음  (0) 2022.09.07
      22-09-07_jsp(2)  (0) 2022.09.07
      22-09-07_jsp(1)  (0) 2022.09.07

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바