[모바일]검색결과, 144건
- 자바스크립트 상속 2013.07.12
- ProcessingJS, 자바스크립트 Canvas 라이브러리 2013.07.12
- 평점에서 별표 마킹 2012.11.16
- 자주 쓰는 jQuery 기능 - 이벤트 편 2011.08.04
- 자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편 2011.08.03 2
- 5대 웹브라우저, 그 이름과 로고의 의미 2010.11.30 1
- 웹런처의 브라우저 호환성, 넥슨 사례 2010.11.26 1
- 필요악? ActiveX 2010.11.25
- IE 8, 웹 조각(Web Slices) 2010.11.11
- HTML5 개발을 도와주는 도구들 2010.11.01 4
- [jQTouch] Demos 훓어보기 2010.10.28
- [jQTouch] Extensions (확장기능) 2010.10.28
- [jQTouch] GET, POST 전송 2010.10.27
- [jQTouch] 페이지 전환 이벤트 2010.10.27
- 주요 브라우저 HTML5 지원 점수 2010.10.27
객체 지향 언어의 면모를 여실히 보여주는 자바스크립트 상속! 다형성!
좋구먼~ ㅎㅎㅎ
넌 너무 유연해~~
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 |
훌륭한 프로그래머는 변수이름 하나도 쉽게 정하지 않는다고 하는데 완제품이야 더 말할 것도 없다
아침에, 웹 브라우저 `3라운드` 기사를 보면서 역시 독점보다는 경쟁이 발전을 부추긴다는 생각을 확인하게 된다. 기사와 관련은 없지만 문득 각 브라우저들의 로고의 의미가 궁금해 졌다. 더불어 그 이름의 유래도...
현재 5대 웹 브라우저는 다음과 같다
- 마이크로소프트, 인터넷익스플로어
- 모질라, 파이어폭스
- 애플, 사파리
- 구글, 크롬
- 오페라, 오페라브라우저
우선 마이크로소프트 인터넷익스플로어의 경우 그 이름과 로고의 의미가 단순,직관적이다
전자통신, 인터넷을 뜻하는 접두어 'e' 를 행성띠와 같이 둘러싼 모습이다
이름 역시 인터넷탐색기,탐험가 정도의 무난한 해석이다. 이름과 로고의 의미를 해석하고 자시고 할게 없다
직관적이나 개성은 전혀 없다고 하겠다
다음으로 직관적인 것은 오페라이다
오페라소프트웨어는 브라우저만 만드는 특이한(?) 회사다. 간혹 이 회사는 뭘로 그렇게 잘 먹고 살까? 하는 생각도 해봤다. 모바일 장치에 점유율이 꽤 높은건 알겠지만, 그래도 굉장히 독특한 회사로 보인다
오페라 브라우저는 제품명과 제품 로고를 회사의 그것과 그대로 일치시킨 예이다.
다음의 블로그에서 오페라라는 회사의 면면을 엿볼 수 잇다 => 웹브라우저 ‘오페라’를 아시나요?
그 다음으로는 애플의 사파리를 보자.
사파리 하면 언뜻 야생동물 탐험 여행이 떠오른다. 사파리라는 어원 역시 '여행' 이라는 뜻이다
수렵과 탐험을 위한 원정 여행이라는 뜻의 '사파리'는 인터넷의 이곳 저곳을 탐험하고 여행하는 의미로 해석될 수 있겠다. 로고 역시 탐험에 어울릴법한 나침반 모양을 하고 있다
다음으로 구글의 크롬이다
크롬(chrome) 을 사전에서 찾아보면, 크롬이라는 금속으로 나온다. 웹 브라우저로써의 크롬과 연결고리를 찾기기 쉽지 않다. 해서 찾아보니 다음의 블로그에서 그 유래를 알 수 있었다
=> [구글 크롬] 이름과 로고의 탄생 배경~!!!!
브라우저를 디자인할 때 사용된 개발자간의 공용 명칭이 제품명으로 자연스레 녹아든 사례라 하겠다
또한 위 블로그를 보면 크롬 로고에 대한 몇 가지 해석이 있다. 그 중 매우 설득력(?) 있고 재미있는 유래에 대한 그림은 아래와 같다 ㅎㅎ. 마이크로소프트의 윈도우가 탐탁치 않아 다시 조물딱거려서 만든 것?
마지막으로 모질라의 파이어폭스를 보자. 이름과 로고가 가장 private한 의미를 지녔다 할 수 있다
평상시 잘 몰랐지만 오늘 자세히 들여다 보니, 지구에 붉은 여우가 둘러 앉아 있는 모습이구나.
파이어폭스? 단어 해석 그대로 하면 '불타는 여우'? 이다. 또는 '불여우' 이다
왜 여우라는 동물을 제품명과 로고에 사용된 것일까? 아래 블로그에서 그 유래를 알 수 있다.
=> 'Firefox'는 왜 '불여우'인가?
Thunderbird(천둥새) -> Phoenix(불사조) -> Firebird(꾀꼬리, 하지만 불사조와 유사한 의미로 사용) -> Firefox 로 이어진 이름의 변천사를 엿볼수 있다
'모바일' 카테고리의 다른 글
| 웹런처의 브라우저 호환성, 넥슨 사례 (1) | 2010.11.26 |
|---|---|
| 필요악? ActiveX (0) | 2010.11.25 |
| IE 8, 웹 조각(Web Slices) (0) | 2010.11.11 |
| 원소스 멀티플랫폼을 위한 기술적 현황 (0) | 2010.10.21 |
| 차세대 웹을 바라보는 차세대 시각이 필요하다 (0) | 2010.10.07 |
이것은 인식의 문제가 아니라, 게임과 웹의 시너지를 통해 게임 이용 전반의 생태계 조성에 필요하기 때문이다.
표준과 멀티 브라우저 시대가 열렸지만, 국내는 여전히 IE 가 절대강자로 군림하고 있다.
이 말은 적어도 아직까지는 국내 대상 게임서비스에서 웹 런처를 위한 ActiveX 사용을 할만(?) 하다는 것이다
(그래서 필요악이다)
문제는 해외 서비스에 있다. 해외는 갈수록 IE 점유율이 떨이지고 있다.
해외 게임사이트에 웹 런처를 고려 한다면 브라우저 호환성은 보다 심각한 문제가 된다.
이와 관련하여 넥슨의 사례를 보고자 한다.
넥슨 사이트 역시 웹 런처를 제공한다. 하지만 ActiveX 설치는 존재하지 않고 심지어 4대 브라우저를 모두 지원한다. (IE, 파이어폭스, 사파리, 오페라)
신기하던 차에 살짝 살펴보니, 웹 런처를 브라우저별 플로그인 기술로 구현된 듯 하다
그리고 플래시를 통해 설치된 플러그인 파일을 실행시키는 구조이다
즉 IE는 여전히 내부적으로는 ActiveX를 이용하고 있는 것이다.
그러나 명시적으로 ActiveX 설치는 없는 방법으로.....
설치 및 구동방식을 대략 살펴 보면,
1) 먼저 Setup.exe 파일을 수동으로 다운로드해서 설치해야 한다. 여기서 뭔가 감이 잡힐 것이다.
브라우저에서 ActiveX 를 바로 설치하는 것이 아니라 수동 설치 과정이 필요한 것이다.
이 수동설치를 통해 내부적으로 ActiveX가 설치되는 것이다
2) 이후 플래시로 만든 웹 런처 버턴을 클릭하면 수동으로 설치된 ActiveX가 실행되는 것이다
알아본 바로는 플래시의 fscommand 기능을 통해 브라우저 플러그인 실행파일을 구동시킬 수 있다고 한다.
재미있는 구조다. IE에 설치된 ActiveX는 브라우저의 추가기능관리에서 확인할 수 있다
그리고 이 파일의 위치는 아래와 같다
'C:\Documents and Settings\All Users\Application Data\Nexon\NGM'
아마도 플래시에서 접근하기 위한 영역이 필요하지 않았나 싶다
다른 브라우저를 보면 브라우저 확장기능인 플로그인으로 등록된 것을 확인할 수 있다
아래 그림은 파이어폭스에 설치된 플러그인 화면이다
그리고 아래는 구글 크롬에 설치된 모습니다
브라우저별 플러그인 기술을 각각 개발해야 하는 것인지 ActiveX 를 수동으로 설치하는 과정으로 모든 브라우저에서 가능한지 실제 구현 및 운영상 치명적인 단점은 없는 지 등 등 구체적인 내용은 아직 파악되지 않았으나 두 가지 중요한 힌트를 얻을 수 있는 좋은 기회였다
1) 웹 런처의 브라우저 호환성을 확보할 수 있다
호환성을 위한 최적의 방법론은 아닐 수 있으나 하나의 주요한 대안이 될 수 있다
2) 구현 측면에서 플래시를 이용하면 ActiveX 로 제작된 실행파일을 구동시킬 수 있다
이 방법이 좋고 나쁨이나 맞고 틀림, 혹은 꽁수이냐 등을 떠나서,
해외 서비스를 위한 웹런처 구현에 한쪽 눈을 트이게 한 좋은 소식이다
이 서비스에 대한 더 자세한 구현 방법론을 아는 분이 있다면 과감하게 댓글로 알려 주기 바란다~
'모바일' 카테고리의 다른 글
| 5대 웹브라우저, 그 이름과 로고의 의미 (1) | 2010.11.30 |
|---|---|
| 필요악? ActiveX (0) | 2010.11.25 |
| IE 8, 웹 조각(Web Slices) (0) | 2010.11.11 |
| 원소스 멀티플랫폼을 위한 기술적 현황 (0) | 2010.10.21 |
| 차세대 웹을 바라보는 차세대 시각이 필요하다 (0) | 2010.10.07 |
비판의 시작은 ActiveX의 보안 취약점 때문이었다. 다시 말해 ActiveX의 너무 과도한 권한이 문제였다.
순진한 사용자들은 ActiveX가 뭔지도 몰랐다. 그냥 설치하라니깐, '해야 되나 보다' 했다
그리고 이렇게 설치된 ActiveX를 통해 사용자 PC에서 못된 짓(?)을 하는 사례가 늘어났다
그 다음은 호환성 문제다
요즘과 같이 멀티 디바이스, 표준을 외쳐대는 시류에 IE 에서만 가능한 ActiveX는 완전 찬밥 신세다
찬밥을 넘어 굉장한 비판 대상이 되고 있다. 불쌍하게도 ActiveX는 자신을 개발 해 준MS에게게도 버림받을 상황이다
간혹 이 두 개념이 혼재되어 혼란을 야기시킨다.
ActiveX를 왜 반대하는가? 보안 취약점 때문인가 아니면 호환성 때문인가?
아마 둘다라고 하는 사람이 많을 듯 하다. 근데 간혹 이 두 개념이 혼재되어 원인과 결과가 이상하게 흐르기도 한다.
예로, ActiveX의 대안 중 하나라고 하는 Signed Applet 은 어떤가? ActiveX의 대안으로 심심찮게 언급되고 있다. 근데, 이 역시 웹의 특징을 넘어서는 권한을 가지려 한다. Signed Applet과 같은 대안 기술이 호흥을 얻는 이유는 바로 호환성이다. IE 뿐만 아니라 다른 브라우저에서도 자바 애플릿이 구동되기 때문에 대안기술로 등장한 것이다. 즉 여기서 대안이라는 측면은 보안성과는 무관하게 호환성에 초점이 맞춰진 것이다.
일단 보안 부분은 이렇다. 핵심은 웹의 샌드박스 보안 모델로 인한 제한적인 권한이다. 일반 웹 기술로는 로컬 PC 자원에 액세스 할 수 없다. 게임런처와 같은 ActiveX는 로컬 PC의 자원에 접근해야 하는데 방법이 없다. 그래서 얼씨구나 ActiveX 했다. 즉 핵심은 ActiveX가 아니라 로컬자원에 대한 권한이다. ActiveX와 Signed Applet 모두 웹의 샌드박스 이상의 권한을 부여받을 수 있기 때문에 사용하는 것이다.
그리고 절대 다수 IE 사용자들의 환경에서 ActiveX는 자연스러운 선택이었던 것이다.
이제 시대가 많이 변해서 호환성이 큰 이슈가 되고 있다.
웹 표준의 중요한 원칙도 호환성을 위한 표준 정립이다. 이런 환경에서 ActiveX는 정말 골치거리가 아닐 수 없다. 재미있는 것은 플래시나 애플릿 역시 어느정도 호환성은 보장되지만 그 역시나 웹 표준은 아니다.
즉, IE 만 가능한 ActiveX와 다른 브라우저에서 가능한 애플릿,플래시의 차이일 뿐이다.
결과적으로 간혹 ActiveX 는 애매한 해석으로 공격 당하고 있는 느낌이 든다.
(나 역시 반 ActiveX 주의자다. 말하고자 하는 것은 해석의 혼란에 있다)
그러나 개발자라면 이런 해매한 해석의 내면을 아는 사람이 꽤 많을 것이다.
문제는 트랜드를 외치는 사람들, 그리고 일반 사용자들의 애매한 해석을 꼬집고 싶다.
게임회사에 일하다 보니 웹런처로써의 ActiveX가 말그대로 필요악일때가 많다.
근래 새로운 게임 포털을 구상하는 단계에서도 이 문제는 여전히 대두되고 있다.
웹을 통한 게임 접근성의 향상과 웹의 활성화를 위해 웹 런처는 거의 필수에 가깝다.
웹런처이다!!! 즉 ActiveX가 필요한게 아니라 웹 런처가 필요한 것이다
그런데 이런 웹 런처가 가능하기 위해서는 웹의 보안 한계를 넘어서는 뭔가가 필요하다
그것이 바로 ActiveX이다(혹은 Signed Applet과 같은 것이다)
국내 사용자만을 생각한다면 더 말할 것도 없이 ActiveX 다. 외국에 비해 국내은 아직까지 IE 사용자들이 절대 다수이다. 그러나 해외를 염두한다면 상황은 달라진다. 간단하게 그냥 다운로드 시켜서 독립 exe로 하겠지만, 역시 문제는 웹의 활성화가 걸림돌이다. 여기서 호환성 대안 기술을 고려해 볼 수 있다
결국 게임으로의 접근성을 향상시키고 웹의 활성화를 위해 웹 런처가 필요악에 가깝다
그러나 사양기술인 ActiveX 를 고집하는 것도 왠지 꺼림직하다. 또한 표준화, 접근성, 호환성, 범용성이 중시되는 정신 문화에 좋은게 없는 것도 사실이다.
오늘 이런 글을 봤다.
ActiveX 와 게임회사의 공생관계.
글과 댓글을 매우 흥미롭게 읽었으며 느끼는 바가 있다.
현실과 이상의 문제라고 봐야 하나? 아니면 얻는게 있으면 잃는게 있다는 양면성의 문제인가?
그도저도 아니면 웹의 본래 철학을 넘어 서버린 ActiveX의 태생 자체가 문제였던가?
혹은 웹이 네이티브의 그것과 같이 동작하기를 바라는 비즈니스의 문제인가?
음.. 공생하고 공론해야죠. 상생인가? ㅎ
'모바일' 카테고리의 다른 글
| 5대 웹브라우저, 그 이름과 로고의 의미 (1) | 2010.11.30 |
|---|---|
| 웹런처의 브라우저 호환성, 넥슨 사례 (1) | 2010.11.26 |
| IE 8, 웹 조각(Web Slices) (0) | 2010.11.11 |
| 원소스 멀티플랫폼을 위한 기술적 현황 (0) | 2010.10.21 |
| 차세대 웹을 바라보는 차세대 시각이 필요하다 (0) | 2010.10.07 |
인터넷이 조각으로 배달된다?
IE9가 주목받는 요즘 IE8에 추가 된 기능을 언급하려하니 좀 늦은감이 없지 않다
하지만 이전에 소식으로만 접했던 IE8의 웹 조각을 다시 음미(?)해 보니 꽤 쓸만한 도구로 보인다
IE8의 웹조각은 그 이름에서 유추할 수 있듯이 웹을 조각으로 관리할 수 있는 기능이다
다시말해, 웹 페이지 중 일부 영역을 따로 떼어 그 부분만을 구독할 수 있게 해 준다
뉴스나 증권정보, 날씨정보와 같이 주기적인 업데이트가 필요한 콘텐트에 적용하기에 알맞은데,
사용자 입장에서, 그 내용을 확인하기 위해 매번 해당 웹사이트로 이동하는 불편을 해소해 준다.
웹조각을 설명한 (별로 재미는 없는) 만화가 제공된다. 아래 그림을 클릭해서 크게 보기 바란다
(출처: Internet Explorer 8 만화 5편 “웹조각")
사용자 입장, 웹 조각 사용하기
웹 조각은 사용자 편의를 위해 제공되는 IE8의 새로운 기능이다.
마치 특정 기능을 구현해 독립적인 작은 프로그램 형태로 제공하는 위젯과 유사한 기능이다.
일종의 IE8 즐겨찾기 위젯이라고도 할 수 있겠다
방문한 웹 사이트에서 웹 조각을 제공하면, IE8 도구모음에 있는 웹조각 아이콘이 활성화된다. 또한 웹 페이지의 웹 조각영역에 마우스를 올리면 역시 웹조각 아이콘이 활성화 된다. 아래 그림은 PlayNC 의 예이다
이렇게 활성화 된 웹조각 아이콘을 클릭하면 웹조각을 즐겨찾기에 추가할 수 있다. 이후 업데이트 되는 정보는 사이트에 직접 방문하지 않고 즐겨찾기 모음에 추가된 웹조각을 통해서 받아볼 수 있게 된다
개발자 입장, 웹 조각 적용하기
웹 조각은 웹 사이트를 운영하는 측에서 제공해야 이용할 수 있는 기능이다
따라서 사이트를 개발할 때 웹 조각을 위한 (매우 간단한) 코드가 정의되어 있어야 한다
아래는 가장 간단한 형태의 웹 조각 정의이다
<div class="entry-title" style="display:none">새소식 제목</div>
<div class="entry-content">
<a href="http://m.mkexdev.net">새소식 내용</a>
</div>
</div>
태그의 class 특성을 정의하면 IE8 브라우저는 이를 웹 조각으로 해석하게 된다
hslice는 하나의 웹조각 영역을 뜻하며 entry-title 와 entry-content 는 웹조각에 표시될 제목과 내용을 뜻한다
여기서 지정한 제목이 즐겨찾기에 표시되는 타이틀 제목이 되며, 예에서 숨김 처리를 한 것은 굳이 본문에 제목이 표시되지 않아도 되기 때문이다(이것은 선택이다. 제목도 웹 조각 본문에 포함되기 원한다면 보이게 하면 된다)
그리고 웹 조각은 한 페이지에 여러 개 존재할 수 있다. 다만 ID를 반드시 다르게 해 주어야 한다.
IE8이 웹 조각을 인식하는 기준은 아래와 같은 URL이기 때문에 ID를 중복해서 지정할 수 없다
따라서 웹조각 마다 각기 다른 ID를 부여해야 하며 ID만 다르다면 여러개의 웹 조각을 정의할 수 있다
http://domain/slice.html#myWebSlice
참고로 제목은 중복될 수 있지만, 즐겨찾기 항목에 동일 제목이 나열되므로 중복되지 않게 하는 것이 좋다
더불어 웹 조각 적용시 기본 크기에 따른 최적의 콘텐트 구성, 웹 조각 링크 수동 제공, 웹 조각을 위한 인증처리 등 더 세밀한 프로그램 작업이 가능하다. 이 부분은 관련 자료를 찾아보기 바란다
웹 조각, 업데이트 알림
웹 조각의 가장 큰 장점 중에 하나는 업데이트 된 정보를 쉽게 취득할 수 있다는 것이다
IE8은 웹 조각 콘텐트를 일정한 주기로 확인하여 업데이트 여부를 시각적으로 알려 주는데 아래와 같이 그 주기를 설정할 수 있다(기본: 15분)
고급설정에서는 웹 조각에 대한 보다 섬세한 설정을 할 수 있으니 참고해 보기 바란다
업데이트를 인지하는 기준?
웹 조각이 업데이트를 인지하는 기준이 뭘까?
일반적으로 웹 브라우저가 서버의 파일 변경을 감지하기 위해서는 HTTP 헤더 정보를 참조한다
즉 HEAD 요청을 통해 해당 파일의 헤더에 있는 수정 날짜가 기준이 된다
브라우저가 웹 파일을 캐시하는 것도 이런 매커니즘이 적용된다
그러나 웹 조각은 파일이 아니라 파일 내 특정 영역에 대한 업데이트이다
개념적으로는 파일의 수정 날짜가 아니라 웹 조각 영역에 대한 변경이 감지되어야 하는데 간단하게 테스트를 해 보니 일관성이 없어 보인다. 파일 변경에 따른 업데이트는 명확히 알려 지는 반면 (파일 변경을 수반하지 않는) 웹 조각 영역내의 변경은 알림이 지연되는 느낌이다. 그러나 이것은 웹 조각의 정신(?)에 위배되지 않는가..
바빠서.. 더 이상의 테스트는 그만 두고, 다음에 알아 보기로 한다
이 테스트에 사용된 코드는 아래와 같이 매우 간단한 날짜 업데이트 코드이다
즉 파일은 더 이상 수정되지 않은채 내부적으로 내용만 업데이트 되도록 하였다
<div class="entry-title" style="display:none">새소식 제목</div>
<div class="entry-content">
현재시간: <%=Now() %>
</div>
</div>
급 추가>>>
이런, 이 글을 쓰고 저장하려고 하는 시점에, 웹 브라우저에서 업데이트 알림을 보내 왔다.
그리고 이후 쭈욱 지켜보니 나름대로 일관되게 알림을 보내준다. 이전 테스트는 내 마음이 급해서 인가 보다.
.. 위의 코드, 즉 웹 조각 영역에 있는 내용에 대한 업데이트도 제대로 알림이 되는 것을 확인 하였다
그렇지. 이렇게 되어야 웹 조각의 알림이라 할 수 있겠지... 괜찮은 웹 조각 ㅎㅎ
웹 조각의 범용성?
IE8에 도입된 웹 조각이 꽤 쓸만한 도구로 보이지만 가장 문제는 범용성이다
IE8 이상의 브라우저에서만 가능하기 때문에 요즘처럼 표준과 범용성이 중시되는 환경에서는 큰 단점이다
파이어폭스3 에서도 IE8의 웹 조각을 수용하기 위해,
웹청크(WebChunks, https://addons.mozilla.org/ko/firefox/addon/8494/)라는 것을 선보였다
IE8의 구현을 그대로 계승할 수 있어 두 브라우저의 범용성이 보장되는 셈이다.
그러나 현재 최신 버전의 파이어폭스(3.6.12)에서는 이 확장 기능이 설치 되지 않는다
그리고 맥의 사파리에도 이와 유사한 개념의 '웹클립' 이라는 위젯이 제공되는데
개념적으로만 유사할 뿐 적용 방법과 기술이 달라 범용적으로 적용하기 힘든 구조이다
오페라의 경우 웹조각을 구현한다는 썰이 있는데 단지 루머수준에 머물러 있는 듯 하다
Rumor: Opera 10 to Include Web Slices
결국 웹 사이트의 사용성을 증대 시킨 '웹 조각'은 그 자체로는 유용한 면이 있지만,
실제 현업에서 적용하기에는 범용성이라는 걸림돌에 부딪히게 되는 것이다
만일 대상 고객이 IE에 한정되어 있거나 IE 사용자들에게만 부여되는 옵셔널한 기능이라면 적용할 만한 가치가 있겠다
ps. 글이 매우 급하게 작성되었다. 정신적으로 여러 현안이 겹쳐 있어 이 주제에 집중하기가 힘들다
내용에 오류가 있다면 즉시 지적 바란다
'모바일' 카테고리의 다른 글
| 웹런처의 브라우저 호환성, 넥슨 사례 (1) | 2010.11.26 |
|---|---|
| 필요악? ActiveX (0) | 2010.11.25 |
| 원소스 멀티플랫폼을 위한 기술적 현황 (0) | 2010.10.21 |
| 차세대 웹을 바라보는 차세대 시각이 필요하다 (0) | 2010.10.07 |
| Code Syntax Highlighter 툴 소개 (0) | 2010.09.30 |
소프트웨어 개발의 생산성은 개발 도구에 많이 의존한다.
흔히 개발도구는 삽 대신 포크레인으로 땅을 빠는 것과 비교된다. 그 만큼 개발 효율성을 높인다는 예기이다
HTML5 기반의 개발 역시 우수한 도구가 지원되면 개발의 생산성 향상은 물론이며 아직 표준이 완성되지 않아 업계 불안감이 내재된 특수성에도 긍정적인 효과를 줄 수 있다.
이 글에서는 지금까지 발표된 HTML5 개발 도구들을 정리해 볼까 한다
Adobe Edge
얼마전 블로그를 통해 소개했었다. 어도비에서 HTML5 개발 플랫폼을 공개했다.
기존 툴에서의 컨버팅 내보내기 같은 포팅 기능이 아니라 자체적인 HTML5 개발툴이다.
아직 본 모습은 보지 못했지만 개인적으로 매우 기대하고 있는 툴이기도 하다
: 어도비, HTML5 디자인 개발툴 엣지(Edge) 공개
: Adobe vows the "best" HTML5 tools
Flash To HTML5
아이폰 등장으로 가장 곤혹을 치런 것은 플래시이다. 잡스의 공공연한 비판과 HTML5 지원세에 어도비가 좀 흔들렸드랬다. HTML5 등장으로 가장 민감했을 것 같은 플래시가 HTML5 변환 기능을 제공하기로 했다
: 어도비, 플래시→HTML5 변환툴 공개
일러스트레이트, HTML5 Pack
얼마전 작성했던 원소스 멀티플랫폼을 위한 기술적 현황 에서도 소개한 바 있다
일러스트레이트에서도 결과물을 HTML5 관련 기술로 변환하는 일종의 포팅기능을 제공하기로 했다
: 어도비 일러스트레이터, HTML5 Pack 배포
드림위버, HTML5 Pack
웹 페이지 개발 도구로 꽤 유명한 어도비의 드림위버에서도 HTML5를 지원한다
HTML5 문서 타입과 태그를 지원하며 HTML5 기반 동영상 표현을 위한 확장 위젯도 제공된다
: 어도비, HTML5 지원에 날개를 펴다
Aptana Studio
개인적으로는 잘 몰랐지만 웹 클라이언트 개발자들에게 꽤 유명한 개발툴인 Aptana 에서도 HTML5 개발을 지원하게 된다. HTML5 용 태그의 자동완성과 브라우저 지원현황 등이 표시된다
: Aptana, HTML5를 지원하는 웹 개발 툴
Sencha Animator
HTML5 스펙과 조금 무관할 수 있으나 CSS3 역시 HTML5 계열(?)로 종종 같이 소개된다
CSS3 기반의 에니메이션 제작 툴이다.
: CSS3 애니메이션 생성기 - Sencha Animator
기타 (개발을 도와주는 유틸리티)
직접적인 개발 툴이나 포팅툴은 아니지만 HTML5기반 콘텐트 개발시 유용하게 사용될 많은 유틸리티가 제공된다.
이 블로그에서도 한번씩 언급한 내용이지만 다시 한번 모아 둔다
: jQuery Visualize, HTML5 차트 라이브러리 소개
: RGraph, HTML5 그래프 라이브러리 소개
: Modernizr 라이브러리: HTML5, CSS3 새요소 지원여부 검사
: Raphael, 자바스크립트 (벡터) 그래픽 라이브러리
: Gordon, 자바스크립트로 만든 플래시 런타임
여기까지가 개인적으로 알고 있는 HTML5 관련 개발툴이며 미처 소개하지 못한 다른 제품도 있으리라 본다.
중간중간에 새로 알게 되는 유용한 개발도구가 있다면 계속해서 블로그에 추가할 예정이다
'모바일 > HTML5' 카테고리의 다른 글
| CSS3 3D Effect (0) | 2013.08.02 |
|---|---|
| ... (0) | 2013.07.23 |
| 주요 브라우저 HTML5 지원 점수 (0) | 2010.10.27 |
| 어도비, HTML5 디자인 개발툴 엣지(Edge) 공개 (0) | 2010.10.26 |
| [CSS3] Media Queries (0) | 2010.10.25 |
역시 데모를 따라 제작하기 보다는 데모에서 사용된 코드와 흐름을 간략히 분석하는 것으로 훓어보자.
총 두개의 데모가 제공되는데, Clock app 과 To-Do app 이다. 이 두 데모는 각각 세계시간과 할일 목록을 관리하는 앱이다. 데모에서는 jQTouch 기반으로 작성되었으며 jQuey를 이용해 로직을 정의하였다
무엇보다 데모의 유용성은 jQTouch기반 웹앱의 아이디어를 보여준다는데 있다.
즉 코드의 구성보다는 웹앱에 걸맞는 jQTouch 앱의 사례를 보여준다는데 의미가 더 크다.
jQTouch가 모바일 웹앱에 초점을 맞춘 만큼 이 두 데모도 데스크탑보다는 스마트폰에서의 활용도가 높은 특징을 보여준다. 모쪼록 jQTouch를 이용하는 개발자들도 이 데모로 출발하여 가치있는 웹앱에 도전해 보기 바란다.
Clock app
GMT를 기준으로 세계시간을 표시하는 시계앱이다. 참고로 GMT는 영국의 그리니치 천문대를 중심으로 한 시간대로 그리니치 평균시라하며 대한민국의 경우 그리니치 평균시 보다 9시가 빠른 GMT+9 시간대에 속한다.
먼저 UI 구성을 살펴보면,
아래와 같이 시계 표현을 위한 각각의 이미지들이 존재하며 clock.css에서 div요소와 이미지를 매칭시키고 있다.
최초 시계구성은 addClock 함수에서 div 요소를 생성하는 것으로 처리하며 시간이 흘러가는 것은 updateClocks 함수가 1초마다 반복실행되면서 처리하도록 한다. 이때 시계의 분침,시침,초침등의 움직임은 CSS3의 transform 기능으로 정의하였다
$('.sec', $el).css('-webkit-transform', 'rotate(' + ( second * 6 ) + 'deg)');
앱이 처음 실행될 때 기본값으로 두 개의(필라델피아,로스앤젤레스) 시계가 표시되며 setInterval() 을 통해 매 1초마다 시계를 갱신시킨다
addClock('Los Angeles', -8.0); //로스앤젤레스 시계 초기화
updateClocks(); //시계 업데이트
setInterval(updateClocks, 1000); //매 1초마다 갱신
그리고 시계를 추가하기 위해 폼(form)을 이용하는데, 이전 글([jQTouch] GET, POST 전송) 의 POST로 submit 하는것이 아니라 자체 스크립트 호출로 처리하고 있다
$('#time').submit(function(){
addClock($('#label').val(), Number($('#timezone').val())); //시계추가
$('input').blur(); //포커스 제거
$('#add .cancel').click(); //cancel 클릭
this.reset(); //폼리셋
return false;
});
아래 화면은 데모를 실행한 화면이며 각각 처음화면, 시계추가, 추가된 화면이다
소스가 비교적 어렵지 않으니 직접 살펴보고 음미(?)해 보기 바란다
To-Do app
두번째 데모는 '할일 목록'을 관리하는 앱이다.
우선 데모 실행화면부터 보자.아래 실행화면을 보면 지금까지 스타일로 사뭇 달라 보인다.
이 데모에서는 기본 jQTouch 화면과 다른 스타일을 위해 css에 많은 할애을 하고 있는 것이 특징이다.
특히 타이틀바와 중간영역에 있는 짙은 밤색 처리는 백그라운드 이미지로 처리하였는데 이미지파일이 아닌 이미지 데이터 문자열로 처리하고 있다.
나머지는 일반적인 CSS 스타일 지정이며, 이와 같이 얼마든지 앱스타일을 변경할 수 있다는 것을 느끼면 되겠다
할일 목록을 추가하는 것은 submitForm 함수에서 처리하는데, incomplete 라는 ul 요소에 li를 새로 추가하는 로직이다. 앞의 체크박스도 같이!
$el = $('#add form');
if ($('#todo', $el).val().length > 1) {
var itemid = $('#home ul li').length + 1;
$('#home .incomplete').append($('<li><input type="checkbox" /> <span>' + $('#todo', $el).val() + '</span></li>'));
}
jQT.goBack();
$el.get(0).reset();
return false;
}
할일 앞의 체크박스를 클릭하면 to do 와 completed 사이를 오가는데 다음과 같은 코드로 처리한다
var $el = $(this);
if ($el.attr('checked')) {
$el.parent().prependTo('.complete');
} else {
$el.parent().appendTo('.incomplete');
}
});
참고로 Completed 하위 목록은 가운데 줄이 그어져 있는데 다음의 css로 처리된 것이다
다음은 할일 추가와 일부 제거한 모습이다.
마치며...
데모를 살펴 보면서 느낄 수 있겠지만, jQTouch를 이용한 웹앱 역시 자바스크립트, jQuery 와 같은 기본적인 웹 클라이언트 기술에 능숙한 것을 요구한다. jQTouch 가 아이폰 앱에 걸맞는 UI 구성은 도와주지만 앱의 로직 부분까지 담당하지는 않기 때문이다.
'모바일 > Javascript' 카테고리의 다른 글
| 자주 쓰는 jQuery 기능 - 이벤트 편 (0) | 2011.08.04 |
|---|---|
| 자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편 (2) | 2011.08.03 |
| [jQTouch] Extensions (확장기능) (0) | 2010.10.28 |
| [jQTouch] GET, POST 전송 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 이벤트 (0) | 2010.10.27 |
jQTouch 에서 제공하는 데모를 기준으로 빠르게 훓어보았지만 기본적인 사용법은 거의 다룬셈이다
지금까지 살펴본 내용은 UserInterface, Animations, AJAX, Callback Events 정도인데 이 이상의 내용은 jQTouch 기본 사용법과 더불어 일반 웹 개발 스킬과 아이디어가 접목되어야 그럴싸한 웹앱이 탄생할 것이다
jQTouch 데모를 기준으로 남은 것은 Extensions 와 Demo 부분인데, 먼저 Extensions 를 살펴보자
Extensions 은 말그대로 일종의 jQTouch 확장 기능인데 이 글에서는 데모 코드를 따라 작성하기 보다는 jQTouch 기본 데모를 소개하는 수준에서 글을 마칠까 한다.
jQTouch 는 기본적인 라이브러리 기능에 추가해서 덧 붙일 수 있는 확장 기능을 정의할 수 있도록 구조화되어 있는데, 마치 플러그인과 유사한 느낌이다. jQTouch 객체에 addExtension 함수를 통해 확장 함수를 등록할 수 있으며 이 함수가 정의된 js 파일은 떼었다 붙일 수 있도록 별도의 파일로 정의하기를 권장한다.
ver1 beta2 에서는 총 4개의 확장 기능을 제공하며 extensions 폴더에 각각 독립된 js파일로 구성되어 있다
jQTouch 가 제공하는 4개의 확장 기능을 간략히 살펴보자
Auto Titles
먼저 자동 타이틀이다. 말 그대로 타이틀을 자동으로 구성해 주는 확장기능인데 링크로 페이지 이동시 링크 제목을 타이틀 내용으로 사용한다. 아래 화면처럼 Oranges링크를 클릭하면 타이틀의 내용이 자동으로 Oranges가 된다.
Auto Titles 확장 기능을 정의한 파일은 jqt.autotitles.js 파일인데 div 요소가 교체될 때 발생하는 pageAnimationStart 이벤트를 통해 해당 기능을 구현하고 있다
Floaty Bar
페이지에 둥둥 떠서 스크롤에 따라 자동으로 이동하는 보조 바(bar)인 플로티 바를 제공한다.
아래 화면처럼 플로티바가 페이지 위에 나타나며 스크롤 이동에 자동으로 반응한다. 그리고 Bar를 숨기거나 토글시킬 수 있다. jqt.floaty.js 파일에 로직이 정의되어 있으며 플로티 바로 사용할 div 요소에 makeFloaty, scrollFloaty, toggleFloaty, hideFloaty 등의 함수를 구성해 준다
GeoLocation
현재 위치를 위도와 경로로 반환하는 확장 기능인데 내부적으로 HTML5의 Geolocation 스펙을 이용하고 있다
참고: [HTML5] Geolocation
단말기가 Geolocation 기능을 지원해야 하며 사용자가 위치정보 제공에 동의해야 사용이 가능하다.
아래 화면은 크롬 브라우저에서 실행한 결과이다. jqt.location.js 파일에 로직이 정의되어 있다
Offline
인터넷 연결이 끊긴 오프라인 상태에서도 웹앱을 이용할 수 있도록 지원하는 확장기능인데 내부적으로 HTML5 의 Application Cache 스펙을 이용하고 있다
참고: [HTML5] 오프라인 웹 어플리케이션
서버에 캐시될 파일을 정의한 메니페스트파일(.manifest) 파일이 존재해야 하며 MIME타입이 설정되어 있어야 한다.
jQTouch 에서는 이 모든 파일을 제공해 주므로 서버설정만 맞춰주면 된다. 그리고 자동으로 캐시 업데이트 및 캐시 관리를 수행해 주기 때문에 오프라인 환경을 쉽게 개발할 수 있다.
아래는 데모 화면인데 페이지의 모든 리소스를 로컬에 저장했으며 오프라인 상태에서도 실행할 수 있다는 안내이다
이것으로 jQTouch 가 제공하는 4가지 확장 기능에 대해 간략히 살펴 보았다.
참고로 이 확장기능도 좋지만 더 유용한 기능이 있다면 얼마든지 커스텀하게 확장할 수 있을 것이다.
jQTouch 는 기능을 쉽게 확장할 수 있도록 구조화되어 있으며 아이디어만 있으면(그리고 자바스크립트, jQuery 에 대한 지식) 개발자 개개인이 참신한 확장기능을 구현하여 널리 사용자를 이롭게(?) 할 수 있을 것이다
'모바일 > Javascript' 카테고리의 다른 글
| 자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편 (2) | 2011.08.03 |
|---|---|
| [jQTouch] Demos 훓어보기 (0) | 2010.10.28 |
| [jQTouch] GET, POST 전송 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 이벤트 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (0) | 2010.10.26 |
POST 전송부터 살펴보자.
POST 전송은 웹 페이지의 폼(form) 양식을 서버로 전송하는 규칙인데, jQTouch 에서는 POST전송을 내부적으로 Ajax 호출로 처리한다. 그리고 POST 처리 결과를 받아서 자동으로 페이지요소를 생성, id를 부여하여 자연스럽게 jQTouch 화면으로 구성해 준다. 이 결과 처리 부분이 참으로 독특하다
우선 데모를 보자. 아래는 POST 전송을 위한 클라이언트 측 코드이며 폼양식이 정의되어 있다
코드에서는 전형적인 웹 페이지의 폼 요소 정의를 볼 수 있으며 일부 jQTouch용 class 속성이 이용되었다
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: [
'../../themes/jqt/img/back_button.png',
'../../themes/jqt/img/back_button_clicked.png',
'../../themes/jqt/img/button_clicked.png',
'../../themes/jqt/img/grayButton.png',
'../../themes/jqt/img/whiteButton.png',
'../../themes/jqt/img/loading.gif'
]
});
</script>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>POST Demo</h1>
</div>
<ul class="rounded">
<li><a href="#form1">Form</a></li>
</ul>
</div>
<form id="form1" action="server.asp" method="POST" class="form">
<div class="toolbar">
<h1>Post Demo</h1>
<a class="back" href="#">Back</a>
</div>
<ul class="rounded">
<li><input type="text" name="param" value="" placeholder="Typed Post Message" /></li>
</ul>
<a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="submit whiteButton">Submit</a>
</form>
</body>
</html>
폼을 전송할 대상은 server.asp 이다.
server.asp 는 폼 데이터를 전송받아 처리하는 서버측 파일로 php, jsp, asp, aspx 등 어떤 것을 사용해도 무방하다. 여기서는 폼 데이터를 전달받아서 출력하는 매우 단순한 코드를 정의하였다
param = request.form("param")
Response.Write param
%>
<div>
<div class="toolbar">
<h1>Server</h1>
<a class="back" href="#">Back</a>
</div>
<ul class="rounded">
<li href="#"><%=param %></li>
</ul>
</div>
이 코드 역시 매우 단순한 형태로 전달받은 데이터를 출력하고 일부 목록을 생성하여 출력하는 형태이다
서버측코드를 해석하기 위한 웹서버가 존재해야 하며 필자의 경우 IIS 기반이라 asp 를 이용하였다
다음은 데모를 실행한 화면이다. 텍스트상자에 글을 입력하고 전송하면 결과를 출력한다
신기한것은 server.asp 의 결과화면이다
server.asp 코드 그 어디에도 jQTouch 관련 설정이 없다. 그런데도 결과화면은 보는 바와 같이 jQTouch 화면으로 나오고 있다. 그래서 내부 구조를 좀 확인하고자 jQTouch 핵심 엔진인 jqtouch.js 파일을 들여다 봤다.
아니나 다를까 결과 화면은 jQTouch 로직에 의해 자동으로 생성되는 것을 확인할 수 있었다
그리고 호출은 jQuery 용 Ajax 가 이용되었고 결과화면 링크는 page-1, page-1... 형태로 자동 부여 된다
jqtouch.js 파일을 보면 POST 전송의 시작은 submitForm() 함수이며 showPageByHref() 함수를 거쳐
$.ajax({ ... }); 로 전송이 이루어지며 결과화면의 자동 생성을 위해 insertPages() 함수로 이어진다
insertPages() 함수에서 페이지 요소를 생성하고 자동 증가 id를 부여하고 결과화면으로 구성한다
따라서 결과화면의 요청 URL을 보면 아래와 같이 자동으로 부여된 id page-(number++)형태가 된다
http://yourdomain/jQTouch/demos/test/formNpost.html#page-1
참. 재미있는 구조다.
GET 요청도 거의 유사한 매커니즘이다.
jQTouch 는 <a href="targetPage.asp"> 와 같은 기본 링크는 모두 Ajax 호출로 처리하고 결과 화면을 자동으로 구성해 준다. 이전에 jQTouch 페이지 전환에 대한 내용을 다룬적이 있는데 그 글에서는 완전한 외부링크를 다루었었다. 즉 target 설정으로 '_blank' , '_webapp' 혹은 rel='external' 속성을 줘서 jQTouch 에서 완전히 분리된 외부링크를 호출하는 것이다 => [jQTouch] 페이지 전환
반면 Ajax를 통한 GET 요청은 jQTouch 의 내부 알고리즘에 의해 Ajax호출로의 변환, 결과화면 자동구성이 지원되는 것이다. 사실 jQTouch 에서 외부링크로 호출하는 경우는 많지 않을 것으로 보인다.
코드는 거의 유사하여 일부 코드 조각만 제시한다. a 태그에 target, rel 속성이 없다는 것을 확인하자
<li><a href="serverGet.asp?param=Hello! GET Request~">GET Request</a></li>
</ul>
서버측 코드는 GET 요청이므로, requery.form 대신 request.querystring로 전달받는다.
실행화면은 다음과 같다
'모바일 > Javascript' 카테고리의 다른 글
| [jQTouch] Demos 훓어보기 (0) | 2010.10.28 |
|---|---|
| [jQTouch] Extensions (확장기능) (0) | 2010.10.28 |
| [jQTouch] 페이지 전환 이벤트 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (0) | 2010.10.26 |
| [jQTouch] 페이지 전환 (0) | 2010.10.26 |
: [jQTouch] 페이지 전환
보통 웹 페이지는 자신이 처음 로드될 때 그리고 페이지를 빠져나갈 때 각각 이벤트를 걸 수 있다
즉 페이지가 처음 표시될 때 load 이벤트, 페이지를 이탈할 때 unload 이벤트가 발생하여 원하는 작업을 처리할 수 있다.
jQTouch 에서 일반적으로 사용하는 페이지 전환은 뷰의 교체 즉 페이지내 div 요소로의 이동이다.
즉 하나의 페이지에 정의된 div의 교체이기 때문에 위와 같은 한 페이지 기반의 로드,언로드 이벤트 처리가 적합하지 않다. 따라서 div 가 교체될 때 그리고 div 를 이탈할 때 발생하는 이벤트가 따로 존재해야 한다
jQTouch 는 이와같은 당연한 논리구조를 알고 있으며 적절한 이벤트를 제공해 주고 있다
바로 pageAnimationStart, pageAnimationEnd 이벤트가 그것이다
페이지 전환 즉 div 의 교체는 slide, slideup 과 같은 에니매이션효과로 전환되며 이 에니매이션 효과에 대해 이벤트를 추가하는 방식이다
페이지 전환, 이탈 두 시점에 pageAnimationStart, pageAnimationEnd 모두 발생하며 각각 전환 에니매이션의 시작과 끝을 알린다. 또한 이벤트 함수로 전달되는 매개변수의 direction 속성을 통해 페이지의 전환, 이탈을 구분할 수 있다. (direction가 in 인 경우: 페이지 전환 , out 인 경우: 페이지 이탈)
아래 화면은 차례대로 페이지를 처음 이동한 것과 뒤로갔다가 다시 돌아왔을대의 결과 화면이다
첫 이동 시 에니매이션 시작과 끝을 알리는 두 이벤트가 모두 발생하였고 Back 했을 때 역시 두 이벤트가 발생하였다. 다만 direction 속성이 in 과 out 으로 페이지의 전환,이탈을 구분하고 있다. 이로써 일반적인 웹페이지 링크 모델에서의 페이지 로딩,언로딩 이벤트 효과를 jQTouch div 교체 모델에서도 적용할 수 있는 것이다.
코드는 jQTouch가 제공하는 데모코드와 동일하며 jQuery 문법이 사용 되었음을 알 수 있다
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: [
'../../themes/jqt/img/back_button.png',
'../../themes/jqt/img/back_button_clicked.png',
'../../themes/jqt/img/button_clicked.png',
'../../themes/jqt/img/grayButton.png',
'../../themes/jqt/img/whiteButton.png',
'../../themes/jqt/img/loading.gif'
]
});
$(function(){
// Page animation callback events
$('#pageevents').
bind('pageAnimationStart', function(e, info){
$(this).find('.info').append('Started animating ' + info.direction + '… ');
}).
bind('pageAnimationEnd', function(e, info){
$(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');
});
});
</script>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Page Switch Event</h1>
</div>
<ul class="rounded">
<li><a href="#pageevents">Page Switch Event</a></li>
</ul>
</div>
<div id="pageevents">
<div class="toolbar">
<h1>Page Switch Event</h1>
<a class="back" href="#">Back</a>
</div>
<div class="info" style="font-weight: normal;">
</div>
</body>
</html>
'모바일 > Javascript' 카테고리의 다른 글
| [jQTouch] Extensions (확장기능) (0) | 2010.10.28 |
|---|---|
| [jQTouch] GET, POST 전송 (0) | 2010.10.27 |
| [jQTouch] 페이지 전환 효과 (에니메이션 효과) (0) | 2010.10.26 |
| [jQTouch] 페이지 전환 (0) | 2010.10.26 |
| [jQTouch] 목록 스타일 (1) | 2010.10.25 |
이전에 브라우저별 HTML5 호환성 점수를 살펴 본 적이 있다
=> 브라우저의 HTML5 호환성 점수
현 시점에 주요 브라우저들이 최신 버전을 속속 내 놓고 있다
브라우저들의 HTML5 지원 점수를 계산해 준 글이 있어 소개한다
: HTML5: Internet Explorer 9 (IE9) vs. Google Chrome 8 vs. Firefox 4 vs. Opera 11 vs. Safari 5
Internet Explorer 8 – 32
Internet Explorer 9 Beta – 80
Firefox 3.6.10 – 145
Firefox 4 Beta 6 – 235
Google Chrome 7.0.517.41 – 248
Google Chrome 8.0.552.11 Beta – 262
Opera 11 Alpha – 223
Opera 10.63 – 203
Safari 5.0.2 – 178
WebKit r70433 – 196
377 만점 기준으로 나온 점수이다
크롬 브라우저가 가장 높은 점수를 보이며 기대했던 IE9 는 베타라고는 하지만 예상보다 실망스럽다
'모바일 > HTML5' 카테고리의 다른 글
| ... (0) | 2013.07.23 |
|---|---|
| HTML5 개발을 도와주는 도구들 (4) | 2010.11.01 |
| 어도비, HTML5 디자인 개발툴 엣지(Edge) 공개 (0) | 2010.10.26 |
| [CSS3] Media Queries (0) | 2010.10.25 |
| 2011년 8개 IT 메가 트렌드, HTML5 역할 언급 (0) | 2010.10.21 |
