2011. 4. 4. 11:52

[javascript] 스크립트 압축 사이트

Language/javascript
자바스크립트 압축 모듈을 종합적으로 제공하고 있으며 압축률에 따라 개발자가 선택할 수 있도록 한다.


The JavaScript

 
2. 압축 선택

 
3. 선택 결과

 

Posted by CoolDragon
2011. 3. 11. 10:10

[javascript] 동적으로 div에 스크롤바 생성하기

Language/javascript
function fncShow(id, xy, type)
{
    var    obj    = document.getElementById(id);

  switch(xy)
  {
        case 'X' :
                obj.style.overflowX = type;
            break;
        case 'Y' :
                obj.style.overflowY = type;
            break;
    }
}

축에 따라 설정이 가능하며 overflow 속성은 visible | hidden | scroll | auto | inherit 등이 있다.
Posted by CoolDragon
2010. 9. 14. 18:55

[javascript] Client Side File Size 확인

Language/javascript
크로스브라우징 파일사이즈 체크 (IE, FF, 사파리, 크롬 사용가능)

function filesize() {

var size = 0;

var browser=navigator.appName;
if (browser=="Microsoft Internet Explorer")
{
var oas = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.getElementById('file').value;
var e = oas.getFile(filepath);
size = e.size;
}
else
{
var node = document.getElementById('file');
size = node.files[0].fileSize;
}
alert(size);
}
Posted by CoolDragon
2010. 7. 22. 01:17

[jquery] Events (이벤트)

Language/javascript
[Browser Events]
■ .error()
  선택된 개체(images, window, document 등)가 정확하게 로드(load)되지 않을 경우 발생하는 오류 이벤트
   - .bind('error', handler) 의 축약형

  .error( handler(eventObject) )  version 1.0
   (예) 
     1) <img src="missing.png" alt="Book" id="book" />
     2) $('#book').error(function() {  alert('Handler for .error() called.') }); // 이미지가 로드되지 않을 경우 오류 이벤트 발생
       
■ .resize()
  browser window의 사이즈가 변경될때 발생하는 이벤트
   - .bind('resize', handler) 의 축약형
   - .trigger('resize') 를 통하여 이벤트를 발생시킬 수 있다.

  .resize( handler(eventObject) ) version 1.0
   (예) $(window).resize(function() { $('#log').append('<div>Handler for .resize() called.</div>'); });

  .resize() version 1.0

■ .scroll()
  선택한 Element의 스크롤바가 움직일 경우 발생하는 이벤트
   - .bind('scroll', handler) 의 축약형
   - .trigger('scroll') 를 통하여 이벤트를 발생시킬 수 있다.

  .scroll( handler(eventObject) ) version 1.0
   (예) $('#target').scroll(function() { $('#log').append('<div>Handler for .scroll() called.</div>'); });


