반응형
1. 구구단 필요한 단만 출력해주세요 요청 받아 구현하기
프롬프트 텍스트
서밋이벤트 => 동기
비동기로 하려면? 서밋이벤트 핸들링을 발생시켜야한다. => 그때는 폼태그 핸들링
event.preventDefault(); ==> 기본 액션을 중단시킨다. ==return false;와 비
<script type="text/javascript">
document.querySelector("#generalBtn").addEventListener("click", function(event){
console.log(event.target);
});
document.gForm.addEventListener("submit", function(event){
event.preventDefault();
console.log(event.target);
return false;
});
</script>
http://localhost/WebStudy01/04/gugudan.jsp?miDan=2&maxDan=2
-------------------------- // 상대경로
현재창의 출처인 오리진을 모두 가지고 있음. 생략가능한 것
pathname을 form의 action으로 사용함
1. 8단 선택
2. 서밋버튼 >>두개의 파라미터 검증 >> 해당하는 구구단 랜더
<%@page import="java.io.IOException"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String param1 = request.getParameter("minDan");
String param2 = request.getParameter("maxDan");
int minDan = 2;
int maxDan = 9;
// server side validation
if(param1!=null){
if(param1.matches("[2-9]")){
minDan = Integer.parseInt(param1);
}else{
response.sendError(HttpServletResponse.SC_BAD_REQUEST);
}
}
if(param2!=null){
if(param2.matches("[2-9]")){
maxDan = Integer.parseInt(param2);
}else{
response.sendError(HttpServletResponse.SC_BAD_REQUEST);
}
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%!
private final String[] clzCases = new String[]{"red", "green"};
%>
<style type="text/css">
<%
StringBuffer cssSourse = new StringBuffer();
String cssPtrn = ".%1$s{background-color:%1$s;}";
for(String cssCase : clzCases){
cssSourse.append( String.format(cssPtrn, cssCase) );
}
out.println(cssSourse);
%>
</style>
</head>
<body>
<%!
String ptrn = "<td>%d * %d = %d</td>";
private void printTd(int dan, int mul, Object target)throws IOException{
if(target instanceof JspWriter){
((JspWriter)target).println(
String.format(ptrn, dan, mul, (dan*mul))
);
}else if( target instanceof StringBuffer){
((StringBuffer)target).append(
String.format(ptrn, dan, mul, (dan*mul))
);
}
}
private String getClzValue(int dan){
return clzCases[dan%2];
}
%>
<form name="gForm">
<input type="number" name="minDan" min="2" max="9" placeholder="최소단" />
<select name="maxDan" onchange="this.form.submit(); return false;"><!-- 익명함수를 만든 또하나의 방법 -->
<option value>최대단</option> <!-- 프롬프트텍스트 -->
<%
String optPtrn = "<option %2$s value='%1$d'>%1$d단</option>";
// formatting : 특정 타입의 데이터를 일정한 형식의 문자열로 바꾸는 작업.
// parsing : 특정 형식의 문자열을 특정 타입의 데이터로 바꾸는 작업
for(int idx=2; idx<=9; idx++){
String selected = idx==maxDan ? "selected" : "";
out.println(String.format(optPtrn, idx, selected));
}
%>
</select>
<input type="submit" value="서밋버튼" id="submitBtn"/>
<!-- 1.클릭 2.서밋이벤트 트리거 ->이벤트 타겟이 변경된다.(나->form태그) -->
<input type="button" value="일반버튼" id="generalBtn"/>
<input type="reset" value="리셋버튼" />
</form>
<table>
<%
String trPtrn = "<tr class='%s'>";
for(int dan=minDan; dan<=maxDan; dan++){
String clz = getClzValue(dan);
out.println(String.format(trPtrn, clz));
for(int mul=1; mul<=9; mul++){
printTd(dan, mul, out);
}
out.println("</tr>");
}
%>
</table>
<script type="text/javascript">
document.querySelector("#generalBtn").addEventListener("click", function(event){
console.log(event.target);
});
document.gForm.addEventListener("submit", function(event){
// event.preventDefault();
console.log(event.target);
// return false;
});
</script>
</body>
</html>달력만들기
time템퍼러리 사용해보자 자바 8버
Accept : mime text>> 클라이언트가 받을 데이터 형식
Accept-Encoding :
Accept-Language : language tag(locale code) => ko-KR, ko;(한글-대한민국, 한글)
==> 이 정보는 request가 가지고 있다.
DayOfWeek은.... 요일정보, enum
"\\d{1,2}" 반복의 횟수를 범위로 지
2차미션
1클릭이벤트
2. 전달의 정보 받을 수 있어야한다.
3. 그 정보를 초기값으로 input
4.submit 하도록.
반응형
'내가 보려고 정리하는 > Spring' 카테고리의 다른 글
| 웹 보강 : path, IOException : 0227, 0228 (0) | 2023.03.02 |
|---|---|
| 웹:0228 (0) | 2023.02.28 |
| JSP spec : 0224 (1) | 2023.02.24 |
| 웹 : 서블릿과 템플릿, model1과 model2 차이 : 0223 (0) | 2023.02.23 |
| Servlet, MIME - 0222 (0) | 2023.02.23 |