JSTL (JSP Standard Tag Library)

http://jakarta.apache.org/site/downloads/downloads_taglibs-standard.cgi

1. 위 사이트에서 JSTL 을 다운 받습니다.

2. 압축을 풀고 lib 디렉토리 안의 jstl.jar 와 standard.jar 를 복사합니다.

3. Tomcat 의 디렉토리 내의 common\lib 안에 복사 해놓고 쓰면 됩니다.

<%@ taglib prefix="c" uri="java.sun.com/jsp/jstl/core" %> 와 같이 선언하면 됩니다.

기본적인 기능

<%@ taglib prefix="c" uri="java.sun.com/jsp/jstl/core" %>

XML 처리

<%@ taglib prefix="x" uri="java.sun.com/jsp/jstl/xml" %>

국제화와 형식화

<%@ taglib prefix="fmt" uri="java.sun.com/jsp/jstl/fmt" %>

 데이터베이스 작업

<%@ taglib prefix="sql" uri="java.sun.com/jsp/jstl/sql" %>

JSTL 설치

• 톰캣 설치기 설치 옵션에서 Examples를 선택하면 설치되는 예제 애플리케이션에 들어있음
• 위치 : webapps/jsp-examples/WEB-INF/lib/jstl.jsr
• 위의 파일을 WEB-INF/lib 디렉토리에 복사

스크립팅 없이 루핑 돌리기

<c:forEach>

1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
2. <c:forEach var="movie" items="${movieList}" varStatus="movieLoopCount" >

3. <tr>

4. <td>${movie} </td>

5. <td>${movieLoopCount.count}</td>

6. </tr>

7. </c:forEach>

var : 컬렉션에 있는 각각 항목을 나타내는 변수로, 한번 회전할 때마다 값이 바뀝니다.

items : 루핑을 돌 실제 데이터(배열, 컬렉션, 맵 또는 콤마 분리 문자열)

varStatus : 루핑 횟수 알기

*추가

JSTL 문법의 for문 사용법

#{status.current}   현재의 for문에 해당하는 번호

#{status.index} 0부터의 순서

#{status.count} 1부터의 순서

#{status.first}  현재 루프가 처음인지 확인

#{status.last}  현재 루프가 마지막인지 확인

#{status.begin} for문의 시작 값

#{status.end}   for문의 끝 값

#{status.step}  for문의 증가값

배열을 불러올때는 ${param.movieList} 가 아닌 ${paramValues.movieList}로 items에 저장해야 한다.

<c:forEach>안에 <c:forEach>품기

1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
2. <c:forEach var="listElement" items="${movies}" varStatus="movieLoopCount" >
3. <c:forEach var="movie" items="${listElement}">

4. <tr>

5. <td>${movie} </td>

6. <td>${movieLoopCount.count}</td>

7. </tr>

8. </c:forEach> 
9. </c:forEach>

속성 : begin, end, step

조건문

<c:if>

1. <c:if test="${userType eq 'member'}:>

2. <jsp:include page="inputComments.jsp" />

3. </c:if>

<c:choose>, <c:when>, <c:otherwise>

1.  <c:choose>

2. <c:when test="${userPref == 'preformance'}">

3. go 1

4. </c:when>

5. <c:when test="${userPref == 'preformance'}">

6. go 2

7. </c:when>

8. <c:otherwise>

9. go 3

10. </c:otherwise>

11. </c:choose>

 속성 입력

<c:set>

1. <c:set var="userLevel" scope="session" value="Cowboy" />
2. <c:set var="userLevel" value="${person.dog}" />
3. <c:set var="userLevel" scope="session">

4. Sheriff, Bartender, Cowgirl

5. </c:set>

1. var : session 생존범위에 "userLevel" 이란 이름의 속성이 없으면 <c:set> 태그는 하나를 새로 만듭니다.
2. scope : 옵션값
3. value : 꼭 문자열일 필요는 없습
4. 기타 : value가 널 인경우 변수는 제거됩니다.

빈과 맵에 <c:set> 태그 사용하기

 <c:set> 태그는 빈 프로퍼티와 맵 값 두 가지 경우에만 동작합니다.

리스트나 배열에 값을 추가하기 위해서 사용할 수 없슴

1. <c:set target="${petMap} property="dogName" value="Clover" />
2. // target은 널이어서는 안 됩니다.
3. // target이 맵인 경우 dogName은 키 이름이 됩니다 
4. // target이 빈인 경우 dogName은 프로퍼티 이름이 됩니다.
5. <c:set target="${person}" property="name" >
6. // target 속성에 id 이름을 기입하면 안됩니다.