[Document  Loading]
■ .load()
  선택된 Element(URL : images, scripts, frames, iframes, 그리고 window object 등) 가 로드(load)가 완료되었을 때 발생하는 이벤트
   - .bind('load', handler) 의 축약형
   - "load" JavaScript event

  .load( handler(eventObject) ) version 1.0
    (예)
      1) <img src="book.png" alt="Book" id="book" />
      2) $('#book').load(function() { // Handler for .load() called. }); // 정상적으로 #book의 이미지가 로드되면 이벤트 발생
    (예) $('img.userIcon').load(function(){ if($(this).height() > 100) { $(this).addClass('bigImg'); } });
    (예) $(window).load(function () { // run code });

■ .ready()
  DOM이 준비된(완전히 로드된) 이후 발생하는 특별한 이벤트
   -  <body onload=""> 와 .ready() 는 양립할 수 없으며 둘중에 하나만 사용하도록 한다.
   -  또는 jQeury의 $(window).load() 함수에서 attach 해서 사용한다.

  .ready( handler ) version 1.0
   - $(document).ready(handler) == $().ready(handler) == $(handler) == $(document).bind("ready", handler)
   (예) $(document).ready(function() {
          // Handler for .ready() called.
        });
   
■ .unload()
  페이지가 unload될 때 발생하는 이벤트
   - "unload" 자바스크립트 이벤트
   - 이 이벤트는 브라우저별로 다르게 동작할 수 있다. (http://api.jquery.com/unload/ 참조)

  .unload( handler(eventObject) ) version 1.0
   (예) $(window).unload( function () { alert("Bye now!"); } );

[Event Handler Attachment]
■ .bind()
  선택된 element에 이벤트 핸들러를 붙인다.
   - blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, 
   - mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, 
   - change, select, submit, keydown, keypress, keyup, error

  .bind( eventType, [ eventData ], handler(eventObject) ) version 1.0
   (예) $('#foo').bind('click', function() { alert('User clicked on "foo."'); });
   (예) $('#foo').bind('mouseenter mouseleave', function() {  $(this).toggleClass('entered'); }); // 다중 이벤트
   (예) $("p").bind("click", function(event){ 
             var str = "( " + event.pageX + ", " + event.pageY + " )"; $("span").text("Click happened! " + str); 
        }); // 이벤트 핸들러에 event 인자 포함
   (예) $("p").bind("click", {foo: "bar"}, function(event){ alert(event.data.foo); }); // eventData 포함한 예제
   (예) 커스텀 이벤트(Bind custom events)

  .bind( events ) version 1.4
   (예)
      $("div.test").bind({
        click: function(){
          $(this).addClass("active");
        },
        mouseenter: function(){
          $(this).addClass("inside");
        },
        mouseleave: function(){
          $(this).removeClass("inside");
        }
      });

    (예) 참고 : http://api.jquery.com/bind/

■ .unbind()
  선택된 element의 선언된 이벤트 핸들러를 제거한다.

  .unbind( eventType, handler(eventObject) )
    (예) $('#foo').unbind();  // 선택된 element의 모든 이벤트 제거
    (예) $('#foo').unbind('click'); // click 이벤트를 제거
    (예) $('#foo').unbind('click', function() {  alert('The quick brown fox jumps over the lazy dog.'); }); // 이벤트를 제거하면서 함수동작

■ .delegate()
  선택된 Element의 selector의 이벤트 핸들러를 붙인다. (앞으로 추가될 element의 이벤트 핸들러도 적용된다.)
   - live()함수를 보완하여 만들어진 함수
   - http://honey83.cafe24.com/100

  .delegate( selector, eventType, handler ) version 1.4.2
   (예)
     $("table").delegate("td", "hover", function(){
       $(this).toggleClass("hover");
     });
   (예) $("body").delegate("a", "click", function() { return false; }) // 버블링 방지
   (예) $("body").delegate("a", "click", function(event){  event.preventDefault(); }); // 기본 동작을 취소
   
  .delegate( selector, eventType, eventData, handler ) version 1.4.2

   (예) 커스텀 이벤트 --> http://api.jquery.com/delegate/

■ .undelegate()
  선택된 Element의 이벤트 핸들러를 제거한다.
   - (예) http://api.jquery.com/undelegate/

  .undelegate() version 1.4.2
   - 모든 이벤트 제거
  .undelegate( selector, eventType ) version 1.4.2
   (예) $("body").undelegate("p", "click");
  .undelegate( selector, eventType, handler ) version 1.4.2
   (예) $("body").undelegate("p", "click", function(){ "Does nothing..." }); // 이벤트가 제거되면서 function()함수가 호출된다.

■ .live()
  선택된 element의 이벤트 핸들러를 바인드 한다.
   - bind()와의 차이점은 append()등의 함수로 추가된 요소들에도 이벤트가 적용된다.
   - 1.4.2버전 부터 live()함수를 보완한 delegate() 함수를 사용한다.
   -  eventType = click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
   
  .live( eventType, handler ) version 1.3
   (예) $("p").live("click", function(){ alert( $(this).text() ); });
   (예) $("a").live("click", function() { return false; }) // 버블링 방지
   (예) $("a").live("click", function(event){  event.preventDefault(); }); // 기본 동작을 취소

  .live( eventType, eventData, handler ) version 1.4
   (예) $("a").live("click", {foo: "bar"}, function(event){ alert(event.data.foo); });

■ .die()
  선택된 element의 이벤트 핸들러중 live()함수에 의해 바인드된 이벤트 핸들러를 제거한다.

  .die( eventType, [ handler ] ) version 1.4.1
   (예) $("p").die() // 모든 live 이벤트의 바인드를 제거한다.
   (예) $("#theone").die("click"); // live 이벤트의 click 바인드를 제거한다.
   (예) $("#theone").die("click", function(){ ... }); // die()함수가 호출되면서 function()함수가 호출된다.

■ .one()
   bind() 함수처럼 선택된 element에 이벤트 핸들러를 붙인다. 하지만 딱 한번의 이벤트를 발생시킨다.
    - 즉 bind() 함수의 이벤트 핸들러 내부에서 unbind()한다.

  .one( eventType, [ eventData ], handler(eventObject) ) version 1.1
   (예) $('#foo').one('click', function() { alert('This will be displayed only once.'); });
        == $('#foo').bind('click', function(event) { alert('This will be displayed only once.'); $(this).unbind(event); });

■ .jQeury.proxy()
  컨텍스트의 이벤트 핸들러를 리턴한다.
   (예) http://api.jquery.com/jQuery.proxy/

■ .trigger()
  선택된 element의 이벤트를 발생시킨다.

  .trigger( eventType, extraParameters ) version 1.0
   (예)
    $('#foo').bind('click', function() {
      alert($(this).text());
    });
    $('#foo').trigger('click');  

   (예) custom event 트리거
    $('#foo').bind('custom', function(event, param1, param2) {
      alert(param1 + "\n" + param2);
    });
    $('#foo').trigger('custom', ['Custom', 'Event']);

   (예)
    var event = jQuery.Event("logged");
    event.user = "foo";
    event.pass = "bar";
    $("body").trigger(event);

   (예) http://api.jquery.com/trigger/

■ .triggerHandler()
  trigger()함수와 비슷하게 동작한다.
   - 예외
      1) form submission에는 동작하지 않는다.
      2) 선택된 Element중 가장 첫번째 element만 영향을 미친다.
      3) 브라우저의 기본동작(default actions), bubbling, live events는 일어나지 않습니다. 단순히 handler 메서드를 호출만 합니다.
         http://api.jquery.com/triggerHandler/ 의 예제 참고

   
  .triggerHandler( eventType, extraParameters ) version 1.2

[Event Object]
  이벤트 핸들러(function(event)) 의 파라메터로 사용된다.
   - var e = jQuery.Event("click");

   멤버
    - event.currentTarget
    - event.data
    - event.isDefaultPrevented()
    - event.isImmediatePropagationStopped()
    - event.isPropagationStopped()
    - event.pageX
    - event.pageY
    - event.preventDefault()
    - event.relatedTarget
    - event.result
    - event.stopImmediatePropagation()
    - event.stopPropagation()
    - event.target
    - event.timeStamp
    - event.type
    - event.which

    (예) http://api.jquery.com/category/events/event-object/

[Form Events]
■ .focus()
  자바스크립트의 focus 이벤트
   - form 컨트롤의 포커스가 생겼을때 발생되는 이벤트

  .focus( handler(eventObject) )
   (예) $(select).focus(function( alert('focused'); ));

  .focus()
   -  trigger('focus')와 같은 기능을 제공

■ .blur()
  자바스크립트의 blur 이벤트 
   - form 컨트롤의 포커스를 잃어버림, focus이벤트의 반대기능

  .blur( handler(eventObject) ) version 1.0
   - .bind('blur', handler) 와 동일
   (예) $('#target').blur(function() { alert('Handler for .blur() called.'); });

  .blur() version 1.0
   -  trigger('blur')와 같은 기능을 제공

■ .change()
  자바스크립트의 change 이벤트 
   -선택박스, 텍스트박스, 체크박스, 라디오버튼 등의 입력값, 선택값 변경 이벤트

  .change( handler(eventObject) ) version 1.0
   -  .bind('change', handler) 와 동일
   (예) $('#target').blur(function() { alert('Handler for .change() called.'); });

  .change() version 1.0
   -  trigger('change')와 같은 기능을 제공

■ .select()
  자바스크립트의 select 이벤트 
   - <input type="text">와 <textarea> 에만 사용된다.
   - 텍스트가 선택될 때 발생되는 이벤트

  .select( handler(eventObject) ) version 1.0
   -  .bind('select', handler) 와 동일
   (예) $('#target').select(function() { alert('Handler for .select() called.'); });

  .select() version 1.0
   -  trigger('select')와 같은 기능을 제공

■ .submit()
  자바스크립트의 submit 이벤트 
   - <form> 요소에만 사용된다.
   - <input type="submit">, <input type="image">, or <button type="submit"> 에서 submit하는 기능

  .submit( handler(eventObject) ) version 1.0
   -  .bind('submit', handler) 와 동일
   (예) $('#target').submit(function() { return true; });

  .submit() version 1.0
   -  $('#target').submit(); == $('#target').trigger('submit')와 같은 기능을 제공

[Keyboard Events]
■ .focusin()
  자바스크립트의 focusin 이벤트 
   - .bind('focusin', handler). 와 동일
   - 선택된 element 또는 그 자식 element에 포커스가 생겼을때 발생되는 이벤트

  .focusin( handler(eventObject) ) version 1.4
   (예) $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });

■ .focusout()
  자바스크립트의 focusout 이벤트
   - .bind('focusout', handler). 와 동일하고 .focusin()와 반대기능
   - 선택된 element 또는 그 자식 element에 포커스를 잃었을때 발생되는 이벤트

  .focusout( handler(eventObject) ) version 1.4
   (예) http://api.jquery.com/focusout/

■ .keydown()
  자바스크립트의 keydown 이벤트
   - .bind('keydown', handler). 와 동일
   - 선택된 element가 포커스되어 있고 키보드를 누르고 있을때 발생되는 이벤트

  .keydown( handler(eventObject) ) version 1.0
   (예) http://api.jquery.com/keydown/
   (예) $('#target').keydown(function(event) { alert('Handler for .keydown() called.'); });

