JS의 DOM 및 BOM 객체, Spring의 MVC 패턴개요

1. 게시판 replyShape 생성시 아래의 쿼리문에서 ‘bStep > ?’ 은 무슨 의미 인가?

UPDATE mvc_board 
SET bStep = bStep + 1 
WHERE bGroup = ? AND bStep > ?

: 한 게시글의 단위 그룹(bGroup)이 있을 때 기존 답글 열(bStep)의 수가 추가하고자 하는 답글 열보다 크면(>) 해당 답글 열을 하나 더 추가하는(bStep + 1) 쿼리문이다. 여기서 ‘bStep > ?’의 ? 와일드카드는 답글 열의 현재 번호를 지칭한다.

2. sql 문제

2-1. 부서별 급여 평균을 출력하시오.

SELECT deptno, AVG(sal) as 평균급여
FROM emp
GROUP BY deptno;

2-2. 오늘은 몇요일인가?

SELECT '오늘은 ' || TO_CHAR(SYSDATE, 'DAY') || '입니다.' AS TODAY
FROM dual;

2-3. EMP Table에서 급여가 1800 이상이면 ‘good’, 아니면 ‘poor’를 출력하시오.

SELECT sal,
    CASE WHEN sal >= 1800 THEN 'good'
         WHEN sal < 1800 THEN 'poor'
    END AS sal_grade     
FROM emp;

3. 가위바위보 이미지 넣어서 짜시오.

