국비지원학원/HTML,JavaScript,jQ

85일차-jQuery_effect/plugin+Servlet

초코맛 2019. 3. 7. 01:44
반응형
 
*effect
  • 보이거나-show(), 숨기기-hide()
  • toggle()-현재상태를 체크해 보이거나 숨겨줌
  • fadeIn(ms), fadeOut(ms)-서서히 사라지거나 서서히 나타남
  • slideOut,,등
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
     #imgOutput{display: none; }
     #idWarn{font-size: 14px; font-weight: bold; color:  #FF0000;}
     #txt{cursor:pointer;}
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
     $(function(){
           $("#show").click(function(){
                $("#imgOutput").show();
           });//click
           $("#hide").click(function(){
                $("#imgOutput").hide();
           });//click
           $("#toggle").click(function(){
                $("#imgOutput").toggle();
           });//click
/*         $("#fadeIn").click(function(){
                $("#imgOutput").fadeIn(1000);
           });//click */
           $("#fadeIn").click(function(){
                $("#imgOutput").fadeIn(1000,function(){
                     //보여지는 것이 완료 되었을 때,처리할 코드
                     alert("이미지 처리 완료");
                });
           });//click
           /* $("#fadeOut").click(function(){
                $("#imgOutput").fadeOut(3000);
           });//click */
           $("#fadeOut").click(function(){
                $("#imgOutput").fadeOut(3000,function(){
                     alert("숨김완료");
                });
           });//click
           
           /////////////////////////HTML From Control의 값이  입력되지 않았을 때////////////////////////////
           $("#btnJoin").click(function(){
                var id=$("#id").val();
                     
                if(id==""){
                     //1.idWarn글자를 넣어서 보여준다.
                     $("#idWarn").html("아이디는 필수 입력");
/*                   $("#idWarn").fadeIn(1000).fadeOut(1000).fadeIn(1000).fadeOut(1000).fadeIn(1000)
                                     .fadeOut(1000).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500); */
                     var temp=[1000,1000,1000,500,500];
                     $.each(temp,function(i,val){
                          $("#idWarn").fadeIn(val).fadeOut(val);
                     });//end each
/*                   for(var i=0; i<5; i++){
                          $("#idWarn").fadeIn(500).fadeOut(500);
                     }//end for */
                     return;
                }//end if
                alert("가입페이지로 이동");//$("폼태그  id").submit();
           });//click
           
           $("#txt").click(function(){
                var txt=$("#txt").text();//text로 가져온다.
                //alert(txt);//보이기
                if(txt=="보이기"){
                     $("#txt").text("숨기기");
                     $("#imgOutput").slideDown();
                }else{//숨기기
                     $("#txt").text("보이기");
                     $("#imgOutput").slideUp();
                }//end else
           });//click
     });//ready
</script>
</head>
<body>
     <div>
           <input type="button" value="보이기" class="btn"  id="show"/>
           <input type="button" value="숨기기" class="btn"  id="hide"/>
           <input type="button" value="보이기/숨기기 상태유지"  class="btn" id="toggle"/>
           <input type="button" value="서시히보이기" class="btn"  id="fadeIn"/>
           <input type="button" value="서시히숨기기" class="btn"  id="fadeOut"/>
     </div>
     <div>
           <label>아이디</label>
           <input type="text" name="id" class="inputBox" id="id"  autofocus="autofocus"/>
           <input type="button" value="중복확인" class="btn"  id="btn"/>
           <span id="idWarn"></span><br/>
           
           <input type="button" value="가입" class="btn"  id="btnJoin"/><br/>
     </div>
     <div>
           <span id="txt">보이기</span>
     </div>
     <div id="imgOutput">
           <img src="../common/images/img2.jpg"/>
     </div>
</body>
</html>



*plugin
  • jQuery를 가지고 다른 개발자들이 미리 구현해 놓은 기능들.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<!-- accordion plugin -->
<link rel="stylesheet"  href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>
<script type="text/javascript">
</script>
</head>
<body>
<div style="width:400px">
<div id="accordion">
  <h3>1조 -PC방 통제</h3>
  <div>
    <p>
     기존의 PC방 관리 프로그램과 차별화를 둔 관리 프로그램으로,  기존 프로그램의 사용자 경험을 제공하면서 좌석배치, 통계등의 기능을  추가하여
     PC방 사장님의 업무를 대폭 향상시킬 수 있는 프로그램입니다.  
    </p>
  </div>
  <h3>2조 -영화예매</h3>
  <div>
    <p>
        이것은 영화예매인가?
    </p>
  </div>
  <h3>3조 -구인구직</h3>
  <div>
    <p>
      개발자만의 구인구직을 타겟으로한 버티컬 서비스로 모든  개발자가 주 5일제를 지향할 수 있도록,,,
    </p>
    <ul>
      <li>이력서 등록 기능 제공</li>
      <li>업체 등록, 구인등록 기능 제공</li>
      <li>이력서 인간지능 매칭</li>
    </ul>
  </div>
