국비지원 62일차 - Bean scope , 우편번호검색, jQuery DOM 탐색 메소드, 실습

2020. 7. 10. 12:48

scope

빈즈의 유효범위
 [1] page : 하나의 jsp 페이지 내에서만 유효
 [2] request: 하나의 요청에 대한 처리관련 jsp페이지들에 유효
 [3] session(공간): 하나의 사용자(브라우저) 에 대 한 유효
 [4] application: 하나의 웹 애플리케이션 전체기 간 유효(서버 종료시까지)
 cf)크기 page <request <session <application

scope.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="beans.count.*" %>
<!-- scope.jsp -->
<%--빈의 scope를 page, session, application으로
변경하며 테스트 해보자. --%>
<jsp:useBean id="cbean" class="beans.count.CountBean" scope="session"/>
 <%-- 
	CountBean cbean=new CountBean();  과 동일
--%>
<jsp:setProperty name="cbean"
 			property="count" param="count"  />
 <%--
 	cbean.setCount(request.getParameter("count"));
 	
 	param속성에는 html의 input name을
 	property속성에는 빈즈의 프로퍼티명을 지정
 	둘다 동일하게 줬다면 property="*" 로 지정할 수 있다.
  --%>
<h1>scope.jsp</h1>
<h2 style="color:maroon">
<jsp:getProperty property="count" name="cbean"/>
<%-- <%=cbean.getCount()%>  과 동일 --%>
</h2> 
 <a href="javascript:history.back()">이전 페이지</a>|
 <a href="result.jsp">result.jsp로 가기</a>

result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean id="cbean" class="beans.count.CountBean" scope="session"/>
<h1>result.jsp</h1>
<h2 style="color:blue">
<jsp:getProperty property="count" name="cbean"/>
</h2>

forward를 이용하면 request를 공유한다.
href는 request를 공유하지 않는다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="beans.count.*" %>
<!-- scope2.jsp -->
<jsp:useBean id="cbean" class="beans.count.CountBean"
 scope="request"/>
<jsp:setProperty name="cbean"
 			property="count" param="count"  />
<h1>scope2.jsp</h1>
<h2 style="color:maroon">
<jsp:getProperty property="count" name="cbean"/>
</h2> 
<!--forward방식으로 result2.jsp로 이동(같은 request사용)
  -->
<jsp:forward page="result2.jsp"/>

우편번호검색
https://www.epost.go.kr/search/zipcode/areacdAddressDown.jsp
데이터 txt 받아서 csv파일로 만들고 table에 넣기

drop table zipcode;

create table zipcode(
   new_post_code char(5),
   sido_kor varchar2(40),
   sido_eng varchar2(40),
   sigungu_kor varchar2(30),
   sigungu_eng varchar2(30),
   upmyon_kor varchar2(30),
   upmyon_eng varchar2(30),
   doro_num varchar2(20),
   doro_kor varchar2(100),
   doro_eng varchar2(100),
   under_flag number(10),
   bld_origin_num number(5),
   bld_refer_num number(5),
   bld_manage_num varchar2(30),
   multi_deliver_name varchar2(40),
   sigungu_bld_name varchar2(200),
   law_dong_num varchar2(30),
   law_dong_name varchar2(30),
   ri_name varchar2(30),
   admin_dong_name varchar2(40),
   san_flag varchar2(10),
   jibeon_bonbeon number(4),
   upmyondong_seq varchar2(5),
   jibeon_bubeon number(4),
   old_post_code  varchar2(6),
   post_code_seq varchar2(3)
);

select new_post_code, sido_kor, doro_kor, bld_origin_num, sigungu_bld_name,
law_dong_name, jibeon_bonbeon, jibeon_bubeon from zipcode
where doro_kor like '%라온%';

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

DOM 탐색 메소드