3-1. 소스코드

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>가위 바위 보를 겨뤄보자.</title>
	
	<script type="text/javascript">
	function RPSPlayer(your) {

	      var rps = ['가위', '바위', '보'];
	      var selfNum = 0;
	      var yourRPS = your;
	      
	      var comImg = document.createElement("img");
	      var userImg = document.createElement("img");

	      this.setSelfNum = function() {
	         selfNum = Math.floor(Math.random() * 3);
	                  
	         if(selfNum == 0) { // 가위
	        	 comImg.setAttribute("src", "https://www.pinclipart.com/picdir/middle/536-5360227_scissors-hand-rock-paper-scissors-png-clipart.png");
	        	 comImg.setAttribute("width", 200);
	        	 comImg.setAttribute("height", 200);
	         } else if (selfNum == 1) { // 바위
	        	 comImg.setAttribute("src", "https://www.pngitem.com/pimgs/m/109-1094400_rock-paper-scissors-png-clipart-rock-paper-scissor.png");
	        	 comImg.setAttribute("width", 200);
	        	 comImg.setAttribute("height", 200);
			 } else if (selfNum == 2) { // 보
				 comImg.setAttribute("src", "https://www.clipartkey.com/mpngs/m/109-1094319_rock-paper-scissors-png.png");
				 comImg.setAttribute("width", 200);
				 comImg.setAttribute("height", 200);
			 }
	      };

	      this.result = function() {

	         this.setSelfNum();

	         switch (yourRPS) {

	         case "가위":
	            if (rps[selfNum] == "가위") {
	               document.write("컴퓨터<br>");
	               document.body.appendChild(comImg);
	               document.write("<hr>");
	               
	               document.write("유저는<br>");
	               userImg.setAttribute("src", "https://www.pinclipart.com/picdir/middle/536-5360227_scissors-hand-rock-paper-scissors-png-clipart.png");
	               userImg.setAttribute("width", 200);
		           userImg.setAttribute("height", 200);
	               document.body.appendChild(userImg);
	               document.write("<hr>");
	               
	               document.write("무승부입니다" + "<br>");
	            } else if (rps[selfNum] == "바위") {
	               document.write("컴퓨터<br>");
		           document.body.appendChild(comImg);
		           document.write("<hr>");
		               
		           document.write("유저는<br>");
	               userImg.setAttribute("src", "https://www.pinclipart.com/picdir/middle/536-5360227_scissors-hand-rock-paper-scissors-png-clipart.png");
	               userImg.setAttribute("width", 200);
		           userImg.setAttribute("height", 200);
	               document.body.appendChild(userImg);
	               document.write("<hr>");
	               
	               document.write("컴퓨터 WIN!" + "<br>");
	            } else if (rps[selfNum] == "보") {
	               document.write("컴퓨터<br>");
		           document.body.appendChild(comImg);
		           document.write("<hr>");
		               
		           document.write("유저는<br>");
	               userImg.setAttribute("src", "https://www.pinclipart.com/picdir/middle/536-5360227_scissors-hand-rock-paper-scissors-png-clipart.png");
	               userImg.setAttribute("width", 200);
		           userImg.setAttribute("height", 200);
	               document.body.appendChild(userImg);
	               document.write("<hr>");
	               
	               document.write("유저 WIN!" + "<br>");
	            }
	            break;

	         case "바위":
	            if (rps[selfNum] == "바위") {
	               document.write("컴퓨터<br>");
		           document.body.appendChild(comImg);
		           document.write("<hr>");
		               
		           document.write("유저는<br>");
	               userImg.setAttribute("src", "https://www.pngitem.com/pimgs/m/109-1094400_rock-paper-scissors-png-clipart-rock-paper-scissor.png");
	               userImg.setAttribute("width", 200);
		           userImg.setAttribute("height", 200);
	               document.body.appendChild(userImg);
	               document.write("<hr>");

	               document.write("무승부입니다" + "<br>");
	            } else if (rps[selfNum] == "보") {
	               document.write("컴퓨터<br>");
		           document.body.appendChild(comImg);
		           document.write("<hr>");
		               
		           document.write("유저는<br>");
	               userImg.setAttribute("src", "https://www.pngitem.com/pimgs/m/109-1094400_rock-paper-scissors-png-clipart-rock-paper-scissor.png");
	               userImg.setAttribute("width", 200);
		           userImg.setAttribute("height", 200);
	               document.body.appendChild(userImg);
	               document.write("<hr>");
	               
	               document.write("컴퓨터 WIN!" + "<br>");
	            } else if (rps[selfNum] == "가위") {
	               document.write("컴퓨터<br>");
		           document.body.appendChild(comImg);
		           document.write("<hr>");
		               
		           document.write("유저는<br>");
	               userImg.setAttribute("src", "https://www.pngitem.com/pimgs/m/109-1094400_rock-paper-scissors-png-clipart-rock-paper-scissor.png");
	               userImg.setAttribute("width", 200);
		           userImg.setAttribute("height", 200);
	               document.body.appendChild(userImg);
	               document.write("<hr>");
	               
	               document.write("유저 WIN!" + "<br>");
	            }
	            break;

	         case "보":
	            if (rps[selfNum] == "보") {
	               document.write("컴퓨터<br>");
			       document.body.appendChild(comImg);
			       document.write("<hr>");
			       
			       document.write("유저는<br>");
	               userImg.setAttribute("src", "https://www.pinclipart.com/picdir/middle/536-5360227_scissors-hand-rock-paper-scissors-png-clipart.png");
	               userImg.setAttribute("width", 200);
		           userImg.setAttribute("height", 200);
	               document.body.appendChild(userImg);
	               document.write("<hr>");
	               
	               document.write("무승부입니다" + "<br>");
	            } else if (rps[selfNum] == "가위") {
	               document.write("컴퓨터<br>");
				   document.body.appendChild(comImg);
				   document.write("<hr>");
				       
				   document.write("유저는<br>");
	               userImg.setAttribute("src", "https://www.pinclipart.com/picdir/middle/536-5360227_scissors-hand-rock-paper-scissors-png-clipart.png");
	               userImg.setAttribute("width", 200);
		           userImg.setAttribute("height", 200);
	               document.body.appendChild(userImg);
	               document.write("<hr>");
	               
	               document.write("컴퓨터 WIN!" + "<br>");
	            } else if (rps[selfNum] == "바위") {
	               document.write("컴퓨터<br>");
				   document.body.appendChild(comImg);
				   document.write("<hr>");
				       
				   document.write("유저는<br>");
	               userImg.setAttribute("src", "https://www.pinclipart.com/picdir/middle/536-5360227_scissors-hand-rock-paper-scissors-png-clipart.png");
	               userImg.setAttribute("width", 200);
		           userImg.setAttribute("height", 200);
	               document.body.appendChild(userImg);
	               document.write("<hr>");
	               
	               document.write("유저 WIN!" + "<br>");
	            }
	            break;

	         default:
	            document.write(yourRPS + " 잘못된 입력 입니다 .다시입력하세요");
	         }
	      };
	   }

	   var rps = prompt("(가위, 바위, 보)를 입력하세요");
	   var player = new RPSPlayer(rps);
	   player.result();
	</script>