</div>
</div>
</body>
</html>
/*plugin_accordion.html*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<!-- accordion plugin -->
<link rel="stylesheet"  href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>
<script type="text/javascript">
</script>
</head>
<body>
<div style="width:400px">
<div id="accordion">
  <h3>1조 -PC방 통제</h3>
  <div>
    <p>
     기존의 PC방 관리 프로그램과 차별화를 둔 관리 프로그램으로,  기존 프로그램의 사용자 경험을 제공하면서 좌석배치, 통계등의 기능을  추가하여
     PC방 사장님의 업무를 대폭 향상시킬 수 있는 프로그램입니다. 
    </p>
  </div>
  <h3>2조 -영화예매</h3>
  <div>
    <p>
        이것은 영화예매인가?
    </p>
  </div>
  <h3>3조 -구인구직</h3>
  <div>
    <p>
      개발자만의 구인구직을 타겟으로한 버티컬 서비스로 모든  개발자가 주 5일제를 지향할 수 있도록,,,
    </p>
    <ul>
      <li>이력서 등록 기능 제공</li>
      <li>업체 등록, 구인등록 기능 제공</li>
      <li>이력서 인간지능 매칭</li>
    </ul>
  </div>
</div>
</div>
</body>
</html>
/*plugin_tab*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<!-- tab plugin -->
<link rel="stylesheet"  href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- min.js하단에 꼬옥 기술해야 한다. 위로올라가면 jquery가  안불러져 -->
<!-- 플러그인은 jQuery에서 제공하는 기능을 사용하기 때문에,외부  js파일 아래에 기술해야 한다. -->
<script  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs({
      collapsible: true
    });
  } );
  </script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">김</a></li>
    <li><a href="#tabs-2">김</a></li>
    <li><a href="#tabs-3">공</a></li>
    <li><a href="#tabs-4">이</a></li>
  </ul>
  <div id="tabs-1">
    <p><strong>2조 조원</strong></p>
    <p>UI설계외 회원관리 디자인을 맡고 있으며</p>
    <p>거주중입니다.</p>
    <img src="../common/images/img.png"/>
  </div>
  <div id="tabs-2">
    <p><strong>2조 조원</strong></p>
    <p>프로젝트에서 영화예매와 마이페이지를 맡고 있으며</p>
    <p>질문할 때.....</p>
  </div>
  <div id="tabs-3">
    <p><strong>3조 조원</strong></p>
    <p>프로젝트에서 구직글관리와</p>
    <p>맡은 부분 하나 남았습니다....</p>
  </div>
  <div id="tabs-4">
    <p><strong>집이 먼</strong></p>
    <p>프로젝트에서 통계와 주문</p>
    <p>칼퇴에 능함.</p>
    <img src="../common/images/img2.jpg"/>
  </div>
</div>
</body>
</html>
/*plugin_coin*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript"  src="../common/js/coin/coin-slider.min.js"></script>
<link rel="stylesheet"  href="../common/js/coin/coin-slider-styles.css" type="text/css"  />
<script type="text/javascript">
  $(document).ready(function() {
    $('#coin-slider').coinslider({effect:'straight',/*  random,swirl,rain,straight */
     navigation: false, opacity:0.6, delay:500});
  });
</script>
<script type="text/javascript">
</script>
</head>
<body>
<div id='coin-slider'>
  <a href="#void" target="_blank">
    <img src='images/city_1.png' >
    <span>
          대구시 달서구 상인동
    </span>
  </a>
  <a href="#void" target="_blank">
    <img src='images/city_2.png' >
    <span>
         서울시 구로구 안영천변
    </span>
  </a>
  <a href="#void" target="_blank">
    <img src='images/city_3.png' >
    <span>
         인천시 남동구 야경
    </span>
  </a>
  <a href="#void" target="_blank">
    <img src='images/city_4.png' >
    <span>
          경기도 광주시 오포읍
    </span>
  </a>
</div>
</body>
</html>




-front end 끗-   아직+a남긴함
:브라우저에서 동작하는 화면 앞단을 만듦

JAVA EE
:JavaApplication과 Web front단을 아우르는 웹에서 동작하는 program을 만드는것

Web site
-대상 : 일반 사용자
-daum,aution,,,,
-업무가 단순
-소규모
-web Agency(내근)
-ASP,PHP 주로 사용//ASP->ETS?EIS?  php->?

Web Application
-대상 : 기업의 현업(사원들)
-사내 업무용 프로그램(밖에선 못써)/용어도 다르고
-업무가 복잡
-대규모
-SI(외근->파견)
-Java EE

