블로그 포스팅 정말 오랜만이네요. 
그런데 쓸 내용도 없지만 막상 쓰려니 문체를 어떻게 해야할지 애매해지네요. ㅋㅋㅋ

러시아 자바스크립트 에반젤리스트 Dmitry A. Soshnikov 가 작성한 JavaScript. The Core 를 번역하였습니다.

원본 : http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
번역 : http://frends.kr/topics/javascript-core/

시간이 된다면 한번쯤 읽어 보면 좋겠네요.
추가적으로 위의 내용을 좀더 요약 정리한 내용은 Function works in JavaScript 에서 참고하세요. 


 
신고

'JavaScript > Core' 카테고리의 다른 글

JavaScript. 실행 컨텍스트 이해(Execution Contexts)  (2) 2011.10.23
JavaScript. The Core  (3) 2011.10.12
JavaScript History 정리 자료  (0) 2011.06.24
jQuery의 현재 그리고 미래  (0) 2008.10.07
Posted by Rhio.kim

JAVASCRIPT

  근 한달 동안 소중한 책들이 연달아 시리즈로 출판되었습니다.  책들의 소개에 앞서 웹 개발에 대한 트랜드가 과연 어떻게 흘러갈까? 라는 생각을 문득하게 됩니다.  RIA 에 맞춰 다양한 언어에서 강력한 인터넷 어플리케이션을 만들 수 있도록 방향을 잡고 변화하고 있고 그에 MS, SUN, Adobe 에서도 다양한 방법과 기술을 제시하고 있습니다.
사용자 삽입 이미지


  MS, SUN 과 Adobe의  RIA 기술은 닷넷 프레임웍이나 SDK와 같은 Runtime 환경을 위한 배포의 정책을 함께 가져야 한다는 것이 단점이 될 수 있습니다.  배포라는 부분은 아직까지는 무시 못할 부분중에 하나이기 때문이죠. 허나 자바스크립트에 비하면 그 기술과 기능은 분명 월등합니다.  반면 자바스크립트는 그러한 부분이 전혀 없고 단지 브라우저가 지원하는 ECMAS262 표준과 각 브라우저의 JavaScript 엔진에 따라서 손쉽게 동작하고 있습니다.

그렇기 때문에 현재 국,내외를 불문하고 많은 사이트에서 자바스크립트 프레임웍을 사용하고 있습니다.  서로 나아가야 할 방향은 틀리기 때문에 서로 비교하는 것이 오류일 수도 있지만… ^^;

한가지 더 언급하면 MS, SUN, Adobe에서 제시하는 기술은 너무나 다양한 사용자의 환경, 인터넷 인프라에서 원활히 많은 기능을 충족 시키기에는 아직은 어려움이 있어 보입니다.  RIA의 모든 기능적 조건을 만족하기 위해서는 그만큼의 시스템 환경과 인터넷 인프라가 구축되어야 하지만 반면 국외의 경우 아직도 매우 낙후한 환경이 많이 존재한다는 것입니다.  
이에 경량의 자바스크립트 프레임웍은 낙후된 환경에서도 현재보다 진보된 기술과 기능을 제공하도록 발전해 가고 있습니다.  다가오고 있는 인터넷 환경의 Rich Application에 필요한 기술을 모두 갖출 수 있도록 발전해 나갈 수 있으리라 봅니다.


JavaScript 로 Ajax/Rich UI 실무와 연구(?)를 꾸준히 해오면서 힘들었던 것은 대부분의 자료가 외국 자료였고 자주 접하게 되는 프레임워크의 레퍼런스조차 국내화 되어있는 것이 턱없이 부족했었다.  이에 2006년 김영보선생님의 Prototype 프레임워크를 분석한 “Ajax Prototype.js 완전정복” 이라는 책을 시작으로 JavaScript의 관심도는 무척이나 높아졌던 것 같습니다.(개인적인 생각)

그 이후 꾀 오랜 시간이 흐르고 최근에 줄줄이 발간된 ‘JavaScript 완벽가이드’, ‘Prototype & Script.aculo.us’, ‘Pro JavaScript Techniques’, ‘jQuery in Action’ 자세히 보면 인사이트 출판사에서 웹이 나아갈 방향 아니 미래를 읽었을까?  



자바스크립트 완벽 가이드 상세보기
데이비드 플래너건 지음 | 인사이트 펴냄
웹 2.0과 Ajax 시대의 중심에 있는 자바스크립트의 기초부터 고급까지! 이 책은 프로그램 언어인 자바스크립트를 체계적이고 심도 있게 다루었다. 자바스크립트에 대한 깊이 있는 설명, 자바스크립트답게...

  연이어 출간된 서적들의 흐름을 보면 JavaScript의 원론을 파악할 수 있는 JavaScript 완벽가이드라는 책.  이는 JavaScript에 대해서 심도 있는 부분까지 알고 싶어했던 개발자라면 원서로 이미 접했을 만한 책이다.   또한 이 서적은 최근 5판까지 개정판이 원서로 나왔었고 3판까지 번역서가 출간된 이래 5판의 원서가 출간되지 꽤 오랜 후에 번역되었는데 원서를 보며 어려움을 겪던 개발자들에게 분명 단비와 같은 역할을 할 것이라 생각합니다.
  그리고 “오해가 깊은 자바스크립트”의 오해의 골을 풀어주지 않을까 생각하고 늘 바이블과 같은 역할을 해줄 것이라 믿습니다.



프로 자바스크립트 테크닉 상세보기
존 레식 지음 | 인사이트 펴냄
테크닉! 이 책은 JavaScript의 고급 테크닉을 다룬다. 너무 기초적인 문법이나 문장 구조 같은 기본적인 사항들을 배제하고, 곧바로 자바스크립트에서의 객체지향이라는 개념과 테스트를 위한 도구, 배포와...

Pro JavaScript Techniques 는 초급을 넘어선 자바스크립트를 이용한 Ajax/Rich UI 개발을 해보았거나 jQuery, Prototype와 같은 프레임워크를 이용하면서 이들에 대한 기술적 의문을 갖었던 것들의 많은 부분을 해소시켜줄 수 있는 책이다.  

이 책의 서두 2부까지의 내용은 JavaScript의 가장 기본이며 자바스크립트에 대한 오해 즉 JavaScript 개발자가 갖는 오해의 많은 분들을 풀어줄 수 있는 내용을 담고 있습니다.  번역서가 나오기 전 원서를 통해서 내용을 접할 때는 확실한 의미 전달이 되지 않았었는데 이번 번역서를 계기로 명확한 의미를 이해할 수 있는 계기가 되었던 것 같습니다.

그리고 jQuery의 창시자인 존 레식(John Resig)은 본인이 갖은 노하우를 거침없이 독자(자바스크립트 개발자)에게 모든 것을 공유할 마음을 갖고 있는 것 같습니다.  그의 블로그를 통해서도 느낄 수 있지만 늘 열심히 새로운 기술에 대한 공유를 선두하고 있고 저 같은 경우에도 그런 열정을 많이 배우고 있습니다.  (각설하고)

책의 모든 내용을 설명으로 일관할 수 없지만 실무에서 JavaScript를 이용한 Ajax/Rich 개발을 하고 있는 분이라면 이 책을 38,939,392,391,382번 읽어 보시길 권장드립니다. (그 만큼 많이 읽어 보면서 의미를 되새길 만한 내용들이 매우 풍부합니다.)