7. ${foo.name}

8. // 몸체 안에는 문자열 또는 표현식이 들어갈 수 있습니다.

9. </c:set>

 target 속성에는 객체(Object)가 들어가야 합니다. 빈이나 맵의 "id" 이르을 쓰면 안됩니다.

scope 속성을 명기하지 않으면?

컨테이너는

1. page 
2. request 
3. session 
4. application(context) 

순으로 찾음, 못 찾을 경우 page 생존범위로 해서 하나를 새로 만듬

<c:remove> 로 속성 제거하기

1. <c:remove var="userStatus" scope="request" /> 
2. // var 속성에는 문자열을 넣어야함. 표현식을 넣으면 안됨

<c:import> 로 컨텐츠 포함

1. <c:import url="http://www.lazyartist.co.kr"/>

요청이 들어오는 시점에 url 속성에 명기한 파일을 현재 컨텐츠에 포함합니다.

<c:import>는 외부 자원도 포함할 수 있습니다.

<c:param> 으로 포함될 파일 동적 변화 시키기

1. <c:import url="header.jsp">

2. <c:param name="subTitle" value="we take the String" />

3. </c:import>

 포함될 파일에

1. ${param.subTitle} 

<c:url>로 url 재작성

1. <a href="<c:url value='/imputComments.jsp' />
2. // value에 들어있는 상대경로 뒤에 jsessionid를 추가합니다.(쿠키를 사용하지 못 하는 경우)

url 인코딩

1. <c:url value='/imputComments.jsp' var="inputURL" />

2. <c:param name="firstName" value="${first}" />

3. <c:param name="lastName" value="${last}" />

4. // param 태그를 사용합으로써 url인코딩까지 해준다.(공백에 +를 넣어줌)

5. </c:url>

6. <a href="${inputURL}">

오류 페이지 설정

오류 페이지에서만 쓸 수 있는 객체 : exception

1. <%@ page isErrorPage="true" %>
2. ${pageContext.exception}

오류 발생 후 오류 페이지로 이동하지 않고 자체 페이지에서 해결하기 : <c:catch>

1. <c:catch>

2. <% int x = 10/0; %>

3. // 에러가 발생하면 다음을 실행하지 않고 </c:catch>로 곧장 이동한다.

4. </c:catch>

exception을 속성으로 만들어 에러 메시지 읽기

1. <c:catch var="myException">

2. ...

3. </c:catch>
4. ${myException.message}
5. // 타입이 Throwable이니 message프로퍼티가 있음 

[jQuery] Events

alert("only once");                                    alert("only once");

});                                                                   $(this).unbind(event);

};

※ 바인드형 함수 _ 추가되는 요소에도 이벤트 적용할시

$(elements).on(events, selector, data, handler);        // jQuery 1.7+

$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+

$(elements).live(eventType, eventData, handler);  // jQuery 1.4+

● .on()     :   .on() 함수는 jQuery 객체 안의 현재 선택된 요소 집합과 이벤트 핸들러를 묶어 줍니다 (* 추가될 element의 이벤트 핸들러도 적용된다.)

// p 태그를 클릭하면 알림창이 나타납니다.

$("p").on("click", function(){ alert( $(this).text() ); });

// 이벤트 핸들러에 데이터를 전달하고, foo 값을 알림창으로 보여줍니다.

function myHandler(event) { alert(event.data.foo); }
$("p").on("click", {foo: "bar"}, myHandler)

폼의 submit를 막고 false를 인자로 하여 이벤트가 버블링되는 것을 차단합니다.

$("form").on("submit", false)

.preventDefault() 함수로 기본적인 액션을 취소시킵니다.

$("form").on("submit", function(event) {  event.preventDefault(); });

.stopPropagation()를 사용하여 폼 submit을 방해하지 않고 버블링에 의한 submit을 방지합니다..

$("form").on("submit", function(event) {   event.stopPropagation(); });

