대부분의 프로그래밍 언어는 null 이라는 특별한 값을 지원한다.
ex> var temp = null;
이 값(null)의 의미는 '아무런 값도 나타내지 않는다'라는 의미이며 다음의 구문과는 구분된다.
ex> var temp;
즉, null 은 어떠한 유효한 값도 아니라는 의미이지 값 자체가 없다는 의미가 아니라는 말이다. 다시 말해 변수 temp에는 어떤 유효한 데이터를 담지 않을 뿐, null 값을 가진다는 의미이다. 따라서 선언만 하고 값을 할당하지 두 번재 예와는 구분되는 것이다.
자바스크립트는 값의 비유효성과 관련한 또 하나의 의미를 제공하는데 바로 undefined이다.
앞서 두 번째 예가 바로 undefined의 예가 되겠다. 즉 선언은 되었지만 값이 할당되지 않는 변수에 접근할 경우 undefined가 된다.
console.log(temp); //선언은 되었으나 값이 할당되지 않은 변수: undefined
temp = null;
console.log(temp); //여전히 유효한 값은 없으나 null로 할당된 변수: null
결론적으로 null은 null이라는 값이 할당된 경우이지만, undefined의 경우 선언은 되었지만 아무런 값도 할당되지 않은 경우로 요약할 수 있다.
좀 더 나아가 객체 환경에서의 undefined를 살펴볼 필요가 있다.
선언은 되었지만 값이 할당되지 않은 변수에 접근할 경우 undefined라 했다. 이 개념은 객체환경에서도 동일한다. 즉 선언은 되었지만 값이 할당되지 않는 객체 프로퍼티 역시 undefined이다.
여기에 한가지 더 기억해야 할 것은, 객체 환경에서는 선언되지 않는 객체 프로퍼티도 undefined라는 점이다.
일반 변수의 경우 선언되지 않은 경우 오류(Exception)을 내뱉지만 객체 프로퍼티일 경우에는 오류가 아니라 undefined라는 점이다.
this.i;
}
var tempObject = new TempObject();
console.log(tempObject.i); //선언은 되었으나 값이 할당되지 않은 객체 프로퍼티: undefined
console.log(tempObject.j); //존재하지 않는 객체 프로퍼티 역시...: undefined
문맥에 따른 null, undefined 평가
자바스크립트는 유연한 자동 형변환이 지원되는 언어이다. 자동 형변환이란 어떤 데이터 타입이 숫자와 함께 사용될 경우 자동으로 (원래 숫자 타입이 아닌 경우에도) 자동으로 정해진 숫자로 변환되는 것이다.
여기서 숫자와 함께 사용된 경우라는 의미가 바로 프로그램 문맥상 숫자 문맥으로 평가된다는 것이다.
null과 undefined 역시 문맥에 따른 자동 형변환이 된다.
Boolean 문맥
null과 undefined는 실제로 다른 값이지만 참/거짓(Boolean)으로 평가되어야 하는 경우 모두 false로 형변환이 된다.
console.log(Boolean(temp)); //강제 형변환: false
if(!temp) //자동 현변환: undefined가 자동으로 false로 변환됨
{
console.log('temp 변수가 false로 평가되었습니다');
}
숫자 문백
숫자 문맥에서는 두 값이 차이를 보이는데 null의 경우 0으로, undefined의 경우 NaN으로 변환된다.
var temp2;
console.log(Number(temp1)); //강제 형변환: 0
console.log(Number(temp2)); //강제 형변환: NaN
console.log(temp1 + 2); //자동형변환: 2
console.log(temp2 + 2); //자동형변환: NaN
실제로 자바스크립트 모듈을 개발할 경우, 이러한 문맥상 자동형변환의 특징을 이용하는 경우가 많다.
만일 어떤 객체에 정의된 함수의 존재여부를 식별한 후 해당 함수를 호출하고 싶을 경우 다음과 같이 작성할 수 있다.
this.doWork = function(){
console.log('doWork...');
}
}
var temp = new TempObject();
if(temp.doWork){
temp.doWork(); //조건식이 true이므로 호출됨
}
if(temp.doWork2){
temp.doWork2(); //조건식이 false이므로 호출되지 않음
}
그리고 외부 모듈을 가져다 쓰는 복잡한 스크립트 환경에서 전역 네임스페이스의 충돌을 방지하기 위한 조건식으로 사용되기도 한다.
다음의 경우를 살펴보자. 동일한 이름의 객체를 생성하면 오류는 나지 않지만 뒤에 선언된 이름이 앞선 이름을 덮어쓰게 된다.
console.log(someName.i); //10
var someName = { i : 20 };
console.log(someName.i); //20
문제는 만일 someName이라는 심벌이 외부 모듈에서 전역 네임스페이스로 이미 사용중일 경우 이름 중복은 예상치 못한 결과를 초래하기 때문에 다음과 같이 전역 네임스페이스에 동일한 심벌이 존재하는지 여부를 판단하는 것이 좋다.
console.log(someName.i); //10
if(!someName){ //만일 someName이라는 심벌이 정의되지 않았다면 새로 정의한다.
var someName = { i : 20 };
}
console.log(someName.i); //10
물론 이름 충돌 방지는 도메인 네임과 같은 고유성이 보장된 이름 규칙을 사용하고 나아가 익명함수로 전역 네임스페이스를 전혀 어지럽히지 않도록 하는 기법이 존재하지만 여기서는 그 평가로 사용되는 undefined 특징을 살펴본 것이다.
참고로 null과 undefined의 문맥에 따른 자동 형변환 표를 정리한다.
|
|
Boolean 문맥 |
숫자 문맥 |
문자열 문맥 |
|
null |
false |
0 |
"null" |
|
undefined |
false |
NaN |
"undefined" |
'모바일 > Javascript' 카테고리의 다른 글
| OOP in Javascript (0) | 2013.08.16 |
|---|---|
| 함수에 대하여 (5) | 2013.07.31 |
| 스크립트 실행 지연 (0) | 2013.07.23 |
| Pie.js (0) | 2013.07.16 |
| Zepto.js (0) | 2013.07.15 |
기본적으로 HTML 파서는 문서 파싱 도중에 자바스크립트를 만나면,
파싱 작업을 멈추고 자바스크립트를 다운로드하고 실행되기를 기다린다.
이는 덩치 큰 외부 스크립트를 문서로 삽입할 때 문서 로딩 시간의 지연을 초래하는데,
이를 해결하기 위한 메커니즘 중 하나가 defer와 async 속성이다.
<script> 태그에 사용할 수 있는 속성으로 단어 그대로 defer은 지연, async는 비동기 특징을 지닌다.
보다 자세한 내용은 아래 블로그 글에서 확인할 수 있다.
defer/async와 HTML 파서의 상호작용은 다음 포스트에서 시각적으로 확인 가능하다
=> http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/
그리고 이 두 속성의 브라우저 지원 여부는 다음 포스트에서 바로 확인 가능한데...
=> http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution/
문제는 이들 속성을 지원하는 브라우저 상황이 일관되지 않아 실제 적용을 위해서는 고민이 필요하다.
DOM과 밀접히 상호작용하고 스크립트간 유효범위에 대한 액세스 규칙을 포함하는 등 복잡한 스크립트 환경에서는 로딩과 실행 순서에 민감할 수 있으니 자~알 보고 적용해야 할 것이다.
'모바일 > Javascript' 카테고리의 다른 글
| 함수에 대하여 (5) | 2013.07.31 |
|---|---|
| null과 undefined 그리고 NaN (0) | 2013.07.29 |
| Pie.js (0) | 2013.07.16 |
| Zepto.js (0) | 2013.07.15 |
| 자바스크립트 상속 (0) | 2013.07.12 |
'모바일 > HTML5' 카테고리의 다른 글
| [HTML5 Game] Character Animation (1) | 2013.09.14 |
|---|---|
| CSS3 3D Effect (0) | 2013.08.02 |
| HTML5 개발을 도와주는 도구들 (4) | 2010.11.01 |
| 주요 브라우저 HTML5 지원 점수 (0) | 2010.10.27 |
| 어도비, HTML5 디자인 개발툴 엣지(Edge) 공개 (0) | 2010.10.26 |
border-radius와 같은 CSS3의 새로운 효과를 IE에서도 적용되도록 해 주는 라이브러리이다.
IE6 ~ 9까지 지원되는데 다음의 CSS3 효과가 지원된다.
지원되는 CSS3 효과: border-radius, box-shadow, linear-gradient
조건부 주석을 통한 스크립트 참조 또는 htc behavior 방식 둘 중 하나를 선택해서 구현할 수 있는데,
IE에서만 별도의 동작을 요구하기 때문에 가볍게 적용할 수 있을 듯 하다.
점진적 퇴보 전략 대신, IE 사용자들에게도 CSS3 경험을 선사해 주겠다면 이 라이브러리 적용을 고려해 볼 하다. 아쉬운건 좀 더 많은 CSS3 효과가 지원되지 않는다는 점이다.
'모바일 > Javascript' 카테고리의 다른 글
| null과 undefined 그리고 NaN (0) | 2013.07.29 |
|---|---|
| 스크립트 실행 지연 (0) | 2013.07.23 |
| Zepto.js (0) | 2013.07.15 |
| 자바스크립트 상속 (0) | 2013.07.12 |
| ProcessingJS, 자바스크립트 Canvas 라이브러리 (0) | 2013.07.12 |
모바일 환경에서 사용할 만한 경량의 자바스크립트 라이브러리를 찾았다
Zepto.js 라는 라이브러리로 jQuery의 문법 구조를 그대로 유지하면서 꼭 필요한 기능만 제공하여 크기를 최소화했다.
모바일 환경에서 jQuery를 사용하기엔 좀 무거운 감이 있을 경우 대체안으로 적합해 보인다.
또한 UI는 jQuery Mobile과 같은 템플릿에서 벗어나고 싶지만 swipe, taphold와 같은 터치 관련 이벤트는 사용하고 싶을 경우에도 접합하다 하겠다.
Zepto.js는 Core 모듈과 모바일 운영체제를 식별할 수 있는 Detect 모듈, 비동기 통신을 위한 Ajax 모듈, 에니메이션 효과를 위한 Effects 모듈, 터치 이벤트 지원을 위한 Touch 모듈 등으로 구성되어 있다.
'모바일 > Javascript' 카테고리의 다른 글
| 스크립트 실행 지연 (0) | 2013.07.23 |
|---|---|
| Pie.js (0) | 2013.07.16 |
| 자바스크립트 상속 (0) | 2013.07.12 |
| ProcessingJS, 자바스크립트 Canvas 라이브러리 (0) | 2013.07.12 |
| 평점에서 별표 마킹 (0) | 2012.11.16 |
객체 지향 언어의 면모를 여실히 보여주는 자바스크립트 상속! 다형성!
좋구먼~ ㅎㅎㅎ
넌 너무 유연해~~
var Polygon = function(){
var self = this;
self.type = "Polygon";
self.commonDo = function(){
console.log("commonDoing...");
};
self.draw = function(){
console.log("draw " + self.type);
};
};
var Square = function(){
var self = this;
self.type = "Square";
self.draw = function(){ //오버라이딩
console.log("draw " + self.type);
};
self.squareDoing = function(){
console.log("squareleDoing...");
}
};
Square.prototype = new Polygon(); //상속
var Triangle = function(){
var self = this;
self.type = "Triangle";
self.draw = function(){ //오버라이딩
console.log("draw " + self.type);
};
self.triangleDoing = function(){
console.log("triangleDoing...");
}
};
Triangle.prototype = new Polygon(); //상속
....
var obj1 = new Square();
obj1.commonDo();
obj1.draw();
obj1.squareDoing();
var obj2 = new Triangle();
obj2.commonDo();
obj2.draw();
obj2.triangleDoing();
console.log(obj1 instanceof Polygon);
console.log(obj2 instanceof Polygon);
prototype.js를 이용하면 보다 가독성 높은 상속 코드를 구현할 수 있다. 아래 코드는 prototype.js를 사용해서 이전 코드와 동일한 클래스 및 상속 구조를 구현한다
var Polygon = Class.create({
initialize: function(){
this.type = "Polygon";
},
commonDo : function(){
console.log("commonDoing...");
},
draw : function(){
console.log("draw " + this.type);
}
});
var Square = Class.create(Polygon,{
initialize: function(){
this.type = "Square";
},
draw : function(){
console.log("draw " + this.type);
},
squareDoing : function(){
console.log("squareleDoing...");
}
});
var Triangle = Class.create(Polygon,{
initialize: function(){
this.type = "Triangle";
},
draw : function(){
console.log("draw " + this.type);
},
triangleDoing : function(){
console.log("triangleDoing...");
}
});
'모바일 > Javascript' 카테고리의 다른 글
| Pie.js (0) | 2013.07.16 |
|---|---|
| Zepto.js (0) | 2013.07.15 |
| ProcessingJS, 자바스크립트 Canvas 라이브러리 (0) | 2013.07.12 |
| 평점에서 별표 마킹 (0) | 2012.11.16 |
| 자주 쓰는 jQuery 기능 - 이벤트 편 (0) | 2011.08.04 |
jQuery 개발자인 John Resig이 개발한 자바스크립트 기반의 그래픽 라이브러리로, Processing Java Library를 HTML5 Canvas 환경에 맞게 포팅한 것으로 각종 그래픽 작업 및 효과를 구현할 수 있다.
기존 Java 라이브러리와 동일한 구문을 사용하기 때문에 기존 사용자는 추가 노력 없이 쉽게 사용할 수 있다는 장점이 있다. 안타깝게도 개인적으로 자바 개발자가 아니라 접해 본 경험이 없어 아쉽다.
또한 HTML5의 Canvas 기능을 랩핑한 것이라 Canvas API를 직접 다루지 않고 쉽고 잘 추상화된 Processing 구문만으로 훌륭한 그래픽 효과를 줄 수 있다.
다음의 공식 사이트에서 라이브러리와 데모 및 레퍼런스를 얻을 수 있다
간단한 사용 예를 다음과 같다.
먼저 Processing 구문의 그래픽 코드를 pde 파일로 준비한다.
* basic-example.pde (http://processingjs.org/learning/ 에서 발췌)
// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;
// Setup the Processing Canvas
void setup(){
size( 200, 200 );
strokeWeight( 10 );
frameRate( 15 );
X = width / 2;
Y = width / 2;
nX = X;
nY = Y;
}
// Main draw loop
void draw(){
radius = radius + sin( frameCount / 4 );
// Track circle to new destination
X+=(nX-X)/delay;
Y+=(nY-Y)/delay;
// Fill canvas grey
background( 100 );
// Set fill-color to blue
fill( 0, 121, 184 );
// Set stroke-color white
stroke(255);
// Draw circle
ellipse( X, Y, radius, radius );
}
// Set circle's next destination
void mouseMoved(){
nX = mouseX;
nY = mouseY;
}
다음으로 processingJS 라이브러리르 참조하고 pde 파일을 Canvas로 연결하는 HTML 파일을 생성한다.
* Test.html
<!DOCTYPE html>
<html>
<head>
<script src="processing-1.4.1.js"></script>
</head>
<body>
<canvas data-processing-sources="basic-example.pde"></canvas>
</body>
</html>
참고로 pde 파일을 웹 서버가 이해할 수 있도록 MIME 타입 설정을 잊지 말자.
물론 pde 파일이 아닌 스크립트만으로도 가능하다. 다음과 같이...
<!DOCTYPE html>
<html>
<head>
<script src="processing-1.4.1.js"></script>
</head>
<body>
<script type="application/processing">
// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;
// Setup the Processing Canvas
void setup(){
size( 200, 200 );
strokeWeight( 10 );
frameRate( 15 );
X = width / 2;
Y = width / 2;
nX = X;
nY = Y;
}
// Main draw loop
void draw(){
radius = radius + sin( frameCount / 4 );
// Track circle to new destination
X+=(nX-X)/delay;
Y+=(nY-Y)/delay;
// Fill canvas grey
background( 100 );
// Set fill-color to blue
fill( 0, 121, 184 );
// Set stroke-color white
stroke(255);
// Draw circle
ellipse( X, Y, radius, radius );
}
// Set circle next destination
void mouseMoved(){
nX = mouseX;
nY = mouseY;
}
</script>
<canvas></canvas>
</body>
</html>
다양한 데모를 직접 체험해 보고 싶으면 http://processingjs.org/download/ 에서 Examples zipped를 다운받아서 로컬 브라우저로 바로 확인 가능하다
'모바일 > Javascript' 카테고리의 다른 글
| Zepto.js (0) | 2013.07.15 |
|---|---|
| 자바스크립트 상속 (0) | 2013.07.12 |
| 평점에서 별표 마킹 (0) | 2012.11.16 |
| 자주 쓰는 jQuery 기능 - 이벤트 편 (0) | 2011.08.04 |
| 자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편 (2) | 2011.08.03 |
사이트에 보면 별 다섯개로 평점을 부여하도록 하는 곳이 많다.
총 5개의 별 중 1~5 까지 별을 선택해서 평점을 주게 된다.
이렇게 평점을 준 사용자들의 모든 점수를 합해서 평균을 내면 소수점 평점이 나올 수 있다
그리고 요즘 대부분의 사이트에서는 이런 소수점까지 고려해서 UI에 표시해 준다
다시말해,
대략 평균 평점이 4.2 점이라면 아래 그림과 같이 다섯번째 별표에도 그 비율만큼 색이 채워지도록 한다.
갑자기, 이런 표현에 대한 UI 구현이 궁금해졌다
편하게 구현하려면 어떻게 해야 할까?
만일 소수점을 무시하고 반올림하거나 절삭하는 거라면, 총 두 개의 별표 이미지(주황색, 회색)만 있으면 되고 평점에 맞춰 노출하면 그만이다.
그런데 여기서는 평점의 소수점까지 고려해서 별표 이미지를 그 비율로 채워줘야 한다.
그래서...
CODE PROJECT의 평점 부분을 살펴 봤다
아래 그림처럼 평점이 4.21이다.(이런 세심한... 소수점 두 자리씩이나... ㅡ.ㅡ;)
그리고 별표 이미지 중 마지막 별표를 보면, 대략 0.21의 비율만큼 채워져 있다
이제 소스를 보자. 아래 그림은 별표 이미지와 크롬 개발자 도구로 본 HTML 코드이다.
별표가 다 채워진 이미지와 그렇지 않은 이미지, 총 두개의 이미지를 사용하고 있다. 각 이미지의 너비는 139px이다.
이 두 이미지를 차례로 선언하여 겹치게 하고, div 요소의 너비(width)와 적당한 CSS로 처리한 것을 확인할 수 있다. 각 너비의 산출은 이미지 실제 너비 크기에 대비하여 총점 비율로 계산하면 쉽게 낼 수 있다
이 코드에서는 총 이미지 크기(139px) = 채운 이미지(124px) + 빈 이미지(15px)로 조절되었다
'모바일 > Javascript' 카테고리의 다른 글
| 자바스크립트 상속 (0) | 2013.07.12 |
|---|---|
| ProcessingJS, 자바스크립트 Canvas 라이브러리 (0) | 2013.07.12 |
| 자주 쓰는 jQuery 기능 - 이벤트 편 (0) | 2011.08.04 |
| 자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편 (2) | 2011.08.03 |
| [jQTouch] Demos 훓어보기 (0) | 2010.10.28 |
기존 자바스크립트의 addEventListener와 같은 함수를 랩핑한 jQuery 만의 이벤트 처리 방식을 정리해 보자.
기본 이벤트 처리
click, mousedown과 같은 일반적인 이벤트 이름을 그대로 사용하여 이벤트 처리기를 연결할 수 있다.
.이벤트명(이벤트처리기 함수)
선택자로 선택된 element에 이벤트명(ex:click, mousedown 등)을 지정해 특정 이벤트 발생시 이벤트처리기 함수가 실행되도록 한다
다음은 이 방식을 이용해 click, hover 두 이벤트를 처리하는 코드다.
$('div').click(function(event){
alert(event.target.innerText);
});
$('div').hover(function(event){
alert(event.type);
});
});
bind() 함수를 이용한 이벤트 처리
jQuery가 이벤트를 일관적으로 처리하기 위해 만든 최최의 함수로 bind()함수를 이용해 이벤트를 처리할 수 있다. 앞서 소개한 '기본 이벤트 처리'는 이것의 단축 표현이다.
.bind('이벤트명', 이벤트처리기 함수)
bind()함수는 문자열로 지정한 이벤트 명과 이벤트 처리기 함수를 매개변수로 받아 이벤트를 처리한다.
이전 코드의 click 이벤트를 bind() 함수를 이용해 다음과 같이 구현할 수 있다
$('div').bind('click' ,function(event){
alert(event.target.innerText);
});
});
여러 이벤트를 동시에 등록
bind()함수를 이용하면 동일한 요소에 여러개의 이벤트를 한번에 연결할 수 있다. 아래와 같이 처리할 이벤트를 이어서 지정하면 된다. event.type으로 어떤 이벤트가 발생했는지 알 수 있을 것이다.
$('div').bind('click mouseenter' ,function(event){
alert(event.type);
});
});
이렇게 하나 이상의 이벤트를 처리할 때 각각의 이벤트 처리 함수를 구분하고 싶을 경우가 있다. 이 경우 event.target 정보를 바탕으로 처리기 함수를 구분할 수 있지만 아래 코드와 같이 객체 형태로 정의할 수도 있다.(이 방식은 jQuery 1.4 이상부터 지원한다)
$('div').bind(
{
click: function(evnet){ alert(event.type); }
},
{
mouseenter: function(evnet){ alert(event.type); }
}
});
});
이벤트 매개변수 사용
이벤트 처리기 함수에 매개변수를 전달하고 싶은 경우 bind() 함수의 두 번째 매개변수에 지정할 수 있다. 다음 코드는 bind()함수의 두 번째 매개변수에 자바스크립트 객체형태로 매개변수를 전달하는 예이다.
$('div').bind('click', {key1:'value1', key2:'value2'} ,function(event){
alert(event.data.key1 + '/' + event.data.key2);
});
});
여기서 한가지 짚고 넘어가야 할 것은, 위 예제는 이벤트를 등록하는 시점에 매개변수를 전달한다는 것이다.
즉 이벤트 바인딩 시점에 이미 데이터가 정의되어이 있어야 하고 전달가능해야 한다는 점이다. 그러나 대부분의 실제 환경에서는 이벤트 바인딩 시점이 아닌, 바인딩 이후 프로그램 동작 가운데 매개변수 정보가 생성된다는 점이다. 이처럼 동적인 매개변수를 처리하기 위해서는 이벤트를 스스로 발생시키는 trigger() 함수를 이용해 동적인 데이터를 매개변수로 전달할 수 있게 된다. 이때 bind() 함수에 매개변수를 받는 부분이 추가되어야 한다.
$('div').bind('click' ,function(event, data1, data2){
alert(data1 + '/' + data2);
});
//이벤트 바인딩 이후 trigger()함수로 이벤트 자동 발생시키기
$('div').trigger('click',['value1','value2']);
});
이벤트 제거
등록된 이벤트를 제거하려면 다음과 같이 unbind() 함수를 이용할 수 있다.
만일 <div> 요소의 특정 이벤트만 제거하고 싶을 경우 그 이벤트명을 지정해 주면 된다.
live() 함수를 이용한 이벤트 처리
bind() 함수 이후에 새로 추가된 live() 함수(1.3 버전 이후 추가)를 이용하면 응용프로그램 실행 도중 동적으로 추가된 요소에도 자동으로 이벤트를 바인딩 할 수 있다. 사용방법은 bind() 함수와 유사하다
.live('이벤트명', 이벤트처리기 함수)
아래 코드를 보면, HTML 영역에서 총 두개의 <li> element를 미리 정의해 두고, 이들에게 클릭 이벤트가 실행되도록 live() 함수로 이벤트를 등록했다. 이후 '아이템추가' 버튼을 클릭해서 새로운 아이템(<li>)을 추가할 수 있게 한다. 이때 동적으로 새로 추가된 <li> element 도 live() 함수로 등록한 클릭 이벤트가 반영된다.
만일 live()가 아니라 bind() 함수로 이벤트를 등록했다면 새로 추가된 <li> element는 클릭 이벤트가 발생하지 않을 것이다(새로 추가된 <li> 에 수동으로 bind() 해 줘야 한다)
이처럼 live() 함수를 이용한 이벤트 처리는 비동기 통신으로 페이지 갱신 없이 element가 추가되는 시나리오에 유용하게 사용할 수 있다.
<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() 함수로 제거할 수 있다
delegate() 함수를 이용한 이벤트 처리
jQuery 1.4.2 버전 부터는 새로운 이벤트 처리 함수인 delegate()가 추가되었다. live()의 동적 이벤트 바인딩도 지원하며 기존 live() 에서 제한 되었던 몇 가지 단점을 보완하고 성능이 더 개선된 함수라고 한다. 자세한 사항은 jQuery API 문서를 참고하기 바라며 다음과 같이 사용할 수 있다. 아래 코드는 앞의 live()로 구현된 것을 delegate()로 바꾼 것이다.
.delegate('선택자', '이벤트명', 이벤트처리기 함수)
$('ul').delegate('li','click' ,function(event){
alert(event.target.innerText);
});
delegate()로 등록한 이벤트는 undelegate() 함수로 제거할 수 있다.
참고자료>
http://api.jquery.com/bind/
http://api.jquery.com/live/
http://api.jquery.com/delegate/
http://www.learningjquery.com/2010/03/using-delegate-and-undelegate-in-jquery-1-4-2
'모바일 > Javascript' 카테고리의 다른 글
| ProcessingJS, 자바스크립트 Canvas 라이브러리 (0) | 2013.07.12 |
|---|---|
| 평점에서 별표 마킹 (0) | 2012.11.16 |
| 자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편 (2) | 2011.08.03 |
| [jQTouch] Demos 훓어보기 (0) | 2010.10.28 |
| [jQTouch] Extensions (확장기능) (0) | 2010.10.28 |
너무 많은 라이브러리와 프레임워크의 등장으로 함수 하나하나도 쉬이 기억나지 않음이야...
동일한 기능의 함수명과 사용법도 각 프로그래밍 언어별로 조금씩 달라 기억 창고에 두고 바로 사용할 수 없는 지경이다. 그래서 정리한다. jQuery의 자주 쓰는 기능편!!!
이것은 노하우보다는 노웨어(Know Where)를 위한 글이라 할 수 있다.
기본 셀렉터
일반적인 CSS 셀렉터를 그대로 이용할 수 있다. 태그명을 기준으로 선택하거나 id, class 명으로 선택한다.
$('태그명') : HTML 문서에서 해당 태그를 모두 선택
$('#id') : HTML 문서에서 해당 id가 지정된 element 선택
$('.class명') : HTML 문서에서 해당 class가 지정된 모든 element 선택
<p>Paragraph Element</p>
<div id="divID">Division Element</div>
<div class="className">Division Element</div>
- Script
$(function(){
var element = $('p'); alert(element.html());
element = $('#divID'); alert(element.html());
element = $('.className'); alert(element.html());
});
순서 기반 셀렉터
기본 셀렉터 외에 jQuery에서 추가로 정의한 커스텀 셀렉터를 이용하면 복수의 elements에서 지정한 순서에 해당하는 element(s)를 선택할 수 있다.
$('선택자:even')
선택자로 선택된 모든 elements 중 짝수 번째 elements를 선택한다. 셀렉터를 생략할 경우 문서 전체가 대상이다. 대부분의 프로그램이 그러하듯 순서 인덱스 번호는 0부터 시작한다.
$('선택자:odd')
선택자로 선택된 모든 elements 중 홀수 번째 elements를 선택한다.
$('선택자:eq(인덱스)')
선택자로 선택된 모든 elements 중 해당 인덱스 번째 element를 선택한다.
$('선택자:first') , $('선택자:last')
선택자로 선택된 elements 중 첫 번째(first)와 마지막(last) element를 선택한다
$('선택자:lt(인덱스)') , $('선택자:gt(인덱스)')
선택자로 선택된 elements 중 인덱스 보다 작거나(lt) 큰(gt) elements를 선택한다.
lt 는 부등호 기호 '<' , gt는 '>' 로 해석하면 이해할만 하다
<p>Paragraph Element 0</p>
<p>Paragraph Element 1</p>
<p>Paragraph Element 2</p>
<p>Paragraph Element 3</p>
- Script
$(function(){
var elements = $('p:odd');
elements.each(function(){ alert($(this).html())});
elements = $('p:even');
elements.each(function(){ alert($(this).html())});
elements = $('p:eq(3)'); alert(elements.html())
elements = $('p:first'); alert(elements.html());
elements = $('p:last'); alert(elements.html());
elements = $('p:gt(1)');
elements.each(function(){ alert($(this).html())});
elements = $('p:lt(2)');
elements.each(function(){ alert($(this).html())});
});
관계 기반 셀렉터
부모/자식과 같은 DOM 관계를 기준으로 element(s)를 선택할 수 있다. 대표적인 관계가 DOM Tree 구조상의 부모/자식 관계이다.
$('선택자').children() : 선택자로 선택된 element의 바로 아래(한 단계 아래의) 자식 elements를 선택한다.
$('선택자').parent() : 선택자로 선택된 element의 바로 위(한 단계 위의) 부모 element를 선택한다.
$('선택자').next() , $('선택자').nextAll()
선택자로 선택된 element의 바로 다음 1개(next) 또는 전체(nextAll) 요소를 선택한다.
$('선택자').prev() , $('선택자').prevAll()
선택자로 선택된 element의 바로 전 1개(prev) 또는 전체(prevAll) 요소를 선택한다.
이와 같은 jQuery 메서드를 '트리 순환 메서드'라 부른다
<div id="root">
<p>Paragraph Element</p>
<div id="1deptCh">Division Element <div id="2deptCh">Sub Division Element</div></div>
</div>
- Script
$(function(){
var elements = $('#root').children();
elements.each(function(){ alert($(this).html())});
elements = $('#2deptCh').parent();
alert(elements.html());
});
조건 기반 셀렉터
특정 내용이 포함된 element, 특정 규칙에 맞는 element 즉 조건에 의해 선택하는 방법을 안내한다. 따지고 보면 모든 셀렉터가 조건 기반 셀렉터이다. 다만 단락 구분과 실제 규칙을 명시하는 범주를 여기서 다룬다.
$('선택자').filter('조건선택자')
앞의 '선택자'에 의해 선택된 elements에서 '조건선택자'에 해당하는 element(s)만 다시 선택한다. 아래 코드는 모든 <p> element에서 class명이 'filterName'인 <p> element를 걸러내는 코드다.
<p class="filterName">Paragraph Element 0</p>
<p>Paragraph Element 1</p>
<p class="filterName">Paragraph Element 2</p>
<p>Paragraph Element 3</p>
- Script
$(function(){
var elements = $('p').filter('.filterName');
elements.each(function(){ alert($(this).html())});
})
$('선택자').find('조건선택자')
앞의 '선택자'에 의해 선택된 elements의 자식을 대상으로 '조건 선택자'에 해당하는 element를 선택한다. 이때 자식 element의 단계(Dept)는 제약이 없다. 아래 코드는 모든 <div> element의 자식들 중 <span> element를 다시 선택하는 코드다.
<div>Division Element 0</div>
<div>Division Element 1<span> Span Element 1</span></div>
<div>Division Element 2<span> Span Element 2</span></div>
- Script
$(function(){
var elements = $('div').find('span');
elements.each(function(){ alert($(this).html())});
});
filter() vs find()
여러 곳에서 언급하고 있지만 이 둘은 짐짓 헷갈리 수 있다. 이를 헷갈리지 않으려면 조건이 적용되는 대상 즉 검색 대상이 다르다는 걸 알면 된다.
filter() : 현재 선택된 집합을 대상으로 검색함
find() : 현재 선택된 집합의 자식 요소를 대상으로 검색함
filter()는 '선택자'로 선택된 요소를 대상으로 검색하는 반면, find()는 '선택자'로 선택된 요소의 자식 요소를 대상으로 검색하는 것이다. 다음 코드를 보자.
<div class="tempClass">Division Element 0</div>
<div>Division Element 1<span class="tempClass"> Span Element 1-1</span></div>
<div class="tempClass">Division Element 2<span> Span Element 2-1</span></div>
- Script
$(function(){
elements = $('div').filter('.tempClass');
elements.each(function(){ alert('filter() :' + $(this).html())});
var elements = $('div').find('.tempClass');
elements.each(function(){ alert('find() :' + $(this).html())});
});
두 경우 모두 처음에는 모든 <div>를 선택하고, 이후 filter와 find를 같은 조건(class 명이 'tempClass' 인 것)으로 검색한다. 결과는 다음과 같다.
- filter()로 검색한 결과: 첫 번째와 세 번째 <div> 요소 반환
- find()로 검색한 결과: 두 번째 요소의 자식 요소인 <span> 요소 반환
이것 하나만 기억하자! find()는 자식을 기준으로 검색한다는 것!
$('선택자:contains("searchText")')
앞의 '선택자'에 의해 선택된 element(s)의 콘텐트에서 "searchText"가 포함된 element만을 다시 선택한다.
다음 코드는 모든 <div>요소의 내용에서 'mkex'가 포함된 요소만을 선택하는 코드이다. 참고로 contains로 내용을 검색할 때, 대/소문자를 구분하는 것에 주의하자
<div>Hi, mkex!</div>
<div>Hi, ohkebi</div>
<div>Hi, MKEX</div>
- Script
$(function(){
var elements = $('div:contains("mkex")');
elements.each(function(){ alert($(this).text())});
});
$('선택자:not(조건선택자)')
앞의 '선택자'에서 선택된 모든 elements에서 '조건선택자'에 해당하는 요소를 제거한다.
<div class="divClass">Hi, mkex!</div>
<div>Hi, ohkebi</div>
<div class="divClass">Hi, MKEX</div>
- Script
$(function(){
var elements = $('div:not(.divClass)');
elements.each(function(){ alert($(this).text())});
});
참고로 not 조건에 셀렉터를 중첩해서 사용 가능하다. 다음과 같이...
$('div:not(.divClass , #divID)');
위 코드는 모든 <div> 요소에서 class로 'divClass'가 지정되거나 id로 'divID'로 지정된 요소를 제거한다.
즉 조건식을 or 조합으로 만들 수 있다.
선택자 중첩
지금까지는 하나의 선택자만을 지정했는데 더 자세한 탐색을 위해 선택자를 중첩해서 지정할 수 있다.
기본 셀렉터를 사용해서 선택자를 중첩시켜 보겠다.
$('선택자 선택자 선택자 ...')
총 3개의 선택자를 지정한다. 셀렉터를 중첩해도 동일한 효과를 줄 수 있지만 여기서는 선택자를 중첩 지정하여 탐색의 깊이를 점점 좁혀가고 있다.
예를 하나 보자. 다음 코드는 ID가 'divID'인 요소 안에 있는 <span> 내의 모든 <a> 요소를 반환하는 코드다.
<div id="divID"><span><a href="#">Go!!</a></span></div>
- Script
$(function(){
var element = $('#divID span a');
alert(element.text());
});
지금까지 설명한 셀렉터들을 조합해서 사용할 수도 있고 여기에 설명된 것 이외에도 더 다양한 셀렉터 기법이 존재한다. 그야말로 HTML 문서의 DOM을 자유자재로 그것도 매우 편리하게 탐색할 수 있는 아주 강력한 기능이라 하겠다.
jQuery 이용한 DOM 탐색에 익숙해 지기 위한 방법으로, 이런저런 시나리오를 정하고 특정 사이트를 마구 탐색해 보는 실습을 몇 차례 거쳐 보는 것이다.
'모바일 > Javascript' 카테고리의 다른 글
| 평점에서 별표 마킹 (0) | 2012.11.16 |
|---|---|
| 자주 쓰는 jQuery 기능 - 이벤트 편 (0) | 2011.08.04 |
| [jQTouch] Demos 훓어보기 (0) | 2010.10.28 |
| [jQTouch] Extensions (확장기능) (0) | 2010.10.28 |
| [jQTouch] GET, POST 전송 (0) | 2010.10.27 |