공통점: web browser에서 동작


*Java EE(Enterprise Edition)
  • 기업에서 사용하는 업무용 프로그램을 작성하기에 알맞은 java 개발 버전
  •                                =>module로 구분 작성(결합도가 낮아진다)
  •                                     EJB(Enterprise Java Bean)//모듈로 나누기에 적합한 기술,이젠 안쓰고(안정적인서비스지만 느림/무겁다..)
  •                                                =>서비스를 하기 위해서 별도의 프로그램이 필요(EJB Server)//없으면 돌지 않는다.
  •                                                     .ear파일로 묶어져서 배포된다.
  •                                                     SessionBean, EntityBean, MessageDrivenBean으로 구분
  •                                                     =>DB를 사용하지 않는 업무 처리용
  •                                                                           =>DB를 사용하는 업무 처리용
  •                                                                                             =>Message를 보내서 수신한 클라이언트가 업무처리를 하도록 만드는 Bean(분산시스템)
  • EJB,Servlet,jsp등의 기능 제공
  •          =>web에서 자바언어를 가지고 서비스하는 기능(web container가 필요/.war로 배포)
  •               동적인 HTML을 생성->개인화 서비스 기능(멱등성으로 다 같은 화면을 보여주는게 아니라)
  • //결합도는 낮고(약결합) 응집도는 높다=>좋은 소프트 웨어
  • Container에서 서비스 된다.
  • WAS : Web Application Server=>Java EE의 모든 Spec을 서비스 할 수 있는 프로그램.
              • =>EJB,Servlet/JSP
    • web logic (ex/BEA) , web sphere(IBM) , JBOSS , 제우스(TMAX) , OC4J , Resin...
  • //탐캣은 웹컨테이너라 부르지 와스라 부르지 않는다. 다름!(그러나 요즘은 같이 부르기도 한다고..)
  • web Container: Java EE 중 Servlet/jsp만 서비스 할 수 있는 프로그램. (Apache.Tomcat)
    • =>웹 브라우저의 요청을 받으면서(웹 서버의 기능) Servlet과 JSP가 요청되면  Servlet/JSP를 HTML로 변환하여 응답하는 프로그램.


