1. command 객체에 대하여 설명하시오.
: 스프링에서 요청 정보를 받아올 때 쓰이는 방법 중 하나로 클라이언트에서 들어오는 각 속성값들을 자동적으로 커맨드 객체에 반영할 수 있는 기능을 가진다.
@RequestMapping("/member/join")
public String joinData(Member member) { // member: 해당 멤버 객체의 필드 변수를 setter/getter한다.
retrun "member/join";
}2. ModelAndView 객체에 대하여 설명하시오.
: Model과 View를 동시에 설정하는 객체로 뷰에 보낼 이름과 값을 보낼 수 있다.
@RequestMapping("/board/content")
public ModelAndView content() {
ModelAndView mv = new ModelAndView();
mv.setViewName("/board/content");
mv.addObject("data", 123);
return mv;
}3. 아래의 Annotation에 대하여 설명하시오.
@Controller @RequestParam @RequestMapping
3-1. @Controller
: 컨트롤러 클래스를 제작하는데 필요한 Annotation으로 클라이언트에 요청받은 정보들을 관리할 수 있다.
3-2. @RequestParam
: 클라이언트에게 요청(Request) 정보를 받는 Annotation으로 해당 값을 매개변수 받아 모델 객체에 추가(addAttribute)한다.
3-3. @RequestMapping
: 특정 jsp파일의 경로를 매핑(Mapping)하는 기능을 가진 Annotation이다.
4. 아래를 프로그래밍 스프링으로 프로그래밍 하시오.
- 국영수 입력 페이지
- 국영수점수를 서버에서 받아서,총점과 평균을 리턴
- 해당 총점과 평균의 점수의 색깔은 각각 빨간색과 파란색으로 만들것(JS로).
- 제일 위에 입력 버튼 하나를 만든다
4-1. 소스코드 (입력페이지)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page session="false" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Input Page</title>
</head>
<body>
<form action="output">
<table border="1" width="264">
<tr>
<td colspan="2"><input type="submit" value="입력">
<input type="reset" value="초기화"></td>
</tr>
<tr>
<td>국어 점수
<td><input type="number" name="kor">
</tr>
<tr>
<td>영어 점수
<td><input type="number" name="eng">
</tr>
<tr>
<td>수학 점수
<td><input type="number" name="math">
</tr>
</table>
</form>
</body>
</html>4-2. 소스코드 (출력페이지)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
<title>Output Page</title>
<script type="text/javascript">
window.onload = function() {
var cEventA = document.getElementById("cEventA");
cEventA.style.border = "1px solid #ff0000";
var cEventB = document.getElementById("cEventB");
cEventB.style.border = "1px solid #0000ff";
};
</script>
</head>
<body>
<table border="1" width="264">
<tr>
<td colspan="2"><button type="button" onclick="location.href='input'">돌아가기</button></td>
</tr>
<tr>
<td>국어 점수
<td>${grade.kor}
</tr>
<tr>
<td>영어 점수
<td>${grade.eng}
</tr>
<tr>
<td>수학 점수
<td>${grade.math}
</tr>
<tr id="cEventA">
<td >과목 총점
<td>${grade.getSum(grade.kor, grade.eng, grade.math)}
</tr>
<tr id="cEventB">
<td>과목 평균
<td>${grade.getAvg(grade.kor, grade.eng, grade.math)}
</tr>
</table>
</body>
</html>4-3. 소스코드 (컨트롤러 객체)
package edu.bit.ex;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import edu.bit.ex.member.Grade;
@Controller
public class GradeController {
private static final Logger logger = LoggerFactory.getLogger(GradeController.class);
@RequestMapping("/grade/input")
public String inputGrade() {
logger.info("inputGrade() 실행");
return "/grade/input";
}
@RequestMapping("/grade/output")
public String outputGrade(Grade grade) {
logger.info("outputGrade() 실행");
return "/grade/output";
}
}4-4. 소스코드 (멤버 객체)
package edu.bit.ex.member;
public class Grade {
private String kor;
private String eng;
private String math;
public Grade() {
super();
}
public Grade(String kor, String eng, String math) {
super();
this.kor = kor;
this.eng = eng;
this.math = math;
}
public String getKor() {
return kor;
}
public void setKor(String kor) {
this.kor = kor;
}
public String getEng() {
return eng;
}
public void setEng(String eng) {
this.eng = eng;
}
public String getMath() {
return math;
}
public void setMath(String math) {
this.math = math;
}
public double getSum(String kor, String eng, String math) {
double tempKor = Double.parseDouble(kor);
double tempEng = Double.parseDouble(eng);
double tempMath = Double.parseDouble(math);
return tempKor + tempEng + tempMath;
}
public double getAvg(String kor, String eng, String math) {
return Math.round((getSum(kor, eng, math) / 3) * 100) / 100.0;
}
}4-5. 구현화면
5. 버튼을 누르면 200*200 파란색 박스가 하나씩 계속해서 생기는 프로그램을 만드시오.
5-1. 소스코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BlueBox</title>
<script>
window.onload = function() {
function addHandler(){
var wrap = document.createElement("div");
var text = document.createTextNode("파란상자");
wrap.style.margin = "10px 0px 10px 0px";
wrap.style.width = "200px";
wrap.style.height = "200px";
wrap.style.backgroundColor = "blue";
wrap.style.textAlign = "center";
wrap.style.fontWeight = "bold";
wrap.style.color = "white";
wrap.style.lineHeight = "200px";
wrap.appendChild(text);
document.body.appendChild(wrap);
console.log("사각형 생성");
};
var activate = document.getElementById("activate");
activate.addEventListener("click", addHandler, false);
};
</script>
</head>
<body>
<button onclick="activate" id="activate">사각형이 생기는 버튼</button>
</body>
</html>5-2. 구현화면
'WebDev > 본과정' 카테고리의 다른 글
| Spring의 MVC 패턴 (0) | 2021.05.16 |
|---|---|
| Spring의 Form 데이터 값 검증, JS의 이벤트 처리 (0) | 2021.05.16 |
| JS의 DOM 및 BOM 객체, Spring의 MVC 패턴개요 (0) | 2021.05.16 |
| JS의 메소드와 Spring의 IOC 컨테이너 (0) | 2021.05.16 |
| 자바 스크립트의 변수와 자료형 (0) | 2021.05.16 |
최근댓글