프로포타입과 스크립타큘러스 상세보기
크리스토피 포트누브 지음 | 인사이트 펴냄
이 책은 자바스크립트 개발에서 필수적인 라이브러리가 된 프로토타입(Prototype)과 스크립타큘러스(script.aculo...프로토타입(Prototype)은 동적인 웹 애플리케이션 개발을도와주는 자바스크립트 라이브러리다....

  다음 소개할 책들은 아시는 분들은 아시겠지만 위의 책들의 내용이 지식으로 선행된다면 좀더 쉽게 다가올 수 있는 내용입니다.  ‘Prototype & Script.aculo.us’ 는 앞서 설명한 책들의 기술(자바스크립트의 다양한 기술)과 더불어 DOM, CSS 에 대한 지식이 함께 필요로 하는 책에 가깝습니다. 
  흔히 생각하는 레퍼런스 서적에는 조금 거리가 있지만 그 안에 숨어있는 사상과 특징들을 쉽게 파악하여 프레임웍 자체의 큰 그림을 그릴 수 있는 내용들로 이뤄져 있습니다.  또한 DOM, CSS에 대한 궁금증과 기술 학습에 절실함을 느끼게 될 지도 모릅니다.  Prototype을 통해 Script.aculo.us는 탄생한 것 처럼 Prototype을 이용해 ExtJS와 같은 Grid 프레임웍도 탄생할 수도 있는 확장성까지…

간단히 레퍼런스 가이드 역할을 넘어서 자바스크립트를 이용한 Ajax/Rich UI Application을 만드는데 큰 도움을 줄 것입니다.


프로그래밍 JQUERY 상세보기
베어 바이볼트 지음 | 인사이트 펴냄
『프로그래밍 jQuery: jQuery in Action』은 숙련된 웹 개발자가 되려 하는 초보 웹 개발자들을 위해 유용한 클라이언트 측 도구인 jQuery를 소개한다. jQuery의 설계 철학을 충실히 다룬활용서이다. iQuery의...

jQuery in Action이라는 책은 읽어 보지 않아서 모르겠지만 국내에서 이미 jQuery 프레임웍을 사용한 서비스들이 곳곳에 있고 관심있는 개발자들도 상당한 것으로 알고 있다.  존 레식의 JavaScript의 노하우의 결정판이기 때문에 이를 통해 JavaScript와 DOM, CSS의 모든 기술적 이해를 위한 윤활유 역할을 분명 해줄 것이라 판단한다.  또한 책이 번역되기 위해 인사이트 출판사에서 뒷받침하고 있기 때문에 더욱 믿음이 간다.

이미 많이 나와있지만 레퍼런스가 없는 프레임워크(Dojo, Mootools, ExtJS 등)가 많습니다.  그에 반해 Prototype과 jQuery에 대해서는 국외를 포함 국내에도 많은 자료들을 얻을 수 있는 기회가 많아 졌습니다.  하지만 프레임워크을 이용하고 접근하는 것에 있어서 사상을 먼저 이해하려는 접근법이 매우 좋은 좋은 것 같습니다.(김영보 선생님께서 해주신 말입니다.)

자리잡아가고 변화하는 과정의 자바스크립트의 “Unobtrusive JavaScript” 번역하기 힘든 수식어 처럼, “오해가 깊은 언어”라는 관례적인 이해의 탈바꿈 과정에서 위의 책을 포함한 다양한 서적들이 많은 도움을 주리라 생각됩니다.  
  또한 JavaScript와 관련된 좋은 서적들이 더 많이 출간되었으면 좋겠습니다.



신고

'라이프로그 > 책/잡지' 카테고리의 다른 글

JavaScript 에 관한 고찰과 책 소개  (15) 2008.09.11
좋은 생각  (0) 2008.04.22
javascript 책 소개  (0) 2008.04.14
올해 읽어 볼 전공 관련 서적!!  (5) 2008.02.14
원서를 읽어야할 이유  (6) 2008.01.04
마음에 양식 - 1日 30分 외 3종  (0) 2007.12.11
Posted by Rhio.kim
부제 : Javascript prototype은 어떤 의미를 갖는가?


MDC defined
Prototype is a property of various Javascript Objects
Prototype은 다양한 자바스크립트 오브젝트의 프로퍼티이다.

그럼 오브젝트는 무엇일까요?

object

An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.

Object Object의 타입type맴버입니다그것은 기본적인 value이나 오브젝트object, 함수function 각각 프로퍼티의 무질서한 컬렉션입니다.

오브젝트의 속성에 지정된 함수는 메서드method라 불린다.


다시 MDC 에서 정의한 프로토타입에 대한 설명입니다.

프로토타입prototype ECMAScript에서 구조structure, 상태status, 습성behavior 구현하기 위해 사용하는 오브젝트object입니다.

생성자constructor는 오브젝트를 생성할 때 그 오브젝트에 프로퍼티 레퍼런스를 가리킬 목적으로 생성자constructor의 연관된 프로토타입prototype 을 참조하게 됩니다.

생성자constructor와 연관된 프로토타입prototypeconstructor.prototype과 같이 프로그램program적인 표현expression 으로 참조 될 수 있고 native Object의 프로토타입prototype에 추가되어진 프로퍼티properties가 공유shared되어 집니다.


Constructor

생성자constructor생성create하고 초기화initialize하는 함수 오브젝트입니다각각의 생성자는 상속구현과 공유 프로퍼티 사용을 위해 연관된 프로토타입prototype 오브젝트를 갖습니다.


사용자 삽입 이미지

prototype 이라는 것은
javascript의 표준인 ECMAScript의 오브젝트 중 하나입니다.



이렇게 정의를 하고 계속해서 좀더 상세히 알아보도록 합니다.


ECMAScript는 C++, Smalltalk, Java 처럼 클래스의 개념이 존재하지 않지만 오히려 오브젝트를 위해 스토리지를 할당하고 그들의 프로퍼티에 초기값 할당을 통해 그것들의 일부 혹은 모든것을 초기화하는 실행 코드로 오브젝트를 만드는 생성자를 제공합니다.

생성자를 포함하는 모든 함수들은 오브젝트이지만 모든 오브젝트가 생성자가 되는 것은 아닙니다.

각각의 생성자constructor는 프로토타입 기반prototype-based 상속inheritance과 공유shared 프로퍼티properties를 구현하기 위하여 프로토타입 프로퍼티 갖습니다.

오브젝트는 new 연산자에 생성자를 사용하여 생성되어짐 : 예를 들어 new String(“A String”)는 새로운 string 오브젝트를 생성합니다.

new를 사용하지 않고 생성자를 적용하는 것은 생성자에 따른 결과를 갖습니다.

예를 들어 String(“A String”) 는 초기 문자열이 만들어집니다. 하지만 오브젝트는 아닙니다.

ECMAScript는 프로토타입 기반prototype-based 상속inheritance을 지원합니다.

모든 생성자는 연관된 프로토타입을 가집니다. 그리고 생성자에 의해 생성되어진 모든 오브젝트는 생성자와 연관된 프로토타입(Object’s prototype 이라 불리우는)에 절대적인 레퍼런스를 갖습니다.



사용자 삽입 이미지



더욱이 프로토타입prototype은 null이 아닌 원형prototype에 절대적인 레퍼런스를 갖습니다. 그래서 이것을 프로토타입 체인prototype chain 이라고 부릅니다.

오브젝트에서 레퍼런스reference가 프로퍼티property에 만들어 질 때 저 이름의 프로퍼티를 포함하는 프로토타입 체인chain의 첫번째 오브젝트에 저 이름으로 프로퍼티를 갖는다.



사용자 삽입 이미지


바꿔 말하면,  

첫번째는 오브젝트가 직접 언급했던 프로퍼티가 있는지 없는지 조사(검토)하는 것입니다.  만약 오브젝트가 정해진 프로퍼티를 포함한다면 그 레퍼런스가 참조하는 프로퍼티입니다.  만약 그렇지 않다면 오브젝트는 찾기 위해서 다음 프로토타입prototype으로 넘어간다

즉 위의 예제 소스를 예로 설명하자면 마지막에  childObject.name.toString(); 를 호출했습니다.
최초 childObject가 가지고 있는 name을 참조합니다. childObject에는 name 프로퍼티를 가지고 있기 때문에  toString()을 수행하게 됩니다. 만약 name 프로퍼티가 존재하지 않는다면 fatherObject -> grandFather -> Object 까지 찾아가게 되겠죠.

아무튼 name 프로퍼티가 존재하므로 childObject에는 toString()이라는 메서드를 수행하게 됩니다. 하지만 childObject 에는 toString() 이라는 메서드가 존재하지 않기 때문에 Object.prototype.toString()을 수행하게 됩니다. 만약 Object.prototype.toString 메서드가 존재하지 않는다면 당연히 (fireBug)toString is not a function 이라는 메세지를 보게되겠죠.


그래서 클래스 기반class-based 객체 지향 언어는 일반적으로 인스턴스instance에 의해 이동된 상태, 클래스에 의해서 이동된 메서드 그리고 상속은 구조와 습성의 유일함이다.

ECMAScript에서 상태와 메서드들은 오브젝트에 의해서 이동되어 집니다그리고 구조, 습성, 상태는 모두 상속되어 집니다.

직접 그것들의 프로토타입prototype이 포함하는 특별한 프로퍼티property를 포함하지 않는 모든 오브젝트들은 저 프로퍼티와 그 값value을 공유한다.

아래 다이어그램을 참조

사용자 삽입 이미지


CF는 생성자 입니다(그리고 또한 오브젝트 입니다.).

다섯개의 오브젝트는 new 연산자를 통해 생성 : CF1, CF2, CF3, CF4, CF5

각각의 오브젝트는 q1, q2의 프로퍼티를 포함합니다. 점선 라인은 절대적인implicit 프로토타입prototype 관계; 예를 들어 CF3의 프로토타입은 CFp입니다.


그 생성자 CF는 자체적으로 CFp, CF1, CF2, CF3, CF4, CF5에 보이지 않는 2개의 프로퍼티를 갖습니다.

CFp 안에 CFp1 프로퍼티는 q1, q2 혹은 CFp1라 지정되지 않는 CFp의 절대적인 프로토타입 체인에서 발견되어지는 어떤 프로퍼티들 처럼 CF1, CF2, CF3, CF4, CF5에 의해서 공유되어 집니다.

CFp CF 사이에 절대적인 프로토타입 링크가 없다는 것을 알아야 합니다.

클래스 기반 언어들과는 달라 프로퍼티들은 값을 할당하는 것으로 오브젝트에 동적으로 추가될 수 있습니다.

즉 생성자는 생성되어진 오브젝트의 프로퍼티 일부분 혹은 전체에 이름과 값의 할당하는 것을 요구하지 않습니다.

위의 다이어그램에서, 한가지 CFp에 프로퍼티에 새로운 값을 할당하는 것에 의해 CF1, CF2, CF3, CF4, CF5를 위한 새로운 공유된 프로퍼티를 추가할 수 있다.


모두 ECMAScript 262-2 Spec 자료입니다.
중간에 번역의 이해를 돕고자 이미지화 하였습니다.  혹 이미지화 한 것이 혼동을 잃으킬 수도 있습니다. ^-^;
오역이 있을 수 있지만 최대한 번역에 대한 점검을 하였습니다. (외국에 살다온 직장 동료에게 검증을 받았습니다. ^^;;)

신고
Posted by Rhio.kim
Class-Based vs Prototype-Based Languages

사용자 삽입 이미지
과연 자바스크립트 OOP에 대한 이해도를 조금 높히는데 도움이 될까 번역해 보았습니다.  경우에 따라 오역이 있을 수도 있습니다.  또한 완벽하지 않다는 말이 될 수도 있습니다.

원글은 아래 링크를 기재해 두었습니다.  이번 글을 개념적인 부분을 설명하고 있어 글로만 표현하였습니다.  이미지를 첨부해 좀더 이해도를 높이려고 했으나.. 힘들어서 포기 ^-^;

우리가 흔히 알고 있는 객체 지향 언어인 Java 와 C++ 의 간단한 비교가 아래부분의 표로 기재되어있습니다.   하지만 기재된 것이 차이점의 전부라고 할 수는 없습니다.

언어와 다른 언어를 비교해가며 OOP가 된다 안된다를 거론하지는 않았으면 합니다.
또한 어느 언어나 객체지향이 가능하다라고 말하고 싶습니다.  마지막으로 OOP에 대한 비교 우위를 따지는 것은 단지 수치화 해보고 싶은 마음에서만 하는것이 좋다고 생각합니다.

Java와 C++과 같은 클래스 기반 객체지향 언어는 두 가지의 뚜렷한 본질적인 개념을 갖는다.

클래스
1.    하나의 클래스는 포함하는 일련의 오브젝트들의 특성을 나타낼 프로퍼티Property 모두를 정의한다.  클래스는 일련의 오브젝트의 특정 맴버들에 비해 더 추상적인 것이다.  예를 들면 사원 클래스는 모든 사원들의 구성을 표현할 수 있다.

관련정보 : http://en.wikipedia.org/wiki/Class_(computer_science)

인스턴스
1.    반면에 인스턴스instance는 클래스의 인스턴스 즉 맴버중에 하나입니다.  예를 들어 사원 클래스의 인스턴스로 특정한 개개의 직원을 표현할 수 있습니다.
2.    인스턴스는 부모 클래스의 속성을 정확하게 갖고 있습니다. (그 이상도 그 이하도 아님)


클래스 정의

자바스크립트 같은 프로토타입 기반prototype-based 언어는 이렇게까지 구분하지 않습니다. : 단순히 오브젝트Object를 같습니다.

프로토타입 기반 언어는 prototype 오브젝트의 개념을 갖습니다.  개체를 사용하는 템플릿으로써 새로운 오브젝트를 위한 초기 프로퍼티를 얻기 위해 사용됩니다.

모든 오브젝트는 생성할 때나 런타임 때 자신의 속성을 지정할 수 있습니다. 또한 모든 오브젝트는 prototype 통해서 다른 오브젝트에 연결 될 수 있고 두 번째 오브젝트에 첫 번째 오브젝트의 프로퍼티를 공유하도록 허락합니다.

클래스 기반 언어, 별도의 클래스로 정의합니다.
이 정의는 여러분이 클래스의 인스턴스를 생성하기 위해서 특별한 메서드를 지정하고 생성자를 호출합니다.  생성자 메서드는 초기값을 지정할 수 있고 생성 주기에 다른 처리를 할 수 있습니다.

여러분은 클래스의 인스턴스를 생성하기 위해 생성자 함수와 관련된 new 오퍼레이터를 사용합니다.

자바스크립트 또한 같은 모델이지만 생성자로부터 별도의 클래스 정의를 갖지 않습니다.  대신에 사용자는 오브젝트를 생성하기 위해서 특정한 초기 프로퍼티와 값의 구성을 정의합니다.  모든 자바스크립트 함수는 생성자처럼 사용될 수 있습니다.  새로운 오브젝트를 만들기 위해서 new 오퍼레이터로 생성자 함수를 사용하면 됩니다.


서브클래스subclass와 상속inheritance

클래스 기반 언어는 클래스의 정의를 통해 클래스 계층hierarchy 구조를 만듭니다.  클래스의 정의에 이미 존재하는 클래스의 하위 클래스로 새로운 클래스를 지정할 수 있습니다.  서브 클래스는 슈퍼 클래스의 모든 속성을 상속 받습니다.  또한 추가적으로 새로운 속성을 부여하거나 상속 받은 것들 것 수정할 수도 있습니다.

예를 들어 직원 클래스는 이름과 부서의 속성만 갖고 하위 클래스인 관리자는 보고 속성을 추가합니다.  이 경우 관리자 클래스의 인스턴스는 세가지 모든(이름, 부서, 보고) 속성을 갖게 됩니다.

자바스크립트는 prototypical 오브젝트를 어떤 생성자 함수와 연결시키는 것을 통해서 상속을 구현한다.

그래서 직원-관리자 예제를 정확하게 만들 수 있습니다.  하지만 약간의 다른 용어를 사용합니다.  직원 생성자 함수를 정의하고 이름과 부서 속성을 지정합니다.  그런 다음 관리자 생성자 함수를 정의하고 보고서 속성을 지정합니다.  마지막으로 관리자 생성자 함수를 위해 prototype에 새로운 직원 오브젝트를 할당합니다.  여러분이 새로운 관리자를 생성할 때 직원 오브젝트로부터 이름과 부서의 속성을 상속 받습니다.


속성 추가addding 및 제거removing

클래스 기반 언어는 전형적으로 컴파일 될 때 클래스가 생성됩니다.  그렇지 않으면 클래스의 인스턴스는 컴파일 시간 또는 런타임 시에 인스턴스화 됩니다.  클래스의 정의된 후에는 클래스의 속성 타입이나 숫자를 변경할 수 없습니다.  그러나 자바스크립트에서는 런타임 시에 어떤 오브젝트의 속성을 추가하거나 삭제할 수 있습니다.
한 구성의 오브젝트를 위해 prototype으로 사용되는 오브젝트에 프로퍼티를 추가하면 그것이 프로토타입인 오브젝트들 또한 새로운 프로퍼티를 얻는다.

클래스 기반 (자바)

프로토 타입 기반 (자바 스크립트)

클래스와 인스턴스는 별개의 엔티티이다.

모든 오브젝트는 인스턴스이다.

인스턴스는 생성자 메서드와 갖는

생성자 함수를 갖는 일련의 오브젝트를 정의하고 생성

new 연산자로 단일 개체 생성

동일

기존 클래스들의 하위 클래스를 정의하기 위해 클래스 정의에 의한 오브젝트 계층 생성

생성자 함수와 관련되어 프로토타입으로 오브젝트를 할당하므로써 오브젝트의 계층구조를 생성

클래스 체인으로 프로퍼티 상속

프로토타입 체인에 따라 프로퍼티를 상속

클래스 정의는 클래스의 모든 인스턴스의 모든 속성을 지정합니다.  동적 런타임 시에는 속성을 추가할 수 없다.

생성자 함수 혹은 prototype은 일련의 속성을 지정합니다. 단일 오브젝트 혹은 일련의 오브젝트들에 동적인 메서드 추가 및 삭제할 수 있습니다.


참조 자료 : http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages

신고
Posted by Rhio.kim
Prototype 1.5.1.1 의 Ajax 중복 요청에 대한(XHR Request managment)를 만들어 보았습니다.
자세한 내용은 아래를 참고해 주세요.

  문제제기
    네트워크 병목 현상이나 서버의 부하로 인하여 XHR(XMLHTTPRequest)의 Response가 늦어져
    사용자에 의해서 동일한 중복 요청이 발생할 경우

    e.g) Ajax 게시판에서 사용자는 1페이지에서 2페이지로 이동하는 단계에서 요청한 2페이지의 결과가
           Response 되기 전에 3페이지를 누르는 경우 2페이지의 XHR는 의미 없는 요청이 된다.

  해결방안 모색
    new Ajax.Request가 발생한 다는 것은 Ajax.Request.initialize() 생성자 함수가 호출되면서
    XHR 이 Request를 발생시키는데 이때 아래 시나리오를 추가하여 해결한다.
