출처: http://kossovsky.net/index.php/2009/07/function-context-and-apply-function/

현재 코드 상에서 this 는 대체 무얼까?
this 가 엉뚱한 걸 가르키거나 널이라는 에러를 많이 봤을 것이다.

<script type="text/javascript">
  var mathObj = {
   pi: 3.14,
   getCircumference : function(data) {
    alert(this.pi * 2 * data.radius);
   }
  }
  mathObj.getCircumference(10);
</script>

위의 코드는 아무 문제가 없다.
컨텍스트가 변경되는 경우를 한번 살펴보자.

<script type="text/javascript">
  var mathObj = {
   pi: 3.14,
   getCircumference : function(data) {
    alert(this.pi * 2 * data.radius);
   },
   getRemoteCircumference: function(url) {
    $.getJSON(url, this.getCircumference);
   }
  }
  mathObj.getRemoteCircumference("RadiusData.js");
</script>


위의 코드에서는 ajax 의 콜백으로 getCircumference 를 호출한다.
즉  getJSON 함수가 내부에서  getCircumference 호출해 주는 것이다. 그렇다면  여기서  this  는 무엇을 가르킬까? 위의 코드는  this.pi 가 정의 되지 않았다는 에러가 나온다. 현재 컨텍스트는 외부 함수인 getJSON 이므로 여기서 this 키워드는 jquery 객체중 하나를 가르키게된다.

이것의 해결방법은

alert(mathObj.pi * 2 * data.radius);    이런식으로  this 를 쓰지않고 객체명을 직접 서술하는 방법인데,
this 를 쓸수 없다는 단점이 생긴다. this 를 쓸수 없으므로 함수 호출때 마다 객체명을 일일이 써줘야 한다.

좀 더 나은 방법은 apply  를 써서 scope 를 변경해 주는 것이다.

<script type="text/javascript">
   function getContextFunc(context, func) {
       return function() {
           func.apply(context, arguments);
       };
   }
   var mathObj = {
       pi: 3.14,
       getCircumference: function(data) {
           alert(this.pi * 2 * data.radius);
       },
       getRemoteCircumference: function(url) {
          $.getJSON(url, getContextFunc(this, this.getCircumference));
       }
   }
   mathObj.getRemoteCircumference("RadiusData.js");
</script>

apply 첫번째 파라미터는 scope를 정의한다. scope 은 쉽게 말해 this 키워드가 어는 객체를 참조하게 할 것인지를 말한다.

getContextFunc(this, this.getCircumference) 이렇게 해서 getCircumference 가 실행될때 this 는 현재의 객체인 this를 가리키게 하여 pi 를 제대로 참조할 수 있게 하는 것이다.



신고

댓글을 달아 주세요

동적 함수 호출

javascript 2010.04.06 14:05 |
apply 와 call 모두 동적으로 함수를 호출하는 기능을 수행할 수 있다.
즉 호출할 함수명이 동적으로 변할때, 함수명과 파라미터 정보를 얻어 동적으로 함수를 호출할 수 있다는 말이다.

다만 차이점은  파라미터 전달 방식만 다르다. apply 가 변수를 배열로 처리하고있어  call 보다는 유연한다.

function testHandler(param1,param2)
    {
        var sel=document.getElementById('sel');
        var func=sel.options[sel.selectedIndex].text;
        this[func].apply(this,arguments);
    }

위의 appy 예제는 select  에서 선택된 함수명을 호출하는 것인데,

function testHandler(funcName,param1,param2)
    {

        this[funcName].apply(this,Array.prototype.slice.call(arguments, 1)); //첫번째는 함수명 ,두번째 부터 파라미터..
    }

위 처럼 응용할 수도 있다.

참고 : apply https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply

var result = fun.apply(thisArg, [argsArray]); //fun 은 함수 , 모든 함수는 apply 기능을 내장하고 있다.

thisArg : this 키워드가 무엇을 가르킬지 정이하는 것. null 이거나 undefined 면 this 는 글로벌 객체를 가르킨다.
arguments : 모든 함수가 갖는 로컬 변수로 파라미터 배열을 가르킨다.