● .delegate()   : 선택된 element의 selector 에 이벤트 핸들러를 붙인다. (* 추가될 element의 이벤트 핸들러도 적용된다.)

    live() 함수 보완하여 만들어진 함수.

 $("body").delegate("p", "click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });  

 // 함수는 새로 추가된 p에도 자동적용됨. 새로 만들어진 애들 클릭해도 또 추가.

     (delegate('p'....)에서 p에 click 이벤트를 적용)

● .undelegate()   : 선택된 element의 이벤트 핸들러를 제거한다.

.undelegate() //모든이벤트 제거

$("body").undelegate("p","click");

jQuery [Manipulation]

[General Attribute]

● .attr( attributeName) : 선택된 element의 속성(attribute)의 값을 리턴한다.

● .attr( attributeName, value)  : 선택된 element의 속성(attribute)의 값을 설정한다.

● .attr( map) :    $( "#greatphoto" ).attr({
     alt: "Beijing Brush Seller",
     title: "photo by Kelly Clark"
     });
//<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" title="photo by Kelly Clark">

● .attr( attributename, function(index, attr))
: $("#greatPhoto").attr('title', function(){
 result this.alt + " - photo by kelly Clark"
   });
// <img id="greatphoto" src="brush-seller.jpg" alt="brush seller" title="brush seller - photo by Kelly Clark">

● .removeAttr()   : 선택된 element의 속성 (attribute)을 삭제한다.
- $(this).next().removeAttr("disabled");

● .val()  : 선택된 element의 value값을 리턴한다.
  var singleValues = $("#single").val();  //단일값
  var multipleValues = $("#multiple").val() || [] //복수값

● .val(value)  : 선택된 element의 value 값을 할당한다.

  $("#multiple").val(["multi1","multi2"]);

● .val( function(index, value)
 $("input:text.items").val(function(index,value){
  return value + " " + this.className;
 });
 

 [DOM Insertion, Inside]

● .append() :  선택된 element 의 content 맨 끝에 인자로 넘어온 내용을 추가한다.

// element를 추가
 $(".inner")append("<p>Test</p>");

//  $("h2")에 해당하는 요소를 붙이면서 원래의  $("h2") element 는 사라짐.(cut > paste)
 $(".container).append($("h2"));

● .appendTo(target) : 선택된 element를 target에 해당하는 Element의 content의 끝에 추가한다.
       (선택된 element가 기존에 존재하는 것이면 (cut > paste)형태)
// inner 클래스에 해당하는 Element의 content 마지막에 '<p>Test</p>'를 추가한다.
 $('<p>Test</p>').appendTo('inner');
//container 클래스에 해당하는 Element의 content 마지막에 H2요소에 해당하는 element 추가
 $('H2').appendTo($('.container'));

● .prepend()   : 선택된 element의 content 가장 앞에, 인자로 넘어온  내용을 추가한다. ( <!=>append)
//  .inner 앞에 <p>Test</p> 추가한다.
  $(".inner").prepend('<p>Test</p>);

● .prependTo(target)  : 선택된 element를 target에 해당하는 element의 content의 가장 앞에 추가한다 (<!=> appendTo)
// inner 클래스에 해당하는 Element의 content  가장 앞에 '<p>Test</p>'를 추가한다.
 $('<p>Test</p>').prependTo('inner');
//container 클래스에 해당하는 Element의 content  가장 앞에 H2요소에 해당하는 element 추가
 $('H2').prependTo($('.container'));
 

● .html()   :  선택된 Element의 html을 리턴한다.
 - $("div.demo-container').html();

● .html( htmlString) : 선택된 element의 content 내용을 변경한다.
● .html( function(index, oldhtml){})

● .text()   :  선택된 element의 contend중 (html 태그정보를 제외한 ) text에 해당하는 값만 리턴한다.
 - $('div.container').text()    (== "hello goodbye hello")

● .text( textString)  : 선택된 element의 content에 textString인자를 입력한다. 단 '<p>Test</p>' 와 같은
    태그가  존재하면 &lt;p&gt; Test &lt;/p&gt; (이스케이프 시퀀스)처럼 입력한다.

 
[DOM Insertion, OutSide]

● .after()   : 선택된 element의 같은 레벨(형제 노드)의 바로다음 element로 추가한다.
 .after( content)
 .after( function(index))
 예) $('.inner').after('<p>Test</p>');

● .before() : 선택된 element의 같은 레벨(형제 노드)의 바로이전 element로 추가한다.
     (*content가 selector라면 잘라붙이기가 된다.(move))
 
● .insertAfter()   : target에 해당하는 element의 같은 레벨(형제노드)의 바로 다음에 $(selector) 를 추가한다.(appendTo 와 유사)
 예) $('.<p>Test</p>).insertAfter('.inner');

● .insertBefore()   : target에 해당하는 element의 같은 레벨(형제노드)의 바로 이전에 $(selector) 를 추가한다.(prependTo 와 유사)
 예) $('.<p>Test</p>).insertAfter('.inner');

[DOM removal]

● .detach( [selector] ) : 선택된 요소를 제거한다.
(.remove()와 기능적으로 거의 동일하지만 선택된 요소의 이벤트 핸들러 정보등은 제거되지 않는다.(기억))

● .empty()  : 선택된 element 의 하위 Content를 삭제한다.
 예) 1. <div class="hello"> test </div>   
      2. $(".hello").empty(); 
   = 3. <div class="hello" />

● .remove()  : 선택된 element 를 삭제한다.
 $(".hello").remove(); // hello 클래스가 있는 element 삭제
 $("div").remove(".hello") // div요소에서 .hello 클래스가 있는 element를 삭제

[DOM Replacement]

● .repalceAll( target)   : target에 선택도니 element를 찾아 $() 형태로 바꾼다.
 (* replaceWith() 함수와 selector 냐 target 이냐의 차이만 있다.)
 예) $("<h2> New heading</h2>").replaceAll(".inner");  // .inner 클래스에 해당하는 element를 "<h2> New heading</h2>" 로 변경
 
● .repalceWith()   :  선택된 element를 newContent로 바꾼다.
   .replaceWith( function)
예)
 $(".second").replaceWith("<h2>New heading</h2>");

 <div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">and</div> -->  <h2>New heading</h2> 변경
  <div class="inner third">GoodBye</div>
 </div>

 
 [DOM Insertion, Around]

 ● .wrap()   : 선택된 element를 부모 element(wrappingElement)의 자식 element로 포함시킨다.

예)
 <div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
 </div>