사용자 삽입 이미지


  시나리오
    1. 현재 개발되어진 소스에 영향을 받으면 안된다.
    2. Ajax._observers 배열에 이미 요청중인 요청이 있는 체크하여 있다면 현재의 요청과 비교한다.
        만약 있다면 3, 없으면 6
    3. 다음 Ajax.Request가 동알한 url 로 생성되어 질때 이미 쌓아 놓은 배열에 동일한 URL로 요청중인
        XHR에 abort() 이벤트를 발생시켜준다.
    4. 해당 Ajax.Request 오브젝트는 null로 변경한다.(메모리 누수 발생 될 수 있음)
    5. abort가 발생한 Ajax.Request 오브젝트 레퍼런스는 배열에 splice로 삭제한다.
    6. new Ajax.Request() 가 발생할 때 Ajax.Request 오브젝트의 레퍼런스를 배열
        Ajax._observers에 쌓는다.
    7. 정상 완료된 Ajax.Request가 있다면 Ajax.Responder에 의해서 사용자 등록한 responders 배열 중
        해당 callback method "onComplete"를 호출한다.
    8. Ajax._observers에 쌓아두었던 Ajax.Request 오브젝트의 레퍼런스를 소멸시켜준다.

예제
신고
Posted by Rhio.kim
사용자 삽입 이미지





  다양한 프레임웍(DOMAssistant 2.6, jQuery 1.2.3, Prototype 1.6.0.2, Mootools 1.2b2, ExtJS Core 2.0.1, YUI 2.4.1)들에 대한 셀렉터(Selector) 속도 및 유효성 테스트입니다.

  정확한 테스트와 상호 테스트간의 충돌을 방지하기 위해서 각각의 프레임웍 테스트를 각각의 아이프레임내에서 수행되도록 처리했네요. 최대한 정확한 테스트가 되기위해서 여러모로 신경을 썼다는 군요.

