태그 보관물: Javascript

Front-End Development

jQuery Event(click, bind, unbind, live, die, delegate, undelegate)

댓글 남기기

바인딩 data전송 관련 이슈 때문에 관련 자료를 찾던 중
http://m.mkexdev.net/블로그에 이해 하기 쉽게 정리해 주셔서 담아와 봤습니다 ^-^

기본 이벤트 처리
click, mousedown과 같은 일반적인 이벤트 이름을 그대로 사용하여 이벤트 처리기를 연결할 수 있다.

.이벤트명(이벤트처리기 함수)
선택자로 선택된 element에 이벤트명(ex:click, mousedown 등)을 지정해 특정 이벤트 발생시 이벤트처리기 함수가 실행되도록 한다
다음은 이 방식을 이용해 click, hover 두 이벤트를 처리하는 코드다.

$(function(){                
   $(‘div’).click(function(event){
      alert(event.target.innerText);  
   });
   $(‘div’).hover(function(event){
      alert(event.type);  
   });
});


bind() 함수를 이용한 이벤트 처리
jQuery가 이벤트를 일관적으로 처리하기 위해 만든 최최의 함수로 bind()함수를 이용해 이벤트를 처리할 수 있다. 앞서 소개한 ‘기본 이벤트 처리’는  이것의 단축 표현이다.

.bind(‘이벤트명’, 이벤트처리기 함수)
bind()함수는 문자열로 지정한 이벤트 명과 이벤트 처리기 함수를 매개변수로 받아 이벤트를 처리한다.
이전 코드의 click 이벤트를 bind() 함수를 이용해 다음과 같이 구현할 수 있다

$(function(){                
   $(‘div’).bind(‘click’ ,function(event){
      alert(event.target.innerText);  
   });      
});


여러 이벤트를 동시에 등록
bind()함수를 이용하면 동일한 요소에 여러개의 이벤트를 한번에 연결할 수 있다. 아래와 같이 처리할 이벤트를 이어서 지정하면 된다. event.type으로 어떤 이벤트가 발생했는지 알 수 있을 것이다.

$(function(){                
   $(‘div’).bind(‘click mouseenter’ ,function(event){
      alert(event.type);  
   });      
});

이렇게 하나 이상의 이벤트를 처리할 때 각각의 이벤트 처리 함수를 구분하고 싶을 경우가 있다. 이 경우 event.target 정보를 바탕으로 처리기 함수를 구분할 수 있지만 아래 코드와 같이 객체 형태로 정의할 수도 있다.(이 방식은 jQuery 1.4 이상부터 지원한다)

$(function(){                
   $(‘div’).bind(
     {
         click: function(evnet){ alert(event.type); }
     },
     {
         mouseenter: function(evnet){ alert(event.type); }
     }          
   });      
});


이벤트 매개변수 사용
이벤트 처리기 함수에 매개변수를 전달하고 싶은 경우 bind() 함수의 두 번째 매개변수에 지정할 수 있다. 다음 코드는 bind()함수의 두 번째 매개변수에 자바스크립트 객체형태로 매개변수를 전달하는 예이다.

$(function(){
$(‘div’).bind(‘click’, {key1:’value1′, key2:’value2′} ,function(event){
alert(event.data.key1 + ‘/’ + event.data.key2);
});
});

여기서 한가지 짚고 넘어가야 할 것은, 위 예제는 이벤트를 등록하는 시점에 매개변수를 전달한다는 것이다.
즉 이벤트 바인딩 시점에 이미 데이터가 정의되어이 있어야 하고 전달가능해야 한다는 점이다. 그러나 대부분의 실제 환경에서는 이벤트 바인딩 시점이 아닌, 바인딩 이후 프로그램 동작 가운데 매개변수 정보가 생성된다는 점이다. 이처럼 동적인 매개변수를 처리하기 위해서는 이벤트를 스스로 발생시키는 trigger() 함수를 이용해 동적인 데이터를 매개변수로 전달할 수 있게 된다. 이때 bind() 함수에 매개변수를 받는 부분이 추가되어야 한다.

$(function(){                
  $(‘div’).bind(‘click’ ,function(event, data1, data2){
      alert(data1 + ‘/’ + data2);  
  });   
     
  //이벤트 바인딩 이후 trigger()함수로 이벤트 자동 발생시키기
  $(‘div’).trigger(‘click’,[‘value1′,’value2’]);         
});


이벤트 제거
등록된 이벤트를 제거하려면 다음과 같이 unbind() 함수를 이용할 수 있다.

$(‘div’).unbind();

만일 <div> 요소의 특정 이벤트만 제거하고 싶을 경우 그 이벤트명을 지정해 주면 된다.

$(‘div’).unbind(‘click’);


live() 함수를 이용한 이벤트 처리
bind() 함수 이후에 새로 추가된 live() 함수(1.3 버전 이후 추가)를 이용하면 응용프로그램 실행 도중 동적으로 추가된 요소에도 자동으로 이벤트를 바인딩 할 수 있다. 사용방법은 bind() 함수와 유사하다