신고

댓글을 달아 주세요

  1. 쿨교 2010.07.12 15:09 신고 Address Modify/Delete Reply

    와우 많은 도움 되었습니다. 감사합니다.

서론보기..



아래의 링크에서는 iframe 을 사용한 보다 구체적인 코드를 보여줍니다.
http://hi.baidu.com/qianhh/blog/item/982524cea0d99e33b600c880.html

먼저 iframe 하나를 준비 합니다.

<IFRAME style="DISPLAY: none; LEFT: 0px; POSITION: absolute; TOP: 0px" src="javascript:false;" frameBorder="0" scrolling="no"></IFRAME>

여기서 src 부분을 위와 같이 처리하면 iframe 이 페이지를 로드하기위한 시도를 하지 않는다고 합니다.(https 를 사용하는 경우 이렇게 하지 않으면 오류 메세지가 나온다)- 좋은 팁인듯..

위의 태그를 static  스트링으로 두고 insertAdjacentHTML() 를 사용해 삽입하는 것도 좋음.

그 다음,
iframe.style.top
iframe.style.left
iframe.style.width
iframe.style.height
iframe.style.zIndex
iframe.style.display
의 속성을 조정해 이 아이프레임 위에 div 를 위치시키는 것임.

그러면 windowed 레이어간 z-index 상위인 아이프레임은 위에 나타나게 되고, 아이프레임은 windowless 의 z-index 도 수용하므로 div z-index  가 더 상위라면 아이프레임 위에 보이게 된다....라는 꽁수

아마도 이부분을 jQuery 에서도 구현해 두었을 것 같다는 생각으로 검색해 보니...
이미 플로그인이 마련되어 있었다.

결국,

jQuery 플러그인
http://brandonaaron.net/code 의 bgiframe 을 사용하면 만사 오케이란 소리다.

이 것은 jquery UI 에 external 폴더에도 이미 들어가 있으며 jquery ui 에서 이미 사용되고 있다.
jquery.bgiframe.js 파일을 링크하고

$("#loginDlg").dialog({
   bgiframe: true,
   height: 240,
   modal: true,
   autoOpen:false
});

위 처럼 사용하면 되겠다.

------------- 추가 내용 --------------

위의 방법은 이상하게도 IE6 의 select 컨트롤만 대상으로 만들어진 듯 하다.
Active-x 에서는 원하는 결과대로 나오지 않는다.

js 파일을 까보니 역시나 IE7 이상에서는 iframe 을 생성하지 않는다.
따라서 js 파일을 수정후 강제로 iframe 의 사이즈를 조정해보니 active-x 위에는 올라가기는 하지만 오버레이의 border 가 안보인다....

다른 방법을 찾다가...
http://jquery.malsup.com/block/#element jquery blockUI 란 놈을 찾았다.
테스트 해보니 잘된다.
특정영역에 active-x 가존재하고 그 위에 div 레이어를 올리려면 우선 위의 방법으로 active-x 를 block 시키고 그위에 div 를 올리는 방법을 쓰면 되겠다.

신고

댓글을 달아 주세요

  1. Favicon of http://www.morganjewelers.org/morganjewelers/morgan-jewelers-salt-lake-city.html BlogIcon morgan jewelers salt lake city 2011.05.22 02:11 신고 Address Modify/Delete Reply

    당신에게 자신의 지식에 대한 감사, 감사 내가 새로운 지식을 많이 찾을 수 있습니다. 다시 한번 감사드립니다. 너도 내 사이트를 방문하시기 바랍니다

http://www.jsonlint.com/

이곳에서 JSON 스트링 오류를 검사해 볼 수 있다,
친절하게 어디가 잘못되었는지 알려준다.

JSON 스트링에 오류를 찾기는 매우 짜증나는 일인데..덕분에 한방에 처리했음.
신고

'javascript' 카테고리의 다른 글

