Time

POJO

2009-06-24T10:30:31Z

- 출처 : http://blog.naver.com/thtlsgkrtod/40055742326 -

POJO (Plain Old java Object) 를 해석하면 평범 자바 오브젝트라고 한다.
POJO를 이해 하기 전 POJO라는 단어가 만들어진 역사적 배경을 살펴볼 필요가 잇다. POJO 는 마틴 파울러가 2000년 가을에 열렸던 어느 컨퍼런스의 발표를 준비하면서 처음 만들어낸 말이다. 마틴 파울러는 EJB(Enterprise JavaBean)보다는 단순한 자바 오브젝트에 도메인 로직을 넣어 사용하는 것이 여러가지 장점이 있는데도 왜 사람들이 그 EJB가 아닌 '평범한자바 오브젝트'를 사용하기를 꺼려 하는지에 대해 의문을 가졌다. 그리고 그는 단순한 오브젝트에는 EJB와 같은 그럴듯한 이름이 없어어서 그 사용을 주저하는 것이라고 결론 내렸다.
그래서 만든 단어가 POJO라는 용어인 것이다. POJO기반의 기술을 사용한다고 말하면 왠지 첨단 기술을 사용하는 앞선 개발자인 듯한 인상을 주기 때문인다.

POJO기반의 프로그래밍 기술이 EJB의 강력한 대안으로 등장했고 ,POJO 기반 프레임워크 ,POJO 애플리케이션을 위한 플랫폼 등이 점점 인기를 끌게 되었고, 결국 POJO가 배제하려고 했던 EJB는 POJO기반의 기술에 밀려 이제 레거시 기술로 사라질 위기에 처했다. 그렇다면 단지 EJB를 사용하지 않으면 모두 POJO라고 할 수 있을까? 그렇지 않다. POJO프로그래밍이라는 개념은 단지 "EJB가 아닌 자바"이상의 특징을 가지고 있는 프로그래밍 모델이다. POJO기반의 개발은 생각보다 단순하지 않다.
POJO를 좀더 이해하려면 EJB의 장단점을 함께 이해해야 한다. 그것은 POJO 프로그래밍이 다시 EJB시대이전으로 돌아 가자는 것이 아니고 ,EJB를 넘어 그보다 더 앞으로 나아가자는 것이기 때문이다.
EJB를 사용하지 말고 POJO를 쓰자는 것은 EJB이전의 방식으로 돌아 가는 것을 의미한다면 또 다른 문제가 발생 할 수 밖에 없다. 여전히 복잡한 로우레벨의 API를 이용해 코드를 작성해야 하고, 많은 기술적인 문제를 애플리케이션 코드에 그대로 노출시켜 개발해야 한다면 기껏 POJO로의 복귀 덕분에 얻는 많은 장점들을 놓칠 수 밖에 없다.

그래서 등장한 것이 POJO 기반의 프레임워크이다. POJO프레임워크는 POJO를 이용한 애플리케이션 개발이 가진 특징과 장점을 그대로 살리면서 EJB에서 제공하는 엔터프라이즈 서비스와 기술을 그대로 사용할 수 있도록 도와주느 프레임워크이다. 나아가 이는 기존의 EJB에서보다 훨씬 더 세련되고 나은 방법이다. 데표적인 프레임웤 스프링 하이버네이트~!

참고로 스프링은 엔터프라이즈 서비스들을 POJO기반으로 만든 비지니스 오브젝트에서 사용할 수 있게 한다. 대표적인 선언적인 트랜잭션 서비스와 보안이다. 또한 EJB와 마찬가지로 오브젝트 컨테이너를 제공해서 인스턴스의 라이프사이클을 과리하고 필요에 따라 스레딩, 풀링 및 서비스 인젝션 등의 기능을 제공한다. 또한 OOP를 더 OOP답게 사용 할 수있게 하는 AOP기술을 적용해서 POJO개발을 더 쉽게 만든다.

POJO프로그램의 진정한 가치는 자바의 객체지향적인 특징을 살려 비지니스 로직에 충실한 개발이 가능 하도록 하는것이기도 하다.

내생각(원문 필자)을 적자면
평범한 자바 객체로 프로그래밍 하기라고 부르며, 침략적인 코드를 적지 않은 것이다.

쉽게 말해 implement 와 extends를 사용 하지 않으며
콤포지션과 인터페이스타입으로 프로그래밍 하는것(이건 레디 존슨)
특정 클래스의 concrete class가 되면 안되고, 구현 체도 되면 안된다.

웹 어플리케이션 보안 인가

2009-06-23T14:55:30Z

★세 가지 유형의 해커들을 경계할 필요가 있다.
Impersonator(임퍼스네이터): 마치 다른 사람인양 속이는 놈. (e.g. 다른 사람 아디로 뭐 산다.)
Upgrader: 자신의 등급을 속이는 놈. (e.g. 일반 사용자가 프리미엄 사용자인 것처럼 속인다.)
Eavesdropper(이즈드롭퍼): 중요한 정보를 몰래 훔쳐보는 놈. (e.g. 남의 주민등록번호를 알아낸다.)

★서블릿 보안의 4요소
쟤네들의 침략을 막기 위해서는 서블릿 보안밖에 방법이 없다.
서블릿 보안을 4가지 개념으로 압축해서 다룰 수 있다.
(1) Authentication(인증): by whom // e.g. 요청한 사용자의 아이디가 pgwpgw인지 체크
(2) Authorization(인가): what can be done // e.g. 요청한 사용자가 프리미엄 회원인지 체크
(3) Confidentiality(비밀 보장) // e.g. 데이터를 암호화해서 전송함. (cf. HTTPS)
(4) Data Integrity(데이터 무결성)

★HTTP 환경에서 transaction 보안 기초 과정
1. 브라우저가 자원을 요청.
2. 컨테이너가 그 자원에 제약 조건이 걸려있다는 것을 확인. HTTP 401 (unauthorized)응답을 보냄.
3. 브라우저는 401코드를 보고 보안 영역 정보에 기초하여 사용자에게 이름/패스워드를 물어봄.
4. 사용자가 후다닥 입력하고 엔터.
5. 브라우저가 자원을 요청. (이름/패스워드를 포함해서 요청을 보냄)
6. 이름/패스워드가 valid하다면 사용자가 이 자원을 접근할 수 있는지 확인한다.
※ 2번에서 제약 조건 확인을 위하여 "보안 테이블"이 존재한다. 자원URL과 제약 조건 여부가 적혀있는 듯.
※ 6번에서 인증과 인가를 모두 실시한다.

★Transaction 보안 기초 과정에서 컨테이너가 내부적으로 하는 일
(1) 요청 자원에 대한 lookup 작업을 한다.
- 요청한 사람이 볼 수 있는 자원인지
- 자원에 보안 제약이 걸려있는지
- 서블릿 자체에 보안 플래그가 달려있는지 등...
(2) 인증 작업을 한다.
- 당신이 Bob인지 체크.
(3) 인가 작업을 한다.
- Bob이 특정 서블릿에 접근할 수 있는지 체크.

★보안 관련 제약 사항은 배포 서술자에 선언적으로 관리한다.
난 기존의 애플리케이션들을 프로그램적으로 보안을 설정하였는데
95%가 선언적으로 한다고 한다 -_-;;
그 이유는...

1. CBD가 가능.
2. 비싼 돈 주고 산 컨테이너 잘 활용.
3. 애플리케이션이 많아지고 복잡해져도 유지보수가 쉬움.
4. 재미있다.
5. 보안 관련 소스 코드 없이도 서블릿 재사용 가능.
6. 시험에 나옴.
7. 서블릿을 좀 더 유연하게 작성 가능.
8. 이력서에 이런 일을 했다고 적음 ㅋㅋ
9. 기업 IT부서에 실제로 이 일을 하는 사람이 있음.
10. XML을 어떻게 작성하는지 모르는 사람이 거의 없음.

★웹 애플리케이션 보안 관련 업무 분담
- 서블릿 개발자: 서블릿마다 보안 정책을 다르게 적용하기 위해서 기능마다 적절한 모듈화를 시켜야 한다.
- 애플리케이션 관리자: 애플리케이션에 어떤 사용자 역할(e.g. 손님, 회원)이 있어야 하는지 결정하고 컨테이너
사용자 파일에 등록된 사용자를 사용자 역할에 매핑시킨다.
- 배포자: 서블릿 개발자와 애플리케이션 관리자가 알려준 정보를 바탕으로 역할과 서블릿을 매핑한다. 예를 들어
손님은 foo.Buy 서블릿에 접근할 수 없다고 매핑...
※ 일반적인 경우 원맨쇼를 해야되지만, 단계별로 알아놓는 것이 좋다.
※ 보안 개념상으로만 봤을 때 인가가 가장 중요하며 복잡하다.

★인증부터 해보자.
사실 보통 회사에서 관리하는 인증 데이터들은 DBMS 또는 LDAP에 저장되어 있고,
대부분 컨테이너는 이를 지원하기 위한 방법도 따로 제공한다.
일단 우리는 {Tomcat}/conf/tomcat-users.xml 에 다음과 같은 방식으로 사용자와 그의 역할을 선언해볼 것이다.

이제 이 인증을 활성화시키려면 DD 상에 다음과 같이 설정해야 한다.

※ 위에 잘못됨. role-name can be (0 .. *) 이다. 하나도 없으면 어떠한 사용자도 접근할 수 없다는 의미.

위의 상태에서 http://loaclhost/Wow/Beer.do로 접속하니까 다음과 같은 창이 뜬다.

admin으로 접속하면 서블릿이 제대로 동작하여 리스폰스를 받아볼 수 있고,
youare로 접속하면 서비스가 denied된다.

