[21.09.08] jQuery와 Servlet

---

jQuery

• 자바스크립트를 더쉽게 사용하기위한 목적으로 만들어진 라이브러리
• 확장성이 좋아 대중적으로 사용된다

jQuery 사용방법1

• 파일을 다운받아 경로로 불러오기
• 속도가 빠름
• 사용하지 않아도 공간을 차지함

jQuery 사용방법2

• http url 경로로 불러오기
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

기본문장

$('selector').action();

• $('selector') : HTML 요소를 찾음. CSS 선택자와 동일함
• CSS 선택자 : '태그', '#id'(아이디), '.class'(클래스)
• action() : 해당 HTML 요소에 행해질 기능

ready()

$(document).ready(function() {});
document가 전부 등록된 후에 실행되는 함수입니다

$(function() {});와 같은 문장이다.

click(), hide()

$('h2').click(function() {
   $(this).hide();
});

h2 태그를 click()하면 h2태그가 hide()된다.

EVENT

mouseover, mouseenter

마우스가 해당 영역 위에 올라와있을 때 발생하는 이벤트

요소의 속성값 바꾸기

attr('속성이름') : 속성의 값을 가져온다

$('#bulb').mouseover(function() {
    $(this).attr('src','변경src');     
});

요소에 마우스를 올리면 <img>태그의 src가 바뀐다.

mouseout, mouseleave

마우스가 해당 영역 밖으로 나갈 때 발생하는 이벤트

hover(handlerIn, handlerOut)

• handlerIn : 마우스가 해당 영역위에 올라가있을 때 처리할 이벤트 핸들러
• handlerOut : 마우스가 해당 영역밖에 나갔을 때 처리할 이벤트 핸들러

기능을 만들어놓고 여러번 사용할 수 있는 이벤트를 핸들러라고 합니다.

function handlerIn() {
   $('p').css('background-color', 'yellow');
}

function handlerOut() {
	$('p').css('background-color', 'green');
}

$('p').hover(handlerIn, handlerOut);

코드는 다르지만 mouseover-mouseout을 사용한 것과 hover를 사용한 매커니즘은 똑같아요.

focus, blur

• focus: 포커스를 받았을 때 발생하는 이벤트
• blur : 포커스를 잃었을 때 발생하는 이벤트

change

입력된 내용이 변경되었을 때 발생하는 이벤트

 $('#name').change(function name() {
	var data=$(this).val().toUpperCase();
	$(this).val(data);
});

• val() : value값 리턴하는 함수
  $('#name').val();는 document.getElementById('name').value;
  와 동일한 기능을 한다.

여러개의 event handler 등록

하나의 HTML 요소에 여러개의 event handler를 등록하는 방법

$('selector').on({
     event1 : function(){},
     event2 : function(){},
      ...          
});

text()

$(this).text();
요소 안에 있는 텍스트만 가져온다. ()안에 값을 넣으면 텍스트가 바뀝니다.

match()

if($(this).text().match('TEST')){ 
	$(this).text('수요일입니다.');
}else{
	$(this).text('TEST');
}

text 내용이 같은지 매칭하는 함수

html()

모든 html내용 태그까지 다 가져온다.

변수.innerHTML == $('selector').html();

(안에 텍스트를 html로 보낼수도 있어요)

CSS 바꾸기

스타일 하나만 바꿀 때

• $('selector').css('스타일 이름') : 스타일이름의 값 출력
• $('selector').css('스타일 이름', '값') : 해당 스타일의 값을 변경

여러개 바꿀 때

css({property1 : value1, property2 : value2, ...});

$('p').click(function() {
	$(this).css({
		font:'200$ serif',
		backgroundColor:'lightgreen',
		border:'1px solid grey',
		textAlign:'center'
	});
});

클래스 추가 및 제거

• addClass('클래스이름') : html 요소에 클래스 속성추가

$('#add-class').click(function() {
	$('#p1').addClass('important');
	$('#p2, #p3').addClass('blue');
});

• removeClass('클래스이름') : html 요소에 클래스 속성 제거
• toggleClass('클래스이름') : html 요소에 클래스 속성 추가/제거 토글

Each()

'컬렉션'.each(handler);

• each 반복문. for문과 비슷한 구조를 가지고 있음
• handler : 컬렉션의 모든 원소들에 대해서 적용할 기능이다

컬렉션은 같은 포함관계에 있는 같은 요소(ex.li) 여러개를 의미한다.

<ul>
  <li>Java</li>
  <li>Oracle DB</li>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>jQuery</li>
</ul>
<button type="button" id="btn">Toggle Style</button>
  
<script type="text/javascript">
	$(document).ready(function() {
        $('#btn').click(function() {
         $('li').each(function(index, element) {
                console.log('index:'+index+', element:'+element);
            });
        });
    });
</script>

each구문 안에서 element 대신 this를 사용할 수 있다

---

Servlet