■ .keyup()
  자바스크립트의 keyup 이벤트
   - .bind('keyup', handler). 와 동일
   - 선택된 element가 포커스되어 있고 키보드를 누른 키보드를 띌 때 발생되는 이벤트

  .keyup( handler(eventObject) ) version 1.0
   (예) http://api.jquery.com/keyup/
   (예) $('#target').keyup(function(event) { alert('Handler for .keyup() called.'); });

■ .keypress()
  자바스크립트의 keypress 이벤트
   - .bind('keypress', handler). 와 동일
   - 선택된 element가 포커스되어 있고 키보드를 눌렀을때 발생되는 이벤트
   - 실제 키보드가 눌렸을때 발생되는 이벤트 순서 : keydown or keypress > keyup

  .keypress( handler(eventObject) ) version 1.0
   (예) http://api.jquery.com/keypress/
   (예) $('#target').keydown(function(event) { alert('Handler for .keydown() called.'); });

KeyDown, KeyPress, KeyUp Event 차이
 - http://mytory.textcube.com/495, http://hurrah.springnote.com/pages/1099088, http://winflahed.tistory.com/72

[Mouse Events]
■ .click()
  선택된 element를 클릭했을때 발생하는 이벤트

  .click( handler(eventObject) ) version 1.0
    (예) $('#target').click(function() { alert('Handler for .click() called.'); });

  .click() version 1.0
   - $('#target').click(); == $('#target').trigger('click');

■ .dblclick()
  선택된 element를 더블 클릭했을때 발생하는 이벤트

  .dblclick( handler(eventObject) ) version 1.0
    (예) $("p").dblclick( function () { alert("Hello World!"); });

  .dblclick() version 1.0
   - $('#target').click(); == $('#target').trigger('click');

■ .focusin()
  자바스크립트의 focusin 이벤트 
   - .bind('focusin', handler). 와 동일
   - 선택된 element 또는 그 자식 element에 포커스가 생겼을때 발생되는 이벤트

  .focusin( handler(eventObject) ) version 1.4
   (예) $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });

■ .focusout()
  자바스크립트의 focusout 이벤트
   - .bind('focusout', handler). 와 동일하고 .focusin()와 반대기능
   - 선택된 element 또는 그 자식 element에 포커스를 잃었을때 발생되는 이벤트

  .focusout( handler(eventObject) ) version 1.4
   (예) http://api.jquery.com/focusout/

■ .hover()
  선택된 element에 마우스가 올라갔을때와 밖으로 나왔을때에 발생되는 이벤트
   - hover()를 unbind()할 경우 = $(obj).unbind('mouseenter mouseleave');

  .hover( handlerIn(eventObject), handlerOut(eventObject) ) version 1.0
    (예)
         $("li").hover(
           function () {
             $(this).append($("<span> ***</span>"));
           }, 
           function () {
             $(this).find("span:last").remove();
           }
         );

■ .mouseover()
  자바스크립트의 mouseover 이벤트
   - 선택된 element에 마우스가 포인터가 올려졌을때 발생되는 이벤트
   - .bind('mouseover', handler) 와 동일,
   - 버블링관련 문제가 존재한다. 버블링을 피하려면 .mouseenter() 함수를 사용    (http://api.jquery.com/mouseover/)

  .mouseover( handler(eventObject) ) version 1.0
    (예)
       $("div.overout").mouseover(function() {
         i += 1;
         $(this).find("span").text( "mouse over x " + i );
       }).mouseout(function(){
         $(this).find("span").text("mouse out ");
       });

  .mouseover() version 1.0

■ .mouseout()
  자바스크립트의 mouseout 이벤트
   - 선택된 element에 마우스가 포인터가 빠져나왔을때 발생되는 이벤트
   - .bind('mouseout', handler) 와 동일,
   - 버블링관련 문제가 존재한다. 버블링을 피하려면 .mouseleave() 함수를 사용   (http://api.jquery.com/mouseover/)

  .mouseout( handler(eventObject) ) version 1.0
    (예)
       $("div.overout").mouseover(function() {
         i += 1;
         $(this).find("span").text( "mouse over x " + i );
       }).mouseout(function(){
         $(this).find("span").text("mouse out ");
       });

  .mouseout() version 1.0

■ .mouseenter()
  선택된 element에 마우스가 포인터가 올려졌을때 발생되는 이벤트
   - IE에서만 제공되는 mouseenter 자바스크립트 이벤트를 다른브라우저의 호환성을 위해 만들어짐
   - .bind('mouseenter', handler) 와 동일,
   - 비슷한 함수 = .mouseover() , 차이점 : 버블링의 발생여부

  .mouseout( handler(eventObject) ) version 1.0
    (예)
      $("div.enterleave").mouseenter(function(){
        $("p:first",this).text("mouse enter");
        $("p:last",this).text(++n);
      }).mouseleave(function(){
        $("p:first",this).text("mouse leave");
      });

  .mouseout() version 1.0

■ .mouseleave()
  선택된 element에 마우스가 포인터가 빠져나왔을때 발생되는 이벤트
   - IE에서만 제공되는 mouseleave 자바스크립트 이벤트를 다른브라우저의 호환성을 위해 만들어짐
   - .bind('mouseleave', handler) 와 동일,
   - 비슷한 함수 = .mouseout() , 차이점 : 버블링의 발생여부

  .mouseout( handler(eventObject) ) version 1.0
    (예) .mouseenter() 함수 예제 참고

  .mouseout() version 1.0

■ .mousemove()
  선택된 element에 마우스가 포인터가 움직일때 발생되는 이벤트
   - .bind('mousemove', handler) 와 동일,

  .mousemove( handler(eventObject) ) version 1.0
    (예) $("div").mousemove(function(e){ alert(e.pageX + " / " + e.pageY);  } );

  .mousemove() version 1.0

■ .mousedown()
  선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누를때 발생되는 이벤트
   - .bind('mousemove', handler) 와 동일,

  .mousedown( handler(eventObject) ) version 1.0
    (예) 
      $("p").mouseup(function(){
        $(this).append('<span style="color:#F00;">Mouse up.</span>');
      }).mousedown(function(){
        $(this).append('<span style="color:#00F;">Mouse down.</span>');
      });

  .mousedown() version 1.0

■ .mouseup()
  선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누른상태에서 띌 때 발생되는 이벤트
   - .bind('mouseup', handler) 와 동일,

  .mouseup( handler(eventObject) ) version 1.0
    (예) .mousedown() 함수 예제 참고

  .mousedown() version 1.0

■ .toggle()
  선택된 element에 마우스가 포인터가 올려져있고 마우스 버튼을 누른상태에서 띌 때 발생되는 이벤트

  .toggle( handlerA(eventObject), handlerB(eventObject), [ handlerC(eventObject) ] ) version 1.0
   - handlerA(eventObject) : 짝수번째 클릭시 이벤트
   - handlerB(eventObject) : 홀수번째 클릭시 이벤트
   - handlerC(eventObject) : 추가 핸들러로 클릭 후에 A,B 이벤트핸들러가 발생된 이후  발생되는 이벤트
   (예)
     $('#target').toggle(function() {
       alert('First handler for .toggle() called.');
     }, function() {
       alert('Second handler for .toggle() called.');
     });

  .toggle( [ duration ], [ callback ] ) version 1.0
   (예) http://api.jquery.com/toggle/ 참고

Posted by CoolDragon
2010. 6. 28. 19:57

[jquery] Manipulation (조작)

Language/javascript
[Class Attribute]
■ .addClass()
  => 선택된 element에 css 클래스를 추가
   
  .addClass( className ) version 1.0
   (예) $('p').addClass('myClass yourClass');

  .addClass( function(index, class) ) version 1.4
   - index 번째(0번부터), class : element의 현재 설정되어있는 class명
   (예) $('ul li:last').addClass(function() { return 'item-' + $(this).index(); });

■ .hasClass()
   => 선택된 element의 class가 className 할당 되어있는지 유무를 확인 (return value= true / false)

  .hasClass( className ) version 1.2
   (예) $('#mydiv').hasClass('bar')

■ .removeClass()
  => 선택된 element에 css 클래스를 제거

  .removeClass( [ className ] ) version 1.0
   (예) $('p').removeClass('myClass noClass').addClass('yourClass');

  .removeClass( function(index, class) ) version 1.4
   - index 번째(0번부터), class : 이전 클래스명
   (예) $('li:last').removeClass(function() { return $(this).prev().attr('class'); });

■ .toggleClass()
  => 선택된 Element의 css 클래스를 반복적으로 설정된 css 클래스를 설정/해제한다.

  .toggleClass( className ) version 1.0
   (예) 
     1) <div class="tumble">Some text.</div> 
     2) $('div.tumble').toggleClass('bounce'); 호출
     3) <div class="tumble bounce">Some text.</div> // // bounce가 적용
     4) $('div.tumble').toggleClass('bounce'); 호출
     1) <div class="tumble">Some text.</div> // bounce가 해제
   

  .toggleClass( className, switch ) version 1.3
   - [switch]는 boolean값으로 조건값 true이면 토글형태로 동작한다.
   (예) $('#foo').toggleClass(className, addOrRemove);
        == 
        if (addOrRemove) {
 $('#foo').addClass(className);
        }