IE 와 firefox 쿠키 문제  (0) 2010.02.03
Open Flash Chart  (0) 2009.12.08
The JSON Validator(JSon 스트링 유효성 검사)  (0) 2009.11.27
자바스크립트에서 함수호출  (0) 2008.04.14
드레그로 선택한 영역의 텍스트 가져오기  (0) 2008.03.20
JSONP ?  (0) 2008.01.29

댓글을 달아 주세요

출처 : http://dotnetslackers.com/articles/aspnet/JavaScript_with_ASP_NET_2_0_Pages_Part1.aspx

asp.net2.0 에서는 클라언트사이드에서 필요한 자바스크립관련 유용한 기능들이 몇가지 추가되었다.
그래서 Page.RegisterStartupScript 를 써야 했던 노가다를 좀 줄여준다.

1. 특정컨트롤에 포커스 주기

Page.SetFocus(control);

로 페이지 객체의 매소드를 호출하거나

Textbox1.Focus();

위와 같이 웹컨트롤 내부의 함수를 호출해도 된다.

또한 form 에 DefaultFocus 라는 속성이 추가 되어서 폼이 로드시 기본 포커스를 지정할 수 있다.
아래 코드처럼 하면 textbox2 에 포커스가 간다.
<form defaultfocus="textbox2" runat="server">
  <asp:textbox id="textbox1" runat="server"/>
  <asp:textbox id="textbox2" runat="server"/>
</form>


2. 메세지박스 띄우기

'삭제 하시겠습니까?' 라는 comfirm 메세지를 띄우고 '예'를 클릭하는 경우만 포스트 백이 일어나게 하는 경우 전에는 주로 Attribute 에 onclick 이벤트를 넣어 처리했지만, 버튼 컨트롤에 있는 onClientClick 을 이용해서 처리할 수 있다는 내용


3. 포스트 백 후에도 같은 스크롤위치 고정시키기

지랄스럽게도 포스트백이 되버리면 페이지가 리로드 되는 것처럼 스크롤 포지션을 잃어버린다.
asp.net2.0 에서는 무지하게 쉽게 스크롤 위치를 유지해준다.

<%@ Page ... MaintainScrollPositionOnPostback="true" %>


4. 동적으로 스크립트 페이지에 추가하기

특정이벤트가 발생햇을 경우 실행할 스크립트를 추가하는 경우이다.
이런 경우 ClientScript.RegisterClientScriptBlock 을 사용한다.

<script runat="server">
  protected void btnPopUp_Click(object sender, EventArgs e)
  {
    //Build a Pop Up JavaScript
    //please note the peculiar '/script' in the last line of the script string
    //This is to work around the problem that compiler would mistake the 
    //closing script tag as the outer script closing tag.
    //For details, please see
    //http://support.microsoft.com/default.aspx?scid=kb;EN-US;827420

    System.Text.StringBuilder sb = new System.Text.StringBuilder();
    sb.Append("<script language='javascript'>");
    sb.Append("window.open('javascript.htm', 'CustomPopUp',");
    sb.Append("'width=200, height=200, menubar=yes, resizable=no');<");
    sb.Append("/script>");

    //register with ClientScript
    //The RegisterStartupScript method is also slightly different
    //from ASP.NET 1.x
    Type t = this.GetType();
    if (!ClientScript.IsClientScriptBlockRegistered(t, "PopupScript"))
      ClientScript.RegisterClientScriptBlock(t,"PopupScript", sb.ToString());
  }
</script>

<form id="form2" runat="server">
  <asp:Button ID="btnPopUp" runat="server" 
    Text="PopUp" OnClick="btnPopUp_Click" />
</form>

5. 페이지 초기 로드시 실행할 스크립트의 추가

ClientScript.RegisterStartupScript 를 사용하면 된다.


6. Embedding JavaScript in Resources

이부분은 별 필요성을 못느껴서 생략....
참고링크 :http://aspnet.4guysfromrolla.com/articles/080906-1.aspx
신고

댓글을 달아 주세요

출처 :
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Function:call
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Function:apply


