CDN Catalog

http://www.cdncatalog.com/

CDN Catalog is maintained by Andrew Davey.

Follow @andrewdavey on Twitter
Read the blog aboutcode.net

 

Microsoft Ajax Content Delivery Network

http://www.asp.net/ajaxLibrary/CDN.ashx


[JavaScript][source analysis] 메소드 오버로딩


JavaScript는 메소드 오버로딩이 없다.
매개변수의 갯수나, 속성, 리턴값의 일치여부를 체크하지 않는다.
함수를 선언하고 해당 함수가 호출되기 전 동일 네임의 함수가 다시 선언되는 경우 그대로 덮어쓴다.

하지만 메소드 오버로딩의 구현은 가능하다.
이를 구현한 소스가 있다.
자바스크립트의 전도사로, jQuery의 개발자로 유명한 John Resig의 소스이다.
원글 : http://ejohn.org/blog/javascript-method-overloading
아래와 같다.
01.// addMethod - By John Resig (MIT Licensed)
02.function addMethod(object, name, fn){
03.    var old = object[name];
04.    object[name] = function(){
05.        if (fn.length == arguments.length) 
06.            return fn.apply(this, arguments);
07.        else 
08.            if (typeof old == 'function') 
09.                return old.apply(this, arguments);
10.    };
11.}
12.  
13.// Now setup the methods
14.function Users(){
15.    addMethod(this, "find", function(){
16.    // Find all users...
17.    });
18.    addMethod(this, "find", function(name){
19.        // Find a user by name
20.    });
21.    addMethod(this, "find", function(first, last){
22.        // Find a user by first and last name
23.    });
24.}
25.  
26.// Now use the methods
27.var users = new Users();
28.users.find(); // Finds all
29.users.find("John"); // Finds users by name
30.users.find("John", "Resig"); // Finds users by first and last name
31.users.find("John", "E", "Resig"); // Does nothing
짧고 간결하다.
하지만 짧은 코드안에 참 많은 함축적인 JavaScript의 문법들이 들어있다.
프로세스의 순서대로 나열해보자.

  1. 페이지가 호출되면 함수 선언부들이 라인별로 읽어들여진다.
  2. 27Line에서 new 전치 연산자로 Users함수가 생성자로 호출이 된다.
    1. Users 생성자는 this에 바인딩되며 생성자의 본문 내용을 메모리에 로드한다.
      1. addMethod를 만나고 addMethod의 본문이 치환되어 불려들여진다.
        1. 15Line에서 addMethod가 호출되며 인수로 3개가 넘어간다.
          1. old라는 변수에 users.find가 참조된다. (현재 users.find가 없으므로 undefined가 참조됨)
          2. users.find 메소드의 함수 선언 (실행이되는 부분이 아닌 선언부분임)
        2. 15Line에서 addMethod가 호출되며 인수로 3개가 넘어간다.
          1. old라는 변수에 users.find가 참조된다. (2-A-1-A에서 선언된 fn.length=0인 users.find가 참조됨)
          2. users.find 메소드의 함수 선언 (실행이되는 부분이 아닌 선언부분임)
        3. 21Line에서 addMethod가 호출되며 인수로 3개가 넘어간다.
          1. old라는 변수에 users.find가 참조된다. (2-A-1-B에서 선언된 fn.length=0인 users.find가 참조됨)
          2. users.find 메소드의 함수 선언 (실행이되는 부분이 아닌 선언부분임)
  3. 28Line에서 users.find() 메소드가 호출된다.
    1. Users객체에 담겨있는 addMethod의 치환 부분이 호출된다.
      1. 선언된 순서와 반대로 users.find 선언 부분이 호출된다. (fn.length=2인 user.find 선언 부분 호출)
        1. fn.length와 호출된 users.find 비교 결과 false (28Line의 호출된 users.find 메소드의 arguments=0 이므로 false)
        2. 8Line에서 이전 2-A-1-C-1에서 참조된 typeof old == 'function' true
        3. 참조되어 있던 2-A-1-B-2 메소드가 다시 users.addMethod에 선언부분으로 참조 변경됨. (2-A-1-C-2 -> 2-A-1-B-2로 참조 변경)
      2. 선언된 순서와 반대로 users.find 선언 부분이 호출된다. (fn.length=1인 user.find 선언 부분 호출)
        1. fn.length와 호출된 users.find 비교 결과 false (28Line의 호출된 users.find 메소드의 arguments=0 이므로 false)
        2. 8Line에서 이전 2-A-1-B-1에서 참조된 typeof old == 'function' true
        3. 참조되어 있던 2-A-1-A-2 메소드가 다시 users.addMethod에 선언부분으로 참조 변경됨. (2-A-1-B-2 -> 2-A-1-A-2로 참조 변경)
      3. 선언된 순서와 반대로 users.find 선언 부분이 호출된다. (fn.length=0인 user.find 선언 부분 호출)
        1. fn.length와 호출된 users.find 비교 결과 true (28Line의 호출된 users.find 메소드의 arguments=0 이므로 true)
        2. 6Line에서 이전 2-A-1-A-1에서 참조된 users.find 선언 부분이 실행된다. (16Line의 선언 부분 실행됨.)
  4. 29Line에서 users.find("John") 메소드가 호출된다.
    1. Users객체에 담겨있는 addMethod의 치환 부분이 호출된다.
      1. 선언된 순서와 반대로 users.find 선언 부분이 호출된다. (fn.length=1인 user.find 선언 부분 호출)
        1. fn.length와 호출된 users.find 비교 결과 false (28Line의 호출된 users.find 메소드의 arguments=1 이므로 false)
        2. 8Line에서 이전 2-A-1-C-1에서 참조된 typeof old == 'function' true
        3. 참조되어 있던 2-A-1-B-2 메소드가 다시 users.addMethod에 선언부분으로 참조 변경됨. (2-A-1-C-2 -> 2-A-1-B-2로 참조 변경)
      2. 선언된 순서와 반대로 users.find 선언 부분이 호출된다. (fn.length=1인 user.find 선언 부분 호출)
        1. fn.length와 호출된 users.find 비교 결과 true (28Line의 호출된 users.find 메소드의 arguments=1 이므로 true)
        2. 6Line에서 이전 2-A-1-B-1에서 참조된 users.find 선언 부분이 실행된다. (19Line의 선언 부분 실행됨.)
  5. 30Line에서 users.find("John") 메소드가 호출된다.
    1. Users객체에 담겨있는 addMethod의 치환 부분이 호출된다.
      1. 선언된 순서와 반대로 users.find 선언 부분이 호출된다. (fn.length=2인 user.find 선언 부분 호출)
        1. fn.length와 호출된 users.find 비교 결과 true (28Line의 호출된 users.find 메소드의 arguments=2 이므로 true)
        2. 6Line에서 이전 2-A-1-A-1에서 참조된 users.find 선언 부분이 실행된다. (22Line의 선언 부분 실행됨.)
  6. 31Line에서 users.find("John", "E", "Resig") 메소드가 호출된다.
    1. Users객체에 담겨있는 addMethod의 치환 부분이 호출된다.
      1. 선언된 순서와 반대로 users.find 선언 부분이 호출된다. (fn.length=2인 user.find 선언 부분 호출)
        1. fn.length와 호출된 users.find 비교 결과 false (28Line의 호출된 users.find 메소드의 arguments=3 이므로 false)
        2. 8Line에서 이전 2-A-1-C-1에서 참조된 typeof old == 'function' true
        3. 참조되어 있던 2-A-1-B-2 메소드가 다시 users.addMethod에 선언부분으로 참조 변경됨. (2-A-1-C-2 -> 2-A-1-B-2로 참조 변경)
      2. 선언된 순서와 반대로 users.find 선언 부분이 호출된다. (fn.length=1인 user.find 선언 부분 호출)
        1. fn.length와 호출된 users.find 비교 결과 false (28Line의 호출된 users.find 메소드의 arguments=3 이므로 false)
        2. 8Line에서 이전 2-A-1-B-1에서 참조된 typeof old == 'function' true
        3. 참조되어 있던 2-A-1-A-2 메소드가 다시 users.addMethod에 선언부분으로 참조 변경됨. (2-A-1-B-2 -> 2-A-1-A-2로 참조 변경)
      3. 선언된 순서와 반대로 users.find 선언 부분이 호출된다. (fn.length=0인 user.find 선언 부분 호출)
        1. fn.length와 호출된 users.find 비교 결과 false (28Line의 호출된 users.find 메소드의 arguments=3 이므로 false)
        2. 8Line에서 이전 2-A-1-A-1에서 참조된 typeof old == 'function' false
        3. 결국 아무것도 리턴되지 않고 종료