else {
 $('#foo').removeClass(className);
}

  .toggleClass( function(index, class), [ switch ] ) version 1.4
   (예)
     $('div.foo').toggleClass(function() {
       if ($(this).parent().is('.bar')) {
        return 'happy';
       } else {
        return 'sad';
       }
     });


[Copying]
■ .clone( [ withDataAndEvents ] )
   선택된 element의 element정보를 동일하게 복사

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

   .toggleClass(true)
    - 만약에 click 등의 이벤트 핸들러가 연결된 Element라면 이벤트 핸들러도 같이 복사


[DOM Insertion, Around]
■ .wrap()
   선택된 element를 부모 element(wrappingElement)의 자식 element로 포함시킨다.

   .wrap( wrappingElement ) version 1.0
    (예) 
       1) <div class="container">
            <div class="inner">Hello</div>
            <div class="inner">Goodbye</div>
          </div>
       2) $('.inner').wrap('<div class="new" />'); 호출
       3) <div class="container">
            <div class="new">
              <div class="inner">Hello</div>
            </div>
            <div class="new">
              <div class="inner">Goodbye</div>
            </div>
          </div>

    (예) $("p").wrap(document.createElement("div"));

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

■ .unwrap()
   선택된 element의 부모 element를 제거한다.

   .unwrap() version 1.4
    (예) $("p").unwrap();
    (예) http://api.jquery.com/unwrap/

■ .wrapAll( )
   선택된 element 모두를 하나의 부모element(wrappingElement)의 자식 element로 포함한다.

   .wrapAll( wrappingElement ) version 1.2
    (예) 
      1) <div class="container">
           <div class="inner">Hello</div>
           <div class="inner">Goodbye</div>
         </div>
      2) $('.inner').wrapAll('<div class="new" />'); 호출
      3) <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로 포함

   - .wrapInner( wrappingElement ) version 1.2
    (예) 
      1) <div class="container">
           <div class="inner">Hello</div>
           <div class="inner">Goodbye</div>
         </div>
      2) $('.inner').wrapInner('<div class="new" />'); 호출
      3) <div class="container">
           <div class="inner">
             <div class="new">Hello</div>
           </div>
           <div class="inner">
             <div class="new">Goodbye</div>
           </div>
         </div>

   - .wrapInner( wrappingFunction ) version 1.4
    (예) 
      1) <div class="container">
           <div class="inner">Hello</div>
           <div class="inner">Goodbye</div>
         </div>
      2) $('.inner').wrapInner(function() { return '<div class="' + this.nodeValue + '" />'; }); 호출
      3) <div class="container">
           <div class="inner">
             <div class="Hello">Hello</div>
           </div>
           <div class="inner">
             <div class="Goodbye">Goodbye</div>
           </div>
         </div>

[DOM Insertion, Inside]
■ .append()
   선택된 Element의 Content의 맨끝에 인자로넘어온 내용을 추가한다.

   .append( content ) version 1.0
    (예) $('.inner').append('<p>Test</p>'); // element를 추가
    (예2) $('.container').append($('h2')); // $('h2')에 해당하는 요소를 추가하면서 원래의 h2 Element는 사라진다.(즉, 잘라내기->붙이기)

   .append( function(index, html) ) version 1.4
    - index : 0번째 부터 시작, html : 선택된 Element의 이전 Content
    (예) $('.inner').append(function(index, html) { return '(' + index + ')'; }); // element를 추가

■ .appendTo()
   선택된 element를 target에 해당하는 Element의 Content의 끝에 추가한다.(선택된 element가 기존에 존재하는 것이면 잘라내기->붙이기 형태가 된다.)

   .appendTo( target ) version 1.0
    (예) $('<p>Test</p>').appendTo('.inner'); // inner 클래스에 해당하는 Element의 content 마지막에 '<p>Test</p>'를 추가한다.
    (예2) $('h2').appendTo($('.container')); // container 클래스에 해당하는 Element의 content 마지막에 h2요소에 해당하는 Element를 추가하고 원래의 h2 Element는 사라진다.(즉, 잘라내기->붙이기)

■ .html()
   [getter]
     선택된 Element의 html을 리턴한다.

     .html() version 1.0
      (예) $('div.demo-container').html();

   [setter]
     선택된 Element의 Content 내용을 변경한다.
     .html( htmlString ) version 1.0
     .html( function(index, oldhtml) {} ) version 1.4

■ .prepend()
   선택된 Element의 Content의 가장 앞에 인자로넘어온 내용을 추가한다.

   .prepend( content ) version 1.0
    (예) $('.inner').prepend('<p>Test</p>'); // .inner css 클래스에 해당하는 element의 content 가장 앞에 '<p>Test</p>'를 추가한다.

   .prepend( function(index, html) ) version 1.4


