2012년 4월 15일 일요일

Javascript Chaining Pattern

Javascript Chaining Pattern


<script type="text/javascript">
/*
Title: Chaining Pattern
made by 스티브Park ㅋㅋㅋㅋㅋ

*/
var test = {
val1 : 2
, val2 : 3
, total : 0
, plus : function(){ // 2+3 을 계산하여 total값을 새로 설정
this.total = this.val1 + this.val2
return this;
}
, minus1 : function(){ // total값에 - 2를 뺀 값을 total에 다시 설정
this.total = this.total - this.val1
return this;
}
,alert : function(){ //메시지 출력
alert(this.total);
}
};
test.plus().minus1().alert(); //plus에서 2+3을 더하고 이값을 minus1을 실행함으로써 -2한다 그리고 출력


//좀더 응용한 plus 계산기
var cal = { //계산기
sum : 0 //합을 저장한다
,add : function(){ //인자값을 받아 합친다
var arg = arguments
, argLength = arguments.length
, i = 0;
for (; i < argLength; i+=1){ //받은 인자값을 저장
this.sum += arg[i].parseNum(); // parseNum() : 문자열일 경우 숫자로 변경해 합침
}
return this; //합친 값을 넘김
}
,alert : function(){ //메시지 출력
alert(this.sum);
}
};

Object.prototype.parseNum = function(){ // parseNum() : 문자열일 경우 숫자로 변경해 합침
var num = parseFloat(this);
if( isNaN(num) ) return "0";
return num;
}

cal.add(1,2).add(4).alert(); //1+2 +4 출력 , result = 7
cal.sum = 5; //sum을 5로 다시 셋팅
alert(cal.sum); //sum에 5가 저장된게 보여짐 5출력
cal.add(3,4).add(5).alert(); //sum에 저장된 5 + 3+4 + 5 가 계산됨 17출력

</script>
 
 응용해서 작업 하면 좋을거같다

2012년 4월 12일 목요일

자바스크립트의 호이스팅이란?

자바스크립트의 호이스팅이란?

------------------------------------------------------------
유효영역(scope) 란?
자바스크립트에서 지역변수의 유효영역(scope)는 함수의 블록({}) 레벨에만 국한됩니다. 

var x = 1;
console.log(x); 1
if (true) {
     var x = 2;
     console.log(x); //2
}
console.log(x); //2

이러한 이유로 자바스크립트의 유효영역은 함수 레벨 유효 영역(function-level scope)라고 합니다. 하지만 C언어의 경우 유효영역이 함수에만 국한되지 않습니다. 

#include <stdio.h>
int main() {
     int x = 1;
     printf("%d", x); //1
     if (1) {
          int x = 2;
          printf("%d", x); //2
     }
     printf("%d", x); //1
}

C언어는 자바스크립트와 다르게 if의 블록도 하나의 유효 영역이 됩니다. 이러한 이유로 C에서의 유효영역은 블록 레벨 유효 영역(block-level scope)라고 합니다. 

------------------------------------------------------------
함수 선언문(function declaration)과 함수 표현식(function expression)

자바스크립트에서 함수 선언문과 함수 표현식은 다르다. 다음 코드는 함수 선언문입니다.

function foo() {}

하지만 이것 외에 모든 것은 함수 표현식입니다. 

//익명 함수 표현식
var a = function () {
     return 3;
};

//익명 즉시 실행 함수 표현식 
(function() {})();

//기명 함수 표현식. 이것은 또한 클로저 
var a = function bar() {
     return 3;
}

//기명 즉시 실행 함수 표현식. 이것은 또한 클로저  
(function bar() {
     alert('hello!');
})();

이것의 차이는 분명한데  자바스크립트 인터프리터가 함수 선언문을 만나면 부모 함수 vo라는 key-value 공간(Scope공간)에 이 함수 객체를 참조하고 다음과 같은 일을 합니다.