차근차근 실행된 순서들을 읽어나가다 보면 어찌하여 실행이 되었는지 알 수 있을 것이다.
사용된 JavaScript의 메소드는 다음과 같다.
1.function testFunction(value1, value2) {
2.    alert(testFunction.length); //호출 : 매개변수의 갯수 2
3.    alert(arguments.length);    //호출 : 인수의 갯수 3
4.}
5.testFunction("값1", "값2", "값3");

functionObj.length는 기능함수에서 정의된 인수의 갯수이고
functionObj.arguments.length는 기능함수가 호출될 때 전달받은 인수의 갯수이다.
나머지 사항은 이전에 언급한 적이 있던 함수의 호출 을 참조하여 흐름에 대해 파악하면 될 것이다.

주의해야 하는 점은 new 전치연산자로 생성자가 Users의 addMethod를 선언한 내용을 실제 메소드 호출을 할 때 선언을 한 순서의 역순으로 실행을 한다는 점이다.

저작자표시 비영리 동일조건 (새창열림)

나름 정의하면 ajax는 Javascript로 XMLHttpRequest ActivX컨트롤을 통해서 서버와 비동기 통신으로 XML,JSON프로토콜,사용자지정포멧 등으로 데이타 주고받아 DHTML(XSLT)로 웹브라우저내에서 애플리케이션의 기능을 구현하는 기술을 총칭한다고 보면 되겠다. 더많은 ajax라는 용어에 대해 궁금하신 분은 -> http://ko.wikipedia.org/wiki/Ajax

 이 글은 위에서 정의한 ajax의 기술 중에 javascript의 확장된 기능(객체화)을 이용하여 클래스를 설계하는 방법에 대한 설명에 해당하므로 ajax의 포괄적인 의미와