■ .prependTo()
   선택된 element를 target에 해당하는 Element의 Content의 가장 앞에 추가한다.(.appendTo()와 반대)

   .prependTo( target ) version 1.0
    (예) $('<p>Test</p>').prependTo('.inner'); // inner 클래스에 해당하는 Element의 content 가장 앞에 '<p>Test</p>'를 추가한다.
    (예2) $('h2').prependTo($('.container')); // container 클래스에 해당하는 Element의 content 가장 앞에 h2요소에 해당하는 Element를 추가하고 원래의 h2 Element는 사라진다.(즉, 잘라내기->붙이기)

■ .text()
   [getter]
     선택된 element의 content중 (html 태그정보를 제외한) text에 해당하는 값만 리턴한다.
     .text() version 1.0
      (예) 
        1) <div class="demo-container">
             <div class="demo-box">Demonstration Box</div>
             <ul>
               <li>list item 1</li>
               <li>list <strong>item</strong> 2</li>
             </ul>
           </div>
2) $('div.demo-container').text() == "Demonstration Box list item 1 list item 2"

   [setter]
     선택된 element의 content에 textString인자를 입력한다. 단 '<p>TEST</p>'와 같은 태그가 존재하면 &lt;p&gt;TEST&lt;/p&gt; 처럼 입력된다.
     .text( textString ) version 1.0
     .text( function(index, text) {} ) version 1.4

[DOM Insertion, Outside]

■ .after()
   선택된 element의 같은 레벨(형제노드)의 바로 다음 Element로 추가한다.

   .after( content ) version 1.0
   .after( function(index) ) version 1.4
    (예) $('.inner').after('<p>Test</p>');

■ .before()
   선택된 element의 같은 레벨(형제노드)의 바로 이전 Element로 추가한다.(contnent가 selector라면 잘라붙이기가 된다.)
   
   .before( content ) version 1.0
    (예) $('.inner').before('<p>Test</p>');

   .before( function(index) ) version 1.4

■ .insertAfter()
   - target 에 해당하는 element의 같은 레벨(형제노드)의 바로 다음에 $(selector)를 추가한다. (.appendTo()와 비슷)
   - .insertAfter( target ) version 1.0
   - (예) $('<p>Test</p>').insertAfter('.inner');

■ .insertBefore()
   - target 에 해당하는 element의 같은 레벨(형제노드)의 바로 이전에 $(selector)를 추가한다. (.prependTo()와 비슷)
   - .insertBefore( target ) version 1.0
   - (예) $('<p>Test</p>').insertBefore('.inner');


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

   .detach( [ selector ] ) version 1.4
    (예) http://api.jquery.com/detach/

■ .empty()
   선택된 element의 하위 Content를 삭제한다.

    (예) <div class="hello">test</div> --> $('.hello').empty(); --> <div class="hello"/>

■ .remove()
   선택된 element를 삭제한다.

   .remove( [ selector ] ) version 1.0
     - 인자로 selector가 들어갈 경우 선택된 요소의 또다른 조건이라고 생각하면 된다.
     (예) $('.hello').remove(); // .hello 클래스가 있는 element를 삭제
     (예) $('div').remove('.hello'); // div 요소에서 .hello 클래스가 있는 element를 삭제


[DOM Replacement]

■ .replaceAll( target )
   target에 선택된 element를 찾아 $() 형태로 바꾼다. (.replaceWith() 함수와 selecor이냐 target이냐의 차이만 있다.)
   
   .replaceAll( target ) version 1.2
    (예) $('<h2>New heading</h2>').replaceAll('.inner'); // .inner 클래스에 해당하는 element를 '<h2>New heading</h2>' 으로 바꾼다.

■ .replaceWith()
   선택된 element를 newContent로 바꾼다.
   
   .replaceWith( newContent ) version 1.2
    (예)
      1) <div class="container">
           <div class="inner first">Hello</div>
           <div class="inner second">And</div>
           <div class="inner third">Goodbye</div>
         </div>
      2) $('.second').replaceWith('<h2>New heading</h2>'); 호출
      3) <div class="container">
           <div class="inner first">Hello</div>
           <h2>New heading</h2>
           <div class="inner third">Goodbye</div>
         </div>

   .replaceWith( function ) version 1.4


[General Attributes]

■ .attr()
   [getter]
    선택된 element의 속성(attribute)의 값을 리턴한다.
    .attr( attributeName ) version 1.0    

   [setter]
     선택된 element의 속성(attribute)의 값(value)을 설정한다.

     .attr( attributeName, value ) version 1.0

     .attr( map ) version 1.0
      (예) $('#greatphoto').attr( {alt: 'Beijing Brush Seller', title: 'photo by Kelly Clark'} ); // 인자를 json형태로

     .attr( attributeName, function(index, attr) ) version 1.1
      (예) $('#greatphoto').attr('title', function() { return this.alt + ' - photo by Kelly Clark' } );

■ .removeAttr()
   선택된 element의 속성(attribute)을 삭제한다.
   .removeAttr( attributeName ) version 1.0
    (예) $(this).next().removeAttr("disabled");

■ .val()
   [getter]
    선택된 element의 value값을 리턴한다.
    
    .val() version 1.0
    form element(input, select 태그등)에서 사용된다.
     (예)
         function displayVals() {
  var singleValues = $("#single").val(); // 단일값
  var multipleValues = $("#multiple").val() || []; // 복수값
  $("p").html("<b>Single:</b> " + singleValues + " <b>Multiple:</b> " +  multipleValues.join(", "));
}


   [setter]
   - 선택된 element의 value값을 할당한다.
   - .val( value ) version 1.0
   - (예) $("#multiple").val(["Multiple2", "Multiple3"]);

   - .val( function(index, value) ) version 1.4
   - (예) $('input:text.items').val(function(index, value) { return value + ' ' + this.className; } );

[Style Properties]
 jQuery CSS에서 참조
Posted by CoolDragon
2010. 6. 28. 15:27

[jquery] css

Language/javascript
-------------------------------------------------------------------------

■ .addClass()
  선택된 element의 클래스를 추가

  .addClass( className )
   - version 1.0

  .addClass( function(index, class) {} )  
   - version 1.4
   - index 번째(0번부터), class : element의 현재 설정되어있는 class명

■ .css()
  [getter]
  .css( propertyName )
   - version 1.0
   - 선택된 element의 propertyName에 해당하는 설정된 css정보를 리턴한다. (get)

  [setter]
  .css( propertyName, value )
   - version 1.0
   - 선택된 element의 propertyName에 해당하는 설정된 css정보를 
설정한다. 
   - (예) $("span").css("background-color","yellow"); //단일 설정

  .css( propertyName, function(index, value) )
   - version 1.4
   - index 번째(0번부터), value : propertyName에 해당하는 설정된 css정보

  .css( map )
   - version 1.0
   - map형태로 입력함 {key:value}
   - (예) $("span").css({"width":"100px","height":"100px"}); // 복수 설정

■ .hasClass()
  .hasClass( className )
   - version 1.2
   - 선택된 element의 class가 className 할당 되어있는지 유무를 확인한다.
   - true / false