*Servlet
  • CGI(Common Gateway Interface)일종 : 일반언어에서 웹 서비스가 가능하도록 공통 규약을 정의한 것.
    • 공통 규약: get은 어떻게 처리할지~그런거
    • C-CGI: c언어가 cgi를 준수?
    • Java의 CGI가 Servlet!
  • 느리다.(자바는 속도 개선 Fast CGI)  
  • HTML과 언어가 혼합되어 코드의 복잡도가 상승한다.
  • =>coder/디자이너  개발자    =>다른일을 하는 사람이 하나의 파일을 같이 만들어야 해 디자이너와 개발자의 업무구분이 안된다.
  • 개발기간이 늘어난다.(개발 속도가 느리다)
  • //개발자를 교육해 만들어내는 시간이 오래걸린다
  • 안정적이다(Thread로 처리되기때문에)-처음이나 마지막이나 페이지를 받아가는 속도가 비슷
  • 접속자가 많아도 안정적인 서비스 가능(대규모 시스템에서 주로 도입)
  • web Container 필요(Tomcat같은)
  • JavaEE에서 배포하는 Servlet.api.jar가 존재 해야한다.//있어야 개발 가능(Tomcat에 들어있다)
  • 장점: javaSE에서 제공하는 모든 클래스를 사용할 수 있다.
  • --apache-tomcat-8.5.37/lib/servlet-api.jar
  • 주 사용 package ; javay.servlet, javax.servlet.http 패키지를 주로 사용.


  • 작성법)
    • 1.HttpServlet 상속
    • (인터페이스)
      • GenericServlet : 서블릿 주기능, 생명주기처리
        • ↑
      • HttpServlet : 서블릿 주기능을 웹특화
        • ↑
      • MyServlet
    • public class Test extends HttpServlet{
    • 2.요청 방식에 따른 처리할 method override.
      • 요청방식 : get/post
      • Get 방식 : 주소창으로 데이터를 전달 (보안x , 255자까지의 소용량 데이터 전달)
        • <a href="">, location.href, <form method="get">, <meta>
      • protected void doGet(HttpServletRequest, HttpServletResponse) throws IOException, ServletException {
        • HttpServletRequest : 요청 처리(사람으로치면 귀)
        • HttpServletResponse : 응답 처리
        • //다 인터페이스,,,,,
        • //브라우저에서 주소를 치고들어가도 get...
      • //웹에서 중요한것 요청에대한 응답처리/관계유지(비연결성일때)/페이지이동(포워드/리다이렉션)
      • Post 방식 : 딱 하나..
      • <Form method="post">
      • protected void doPost(HttpServletRequest, HttpServletResponse) throws...{
    • 3. 응답 방식 설정(MIME.Type 설정) 멀티 인터넷 메인 익스텐션 : 접속한 사람한테 뭘 줘야 하지?하는것. 응답방식
      • //아까 이미지에서HTML을 생성할때 응답해줄 방식설정하는 것.//주로 HTML응답.
      • -접속자에게 제공할 서비스 형태 설정
      • response.setContentType("text/html");//이걸로 html이 생성됨
    • 4.응답하기위한 출력스트림얻기
      • PrintWriter out=response.getWriter();    //16bit?
      • //우리는 응답할때 한글이 필요해 16bit Stream을 얻는다.
    • 5.응답할 내용 생성
      • out.println("<html>.....,,");
    • }
    • //만들어졌다고 끝나는게 아니라 여기까지가 파일 만들기고 
  • 2. 배포 (Web Container)
    • 자바로 웹서비스를 하기 위한 폴더 구조
    • C:\Web(HDD의 일반 폴더)\a,b,c(JSP,HTML,CSS,JavaScript,images,,),WEB-INF\lib(사용할 library),web.xml(DD:Deployment Descriptor배치서술자),classes\package,,,-서블릿!!!(배포) //지금은 이렇게 되지않으면 작동되지 않는다.
  • 3.HDD의 일반 폴더를 웹서비스가 가능하도록 Web Container등록(Server.xml필요)
    • <Host>
      • <Context path="브라우저에서 호출할 경로" //만약 sist를 넣는다면 주소가 변경됨
      • docBase="실제 HDD의 경로">//C:\web같은 실제,,?
  • 4.제작되어 배포된 Servlet을 브라우저에서 호출할 수 있도록 DD에 등록(web-INF-web.xml을 말함)
    • <servlet>
      • <Servlet-name>객체명</servlet-name>
      • <Servlet-class>객체화할 서블릿 클래스</servlet-class>
    • </servlet>
    • <servlet-mapping>
      • <servlet-name>객체명</servlet-name>
      • <url-pattern>/서블릿을 브라우저에 호출할 이름</url-pattern>
    • </servlet-mapping>
  • 5.Web Container실행
    • (Tomcat인 경우에 카타이나홈?이 있어야 실행이 된다)

    •  apache-tomcat-8.5.37/bin/startup.bat실행

      (지금은 없다고 안뜸->자동으로 기본위치 잡음?)

  • 6.Web browser을 열고 url을 입력하여 서블릿 요청(Get방식)
    • http://localhost:8080/server.xml에 정의된 path/DD에 정의된 urlpattern
  • //이클립스를쓰면 2,3,4,5가 사라짐!!!따란
  • //3.0은 prj/WebContent/WEB-INF/web.xml을 가지는데 DD라고도 한다.
package day0225;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//1.HttpServlet상속
public class Hello extends HttpServlet {
     //2.요청방식을 처리할 수 있는 추상 method를 Override
     protected void doGet(HttpServletRequest request,  HttpServletResponse response) throws ServletException,  IOException {
           //3.응답방식 설정(MIME-TYPES):접속자에게 보내줄 형식  설정
          //response.setContentType("text/html");//885_1이기본이라..
          response.setContentType("text/html;charset=UTF-8");//885_1이기본이라..
           //4.(응답방식으로 생성될 파일에)접속자에게 보내줄  내용을 전달하기위해 Stream을 얻기.
           PrintWriter out=response.getWriter();
           //5.출력내용을 스트림에 기록
           out.println("<!DOCTYPE html>");
           out.println("<html>");
           out.println("<head>");
           out.println("<title>안녕?Servlet?</title>");
           out.println("</head>");
           out.println("<body>");
           out.println("<Strong>안녕 Servlet!!!</Strong>");
           out.println("난 김정윤이라고 해<br/>");
           out.println("2019년 02월 25일 입니다.");//한글은  나오지 않는다....
           
           out.println("</body>");
           out.println("</html>");
     }//doGet
}//class


 

 

반응형
저작자표시 비영리 변경금지

'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글

87일차-JavaEE_HttpServletRequest  (0) 2019.03.08
86일차-JavaEE_Servlet/Life cycle  (0) 2019.03.07
84일차-jQuery_태그의 값 설정/값 얻기  (0) 2019.03.05
83일차-jQuery_selector/Event Handling/DOM  (0) 2019.03.03
82일차-JavaScript_closure/class  (0) 2019.03.03

'국비지원학원/HTML,JavaScript,jQ'의 다른글

  • 현재글85일차-jQuery_effect/plugin+Servlet

관련글

티스토리툴바