외부함수를 호출하는 방법에 대해 이야기 하고 있다.this 에 대한 scope 변경도 함께 알 수 있다.


번역은...나중에..
신고

'javascript' 카테고리의 다른 글

Open Flash Chart  (0) 2009.12.08
The JSON Validator(JSon 스트링 유효성 검사)  (0) 2009.11.27
자바스크립트에서 함수호출  (0) 2008.04.14
드레그로 선택한 영역의 텍스트 가져오기  (0) 2008.03.20
JSONP ?  (0) 2008.01.29
Javascript Closures  (0) 2008.01.09

댓글을 달아 주세요

SIMILE

javascript/simile 2008.03.31 13:52 |
http://simile.mit.edu/

Semantic Interoperability of Metadata and Information in unLike Environments

MIT 내부 오픈 소스 프로젝트인 듯 하다. (관련링크)

여러가지 쓸만한 프로젝트가 많이 있는데..그중에 흥미로운 것이

Timeline 프로젝트와 Timespot 프로젝트다.

timeline 은 프로젝트 일정같이 시간과 관련된 히스토리를 한번에 쉽게 볼 수 있는 ux 를 제공한다.
timespot 은 타임라인위에 그래프를 그릴 수 있게 해준다.
모두 애드온 설치 없이 자바스크립트로 되어있다.

간단한 것을 만들어보고 블로그에 포스팅을 해볼 생각이다.


신고

'javascript > simile' 카테고리의 다른 글

SIMILE  (0) 2008.03.31

댓글을 달아 주세요

more..

신고

'javascript' 카테고리의 다른 글

The JSON Validator(JSon 스트링 유효성 검사)  (0) 2009.11.27
자바스크립트에서 함수호출  (0) 2008.04.14
드레그로 선택한 영역의 텍스트 가져오기  (0) 2008.03.20
JSONP ?  (0) 2008.01.29
Javascript Closures  (0) 2008.01.09
ParseInt 사용시 문제점  (2) 2008.01.09

댓글을 달아 주세요

YUI2.5.0 나왔다.

javascript/yui 2008.02.29 17:02 |

2월20일 이미 출시가 되었나보다.

출처 : YUI 2.5.0 Released — Big upgrades to DataTable, new Layout Manager, Flickr-style multi-file Uploader, and more

주목할 만한 것은

드디어 YUI-멀티파일업로더가 나왔다는 것.

The YUI Uploader is the same code that drives Flickr's multi-file photo uploading interface.
플리커 업로드 같은 깔끔한 업로더를 만들 수 있게 되었다.

그리고 그동안 왜 빨리 안만들었는지 모르겠지만, Resize 컨트롤 기능이 추가되었고
이걸 이용해 Layout-Manager 란 것도 생겼다.
레이아웃 매니저는 아직 베타지만 꽤 흥미로운 놈이다.

그리고 ImageCropper Control 도 추가 되었다.

여로모로 쓸모가 많을 듯 하다.

기타 이것 저것 많이 추가되고 샘플들도 많이 추가된 것 같은데..슬슬 살펴봐야 겠다.

신고

댓글을 달아 주세요

출처 : YUI 2.4.0 Released — Selector, Charts, Profiler, Script/CSS Get, and JSON Support

YUI 2.4.0 가 나왔다.

추가된 기능을 잠깐 살펴보면

Select Utility : CSS3 에서 엘리먼트를 지정하는 방식을 사용해 html 엘리먼트 노드를 지정할 수 있게 해준다는 것 같다. 아직 베타다.

var nodes = YAHOO.util.Selector.query('div p');
위 처럼 , div 태그 안에 있는 p 태그들을 지정하여 가져올 수 있게 해준다는 것이다.
proposed CSS3 Selector extensions 의 문법을 참고하면 도움이 된다.

Chart Control : 플래쉬로 동작하는 차트를 제공한다.
http://developer.yahoo.com/yui/charts/ 에서 볼 수 있다.
사용자 삽입 이미지