</head>
<body>
	
</body>
</html>

3-2. 구현화면

4. Bom , 과 Dom 이란?

4-1. BOM(Browser Object Model)

: 웹 브라우저(클라이언트)와의 관련된 객체 모델을 뜻한다.

Window 객체: 웹 브라우저 창을 다루는 기능을 가진 객체로 onload를 통해 호출된 웹 문서가 모두 완료된 후 자동으로 실행되는 이벤트를 지원한다.
Screen 객체: 브라우저의 스크린을 다루는 기능을 가진 객체
Location 객체: 브라워저 내 페이지를 다루는 기능을 가진 객체

href replace

기존 페이지에서 다른 페이지로 이동 새로 페이지가 생성됨

뒤로가기가 가능하다 뒤로가기가 불가능하다

4-2. DOM(Document Object Model)

: 웹 문서 내 태그와 관련된 객체 모델을 뜻하며, HTML 문서에 있는 태그를 객체로 생성, 추가, 삭제, 이동등의 폭 넓은 작업을 할 수 있는 특징이있다.

createElement(): 요소 노드를 입력하는 객체
cleateTextNode(): 텍스트 요소를 입력하는 객체
appendChild(): 입력한 객체를 받아 출력하는 객체
innerHTML: 자바스크립트에 HTML 문법을 적용하여 출력하는 객체
getElementById(): 해당 id값을 이용하여 객체를 선택한 후 출력하는 객체

저작자표시

'WebDev > 본과정' 카테고리의 다른 글

Spring의 Form 데이터 값 검증, JS의 이벤트 처리 (0)	2021.05.16
Spring의 컨트롤러 및 멤버객체, JS의 핸들러 모델 (0)	2021.05.16
JS의 메소드와 Spring의 IOC 컨테이너 (0)	2021.05.16
자바 스크립트의 변수와 자료형 (0)	2021.05.16
DB의 무결성 제약조건 및 외래키와 JDBC의 예외 처리 (0)	2021.05.16

JS의 DOM 및 BOM 객체, Spring의 MVC 패턴개요

1. 게시판 replyShape 생성시 아래의 쿼리문에서 ‘bStep > ?’ 은 무슨 의미 인가?

2. sql 문제

2-1. 부서별 급여 평균을 출력하시오.

2-2. 오늘은 몇요일인가?

2-3. EMP Table에서 급여가 1800 이상이면 ‘good’, 아니면 ‘poor’를 출력하시오.

3. 가위바위보 이미지 넣어서 짜시오.

3-1. 소스코드

3-2. 구현화면

4. Bom , 과 Dom 이란?

4-1. BOM(Browser Object Model)

4-2. DOM(Document Object Model)

'WebDev > 본과정' 카테고리의 다른 글

전체 카테고리

태그

전체 방문자

블로그 인기글

티스토리툴바

href	replace
		기존 페이지에서 다른 페이지로 이동	새로 페이지가 생성됨
뒤로가기가 가능하다	뒤로가기가 불가능하다

1. 게시판 replyShape 생성시 아래의 쿼리문에서 ‘bStep > ?’ 은 무슨 의미 인가?

2. sql 문제

2-1. 부서별 급여 평균을 출력하시오.

2-2. 오늘은 몇요일인가?

2-3. EMP Table에서 급여가 1800 이상이면 ‘good’, 아니면 ‘poor’를 출력하시오.

3. 가위바위보 이미지 넣어서 짜시오.

3-1. 소스코드

3-2. 구현화면

4. Bom , 과 Dom 이란?

4-1. BOM(Browser Object Model)

4-2. DOM(Document Object Model)

'WebDev > 본과정' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

태그

전체 방문자

블로그 인기글

티스토리툴바