.live(‘이벤트명’, 이벤트처리기 함수)
아래 코드를 보면, HTML 영역에서 총 두개의 <li> element를 미리 정의해 두고, 이들에게 클릭 이벤트가 실행되도록 live() 함수로 이벤트를 등록했다. 이후 ‘아이템추가’ 버튼을 클릭해서 새로운 아이템(<li>)을 추가할 수 있게 한다. 이때 동적으로 새로 추가된 <li> element 도 live() 함수로 등록한 클릭 이벤트가 반영된다.
만일 live()가 아니라 bind() 함수로 이벤트를 등록했다면 새로 추가된 <li> element는 클릭 이벤트가 발생하지 않을 것이다(새로 추가된 <li> 에 수동으로 bind() 해 줘야 한다)

이처럼 live() 함수를 이용한 이벤트 처리는 비동기 통신으로 페이지 갱신 없이 element가 추가되는 시나리오에 유용하게 사용할 수 있다.

– Html
<ul id=”list”>
<li>Item1</li>
<li>Item2</li>
</ul>
<button id=”btnAdd”>아이템추가</button>– Script//모든 <li> element에 click 이벤트 등록
$(function(){
$(‘li’).live(‘click’ ,function(event){
alert(event.target.innerText);
});
//’아이템추가’버튼에 클릭 이벤트 등록
$(‘#btnAdd’).bind(‘click’ ,function(event){
$(‘#list’).append(‘<li>new Item</li>’);
});
});

live()로 등록한 이벤트는 die() 함수로 제거할 수 있다

$(‘li’).die();


delegate() 함수를 이용한 이벤트 처리
jQuery 1.4.2 버전 부터는 새로운 이벤트 처리 함수인 delegate()가 추가되었다. live()의 동적 이벤트 바인딩도 지원하며 기존 live() 에서 제한 되었던 몇 가지 단점을 보완하고 성능이 더 개선된 함수라고 한다. 자세한 사항은 jQuery API 문서를 참고하기 바라며 다음과 같이 사용할 수 있다. 아래 코드는 앞의 live()로 구현된 것을 delegate()로 바꾼 것이다.

.delegate(‘선택자’, ‘이벤트명’, 이벤트처리기 함수)