1) $().find('조건') : 선택한 요소 중 조건을 만족하는 모든 자손 엘리먼트를 반환
2) $().children('조건') : 선택한 요소 중 조건을 만족하는 모든 자식 엘리먼트를 반환
3) next() : 이후의 형제 요소를 찾는다.
4) prev() : 이전의 형제 요소를 찾는다.
5) nextAll() : 이후의 모든 형제 요소를 찾는다.
6) prevAll() : 이전의 모든 형제 요소를 찾는다.
7) parent() : 부모 요소를 찾는다.
8) parents() : 조상 요소를 찾음
9) siblings() : 자신을 제외한 모든 형제 요소를 찾음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
        body *{
            border: 1px solid silver;
            padding: 5px;
            margin: 5px;
        }
    </style>
    <script>
        $(function(){
            //1) 아이디가 panel인 자식 요소 중 div요소를 찾아서
            //폭: 80px 높이 80px 배경색 알아서
            $("#panel").children("div").css({"width":"80px","height":"80px","background-color":"skyblue"});
            //2) 아이가 p1인 바로 다음 형제 요소를 찾아서 글자크기 3em,
            //이탤릭체, 글자색상 red로 주세요
            $("#p1").next().css({"font-size":"3em","font-style":"italic","color":"green"});
            //3) #p1의 이전 모든 형제를 찾아서 배경색과 테두리를 알아서
            $("#p1").nextAll().css({"border":"1px solid red"})
            //4) #p1의 부모 요소를 찾아서 배경색을 yellow로 주기
            $("#p1").parent().css({"background-color":"yellow"})
            //5) #p1의 조상 요소를 찾아서 테두리를 10px inset blue로 주기
            $("#p1").parents().css("border","10px inset blue")
            //6) body자식 중 클래스가 test인 요소를 찾아서 테두리 3px solid green
            //으로 주고 모서리를 둥글게 30px 주기
            $("body").find(".test").css("border","3px solid green")
            .css("border-radius","30px")
            //7) .test의 모든 형제들을 찾아서 border를 dotted 3px orange
            $(".test").siblings().css("border","dotted 3px orange")
        })
    </script>
</head>
<body>
    <h1>jQuery DOM (Document Object Model)탐색</h1>
    <div id="panel">div#panel
        <div class="middle">div.middle
            <p id="subp">p#subp</p>
        </div>
        <p id="p1">#p1</p>
        <p>p</p>
        <p>p</p>
        <p id="sub">p#sub
            <div class="middle">p.middle</div>
        </p>
    </div>

    <div>div
        <p>p</p>
        <p class="test">div p.test</p>
        <p>p</p>
        <div>div</div>
    </div>
</body>
</html>

실습1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type"
content="text/javascript" />
<title> 아코디언판넬 </title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/
jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">
    $(function(){

        //[1] dd 요소 중 첫번째 요소가 아닌 요소들은 감추기
        $("dd").not(':first').css("display","none");
    
        //[2] dl의 자식 dt를 클릭했을 때 이벤트 처리 코드 완성
        //    이 코드 안에서 구현
        $("dt").click(function(){
            if($(this).next().css("display")=='none')
            $(this).parent().find("dd").slideUp(2000);
            $(this).next().slideDown(2000);
            //$("+dd",this).slideDown(2000);
        })
        
    });