사용자 삽입 이미지

제 PC 에서 수행한 결과입니다.
DOMAssistant 2.6         1087ms
jQuery 1.2.3                  1454ms
Prototype 1.6.0.2      2324ms
Mootools 1.2b2             1578ms
ExtJS Core 2.0.1      617ms
YUI 2.4.1                      1789ms

테스트 결과가 생각과 많이 다르네요..
Prototype.js가 속도면이나 유효성면에서 제일 떨어지네요.  실망스럽네요. 하지만 다른 부분은 탄탄하게 구성되어있으니 element 찾을때 Selector를 이용해 접근하는 $$ 함수의 사용을 자재해야겠군요.

  반면 ExtJS는 그리드 기반의 Framework인데 Selector 부분을 신경을 많이 썼나보군요.
하기야 대부분 css 컨트롤을 통해서 그리드 구성을 할터이니 이부분도 상당히 신경을 썼겠죠..
내부 로직은 잘 모르겠지만 ExtJS가 Selector에서는 다른 Framewokr에 비해서 탁월한 성능을 보이는게 사실이네요.

테스트 사이트 : http://www.domassistant.com/slickspeed/
신고
Posted by Rhio.kim
Prototype Core team 멤버인 Tobie Lange씨는 Prototype 1.5 버젼 버젼에서 1.6으로 업그레이드 하려고 할때 API 변경이나 어떤 사용하지 못하는 것들에 대해서 경고해주는 스크립트를 개발하였습니다.

