국비지원 60일차 - JSP 회원가입, 요청정보, jQuery 내용필터, 보안필터, 선택필터

form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="/top.jsp"/>
<h1>form 양식</h1>
  <!-- form 태그는 서버쪽으로 데이터를 전송하고자 할 때 사용한다.	
		- form 태그의 속성
			1)action : 폼 데이터를 처리해줄 서버 페이지를 기술하낟.
			2)method : 데이터 전송방식을 기술한다.
						주로 get 아니면 post 기술
						get : 간단한 데이터를 전송할 때
						post : 파일업로드 등 대용량의 데이터를 전송할 때 사용
  -->
  <form name ="frm" action="ex07_request.jsp" method="get">
  	이름 : <input type = "text" name="uname"><br>
  	아이디 : <input type = "text" name="userid">	<span>*아이디는 영문,숫자 4자리이상 8자리 이하</span>
	<br>

  	비밀번호 : <input type = "password" name="userpwd"><br>
	첨부파일: <input type= "file" name="myfile"><br>
	취미 : <input type = "checkbox" name="hobby" value="music">음악감상
	<input type = "checkbox" name="hobby" value="movie" checked="checked">영화감상
	<input type = "checkbox" name="hobby" value="reading">독서
	<br>
	성별 : <input type="radio" name= "gender" value="Male" checked="checked">남자
		<input type="radio" name= "gender" value="Female">여자
	<input>
	<select name="job" size="1">
		<option value = "designer">디자이너</option>
		<option value = "developer">개발자</option>
		<option value = "operator">운영자</option>
	</select>
	<br>
	사용가능 언어
	<select name="lang" multiple size="3">
		<option value = "java">Java</option>
		<option value = "html">HTML</option>
		<option value = "jsp">Jsp</option>
		<option value = "c">C</option>
		<option value = "c++">C++</option>
	</select>
	</br>
  	<textarea name="intro" rows="7" cols="40"></textarea>
	<br>
	히든필드 : 
	<input type = "hidden" name="secret" value="Top Secret">
	<input type = "submit" value="회원가입"><br>
	<input type="reset" value ="다시쓰기"><br>
	<br>
  </form>
<jsp:include page="/foot.jsp"/>

request.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="/top.jsp"/>
<h1>form.jsp에서 사용자가 입력한 값을 받아봅시다</h1>
<h2>request내장객체를 이용한다. HttpServletRequest타입</h2>
<%-- 
	1)단일 값
	String getParameter(String paramName) : 사용자가 입력한 값을 반환한다.
	2)다중 값
	String [] getParameterValues(String paramName) : 사용자가 입력한 값을 배열로 반환한다.	
 --%>
<% 
	String name= request.getParameter("uname");
	String id=request.getParameter("userid");
	String pwd=request.getParameter("userpwd");
	
	//직업, 취미, 성별, 자기소개, 사용가능언어, hidden 값을 받아 출력
	String job=request.getParameter("job");
	String gender=request.getParameter("gender");
	String desc=request.getParameter("intro");
	String hidden=request.getParameter("secret");
		
	//언어, 취미
	String []lang=request.getParameterValues("lang");
	String []hobby=request.getParameterValues("hobby");
%>
<ul>
	<li class="list-group-item">이름 : <%=name %></li>
	<li class="list-group-item">아이디 : <%=id %></li>
	<li class="list-group-item">패스워드 : <%=pwd %></li>
	<li class="list-group-item">직업 : <%=job%></li>
	<li class="list-group-item">취미 : 
	<% if(hobby!=null){
			for(String hb:hobby){
				out.println(hb+",");
			}
		}
	%>
	</li>
	<li class="list-group-item">성별 : <%=gender%></li>
	<li class="list-group-item">소개: <%=desc %></li>
	<li class="list-group-item">언어: 
	<% if(lang!=null){
			for(String lan:lang){
				out.println(lan+",");
			}
		}
	%></li>
	<li class="list-group-item">히든 : <%=hidden %></li>
</ul>

<jsp:include page="/foot.jsp"/>

요청정보

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="/top.jsp"/>
<div class="text-left p-5">
	<h1>request의 주요 메소드</h1>