■ .removeClass()
  .removeClass( [ className ] )
   - version 1.0
   - 선택된 element의 className에 해당하는 class를 삭제한다. (단일, 복수 삭제가능)
   - (예) $('p').removeClass('myClass noClass').addClass('yourClass');

  .removeClass( function(index, class) )
   - version 1.4
   - index 번째(0번부터), class : 이전 클래스명
  
■ .toggleClass()
  .toggleClass( className )
   - version 1.0
   - 선택된 Element의 className을 설정유무에 따라 반복적으로 class를 설정/해제한다.

  .toggleClass( className, switch )
   - version 1.3
   - [switch]는 boolean값으로 조건값 true이면 토글형태로 동작한다.

  .toggleClass( function(index, class), [ switch ] )
   - version 1.4

■ .width()
  [getter]
  .width()
   - version 1.0
   - 선택된 첫번째 element의 가로 길이값을 가져온다.
   - .css('width') 과 .width()의 차이점은 단위없이 리턴한다.
   - 예를들어 400px 에서 px이 없음

  [setter]
  .width( value )
   - version 1.0
   - 선택된 element의 가로 길이값을 설정한다.
   - 100px, 50%, or auto 처럼 단위를 설정하지 않는다.

  .width( function(index, width) )
   - version 1.4.1
   - 선택된 element의 가로 길이값을 설정한다.
   - index 번째(0번부터), width : 이전 width 값

■ .innerWidth()
  [getter]
  .width()
   - version 1.2.6
   - 선택된 첫번째 element의 border길이를 
제외한 padding길이를 포함한 가로 길이값을 가져온다.

■ .outerWidth()
  [getter]
  .outerWidth()
   - version 1.2.6
   - 선택된 첫번째 element의 padding, border, and optionally margin 길이를 포함한 가로 길이값을 가져온다.
   - (예) $(selector).outerWidth() , $(selector).outerWidth(true)

■ .height()
  [getter]
  .height()
   - version 1.0
   - 선택된 첫번째 element의 세로 길이값을 가져온다.
   - .css('height') 과 .height()의 차이점은 단위없이 리턴한다.
   - 예를들어 400px 에서 px이 없음

  [setter]
  .height( value )
   - version 1.0
   - 선택된 element의 세로값을 설정한다.
   - 100px, 50%, or auto 처럼 단위를 설정하지 않는다.

  .height( function(index, height) )
   - version 1.4.1
   - 선택된 element의 세로값을 설정한다.
   - index 번째(0번부터), height : 이전 height 값

■ .innerHeight()
  [getter]
  .width()
   - version 1.2.6
   - 선택된 첫번째 element의 border길이를 제외한 padding길이를 포함한 세로 길이값을 가져온다.

■ .outerHeight()
  .outerHeight()
   - version 1.2.6
   - 선택된 첫번째 element의 padding, border, and optionally margin 길이를 포함한 세로 길이값을 가져온다.
   - (예) $(selector).outerHeight() , $(selector).outerHeight(true)

■ .offset()
  [getter]
  .offset()
   - version 1.2
   - 현재 문서(document)로부터 선택된 첫번째 Element의 현재 좌표(오프셋)를 리턴한다.
   - (예) $(selector).offset().left, $(selector).offset().top

  [setter]
  .offset( coordinates )
   - version 1.4
   - 선택된 Element의 현재 좌표(오프셋)를 변경한다.
   - (예) $("p:last").offset({ top: 10, left: 30 });

  .offset( function(index, coords) )
   - version 1.4
   - index 번째(0번부터), coords : 이전 좌표값

■ .position()
  [getter]
  .position()
   - version 1.4
   - 부모 Element로 부터의 현재 좌표
   - (예) $(selector).position.left, $(selector).position.top

■ .scrollTop()
  [getter]
  .scrollTop()
   - version 1.2.6
   - 선택된 첫번째 Element의 스크롤바 수직 위치를 리턴한다.

  [setter]
  .scrollTop(value)
   - version 1.2.6
   - 선택된 Element의 스크롤바 수직 위치를 설정한다.
   - value = integer

■ .scrollLeft()
  [getter]
  .scrollLeft()
   - version 1.2.6
   - 선택된 첫번째 Element의 스크롤바 수평 위치를 리턴한다.

  [setter]
  .scrollLeft(value)
   - version 1.2.6
   - 선택된 Element의 스크롤바 수평 위치를 설정한다.
   - value = integer

Posted by CoolDragon
2010. 6. 25. 19:17

[jquery] Selector (선택자)

Language/javascript
[jquery core]
jQuery( selector, [ context ] )
 - $("input:radio", document.forms[0]);
 - $("div", xml.responseXML);
 - $('span', this) == $(this).find('span')

jQuery( element )
 - $("div")

jQuery( elementArray )
 - $("div > p")

jQuery( html, [ ownerDocument ] )
 - $("<div/>", {
                 "class": "test",
                 text: "Click me!",
                 click: function(){
                     $(this).toggleClass("test");
                 }
}).appendTo("body");


jQuery( callback )
 - jQuery(function() {} ); == jQuery(function($) { });

jQuery.noConflict(); :많은 자바스크립트 라이브러리가 $ 변수명을 사용한다. 
                     jQeury에서 $가 alias로 사용되기 때문에 jQuery.noConflict(); 구문은 jQuery에서 $를 사용하지 않겠다는 의미이다.
                     noConflict()를 호출하고서 $를 사용하는 방법
       jQuery.noConflict();
                        (function($) { 
                            $(function() {
                                // more code using $ as alias to jQuery
                             });
                         })(jQuery);


[Basic]
jQuery('*') : 모든 Element를 선택, 즉 전체를 선택
 (예) jquery("*").css("border", "1px");

jQuery('.class') : css 클래스명이 같은 Element를 선택
 (예) <div class="item"/> -> jquery(".item").css("height", "100px");
 (예) jquery(".item .color").css("height", "100px"); //css 클래스를 복수개로 설정하면 해당하는 element가 선택됨

jQuery('element') : element명과 같은 Element를 선택
 (예) ("div") 처럼 태그명을 직접 넣을 수 있다.

jQuery('#id') : html 태그의 id가 같은 Element를 선택 (id는 한개만 존재하므로 한개만 선택됨)
 (예) <div id="myDiv">id="myDiv"</div> -> jquery("#myDiv").css("border","3px solid red");<

jQuery('selector1, selector2, selectorN') : 다중 셀렉터 (예) $("div,span,p.myClass")

[Basic Filter]
jQuery(':animated') : 애니메이션되고있는 Element를 선택
 (예) http://api.jquery.com/animated-selector/

jQuery(':eq(index)') : index번째의 Element를 선택, Zero-based index
 (예) jQuery('div:eq(2)') 라고 할 경우 3번째  div요소를 의미한다.

jQuery(':gt(index)') : index 번째 Element보다 큰 모든 Element를 선택, Zero-based index
 (예) jQuery('div:gt(2)') 라고 할 경우 2보다 큰 div요소이므로 3번째부터 선택된 div요소 모두를 의미한다.

jQuery(':lt(index)') : index 보다 작은 Element를 선택, Zero-based index
 (예) jQuery('div:lt(2)') 라고 할 경우 2보다 작 div요소이므로 1,2번째 div요소를 의미한다.