충분히 구분을 가지기를 바란다.

 솔직히 필자도 자바스크립트를 많이 사용 했지만  function이 클래스 선언에 대응된다는 내용은 ajax라는 용어가 광범위하게 퍼진 후이고 객체화와 관련된 스크립트문법을 잘 모르는 부분이 많다. 그래서 본 사이트의 클래스들을 만들면서도 시행착오가 꽤나 많았고 조금 틀린 설명이 있더라도 양해 하시길 바란다.

javascript에 대한 간략한 문법을 먼저 설명 해 본다.
솔직히 script언어의 명세를 찾아볼 수도 있지만 특별히 많은 문법이 없어서 필자의 경우는 코딩을 하면다 이런저런 테스트를 다 해보면서 한다.
function Tab()
{
   var  member = "1";
}
으로 선언 하면 Tab이 하나의 클래스 선언에 해당한다? 라고 생각하지만 글을 읽어가면 아니라는것을 알게 될 것이다. 
뭐 기존의 컴파일러 언어들의 클래스하고 같다고 간단히 생각 할 수도 있지만 사정이 그렇지 못하다.
일반적으로 클래스 내에서 우리는 this라는 포인터를 사용한다. 왜? 이 클래스가 인스턴스화 되었을 때 자신의 포인터를 참조하기 위해서 일 것이다.(아님말구~)
하지만 자바스크립트는 컴파일러의 this처럼 function내에서 this를 확인 해 보면 현재 클래스가 아니라 아마도 window객체가 참조될 것이다.
초기에 필자는 (new Tab()).member하면 Tab의 멤버변수의 값인 1이 참조되는 줄 알았다.. 하지면 아니다 member는 전역변수가 된다. 아래의 예제와 함께 테스트 해보시라.

이거 참 거시기 같지 않은가? 이건 클래스가 아니고 window객체(클래스) 의 멤버함수이지 않은가? 멤버함수 맞다.
그렇다면 왜 클래스라고 하는가? 답은 클래스 처럼 new할 수 있기 때문이다. 한마디로 멤버함수 이면서 클래스 선언으로 사용 될 수 있게 설계를 해 놓은것으로 보면 되겠다. 함수 자체로 클래스정의를 하는것은 아님을 명심하자.

간단한 테스트를 위해 다음 코드와 주석을 보면,
<html>
<head>
<title>가이아타이틀</title>
<script>
function tab()
{
   //alert(this.document.title); //이 코드를 활성화 해보면 this가 window라는거 확인가능
  if(this == window)
     alert("dddd");
 return "1";
}
function initPage()
{
  alert(tab);        // 1) 오호라 놀라워라?
  alert(tab());     // 2) 누구나 아는 결과 "1"
  alert(new tab); // 3)좀 새로운 결과?
}
</script>
</head>