$( ".inner" ).wrap( "<div class='new'> </div>" );

 <div class="container">
   <div class="new">
     <div class="inner">Hello</div>
   </div>
   <div class="new">
     <div class="inner">Goodbye</div>
   </div>
 </div>

예)
$( ".inner" ).wrap(function() {
  return "<div class='" + $( this ).text() + "'></div>";
});

 <div class="container">
   <div class="Hello">
     <div class="inner">Hello</div>
   </div>
   <div class="Goodbye">
     <div class="inner">Goodbye</div>
   </div>
 </div>

● unwrap()  : 선택된 element 의 부모 element를 제거한다.
예)
 var pTags = $( "p" );
 $( "button" ).click(function() {
           if ( pTags.parent().is( "div" ) ) {
      pTags.unwrap();
    } else {
      pTags.wrap( "<div></div>" ); 
    }
  });

● wrapAll()  : 선택된 element 모두를 하나의 부모  element
                     (wrappingElement)의 자식 element로 포함한다.
     
 <div class="container">
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
 </div>

 $( ".inner" ).wrapAll( "<div class='new' />");     

 <div class="container">
     <div class="new">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
     </div>
 </div>

● wrapInner()   :  선택된 element의 content가 인자로 넘어온 element의 content로 포함되고
                            그 element는 선택된 element의 자식 element로 포함.
       (자식될 요소의 인자를 부모될 요소에 넣어주고 가져온 인자를 자식에 넣어줌.)
예1)
 <div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
 </div>

 $( ".inner" ).wrapInner( "<div class='new'></div>");

 <div class="container">
   <div class="inner">
    <div class="new">Hello</div>
  </div>
    <div class="inner">
      <div class="new">Goodbye</div>
    </div>
 </div>

예2)
 $( ".inner" ).wrapInner(function() {
   return "<div class='" + this.nodeValue + "'></div>";
 });

 <div class="container">
   <div class="inner">
     <div class="Hello">Hello</div>
   </div>
   <div class="inner">
     <div class="Goodbye">Goodbye</div>
   </div>
 </div>

 [Copying]
● .clone()  : 선택된 요소 집합을 깊은 복사(deep copy:선택된 요소들의 모든 자식요소들과 텍스트 노드 포함)할 수 있는 기능을 합니다.
                   끼워넣기 위한 함수의 용도로 사용될 때, .clone() 함수는 페이지 상에 요소들을 복사하여 넣기에는 아주 편한 방법입니다

예)  appendTo 와 비교

 <div class="container">
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
 </div>

 $('.hello').appendTo('.goodbye');   // 와 같이 스크립트를 작성하면 DOM 구조는 아래와 같이 바뀝니다. (* Move)

 <div class="container">
   <div class="goodbye">
     Goodbye
     <div class="hello">Hello</div>
   </div>
 </div>

 $('.hello').clone().appendTo('.goodbye');   // 와 같이 스크립트를 작성하면 DOM 구조는 아래와 같이 바뀝니다. (*Copy)

 <div class="container">
   <div class="hello">Hello</div>
   <div class="goodbye">
     Goodbye
     <div class="hello">Hello</div>
   </div>
 </div>

 ● toggleClass()   :  element만 동일하게 복사하고  이벤트 핸들러는 복사안함.

 ● toggleClass(true) : 이벤트 핸들러가 연결된 element라면 이벤트 핸들로도 같이 복사.