function test( a, b ) {
     var c, d;
     c = 10;
     foo();
     //함수 선언문
     function foo() {
     }
     //함수 표현식
     d = function bar() {
     };
     d();

인터프리터가 함수의 정의를 해석하는 경우에는 다음과 같이 처리합니다. (완벽하지 않지만 흐름을 이해해주면 좋을 것 같습니다.)

//함수 해석시 
test = new; //해쉬맵 생성 
test.prototype = new Object();
test.vo = new VO();
test.vo.__parent__ = [부모 함수의 vo 참조. 여기선 window함수의 vo];
test.vo.c = undefined;
test.vo.d = undefined;
test.vo.a = 0;
test.vo.b = 1;
test.vo.foo = <foo>function;
test.arguments = null;
test.this = undefined;
test.vo.__parent__.test = test;

위 과정이 완벽하지 않지만 핵심은 test라는 해쉬맵 인스턴스를 생성하고 프로토타입과 vo 공간등을 만들고 마지막에 부모 함수의 vo에 test라는 키로 생성된 해쉬맵을 값으로 추가하도록 합니다. vo에는 var로 선언된 변수와 인자(arguments) 그리고 내부에 선언된 함수 선언문의 참조가 key-value로 잡히는 것도 확인하세요. 참고로 대신 부모함수인 window의 vo.__parent__는 null입니다. 그래서 이 사실이 프로토체인처럼 스코프 체인의 끝을 의미합니다. 

또한 중요한 것은 test 함수 내부에 선언된 함수 선언문과 함수 표현식이 어떻게 해석되는지 눈여겨 봐주세요. 함수 선언문의 경우에는 해석시 바로 vo에 참조되지만 함수 표현식은 그렇지 않습니다. 즉 함수 표현식은 실행 때 해석하고 동작시킨다는 의미입니ㅏ.  

실제로 test(3, 4)로 실행하게 되면 test.apply( null, [3, 4] ) 처럼 실행되고 실행 컨텍스트가 window가 되기 때문에 다음과 같은 과정을 거치게 됩니다.

//함수 실행시 
EC = window.EC; //실행 컨텍스트(EC)
ECStack.push(EC);
EC = test.vo.clone(); //vo가 복사된다. 그래서 vo가 복잡하면 함수 실행할 때마다 성능에 영향을 줄 수 있다.
EC.arguments = {'0': 3, '1': 4, length:2};
EC.a = EC.arguments[0];
EC.b = EC.arguments[1];
EC.this = window;
(함수실행)
c = 10; //실행시에 vo에 있는 c를 찾아 10을 할당합니다. 만약 vo에 c가 없었다면 vo.__parent__, 즉 window 함수의 vo를 탐색할 것입니다. 이것이 바로 vo로 만들어지는 스코프 체인입니다. 스코프 체인을 통해 발견되지 않으면 객체 프로토타입 탐색이 이뤄집니다.
foo(); //함수 선언문이 실행됨. test함수의 vo객체에 key-value로 참조된 foo함수가 실행되는 것이다.
d = <bar>function;
d(); //함수 표현식이 실행됨. bar함수는 test함수가 실행될 때 해석되고 구동된다. 
(함수실행끝)
ECStack.pop();

이렇듯 함수 선언문과 함수 표현식은 인터프리터에 의해 다른 시점에 해석되고 구동됩니다.

------------------------------------------------------------
var 선언 
앞서 설명한 대로 함수가 인터프리터에 의해 해석되는 순간 하나의 해쉬맵 인스턴스가 만들어지고 VO 공간이 형성됩니다. 이 때 VO 공간에는 앞서 말했듯이 함수 선언문이 해석되어 참조됩니다. 그리고 또 한가지 참조되는 것은 바로 함수내에 var로 선언된 변수입니다. 함수 블록 레벨에 있는 var a, b; 로 쓰면  이 a, b는 VO 공간에 편입됩니다. 함수 내에서는 a와 b에 값을 할당하고 있지만 이 들 값들은 함수를 해석할 때가 아닌 실행할 때 할당됩니다. 

------------------------------------------------------------
호이스팅이란?

함수의 호이스팅은 끌어올리기라고 많이 표현합니다. 즉 함수 내에 정의된 지역변수의 경우 함수 레벨 유효 영역의 어디에 위치하던지 항상 참조할 수 있는 변수가 됩니다. 즉 다음과 같은게 가능합니다.

a = 4; 
function foo() {
     a = 3;
     console.log(a); //3
     var a;
}
foo(); 

var a;가 함수 내에 어디에 위치하던지 함수가 선언이 되면 함수의 유효영역이 블록({}) 내부가 됩니다. 이 a는 위치에 상관없이 지역변수로써 쓸 수 있게되어 호이스팅이라는 말을 씁니다. 정말 지역변수를 끌어올리는 듯하죠. 

자바스크립트의 호이스팅 대상은 2가지가 있습니다. 

* 함수 선언문(function declaration)
* var 선언문 

이것은 반드시 호이스팅 됩니다. 이들은 함수 블록의 중간에 정의 되더라고 항상 함수 머리에 정의된 것처럼 함수가 실행 됩니다. 호이스팅을 언급하기 전에 앞에서 함수 선언문과 var 선언된 변수는 모두 함수의 vo 공간에 함수가 해석될 시에 편입된다고 했습니다. 이제야 호이스팅의 진실을 알게 되었습니다. 결국 호이스팅이란 자바스크립트 인터프리터가 해석할 때 함수의 스코프 영역(vo)에 var로 선언한 변수와 함수 선언문의 참조를 key-value로 잡아주는 것 이상도 이하도 아닙니다. 호이스팅은 단지 끌어올린다는 개념은 너무 추상적인 것이고 불편한 진실인 셈이죠. 

좀 더 살펴보지요. 

function foo() {
     bar();
     var x = 1;
}

위 코드는 사실 아래처럼 해석됩니다.

function foo() {
     var x;
     bar();
     x = 1;
}

다음 코드도 볼까요?
function foo() {
     if( false ) {
          var x = 1;     
     }
     return;
     var y = 1;
}

이것도 아래 처럼 해석됩니다.
function foo() {
     var x, y;
     if( false ) {
          x = 1;
     }
     return;
     y = 1;
}

함수의 경우는 어떨까요? 함수 선언문과 함수 표현식을 봅시다. 

function test() {
     foo(); //TypeError "foo 함수는 없다"
     bar(); //"서!" 

     //함수 표현식
     var foo = function() {
          alert("달려!");
     }

     //함수 선언문
     function bar() {
          alert("서!");
     }
}
test();

결국 함수 표현식은 var foo부분만 호이스팅 될 뿐이지 그 정의 자체는 함수 실행 타임에 해석됨을 의미한다. 

------------------------------------------------------------
결론 
내용이 좀 복잡했을지 모르겠습니다. 호이스팅을 설명하기 위해 언급한 내용들은 호이스팅을 구체적으로 이해시키는 것에 국한되지 않습니다. 그 외에 이론적 지식을 확장하는데 도움이 됩니다. 

가령, 함수가 해석될 때 그 함수 내부에 구현되어 있는 함수 선언문이 많아지면 많아질수록 해석하는데 시간이 걸릴 것입니다. 그러므로 함수 선언문이 많으면 실행 초기에 성능 저하를 일으킬 수 있습니다. 그러므로 함수 선언문과 함수 표현식을 적절하게 섞어 잘 쓰셔야 하고요. 

또 많은 책들이 [[Scope]] 체인 설명을 많이 하는데… 이것 또한 vo.__parent__ 라는 형태를 통해 체인을 형성한다는 구체적인 설명도 가능합니다. 

간단하게 언급되었지만 함수 실행시 실행 컨텍스트(EC)가 운영되는 모습도 일종의 ECStack이라는 스텍 자료 구조에서 관리가 되는 것도 설명이 가능해집니다. 

vo에 var 선언 및 인자(arguments)가 많아지만 성능에 저하를 일으킬 수 있다는 것도 알 수 있는데, 이는 함수 실행 때 마다 함수 해석때 만들어진 vo를 vo.clone()을 통해 매번 복사하기 때문입니다. 그래서 var선언 및 인자도 수를 제한시키는게 성능상 이득이 생깁니다. 

사실상 자바스크립트에서의 유효 영역 레벨이 함수에 국한 되어 있다는 것도 함수를 해석할 때 var이 모두 vo에 잡힌다는 사실로 설명이 가능해집니다. 

클로저가 생성된다는 말도 결국 부모-자식 함수에서 자식이 부모의 var로 선언된 것을 참조할 수 있는 영역이 발생한다는 말인데, 결국 vo의 연쇄가 바로 클로저인 겁니다. ^^

------------------------------------------------------------
참고 

작성자 지돌스타

[jquery] 배열로 갖고 온 값을 join() 을 적용하고싶을때

[jquery] 배열로 갖고 온 값을 join() 을 적용하고싶을때


처리할때 db에 where in 처리 할때 join으로 합치고 싶을때가 있다
$('input[name='delchk']:checked') 이런식으로 가져오게되면 배열형태로 넘어온다 하지만 오브젝트 join을 쓰려면 오브젝트형으로 바꿔야되기때문에
map 메소드를 써서 바꾸고 사용해야된다

$("input[name='delchk']:checked").map(function(){return this.value}).get().join(",")

2012년 4월 10일 화요일

asp 쌍따옴표 처리

asp 쌍따옴표 처리

json으로 받는데 쌍따옴표 때문에 안받아지면 다음과 같이 처리 하면 된다

a_title = rs("a_title")

a_title = Replace(a_title,"""","&quot;")


data uris (데이타 uri스킴)

data uris

데이타 uri스킴이라 읽는거 같습니다.

이것은 이미지같은 외부 데이터를 uri로 표현 하는 방식입니다

보통 <img src='/project/wow.jpg' alt='' /> 와 같이 이미지를 불러들입니다
이 이미지를 불러오는 방식에 대해 의문을 갖고 보신적이 있으신가요?
이렇게 데이터를 저장하고 불러오는 방식뿐이 없을까..
다른 방법이 있습니다
그게 데이타스킴 방식입니다
base64 로 인코딩한 data를 src에 직접 넣는 방식입니다

보통은 절대 또는 상대 경로로 불러옵니다.data file이 있는 경로로 지정하여 불러옵니다
하지만 base64로 인코딩 하여
 <img width="111" height="79" title="" alt="" src="data:image/gif;base64,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" />
이런식으로 넣어도 나옵니다
http://pakss3.realmind.net/datauris.html  (여기서 확인 해 보실수 있습니다)

아래 사이트에서 인코딩하여 넣으면 다른 이미지들도 바로 사용 하실 수 있습니다. http://www.websemantics.co.uk/online_tools/image_to_data_uri_convertor/result/

기본적인 포맷:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

왜 이걸 사용할까?

가장 큰 이유는 HTTP 요청할 이미지 데이터를 저장함으로써 기본적인 document 크기가 다른 요소(이미지 데이터등 )을 불러올때보다 훨씬 빠르게 요소를 가져올 수 있습니다

브라우저 호환성

데이터 URI는 IE 5-7에서 작동하지 않지만, IE 8에서 지원됩니다. 

중요 사항

  • 임베디드 코드의 크기 자체에 의한 자원의 크기보다 약간 큽니다. GZip압축도움 됩니다.
  • Internet Explorer 832,768 바이트의 가장 낮은 최대 데이터 URI 크기를 가지고 있습니다
  • 사이트 모든 데이터를 임베디드 data URIs로 유지하긴 힘들다. 단지 이미지 업데이트하는것은 간편해졌다
  • PHP(or PHP as CSS), 를 사용한다면 data URIs를 만들기 쉽다 <?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>
  • 용량이 좀 되는 css파일을 캐시하여 사용하면 도움이 된다. css파일이 50kb로 6개가 있다면 300kb의 한번의 문서를 불러들이면 6번의 request를 절약할 수 있다. 그러나 그게 이미지 파일을 캐시 할지 모르겟지만 css파일 만료일 설정을 해주면 도움이 될 것이다.
  • Data URIs는 이미지에 국한되지 않습니다.
원본문서 http://css-tricks.com/data-uris/%20
참고문서 http://jonraasch.com/blog/css-data-uris-in-all-browsers
writer : 오홍홍 // http://pakss3.blogspot.com/

2012년 4월 9일 월요일

자바스크립트 추상 팩토리 패턴 Dependency injection(의존성 주입) part2

자바스크립트 추상팩토리 패턴

Abstract Factory Dependency injection(추상팩토리 패턴 의존성 주입) part2~


부족한 감이 더 공부해보고 자바스크립트 추상 팩토리 패턴 의존성주입을 다른 방식으로 짜봣습니다.

추상 팩토리 패턴 정의 : 추상적인 인터페이스를 이용하여, 여러가지(다형) 변화 돼는 것들을 세분하 한다.
의존성 주입 :  객체들이 같이 동작할 객체들의 의존성을 생성자 아규먼트와 팩토리 메서드의 아규먼트와 생성되거나 팩토리 메서드에서 리턴된 객체 인스턴스에 설정된 프로퍼티만으로 정의하는 과정이다.
function Wallet(myalert) {
  return {
    coin : function(coin) {
       return function(state) {
          alert(coin + state + "없어");
       };
    },
    bill : function(state) {
       return alert(myalert + state + " 없어");
    }
  };
}
var open = Wallet("지갑을 열었지만 \n");
    open.bill("지폐가");
var wow = open.coin("동전칸을 뒤져 \n");
    wow("호주머니를 뒤져\n");

result1>> "지갑을 열었지만 지폐가 없어"
result2>> "동전칸을 뒤져 호주머니를 뒤져 없어"

Wallet이라는 팩토리 메서드에 필요한 인스턴스("지갑을 열었지만", "지폐가" 등등) 을 주입하는 형식으로 구현하였습니다
실행되는 단계의 소스를 따라가면서 보시면서 조금 이해가 되실거라 생각됩니다 ㅠ


참고 : 개념 (http://yaku.tistory.com/entry/%EC%B6%94%EC%83%81-%ED%8C%A9%ED%86%A0%EB%A6%AC-%ED%8C%A8%ED%84%B4-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%9D%98%EC%A1%B4%EC%84%B1-%EC%A3%BC%EC%9E%85%EC%97%90-%EB%8C%80%ED%95%9C-%EB%82%98%EC%9D%98-%EC%83%9D%EA%B0%81)

자바스크립트 의존성 주입(Dependency-Injection)

자바스크립트 의존성 주입(javascript Dependency-Injection )

var gobchang = { eat : function(soju, mekju){
        switch (soju + mekju){
        case 1 :
            alert("아직 괜찮아");
            break;
        case 2 :
            alert("알딸딸해");
            break;
        case 3 :
            alert("기억안나");
            break;
        default :
            alert("지갑잃어버렸어");
        }
    }
};

function hungry(soju, mekju){
    return this.eat(soju, mekju);
}
hungry.call(gobchang, 1, 4);

result>> "지갑잃어버렸어"
자바에 있는 의존성 주입(Dependency-Injection)을 자바스크립트에서도 사용 할 수 있습니다.
위 소스를 보시면 hungry가 eat객체를 내부에서 갖고 있어 gobchang의 eat객체를 대신 할 수 있습니다

editor : 오홍홍 // http://pakss3.blogspot.com/

참 고 : http://creatorw.tistory.com/entry/Javascript-%EA%B0%9D%EC%B2%B4-Dependency-injection%EC%9D%B8%EC%A0%9D%EC%85%98-%ED%95%98%EA%B8%B0

참고사이트에서 보고 비스므리하게 연습해서 해봤습니다 ^^;;

2012년 4월 6일 금요일

javascript error 처리 function

자바스크립트 에러시 에러처리 펑션 

javascript error function

function OhError(e){
    var err = "";
    for (var i in e) {
        err += (i + ' = ' + e[i] + "\n");
    }
    alert(err);
}

일단 간단하게 ~


사용방법

try{

}catch(e){
 OhError(e);
}

이렇게 쓰면 된다!

이렇게 하면 에러를 전부 긁어서 보여준다

==========================================
이건 팁인데 에러를 그냥 넘겨 보내는 방법이다

window.onerror =funciton(){
   return true;
}

이러면 에러가 발생되도 그냥 다음으로 넘어간다.

google Project Glass 공개

google Project Glass 공개!!



이게 진짜 가능하긴 한거야??!!

 관련 기사들!!
http://www.etnews.com/news/international/2577210_1496.html

관련 동영상

setTimeout? setInterval? Avoid bubbling?

setTimeout, setInterval 버블링 방지(Avoid bubbling)


일반적으로 setInterval은 지정한 시간을 무한 루프 돌리게 된다

잘못쓰게 되면 무한 루프들이 중복되어 사이트가 느려지는 병목현상이 발생될 수 있다

이런걸 방지 하기 위해서는 정확하게 한 변수에 setInterval을 정의 하고 이 변수를 clearInterval

해줘야된다

전역변수 사용의 최소가 성능에 큰 도움을 주는건 알고 있지만 필요할때는 사용해야된다는게

내 지론이다.그래서 전역변수에 담고 이것을 해제 시키면 해결된다.

var loopVal;       //전역 루프 변수
function work(){
    var i = 0;
    if(window[loopVal] == null){
        alert("전역변수에 아무것도 없습니다");
  
    }else{    //함수가 실행됐을때만 clear함
        alert("전역변수에 setTimeout 이 담겨있습니다");
        clearTimeout(window[loopVal]);
    }
    return function(){
        window[loopVal] =
                setTimeout(function(){
                    alert(i);
                    i += 1;
                    typeof working  === "function" && working();
                },3000);
    }
};

var working = work();
working();

2012년 4월 5일 목요일

XML attribute builtin entity

xml attribute builtin entity

엔티티는 XML문서를 구성하는 물리적인 저장 단위(storage unit)이다.
-XML문서 : 도큐먼트 엔티티(XML 문서의 물리적 자장단위)
-외부 DTD 서브셋 문서 : 외부 DTD 서브셋 엔티티


&lt;
 less-than
 &gt;
 >
 greater-than
 &amp;
 &
 ampersand
 &quot;
 "
 double-quote
 &apos;
 '
 single-quote
&lt;
 less-than
 &gt;
 >
 greater-than
 &amp;
 &
 ampersand
 &quot;
 "
 double-quote
 &apos;
 '
 single-quote


빌트인 엔티티
   미리 정의 되어 있어, 별도의 엔티티 선언 없이 XML 문서에서 사용 가능한 엔티티를 말한다.

사용불가능 문자 :  대체문자
<  :  &lt; 
>  :  &gt; 





 &lt;
 less-than
 &gt;
 >
 greater-than
 &amp;
 &
 ampersand
 &quot;
 "
 double-quote
 &apos;
 '
& : &  single-quote








& : &amp;
"  : &quot;
'  : &apos;

[MSSQLl] order by에서 case when then 구문 쓰기

[mssql] order by에서 case when then 구문 쓰기

order by에서도 case 구문은 되지만 desc 정렬 구문까진 안에서 같이 쓸수 없다

order by (case when @ord ='aaa' then fieldname desc
                      when @ord='bbb' then fieldname1 asc
end )

이런식으로 하면 desc 어쩌구 저쩌구 하면서 오류가 생길것이다

구글링해서 찾아보니

 Order By case when @ord = 'ccc' then fieldname end ASC,
      case when @ord ='aaa' then fieldname1  end DESC,
     case when @ord ='bbb' then fieldname2  end ASC,
     case when @ord = '' then fieldname3   end ASC

이런식으로 찾아보니 잘 된다 ㅋㅋ 

classic ASP 2demension array sort


classic asp 2demension array sort

asp 2차원 배열정렬

'==============================================
function arraySort( arToSort, sortBy, compareType, direction )
'==============================================
Dim c, d, e, smallestValue, smallestIndex, tempValue
For c = 0 To uBound( arToSort, 2 ) - 1
 smallestValue = arToSort( sortBy, c )
 smallestIndex = c
 For d = c + 1 To uBound( arToSort, 2 )
  if compareType = "Text" Then
   If direction = "desc" Then
    if strComp( CStr(arToSort( sortBy, d )), CStr(smallestValue) ) = -1 Then
     smallestValue = arToSort( sortBy, d )
     smallestIndex = d
    End if
   Else
    if strComp( CStr(arToSort( sortBy, d )), CStr(smallestValue) ) = 1 Then
     smallestValue = arToSort( sortBy, d )
     smallestIndex = d
    End if
  End If
  elseif compareType = "Date" then
   if not isDate( smallestValue ) then
    arraySort = arraySort( arToSort, sortBy, false)
   exit function
  else
   if dateDiff( "d", arToSort( sortBy, d ), smallestValue ) > 0 Then
    smallestValue = arToSort( sortBy, d )
    smallestIndex = d
   End if
  end if
  elseif compareType = "Number" Then
   if clng( arToSort( sortBy, d ) ) < clng(smallestValue) Then
    smallestValue = arToSort( sortBy, d )
    smallestIndex = d
   End if
  end if
 Next
 if smallestIndex <> c Then 'swap
  For e = 0 To uBound( arToSort, 1 )
   tempValue = arToSort( e, smallestIndex )
   arToSort( e, smallestIndex ) = arToSort( e, c )
   arToSort( e, c ) = tempValue
  Next
 End if
Next
arraySort = arToSort
end function

 productEvList = arraySort (productEvList, orderbyNum, "Text", "desc" )

2012년 4월 4일 수요일

javascript dateformat 변경

javascript dateformat 변경

2012/04/12 -> 04/12
이런식으로 변경한다

그냥 전역에 prototype으로 붙였다.. 귀찮아서..

String.prototype.dateformat = function(){ 
    var dateData = this
        , dateArr = dateData.split(",")
        , i = 0, result = [];

    if( dateArr[0] == "" ) {
        return "01/01";      
    }else{
        for (i in dateArr){
            result.push(dateArr[i].slice(5));
        }
    }
    return result.join(",");
};  


"2012/12/12".dateforma() 이런식으로 사용하면된다

2012년 4월 2일 월요일

확장자 체크 스크립트 (Extension check javascript)

확장자 체크 스크립트 (Extension check javascript)


function checkExt(filechange)
 { 
  var IMG_FORMAT = "\.(bmp|gif|jpg|jpeg|png)$";
     if(!(new RegExp(IMG_FORMAT, "i")).test(filechange.val()) ){
      alert("이미지 파일(bmp|gif|jpg|jpeg|png)만 첨부하실 수 있습니다. ");
      filechange.replaceWith(filechange.clone(true));
  }
 }

ex> <input type='text' onchange='checkExt($(this))' />

[javascript] setTimeout, setInterval antipatterns

[javascript]  setTimeout, setInterval antipatterns

var obj = function(){
   console.log('1min');
};
setTimeout(obj,300);

이건 안티패턴이다
 obj는 무기명 함수 표현식이다.

반환되는건 
   console.log('1min');
가 반환되는것이 아닌

function(){
   console.log('1min');
};
이것이 반환된다

그러므로 이 함수가 바로 실행되지 않고 포인터만 전달하고 나중에 실행될수도 잇다

In the old broswer HTML5 Element (elements)

In the old broswer HTML5 Element (elements)  javascript

익스 9 이전 브라우저 체크

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
first, a newbie makes css
css파일을 먼저 링크시킨다
성능이 괜찮다