<body onload="initPage()">
<table>
<tr>
<td id="insObj"></td>
</tr>
</table>
</body>
</html>

1)의 결과는 무엇일까?
   난 처음에 object가 리턴될 줄 알았다. 하지만 그 결과는 놀랍다. tab함수의 선언에 해당하는 문자열이 리턴된다.
   한마디로 문자열이란 말인가? 필자도 모른다. 적어도 문자열은 아닌듯하다(간단히 다음코드로 테스트)
var strFun = "function test() { return 1; }";
function initPage()
{
  alert( strFun);
  alert( strFun()); //안먹는다, 당연하다. 단순한 변수에 ()를 붙여서 호출한다고 먹힐리가 없다.
}
결론적으로 alert(tab)을 하면 함수의 정의를 문자열로 뿌리기는 하지만 함수의 이름인 tab과 문자열과는 차이가 있다는 것이다.

2)의 경우는 누구나 아는 기본적인 함수 호출의 결과이다.
3)의 결과는 무엇일까?
   이 경우 초기에 필자는 그냥 object가 alert되는 줄 알았지만 결과는 좀 달랐다
   [object Object] 가 alert된다.
   호잉? 소문자 object, 대문자 Object ?? 도데체 이게 무슨 결과인가?
   처음 소문자 object는 알겠는대 그후의 Object는 도대체 무엇이란 말인가??
   혹시나 해서 alert(Object())라고 찍어본다. 어라..  또 object Object다? alert(new Object()) 와같이 new를 붙이면 어떤결과일까? 어라? 동일한결과??
   의혹이 증폭된다.. 도대체 Object라는 놈이 무엇이란 말인가??
   혹시나 싶어 alert(Object)를 찍어본다... 어라? function Object() { [native code] } 라는 결과가 나온다. 어라 이건 위에서 함수명만 찍었을 때와 비슷한 결과이다.
   음.. 결론을 내자면 잘 모르겠다..ㅎㅎㅎ 아시는분 댓글 부탁~~
   짐작을 하자면 new 함수명()으로 function을 new할 때 시스템 내장객체(함수) Object를 new해서 함수명에 해당하는 객체에 붙여버리는거 같다.
 
즉, 기존 함수객체는 window의 멤버함수이면서 클래스(객체)선언 이고 그 객체를 확장한다는 의미로 Object를 뒤에 붙여버리는듯 하다. 오호라 그럼 실제로 var tabObj =  new Tab()을하면 실재로 리턴되는것은 Object라는 것을 대충 짐작하게 될 것이다.
조금 달리말하면 객체의 형이 Tab인 default Object를 하나 만들어서 리턴해준다고 보면 되겠다.

실질적인 클래스(객체)정의
음... 그렇다면 실재적으로 new했을 때 리턴되는 Object형의 객체는 어떻게 사용하는 것인가????
누가 설계했는지 참 머리 좋다. 기존 단순한 함수기반 스크립트에서 객체로의 확장을 가능하게 설계를 한듯하다.
바로 prototype라는 키워드로 해당 함수가 객체화 되면 확장되는 Object를 채우게 될 객체의 명세를 정의(실질적인 클래스정의)하도록 해 놓은 것이다.
문법은 Tab.prototype = {,,,,} 이다.
참으로 간단하지만 참으로 강력한 문법이다.

 
괄호안은
멤버명 : 초기화값,
.... ,
멤버함수명 : function(파라메타,...)
{

},
.....
로 무한히 클래스 정의처럼 정의 해 가면 된다.
정의한 멤버함수 내에서 this.멤버명으로 값을 참조할 수 있고
var aTab = new Tab() // 실재로 Tab.prototype으로 정의된 녀석이 리턴된다는거 ~
aTab.멤버명 = 값
와 같이 값을 초기화 할 수도있다.

여기까지 이해 했다면 DHTML과 자바스크립트를 좀 다뤄보신 분이라면 어떤 DHTML컨트롤이라도 만들 수 있을 것이다.