$(function(){
$(‘ul’).delegate(‘li’,’click’ ,function(event){
alert(event.target.innerText);
});

delegate()로 등록한 이벤트는 undelegate() 함수로 제거할 수 있다.

$(‘ul’).undelegate(‘li’);


참고자료>
http://api.jquery.com/bind/
http://api.jquery.com/live/
http://api.jquery.com/delegate/

Front-End Development

Javascript Context와 this

댓글 남기기

javascript의 Context와 this 동영상
모든 함수(메서드)는 자신의 Context를 가진다.
Context는 그 함수와 바인딩(binding)되어 있는 객체이다.
함수에서 자신의 Context는 this 키워드로 접근할 수 있다.

<!-- 1. Context인 a태그의 name속성을 출력한다. -->
<button onclick="alert(this.name)" name="자체출력">자체 출력</button>

<!-- 2. this의 Context는 DOM Window이기 때문에 빈값이 출력 -->
<button onclick="thisFunc();" name="함수호출">함수 호출</button>

<!-- 3. 함수로 this를 전달해 name출력한다. -->
<button onclick="thisFunc2(this);" name="함수호출">함수 호출</button>

 

var obj = {
  property1: 'property1',
  property2: function() {
    alert(this.property1);
  }
};

var newObj = {
  property1: 'new Property1'
};

// obj.property2(); //결과값: property1, 이때 Context는 obj
// call과 apply메서드를 사용해서 context를 선택하여 호출할 수 있다.
// obj.property2.call(newObj); //결과값: new Property1, 이때 Context는 newObj
function myFunc() {
  console.log(this);
}

var myFunc2 = function() {
  console.log(this);
};

window.myFunc(); // 전역에 선언한 함수의 Context는 DOMWindow이다.

function thisFunc() {
  alert(this.name);
}

function thisFunc2(obj) {
  alert(obj.name);
}

출처 : http://cafe.naver.com/webappdev.cafe

Front-End Development, Tip

SyntaxHighlighter

댓글 남기기

자바스크립트 와 CSS등…을 편집기처럼
스타일링 해서 게시글에 표현하고 싶을때 사용하시면 됩니다.

사용법은 아래와 같습니다.

  1. http://alexgorbatchev.com 에 접속한다.
  2. 우측 Download 페이지로 이동한다.
  3. 다운받은 파일에서 아래 파일을 자신의 경로에 맞춰서 페이지 <head> 내부 또는 </body> 위에 입력시킨다.
    <link href=”stylesheets/shCoreDefault.css” rel=”stylesheet” type=”text/css” /> (필수)
    <script src=”javascripts/lib/shCore.js” type=”text/javascript”></script> (필수)
    <script src=”javascripts/lib/shBrushJScript.js” type=”text/javascript”></script> (스크립트 스타일링시 필요)
    <script src=”javascripts/lib/shBrushCss.js” type=”text/javascript”></script> (CSS 스타일링시 필요)
    <script type=”text/javascript”>SyntaxHighlighter.all();</script>  (스타일링 실행 필요)
  4. 아래와 같이 js스타일링, css스타일링을 원하는 곳에 <pre class=”brush: js;”>, <pre class=”brush: css;”>태그로 감싸준다.
  5. 짠~! 잘나오면 성공~!

 

  function myFunction(){
    var foo;
    if(foo == true){

    }
 }
Front-End Development

Javascript 배열 메서드

댓글 남기기

Javascript Array클래스에 정의되어있는 배열 메서드에 대하여 알아보자.

join()
Array.join()메서드는 배열의 모든 원소를 문자열로 변환하고 이어 붙여서 반환한다.

var a = [1, 2, 3];     //3개의 원소를 가진 배열을 생성
var s = a.join();      //s == “1,2,3”
s = a.join(“, “);       //s == “1, 2, 3”

Array.join() 메서드는 String.split() 메서드와 반대되는 기능을 한다.

reverse()
Array.reverse() 메서드는 이름에서도 알 수 있듯이 배열 안의 원소 순서를 반대로 정렬하여 반환한다.

var a = new Array(1,2,3);     // a[0] = 1, a[1] = 2, a[2] = 3
a.reverse();                       // now a[0] = 3, a[1] = 2. a[2] = 1
var s = a.join();                  // s == “3,2,1”

sort()
Array.sort() 메서드는 배열 안의 원소들을 정렬하여 반환한다.

var a = new Array(“c”, “a”, “b”);
a.sort();
var s = a.join(“, “);     // s== “a, b, c”

알파벳순이 아니라 다른 순서로 배열을 정렬하려면 sort() 메서드의 전달인자를 통해 비교 함수를 직접 명시해주어야 한다. 비교 함수는 전달인자를 두개 받아서, 정렬된 배열 상에서 어떤 것이 먼저 나타나야 하는지 판단하는데 사용 된다. 만약 첫 번째 전달인자가 두 번째보다 먼저 나타나야 한다면 비교 함수는 0보다 작은 숫자를 반환해야 한다. 첫 번째 전달인자가 두 번째보다 뒤에 나타나야 한다면 0보다 큰 숫자를 반환하며 두 값이 동등하다면 0을 반환해야 한다.
var a = [33, 4, 1111, 222];
a.sort();                   // 알파벳순 : 1111, 222, 33, 4
a.sort(function(a,b) { // 번호순 : 4, 33, 222, 1111
     return a-b;
});

concat()
Array.concat() 메서드는 본래 배열의 모든 원소에 concat() 메서드의 전달인자들을 전부 이어붙인 배열을 새롭게 생성하여 반환한다.
var a = [1, 2, 3];
a.concat(4, 5);            // [1,2,3,4,5]
a.concat([4,5]);          // [1,2,3,4,5]
a.concat([4.5], [6,7]); // [1,2,3,4,5,6,7]
a.concat([4, [5,[6,7]]]);  // [1,2,3,4,5,[6,7]]

slice()
Array.slice() 메서드는 배열의 일부분 혹은 부분 배열을 반환한다.
var a = [1,2,3,4,5];
a.slice(0, 3);           // [1,2,3]
a.slice(3);              // [4,5]
a.slice(1, -1);         // [2,3,4]
a.slice(-3,-2);        // [3]

splice()
Array.splice() 메서드는 배열에 원소를 삽입하거나 원소를 제거하려 할 때 범용적으로 사용할 수 있는 메서드이다.
var a = [1,2,3,4,5,6,7,8];
a.splice(4);          // [5,6,7,8] , a는 [1,2,3,4];
a.splice(1,2);       // [2,3] , a는 [1,4];
a.splice(1,1);       // [4] , a는 [1]

push() & pop()
위 메서드를 사용하면 배열을 마치 스택인 것처럼 조작할 수 있다.
push() 메서드는 하나 혹은 그 이상의 원소들을 배열의 끝 부분에 이어 붙이고 배열의 새로운 길이를 반환한다.
pop() 메서드는 push()와 반대로 작동한다. 즉 pop() 메서드는 배열의 마지막 원소를 제거하고 배열의 길이를 감소시킨 후 배열에서 제거한 원소를 반환한다.
var stack = [];           // stack:[]
stack.push(1,2);        // stack:[1,2]        2를 반환
stack.pop();              // stack:[1]          2를 반환
stack.push(3);           // stack:[1,3]       3를 반환
stack.pop();              // stack:[1]          3를 반환
stack.push(4,5);        // stack:[1, [4,5]] 2를 반환
stack.pop();              // stack:[1]          [4,5]를 반환
stack.pop();              // stack:[]           1를 반환

unshift() & shift()
push(), pop()과 유사하며 이 메서들은 배열의 끝이 아니라 배열의 맨 앞에 원소를 삽입하고 제거한다.
var a = [];              // a:[]
a.unshift(1);           // a:[1]
a.unshift(22);          // a:[22, 1]
a.shift();                 // a:[1]
a.unshift(3,[4,5]);    // a:[3,[4,5],1]
a.shift();                 // a:[[4,5],1]
a.shift();                 // a:[1]
a.shift();                 // a:[]

 

출처 : http://using.tistory.com/40