• 자바를 이용하여 웹페이지를 동적으로 생성하는 server-side 프로그램이다.
• 웹서버의 성능을 향상하기 위해 사용되는 자바 클래스의 일종
• 서블릿은 자바코드안에 HTML을 포함한다
• JSP는 HTML문서안에 자바코드를 포함한다
• JSP는 최종적으로 서블릿 형태로 실행된다.

서블릿에서 자바에서 사용하는 기능을 전부 사용할 수 있다. HttpServlet을 상속받아 네트워크 연결을 하게 됨.

자바만으로는 디자인을 표현하기 어려워서 자바안에 html을 포함시킨 게 서블릿이며 JSP는 html이 근본이고 그안에 자바를 넣은 것이다.

서버경로 설정하는 방법

서버 사이드도 주소(경로)가 존재함.

1. Annotation 방식

Servlet 3.0버전 이후부터 적용됨.
@WebServlet(name="", urlPatterns={})
어떤 클래스나 메소드, 변수에 Annotation을 쓰면 특성이 변한다. urlPatterns에 여러개를 지정할수있음.

• loadOnStartup : 서버에 연결될 때 생성자와 init이 실행됨.
  기존에는 페이지가 열렸을 때 생성자와 init()이 실행됐는데 속성에 추가하면 페이지를 안불러왔는데도 생성자와 init()이 실행된다.
  서버는 보통 한번 켜지면 계속 켜져있기 때문에 서버가 시작할때 파일을 읽는게 속도가 더 빠르다.
  숫자가 작을수록 init()함수가 실행되는 순서가 빠르며 상황에 따라 사용하기도하고 안해도 된다.

2. 배포 관리자(deployment descriptor) 사용

<web.xml 생성 방법>

• 프로젝트 마우스 오른쪽 클릭 - Java EE Tools - Generate Deployment Descriptor Stub 클릭
• WEB-INF -> web.xml이 생성된다.

서블릿 실행

기존 java는 JVM이 먼저 main을 실행해서 프로그램을 돌렸음.
서블릿은 서버가 모든 java 파일들을 한번씩 읽어서 실행함.
먼저 시작되는 java파일을 지정할 순 있음. 실행에 우선순위를 두지않음.

서블릿 최초 실행시 생성자와 doGet()이 실행되고 객체는 이미 생성되었기 때문에 새로고침하면 doGet()만 실행된다.
메모리 때문에 불러오는 방식이 싱글톤방식이 적용되어 있다.

모든 java파일이 한번만 실행되고 그 다음부턴 현재 사용중인 파일만 서비스하게 된다.

지속적으로 프로그램이 돌아가야 할 때 시작부터 끝나기 직전까지 loop를 사용해야 한다.

서블릿의 life cycle이 있는데
init() -> service() -> destroy()로 구성되어있다.

• 시작할때 init(). 끝날 때 destroy(). 이 둘은 최초 한번만 실행됨.
• service()에는 doGet()과 doPost()가 있다.
• 서블릿은 모든 java파일을 한번만 실행해놓고 call이 올때까지 기다림(대기상태).
• 스레드 A,B,C가 있을 때 모든 스레드는 독립적으로 실행되며 각 스레드에 call이 오면 서비스 해준다.
• 웹은 request 1번<->response 1번이 1:1 상태로 주고받게 된다. 사용자에게 보여지는 페이지와 서버용 페이지가 1:1. 서버용 페이지는 DB와 퍼포먼스하게 된다. 앱이나 게임같은 경우 계속 소통이 필요해서 웹은 비교적 cycle이 단순하다.
• HttpServlet이 이런 네트워크를 컨트롤 해준다.

init()

서블릿이 실행될 때 한번만 호출됨.
일반적으로 데이터 초기화를 수행할 때 사용한다.

service()

외부에서 servlet으로 전송된 특정 HTTP
요청(GET, POST)을 처리하는 생명주기 메소드.
doGet()과 doPost()가 service()의 역할을 분담해서 담당한다.
서비스는 페이지에 접속한 뒤에 call이 되며 새로고침할때마다 호출된다.

@Override
protected void service(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException {
	super.service(arg0, arg1);
}

서블릿을 컨트롤하는 servlet Container가 있는데 java는 main에서 어떤 메소드를 호출해서 사용했다면 서블릿은 servlet Container가 메소드를 호출한다.

함수를 사용하는 것은 개발자가 관여하는게 아니라 Container가 상황에 따라 알아서 사용하는 것으로 service()의 매개변수에 개발자가 별도의 인자값을 넘길 순 없음.

보통은 doGet()과 doPost()만 존재하고 service()를 사용하진 않는다.

destroy()

servlet이 종료될 때 호출되는 생명주기 메소드.
보통 서버는 한번 실행되면 꺼지는 일이 없어서 자주 실행되진 않음.

---

서블릿 life cycle이 약간 확실하게 이해하지 못해서 이번주 스터디 주제로 정했다.. 어려워!