이 스크립트는 Firebug의 콘솔을 이용하기 때문에 Firebug에서만 동작을 합니다.

사용자 삽입 이미지

사용법은 1.5에서 1.6으로 변경할 페이지에서

1. prototype.js 를 추가한 태그 즉
   <script src="prototype.js"> 바로 아래로
2. deprecation.js 를 추가합니다.
   <script src="deprecation.js">
3. 그리고 디버깅과 함께 개발하면 됩니다.

이렇게 하면 위와 같은 console에 잘못 사용하거나, 변경되거나, 수정되거나 한 exception message가 계속 쌓입니다. 

개발은 계속 하되 단지 console의 로그 메세지만 출력하지 않을 거라면..

4. DeprecationNotifier.logDeprecation = false; 로 하면 log가 남지 않습니다.

원      문 : http://prototypejs.org/2008/2/12/deprecation-js-easing-the-1-5-1-6-transition
다운로드 : http://prototypejs.org/assets/2008/2/12/deprecation.js

신고
Posted by Rhio.kim
PBwiki 팀의 Brian Klug 씨는 자바스크립트(javascript) 라이브러리 제공에 대해 좀더 자세히 배우기 위해서

자바스크립트(javascript) 라이브러리 테스트를 Dojo, jQuery, Prototype, YUI, Prototculous 를 로딩해서 만들었네요. 

azki 님이 이런쪽에 관심이 많을것 같은데요?? 그런가요?? ^-^

이 테스트는 압축(packed)과 최소화(minified), gzip 과 gzip 하지 않았을때, 캐시 기타 등등 테스트에

속해있습니다.   흥미로운 결과중에 하나가.. 압축(packed)를 사용하지 말라는 것입니다.. ^^;;

테스트 써머리 페이지 http://jst.pbwiki.com/summary.php

사용자 삽입 이미지

Result Calculus (cached, gzipped, minified)
사용자 삽입 이미지

신고
Posted by Rhio.kim
자바스크립트 Alert 창과 Confirm 창을 하나로 합쳤습니다.
(약장수 버젼)자자 날마다 오는 소스가 아닙니다. 어딘가에 이미 나와있는 소스일지도 모릅니다.
그래도 아주 유용하게 쓰일 수 있다는 것, 안써본 사람은 몰라 alert(''); 신공을...
정말 불편할땐 이 소스 상단에 카피하고 example 참고해서 써바.. 완전 편해....

편하지 않아도 어쩔 수 없어요.. ^^;;





신고
Posted by Rhio.kim
사용자 삽입 이미지


사용자 삽입 이미지

별거 아닙니다.
FF에는 파이어 버그가 있어서window.console.log('debug'); 로 디버깅 메세지를 쉽게 볼 수 있는데요.

IE, Opera, Safari(최근 버젼에서는 지원하죠?) 에서는 원활히 지원되지 않아서..

급작스럽게 만든 티가 엄청 납니다.. ^-^;
나만 쓸껀데 뭐 ㅎㅎㅎ

그럼 머한데 공개했냐..?
자랑하려구요 ㅠ.ㅠ

갑자기 만들걸 자랑한다고? 
그럼 어쩌라구요?



간단하게 String native에 추가를 해버렸습니다.


사용법은 매우 아니 너무 간단합니다.


신고
Posted by Rhio.kim
John-David Dalton 씨는 최근(?) 업데이트된 120k가 넘는 Prototype.js 를 압축한 라이브러리를
구글 그룹스에 올렸네요.

1.4 버젼부터 대부분의 릴리즈 버젼을 압축하였네요.
용량은 상당히 많이 줄었네요..

Prototype’s lowest weighs in at 20.4kb.
Scriptaculous’ lowest weighs in at: 19.7kb.
Protoculous’ lowest weighs in at: 38.4kb.

또한 Script.aculos.us 와 Protoculous

http://groups.google.com/group/prototype-core
사실 오픈된 Compressor 를 적용시키면 에러가 많이 나는데 좋은 작업 해주었네요..
신고
Posted by Rhio.kim
사용자 삽입 이미지











Prototype 기반의 Ajax 버디버디 IM 3.2 입니다.

깔끔한 인터페이스 Javascript로 개발되어진 버디버디입니다.  실시간 메시징 처리가 됩니다.

개인 블로그며 홈페이지 원하는 곳에 플러그인 처럼 연동해서 사용할 수 있습니다.

PHP와 JS를 통한 OO 개발이 되었구요. 기존에는 prototype 기반이 아니여서 이번 버젼에는

기존 버전에 비해 많은 부분이 수정되었답니다.  다중 언어도 지원할 뿐더러. PHP 기반 세션 처리로

아이디와 비번을 메세지 날릴때마다 체크하지 않아도 됩니다.

테마(스킨) 기능도 지원됩니다. 블랙 테마가 추가 되었나 보내요..

국내 유저들은 언제쯤 이런 라이브러리를 개발해서 paypal 붙여볼까요??

붙인다고 후훤해주는 분들도 없으시곘지만요... ^^ 외국인에게라도 지원 받을 수 있지 않을까요???

그리고 참고로 한가지..

Copyright (c) 2006-2008, Joshua Gross (unwieldy studios)  All rights reserved.

사용자 삽입 이미지

신고
Posted by Rhio.kim
사용자 삽입 이미지
Ajaxian 의 2007 Ajax tool 투표 결과입니다.

올 한해 다양한 Javascript Library 들이 출시 되고 출시되었던 라이브러리들도 기능 강화와 OOP 개발이 가능하도록 라이브러리화 되었습니다.

Prototype 의 강세는 여전하네요..
다만 jQuery가 그 뒤를 바로 뒤쫓아오네요..

Ext JS 가 3위에 등극했다는 것은 상당히 !!

외국에서는 그리드 형식의 Ajax 어플리케이션을 선호하나봅니다.

웹 상에서 구현하기 힘든 그리드 형식의 어플리케이션 개발이 한결 수월해졌기 때문인데요.

아마 웹 기반 CRM 같은 개발 혹은 관공서나 국가 기간같은 디자인적인 부분을 많이 신경 쓰지 않고 기능 위주의 인터페이스에서 아주 효율적인 어플리케이션 개발이 가능하다는 것이죠.

상당히 발전할 수 있어 보입니다.

Script.aculo.us 는 Prototype을 모태로 상당히 많은 유저층을 이루고 있습니다.  둘이 함께 이용한다면...
60% 정도를 장악하고 있네요.  하지만 이제 jQuery와 interfaceElement 까지 나와서 내년 2008년은 어떻게 바뀔지 모르겠네요...

내년은 아무래도 더 많은 javascript library가 발표 되리라 예상됩니다.

또한 UI 라이브러리인 Mootools와 Yahoo 인터페이스에 최적화 되어있는 YUI 아주 많이 사용하고 있네요..
Mootools 는 깔끔한 UI 처리가 가능하고 Effect 별 모듈러를 지원해 필요한 UI 모듈만 따로 모아 js 라이브러리 파일을 생성해서 사용할 수 있습니다.

YUI는 야후의 javascript 아키텍쳐인 douglas crockford 씨의 개발 설계가 숨어있고 Yahoo라는 대형 서비스에서 검증된 실로 Prototype 못지않게 공부해 볼만한 UI 라이브러리라 생각되어집니다.