jQuery(':even') : index 짝수번째 Element를 선택, (index의0, 2, 4...), zero-indexed
 
jQuery(':odd') : index 홀수번째 Element를 선택, (index의 1, 3, 5...), zero-indexed  
 (예) $("tr:odd").css("background-color", "#bbbbff");

jQuery(':not(selector)') : 해당 selector가 아닌 Element를 선택
 (예) $("input:not(:checked)").css("background-color", "yellow");

jQuery(':header') : h1, h2, h3과 같은 Element를 선택

jQuery(':first') : 첫번째 Element를 선택
 (예) jQuery('div:first') == $("div:eq(0)") == $("div:lt(1)")

jQuery(':last') : 선택한 Element중 마지막 Element를 선택

[Child Filter]
jQuery(':first-child') :  부모 Element의 첫번째 자식 Element를 선택
 (예) jQuery(':first-child') == jQuery(':nth-child(1)')
 (예) jQeury("tr td:first-child") => tr이 복수개일 경우 그중 자식요소 중에 td의 첫번째 요소들이 선택된다.

jQuery(':last-child') : 부모 Element의 자식 Element중 마지막 Element를 선택
 (예) jQeury("tr td:last-child") => tr이 복수개일 경우 그중 자식요소 중에 td의 마지막 요소들이 선택된다.