본 사이트의 탭 구혀에 대한 본격적인 설명에 들어간다
1. 우선 탭을 구성하는 부분을 생각해 보자
   - 각 탭의 헤더(Header)와 바디(Body)가 한 쌍을 이룬다.(new Tab()했을 때 헤더도 생성하고 바디도 생성하면된다)
   - 각 헤더를 클릭하면 쌍에 해당하는 Body가 나타나고 나머지는 사라져야한다.(display속성이용)
2. 1번의 각 탭들을  담는 객체가 하나 필요하다.(TabGroup이라고 명명한다)
   - TabGroup은 각 탭들이 Add될때마다 배열에 각 탭객체를 담아서 관리한다.
   - 나중에 알게 되겠지만 각 탭이 클릭되었을 때 리턴될 콜백함수를 담을 변수도 빌요하다.
대충 이정도로 간단히 구현의 범위를 잡고 시작하면된다.

구현 1) 탭 객체를 정의한다
function Tab()
{
  ....//뭔가를 정의하고 싶을 것이다. 하지만 여기에 정의하는 변수들은 window전역 변수로 작동하므로 아무것도 정의 할 필요 없습니다.
}
또한 Tab(파라메타1,...)등으로 parameter를 넘겨서 뭔가를 초기화도 하고 싶겠지만 아~~~무 의미없습니다.
그냥 다음에 정의할 prototype을 정의하기 위한 중간 과정으로 보시면 됩니다.

//참고로 visual studio 2008로 javascript를 작성 시 한글 주석달면 IE6.0에서 한글이 깨지면서 자바스크립트 오류를 일으킬 수 있으니 참고하세요
  이거때문에 엄청 시간 낭비T.T
Tab.prototype =
{
   header : null, //contain header object
   body : null, // contain body object
   // 나중에 세부적인 변수는 추가 하고....
   CreateTab : function()
   {
      //탭의 헤더와 바디를 new해서 header,body에 저장
      //
   }
}
위와 같이하면 대충 Tab은 정의 된듯하고 그다음 각 탭을 생성해서 저장 할 TabGroup이 필요하다
function TabGroup(){}
TabGroup.prototype =
{
    count : 0,
    arrayTab : new Array(),
    clickedTab : null,
    callBack : null,
    frame : null,
   AddTab : function(sID,sName) //필요한 parameter넘긴다. 속성으로 지정할지 함수parameter로 넘길지는 편한대로 하면된다.
   {
     //실재로 new Tab()으로 생성해서 arrayTab에 추가하겠죠
   }
}
우선 기본 클래스 정의는 이렇게 하면된다.
이 구조는 일반적인 클래스 설계하는 방법과 같다. 단지 자바스크립트의 특수한 문법이 조금 가미되었을 뿐임을 명심하자.

JSON(JavaScript Object Notation)의 객체정의와의 비교
JSON의 객체정의법
 - 객체는 {} 으로 묶은 문자열로 표현,
 - 객체내의 멤버와 초기값은 멤버명 : 초기값 형태로 표현
    var jsonObject = {};
    //alert(jsonObject );
이 코드를 실행 해보라 객체가 alert된다. 어라? 위에서 함수를 new해서 찍는거랑 같네?
그렇다. 함수를 언하는것과  JSON표기법을 사용하는것과 동일하다는 결론이 나온다.
즉 객체를 함수선언으로 new해서 사용 할 수도 있고 JSON표기법을 이용할 수도 있다는 말이되겠다.
다른 표현으로 설명하면 함수는 객체의 형(클래스)선언이고 JSON표기법은 객체를 바로 기술하는 표기법이다.(그래서 new없이 바로사용)


다음코드를 보자.
var jsonObject =
 { 
  field1 : "field1",
  func1 : function()
  {
   alert("1222");
  }
 };
이런식으로 정의하여 사용하면 속성과 메소드를 포함하는 인스턴스 jsonObject가 만들어진다.
한마디로 위에서 함수정의 객체의 prototype를 이용하여 객체를 확정한 후 new해서 사용하는것과 똑같는 결론이다.

위 코드를 일반 문자열로 묶은경우 eval을 이용하여 JSON객체화 하여 사용 할 수도 있다.
    var jsonStr2 = "{var1 : '111', var2 : '222'}";
    alert(eval('(' + jsonStr2 +')') );
이렇게 앞뒤로 괄호를 붙여서 사용하면 OK,
이것은 웹서비스같은데서 리턴되는 문자열을 JSON형식으로 만들어 리턴한 후 객체화 하여 사용할 때 유용한 방법이다.