하지만 단점이라면 Yahoo에 최적화된 라이브러리이고 국내 정서에 자신의 사이트에 Yahoo라는 라이브러리를
써야한다는 자존심 괘난 자존심도 생기게 되구요.!!   다른 이유도 많이 있겠죠...

마지막으로 여전히 자체 개발한 Ajax Tool을 사용한다는 것..
어쩌면 내년에는 더 많아질지 모르겠다는 생각이 입니다.

사실 그랬으면 좋겠습니다.
좀더 많은 소스타입의 다양한 형태의 라이브러리가 많이 출시 되었으면 좋겠습니다.
신고
Posted by Rhio.kim
사용자 삽입 이미지

별점 라이브러리입니다.
Script.aculo.us 와 Prototype 1.6.0을 이용한 라이브러리 입니다.

유사하게 만들어 놓은 것이 있기는 한데 이게 훨씬 더 깔끔하네요...
투명 이미지를 통한 백그라운드 색상을 변화시켜서 처리를 했습니다.

상당히 효율적인 생각으로 접근했네요.  대부분의 국내 사이트의 롤오버 효과를 보면 이미지를 새로 로딩하는
경우가 많은데요.

이는 효율적인 웹 사이트 개발에 아주 저해되는 요소입니다.
개발자가 알아야할 부분이기도 하지만 디자이너도 알아야 할 부분입니다.

롤오버 자체는 더이상 이미지를 두개로 만들어 _on.gif  와 _off.gif 방식으로 롤오버는 더 이상
만들지 마시길 바랍니다.

이 라이브러리도 한가지 단점이라면 투명이미지를 활용해서 백그라운드 색상에 다른 경우에는
이미지를 새롭게 만들어 주어야 한다는 것이죠!

별의 색깔은 자유자재로 변곃라 수 있지만 백그라운드의 색상에 맞게 변경할 수는 없답니다.
그것까지 가능하려면 플래시를 조금 이용하거나 base64 이미지를 이용해서 동적인 이미지를 그리면 되겠죠.
하지만 그렇게 처리한다는 것 자체는 너무 무거워지는 라이브러리가 된다는 것!!

사용법 간단하게 위와 같이 파일을 import 합니다.
Css 파일도 import하구요. 이렇게 사용하면 됩니다. 다양한 옵션들은 이 처럼 설정하시면 됩니다. 사용자 css 도 가능하겠죠.. ^^
신고
Posted by Rhio.kim
간단한 목표가 생겼습니다.

완벽한 OOP라고는 하지 않지만 웹 상에서 구현할 수 있는 가장 필요한 OOP라고 하겠습니다.
어느 이론이나 개념은 늘 발전하고 개혁될 수 있습니다.

1+1 = 2 라는 불변의 진리라 하겠지만 그 쓰임과 상황에 따라 충분히 달라질 수 있다는 것은
물방울 1개와 물방울 1개가 합쳐지면 큰 물방울 하나라는 이치와 같습니다.

Javascript 가 진정한 OOL이다 아니라가 아니라.
다른 어떤 언어들과 비교했을 때 OOL라 하기엔 Javascript의 OOL을 다소 부족하거나 개념이 틀린 부분이
충분히 있을 수 있습니다.

하지만 흔히 말하는 OO에 아무런 지장없이 잘 활용할 수 있다 라는 것을 증명해 보고 싶습니다.

1. Class

이전 클래스 생성에 대해서도 이야기를 했었지만.. 이번에는 간단하게 좀더 고급스럽게 Class를 구현을 해보도록 하겠습니다.

위의 소스는 매우 간단한 예제입니다. 그냥 얼핏 보기에는 단지 클래스라기 보다는 Foo라는 함수(function)에 가까워보입니다.

하지만 자세히 보면 this.name 이라는 맴버 property를 갖는 것을 알 수 있습니다.



이렇게 new Operator을 통해서 맴버 property에 접근하거나 맴버 method를 호출합니다.
foo는 Foo의 인스턴스로 foo와 function Foo()의 내부의 this가 같는 constructor 는 같아 foo.name 이나
this.name 은 같습니다.

이는 맴버를 접근 방식이 외부의 접근이냐 내부의 접근이냐에 따라서 foo나 this로 바뀝니다.

하지만 이를 함수(function)로 오인하게 되면 결과는 예상밖의 결과가 나올 수 있습니다.



이거 하나 가지고 뭐가 얼마나 문제가 될까도 싶지만 커뮤니케이션을 잘 하지 않는 개발자들 간에
이거 하나를 문서화하는 개발자도 없고 말그대로 커뮤니케이션 하는 일도 없습니다.
있다 하더라도 나중에 개발시 사용하게 되면 그때 소스를 한번 들여다 보게 될것입니다.

아니면 새롭게 자신이 기능을 추가하겠죠.

이럴때는 분명 문제가 됩니다. ^-^ 사소한거라 생각하지 마세요..

위의 문제를 모두 해결할 수 있는 코드를 만든다면 어떻게 될까요??



이렇게 하면 무조건 인스턴스를 생성하겠네요.

instanceof 연산자는 아시겠지만.

object instanceof class 하게 되면 object 가 class 의 인스턴스인지를 boolean 값으로 반환해 줍니다.
위를 예로 든다면

if( this instanceof Foo )
Foo를 function 기능으로 접근했다면 this 는 window가 됩니다.
하지만
new Foo() 를 통해서 접근했다면 this는 Foo의 인스턴스입니다.



사실 이렇게까지 해야되는 것은 예외처리에 해당하거나 아주 자주 사용하거나 접근하게 되는 함수나 클래스에
해당합니다.


자 위에서 본 내용을 바탕으로 간단한 클래스를 만들어 보겠습니다.
Prototype.js 에 있는 Class오브젝트의 creat 메서드를 다른 방식으로 함수를 만들어 보겠습니다.



하게 되면 new Operator 을 통해서 인스턴스를 생성하나 그냥 함수처름 호출을 해서 사용하나 클래스의 인스턴스가 생성되게 됩니다.
신고
Posted by Rhio.kim
사용자 삽입 이미지
























사이트 : http://nasa.gov/

내년 나사 50주년을 기념하여 지난 밤에 NASA 5.0 으로 런칭을 했네요.
UI 부분은 모두 Script.aculo.us 와 Prototype 으로 모두 만들어 졌다고 합니다. 점점 Web2.0 방식의
사이트들이 많이 나오고 정부 웹 사이트에까지 Javascript 프레임웍이 사용되고 있네요.

날로 발전하고 Javascript에 대한 관심도도 그 만큼 성장하니 기쁩니다.