Get Utility : 동적으로 스크립트 노드나 CSS 링크 노드를 추가할 수 있게 해준단다.
크로스 도메인이 필요한 북마크릿 같은 것에서 쓸모가 있을 듯 하다. AJAX 가 크로스 도메인에 막혀 있기 때문에 그에 대한 대안으로 만들어 진 듯 하다.
또한 javascript 라이브러리를 꼭 필요한 경우에만 동적으로 로딩하기 위한 목적으로 쓸 수 있다.
http://developer.yahoo.com/yui/get/

Profiler : 유닛 테스트 등에 사용 될 수 있는 자바스크립트 프로파일러 제공.
성능측정 , 동작 정보등을 제공한다. 아직 관심이 없어서 그냥 패스.
http://developer.yahoo.com/yui/profiler/

JSON Utility : JSON 문자열을 오브젝트로 만들어주는 파서와 오브젝트를 JSON 문자열로 만들어 주는 문자화 기능을 제공한다.
http://developer.yahoo.com/yui/json/ 

Button : 다양한 버튼 기능 추가
사용자 삽입 이미지
http://developer.yahoo.com/yui/button/

Drag&Drop , Calendar , Rich Text Editor 등이 보강 되었다.
http://developer.yahoo.com/yui/dragdrop/
http://developer.yahoo.com/yui/calendar/
http://developer.yahoo.com/yui/editor/
신고

'javascript > yui' 카테고리의 다른 글

YUI-ImageLoader Utility  (0) 2008.04.01
YUI2.5.0 나왔다.  (0) 2008.02.29
YUI 2.4.0 Released — Selector, Charts, Profiler, Script/CSS Get, and JSON Support  (2) 2007.12.05
YUI2.3.0 가 릴리즈 되었다.  (0) 2007.08.22
Cross Domain AJAX Request  (4) 2007.07.13
YUI 동적 로딩시 버그  (2) 2007.06.25

댓글을 달아 주세요

  1. Favicon of http://mop.freerunso.com/ BlogIcon Nike Free Run 2 2013.04.10 23:56 신고 Address Modify/Delete Reply

    진정한 자신감, 사람들 처음부터 맹인 신뢰 대한 열등감 중간에서 자신감을 사실에 더 자신감이 없습니다.

  2. Favicon of http://kdy.gencbeyin.net/ BlogIcon oakley sunglasses cheap 2013.04.11 14:50 신고 Address Modify/Delete Reply

    삶의 목표는 너무 많은 아니라, 계속 한 것은, 투자 관심과 열정을 찾아, 당신은 성공합니다.

유저가 항상 볼수있는 채팅창을 구성하다 보니 생각보다 까다롭다.
리사이즈나 스크롤을 하더라도 항상 같은 위치에 채팅창이 보여야 하기 때문인데..

네이버 검색에서 찾다가 쓸만한 것을 못 찾았고, 구글검색에서 맘에 드는 것을 찾았다.
덕분에 괜잖은 사이트도 알게된 듯.

http://www.javascriptkit.com 에서 제공하는
Using JavaScript to statically display elements 내용은 그 원리부터 잘 설명해 주고 있다.

브라우저 호환성 까지 고려한 스크립트를 제공한다.

http://www.javascriptkit.com/javatutors/static4.shtml 에서는 CSS 를 사용한 방법도 알려주는데, IE6 에서는 지원을 안한다고 한다. IE7 에서는 될거라고 하는데...지금 IE6 을 사용중이라서 테스트는 못해봤다.

아래는 테스트용 스크립트다.

<div id="staticcontent" style="position:absolute; border:1px solid black; background-color: lightyellow; width: 135px;">
This content stays afloat and always in view, even if you scroll the page.
</div>


<script type="text/javascript">
//define universal reference to "staticcontent"
var crossobj=document.all? document.all.staticcontent : document.getElementById("staticcontent")

//define reference to the body object in IE
var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body