객체를 중첩해서 사용가능하다.
    var jsonStr1 = {var1 : '111', var2 : { var2_Sub : 'sub2' }};
    alert(jsonStr1.var2 ); // jsonStr1[0]식으로 배열인덱스로도 접근가능하다.

또한 .을 이용하여 추가적으로 확장해 갈 수도 있다.
var jsonStr1 = {};
jsonStr1.var1 = '111';
jsonStr1.var2 = {};
jsonStr1.var2.var2_Sub = 'sub2';
이런식으 코딩도 가능하지만 그렇게 보기좋은 모양은 아닌듯 하다.

그러면 jsonObject내부에 있는 function()에 대해서 한번 확인해보고 넘어가자.
func1 : function() 으로 정의 된부분은 일반 함수선언과 무엇이 다른가? 뭐 똑같지 않은냐? 라고 생각하겠지만 달랐다.

jsonObject.func1()식으로 일반함수처럼 사용하는것은 똑같다.
그러나 일반함수 선언은 new해서 인스턴스화가 가능했지만 이녀석은 인스턴스화가 되지 않는다.
var obj = new jsonObject.func1(); 하면 어떤 결과가 나올까?
필자는 obj가 func1()의 object객체가 될 줄 알았지만 결과는 아니다. 그냥 jsonObject.func()를 호출하는 것일 뿐이었다.
결론은 멤버함수일 뿐이지 새로운 형(클래스)선언은 아니었다.
(어찌보면 당연하다 이미 jsonObject자체가 메모리에 인스턴스로 올라온것이니까)

여기서 재미난 것이 있다.. 우리가 보통 함수포인터라고 부렸던 콜백기능에 대해서 다을 알 것이다.
자바스크립트에도 그런 기능을 구현 할 수 있다는것에 처음에는 정말 놀라웠다. 다음코드를 보자.
var jsonObject =
 {
  field1 : "field1",
  func1 : function()
  { 
        var Me = this;
        return function()
        {
             //if(this == Me)
             alert("1222");
        }
  }
 };
var funcPointer = jsonObject.func1(); // 이녀석이 C#의 델리게이트 선언에 해당한다고 보면된다.
funcPointer();

이코드를 실행해보면 어떤 결과가 나올까? 1222가 alert된다.
func1을 호출했을 때 function정의를 리턴하면 그 함수의 포인터??(아마도)가 리턴되고 변수에 담아놨다가 콜백함수 처럼 호출 할 수가 있는 것이다. 참으로 놀라운 결과이다.

위 코드에서 주석으로 처리된 부분 //if(this == Me) 을 주석부분을 풀면 1222가 호출되지 않는다는것도 중요하다.
Me에 저장된 this포인터는 jsonObject이고 return function()내부에서의 this는 새로운 함수의 포인터라는 차이점이 있다.
콜백 function내부에서 jsonObject의 포인터를 사용하기 위해서는 위와같은 형식으로 Me변수를 정의하여 내부에서 사용해야함을 잊지말아야 할것이다.

그런데 함수포인터를 어떻게  사용하는 것일까?
C#의 delegate를 사용해 보신분들은 해당 event delegate에 함수를 +연산으로 add하는 것을 알고 있을 것이다.
이녀석도 똑 같다. 리턴된 함수포인터는 임의의 함수 형을 담을 수 있는 녀석이다.
다음과 같이 다른 임의의 함수를 대입만 하면 해당함수를 호출하게된다.
function funcCallBack() { alert('aaaa'); }
var jsonObject =
 {
  field1 : "field1",
  func1 : function()
  { 
        var Me = this;
        return function()
        {
             //if(this == Me)
             alert("1222");
        }
  }
 };
var funcPointer = jsonObject.func1();
funcPointer = funcCallBack ;
funcPointer();

음... 그렇다면 
      return function()
        {
             //if(this == Me)
             alert("1222");
        }