새롭게 추가된 기능을 보면

  • Transitions: Lots of animations in drop downs and trees
  • Accordion: Rollover news items
  • New topic based navigation
  • Calendar component
  • Tag cloud (now that IS Web 2.0
  • Bookmarking: My NASA and support for Digg, Del.icio.us, and more
  • Comments and polls throughout
  • Polls
  • Image gallery

신고
Posted by Rhio.kim
사용자 삽입 이미지
Javascript Ajax Date 라이브러리 입니다.

다양한 Method를 지원하네요. 왠지 Prototype 의 엘리먼트 부분하고 유사하네요.

today().next() 이런식으로 접근하는게 왠지 ^^

특이한게 Date.parse() 메서드인데요.

Date.parse('today'); 를 통해서 오늘 날짜를 구할 수 있다는거..

이런 방식으로 정규화된 string 파싱을 통해서 Date 포멧을 넘겨준다는 것

너무 Date라는 라이브러리에 입각해서 만든것 같다는 생각이

참 멋진 생각인거 같기도 하구요 반면에 이런걸 얼마나 사용할까? 라는 생각도 들었습니다.

사이트 : http://www.datejs.com/?
다운로드 : http://code.google.com/p/datejs/downloads/list


API





신고
Posted by Rhio.kim
사용자 삽입 이미지
  프로토타입 기반의 아주 가볍고 빠르고 사용하기 간편한 캘린더 입니다.

여러개의 캘린더를 충돌없이 사용할 수 있습니다.

유효한 HTML/XHTML 생성 코드를 사용하고 있어서 크로스 브라우징에도 문제가 없네요..

이미지에서도 볼 수 있듯이 아주 심플리트 그자체입니다.

저도 이런걸 추구합니다. 요즘은 더무 복잡하고 광범위한 옵션을 제공하는 프로토타입 기반의 라이브러리들이 많이 나옵니다.  왜 국내에는 없을까요??
회사일에 바쁘셔서 그런거 할 시간이 없다?? ^-^*

외국에서는 Prototype 프레임웍의 인지도가 상당히 높은데요.
최근에 나오는 대부분의 라이브러리들은 Prototype, Script,aculo.us 를 이용하고 있습니다.

몇가지 추가적인 기능으로는 스킨기능, 다국어 지원, 이벤트 계획기능도 포함합니다.
참 캘린더가 갖을 수 있는 컴팩트한 기능은 모두 지원하는 군요...

사용법은 매우 간단합니다.   라이브러리 파일을 로드하고 아래와 같이.

<div id="samplecal" class="scal"></div>
<div id="scalupdate">&nbsp;</div>

var samplecal = new scal('samplecal', 'scalupdate');


원본출처 : http://scal.fieldguidetoprogrammers.com/
다운로드 : http://scal.fieldguidetoprogrammers.com/files/scal_0.2.zip
신고
Posted by Rhio.kim
사용자 삽입 이미지
이번주 중에 진행중인 개인 프로젝트 입니다.

간단한 고전 퍼즐이구요.

0.1.00 버전에서는 순수히 뼈대와 ajax 게임자체가 동적으로 움직이다보니 메모리 혹은 CPU 점유일이 실행간 급격히 오르락 내리락 하는 경우가 많은데요.
그런 부분을 해소시키고 부드럽게 진행할 수 있고 기본적인 퍼즐의 기본 기능에 구현하는데 목적을 둡니다.

일단 기본 개발 룰은 퍼즐 게임을 위한 기본 판넬은 DIV 구조로 미리 작성된 상태에서 OOP, MVC 개념을 추가해서 Ajax 개발하도록 하겠습니다.

내부적으로 Prototype과 script.aculo.us 를 사용하고 있지만 왠만하면 사용하지 않는 방향으로 점점 나아갈 것입니다.

2.0 버젼에서는 script.aculo.us를 통해 비쥬얼한 부분을 추가와 DB 연동을 통해 rank 부분을 지원할 예정입니다.

--------------------------------------------------------------------------------------------------

전제
1. 원하는 레벨을 선택할 수 있습니다.
    [초급, 중급, 고급, 초난감]
2. 원하는 Row, Cell 개수를 입력받아 할 수 있습니다.
3. 플레이 타임을 표시합니다.
4. 숫자모드, 알파벳 모드(버젼2), 가나다모드(버젼2) 를 지원합니다.
5. 클릭을 하면 자동으로 비어있는 Cell로 이동합니다.
6. 게임시작을 누르면 랜덤으로 퍼즐이 섞입니다.
7. 모두 맞추게 되면 성공 메세지를 뿌립니다.

8. 게임번호를 선택할 수 있습니다.(차후 이스트에그 지원)
9. 화면 리프래쉬, 리로드, game reset을 누를 경우 랜던함 게임이 DOM으로 생성

기본 구현 구성

퍼즐은 테이블로 생성해 TD안에 숫자를 입력하며 해당 TD를 클릭할 경우 비어있는 TD와 교체를 합니다.

import  script.aculo.us
          prototype 1.5.1

신고
Posted by Rhio.kim
사용자 삽입 이미지
몇일전 1.6.0 정식버젼으로 릴리즈 된 Prototype.js 의 변화 중 Event 오브젝트의 사용자 이벤트부분이 있습니다.
OOP 개발을 하다보면 이벤트 밖의 처리와 이벤트 안의 처리 좀 더 자세히 말하자면

리스너와 핸들러 핸들러 Scope 안과 밖에서 일어나는 모든 일들을 처리하자면 어려운 점들이 간혹 생깁니다.
예를 들어 Scope 안의 this와 밖의 this 분명 차이가 있죠...

아 이건 사용자 이벤트와는 무관하니 넘아갑니다.


이벤트 리스너 등록(Observing events)

<img src="./test_off.gif" onmouseOver="this.src='./test_on.gif'" onmouseOut="this.src='./test_of.gif'" />

<input type="button" onclick="javascript:buttonClick(event);" id="button" value="Ok"/>
<script type="text/javascript">
    function buttonClick(event){
        alert(event);
    }
</script>

우리는 iniline 스크립트로 대부분 이런식의 이벤트를 줍니다. 하지만 web2.0방식의 oop 개발에 있어서는
그 다지 추천할만한 방법은 아니라고 보여집니다.

Prototype.js 에서 지원하는 이벤트 Observing

<div id="test"></div>
<script type="text/javascript">
    Element.observe('test', 'mouseover', bgChange);  <-- target Element id 를 통한 mouseover 리스너 설정

    $('test').observe('mouseover', bgChange);  <-- target Element 에 mouseover 리스너 설정

    function bgChange(event){
        var targetElement = Event.element(event);  <-- 1.6.0 에서는 var targetElement = event.target;
    }
</script>

이 벤트 리스너와 핸들러에 대한 구분과 실제 DOM 레벨 addEventListener, dipatchEventListener 등을 알아야합니다. 프레임웍의 편리한 점도 있지만 원천적으로 알아야할 부분을 모르고 사용한다면 코더에 불과해집니다.



사용자 이벤트(custom events)

대부분에 잘 알려진 Javascript 프레임웍에서는 이미 사용자 이벤트가 있습니다. 그리고 Prototype에 적용되기 전에 매우 긴 방법을 사용했습니다. Prototype.js 의 사용자 이벤트는 다른 프레임웍과 틀립니다.
사용자 이벤트를 사용하기 위해서 namespace에 event name을 등록해야 된다는 것인데요.

  'namespace:eventname' 이 처럼 하면 됩니다.

사용자 이벤트 부분을 담당해서 개발했던 Sam은 사용자 이벤트를 이렇게 사용해야 된다는 것에 이처럼 말했습니다.
  
  " 작지만 중요한 변화는 사용자 이벤트를 만들어졌다.[7835] : 모든 사용자 이벤트 명은 namespace에 등록되어야 합니다.  이것은 Prototype.js 만의 솔루션이고 "mousewheel" 과 "DOMMouseScroll" 처럼 비표준 네이티브 DOM 이벤트이기 때문에 사용자 이벤트 네임의 충돌문제를 해결하기 위함입니다. "

$('pandora').observe('PTV:play', function(event) {
   alert(event.memo);
  });
이 예제는 'PTV' namespace에 있는 'play' 이벤트를 실행하는 방법입니다.


Prototype Custom Event 중 한가지

Prototype 1.6.0 정식 버젼에서는  'dom:loaded' 이벤트를 가지고 있습니다.
window 오브젝트에 의해서 이 이벤트는 실행되는데요. 이 이벤트는 DOM tree 즉 document가 모두 load 되고 나면 실행되게 됩니다. document가 모두 load되었다는 것은 쉽게는 html 문서가 다운로드 됨을 의미합니다.

그안에 내포된 image 리소스까지 모두 다운로드 됨을 의미하는것은 아닙니다.

우리가 브라우저를 통해 원격지의 어떤 URL을 요청하게 되면 그 URL의 HTML 문서 즉 document 객체가 모두 다운로드 다운로드되고 DOM에 의해서 랜더링 과정을 거치면서 거기에 해당되는 js, css, img 들을 요청합니다.
이래서 HTTP Request 가 계속 발생하게 됩니다.

이런 과정이 많을 수록 웹 페이지의 포퍼먼스는 떨어지게 됩니다.
본론으로 들어가서요. document 가 onload가 되면 'dom' namespace의 loaded 사용자 이벤트가 발생하게 되어있습니다.



제가 생각할때 이 사용자 이벤트는 상당히 고급 Web App를 개발하는데 큰 도움이 됩니다.
IE에서는 fireEvent 가 내부적으로 지원을 하고 있습니다. 하지만 FF, Opera, Safari에서는 자체적 지원은 되지 않고 DOM 메서드를 통해서 어렵게(?) 구현을 해야합니다.

간지러운 부분을 Prototype에서 이번에 잘 긁어 주었네요.
신고
Posted by Rhio.kim
사용자 삽입 이미지
2.0

오래만엔 JSON.org에 방문했더니 번역되어져 있더군요.

한국 번역된 http://www.json.org/json-ko.html 입니다.

최근 ECMA 4가 발표되면서 여러가지 많은 관심거리들이 생깁니다.

JSON(Javascript Object Nation) 가 새롭게 발표 되었습니다. 기존과 다르게 Object 오브젝트에 포함되지 않은
체로 개발되었습니다. 

Object.prototype에 어떤 Method가 추가되게 되면 모든 오브젝트에 Object 오브젝트가 갖는  Method와 Property가 Extend 되게 되는데요.  좀더 기술적으로 말하자면..

Object.prototype 에 추가된 Property들은 다른 Object가 생성될때
For .. in 에 의해 그 Object의 Property를 열거하게 되면 모든게 열거된다는 점이죠..

문제되는건 아닙니다.

for(var property in object) if(object.hasOwnProperty(property ) {
  // execute code here
}
위와 같이 object가 property 를 멤버로 취하는지 여부를 확인해서 처리하면 됩니다.

하지만 JSON2 에서는 그럴 필요가 없다는 뜻이죠.. ^-^*

아 그리고 한가지 더 몇몇 유명 프레임워크에서는 Object.prototype에 어떤것을 추가하지 않기를
권고 하고 있습니다.
신고
Posted by Rhio.kim
Prototype.js 와 script.aculo.us 가 각각 릴리즈 되었습니다.
그리고 책도 나왔다네요. Prototype 1.6.0은 가장 중요한 업데이트들이 많았습니다..
이번 릴리즈는 정말 흥미롭네요.

Ajax tranport 오브젝트는 자동적으로 Ajax.Response 오브젝트로 감싸지구요.
JSON 으로 바로 접근을 지원하게 됩니다.

Class 부분에서는 상속과 슈퍼클래스의 접근을 완벽하게 지원, 그리고 addMethods 메서드가 추가되 있습니다.

Element 오브젝트는 아주 쉽게 DOM 엘리먼트 생성을 new Element(...) 로 생성할 수 있습니다.
Element#insert 는 DOM 엘리먼트를 추가하거나 HTML 조각조각을 추가할 수 있습니다.
Elelemnt#select 는 getElementsBySelector의 알리아스이고 이것은 class name으로 찾는것 보다 더 좋은 방법입니다.(이걸 사용해야겟네욤 ^-^*)
Element#warp 은 target 엘리먼트를 다른 엘리먼트 안쪽에 묶어놓을 수 있습니다.

Event 오브젝트는 자동으로 event 갖으면서 확장됩니다. 그래서 Event.stop(event) 대신에 event.stop()을 사용하면 됩니다.

Element#fire 를 통해 Prototype's event API 는 DOM기반 사용자 이벤트를 지원합니다.

다. 또한 Function, Hash, String 등 다양한 부분의 릴리즈가 이뤄졌습니다.


신고
Posted by Rhio.kim
Joe Walker 웹 어플리케이션 보안 Ajax 사용에 있어 비표준에 대해 언급하고 있다.

그는 이 슬라이드에 그의 이야기를 포스트 했고 훌륭한 몇몇 리소스를 제공되고 있다.

신고
Posted by Rhio.kim
사용자 삽입 이미지


Nick Stakenburg 는 Prototype 1.6 에 맞춰 새롭게 재 개발 했네요.
툴팁 열기, 닫기와 토글을 마우스 이벤에 언제든지 사용할 수 있고 열린 툴팁을 유지시키고 새로운 영역에 추가할 수 도 있습니다. 그리고 새로운 방식을 사용되도록 있습니다. 이번 릴리즈에서는 닫기 버튼, 딜레이 등 닫기 기능 링크를 당신이 툴팁 안에 추가할 수있게 되었습니다.
또한 CSS모델로 만들어 져서 툴팁의 스타일 변경이 쉬워졌답니다.

사용법
new Tip(
element, // the id of your element
content, // html
{
className: 'tooltip', // or your own class
closeButton: false // or true
duration: 0.3, // duration of the effect, if used
delay: 0.2 // seconds before tooltip appears
effect: false, // false, 'appear' or 'blind'
fixed: false, // follow the mouse if false
hideOn: 'mouseout' // 'click', 'mousemove', 'mouseover',
{ element: 'element|target|tip|closeButton|.close',
event: 'click|mouseover|mousemove' }
hook: false, // { element: 'topLeft|topRight|bottomLeft|bottomRight|
topMiddle|bottomMiddle|leftMiddle|rightMiddle',
tip: 'topLeft|topRight|bottomLeft|bottomRight|
topMiddle|bottomMiddle|leftMiddle|rightMiddle' }
offset: {x:16, y:16} // or your own, example: {x:30, y:200}
showOn: 'mousemove', // or 'click', 'mouseover', 'mouseout'
target: 'anotherId', // make the tooltip appear on another element
title: false, // or a string, example: 'tip title'
viewport: true // keep within viewport, false when fixed or hooked
}
);

신고
Posted by Rhio.kim

Thierry Schellenbach 는 Prototype JS의 플러그인(plugin)을 통해서 크로스 사이트(cross site remoting) ajax 통신을 가능하게 하고 있다고 소개했습니다. 유저들은 또한 Prototype.js 의  Ajax.Request 의 crossStie 의 True 값으로 셋팅하여 간단하게 사용할 수 있게 됩니다.

원천적 기술은 Javascript 동적 로딩입니다.


JAVASCRIPT:
  1.  
  2. new Ajax.Request('myurl', {
  3.   method: 'GET',
  4.   crossSite: true,
  5.   parameters: Form.serialize(obj),
  6.   onLoading: function() {
  7.     //things to do at the start
  8.   },
  9.   onSuccess: function(transport) {
  10.     //things to do when everything goes well
  11.   },
  12.   onFailure: function(transport) {
  13.     //things to do when we encounter a failure
  14.   }
  15. });
  16.  
신고
Posted by Rhio.kim


티스토리 툴바