</script>
<style type="text/css">
*{
margin:0;
padding:0;
font-family:'sans-serif';
}
dl{
width:400px;
margin:50px auto;
}
dl dt{
background:#7CADB6;
border-bottom:1px solid #FFFFFF;
cursor:pointer;
padding:8px;
}
dl dd{
border:1px solid #7CADB6;
border-top:none;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<dl>
    <dt> 텍스트1</dt>
    <dd>
        <p> 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트
            텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 
       </p>
    </dd>
    <dt> 텍스트 2</dt>
    <dd>
        <p> 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트
        텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 
        </p>
    </dd>
    <dt> 텍스트 3</dt>
    <dd>
        <p> 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트
        텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 </p>
    </dd> 
</dl>
</div>
</body>
</html>

실습2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<title>sample2</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<style type="text/css">
*{
	margin:0;
	padding:0;
	border:0;
}
body{
	background:#252422;
}
dl{
	width:800px;
	margin:50px auto;
}
dt{
	line-height:35px;
	font-size:large;
	text-indent:3em;
	font-weight:bold;
	color:white;
	height:35px;
	background:url("../images/background.jpg")
}
dt.over{
	background:url("../images/background-over.jpg");
	cursor:pointer;
}
dt.selected{
	background:url("../images/background_selected.jpg");
	cursor:default;
	color:black;
}
dd{
	height:300px;
	background:#D4D0C8;
}
dd p{
	text-indent:1em;
	padding:20px;
}
</style>
<script type="text/javascript">
	$(function(){
			/*[실습]여기에 코드 작성*/
			//첫번째가 아닌 dd는 모두 갑추기
			//첫번째 dt에만 selected
			$("dd").not(":first").css("display","none");
			$("dt").first().addClass('selected');

			//클릭한 dt에 .selected 스타일 적용시키기
			
			$("dl>dt").click(function(){
				if($(this).next().css("display")=="none"){
					$("dt").removeClass('selected');
					$(this).addClass('selected');
					$(this).parent().find("dd").slideUp(4000);
					$(this).next().slideDown(4000);
				}
			}).hover(function(){$(this).addClass('over');},
			function(){$(this).removeClass('over');})

			//hover(함수1, 함수2)
			//mouserover, mouseleave
			
			// .mouseover(function(){
			// 	$(this).addClass('over');
			// }).mouseleave(function(){
			// 	$(this).removeClass('over');
			// })


			//css를 추가하는 함수
			//요소.addClass('클래스명')
			//:요소에 '클래스명'의 css를 적용한다.
			//=>반대: 요소.removeClass('클래스명')
			//요소에 해당 클래스를 제거한다. 
	})//$() end-------------
</script>
</head>
	<body>
		<dl>
			<dt>Step.1</dt>
			<dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque urna, molestie id cursus non, bibendum nec magna. Mauris consequat faucibus ante sollicitudin ullamcorper. Proin et felis orci. Nulla vitae diam sit amet felis semper ultricies. Nulla vitae mauris sit amet augue pulvinar pulvinar. Donec tincidunt viverra turpis eget suscipit. Morbi eu lacus iaculis turpis suscipit pretium. Aenean ultricies scelerisque dictum. Phasellus tincidunt, nibh lacinia facilisis aliquam, lacus quam condimentum orci, id lacinia justo odio vel purus. Mauris molestie tortor eu purus facilisis at congue sapien commodo. Sed ac eros vitae odio ultrices mollis nec a lorem. Phasellus sit amet dolor nec tellus consequat ornare sit amet ut ipsum. Vestibulum sagittis, mi sed pulvinar semper, lacus mauris lobortis eros, eu egestas est lectus nec lacus. Donec in lacus quis elit consectetur accumsan sit amet sed tortor. Etiam id vestibulum libero. Nam faucibus tincidunt felis, eu feugiat nibh fringilla vel. Donec adipiscing dictum imperdiet. Nulla ac fringilla neque. Curabitur posuere euismod est vel vehicula. Curabitur quis ligula sit amet quam tempus venenatis.</p></dd>
			<dt>Step.2</dt>
			<dd><p>Integer rhoncus felis mauris. Donec massa nisi, posuere vel posuere vel, suscipit sed magna. Sed congue scelerisque odio, faucibus tempor nisl posuere condimentum. In eu tellus vitae elit consequat pretium. Maecenas nec ultrices dolor. Curabitur eu pulvinar turpis. Aenean vel tortor justo, id dapibus velit. Mauris pulvinar massa sit amet erat mollis sit amet ornare tellus aliquet. Quisque ullamcorper elementum libero, ut vehicula neque placerat nec. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Morbi et ante turpis, et fringilla tortor. In hac habitasse platea dictumst. Proin eros urna, sagittis vitae tristique et, ullamcorper ac leo. Donec elementum arcu tortor. Praesent tincidunt dui in est adipiscing ac lobortis lorem porttitor. Nullam et dui elit. Vivamus hendrerit vestibulum enim, quis lobortis erat viverra vitae. Donec at pellentesque mi. Mauris lobortis libero ac metus ultricies accumsan. </p></dd>
			<dt>Step.3</dt>
			<dd><p>Integer pretium porttitor lectus at tempor. Donec nec cursus elit. Maecenas ornare malesuada urna vitae lobortis. Sed vulputate sapien quis purus cursus consectetur. Aenean nulla neque, egestas ut accumsan nec, convallis vel enim. Vestibulum vehicula interdum diam nec condimentum. Etiam in condimentum justo. Fusce a tortor metus, id pellentesque orci. Sed facilisis, tellus quis tempus faucibus, justo elit sodales lorem, eget placerat lectus risus bibendum ipsum. Donec varius mattis quam eu consequat. Praesent ut metus nec nibh tincidunt suscipit. Nam vulputate sodales egestas. Sed orci lectus, vestibulum ac gravida eget, congue non velit. Morbi rutrum convallis orci, in hendrerit arcu vulputate a. Aliquam aliquam facilisis libero, sit amet facilisis lacus tincidunt ac. Sed viverra nulla sit amet turpis egestas nec molestie justo congue. Vivamus a lacinia sem. Aenean ut metus arcu, non ornare orci. Praesent feugiat est eu tellus dictum ac imperdiet nisi imperdiet. </p></dd>
		</dl>
	</body>
</html>

저작자표시

'개발자 > 국비지원 SW' 카테고리의 다른 글

국비지원 64일차 - JSP 페이징 처리, jQuery DOM삭제 (0)	2020.07.14
국비지원 63일차 - JSP POST방식, 모듈화, jQuery 요소추가, tab실습 (0)	2020.07.13
국비지원 61일차 - JSP 이동방식(redirect, forward), Beans, jQuery 필터링, attr (jQuery의 setter, getter), effect (0)	2020.07.09
국비지원 60일차 - JSP 회원가입, 요청정보, jQuery 내용필터, 보안필터, 선택필터 (0)	2020.07.08
국비지원 59일차 - jQuery 사용법, Selector (기본, 속성, 계층, 필터), event (0)	2020.07.07

찬쿤

국비지원 62일차 - Bean scope , 우편번호검색, jQuery DOM 탐색 메소드, 실습

'개발자 > 국비지원 SW' 카테고리의 다른 글

+ Recent posts

티스토리툴바