부분에 함수를 파라미터로 넘겨서  코딩을 해두면 어떠한가?
function funcCallBack() { alert('aaaa'); }
function initPage()
{
jsonObject =
 {
  field1 : "field1",
  func1 : function(callBack)
  { 
   var Me = this;
   return function()
   {
         //if(this == Me)
        callBack();
   }
  }
 };

    var test = jsonObject.func1(funcCallBack);
    test();
}
이런 형태의 코딩이 나오게 된다. 함수를 파라미터로 넘겨놓고 필요한 경우에 콜백이 되게 호출 할 수 있는 구조가 가능하다.
여기까지를 이해하면 콜백함수를 구현하는 방식은 다 이해된듯하다.
이제 또 중요한 것이 있다. 해당 콜백함수에 jsonObject의 포인터를 넘겨서 어느객체가 콜백을 호출했느냐를 판단을 해야 하는 경우가 있다.
그때 사용하는것이 apply함수이다.
함수가 호출될 때 호출객체를 바꿔치기 해주는일과  호출 파라미터를 배열형태로 넘기게 해준다는 정도만 알 뿐이다.
최종 콜백구현은 아래의 코드와 같다.
function funcCallBack(param1)
{ 
  // 여기에서 this포인터를 참조하게되면 콜백의 호출인 경우 아래 jsonObject의 포인터가된다.
  alert(param1);
}
function initPage()
{
jsonObject =
 {
  field1 : "field1",
  func1 : function(callBack)
  {
                  var Me = this;
   return function()
   {
      var arrArg = new Array();
      arrArg[0] = 'aaa';
      callBack.apply(Me, arrArg);

      if(this == Me)  //this point check
       alert("xxxxx");
   }
  }
 };

    var test = jsonObject.func1(funcCallBack);
    test();
}
여기까지의 내용을 이해했다면 당신은 이제 자바스크립트의 재미에 흠뻑빠져든 것이다.
물론 HTML DOM구조등 기존 자바스크립트 사용법은 다 이해하고 있다는 가정하에서이다.
하지만 스크립트 언어는 한계가 있다. 실재로 객체지향적으로 구현을 해 보면 느끼겠지만 제대로 작동하지 않는 속성이나 메소드도 있다.
객체가 중첩되고 중첩될 수록 그런경우는 더 많아지는것 같다. 물론 필자가 캐치하지 버그일 수도 있지만... 그런 버그를 많이 양산 한다는 것 또한 맘에 들지 않는 부분이다. 주저리주저리.....





*폼 등에서 enter키로 인한 불필요한 동작 회피하기 : Netscape에서는 다르게 처리해야 함.
*textarea, button, submit, cancel 외의 부분에서 Enter키 입력하면 Tab으로 전환시켜줌.


<body onKeyDown="javascript:event.keyCode =(event.keyCode == 13) ? ('textarea:button:submit:cancel:'.match 13:9):event.keyCode">
이 방법은 위 두가지 방법과 달리 자바스크립트를 이용하는 것인데 새로운 창의 디폴트 속성을 사용하는 것이 아니고 속성을 변경한 브라우저 창을 띄우고 싶을 때 유용한 기능이다.

<SCRIPT>
function openTarget (objForm, strFeatures, strWindowName) {

// 새로운 창 이름이 없으면...
if (!strWindowName)
// formTarget이란 문자열에 현재 시간을 붙인 이름 부여
strWindowName = 'formTarget' + (new Date().getTime());

// 폼의 target 속성 부여
objForm.target = strWindowName;
open ('', strWindowName, strFeatures);
}
</SCRIPT>
...
...

<form name="myForm" method="post" action="formProcess.asp"
ONSUBMIT="openTarget(this, 'width=300,height=300,resizable=1,scrollbars=1'); return true;">
...
...
</form>


<form>의 onsubmit 이벤트 발생시 openTarget이란 사용자 정의 함수를 호출한다. 이 함수에서 새로운 창을 띄우는데 디폴트 창이 아니라 가로, 세로 크기 등을 조절한 창을 띄운다. 위의 openTarget이란 함수에서 가장 핵심은 objForm.target 부분이다. 즉 폼 객체의 target 속성에 새로운 창 이름을 지정해 주면 되는 것이다.

자바스크립트에서 새로운 창을 열 때의 속성에 대해 좀 더 자세히 알고 싶은 사람은 다음 글을 참고하기 바란다

통상 form의 element에 접근하는 방식은

js를 사용하는 사람들 마다 다소 약간의 차이가 있습니다.

선호하는 코딩 스타일이 다르다는 소리죠

그렇지만 한가지 공통점은 어디서든 돌아가게 만들자~ 는게 목적 아닐까요?

javascript 에서 form 뿐만 아니라  document단의  element에 접근하는 방법은

계층적 접근에 대해서 약간 이해를 해야할 부분이 있습니다.