function positionit(){
//define universal dsoc left point
var dsocleft=document.all? iebody.scrollLeft : pageXOffset
//define universal dsoc top point
var dsoctop=document.all? iebody.scrollTop : pageYOffset

//if the user is using IE 4+ or Firefox/ NS6+
if (document.all||document.getElementById){
crossobj.style.left=parseInt(dsocleft)+5+"px"
crossobj.style.top=dsoctop+5+"px"
}
}
setInterval("positionit()",100)
</script>
신고

댓글을 달아 주세요

  1. Favicon of http://www.drdrebeatsoutletus.com BlogIcon Cheap Beats By Dr Dre 2011.12.25 16:47 신고 Address Modify/Delete Reply

    아이구, 괜 찮 아요 요.감사 나 눠 갖 는 다.^_^

  2. Favicon of http://www.drebeatsoutlet4u.com BlogIcon Cheap Beats By Dre 2011.12.25 16:47 신고 Address Modify/Delete Reply

    감사합니다 나 눔 을 기대 하는 것 이 당 신의 다음 편 공유 했 다.

  3. Favicon of http://www.monsterbeatsoutlet4u.com BlogIcon Monster Beats Outlet 2011.12.25 16:48 신고 Address Modify/Delete Reply

    다른 느낌 을 나 누 는 감사합니다.

  4. Favicon of http://ad.oakleysunglassesouty.com/ BlogIcon oakley sunglasses discount 2013.04.02 04:18 신고 Address Modify/Delete Reply

    아름다운 여자가 해바라기하는 걸 좋아해요

  5. Favicon of http://da.coachfactoryoutletsv.com/ BlogIcon coach outlet 2013.04.03 03:51 신고 Address Modify/Delete Reply

    아름다운 여자가 해바라기하는 걸 좋아해요

Comet 개요

javascript/comet 2007.06.18 10:15 |
코멧이란 기존의 웹 모델과는 달리 클라이언트의 요청없이 서버가 클라이언트에 데이타를 전달하는 기술을 말한다.
이런 push 형태의 모델을 언급한 Comet:Low Latency Data for the Browser란 글에서 저자인 Alex Russell이 이름 지었다.

이 기술을 바탕으로 윈도우 application 에서와 비슷한 event-driven web application 을 구현할 수 있다.

워래의 웹페이지 모델은 connectionless 모델로 클라이언트(대략 브라우저)에서 명시적인 요청을 보내면 이에 대해 서버가 연결(connection) 을 생성하고 이를 통해 데이타(페이지)를 전송 후 연결을 닫는 형태이다. 따라서 페이지를 갱신하거나 url 을 바꾸거나 할때 페이지의 전체를 구성하는 데이타가 전송되어야 햇으며 , 이때 불필요한 데이타의 전송으로 인한 지연이 발생할 소지가 많았다.
이에 대한 해결책이 ajax 로, 페이지에 업데이트할 부분만 요청하고 그부분만 다시 렌더링하여 서버와 네트웍 부하를 최소화 하는 것이다. 또한 기존의 리프레쉬 방식에서는 서버가 응답하는 동안 유저는 빈화면을 멀뚱히 보며 기다려야 했으나 ,ajax 는 비동기 통신이므로 유저는 응답을 기다리며 다른 일을 할 수 있다.
하지만 이 모델은 항상 클라이언트가 서버에 명시적인 데이타 요청을 하지 않으면 결과를 얻어을 수 없다는 것은 기존 방식과 같다.

이 문제는 event-driven 방식의 어플리케이션을 설계하는데 매우 중요한 문제다. 서버의 이벤트를 감지해 클라이언트에 push 할 방법이 없을까... 한가지 대안은 주기적으로 비동기 요청을 클라이언트가 서버에 보내 확인해 보는 방법이다. 하지만 이것은 썩 좋은 모델이 아니다. 쓸데없는 많은 요청을 보내야 하므로 서버부하는 물로 네트웍 대역폭에도 낭비가 심하다.

더 나은 모델은 클라이언트가 서버에 요청이 없어도 이벤트가 발생하면 서버가 클라이언트에 메세지를 전달하는 것이다. 그러면 클라이언트가 주기적으로 서버를 체크할 필요가 없어진다. 이러한 Server-Push 방식을 Comet 이라고 한다.