jQuery [CSS]

[CLASS]
● .addClass( className )  : 선택된 element의 클래스 추가
- $("p").addClass('myClass yourClass');

● .addClass( function(index, class{ })   // (index : 0 부터  ,lass :  element 의 현재 설정되어있는 class명)

- $("ul li:last).addClass(function(){

return 'item' + $(this).index();

});

  
● removeClass([ className])  : 선택된 element의 className에 해당하는 class를 삭제.( 예> 단,복수 삭제 가능)
- $("p").removeClass('myClass noClass').addClass('yourClass');

● .removeClass(function(index,class))

- $("li:last").removeClass(function(){return $(this).prev().attr('class'); });

● .css( propertyName) :  선택된 element의 propertyName에 해당하는 css정보를 리턴한다.

● .css(propertyName, value) : 선택된 element의 propertyName에 css정보를 설정한다.
● .css(propertyName, function(index, value)) 
● .css(map) //map 형태로 입력함 {key:value}
- $("span").css({"width":"100px", "height":"50px"});  // 복수 설정

● .hasClass( className)  : 선택된 element의 class가 className에 할당되어있는지 확인.

( return value = true,false)

● .toggleClass( className) : 선택된 element의 className을 (className)에따라  설정/해제 한다.
   1.<div class="tumble"> someText..... </div>

   2.$("div.tumble").toggleClass("bounce"); - 호출

   3.<div class="tumble bounce"> someText..... </div>  -적용

   4.$("div.tumble").toggleClass("bounce"); - 해제

   5(1).<div class="tumble"> someText..... </div>

 ● .toggleClass( className, switch) : switch는 boolean 값으로 조건값이 true이면 토글형태로 동작한다. 

     $("#foo").toggleClass(className, addOrRemove);  ==  (예1)

     if(addOrRemove){    // (예1)

$("#foo").addClass(className);      

      } else {

$("#foo").removeClass(className);

}

● .toggleClass( function(index, class), [switch])

예)

$("div.foo").toggleClass(function(){

if($(this).parent().is("bar")){

return "happy";  

} else {

return "sad";

}

});

[WIDTH&HEIGHT]

● .width() : 선택된 첫번째 element의 가로 길이값을 가져온다.
● .height() : 선택된 첫번째 element의 세로 길이값을 가져온다.
 *.css('width') 와 . width() 차이점은 단위없이 리턴한다. (예:100px -> 100)

● .innerWidth()   :  선택된 첫번째 element의 border길이를 제외한 padding길이를 포함한 가로길이 값을 가져온다.
● .innerHeight()   :  선택된 첫번째 element의 border길이를 제외한 padding길이를 포함한 세로길이 값을 가져온다.
● .outerWidth()   :  선택된 첫번째 element의 padding,border,optionally margin길이를 포함한 가로길이값을 가져온다.
● .outerHeight()   :  선택된 첫번째 element의 padding,border,optionally margin길이를 포함한 세로길이값을 가져온다.

● .width( value)  :  선택된 element 의 가로 길이값을 설정한다. (100px, 50%, auto 처럼 단위를 설정하지 않는다.)
● .width( function(index, width))
● .height( value) :  선택된 element 의 세로 길이값을 설정한다. (100px, 50%, auto 처럼 단위를 설정하지 않는다.)
   .height( function(index, height))

[OFFSET]

● offset()  : document을 기준으로 선택된 첫번째 element의 현재 좌표(오프셋)를 리턴한다.
- $("selector").offset().left , $("selector").offset().top

● offset( coordinates)  :  선택된 element의 현재 좌표(오프셋)를 변경한다.
- $("p:last").offset({top: 10, left: 30});

● .offset(function(index,coords))

● position()  :  부모 element로 부터 현재 좌표.
- $("selector").position.left, - $("selector").position.top

● .scrollTop()  :  선택된 element의 스크롤바 수직위치를 리턴한다.
● .scrollTop( value)  : 선택된 element의 스크롤바 수직위치를 설정한다. (value=integer)

● .scrollLeft()  :  선택된 element의 스크롤바 수평위치를 리턴한다.
● .scrollLeft( value)  : 선택된 element의 스크롤바 수평위치를 설정한다. (value=integer)