그럼 아래에 기본적인 형식을 이용해서 설명을 곁들여 보겠습니다.

-------------------------------------- 예제 코드1 --------------------------------------
<html>
  <head>
    <title>문서제목</title>
  </head>
  <body>
    <form name="wfm">
        <input type="text" name="lg"  /><br />
        <input type="password" name="lp" /><br />
        <input type="checkbox" name="auto" /><br />
        <input type="submit" value="전송"  />
    </form>
  </body>
</html>
------------------------------------------------------------------------------------------------
위와 같은 form이 있다고 가정 하겠습니다.

스크립트를 통해서 문서내의 특정 tag에 접근하는 규칙은 . 을 기준으로

계층적 구조로 접근하는 형식을 쓰는 것입니다.

쉬운예로
document.forms["wfm"].elements["lg"];
      문서  .        폼      .      객체

이해가 되시나요?

물론 폼을 거치지 않고 바로 접근하는 방법도 있습니다.

document.getElementById("id");
document.getElementsByName("name");
    문서  .      아이디 | 네임 객체지정;

이런 형식이 대표적인 예라고 보시면 됩니다.

get은 가져오다 라는 의미로 해석을 하시면 이해가 빠를것이라 생각됩니다.
엘리먼트의 아이디나 네임을 지정해서 해당객체를 지정하는 것입니다.

그럼 이런 형식의 접근을 이용한 실질적인 방법을 만들어 보겠습니다.

-------------------------------------- 예제 코드2 --------------------------------------
<html>
  <head>
    <title>문서제목</title>
  </head>
  <script language="javascript">
      function fm(){
          var obj = document.getElementById("sp");//span tag의 id를 이용한 접근
          var frm = document.forms["wfm"];//폼까지의 접근자를 지정
          for ( i=0; i < frm.length; i++){
          // form elements는 form의 배열형식으로도 접근 가능합니다.
              tc = "=\n\n"
              tc += "element type : " + frm[i].type + "\n\n"; //tc 변수에 문자열지정
              tc += "element name : " + frm[i].name + "\n\n";
              tc += "element value : " + frm[i].value + "\n\n";
              obj.innerText += tc;//지정된 id의 연결정보를 담고있는 obj변수에
              //innerText 를 이용하여 span tag영역안에 문자를 넣어라는 표현입니다.
          }
        return false;
      }
  </script>
  <body>
    <form name="wfm" onsubmit="return fm();">
        <input type="text" name="lg"  /><br />
        <input type="password" name="lp" /><br />
        <input type="checkbox" name="auto" value="1" /><br />
        <input type="submit" value="전송"  />
    </form>
    <span id="sp"></span>
  </body>
</html>
------------------------------------------------------------------------------------------------


실행된 결과물을 보시면

element type : text

element name : lg

element value :

element type : password

element name : lp

element value :

element type : checkbox

element name : auto

element value : 1

element type : submit

element name :

element value : 전송

이런 값이 출력됩니다.

단편적인 예를 들어 설명을 하였지만 javascript를 이용하여

window, document 등에 접근하는 형식 대동소이합니다.

forms[""], elements[""] 이런 내용은 하나의 형식입니다.

elements["string"] 이런 표현식은 form의 객체에 접근하는 경우에만

사용가능 합니다.

예제코드2에 사용된 onsubmit 이벤트핸들러에 대해서 말씀드리면

많은 초보자들이 <input type="button" value="전송" onclick="함수명()" />

이런식으로 사용하여 폼유효성 체크를 하고 js에서 form.submit();를 이용하여

form을 전송하는 것을 많이 보았습니다.

하지만 스쿨 팁텍에도 언젠가 올라온 내용이 있는데요

이런경우 form의 input field에서 enter를 입력하면 form이 submit 되는 현상을
보게 됩니다.

위 input field 예는 버튼을 클릭을 해야만 함수를 호출하게 되어 있습니다.

반면 onsubmit 이벤트 핸들러는 form이 submit 되는것을 인식합니다.

onsubmit = "return 함수명();"

이런식으로 사용하여 함수내에서 form의 입력된 정보에 유효성 검사를 하여

맞지 않을 경우 false를 return 하는 형식을 취해주면 form이 전송되는 것도

막을 수 있습니다. = "return  <- 이문장은 함수로 부터 되돌아 오는

값이 false가 아니면 submit을 시키겠다는 뜻입니다.

+ Recent posts

티스토리툴바