jQuery(':nth-child(index/even/odd/equation)') : 부모 Element의 자식 index번째의 Element, index는 1부터 시작 
 (예) $("ul li:nth-child(2)") // ul 요소의 2번째 li요소들을 선택
 (예) $("ul li:even") // ul 요소의 짝수번째 li요소들을 선택
 (예) $("ul li:odd") // ul 요소의 홀수번째 li요소들을 선택
 (예) $("ul li::nth-child(3n)) // 3*0, 3*1, 3*2, ... 번째 요소들을 선택

jQuery(':only-child') : 부모Element의 자식Element가 딱 한개만 존재하는 Element
 (예) 
  <div>
    <button>Sibling!</button>
    <button>Sibling!</button>
  </div>

  <div>
    <button>Sibling!</button>
  </div>

  // 위의 첫번째 div는 button 자식요소가 2개이므로 선택에서 제외되고 아래 button이 한개인 button만 선택된다.
  $("div button:only-child").text("Alone").css("border", "2px blue solid"); 

[Filter]
jQuery(':contains(text)') : text를 포함한 Element를 선택
 (예) $("div:contains('John')") -> <div>~~~~ John~~~</div> 처럼 자식 Content에 John을 포함한 요소들이 선택된다.

jQuery(':empty') : <td></td>, <span/> 처럼 content가 없는 Element를 선택, 반대는 :parent
 (예) $("td:empty").text("Was empty!")

jQuery(':has(selector)') : selector에 해당하는 요소를 자식요소로 포함하는 Element를 선택
 (예) $("div:has(p)") -> <div><p>Hello in a paragraph</p></div>
 
jQuery(':parent') : 텍스트를 포함하고 있고 선택한 부모 Element 
 (예) <tr><td>abcd</td><td></td></tr> // $("td:parent").fadeTo(1500, 0.3); // 이럴 경우 abcd만 선택한다.

[Attribute]
jQuery('[attribute|=value]') : value와 같거나 value + 하이픈(-) 으로 시작하는 Element
jQuery('[attribute*=value]') : % + value + %
jQuery('[attribute$=value]') : % + value
jQuery('[attribute^=value]') : value + %
jQuery('[attribute~=value]') : value와 단어가 같은 Element
jQuery('[attribute=value]')  : value와 같은 Element
jQuery('[attribute!=value]') : value와 다른 Element
jQuery('[attribute]') : 해당 attribute가 존재하는 Element (예) $("div[id]")
jQuery('[attributeFilter1][attributeFilter2][attributeFilterN]') : 다중 속성 셀렉터 (예) $("input[id][name$='man']")

[Form]
jQuery(':button') : <input type="button"/> 또는 <button />
jQuery(':checkbox') : <input type="checkbox"/>, jQuery(':checkbox') == $('[type=checkbox]'), $(':checkbox') == $('*:checkbox'), 보통 $('input:checkbox') 형태
jQuery(':checked') : 체크박스에 체크된 Element
jQuery(':selected') : 콤보박스에 선택된 Element
jQuery(':disabled') : <input name="email" disabled="disabled" />
jQuery(':enabled') : 활성화되어있는 Element (jQuery(':disabled') 과 반대 )
jQuery(':file') : <input type="file"/> $(':file') == $('*:file'), 보통  $('input:file') 형태
jQuery(':image') : <input type="image" />
jQuery(':input') : <input />, <textarea />, <select />, <button />
jQuery(':password') : <input type="password" /> , $(':password') == $('[type=password]'), $(':password') == $('*:password'), 보통 $('input:password') 형태
jQuery(':radio') : <input type="radio" />, $(':radio') == $('[type=radio]'), $(':radio') == $('*:radio'), 보통 $('input:radio') 형태 (예) $('input[name=gender]:radio')
jQuery(':reset') : <input type="reset" /> (예) $("input:reset")
jQuery(':selected') : <option selected="selected">....</option> (예) $("select option:selected")
jQuery(':submit') : <input type="submit" />, <button type="submit">Button type="submit"</button> 또는 <button/>,  단 <button/>은 브라우저마다 type="submit"은 기본이 아닐 수 있다.
jQuery(':text') : <input type="text" />, $(':text') == $('[type=text]'), $(':text') == $('*:text'), 보통 $('input:text') 형태


[Hierarchy]
jQuery('parent > child') : parent(부모)의 child(자식) Element를 선택
 (예) $("div > span") -> <div><span>test</span></div>

jQuery('ancestor descendant') : ancestor 하위의 모든 descendant에 해당하는 Element를 선택
 (예) $("form input") // form 태그 하위의 input 태그 모두를 선택

jQuery('prev + next') : prev Element 다음에 나오는 형제 Element를 선택
 (예) $("label + input").css("color", "blue").val("Labeled!")

jQuery('prev ~ siblings') : prev Element 다음에 나오는 모든 형제 Element를 선택
 (예) $("#prev ~ div").css("border", "3px groove blue");

[Visibility Filter]
jQuery(':hidden')
  (1) display:none; 인 것 // visibility:hidden or opacity: 0 은 보이는 것으로 간주
  (2) type="hidden" 인 것 
  (3) width:0; height:0; 인 것 
  (4) 부모 Element가 hidden 인 것 

jQuery(':visible') : jQuery(':hidden')의 정반대 
  (1) display:none; 가 아닌 것 // visibility:hidden or opacity: 0 은 보이는 것으로 간주
  (2) type="hidden" 가 아닌 것 
  (3) width:0; height:0; 가 아닌 것 
  (4) 부모 Element가 hidden이 아닌 것 
 

Posted by CoolDragon
2010. 6. 23. 11:57

[javascript] ajax 정복

Language/javascript

--------------------------------------------------------------------------------------------------------------------------------

  • Part 1: Ajax 소개


    • Ajax 애플리케이션에 관한 서론 및 이 애플리케이션에 필요한 몇 가지 기본개념들을 설명합니다. 


  • Part 2: JavaScript와 Ajax를 이용한 비동기식 요청


    • XMLHttpRequest 객체에 대해 구체적으로 소개합니다. 이 객체는 서버측 애플리케이션이나 스크립트에 대한 요청을 핸들하고, 서버측 컴포넌트에서 리턴 데이터를 처리하는 Ajax 애플리케이션의 핵심 입니다. 모든 Ajax 애플리케이션은 XMLHttpRequest 객체를 사용하기 때문에 Ajax 애플리케이션의 작동은 여기에 얼마나 익숙해지냐에 달려있습니다. 


  • Part 3: Ajax의 고급 요청 및 응답


    • 지난 글에서 다루었던 기초를 넘어서 요청 객체의 세 가지 핵심 부분들-HTTP 준비 상태,HTTP 상태 코드, 요청 유형들-에 대해 자세히 설명합니다. 애플리케이션에 무언가 문제가 있을 때 준비 상태, HEAD 요청을 하는 방법, 또는 400 상태 코드가 의미하는 것이 무엇인지를 이해하면 간단한 디버깅으로 끝낼 수 있기 때문입니다. 


  • Part 4: 웹 응답에 DOM 활용하기


    • 웹 페이지를 정의하는 문서 객체 모델(Document Object Model)을 소개합니다. 


  • Part 5 : DOM 다루기


    • 이번 글에서는 돔을 보다 자세히 연구합니다. 웹 페이지에 대한 특정 모델은 그 페이지의DOM 트리라고 하는데, 이러한 돔 트리의 부분들을 생성, 제거, 변경하는 방법을 설명하고 그 다음 단계인 웹 페이지를 업데이트 하는 방법을 설명합니다. 여러분은 DOM을 통해서 사용자 인터페이스를 변경할 수 있고 인터랙팅 할 수 있습니다. 이것은 실로 엄청난 프로그래밍의 힘과 유연성을 제공해 주는데, 일단 DOM 트리로 작업하는 방법을 배우면 풍부하고 동적인 인터랙티브 웹 사이트를 마스터하는 단계로 넘어갈 수 있다. 


  • Part 6 : DOM 기반 웹 애플리케이션 구현하기


    • Document Object Model (DOM)와 JavaScript 코드를 결합하여 인터랙티브 Ajax 애플리케이션을 구현해봅니다. 여러분이 배운 모든 것을 실제로 적용하여, 간단한 웹 페이지를 구현해 봅니다. 웹 페이지의 모든 효과들은 JavaScript를 사용하여 구현됩니다. 


  • Part 7: 요청과 응답에 XML 사용하기


    • 평범한 Ajax 개발자들도 Ajax 단어에 있는 x가 XML.을 의미한다는 것 정도는 알고 있습니다. XML은 가장 인기 있는 데이터 포맷들 중 하나이고, 실제로, 비동기식 애플리케이션에서 서버 응답에 효력을 발휘합니다. 이 글에서, 서버가 XML로 된 응답을 보내는 방법을 설명합니다. 


  • Part 8: 요청과 응답에 XML 사용하기


    • 지난 시리즈에서는, Ajax 애플리케이션인 서버로 가는 요청을 XML로 포맷팅 하는 방법을 설명했습니다. 그리고 대부분의 경우, 이것이 좋은 방법이 아닌지를 설명했습니다. 이번에는, 좋은 방법을 소개합니다. XML 응답을 클라이언트로 리턴하는 방법을 설명합니다. 


  • Part 9 : Google Ajax Search API 사용하기


    • 비동기식 호출은 서버 측 프로그램과의 통신에 대한 것만은 아닙니다. Google 또는 Amazon 같은 퍼블릭 API와 통신할 수 있고, 여러분이 갖고 있는 스크립트와 서버 측 프로그램이 제공하는 것 이상의 기능을 웹 애플리케이션에 추가할 수 있습니다. 이 글에서, Brett McLaughlin은 Google 같은 퍼블릭 API를 통해 요청을 하고 응답을 받는 방법을 설명합니다. 


  • Part 10: 데이터 전송에 JSON 사용하기


    • 비동기식 애플리케이션은 궁극적으로 데이터에 관한 것입니다. 데이터를 전송하거나 수신하기 위해 XML이나 플레인 텍스트 대신, JSON을 사용하는 방법, 시기, 이유를 설명합니다. 


  • Part 11: 서버 측의 JSON


    • 지난 기술자료에서는 JavaScript의 객체를 JSON으로 변환하는 방법을 배웠습니다. 이 포맷은 객체들 또는 객체 어레이들로 매핑하는 데이터를 보내는데(받는데) 사용할 수 있습니다. 본 시리즈 마지막 기술자료에서는, JSON 포맷으로 서버에 보내진 데이터를 핸들하는 방법과, 같은 포맷을 사용하여 스크립트에 응답하는 방법을 설명합니다. 
Posted by CoolDragon
2010. 5. 19. 18:29

[javascript] 화면색상, 해상도

Language/javascript
구글 analytics에서 화면색상과 해상도를 통계로 내주는 것이 있길레 검색해 보았더니..
아래 코드로 해결이 가능하다.

<script type="text/javascript">
  document.write(window.screen.colorDepth);   // 화면색상 bit 율
  document.write(window.screen.width);          // 해상도 가로
  document.write(window.screen.heigh);         // 해상도 세로
</script>

Posted by CoolDragon
2009. 11. 2. 10:26

[ASP.NET] 비하인드코드로 자바스크립트 추가하기..

Language/ASP & ASP.NET
ASP.NET에서 동적으로 자바스크립트를 추가하기는 어렵지 않다.




[비하인드 코드]

        protected void Page_Load(object sender, EventArgs e)
        {
            // <form> 태그 뒤에 include되는 자바스크립트 파일 포함
            ClientScript.RegisterClientScriptInclude(typeof(Page), "script", "http://localhost/test.js");
            // <form> 태그 뒤에 자바스크립트 포함
            ClientScript.RegisterClientScriptBlock(typeof(Page), "script1", "<script>test('test1');</script>");
            // </form> 태그 앞에 자바스크립트 포함
            ClientScript.RegisterStartupScript(typeof(Page), "script2", "<script>test('test2');</script>");
        }


[소스보기 코드]
...
<form name="form1" method="post" action="WebForm2.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZL22/OKqbu9X9AK4DAtdxYHrs6Rj" />
</div>
<script src="http://localhost/test.js" type="text/javascript"></script>
<script>test('test1');</script>
    <div>
    .......
    </div>
   
<script>test('test2');</script>
</form>
.....


단.. 유념해야할 사항은 여는 form태그에 뒤에 생성되냐 닫는 form 태그 앞에 생성되냐에
따라 정상적으로 실행되는 자바스크립트가 있을수도 있지만 html이 생성되지 않은 컨트롤에
접근하는 코드가 존재하면 오류가 발생할 수도 있다.
Posted by CoolDragon

티스토리툴바