하지만 push 모델은 다량의 연결을 발생시켜 시스템부하를 일으킬 문제를 갖고있다. 그러나 다행히 이에 대한 해결방안 또한 여러 대안이 나오고있다.Ajax/Comet Request Router는 이에 대한 메카니즘을 제공하고 있다.
그 밖에 브라우저의 유저당 2 커넥션만 지원 문제도 고려 해야 한다.그리고 클러스터 시스템을 위한 메세지 지향 미들웨어도 읽어 볼만 하다.

  • 참고 :COMET - the next stage of AJAX
  • 참고 :위키피디아 코멧
  • 참고 : Exploring Reverse AJAX
  • 신고

    댓글을 달아 주세요

    1. Favicon of http://www.hermesbagsoutletsale.com BlogIcon Hermes Bags 2011.12.11 17:08 신고 Address Modify/Delete Reply

      아이구, 괜 찮 아요 요.아주 재미 있 었 어요.

    2. Favicon of http://www.drebeatsoutletus.com BlogIcon Monster Beats Outlet 2011.12.11 17:08 신고 Address Modify/Delete Reply

      훌 륭 한 작품 이다.

    3. Favicon of http://www.drebeatsoutlet4u.com BlogIcon Monster Beats Outlet 2011.12.11 17:08 신고 Address Modify/Delete Reply

      다른 느낌 을 나 누 는 감사합니다.

    출처: http://developer.yahoo.com/yui/docs/YAHOO.util.Dom.html#getXY

    복잡한 Dom 구조에서 현재 선택한 object 의 절대 좌표를 구해야 할때가 있다.
    오브젝트의 이벤트(마우스 오버 같은) 발생시 그 위에 Div 로 무언가를 띄워야 할 경우가 그렇다.

    YUI 에서 이럴때 좌표를 구할수있는 메소드를 지원해 준다.


    YAHOO.util.Dom.getXY(object);

    위의 메소드를 사용하면 object 의 x,y 좌표가 어레이로 리턴된다.
    첫번째가 x 좌표 두번째가 y 좌표다.

    getX,getY 도 지원한다.

    오브젝트의 top,left,bottom,left 를 알아내기 좋은 getRegion 도 참고 할 만한다.


     

    신고

    댓글을 달아 주세요

    1. Favicon of http://www.hermesbagsoutletsale.com BlogIcon Hermes Bags 2011.12.11 17:08 신고 Address Modify/Delete Reply

      아이구, 괜 찮 아요 요.아주 재미 있 었 어요.

    2. Favicon of http://www.drebeatsoutletus.com BlogIcon Monster Beats Outlet 2011.12.11 17:08 신고 Address Modify/Delete Reply

      훌 륭 한 작품 이다.

    3. Favicon of http://www.drebeatsoutlet4u.com BlogIcon Monster Beats Outlet 2011.12.11 17:08 신고 Address Modify/Delete Reply

      다른 느낌 을 나 누 는 감사합니다.

    패왕넷 을 통해 알게된 "개체 지향 기술을 이용한 고급 웹 응용 프로그램 만들기" 를 읽다 보니 몇가지 추가하고 싶어졌다.

    "AJAX in Action" 책을 보면 뒤에 부록B에서 이부분을 다루고있다.

    언급한 글에서 '자바스크립트는 사전입니다'라는 대목은 Dictionary Object 라는 뜻일 것이다.(아마도)직역을 하다보니 저렇게 된듯한데... AJAX in Action 에서는 배열이라고 표현했다.
    자바스크립트의 배열은 일반배열과 딕셔너리형(키/값이 쌍인..)배열을 모두 지원한다.
    즉 배열을 인덱스로도 접근가능하고 키로도 접근 가능하다는 것이다.
    또 재미있게 키값은 oop 프로그래밍에서 속성을 접근하는 것같은 문법으로 접근이 가능하다.


     JSON 사용하기

    • 자바스크립트의 배열 new Array() 는 [ index ] 방식과 ['name'] 방식(키/값 쌍)을 모두 지원한다.
    • 일반배열은 [] 로, 키/값 형태는 {} 를 사용하면된다.
    • {} 형태에서 키값에 공백을 포함 시키려면 "" 로 묶어주면 된다.

             
      "best sller " : "test"

    • 자바크립트는 인터프리터 언어이기 때문에 해당 문자열을 만나면 바로 객체로 변환된다.
    • 날짜형의 경우 new Date() 를 바로 사용해도 된다.

            
      "createDate":new Date(2007,04,05),
    • 더 재미있는 건 동적인 값 할당이 가능하다는 것인데

          
      title : "test ver " + verNum ,
      price : getPrice(),
      sum : function (){}
      위와 같은 코드도 가능하다.
      여기서 title 은 + 로 연결된 문자열을 , 가격은 getPrice 함수의 결과가 할당된다.
      또한 sum 이라는 멤버는 함수로 기능한다.


    생성자,클래스,Prototype


    • 자바스크립트에서 function 은 단순히 함수가 아니라 객체로 받아들여야 한다.
      실제 function 의 정의는 함수라기 보다 fuction 객체의 생성자 이다.

    • function 을 사용한 객체의 정의에서 내부 함수 정의를 사용하면 [http]의도하지 않은 클로저 문제가 발생할 수 있다.
      또한 불필요한 내부함수 객체가, new 로 객체를 생성할 때 마다 생성되므로 메모리 누수가 발생할 수 있다.
          
      function testObj()
      {
      tellSomething=function (){};
      }
      var test=new testObj() : 내부적으로 tellSomething 이 만들어진다.
      이를 해결하는 방안으로 prototype 을 사용하는 방법이 있다.

    • 프로토타잎은 자바스크립트만의 특징이다.
      프로토타잎으로 정의한 멤버들은 객체 생성시 자동으로 추가되며, 메소드의 경우 하나의 함수를 가르키게 된다.
      프로토 타입에서의 this 키워드는 생성된 객체를 가르킨다.

    • 프로토타입은 생성메소드(생성자)를 정의한 후에 사용가능하다.(순서주의)
    • 실행도중 프로토타잎을 임의로 변경할 수 있다.변경하지 전에 생성된 객체도 변경된 프로토타잎에 영향을 받는다.

    "개체 지향 기술을 이용한 고급 웹 응용 프로그램 만들기"에서는 closure 를 '차단' 이라고 번역한듯 하다. 클로저(차단) 기능을 이용해 전역 변수로 사용하는 방법, 객체의 멤버처럼 이용하는 방법등을 소개하고있다.

    자바스크립트 리플랙션


    어릴적 자주쓰던 필살기...'반사'..리플렉션이란 물체에 광선이나 파장을 보내 반사된 정보를 분석해 물체를 파악하는 것처럼(레이더 처럼)
    객체의 내부 속성이나 메소드 정보를 알아오는 기술이다.

    간단한 속성 확인방법


       
    if (typeof(MyObject.someProperty)=='undefined') {...}

    instanceof 사용시 주의사항

    • instanceof 는 객체형을 반환한다.
    • JSON 으로 구성된 객체는 Object 아니면 Array 뿐이다.
    • 내장객체는 상속을 받으므로 가장 상위 클래스는 Object 이다.
      따라서 Object 인지 검사하는 과정은 제일 마지막에 수행해야 한다.(Array 도 Object 에서 상속받는다.)

    • if (MyObj instanceof Array) { }
      else if (MyObj instanceof Object) { }
      ...
      if (myObj instanceof MyObject) {..}

    객체의 모든 속성과 메소드 찾아내기


    for (var i in myObj)
    { alert(myObj[i]); }












    너무많다...나중에 더 추가해야겠음..
    신고

    댓글을 달아 주세요

    1. Favicon of http://www.drebeatsoutletus.com BlogIcon Monster Beats Outlet 2011.11.28 16:56 신고 Address Modify/Delete Reply

      아이구, 괜 찮 아요 네, 고맙습니다 는 나 눠 갖 는 다.