<%
	String server=request.getServerName();
	int port=request.getServerPort();
	String url=request.getRequestURL().toString();
	String uri=request.getRequestURI();
	String query = request.getQueryString();
	//?name=a&userid=b 쿼리스트림
	String myctx=request.getContextPath(); //컨택스트명을 반환
	String cip=request.getRemoteAddr(); //클라이언트의 ip주소
	String protocol=request.getProtocol();
%>
	<h3>서버 도메인명 : <%=server %></h3>
	<h3>서버 포트번호 : <%=port %></h3>
	<h3>서버 url : <%=url %></h3>
	<h3>서버 uri : <%=uri %></h3>
	<h3>query : <%=query %></h3>
	<h3>myctx : <%=myctx %></h3>
	<h3>cip : <%=cip%></h3>
	<h3>protocol : <%=protocol %></h3>
<%
	//문제1 요청 URI 중에 MyWeb/eample/ex08_request.jsp
	//"/example/ex08_request.jsp"문자열만 추출
	String p1 = uri.substring(myctx.length());
	//문제2 /example/ex08_request문자열만 추출
	String p2=p1.replace(".jsp","");
%>
	<h3>p1 : <%=p1 %></h3>
	<h3>p2 : <%=p2 %></h3>
</div>
<jsp:include page="/foot.jsp"/>

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

jQuery

1. 내용필터
1) 요소:containes('값')
값을 내용으로 포함하고 있는 요소를 선택한다.
2) 요소:has('요소')
특정 요소(element)를 가지고 있는 요소를 선택한다.
3) 요소:empty
비어있는 요소를 선택한다.

2. 보임필터
1) 요소:hidden : 화면에 보이지 않는 요소를 선택한다.
2) 요소:visible : 화면에 보이는 요소를 선택

<!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>
    <script>
        
        $(function() {
            //1) li요소 중 'ap'라는 값을 포함하고 있는 요소를 선택해서
            //글자색을 'red'로 글자 크기는 3배로 주세요
            $("li:contains('ap')").css({"color":"red","font-size":"3em"});
            //2) li요소를 갖는 ul 요소를 선택해서 테두리 3px inset green으로 주고
            //padding 10px로 주기
            $("ul:has('li')").css({"padding":"10px","border":"3px inset green"});
            //3) li요소 중 비어있는 요소를 찾아서 "비어있음"라는 텍스트를 넣기   
            $("li:empty").text('비어있음');

            /*jquery 함수는 setter 또는 getter가 될 수 있다.
            요소.text('문자열')==>setter
            var str=요소.text() ==>getter
            */

            var str=$("li:contains('app')").text();
            // alert(str);
            
            //4)감춰진 li 요소를 찾아서 3초내로 등장
            $("li:hidden").show(3000);
            //5)감춰진 ul 요소를 찾아서 5초내로 등장
            $("ul:hidden").show(5000);

            //6)감춰진 div요소를 찾아서 등장
            $('div:hidden').show(2000);
            /*
            보이지 않는 경우
            1) display :none
            2) input type이 hidden
            3) width, height가 0인 경우
            4) 부모 요소가 보이지 않거나 숨겨져 있을 경후
            cf)참고로 보임필터 선택지로는 
            visibility가 hidden이거나 opacity가 0인 요소들은 선택되지 않음
            */
        });
        


    </script>
</head>
<body>
    <h1>jQuery 내용필터, 보임필터 선택자</h1>
    <div id="panel">
        <ul class="navi1">
            <li>apple</li>
            <li style="display: none;">banana</li>
            <li>grape</li>
            <li></li>
        </ul>
        <ul class="navi2" style="display: none;">
            <li>tiger</li>
            <li>lion</li>
            <li>fox</li>
            <li></li>
        </ul>
    </div>
</body>
</html>

선택필터

<!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>
    <script>
        $(function() {
           $('select[name="bgcolor"]') .on('change',function(){
               //선택한 option값을 알아내서 body요소의 배경색으로 적용
               //select option => :selected
               //checkbox => :checked
               //input => :disabled
                var c = $(this).children('option:selected').val();
                //alert(c);
                $('body').css("background-color",c);
           })
        });
    </script>
</head>
<body>
    <form>
        <select name="bgcolor">
            <option value="">::배경색 선택::</option>
            <option value="yellow">노</option>
            <option value="green">초</option>
            <option value="skyblue">하늘</option>
        </select>
    </form>
</body>
</html>