블로그를 후리자 ::

브라우저 문서 영역 크기 구하기

컴퓨터/웹 2008/06/09 10:57

브라우저의 문서 영역의 크기를 구할때
현재 보여지는 부분의 크기(clientWidth, clientHeight)와
실제 존재하는 부분의 크기(scrollWidth, scrollHeight)를 사용하게 되는데,

이게, 브라우저마다 또 표준 DTD 인지 여부에 따라 구하는 방법이 모두 상이하다.
그래서 간단한 함수로 만들어봤다.

IE5, IE55, IE6, IE7, IE8, FF2, Safari3, Opera9 에서 테스트 됨 (Language : javascript)

/**
* 브라우저 document 영역의
* clientWidth/clientHeight, scrollWidth/scrollHeight 구하기
*
* @author hooriza
*/
function getClientSize() {
var oDoc = document[document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body'];
if (/Opera/.test(navigator.userAgent)) oDoc = document.body;
return [
oDoc.clientWidth,
oDoc.clientHeight
];
}
function getScrollSize() {
var oDoc = document[document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body'];
if (/Opera|Safari/.test(navigator.userAgent)) oDoc = document.body;
// IE6 미만이면
if (/MSIE\s([0-9]+(\.[0-9]+)*)/.test(navigator.userAgent) && parseFloat(RegExp.$1) < 6) {
var aOld = [ oDoc.scrollLeft, oDoc.scrollTop ];
var aClient = getClientSize();
oDoc.scrollLeft = 999999;
oDoc.scrollTop = 999999;
var aRet = [
oDoc.scrollLeft + aClient[0],
oDoc.scrollTop + aClient[1]
];
oDoc.scrollLeft = aOld[0];
oDoc.scrollTop = aOld[1];
return aRet;
}
return [
oDoc.scrollWidth,
oDoc.scrollHeight
];
}

IE5.5 이하의 경우는 당췌 scrollWidth, scrollHeight 가 제대로 얻어지질 않아서 꽁수를 사용했다;

영양가 있는 포스팅인가요: (총 4분이 투표해서 3.0점) 3.0점

자바스크립트

트랙백 0 : 댓글 4 :

브라우저별 이벤트 정리

컴퓨터/웹 2008/05/16 22:15

주옥과 같은 자료
http://www.quirksmode.org/dom/events/index.html

존재조차 몰랐던 이벤트도 많이 있구나.

영양가 있는 포스팅인가요: (총 1분이 투표해서 2.0점) 2.0점

이벤트, 자바스크립트

트랙백 1 : 댓글 2 :

빠르게 클릭 못 하게 막기

컴퓨터/작업물 2008/05/14 15:13

빠르게 클릭해도 문제가 생기지 않도록 만드는게 맞는 방향이긴 하지만,
여러가지 이유로 빠르게 클릭할 수 없게 만들고 싶은 경우 사용할 수 있는 스크립트이다.

몇 달 전에 만들었던 거.

(Language : javascript)

function protectAbusing(oEl) {
var key = oEl.getAttribute('_pabuse');
var bef = 0;
if (!key) {
key = 'U' + (new Date().getTime() * 1000000 + parseInt(Math.random() * 1000000));
oEl.setAttribute('_pabuse', key);
} else {
bef = arguments.callee._clickTimes[key];
}
var now = new Date().getTime();
arguments.callee._clickTimes[key] = now;
// 마지막으로 클릭한지 1초가 넘었으면 true 리턴
return (now - bef) > 1000;
}
protectAbusing._clickTimes = {};

사용은 아래처럼 하면 된다.

(Language : html4strict)

<a href="http://hooriza.com/" onclick="return protectAbusing(this);">

끝.

영양가 있는 포스팅인가요: (총 1분이 투표해서 5.0점) 5.0점

자바스크립트

트랙백 0 : 댓글 4 :

만드는 중간에 갈아엎은 것 까지 포함하면 대략 5번째 만드는 CSS 셀렉터 엔진.
맨 처음에 만들었던거는 아마 이거였던 것 같다.

매번 만들때마다 만들고 나서 아쉬움이 남았었는데,
이번에 완성한 셀렉터 엔진은 꽤나 만족스럽다.

속도도 꽤나 향상되서 다른 여타 프레임웍에 있는 셀렉터 엔진과 비견할 만큼의 퍼포먼스는 보이는 듯 하다.

아래는 내 노트북에서 Firefox2 로 속도를 비교해 본 결과. (셀렉터 5회 반복)
맨 오른쪽꺼가 이번에 만든거다.

사용자 환경이나 브라우저, 셀렉터 종류마다 차이는 있겠지만 Firefox 와 IE 에서는 다른 셀렉터 엔진이랑 비교했을때 가장 빠른 속도를 보여준다.

작년 겨울, Ajaxian 에서 DomQuery - A lightweight CSS Selector / Basic XPath implementation 포스팅을 보고 저 속도를 어찌나 동경해 왔던가.

그래서 Ext.DomQuery 랑도 1:1 로 비교해봤다. (Firefox2 - 셀렉터 50회 반복)

엎치락 뒤치락 하더니 마지막 nth-child 가상 클래스 부분에서 선전하면서 승리!
아 좋아~ (하지만 XPath 는 지원하지 않는다..)

이번에 사용상의 지원 범위로 신경 쓴건 :not 가상 클래스의 지원과 [type="val\"ue"] 형태나 :contains('I\'m a boy') 형태의 역슬래시 escape 를 사용한 표현의 지원.

추가적으로 특징적인 기능은 빈칸, >, +, ~ 연결자와 반대되는 기능의 연결자가 있다는거.
이를테면,

(Language : javascript)

cssquery("input ! div"); // input 상위에 있는 div
cssquery("span !> div"); // span 바로 위에 있는 div
cssquery("ul !+ div"); // ul 의 바로 앞에 있는 div
cssquery("p !~ div"); // p 의 앞 쪽에 있는 div

이런 식의 연결자를 (CSS 표준은 아니지만) 사용 할 수 있다.

소스 공개는 사내에서 좀 더 확인 과정을 거치고 할 듯.

영양가 있는 포스팅인가요: (총 3분이 투표해서 1.7점) 1.7점

CSSQuery, 자바스크립트

트랙백 0 : 댓글 5 :

alert 창 너무 많이 안 뜨게

컴퓨터/웹 2008/05/06 23:24

자바스크립트로 개발할때도 여러가지 디버깅툴이 있지만
가장 간단하고 애용되는 디버깅툴(?)은 바로 alert 이다-_-

하지만 이 alert 을 사용해서 디버깅할때의 문제중 하나가
뭔가 루프를 잘못 돌아 무한 alert 이 뜨는 경우가 생길 수 있다는 것.

브라우저에서 무한 alert 이 떠버리면 브라우저 프로세스를 죽여버리지 않는 이상 벗어날수가 없다.

그런 상황마다 매번 브라우저 죽였다가 다시 띄우고 하는게 여간 성가신 작업이 아닌데...
그래서 만들어 봤다-_-

무한 얼럿 방지 스크립트 (Language : javascript)

/**
* @author http://hooriza.com/
*
* 무한 얼럿 방지 스크립트-_-
*/
(function() {
window._alert = window.alert;
window.alert = function(s) {
var f = arguments.callee;
if (f.ignore) return;
f.count = (new Date().getTime() - f.last < 500) ? f.count + 1 : 0;
if (f.count >= 10) {
if (confirm('앞으로 alert 무시?')) f.ignore = true;
f.count = 0;
}
var r;
if (!f.ignore) r = window._alert(s);
f.last = new Date().getTime();
return r;
};
window.alert.count = 0;
window.alert.last = 0;
})();

사용방법은... 그냥 위의 코드만 넣어주면 된다.

0.5초 이내의 시간 간격으로 얼럿창이 10번 이상 뜨게되면 confirm 창이 하나 뜨게 되고 여기서 확인을 누르면 이후의 alert 은 모두 무시된다.

잘라고 불 끄고 누워있다가 갑자기 생각나서 일어나 만들었다.
제길;

이제 진짜로 자야지.

내용추가 :
간단하게 사용하고 싶으신 분은 아래 코드만 HTML 상단에 추가해서 쓰세요.

(Language : html4strict)

<script src="http://hooriza.com/js/alert.js" type="text/javascript" language="javascript"></script>

영양가 있는 포스팅인가요: (총 2분이 투표해서 3.5점) 3.5점

alert, 자바스크립트

트랙백 0 : 댓글 3 :

자바스크립트 함수의 함수 오버로딩

컴퓨터/웹 2008/04/08 16:20

아래 올린 타입검사 코드를 사용하여 오버로딩을 구현했다.
같은 함수명으로 여러가지 서로 다른 타입의 인자를 받아들이는 함수를 등록하면 호출 시 가장 적당한 함수를 찾아서 실행해주는 식이다.

(Language : javascript)

/**
* 함수 오버로딩
*
* @author hooriza
*/
Function.prototype.overload = function(fpAddFunc) {
var fpRet = this;
// 이미 오버로드 된 함수인지
var bOverloaded = this._overloaded ? true : false;
// 오버로드 안 되어 있으면
if (!bOverloaded) {
fpRet = function() {
var aLists = arguments.callee._overloaded;
var fpRaw = null;
// 인자갯수까지 완벽히 일치하는걸로 실행
for (var i = 0, fpMethod; fpMethod = aLists[i]; i++) {
if (fpMethod.typesMatch) {
if (fpMethod.typesMatch(arguments, true))
return fpMethod.apply(this, arguments);
} else if (!fpRaw) {
fpRaw = fpMethod;
}
}
// 대충 맞는 거라도 실행
for (var i = 0, fpMethod; fpMethod = aLists[i]; i++) {
if (fpMethod.typesMatch && fpMethod.typesMatch(arguments, false))
return fpMethod.apply(this, arguments);
}
// 아예 types 안 정해진 함수 실행
if (fpRaw) return fpRaw.apply(this, arguments);
// 실행 할 메쏘드 없음 예외 발생
throw new Error('Not found the matched method');
};
fpRet._overloaded = [ this ];
}
fpRet._overloaded.push(fpAddFunc);
return fpRet;
};

사용은 아래처럼 한다.

(Language : javascript)

var foo = function(nNumber) {
alert('숫자!');
}.types(Number);
foo = foo.overload(function(sStr) {
alert('문자열!');
}.types(String));
foo = foo.overload(function(nNumber, aArray) {
alert('숫자랑 배열!');
}.types(Number, Array));
foo = foo.overload(function(oAnything) {
alert('아무거나');
});
foo(10); // 결과 : 숫자!
foo('hello'); // 결과 : 문자!
foo(10, []); // 결과 : 숫자랑 배열!
foo({}); // 결과 : 아무거나

이를 사용하면 클래스를 구현할때 메쏘드 오버로딩이 가능하도록 개발할 수 있다.

영양가 있는 포스팅인가요: (총 1분이 투표해서 0.0점) 0.0점

오버로딩, 자바스크립트

트랙백 0 : 댓글 6 :

자바스크립트 함수의 인자 타입 검사

컴퓨터/웹 2008/04/08 16:12

약타입 언어인 자바스크립트에서는
기본적으로 함수의 인자 타입의 검사를 하지 않는다.

하지만 함수가 아무 타입의 값을 받아들일 수 있다는 것이
아무 타입의 값을 넣어도 정상작동 한다는 의미는 아니기 때문에
간혹 타입 검사가 필요한 경우가 있다.

그 경우는 보통 아래처럼 짜기 나름.

(Language : javascript)

function foo(nNumber) {
if (typeof nNumber != 'number') {
// throw new Error('숫자를 넣어주세요');
return;
}
// ... 코드생략 ...
}

이번에 짠 코드는 이런 코드타입 검사를 손쉽게 해주는 Function.prototype 의 확장기능이다.

(Language : javascript)

/**
* 함수 사용 타입 설정
*
* @author hooriza
*/
Function.prototype.types = function() {
var fpFunc = this;
var aTypes = arguments;
var fpRet = function() {
var r;
if (!arguments.callee.typesMatch(arguments, false))
throw new Error('Illegal arguments');
r = fpFunc.apply(this, arguments);
return r;
};
fpRet.typesMatch = function(aArgs, bStrict) {
if (bStrict && aArgs.length != aTypes.length) return false;
var oArg, oType;
// 미리 정해진 타입의 갯수만큼 루프돌기
for (var i = 0, len = aTypes.length; i < len; i++) {
oArg = aArgs[i];
oType = aTypes[i];
// 정해진 타입에 따라 체크하는 방법이 다름
switch (oType) {
case String:
if (typeof oArg != 'string') return false;
break;
case Number:
if (typeof oArg != 'number') return false;
break;
case Object:
if (typeof oArg != 'object' && !(oArg instanceof Array)) return false;
break;
default:
if (!(oArg instanceof oType)) return false;
}
}
return true;
};
return fpRet;
};

사용은 아래처럼 한다.

(Language : javascript)

var foo = function(nNumber, sStr) {
// ...
}.types(Number, String);
foo(100, 'hello'); // OK
foo(100); // 예외발생
foo('hello'); // 예외발생
foo(100, 'hello', 'more'); // OK

뭐 이런 식.
이를 응용해서 메쏘드 오버로딩 기능을 만들 수 있다.

영양가 있는 포스팅인가요: (아무도 투표를 안 했어요) 0점

자바스크립트

트랙백 0 : 댓글 4 :

로그인

블로그 잔여 트래픽

현재 휘발유, 경유가

제일 영양가 많은 글

제일 영양가 없는 글

최근에 올라온 글

최근에 달린 댓글

최근에 올라온 방명록 글

최근에 받은 트랙백

통계

'자바스크립트'에 해당되는 글 64건

브라우저 문서 영역 크기 구하기 (4)

브라우저별 이벤트 정리 (2)

빠르게 클릭 못 하게 막기 (4)

3번째 만드는 CSS 셀렉터 엔진 (5)

alert 창 너무 많이 안 뜨게 (3)

자바스크립트 함수의 함수 오버로딩 (6)

자바스크립트 함수의 인자 타입 검사 (4)

오페라에서는

이벤트 객체의 보관 (5)

자바스크립트 Memory Leak Detector (1)

브라우저 문서 영역 크기 구하기

브라우저별 이벤트 정리

Subject: 브라우저별 이벤트 정리

빠르게 클릭 못 하게 막기

3번째 만드는 CSS 셀렉터 엔진

alert 창 너무 많이 안 뜨게

자바스크립트 함수의 함수 오버로딩

자바스크립트 함수의 인자 타입 검사