★DD파일 관련 사족
- 은 반드시 있어야 하는 항목이다. (그냥 컨테이너 내부적으로 사용한다.)
- 에 들어가는 값은 서블릿 표준 명명 규칙 및 매핑 규칙을 따른다.
- 를 등록하지 않으면 모든 메소드에 다 제약을 건다는 것으로 간주된다.
- 로 메소드를 등록한다는 의미는 해당 메소드에 제약을 건다는 의미이기도 하지만, 반대로 이를 제외한 나머지 HTTP 메소드는 모두 자동적으로 허용한다는 걸 의미한다.
- 안에 하나 이상의 을 포함할 수 있다.
- 는 안에 있는 모든 에 적용된다.
- 안에 있는 은 optional이다. 하나도 없으면 어떠한 사용자도 접근 못한다는 의미다.
- *은 모든 사용자가 다 접근할 수 있다는 말임.
- 는 옵션 항목이다. 항목이 있다는 말은, 관련 URL에 대하여 인증을 실시하라고 컨테이너에게 지시하는 것이다. 항목이 없다면, 인증 없이도 접근할 수 있다는 말이다.
- 유지보수를 위하여 안에 을 작성할 것을 추천한다.
- 를 empty tag, 즉 로 기술한다면, 어떤 사용자도 접근 못함.

★ 항목이 여러 개 있는데 겹칠 경우는 어케되나요?
어떤 서블릿 또는 서블릿 집합에 대해서 두 개 이상의 로 제약을 걸면 어떻게 될까?
다음의 룰을 따른다.
1. 역할 이름이 각각 등록되어 있다면, 등록된 모든 역할이 접근 가능.
2. 역할 이름에 *이 들어 있는 것과 다른 것이 같이 있다면, 모든 사용자가 접근 가능.
3. 와 다른 것이 같이 있다면 누구도 접근할 수 없다.
4. 에 정의된 가 없는 경우 다른 것이 같이 있다면 누구나 다 접근 가능.

★아놔 는 왜 있는건데?
request dispatcher로 포워딩은 할테지만
직접 접근은 막는 것들이 존재하니까...

★ 톰캣 메모리 상주 영역(Realm)을 사용한다면 위와 같이 해야 한다. 하지만 실제로 DB나 LDAP와 연동하는 제품을 사용하기 때문에 굳이 이렇게 할 필요는 "전혀" 없다. 실용성이 없다 이말. 그냥 이런 것도 있다고 알아두자.

tag : 보안, 웹 어플리케이션

공유기 내에서 원격데스크톱 사용해보자.

2009-06-20T09:28:32Z

tag : 원격데스크톱 공유기

원격데스트톱 안될때 nvidia 그래픽카드 문제 해결 방법.

2009-06-20T09:17:32Z

Windows 2003 을 사용중인데 얼마전부터 원격 데스크톱으로 접속을 하면 접속이 되지 않았습니다. 관련 글들을 검색해보니 NVidia 그래픽 드라이버 문제라서 옛날 드라이버를 설치하면 문제가 발생하지 않는다는 내용이 있어서 적용해보았으나 저의 경우에는 해당 사항이 없었습니다.

그러던 중 이벤트 뷰어를 확인해보고자 이벤트 뷰어를 열었더니 관련 오류 내용이 검색되었습니다.

응용 프로그램 팝업 : : \SystemRoot\System32\RDPDD.dll failed to load

관련 내용을 검색하다 보니 레지스터리를 수정함으로서 해결할 수 있다는 내용을 찾았습니다. 이분은 NVidia 포럼에서 찾았다고 하네요.

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Memory Management] 를 찾아서 SessionImageSize=dword:00000020 내용을 추가합니다. 16진수로 32을 입력한 내용이구여 레지스터리 변경후 시스템을 재부팅하고 나니 정상적으로 접속이 되었습니다.

원격데스크탑 안될때

2009-06-18T21:38:58Z

원격연결

집에 있는 컴퓨터에 원격 연결이 안된다

아무런 에러메시지도 없이 뜅겨 나오는 현상이 있다.

구글링을 해본 결과 nvidia 그래픽 카드를 사용하는 일부 유저에서 그런 현상이 있다고 블로그에 게시물이 있었다.

내가 당시 쓰고 있던 그래픽 카드 드라이버는 GeForce 7300GT version 5.73.22.46.00 (175.19 forceware) 였다.

SP3에서 원격데스크톱 연결이 안될 때

최신 드라이버를 설치하니 원격 연결이 잘 되는 것을 확인 할 수 있었다.

원격연결을 하기 위해서는

[제어판-시스템]에서 원격 데스크톱에서 아래 그림처럼 체크가 되어 있어야 한다.

또한 방화벽도 해제가 되어야 한다.

http://www.parkoz.com/zboard/view.php?id=my_tips&no=10367

터미널 서버 패치

파일:

XP 서비스팩 2 & 3 (Termiserv_XPSP2-SP3_i386_2.1.exe ) - 서비스팩 3

XP 서비스팩2만 (Termiserv_XPSP2_i386_1.0.exe )

(출처 : http://www.kood.org/terminal-server-patch/)

XP의 로그 아웃 되는 문제 : http://unfusion.kunsan.ac.kr/word/archive/296 (XP에 여러사용자의 접속을 허용하는 패치)

FAST USER SWITCHING (빠른 사용자 전환 기능 사용)

참고 : 빠른 사용자 전환을 설정하려면 시작 화면 사용 옵션도 설정해야 합니다. 해당 컴퓨터가 도메인의 멤버이면 이 기능을 사용할 수 없습니다. 빠른 사용자 전환을 설정하려면 다음과 같이 하십시오.

1.	해당 컴퓨터에 관리자로 로그온합니다.
2.	시작을 누르고, 제어판을 누른 다음 사용자 계정을 누릅니다.
3.	사용자 로그온 또는 로그오프 방법 변경을 누릅니다.
4.	시작 화면 사용 확인란이 선택되어 있지 않으면 이를 선택합니다. 참고: 시작 화면 사용 확인란을 선택해야 빠른 사용자 전환 사용 확인란을 선택할 수 있습니다.
5.	빠른 사용자 전환 사용 확인란을 선택한 다음 확인을 누릅니다. 사용자 계정 도구를 종료합니다.

몇 명까지 나의 노트북에 접속이 되는지 테스트를 해보았다.(사람들에게 부탁해서... '제발 접속해 주삼~' "뭐하려고?", '그냥 좀 테스트로..')

결론은 나 포함 7명까지.. 8명에서 접속이 튕긴다.

그래도 윈도우 2003 서버의 원격 데스크탑 기본이 3명인데 그것보다 높네..

하지만!!!

버그가 존재하는 듯...

노트북이 느려지는 것은 둘째치고 글씨들이 제대로 안나온다.

이게 뭥미!! 그래도 이건 좀 나은 캡쳐...

아이콘들의 모임이 되어 버렸다.

누군지 확인은 오른쪽 마우스를 눌러야만...

그리고 빠른 사용자 전환을 할 때 에러메시지가 나오는 현상이 있었다.

원격연결 단축키

작업관리자 : ctrl+alt+del => ctl+alt+end

전체화면 모드로 전환 : Ctrl+Alt+Pause

Javascript Closures

2009-06-06T03:50:28Z

출처: http://jibbering.com/faq/faq_notes/closures.html

Javascript Closures

Introduction

Closure
A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).

Closures are one of the most powerful features of ECMAScript (javascript) but they cannot be property exploited without understanding them. They are, however, relatively easy to create, even accidentally, and their creation has potentially harmful consequences, particularly in some relatively common web browser environments. To avoid accidentally encountering the drawbacks and to take advantage of the benefits they offer it is necessary to understand their mechanism. This depends heavily on the role of scope chains in identifier resolution and so on the resolution of property names on objects.

The simple explanation of a Closure is that ECMAScript allows inner functions; function definitions and function expressions that are inside the function bodes of other functions. And that those inner functions are allowed access to all of the local variables, parameters and declared inner functions within their outer function(s). A closure is formed when one of those inner functions is made accessible outside of the function in which it was contained, so that it may be executed after the outer function has returned. At which point it still has access to the local variables, parameters and inner function declarations of its outer function. Those local variables, parameter and function declarations (initially) have the values that they had when the outer function returned and may be interacted with by the inner function.

Unfortunately, properly understanding closures requires an understanding of the mechanism behind them, and quite a bit of technical detail. While some of the ECMA 262 specified algorithms have been brushed over in the early part of the following explanation, much cannot be omitted or easily simplified. Individuals familiar with object property name resolution may skip that section but only people already familiar with closures can afford to skip the following sections, and they can stop reading now and get back to exploiting them.

The Resolution of Property Names on Objects

ECMAScript recognises two categories of object, "Native Object" and "Host Object" with a sub-category of native objects called "Built-in Object" (ECMA 262 3rd Ed Section 4.3). Native objects belong to the language and host objects are provided by the environment, and may be, for example, document objects, DOM nodes and the like.

Native objects are loose and dynamic bags of named properties (some implementations are not that dynamic when it comes to the built in object sub-category, though usually that doesn't matter). The defined named properties of an object will hold a value, which may be a reference to another Object (functions are also Objects in this sense) or a primitive value: String, Number, Boolean, Null or Undefined. The Undefined primitive type is a bit odd in that it is possible to assign a value of Undefined to a property of an object but doing so does not remove that property from the object; it remains a defined named property, it just holds the value undefined.

The following is a simplified description of how property values are read and set on objects with the internal details brushed over to the greatest extent possible.

Assignment of Values

Named properties of objects can be created, or values set on existing named properties, by assigning a value to that named property. So given:-

var objectRef = new Object(); //create a generic javascript object.

A property with the name "testNumber" can be created as:-

objectRef.testNumber = 5;
/* - or:- */
objectRef["testNumber"] = 5;

The object had no "testNumber" property prior to the assignment but one is created when the assignment is made. Any subsequent assignment does not need to create the property, it just re-sets its value:-

objectRef.testNumber = 8;
/* - or:- */
objectRef["testNumber"] = 8;

Javascript objects have prototypes that can themselves be objects, as will be described shortly, and that prototype may have named properties. But this has no role in assignment. If a value is assigned and the actual object does not have a property with the corresponding name a property of that name is created and the value is assigned to it. If it has the property then its value is re-set.

Reading of Values

It is in reading values from object properties that prototypes come into play. If an object has a property with the property name used in the property accessor then the value of that property is returned:-

/* Assign a value to a named property. If the object does not have a
   property with the corresponding name prior to the assignment it
   will have one after it:-
*/
objectRef.testNumber = 8;

/* Read the value back from the property:- */

var val = objectRef.testNumber;
/* and  - val - now holds the value 8 that was just assigned to the
   named property of the object. */

But all objects may have prototypes, and prototypes are objects so they, in turn, may have prototypes, which may have prototypes, and so on forming what is called the prototype chain. The prototype chain ends when one of the objects in the chain has a null prototype. The default prototype for the Object constructor has a null prototype so:-

var objectRef = new Object(); //create a generic javascript object.

Creates an object with the prototype Object.prototype that itself has a null prototype. So the prototype chain for objectRef contains only one object: Object.prototype. However:-

/* A "constructor" function for creating objects of a -
   MyObject1 - type.
*/
function MyObject1(formalParameter){
    /* Give the constructed object a property called - testNumber - and
       assign it the value passed to the constructor as its first
       argument:-
    */
    this.testNumber = formalParameter;
}

/* A "constructor" function for creating objects of a -
   MyObject2 - type:-
*/
function MyObject2(formalParameter){
   /* Give the constructed object a property called - testString -
      and assign it the value passed to the constructor as its first
      argument:-
    */
    this.testString = formalParameter;
}

/* The next operation replaces the default prototype associated with
   all MyObject2 instances with an instance of MyObject1, passing the
   argument - 8 - to the MyObject1 constructor so that its -
   testNumber - property will be set to that value:-
*/
MyObject2.prototype = new MyObject1( 8 );

/* Finally, create an instance of - MyObject2 - and assign a reference
   to that object to the variable - objectRef - passing a string as the
   first argument for the constructor:-
*/

var objectRef = new MyObject2( "String_Value" );

The instance of MyObject2 referred to by the objectRef variable has a prototype chain. The first object in that chain is the instance of MyObject1 that was created and assigned to the prototype property of the MyObject2 constructor. The instance of MyObject1 has a prototype, the default Object prototype that corresponds with the object referred to by Object.prototype. Object.prototype has a null prototype so the prototype chain comes to an end at this point.

When a property accessor attempts to read a named property form the object referred to by the variable objectRef the whole prototype chain can enter into the process. In the simple case:-

var val = objectRef.testString;

- the instance of MyObject2 referred to by objectRef has a property with the name "testString" so it is the value of that property, set to "String_Value", that is assigned to the variable val. However:-

var val = objectRef.testNumber;

- cannot read a named property form the instance of MyObject2 itself as it has no such property but the variable val is set to the value of 8 rather than undefined because having failed to find a corresponding named property on the object itself the interpreter then examines the object that is its prototype. Its prototype is the instance of MyObject1 and it was created with a property named "testNumber" with the value 8 assigned to that property, so the property accessor evaluates as the value 8. Neither MyObject1 or MyObject2 have defined a toString method, but if a property accessor attempts to read the value of a toString property from objectRef:-

var val = objectRef.toString;

- the val variable is assigned a reference to a function. That function is the toString property of Object.prototype and is returned because the process of examining the prototype of objectRef, when objectRef turns out not to have a "toString" property, is acting on an object, so when that prototype is found to lack the property its prototype is examined in turn. Its prototype is Object.prototype, which does have a toString method so it is a reference to that function object that is returned.

Finally:-

var val = objectRef.madeUpProperty;

- returns undefined, because as the process of working up the prototype chain finds no properties on any of the object with the name "madeUpPeoperty" it eventually gets to the prototype of Object.prototype, which is null, and the process ends returning undefined.

The reading of named properties returns the first value found, on the object or then from its prototype chain. The assigning of a value to a named property on an object will create a property on the object itself if no corresponding property already exists.

This means that if a value was assigned as objectRef.testNumber = 3 a "testNumber" property will be created on the instance of MyObject2 itself, and any subsequent attempts to read that value will retrieve that value as set on the object. The prototype chain no longer needs to be examined to resolve the property accessor, but the instance of MyObject1 with the value of 8 assigned to its "testNumber" property is unaltered. The assignment to the objectRef object masks the corresponding property in its prototype chain.

Note: ECMAScript defines an internal [[prototype]] property of the internal Object type. This property is not directly accessible with scripts, but it is the chain of objects referred to with the internal [[prototype]] property that is used in property accessor resolution; the object's prototype chain. A public prototype property exists to allow the assignment, definition and manipulation of prototypes in association with the internal [[prototype]] property. The details of the relationship between to two are described in ECMA 262 (3rd edition) and are beyond the scope of this discussion.

Identifier Resolution, Execution Contexts and Scope Chains

The Execution Context

An execution context is an abstract concept used by the ECMSScript specification (ECMA 262 3rd edition) to define the behaviour required of ECMAScript implementations. The specification does not say anything about how execution contexts should be implemented but execution contexts have associated attributes that refer to specification defined structures so they might be conceived (and even implemented) as objects with properties, though not public properties.

All javascript code is executed in an execution context. Global code (code executed inline, normally as a JS file, or HTML page, loads) gets executed in what I will be calling a global execution context, and each invocation of a function (possibly as a constructor) has an associated execution context. Code executed with the eval function also gets a distinct execution context but as eval is never normally used by javascript programmers it will not be discussed here. The specified details of execution contexts are to be found in section 10.2 of ECMA 262 (3rd edition).

When a javascript function is called it enters an execution context, if another function is called (or the same function recursively) a new execution context is created and execution enters that context for the duration of the function call. Returning to the original execution context when that called function returns. Thus running javascript code forms a stack of execution contexts.

When an execution context is created a number of things happen in a defined order. First, in the execution context of a function, an "Activation" object is created. The activation object is another specification mechanism. It can be considered as an object because it ends up having accessible named properties, but it is not a normal object as it has no prototype (at least not a defined prototype) and it cannot be directly referenced by javascript code.

The next step in the creation of the execution context for a function call is the creation of an arguments object, which is an array-like object with integer indexed members corresponding with the arguments passed to the function call, in order. It also has length and callee properties (which are not relevant to this discussion, see the spec for details). A property of the Activation object is created with the name "arguments" and a reference to the arguments object is assigned to that property.

Next the execution context is assigned a scope. A scope consists of a list (or chain) of objects. Each function object has an internal [[scope]] property (which we will go into more detail about shortly) that also consists of a list (or chain) of objects. The scope that is assigned to the execution context of a function call consists of the list referred to by the [[scope]] property of the corresponding function object with the Activation object added at the front of the chain (or the top of the list).

Then the process of "variable instantiation" takes place using an object that ECMA 262 refers to as the "Variable" object. However, the Activation object is used as the Variable object (note this, it is important: they are the same object). Named properties of the Variable object are created for each of the function's formal parameters, and if arguments to the function call correspond with those parameters the values of those arguments are assigned to the properties (otherwise the assigned value is undefined). Inner function definitions are used to create function objects which are assigned to properties of the Variable object with names that correspond to the function name used in the function declaration. The last stage of variable instantiation is to create named properties of the Variable object that correspond with all the local variables declared within the function.

The properties created on the Variable object that correspond with declared local variables are initially assigned undefined values during variable instantiation, the actual initialisation of local variables does not happen until the evaluation of the corresponding assignment expressions during the execution of the function body code.

It is the fact that the Activation object, with its arguments property, and the Variable object, with named properties corresponding with function local variables, are the same object, that allows the identifier arguments to be treated as if it was a function local variable.

Finally a value is assigned for use with the this keyword. If the value assigned refers to an object then property accessors prefixed with the this keyword reference properties of that object. If the value assigned (internally) is null then the this keyword will refer to the global object.

The global execution context gets some slightly different handling as it does not have arguments so it does not need a defined Activation object to refer to them. The global execution context does need a scope and its scope chain consists of exactly one object, the global object. The global execution context does go through variable instantiation, its inner functions are the normal top level function declarations that make up the bulk of javascript code. The global object is used as the Variable object, which is why globally declared functions become properties of the global object. As do globally declared variables.

The global execution context also uses a reference to the global object for the this object.

Scope chains and [[scope]]

The scope chain of the execution context for a function call is constructed by adding the execution context's Activation/Variable object to the front of the scope chain held in the function object's [[scope]] property, so it is important to understand how the internal [[scope]] property is defined.

In ECMAScript functions are objects, they are created during variable instantiation from function declarations, during the evaluation of function expressions or by invoking the Function constructor.

Function objects created with the Function constructor always have a [[scope]] property referring to a scope chain that only contains the global object.

Function objects created with function declarations or function expressions have the scope chain of the execution context in which they are created assigned to their internal [[scope]] property.

In the simplest case of a global function declaration such as:-

function exampleFunction(formalParameter){
    ...   // function body code
}

- the corresponding function object is created during the variable instantiation for the global execution context. The global execution context has a scope chain consisting of only the global object. Thus the function object that is created and referred to by the property of the global object with the name "exampleFunction" is assigned an internal [[scope]] property referring to a scope chain containing only the global object.

A similar scope chain is assigned when a function expression is executed in the global context:-

var exampleFuncRef = function(){
    ...   // function body code
}

- except in this case a named property of the global object is created during variable instantiation for the global execution context but the function object is not created, and a reference to it assigned to the named property of the global object, until the assignment expression is evaluated. But the creation of the function object still happens in the global execution context so the [[scope]] property of the created function object still only contains the global object in the assigned scope chain.

Inner function declarations and expressions result in function objects being created within the execution context of a function so they get more elaborate scope chains. Consider the following code, which defines a function with an inner function declaration and then executes the outer function:-

function exampleOuterFunction(formalParameter){
    function exampleInnerFuncitonDec(){
        ... // inner function body
    }
    ...  // the rest of the outer function body.
}

exampleOuterFunction( 5 );

The function object corresponding with the outer function declaration is created during variable instantiation in the global execution context so its [[scope]] property contains the one item scope chain with only the global object in it.

When the global code executes the call to the exampleOuterFunction a new execution context is created for that function call and an Activation/Variable object along with it. The scope of that new execution context becomes the chain consisting of the new Activation object followed by the chain refereed to by the outer function object's [[scope]] property (just the global object). Variable instantiation for that new execution context results in the creation of a function object that corresponds with the inner function definition and the [[scope]] property of that function object is assigned the value of the scope from the execution context in which it was created. A scope chain that contains the Activation object followed by the global object.

So far this is all automatic and controlled by the structure and execution of the source code. The scope chain of the execution context defines the [[scope]] properties of the function objects created and the [[scope]] properties of the function objects define the scope for their execution contexts (along with the corresponding Activation object). But ECMAScript provides the with statement as a means of modifying the scope chain.

The with statement evaluates an expression and if that expression is an object it is added to the scope chain of the current execution context (in front of the Activation/Variable object). The with statement then executes another statement (that may itself be a block statement) and then restores the execution context's scope chain to what it was before.

A function declaration could not be affected by a with statement as they result in the creation of function objects during variable instantiation, but a function expression can be evaluated inside a with statement:-

/* create a global variable - y - that refers to an object:- */
var y = {x:5}; // object literal with an - x - property
function exampleFuncWith(){
    var z;
    /* Add the object referred to by the global variable - y - to the
       front of he scope chain:-
    */
    with(y){
        /* evaluate a function expression to create a function object
           and assign a reference to that function object to the local
           variable - z - :-
        */
        z = function(){
            ... // inner function expression body;
        }
    }
    ... 
}

/* execute the - exampleFuncWith - function:- */
exampleFuncWith();

When the exampleFuncWith function is called the resulting execution context has a scope chain consisting of its Activation object followed by the global object. The execution of the with statement adds the object referred to by the global variable y to the front of that scope chain during the evaluation of the function expression. The function object created by the evaluation of the function expression is assigned a [[scope]] property that corresponds with the scope of the execution context in which it is created. A scope chain consisting of object y followed by the Activation object from the execution context of the outer function call, followed by the global object.

When the block statement associated with the with statement terminates the scope of the execution context is restored (the y object is removed), but the function object has been created at that point and its [[scope]] property assigned a reference to a scope chain with the y object at its head.

Identifier Resolution

Identifiers are resolved against the scope chain. ECMA 262 categorises this as a keyword rather than an identifier, which is not unreasonable as it is always resolved dependent on the this value in the execution context in which it is used, without reference to the scope chain.

Identifier resolution starts with the first object in the scope chain. It is checked to see if it has a property with a name that corresponds with the identifier. Because the scope chain is a chain of objects this checking encompasses the prototype chain of that object (if it has one). If no corresponding value can be found on the first object in the scope chain the search progresses to the next object. And so on until one of the objects in the chain (or one of its prototypes) has a property with a name that corresponds with the identifier or the scope chain is exhausted.

The operation on the identifier happens in the same way as the use of property accessors on objects described above. The object identified in the scope chain as having the corresponding property takes the place of the object in the property accessor and the identifier acts as a property name for that object. The global object is always at the end of the scope chain.

As execution contexts associated with function calls will have the Activation/Variable object at the front of the chain, identifiers used in function bodies are effectively first checked to see whether they correspond with formal parameters, inner function declaration names or local variables. Those would be resolved as named properties of the Activation/Variable object.

Closures

Automatic Garbage Collection

ECMAScript uses automatic garbage collection. The specification does not define the details, leaving that to the implementers to sort out, and some implementations are known to give a very low priority to their garbage collection operations. But the general idea is that if an object becomes un-referable (by having no remaining references to it left accessible to executing code) it becomes available for garbage collection and will at some future point be destroyed and any resources it is consuming freed and returned to the system for re-use.

This would normally be the case upon exiting an execution context. The scope chain structure, the Activation/Variable object and any objects created within the execution context, including function objects, would no longer be accessible and so would become available for garbage collection.

Forming Closures

A closure is formed by returning a function object that was created within an execution context of a function call from that function call and assigning a reference to that inner function to a property of another object. Or by directly assigning a reference to such a function object to, for example, a global variable, a property of a globally accessible object or an object passed by reference as an argument to the outer function call. e.g:-

function exampleClosureForm(arg1, arg2){
    var localVar = 8;
    function exampleReturned(innerArg){
        return ((arg1 + arg2)/(innerArg + localVar));
    }
    /* return a reference to the inner function defined as -
       exampleReturned -:-
    */
    return exampleReturned;
}

var globalVar = exampleClosureForm(2, 4);

Now the function object created within the execution context of the call to exampleClosureForm cannot be garbage collected because it is referred to by a global variable and is still accessible, it can even be executed with globalVar(n).

But something a little more complicated has happened because the function object now referred to by globalVar was created with a [[scope]] property referring to a scope chain containing the Activation/Variable object belonging to the execution context in which it was created (and the global object). Now the Activation/Variable object cannot be garbage collected either as the execution of the function object referred to by globalVar will need to add the whole scope chain from its [[scope]] property to the scope of the execution context created for each call to it.

A closure is formed. The inner function object has the free variables and the Activation/Variable object on the function's scope chain is the environment that binds them.

The Activation/Variable object is trapped by being referred to in the scope chain assigned to the internal [[scope]] property of the function object now referred to by the globalVar variable. The Activation/Variable object is preserved along with its state; the values of its properties. Scope resolution in the execution context of calls to the inner function will resolve identifiers that correspond with named properties of that Activation/Variable object as properties of that object. The value of those properties can still be read and set even though the execution context for which it was created has exited.

In the example above that Activation/Variable object has a state that represents the values of formal parameters, inner function definitions and local variables, at the time when the outer function returned (exited its execution context). The arg1 property has the value 2,the arg2 property the value 4, localVar the value 8 and an exampleReturned property that is a reference to the inner function object that was returned form the outer function. (We will be referring to this Activation/Variable object as "ActOuter1" in later discussion, for convenience.)

If the exampleClosureForm function was called again as:-

var secondGlobalVar = exampleClosureForm(12, 3);

- a new execution context would be created, along with a new Activation object. And a new function object would be returned, with its own distinct [[scope]] property referring to a scope chain containing the Activation object form this second execution context, with arg1 being 12 and arg2 being 3. (We will be referring to this Activation/Variable object as "ActOuter2" in later discussion, for convenience.)

A second and distinct closure has been formed by the second execution of exampleClosureForm.

The two function objects created by the execution of exampleClosureForm to which references have been assigned to the global variable globalVar and secondGlobalVar respectively, return the expression ((arg1 + arg2)/(innerArg + localVar)). Which applies various operators to four identifiers. How these identifiers are resolved is critical to the use and value of closures.

Consider the execution of the function object referred to by globalVar, as globalVar(2). A new execution context is created and an Activation object (we will call it "ActInner1"), which is added to the head of the scope chain referred to the [[scope]] property of the executed function object. ActInner1 is given a property named innerArg, after its formal parameter and the argument value 2 assigned to it. The scope chain for this new execution context is: ActInner1-> ActOuter1-> global object.

Identifier resolution is done against the scope chain so in order to return the value of the expression ((arg1 + arg2)/(innerArg + localVar)) the values of the identifiers will be determined by looking for properties, with names corresponding with the identifiers, on each object in the scope chain in turn.

The first object in the chain is ActInner1 and it has a property named innerArg with the value 2. All of the other 3 identifiers correspond with named properties of ActOuter1; arg1 is 2, arg2 is 4 and localVar is 8. The function call returns ((2 + 4)/(2 + 8)).

Compare that with the execution of the otherwise identical function object referred to by secondGlobalVar, as secondGlobalVar(5). Calling the Activation object for this new execution context "ActInner2", the scope chain becomes: ActInner2-> ActOuter2-> global object. ActInner2 returns innerArg as 5 and ActOuter2 returns arg1, arg2 and localVar as 12, 3 and 8 respectively. The value returned is ((12 + 3)/(5 + 8)).

Execute secondGlobalVar again and a new Activation object will appear at the front of the scope chain but ActOuter2 will still be next object in the chain and the value of its named properties will again be used in the resolution of the identifiers arg1, arg2 and localVar.

This is how ECMAScript inner functions gain, and maintain, access to the formal parameters, declared inner functions and local variables of the execution context in which they were created. And it is how the forming of a closure allows such a function object to keep referring to those values, reading and writing to them, for as long as it continues to exist. The Activation/Variable object from the execution context in which the inner function was created remains on the scope chain referred to by the function object's [[scope]] property, until all references to the inner function are freed and the function object is made available for garbage collection (along with any now unneeded objects on its scope chain).

Inner function may themselves have inner functions, and the inner functions returned from the execution of functions to form closures may themselves return inner functions and form closures of their own. With each nesting the scope chain gains extra Activation objects originating with the execution contexts in which the inner function objects were created. The ECMAScript specification requires a scope chain to be finite, but imposes no limits on their length. Implementations probably do impose some practical limitation but no specific magnitude has yet been reported. The potential for nesting inner functions seems so far to have exceeded anyone's desire to code them.

What can be done with Closures?

Strangely the answer to that appears to be anything and everything. I am told that closures enable ECMAScript to emulate anything, so the limitation is the ability to conceive and implement the emulation. That is a bit esoteric and it is probably better to start with something a little more practical.

Example 1: setTimeout with Function References

A common use for a closure is to provide parameters for the execution of a function prior to the execution of that function. For example, when a function is to be provided as the first argument to the setTimout function that is common in web browser environments.

setTimeout schedules the execution of a function (or a string of javascript source code, but not in this context), provided as its first argument, after an interval expressed in milliseconds (as its second argument). If a piece of code wants to use setTimeout it calls the setTimeout function and passes a reference to a function object as the first argument and the millisecond interval as the second, but a reference to a function object cannot provide parameters for the scheduled execution of that function.

However, code could call another function that returned a reference to an inner function object, with that inner function object being passed by reference to the setTimeout function. The parameters to be used for the execution of the inner function are passed with the call to the function that returns it. setTimout executes the inner function without passing arguments but that inner function can still access the parameters provided by the call to the outer function that returned it:-

function callLater(paramA, paramB, paramC){
    /* Return a reference to an anonymous inner function created
       with a function expression:-
    */
    return (function(){
        /* This inner function is to be executed with - setTimeout
           - and when it is executed it can read, and act upon, the
           parameters passed to the outer function:-
        */
        paramA[paramB] = paramC;
    });
}

...

/* Call the function that will return a reference to the inner function
   object created in its execution context. Passing the parameters that
   the inner function will use when it is eventually executed as
   arguments to the outer function. The returned reference to the inner
   function object is assigned to a local variable:-
*/
var functRef = callLater(elStyle, "display", "none");
/* Call the setTimeout function, passing the reference to the inner
   function assigned to the - functRef - variable as the first argument:-
*/
hideMenu=setTimeout(functRef, 500);

Example 2: Associating Functions with Object Instance Methods

There are many other circumstances when a reference to a function object is assigned so that it would be executed at some future time where it is useful to provide parameters for the execution of that function that would not be easily available at the time of execution but cannot be known until the moment of assignment.

One example might be a javascript object that is designed to encapsulate the interactions with a particular DOM element. It has doOnClick, doMouseOver and doMouseOut methods and wants to execute those methods when the corresponding events are triggered on the DOM element, but there may be any number of instances of the javascript object created associated with different DOM elements and the individual object instances do not know how they will be employed by the code that instantiated them. The object instances do not know how to reference themselves globally because they do not know which global variables (if any) will be assigned references to their instances.

So the problem is to execute an event handling function that has an association with a particular instance of the javascript object, and knows which method of that object to call.

The following example uses a small generalised closure based function that associates object instances with element event handlers. Arranging that the execution of the event handler calls the specified method of the object instance, passing the event object and a reference to the associated element on to the object method and returning the method's return value.

/* A general function that associates an object instance with an event
   handler. The returned inner function is used as the event handler.
   The object instance is passed as the - obj - parameter and the name
   of the method that is to be called on that object is passed as the -
   methodName - (string) parameter.
*/
function associateObjWithEvent(obj, methodName){
    /* The returned inner function is intended to act as an event
       handler for a DOM element:-
    */
    return (function(e){
        /* The event object that will have been parsed as the - e -
           parameter on DOM standard browsers is normalised to the IE
           event object if it has not been passed as an argument to the
           event handling inner function:-
        */
        e = e||window.event;
        /* The event handler calls a method of the object - obj - with
           the name held in the string - methodName - passing the now
           normalised event object and a reference to the element to
           which the event handler has been assigned using the - this -
           (which works because the inner function is executed as a
           method of that element because it has been assigned as an
           event handler):-
        */
        return obj[methodName](e, this);
    });
}

/* This constructor function creates objects that associates themselves
   with DOM elements whose IDs are passed to the constructor as a
   string. The object instances want to arrange than when the
   corresponding element triggers onclick, onmouseover and onmouseout
   events corresponding methods are called on their object instance.
*/
function DhtmlObject(elementId){
    /* A function is called that retrieves a reference to the DOM
       element (or null if it cannot be found) with the ID of the
       required element passed as its argument. The returned value
       is assigned to the local variable - el -:-
    */
    var el = getElementWithId(elementId);
    /* The value of - el - is internally type-converted to boolean for
       the - if - statement so that if it refers to an object the
       result will be true, and if it is null the result false. So that
       the following block is only executed if the - el - variable
       refers to a DOM element:-
    */
    if(el){
        /* To assign a function as the element's event handler this
           object calls the - associateObjWithEvent - function
           specifying itself (with the - this - keyword) as the object
           on which a method is to be called and providing the name of
           the method that is to be called. The - associateObjWithEvent
           - function will return a reference to an inner function that
           is assigned to the event handler of the DOM element. That
           inner function will call the required method on the
           javascript object when it is executed in response to
           events:-
        */
        el.onclick = associateObjWithEvent(this, "doOnClick");
        el.onmouseover = associateObjWithEvent(this, "doMouseOver");
        el.onmouseout = associateObjWithEvent(this, "doMouseOut");
        ...
    }
}
DhtmlObject.prototype.doOnClick = function(event, element){
    ... // doOnClick method body.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
    ... // doMouseOver method body.
}
DhtmlObject.prototype.doMouseOut = function(event, element){
    ... // doMouseOut method body.
}

And so any instances of the DhtmlObject can associate themselves with the DOM element that they are interested in without any need to know anything about how they are being employed by other code, impacting on the global namespace or risking clashes with other instances of the DhtmlObject.

Example 3: Encapsulating Related Functionality

Closures can be used to create additional scopes that can be used to group interrelated and dependent code in a way that minimises the risk of accidental interaction. Suppose a function is to build a string and to avoid the repeated concatenation operations (and the creation of numerous intermediate strings) the desire is to use an array to store the parts of the string in sequence and then output the results using the Array.prototype.join method (with an empty string as its argument). The array is going to act as a buffer for the output, but defining it locally to the function will result in its re-creation on each execution of the function, which may not be necessary if the only variable content of that array will be re-assigned on each function call.

One approach might make the array a global variable so that it can be re-used without being re-created. But the consequences of that will be that, in addition to the global variable that refers to the function that will use the buffer array, there will be a second global property that refers to the array itself. The effect is to render the code less manageable, as, if it is to be used elsewhere, its author has to remember to include both the function definition and the array definition. It also makes the code less easy to integrate with other code because instead of just ensuring that the function name is unique within the global namespace it is necessary to ensure that the Array on which it is dependent is using a name that is unique within the global namespace.

A Closure allows the buffer array to be associated (and neatly packaged) with the function that is dependent upon it and simultaneously keep the property name to which the buffer array as assigned out of the global namespace and free of the risk of name conflicts and accidental interactions.

The trick here is to create one additional execution context by executing a function expression in-line and have that function expression return an inner function that will be the function that is used by external code. The buffer array is then defined as a local variable of the function expression that is executed in-line. That only happens once so the Array is only created once, but is available to the function that depends on it for repeated use.

The following code creates a function that will return a string of HTML, much of which is constant, but those constant character sequences need to be interspersed with variable information provided as parameter to the function call.

A reference to an inner function object is returned from the in-line execution of a function expression and assigned to a global variable so that it can be called as a global function. The buffer array is defined as a local variable in the outer function expression. It is not exposed in the global namespace and does not need to be re-created whenever the function that uses it is called.

/* A global variable - getImgInPositionedDivHtml - is declared and
   assigned the value of an inner function expression returned from
   a one-time call to an outer function expression.

   That inner function returns a string of HTML that represents an
   absolutely positioned DIV wrapped round an IMG element, such that
   all of the variable attribute values are provided as parameters
   to the function call:-
*/
var getImgInPositionedDivHtml = (function(){
    /* The - buffAr - Array is assigned to a local variable of the
       outer function expression. It is only created once and that one
       instance of the array is available to the inner function so that
       it can be used on each execution of that inner function.

       Empty strings are used as placeholders for the date that is to
       be inserted into the Array by the inner function:-
    */
    var buffAr = [
        '//index 1, DIV ID attribute
        '" style="position:absolute;top:',
        '',   //index 3, DIV top position
        'px;left:',
        '',   //index 5, DIV left position
        'px;width:',
        '',   //index 7, DIV width
        'px;height:',
        '',   //index 9, DIV height
        'px;overflow:hidden;\">        '',   //index 11, IMG URL
        '\" width=\"',
        '',   //index 13, IMG width
        '\" height=\"',
        '',   //index 15, IMG height
        '\" alt=\"',
        '',   //index 17, IMG alt text
        '\"><\/div>'
    ];
    /* Return the inner function object that is the result of the
       evaluation of a function expression. It is this inner function
       object that will be executed on each call to -
       getImgInPositionedDivHtml( ... ) -:-
    */
    return (function(url, id, width, height, top, left, altText){
        /* Assign the various parameters to the corresponding
           locations in the buffer array:-
        */
        buffAr[1] = id;
        buffAr[3] = top;
        buffAr[5] = left;
        buffAr[13] = (buffAr[7] = width);
        buffAr[15] = (buffAr[9] = height);
        buffAr[11] = url;
        buffAr[17] = altText;
        /* Return the string created by joining each element in the
           array using an empty string (which is the same as just
           joining the elements together):-
        */
        return buffAr.join('');
    }); //:End of inner function expression.
})();
/*^^- :The inline execution of the outer function expression. */

If one function was dependent on one (or several) other functions, but those other functions were not expected to be directly employed by any other code, then the same technique could be used to group those functions with the one that was to be publicly exposed. Making a complex multi-function process into an easily portable and encapsulated unit of code.

Other Examples

Probably one of the best known applications of closures is Douglas Crockford's technique for the emulation of private instance variables in ECMAScript objects. Which can be extended to all sorts of structures of scope contained nested accessibility/visibility, including the emulation of private static members for ECMAScript objects.

The possible application of closures are endless, understanding how they work is probably the best guide to realising how they can be used.

Accidental Closures

Rendering any inner function accessible outside of the body of the function in which it was created will form a closure. That makes closures very easy to create and one of the consequences is that javascript authors who do not appreciate closures as a language feature can observe the use of inner functions for various tasks and employ inner functions, with no apparent consequences, not realising that closures are being created or what the implications of doing that are.

Accidentally creating closures can have harmful side effects as the following section on the IE memory leak problem describes, but they can also impact of the efficiency of code. It is not the closures themselves, indeed carefully used they can contribute significantly towards the creation of efficient code. It is the use of inner functions that can impact on efficiency.

A common situation is where inner functions are used is as event handlers for DOM elements. For example the following code might be used to add an onclick handler to a link element:-

/* Define the global variable that is to have its value added to the
   - href - of a link as a query string by the following function:-
*/
var quantaty = 5;
/* When a link passed to this function (as the argument to the function
   call - linkRef -) an onclick event handler is added to the link that
   will add the value of a global variable - quantaty - to the - href -
   of that link as a query string, then return true so that the link
   will navigate to the resource specified by the - href - which will
   by then include the assigned query string:-
*/
function addGlobalQueryOnClick(linkRef){
    /* If the - linkRef - parameter can be type converted to true
       (which it will if it refers to an object):-
    */
    if(linkRef){
        /* Evaluate a function expression and assign a reference to the
           function object that is created by the evaluation of the
           function expression to the onclick handler of the link
           element:-
        */
        linkRef.onclick = function(){
            /* This inner function expression adds the query string to
               the - href - of the element to which it is attached as
               an event handler:-
            */
            this.href += ('?quantaty='+escape(quantaty));
            return true;
        };
    }
}

Whenever the addGlobalQueryOnClick function is called a new inner function is created (and a closure formed by its assignment). From the efficiency point of view that would not be significant if the addGlobalQueryOnClick function was only called once or twice, but if the function was heavily employed many distinct function objects would be created (one for each evaluation of the inner function expression).

The above code is not taking advantage of the fact that inner functions are becoming accessible outside of the function in which they are being created (or the resulting closures). As a result exactly the same effect could be achieved by defining the function that is to be used as the event handler separately and then assigning a reference to that function to the event handling property. Only one function object would be created and all of the elements that use that event handler would share a reference to that one function:-

/* Define the global variable that is to have its value added to the
   - href - of a link as a query string by the following function:-
*/
var quantaty = 5;

/* When a link passed to this function (as the argument to the function
   call - linkRef -) an onclick event handler is added to the link that
   will add the value of a global variable - quantaty - to the - href -
   of that link as a query string, then return true so that the link
   will navigate to the resource specified by the - href - which will
   by then include the assigned query string:-
*/
function addGlobalQueryOnClick(linkRef){
    /* If the - linkRef - parameter can be type converted to true
       (which it will if it refers to an object):-
    */
    if(linkRef){
        /* Assign a reference to a global function to the event
           handling property of the link so that it becomes the
           element's event handler:-
        */
        linkRef.onclick = forAddQueryOnClick;
    }
}
/* A global function declaration for a function that is intended to act
   as an event handler for a link element, adding the value of a global
   variable to the - href - of an element as an event handler:-
*/
function forAddQueryOnClick(){
    this.href += ('?quantaty='+escape(quantaty));
    return true;
}

As the inner function in the first version is not being used to exploit the closures produced by its use, it would be more efficient not to use an inner function, and thus not repeat the process of creating many essentially identical function objects.

A similar consideration applies to object constructor functions. It is not uncommon to see code similar to the following skeleton constructor:-

function ExampleConst(param){
    /* Create methods of the object by evaluating function expressions
       and assigning references to the resulting function objects
       to the properties of the object being created:-
    */
    this.method1 = function(){
        ... // method body.
    };
    this.method2 = function(){
        ... // method body.
    };
    this.method3 = function(){
        ... // method body.
    };
    /* Assign the constructor's parameter to a property of the object:-
    */
    this.publicProp = param;
}

Each time the constructor is used to create an object, with new ExampleConst(n), a new set of function objects are created to act as its methods. So the more object instances that are created the more function objects are created to go with them.

Douglas Crockford's technique for emulating private members on javascript objects exploits the closure resulting form assigning references to inner function objects to the public properties of a constructed object from within its constructor. But if the methods of an object are not taking advantage of the closure that they will form within the constructor the creation of multiple function objects for each object instantiation will make the instantiation process slower and more resources will be consumed to accommodate the extra function objects created.

In that case it would be more efficient to create the function object once and assign references to them to the corresponding properties of the constructor's prototype so they may be shared by all of the objects created with that constructor:-

function ExampleConst(param){
    /* Assign the constructor's parameter to a property of the object:-
    */
    this.publicProp = param;
}
/* Create methods for the objects by evaluating function expressions
   and assigning references to the resulting function objects to the
   properties of the constructor's prototype:-
*/
ExampleConst.prototype.method1 = function(){
    ... // method body.
};
ExampleConst.prototype.method2 = function(){
    ... // method body.
};
ExampleConst.prototype.method3 = function(){
    ... // method body.
};

The Internet Explorer Memory Leak Problem

The Internet Explorer web browser (verified on versions 4 to 6 (6 is current at the time of writing)) has a fault in its garbage collection system that prevents it from garbage collecting ECMAScript and some host objects if those host objects form part of a "circular" reference. The host objects in question are any DOM Nodes (including the document object and its descendants) and ActiveX objects. If a circular reference is formed including one or more of them, then none of the objects involved will be freed until the browser is closed down, and the memory that they consume will be unavailable to the system until that happens.

A circular reference is when two or more objects refer to each other in a way that can be followed and lead back to the starting point. Such as object 1 has a property that refers to object 2, object 2 has a property that refers to object 3 and object 3 has a property that refers back to object 1. With pure ECMAScript objects as soon as no other objects refer to any of objects 1, 2 or 3 the fact that they only refer to each other is recognised and they are made available for garbage collection. But on Internet Explorer, if any of those objects happen to be a DOM Node or ActiveX object, the garbage collection cannot see that the circular relationship between them is isolated from the rest of the system and free them. Instead they all stay in memory until the browser is closed.

Closures are extremely good at forming circular references. If a function object that forms a closure is assigned as, for example, and event handler on a DOM Node, and a reference to that Node is assigned to one of the Activation/Variable objects in its scope chain then a circular reference exists. DOM_Node.onevent -> function_object.[[scope]] -> scope_chain -> Activation_object.nodeRef -> DOM_Node. It is very easy to do, and a bit of browsing around a site that forms such a reference in a piece of code common to each page can consume most of the systems memory (possibly all).

Care can be taken to avoid forming circular references and remedial action can be taken when they cannot otherwise be avoided, such as using IE's onunload event to null event handling function references. Recognising the problem and understanding closures (and their mechanism) is the key to avoiding this problem with IE.

comp.lang.javascript FAQ notes T.O.C.

Written by Richard Cornford. March 2004.
With corrections and suggestions by:-
- Martin Honnen.
- Yann-Erwan Perio (Yep).
- Lasse Reichstein Nielsen. (definition of closure)
- Mike Scirocco.
- Dr John Stockton.

이클립스 단축키

2009-05-25T11:17:58Z

이클립스 단축키 정리

유용해보이는 내용을 발췌해옵니다.

타 사이트 블러그 이므로.. 직접 복사한 것입니다.

===== 실행 =====
1. Ctrl + F11 : 바로 전에 실행했던 클래스 실행

===== 소스 네비게이션 =====
1. Ctrl + 마우스커서(혹은 F3) : 클래스나 메소드 혹은 멤버를 상세하게 검색하고자 할때
2. Alt + ->, Alt + <- : 이후, 이전
3. Ctrl + o : 해당 소스의 메소드 리스트를 확인하려 할때
4. F4 : 클래스명을 선택하고 누르면 해당 클래스의 Hierarchy 를 볼 수 있다.

===== 문자열 찾기 =====
1. Ctrl + k : 찾고자 하는 문자열을 블럭으로 설정한 후 키를 누른다.
2. Ctrl + Shift + k : 역으로 찾고자 하는 문자열을 찾아감.
3. Ctrl + j : 입력하면서 찾을 수 있음.
4. Ctrl + Shift + j : 입력하면서 거꾸로 찾아갈 수 있음.
5. Ctrl + f : 기본적으로 찾기

===== 소스 편집 =====
1. Ctrl + Space : 입력 보조장치(Content Assistance) 강제 호출 => 입력하는 도중엔 언제라도 강제 호출 가능하다.
2. F2 : 컴파일 에러의 빨간줄에 커서를 갖져다가 이 키를 누르면 에러의 원인에 대한 힌트를 제공한다.
3. Ctrl + l : 원하는 소스 라인으로 이동
로컬 히스토리 기능을 이용하면 이전에 편집했던 내용으로 변환이 가능하다.
4. Ctrl + Shift + Space : 메소드의 가로안에 커서를 놓고 이 키를 누르면 파라미터 타입 힌트를 볼 수 있다.

5. 한줄 삭제 CTRL + D

6. 파일 닫기 : CTRL+W

7. 들여쓰기 자동 수정. (3.0 NEW) : CTRL+I

8. 블록 주석(/*..*/) 추가.(3.0 NEW): CTRL+SHIFT+/

8.1 Ctrl + / 해주면 여러줄이 한꺼번에 주석처리됨. 주석 해제하려면 반대로 하면 됨.
9. 위(아래)줄과 바꾸기 : ALT+UP(DOWN)

10. 블록 선택하기. : ALT+SHIFT+방향키

11. 메소드의 파라메터 목록 보기. : CTRL+SHIFT+SPACE
12. 자동으로 import 하기 : CTRL+SHIFT+O

13. 열린 파일 모두 닫기 : CTRL + SHIFT + F4

14. 블록 주석 제거 : CTRL+SHIFT+

15. 전체화면 토글 : CTRL+M

16. 한줄(블럭) 복사 : Ctrl + Alt + 위(아래)

17. 다음 annotation(에러, 워닝, 북마크 가능)으로 점프 : Ctrl + , or .

18. 퀵 픽스 : Ctrl + 1
19. 메소드 정의부로 이동 : F3
20. 하이어라키 팦업 창 띄우기(인터페이스 구현 클래스간 이동시 편리) : Ctrl + T

21. 메소드나 필드 이동하기 CTRL + O
22. ULTRAEDIT나 EDITPLUS 의 CTRL+TAB 과 같은 기능. : CTRL+F6

===== 템플릿 사용 =====
1. sysout 입력한 후 Ctrl + Space 하면 System.out.println(); 으로 바뀐다.
2. try 입력한 후 Ctrl + Space 하면 try-catch 문이 완성된다.
3. for 입력한 후 Ctrl + Space 하면 여러가지 for 문을 완성할 수 있다.
4. 템플릿을 수정하거나 추가하려면 환경설정/자바/편집기/템플리트 에서 할 수 있다.

===== 메소드 쉽게 생성하기 =====
1. 클래스의 멤버를 일단 먼저 생성한다.
2. override 메소드를 구현하려면 : 소스->메소드대체/구현 에서 해당 메소드를 체크한다.
3. 기타 클래스의 멤버가 클래스의 오브젝트라면 : 소스->위임메소드 생성에서 메소드를 선택한다.

===== organize import =====
1. 자바파일을 여러개 선택한 후 소스 -> 가져오기 체계화 해주면 모두 적용된다.

===== 소스 코드 형식 및 공통 주석 설정 =====
1. 환경설정 -> 자바 -> 코드 스타일 -> 코드 포멧터 -> 가져오기 -> 프로파일.xml 을 불러다가 쓰면 된다.
2. 또한 다수의 자바파일에 프로파일을 적용하려면 패키지 탐색기에서 패키지를 선택한 후 소스 -> 형식화를 선택하면 된다.
3. 환경설정 -> 자바 -> 코드 스타일 -> 코드 템플리트 -> 가져오기 -> 템플리트.xml 을 불러다가 쓰면 된다.

===== 에디터 변환 =====
1. 에디터가 여러 파일을 열어서 작업중일때 Ctrl + F6 키를 누르면 여러파일명이 나오고 F6키를 계속 누르면 아래로
2. Ctrl + Shift + F6 키를 누르면 위로 커서가 움직인다.
3. Ctrl + F7 : 뷰간 전환
4. Ctrl + F8 : 퍼스펙티브간 전환
5. F12 : 에디터로 포커스 위치

[script] String 문자열 byte 값 계산하기.

2009-05-01T16:15:45Z

가끔 사이트에서 덧글 같은 걸 쓰다보면 문자를 입력하면 조금한 Box에 byte값이 계산되어서 나타나게 된다.
어떻게 하는 것 일까...여러 가지 방법이 있을 수 있겠지만...나는 Script를 이용해서 만들어 보았다.
아래 그림은 다음 카페에서 사용하고 있는 덧글쓰는 부분이다.

위 그림에서 "안녕하세요~!"가 12byte 라고 나와 있네~!^^

위 그림과 똑같은 디자인은 아니지만 간단하게 Textbox 2개를 만들어서 위와 같이 표현하도록 만들어 보았다.
에디터플러스를 실행을 해서 아래와 같은 코드를 입력 했다. 간단한 디자인(?!)이다.ㅋ

HTML 코드

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>문자열 byte표현TITLE>

HEAD>

<BODY>

<input type="text" id="txtbyte" style="width:50px;" readonly>/600byte

BODY>

HTML>

위 코드를 실행 브라우저로 보면 간단한 textbox 2개가 나타날 것이다. 여기에서 글을 입력할 textbox에 onKeyUp이벤트를 주고, Scripte 함수를 호출해서 문자의 byte 값을 나타낸 다음에 readonly로 되어있는 textbox에 표현해 주면 될 것 이다. 스크립트 합수는OntextCheck() 이다.

아래 스크립트 함수를 사이에 입력한다.

Scirpt 함수

function OntextCheck(obj)

{

var str = new String(obj.value);

var _byte = 0;

if(str.length != 0)

{

for (var i=0; i < str.length; i++)

{

var str2 = str.charAt(i);

if(escape(str2).length > 4)

{

_byte += 2;

}

else

{

_byte++;

}

document.getElementById("txtbyte").value = _byte;

}

script>

위 스트립트 함수중에 중요한 메소드는 escape 일 것이다.
escape 함수는 String 개체를 모든 컴퓨터에서 읽을 수 있도록 인코딩(encoding) 해 준다.(ASCII 글자로 접속할 수 있도록 인코딩한다)
예를 들어 "abcd"는 인코딩하면 "abcd"로 나타나고, "글"은 "%uAE00" 인코딩이 된다.
ASCII 코드를 인코딩 된 것을 다시 디코딩(decoding)하려면 unescape 를 사용하면 된다.
이렇게 인코딩 된 값의 문자 길이를 알아서 ++ 시켜주면 되는 것이다.

자 그럼 테스트 해보자~!

음~~ 잘되는 군~!^^
스크립트도 나름 잼있는 것 같다~^^

PNG ==> ICO 컨버터

2009-04-29T13:40:00Z

좋은점

1. 무설치 프로그램이다.

2. 가볍다.

3. 따로 저장하지 않아도 temp파일에 저장된다.

AveIconefier.zip

단점

1. 많이 써보지 못하여 잘 모르겠다

ㅋㅋㅋㅋㅋㅋ 정말로 단점은 아직 잘 모르겠네요.

요긴하게 쓰시길 바래요 ㅎ

MutipartRequest 사용하기

2009-04-28T16:37:40Z

- MultipartRequest 파일 업로드르 위한 설정.

1. 사이트 servlets.com 접속.

2. com.oreilly.servlet클릭 -> cos파일을 다운로드.

3. 압축을 푼후 [lib폴더] 안의 [cos.jar파일]을 import한 후 사용.

▶ 업로드 할때

1. cos.jar 파일을 프로젝트에 import 한 후

2. 아래 Source 처럼 저장 경로를 설정해주면 파일이 바로 저장 된다.

MultipartRequest multi = new MultipartRequest(request, savePath, sizeLimit, "EUC-KR", new DefaultFileRenamePolicy());

property 파일 만들기.

2009-04-28T16:30:43Z

-property파일 만들기

1. [변수명]=[입력될내용] <== 각각 변수를 쌍으로 입력하여 파일 생성.

1) 파일 확장자는 [propterties]

2. 입력된 글자를 아스키 코드로 변환하기.(다른 외국어를 이용할 때 사용)

- jdk bin폴더 안에서

==>> native2ascii [원본파일명] [생성될파일명]

▶ JSP에서 서블릿으로 바뀐 파일이 있는 곳.(경로가 복잡하긴 하지만 error 코드를 찾아내어 수정할 때 용이하다.)

C:\eclipse-jee-ganymede-SR1-win32\eclipse\workspace\.metadata\

.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost

JSP 사용시 알아두어야 할 설정들

2009-04-21T16:31:45Z

//form전송시 method 방시을 get으로 설정하였을 때 받을 값을 한글로 처리하는 방법

//(tomcat 5.0은 자동으로 한글 처리를 해주지만 6.0은 그렇지 못하다 프로그래머가 직접 한글 사용시 마다 바꾸어주어야함)

search = new String(search.getBytes("ISO-8859-1"), "EUC_KR"); //get방식일때 처리 방법(tomcat 6.0)

MBC 앵커 교채 논란.

2009-04-14T13:22:04Z

MBC 앵커들도 제작거부

연합뉴스 기사전송 2009-04-14 11:01 최종수정 2009-04-14 11:16

관심지수: 55

글씨 확대 글씨 축소

(서울=연합뉴스) 김영현 기자 = MBC '뉴스24'의 김주하 앵커를 비롯한 일부 앵커도 '뉴스데스크' 신경민 앵커 교체에 항의해 제작거부에 나섰다.

지난 9일부터 제작거부에 들어간 MBC 기자회 차장ㆍ평기자 비상대책위원회(이하 비대위) 측은 14일 "비대위 소속 앵커와 편집부 기자의 경우 뉴스의 파행을 최소화하기 위해 그동안 제작에 참여해 왔다"면서 "하지만 이들도 오늘 오전 9시부터 제작거부에 돌입하기로 했다"고 밝혔다.

이에 따라 김주하 앵커를 비롯해 '뉴스투데이'의 박상권, 현원섭, 신기원 앵커 등이 진행석에서 물러난다. MBC는 이들 대신 아나운서 등을 투입하는 방안을 놓고 검토하고 있다.

비대위는 이날 오전 11시30분 여의도 MBC방송센터 로비에서 피켓 시위를 펼치고 오후에는 총회를 열 예정이다. MBC 노동조합 조합원들도 이날 오전 8시부터 MBC경영센터 10층 임원실 앞 복도에서 피켓 시위를 벌이고 있다.

한편 비대위는 13일 총회 후 발표한 성명에서 "과연 앵커교체가 경쟁력 강화를 위한 것인가? 정치적 압력은 없었는가?"라고 되물으면서 "보도국장조차 지난 7일 보도본부 기별 대표들과의 면담에서 '청와대의 압력이 있다는 것을 나도 안다'고 답변한 바 있다"고 주장했다.

청와대 압력이 있었다니.... 언론의 자유는 이미 없어진걸까요???

tag : mbc, 청와대 압력, 앵커 교체

apache tomcat 설치 및 이클립스 세팅

2009-04-10T17:18:48Z

1. Tomcat을 설치해보자.

- http://tomcat.apache.org <---- tomcat을 다운 받을 수 있다.

- 파일 압축을 풀어 원하는 위치에 놓고 사용하면 된다.

2. 환경변수 만들기

- 내컴퓨터(우클릭) -> 속성 -> 고급(탭) -> 환경변수

- CATALINA_HOME / C:\apache-tomcat-6.0.18

3. tomcat 서버 실행

- cmd창에서 'C:\apache-tomcat-6.0.18\bin'로 이동 후

C:\apache-tomcat-6.0.18\bin\catalina start <--- tomcat 실행

C:\apache-tomcat-6.0.18\bin\catalina stop <--- tomcat 정지.

4. 웹브라우저에서 접근(tomcat 초기화면이 뜸)

- 익스플로러에서

http://localhost:8080

5. 웹브라우저에서 접근 방법 변경.

- C:\apache-tomcat-6.0.18\conf\server.xml 파일을 연다.

connectionTimeout="20000"

redirectPort="8443" />

- 위의 소스 부분을 찾아 port="8080" 을 port="80"으로 바꾸어 주면 브라우저에서

http://localhost 으로 접근 가능하다.

********************이클립스 tomcat 세팅*************************

이클립스 실행!

//이클립스 tomcat 환경설정.

- window -> Preferences -> Server(좌측 트리에서) -> Runtime Environments -> Add(우측) 클릭 -> 설치한 Apache Tomcat 버전을 선택

-> Finish(tomcat 환경 설정됨)

//Tomcat 구동할 프로젝트 만들기.

- File -> New -> Other -> Server(트리에서) -> Server 선택 -> Next 클릭 -> Finish 클릭(서버 프로젝트가 생성됨)

- 이제 아래 작업창의 Server 탭에서 tomcat을 자유로이 실행하고 멈출 수 있다.

//서버에 연동시킬 수 있는 프로젝트 만들기.

- File -> New -> Other -> Web -> Dynamic Web Project 선택 -> Next 클릭 -> Project name 입력 ->

Target Runtime에서 New 클릭 -> Tomcat 버전 선택 -> Finish 클릭 -> Next 클릭 -> Context Root 값을 없앰(브라우저에서 접근시 뒤에 아무런 접근 변수 없이 접근하기 위해) -> Finish 클릭(서버에 연동시킬 수 있는 프로젝트가 생성됨)

- 생성된프로젝트 -> WebContent에 JSP파일을 하나 생성한다.

- 아래 작업창에서 Server 탭을 선택한 후 마우스우클릭을 하면 Add and Remove Projects을 선택해 Server에 프로젝트를 추가 삭제 할 수 있다.

- 이제 http://localhost/first.jsp 이런 식으로 서버파일에 접근 할 수 있다.

tag : tomcat 설치

가장 기본적인 태그들

2009-04-09T14:38:51Z

네이버 지식인 ssepal님 글 발췌.

◈ 가장 기본적인 태그들

HTML 문서의 구조는 헤더(Header)와 본문(Body)의 두 개 부분으로 구분할 수 있습니다. 물론 이 두 개의 부분을 구분하는 것도 역시 태그의 역할입니다. 아래의 HTML 문서는 가장 단순한 문서를 예로 보여주고 있습니다.

홈페이지 제목

홈페이지 본문

▶ : 현재 파일이 HTML 문서임을 브라우저에 알려주는 Tag로 HTML 문서 안에서 가장 처음과 끝에 써주어야 합니다. 그러나 대부분의 브라우저에서는 이 태그가 없어도 제대로 인식을 합니다. 그러나 표준을 지키는 의미에서 가급적 사용하도록 합시다.

▶ : HTML 문서에 대한 일반적인 정보를 표시하는 일종의 머리말로서 실제 브라우저 화면에는 출력되지 않습니다. (이 부분에 자바스크립트, 스타일시트 등의 소스를 넣을 수도 있다.)

▶ : HTML 문서의 제목을 정의하는 곳으로 여기서 쓴 제목은 브라우저의 제목 표시줄에 출력됩니다. (head 속에 포함된다.)

▶ : HTML 문서의 실제적인 내용이 들어가는 곳으로, 브라우저 화면에 곧바로 나타나게 됩니다. 이 태그에는 6개의 속성이 있습니다. (아래의 표를 참조하세요.)

속성	설명	예제
BACKGROUND	배경 이미지 지정
BGCOLOR	배경색 지정
TEXT	글자 색 지정
LINK	링크된 글자의 색 지정
VLINK	방문한 링크 색 지정
ALINK	클릭했을 때 링크 색 지정

▶ : 문서의 제목을 위해 사용되는 것으로 n은 1에서 6까지 총 6가지의 종류가 있습니다.

예제
문서의 제목	문서의 제목
문서의 제목	문서의 제목
문서의 제목	문서의 제목
문서의 제목	문서의 제목
문서의 제목	문서의 제목
문서의 제목	문서의 제목

속성 : LEFT : 제목 : 제목을 왼쪽으로 정열합니다.
CENTER : 제목 : 제목을 가운데 정열합니다.
RIGHT : 제목 : 제목을 오른쪽으로 정열합니다.

▶

: 단락이 시작하는 곳이나 단락이 끝나는 곳에 넣어서 단락을 구분하는 역할을 합니다.

태그는

태그를 사용하지 않아도 상관 없다.

예제

HTML 단락 테스트

단락

첫번째 단락

두번째 단락

<예제 실행화면>

속성 : LEFT :

단락

: 단락을 왼쪽으로 정열한다.
CENTER :

단락

: 단락을 가운데 정열한다.
RIGHT :

단락

: 단락을 오른쪽으로 정열한다.

▶
: 문서의 줄을 바꿀 때 이용하는 태그입니다.. (한 줄을 바꿀 때 사용합니다. 두 줄 이상 바꿀 때는

태그를 사용하도록 하세요.)

▶

: 문단을 가운데로 정렬시키는 기능을 합니다. 태그를 만날 때까지 모두 가운데로 정렬됩니다.

▶

: 수평선을 만들어 줍니다.

속성 : SIZE, WIDTH, ALIGN=LEFT, CENTER, RIGHT

SIZE 속성의 변화

NOSHADE : 속이 찬 수평선을 그려준다.

: 테이블의 열을 만듭니다. 이 태그가 나오지 않으면 모든 셀이 한 줄로 나타나게 됩니다.

◈ 표 만들기

웹페이지를 만드는데 가장 중요한 요소는 테이블입니다. 테이블에 대한 내용을 배우기 전에 이 사실을 명심하시길 바랍니다.

▶

: 이 태그들은 테이블의 영역을 선언하는 태그로서 테이블의 처음과 끝을 지정합니다. 실제로 테이블의 모양을 만드는 태그들은 이 블록의 내부에 포함되어야 합니다.

: 테이블의 열을 만듭니다.

태그의 속성

BORDER	표의 테두리를 결정한다. 숫자를 할당하면 해당 숫자의 테두리가 그려진다.
CELLSPACING	셀과 셀 사이의 간격을 바꾸고 싶을 때 사용한다.
CELLPADDING	셀 내부에서의 간격을 바꾸고 싶을 때 사용한다.
WIDTH	가로 넓이를 지정한다.
HEIGHT	세로 높이를 지정한다.
ALIGN	표의 정렬 방식을 지정한다.

▶

		태그의 속성
ALIGN	헤더의 셀에 들어가는 제목의 정렬방식. 디폴트값은 CENTER이다. 속성: LEFT, RIGHT, CENTER
VALIGN	헤더의 셀에 들어가는 제목의 수직정렬방식으로, 네가지 값이 있다. 디폴트값은 TOP 이다. 속성: TOP, MIDDLE, BOTTOM, BASELINE
ROWSPAN	헤더의 셀이 몇개의 행에 걸쳐 있는지를 정하는 곳 디폴트값은 1이다.
COLSPAN	헤더의 셀이 몇개의 열에 걸쳐 있는지를 정하는 곳 디폴트값은 1이다.
WIDTH	셀의 가로 넓이를 지정한다.
HEIGHT	셀의 세로 높이를 지정한다.
NOWRAP	셀의 끝에서 다음 줄로 자동으로 내려가는을 금지한다.

▶

예제

복잡한 표 작성

<예제 실행 화면>

※ 표의 빈칸 처리방법 :

을 셀의 빈칸에 넣어주면 됩니다.

▶ : 거의 모든 면에서 태그와 동일하지만 이 태그로 만들어진 셀은 텍스트가 볼드체로, 중앙 정렬해서 보여준다는 것이 다릅니다..

		태그의 속성
ALIGN	헤더의 셀에 들어가는 제목의 정렬방식. 디폴트값은 CENTER이다. 속성: LEFT, RIGHT, CENTER
VALIGN	헤더의 셀에 들어가는 제목의 수직정렬방식으로, 네가지 값이 있다. 디폴트값은 TOP 이다. 속성: TOP, MIDDLE, BOTTOM, BASELINE
ROWSPAN	헤더의 셀이 몇개의 행에 걸쳐 있는지를 정하는 곳 디폴트값은 1이다.
COLSPAN	헤더의 셀이 몇개의 열에 걸쳐 있는지를 정하는 곳 디폴트값은 1이다.
WIDTH	셀의 가로 넓이를 지정한다.
HEIGHT	셀의 세로 높이를 지정한다.
NOWRAP	셀의 끝에서 다음 줄로 자동으로 내려가는을 금지한다.

tag : 기본 html